diff --git a/beam/dev/vite.config.js b/beam/dev/vite.config.js index 876b026e..367eb0cb 100644 --- a/beam/dev/vite.config.js +++ b/beam/dev/vite.config.js @@ -1,21 +1,7 @@ -import { defineConfig } from 'vite' import { resolve } from 'path' import vue from '@vitejs/plugin-vue' -const resolveSCSSPath = () => { - if (__dirname.endsWith('dev')) { - return resolve(__dirname, 'variables.scss') - } else if (__dirname.endsWith('src')) { - return resolve(__dirname, './../dev/variables.scss') - } -} - module.exports = { - css: { - preprocessorOptions: { - scss: { additionalData: `@import "${resolveSCSSPath()}";` }, - }, - }, build: { lib: { entry: resolve(__dirname, '../src/index.js'), diff --git a/beam/dist/beam.mjs b/beam/dist/beam.mjs new file mode 100644 index 00000000..8517bb54 --- /dev/null +++ b/beam/dist/beam.mjs @@ -0,0 +1,520 @@ +import { openBlock as i, createElementBlock as m, renderSlot as _, createElementVNode as d, createTextVNode as j, normalizeClass as U, toDisplayString as h, createCommentVNode as y, pushScopeId as H, popScopeId as z, resolveComponent as $, createBlock as f, Fragment as W, renderList as Y, resolveDynamicComponent as G, withCtx as M, createVNode as J, withDirectives as K, vShow as Q, defineComponent as S, computed as R, watch as N, h as I, inject as X, onMounted as Z, onUpdated as tt, onBeforeUnmount as et, reactive as nt, readonly as ot } from "vue"; +const p = (t, e) => { + const n = t.__vccOpts || t; + for (const [r, l] of e) + n[r] = l; + return n; +}, at = { + name: "Navbar", + methods: { + handlePrimaryAction() { + this.$emit("click"); + } + } +}, st = { class: "beam__navbar" }, rt = /* @__PURE__ */ d("span", { class: "home-icon" }, "⬣", -1), lt = /* @__PURE__ */ d("h1", { class: "nav-title" }, "TITLE", -1), ct = { class: "navbar-action-wrapper" }; +function it(t, e, n, r, l, o) { + return i(), m("nav", st, [ + _(t.$slots, "icon", {}, () => [ + rt + ]), + _(t.$slots, "title", {}, () => [ + lt + ]), + d("div", ct, [ + d("button", { + class: "navbar-action btn", + onClick: e[0] || (e[0] = (...a) => o.handlePrimaryAction && o.handlePrimaryAction(...a)) + }, [ + _(t.$slots, "navbaraction", {}, () => [ + j("Action") + ]) + ]) + ]) + ]); +} +const E = /* @__PURE__ */ p(at, [["render", it]]), dt = { + name: "ListAnchor", + props: { + to: { + type: String, + required: !1, + default: "" + } + } +}, ut = ["href"]; +function mt(t, e, n, r, l, o) { + return i(), m("a", { + href: n.to, + class: "beam__listanchor" + }, [ + _(t.$slots, "default") + ], 8, ut); +} +const k = /* @__PURE__ */ p(dt, [["render", mt]]), pt = { + name: "ItemCount", + props: { + value: { + type: Number, + required: !1, + default: 0 + }, + denominator: { + type: Number, + required: !0 + }, + uom: { + type: String, + required: !1, + default: null + }, + editable: { + type: Boolean, + required: !1, + default: !1 + } + }, + data() { + return { + count: this.value + }; + }, + methods: { + handleInput(t) { + t.preventDefault(), t.stopPropagation(), this.count = Number(t.target.innerHTML.replace(/[^0-9]/g, "")), this.$emit("input", this.count); + } + }, + computed: { + countColor() { + return this.count === this.denominator; + } + }, + watch: { + value() { + this.count = this.value; + } + } +}, _t = { class: "beam__itemcount" }, ft = ["contenteditable"], ht = { key: 0 }; +function $t(t, e, n, r, l, o) { + return i(), m("div", _t, [ + d("span", { + contenteditable: n.editable, + class: U({ alert: o.countColor === !1 }), + onInput: e[0] || (e[0] = (a) => o.handleInput(a)), + onClick: e[1] || (e[1] = (a) => o.handleInput(a)) + }, h(l.count), 43, ft), + d("span", null, "/" + h(n.denominator), 1), + n.uom ? (i(), m("span", ht, "  " + h(n.uom), 1)) : y("", !0) + ]); +} +const g = /* @__PURE__ */ p(pt, [["render", $t]]); +const bt = { + // make this v-model sensitive from parent + name: "ItemCheck", + props: { + value: { + type: Boolean, + required: !1, + default: !1 + } + }, + data() { + return { + checked: this.value + }; + }, + methods: { + handleInput(t) { + this.$emit("input", this.checked); + } + } +}, vt = (t) => (H("data-v-66aa3656"), t = t(), z(), t), yt = { class: "container" }, kt = ["checked"], gt = /* @__PURE__ */ vt(() => /* @__PURE__ */ d("div", { + class: "checkmark", + tabindex: "0" +}, null, -1)); +function wt(t, e, n, r, l, o) { + return i(), m("label", yt, [ + d("input", { + type: "checkbox", + checked: n.value, + onInput: e[0] || (e[0] = (...a) => o.handleInput && o.handleInput(...a)), + tabindex: "-1" + }, null, 40, kt), + gt + ]); +} +const w = /* @__PURE__ */ p(bt, [["render", wt], ["__scopeId", "data-v-66aa3656"]]), Ct = { + name: "ListItem", + components: { + ItemCount: g, + ItemCheck: w + }, + props: { + item: { + type: Object, + required: !0 + } + } +}, It = { + tabindex: "0", + class: "beam__listitem" +}, Mt = { class: "beam__listtext" }; +function St(t, e, n, r, l, o) { + const a = $("ItemCount"), s = $("ItemCheck"); + return i(), m("li", It, [ + d("div", Mt, [ + d("label", null, h(n.item.label), 1), + d("p", null, h(n.item.description), 1) + ]), + n.item.count ? (i(), f(a, { + key: 0, + modelValue: n.item.count.count, + "onUpdate:modelValue": e[0] || (e[0] = (c) => n.item.count.count = c), + denominator: n.item.count.of, + uom: n.item.count.uom, + editable: !0 + }, null, 8, ["modelValue", "denominator", "uom"])) : y("", !0), + n.item.hasOwnProperty("checked") ? (i(), f(s, { + key: 1, + modelValue: n.item.checked, + "onUpdate:modelValue": e[1] || (e[1] = (c) => n.item.checked = c) + }, null, 8, ["modelValue"])) : y("", !0) + ]); +} +const C = /* @__PURE__ */ p(Ct, [["render", St]]), Nt = { + name: "ListView", + components: { + ListItem: C, + ListAnchor: k + }, + props: { + items: { + type: Array, + required: !0 + } + }, + created() { + window.addEventListener("scroll", this.handleScroll); + }, + destroyed() { + window.removeEventListener("scroll", this.handleScroll); + }, + methods: { + handleScroll() { + const t = document.documentElement.scrollHeight - window.innerHeight, e = document.documentElement.scrollTop; + t - e <= 2 && this.$emit("scrollbottom"); + } + } +}, Et = { class: "beam__listview" }; +function Lt(t, e, n, r, l, o) { + const a = $("ListItem"); + return i(), m("ul", Et, [ + (i(!0), m(W, null, Y(n.items, (s, c) => (i(), m("li", { key: c }, [ + s.linkComponent ? (i(), f(G(s.linkComponent), { + key: 0, + to: s.route, + tabindex: "-1" + }, { + default: M(() => [ + J(a, { item: s }, null, 8, ["item"]) + ]), + _: 2 + }, 1032, ["to"])) : (i(), f(a, { + key: 1, + item: s + }, null, 8, ["item"])) + ]))), 128)) + ]); +} +const L = /* @__PURE__ */ p(Nt, [["render", Lt]]), xt = { + name: "ScanInput", + data() { + return { + barcode: "" + }; + }, + methods: { + handleScanInput(t) { + t.target.tagName !== "INPUT" && (t.key !== "Enter" ? this.barcode += `${t.key}` : (this.$emit("scaninput", this.barcode), this.barcode = "")); + } + }, + mounted() { + document.addEventListener("keypress", (t) => { + this.handleScanInput(t); + }); + }, + destroyed() { + window.removeEventListener("keypress", (t) => { + this.handleScanInput(t); + }); + } +}, At = { id: "scan_input" }; +function Bt(t, e, n, r, l, o) { + return i(), m("div", At); +} +const x = /* @__PURE__ */ p(xt, [["render", Bt]]), Pt = { + name: "ActionFooter", + methods: { + handleFooterAction() { + this.$emit("click"); + } + } +}, Vt = { class: "beam__actionfooter" }, Tt = { class: "footer-action-wrapper" }; +function Dt(t, e, n, r, l, o) { + return i(), m("footer", Vt, [ + d("span", Tt, [ + d("button", { + class: "footer-action btn btn--dark", + onClick: e[0] || (e[0] = (...a) => o.handleFooterAction && o.handleFooterAction(...a)) + }, [ + _(t.$slots, "default") + ]) + ]) + ]); +} +const A = /* @__PURE__ */ p(Pt, [["render", Dt]]), Ft = { + name: "BeamModal", + props: ["showModal"] +}, qt = { class: "beam__modal" }; +function Ot(t, e, n, r, l, o) { + const a = $("portal"); + return i(), f(a, { to: "beam__modal_outlet" }, { + default: M(() => [ + K(d("div", qt, [ + d("button", { + class: "btn", + onClick: e[0] || (e[0] = (s) => t.$emit("closemodal")) + }, "Close Modal"), + _(t.$slots, "default", { + onClosemodal: e[1] || (e[1] = (s) => t.$emit("closemodal")), + onConfirmmodal: e[2] || (e[2] = (s) => t.$emit("confirmmodal")) + }) + ], 512), [ + [Q, n.showModal] + ]) + ]), + _: 3 + }); +} +const B = /* @__PURE__ */ p(Ft, [["render", Ot]]), jt = { + name: "BeamModalOutlet" +}; +function Ut(t, e, n, r, l, o) { + const a = $("portal-target"); + return i(), f(a, { name: "beam__modal_outlet" }); +} +const P = /* @__PURE__ */ p(jt, [["render", Ut]]), Ht = { + name: "ConfirmDialog", + methods: { + confirmModal() { + this.$emit("confirmmodal"); + }, + closeModal() { + this.$emit("closemodal"); + } + } +}, zt = { class: "beam__modal-confirm" }, Wt = /* @__PURE__ */ d("h2", null, "Would you like to continue?", -1); +function Yt(t, e, n, r, l, o) { + return i(), m("div", zt, [ + Wt, + d("button", { + class: "btn btn--dark", + onClick: e[0] || (e[0] = (...a) => o.confirmModal && o.confirmModal(...a)) + }, "Yes"), + d("button", { + class: "btn btn--dark", + onClick: e[1] || (e[1] = (...a) => o.closeModal && o.closeModal(...a)) + }, "No") + ]); +} +const V = /* @__PURE__ */ p(Ht, [["render", Yt]]), T = Symbol("wormhole"); +function D() { + const t = X(T); + if (!t) + throw new Error(` + [portal-vue]: Necessary Injection not found. Make sur you installed the plugin properly.`); + return t; +} +const F = typeof window < "u"; +function Gt(t, e) { + return t.map((n, r) => [r, n]).sort(function(n, r) { + return e(n[1], r[1]) || n[0] - r[0]; + }).map((n) => n[1]); +} +function Jt(t, e) { + const n = D(); + function r() { + if (!F) + return; + const { to: o, name: a, order: s } = t; + e.default ? n.open({ + to: o, + from: a, + order: s, + content: e.default + }) : l(); + } + function l(o) { + n.close({ + to: o ?? t.to, + from: t.name + }); + } + Z(() => { + t.disabled || r(); + }), tt(() => { + t.disabled ? l() : r(); + }), et(() => { + l(); + }), N( + () => t.to, + (o, a) => { + t.disabled || (a && a !== o && l(a), r()); + } + ); +} +const Kt = S({ + compatConfig: { MODE: 3 }, + name: "portal", + props: { + disabled: { type: Boolean }, + name: { type: [String, Symbol], default: () => Symbol() }, + order: { type: Number }, + slotProps: { type: Object, default: () => ({}) }, + to: { + type: String, + default: () => String(Math.round(Math.random() * 1e7)) + } + }, + setup(t, { slots: e }) { + return Jt(t, e), () => t.disabled && e.default ? e.default(t.slotProps) : null; + } +}), Qt = (t, { slots: e }) => { + var n; + return (n = e.default) == null ? void 0 : n.call(e); +}, Rt = S({ + compatConfig: { MODE: 3 }, + name: "portalTarget", + props: { + multiple: { type: Boolean, default: !1 }, + name: { type: String, required: !0 }, + slotProps: { type: Object, default: () => ({}) } + }, + emits: ["change"], + setup(t, { emit: e, slots: n }) { + const r = D(), l = R( + () => { + const o = r.getContentForTarget( + t.name, + t.multiple + ), a = n.wrapper, s = o.map((u) => u.content(t.slotProps)), c = a ? s.flatMap( + (u) => u.length ? a(u) : [] + ) : s.flat(1); + return { + vnodes: c, + vnodesFn: () => c + }; + } + ); + return N( + l, + ({ vnodes: o }) => { + const a = o.length > 0, s = r.transports.get(t.name), c = s ? [...s.keys()] : []; + e("change", { hasContent: a, sources: c }); + }, + { flush: "post" } + ), () => { + var o; + return l.value.vnodes.length ? [ + I("div", { + style: "display: none", + key: "__portal-vue-hacky-scoped-slot-repair__" + }), + I(Qt, l.value.vnodesFn) + ] : (o = n.default) == null ? void 0 : o.call(n); + }; + } +}); +function Xt(t = !0) { + const e = nt(/* @__PURE__ */ new Map()); + function n(a) { + if (!F) + return; + const { to: s, from: c, content: u, order: b = 1 / 0 } = a; + if (!s || !c || !u) + return; + e.has(s) || e.set(s, /* @__PURE__ */ new Map()); + const v = e.get(s), O = { + to: s, + from: c, + content: u, + order: b + }; + v.set(c, O); + } + function r(a) { + const { to: s, from: c } = a; + if (!s || !c) + return; + const u = e.get(s); + !u || (u.delete(c), u.size || e.delete(s)); + } + function l(a, s) { + const c = e.get(a); + if (!c) + return []; + const u = Array.from((c == null ? void 0 : c.values()) || []); + return s ? Gt( + u, + (b, v) => b.order - v.order + ) : [u.pop()]; + } + const o = { + open: n, + close: r, + transports: e, + getContentForTarget: l + }; + return t ? ot(o) : o; +} +const Zt = Xt(); +function te(t, e = {}) { + e.portalName !== !1 && t.component(e.portalName || "Portal", Kt), e.portalTargetName !== !1 && t.component(e.portalTargetName || "PortalTarget", Rt); + const n = e.wormhole ?? Zt; + t.provide(T, n); +} +const ee = [ + E, + L, + C, + k, + g, + w, + x, + A, + B, + V, + P +], q = function(t, e = {}) { + t.use(te), ee.forEach((n) => { + t.component(n.name, n); + }); +}; +typeof window < "u" && window.Vue && q(window.Vue); +const oe = { + version: "0.1.0", + install: q, + Navbar: E, + ListView: L, + ListItem: C, + ListAnchor: k, + ItemCount: g, + ItemCheck: w, + ScanInput: x, + ActionFooter: A, + BeamModal: B, + ConfirmDialog: V, + BeamModalOutlet: P +}; +export { + oe as default +}; diff --git a/beam/dist/beam.umd.js b/beam/dist/beam.umd.js new file mode 100644 index 00000000..e1648020 --- /dev/null +++ b/beam/dist/beam.umd.js @@ -0,0 +1,2 @@ +(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e["@agritheory/beam"]=d(e.Vue))})(this,function(e){"use strict";const d=(t,o)=>{const n=t.__vccOpts||t;for(const[s,c]of o)n[s]=c;return n},S={name:"Navbar",methods:{handlePrimaryAction(){this.$emit("click")}}},M={class:"beam__navbar"},x=e.createElementVNode("span",{class:"home-icon"},"⬣",-1),L=e.createElementVNode("h1",{class:"nav-title"},"TITLE",-1),D={class:"navbar-action-wrapper"};function T(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("nav",M,[e.renderSlot(t.$slots,"icon",{},()=>[x]),e.renderSlot(t.$slots,"title",{},()=>[L]),e.createElementVNode("div",D,[e.createElementVNode("button",{class:"navbar-action btn",onClick:o[0]||(o[0]=(...a)=>r.handlePrimaryAction&&r.handlePrimaryAction(...a))},[e.renderSlot(t.$slots,"navbaraction",{},()=>[e.createTextVNode("Action")])])])])}const $=d(S,[["render",T]]),A={name:"ListAnchor",props:{to:{type:String,required:!1,default:""}}},P=["href"];function q(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("a",{href:n.to,class:"beam__listanchor"},[e.renderSlot(t.$slots,"default")],8,P)}const p=d(A,[["render",q]]),F={name:"ItemCount",props:{value:{type:Number,required:!1,default:0},denominator:{type:Number,required:!0},uom:{type:String,required:!1,default:null},editable:{type:Boolean,required:!1,default:!1}},data(){return{count:this.value}},methods:{handleInput(t){t.preventDefault(),t.stopPropagation(),this.count=Number(t.target.innerHTML.replace(/[^0-9]/g,"")),this.$emit("input",this.count)}},computed:{countColor(){return this.count===this.denominator}},watch:{value(){this.count=this.value}}},O={class:"beam__itemcount"},j=["contenteditable"],U={key:0};function H(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("span",{contenteditable:n.editable,class:e.normalizeClass({alert:r.countColor===!1}),onInput:o[0]||(o[0]=a=>r.handleInput(a)),onClick:o[1]||(o[1]=a=>r.handleInput(a))},e.toDisplayString(c.count),43,j),e.createElementVNode("span",null,"/"+e.toDisplayString(n.denominator),1),n.uom?(e.openBlock(),e.createElementBlock("span",U,"  "+e.toDisplayString(n.uom),1)):e.createCommentVNode("",!0)])}const u=d(F,[["render",H]]),Ve="",z={name:"ItemCheck",props:{value:{type:Boolean,required:!1,default:!1}},data(){return{checked:this.value}},methods:{handleInput(t){this.$emit("input",this.checked)}}},W=t=>(e.pushScopeId("data-v-66aa3656"),t=t(),e.popScopeId(),t),Y={class:"container"},G=["checked"],J=W(()=>e.createElementVNode("div",{class:"checkmark",tabindex:"0"},null,-1));function K(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("label",Y,[e.createElementVNode("input",{type:"checkbox",checked:n.value,onInput:o[0]||(o[0]=(...a)=>r.handleInput&&r.handleInput(...a)),tabindex:"-1"},null,40,G),J])}const f=d(z,[["render",K],["__scopeId","data-v-66aa3656"]]),Q={name:"ListItem",components:{ItemCount:u,ItemCheck:f},props:{item:{type:Object,required:!0}}},R={tabindex:"0",class:"beam__listitem"},X={class:"beam__listtext"};function Z(t,o,n,s,c,r){const a=e.resolveComponent("ItemCount"),l=e.resolveComponent("ItemCheck");return e.openBlock(),e.createElementBlock("li",R,[e.createElementVNode("div",X,[e.createElementVNode("label",null,e.toDisplayString(n.item.label),1),e.createElementVNode("p",null,e.toDisplayString(n.item.description),1)]),n.item.count?(e.openBlock(),e.createBlock(a,{key:0,modelValue:n.item.count.count,"onUpdate:modelValue":o[0]||(o[0]=i=>n.item.count.count=i),denominator:n.item.count.of,uom:n.item.count.uom,editable:!0},null,8,["modelValue","denominator","uom"])):e.createCommentVNode("",!0),n.item.hasOwnProperty("checked")?(e.openBlock(),e.createBlock(l,{key:1,modelValue:n.item.checked,"onUpdate:modelValue":o[1]||(o[1]=i=>n.item.checked=i)},null,8,["modelValue"])):e.createCommentVNode("",!0)])}const _=d(Q,[["render",Z]]),v={name:"ListView",components:{ListItem:_,ListAnchor:p},props:{items:{type:Array,required:!0}},created(){window.addEventListener("scroll",this.handleScroll)},destroyed(){window.removeEventListener("scroll",this.handleScroll)},methods:{handleScroll(){const t=document.documentElement.scrollHeight-window.innerHeight,o=document.documentElement.scrollTop;t-o<=2&&this.$emit("scrollbottom")}}},ee={class:"beam__listview"};function te(t,o,n,s,c,r){const a=e.resolveComponent("ListItem");return e.openBlock(),e.createElementBlock("ul",ee,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,(l,i)=>(e.openBlock(),e.createElementBlock("li",{key:i},[l.linkComponent?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.linkComponent),{key:0,to:l.route,tabindex:"-1"},{default:e.withCtx(()=>[e.createVNode(a,{item:l},null,8,["item"])]),_:2},1032,["to"])):(e.openBlock(),e.createBlock(a,{key:1,item:l},null,8,["item"]))]))),128))])}const b=d(v,[["render",te]]),oe={name:"ScanInput",data(){return{barcode:""}},methods:{handleScanInput(t){t.target.tagName!=="INPUT"&&(t.key!=="Enter"?this.barcode+=`${t.key}`:(this.$emit("scaninput",this.barcode),this.barcode=""))}},mounted(){document.addEventListener("keypress",t=>{this.handleScanInput(t)})},destroyed(){window.removeEventListener("keypress",t=>{this.handleScanInput(t)})}},ne={id:"scan_input"};function re(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("div",ne)}const y=d(oe,[["render",re]]),ae={name:"ActionFooter",methods:{handleFooterAction(){this.$emit("click")}}},le={class:"beam__actionfooter"},se={class:"footer-action-wrapper"};function ce(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("footer",le,[e.createElementVNode("span",se,[e.createElementVNode("button",{class:"footer-action btn btn--dark",onClick:o[0]||(o[0]=(...a)=>r.handleFooterAction&&r.handleFooterAction(...a))},[e.renderSlot(t.$slots,"default")])])])}const g=d(ae,[["render",ce]]),ie={name:"BeamModal",props:["showModal"]},de={class:"beam__modal"};function me(t,o,n,s,c,r){const a=e.resolveComponent("portal");return e.openBlock(),e.createBlock(a,{to:"beam__modal_outlet"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",de,[e.createElementVNode("button",{class:"btn",onClick:o[0]||(o[0]=l=>t.$emit("closemodal"))},"Close Modal"),e.renderSlot(t.$slots,"default",{onClosemodal:o[1]||(o[1]=l=>t.$emit("closemodal")),onConfirmmodal:o[2]||(o[2]=l=>t.$emit("confirmmodal"))})],512),[[e.vShow,n.showModal]])]),_:3})}const B=d(ie,[["render",me]]),pe={name:"BeamModalOutlet"};function ue(t,o,n,s,c,r){const a=e.resolveComponent("portal-target");return e.openBlock(),e.createBlock(a,{name:"beam__modal_outlet"})}const C=d(pe,[["render",ue]]),fe={name:"ConfirmDialog",methods:{confirmModal(){this.$emit("confirmmodal")},closeModal(){this.$emit("closemodal")}}},_e={class:"beam__modal-confirm"},he=e.createElementVNode("h2",null,"Would you like to continue?",-1);function ke(t,o,n,s,c,r){return e.openBlock(),e.createElementBlock("div",_e,[he,e.createElementVNode("button",{class:"btn btn--dark",onClick:o[0]||(o[0]=(...a)=>r.confirmModal&&r.confirmModal(...a))},"Yes"),e.createElementVNode("button",{class:"btn btn--dark",onClick:o[1]||(o[1]=(...a)=>r.closeModal&&r.closeModal(...a))},"No")])}const E=d(fe,[["render",ke]]),w=Symbol("wormhole");function N(){const t=e.inject(w);if(!t)throw new Error(` + [portal-vue]: Necessary Injection not found. Make sur you installed the plugin properly.`);return t}const I=typeof window<"u";function $e(t,o){return t.map((n,s)=>[s,n]).sort(function(n,s){return o(n[1],s[1])||n[0]-s[0]}).map(n=>n[1])}function be(t,o){const n=N();function s(){if(!I)return;const{to:r,name:a,order:l}=t;o.default?n.open({to:r,from:a,order:l,content:o.default}):c()}function c(r){n.close({to:r??t.to,from:t.name})}e.onMounted(()=>{t.disabled||s()}),e.onUpdated(()=>{t.disabled?c():s()}),e.onBeforeUnmount(()=>{c()}),e.watch(()=>t.to,(r,a)=>{t.disabled||(a&&a!==r&&c(a),s())})}const ye=e.defineComponent({compatConfig:{MODE:3},name:"portal",props:{disabled:{type:Boolean},name:{type:[String,Symbol],default:()=>Symbol()},order:{type:Number},slotProps:{type:Object,default:()=>({})},to:{type:String,default:()=>String(Math.round(Math.random()*1e7))}},setup(t,{slots:o}){return be(t,o),()=>t.disabled&&o.default?o.default(t.slotProps):null}}),ge=(t,{slots:o})=>{var n;return(n=o.default)==null?void 0:n.call(o)},Be=e.defineComponent({compatConfig:{MODE:3},name:"portalTarget",props:{multiple:{type:Boolean,default:!1},name:{type:String,required:!0},slotProps:{type:Object,default:()=>({})}},emits:["change"],setup(t,{emit:o,slots:n}){const s=N(),c=e.computed(()=>{const r=s.getContentForTarget(t.name,t.multiple),a=n.wrapper,l=r.map(m=>m.content(t.slotProps)),i=a?l.flatMap(m=>m.length?a(m):[]):l.flat(1);return{vnodes:i,vnodesFn:()=>i}});return e.watch(c,({vnodes:r})=>{const a=r.length>0,l=s.transports.get(t.name),i=l?[...l.keys()]:[];o("change",{hasContent:a,sources:i})},{flush:"post"}),()=>{var r;return c.value.vnodes.length?[e.h("div",{style:"display: none",key:"__portal-vue-hacky-scoped-slot-repair__"}),e.h(ge,c.value.vnodesFn)]:(r=n.default)==null?void 0:r.call(n)}}});function Ce(t=!0){const o=e.reactive(new Map);function n(a){if(!I)return;const{to:l,from:i,content:m,order:h=1/0}=a;if(!l||!i||!m)return;o.has(l)||o.set(l,new Map);const k=o.get(l),Ie={to:l,from:i,content:m,order:h};k.set(i,Ie)}function s(a){const{to:l,from:i}=a;if(!l||!i)return;const m=o.get(l);!m||(m.delete(i),m.size||o.delete(l))}function c(a,l){const i=o.get(a);if(!i)return[];const m=Array.from((i==null?void 0:i.values())||[]);return l?$e(m,(h,k)=>h.order-k.order):[m.pop()]}const r={open:n,close:s,transports:o,getContentForTarget:c};return t?e.readonly(r):r}const Ee=Ce();function we(t,o={}){o.portalName!==!1&&t.component(o.portalName||"Portal",ye),o.portalTargetName!==!1&&t.component(o.portalTargetName||"PortalTarget",Be);const n=o.wormhole??Ee;t.provide(w,n)}const Ne=[$,b,_,p,u,f,y,g,B,E,C],V=function(t,o={}){t.use(we),Ne.forEach(n=>{t.component(n.name,n)})};return typeof window<"u"&&window.Vue&&V(window.Vue),{version:"0.1.0",install:V,Navbar:$,ListView:b,ListItem:_,ListAnchor:p,ItemCount:u,ItemCheck:f,ScanInput:y,ActionFooter:g,BeamModal:B,ConfirmDialog:E,BeamModalOutlet:C}}); diff --git a/beam/dist/style.css b/beam/dist/style.css new file mode 100644 index 00000000..05005488 --- /dev/null +++ b/beam/dist/style.css @@ -0,0 +1 @@ +.container[data-v-66aa3656]{display:block;position:relative;padding-left:2.5ch;margin:0;margin-top:.5rem;cursor:pointer;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container input[data-v-66aa3656]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark[data-v-66aa3656]{position:absolute;top:0;left:0;height:2rem;width:2rem;background-color:#eee;outline:2px solid transparent;border:1px solid var(--highlight)}.container:hover input~.checkmark[data-v-66aa3656]{background-color:#fff}.container input:checked~.checkmark[data-v-66aa3656]{background-color:var(--brand-secondary)}.checkmark[data-v-66aa3656]:after{content:"";position:absolute;display:none}.container input:checked~.checkmark[data-v-66aa3656]:after{display:block}.container .checkmark[data-v-66aa3656]:after{left:25%;top:50%;width:.5rem;height:1rem;border:solid var(--text-color);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg) translate(-50%,-50%)} diff --git a/beam/package.json b/beam/package.json index c52ef89c..95ef4a82 100644 --- a/beam/package.json +++ b/beam/package.json @@ -8,13 +8,12 @@ "serve": "vite preview" }, "dependencies": { - "portal-vue": "~3.0.0-beta.0", + "portal-vue": "~3.0.0", "vue": "^3.2.47" }, "devDependencies": { - "@vitejs/plugin-vue": "^4.0.0", - "cypress": "^12.2.0", - "portal-vue": "^3.0.0", + "@vitejs/plugin-vue": "^4.2.1", + "cypress": "^12.11.0", "vite": "^4.3.5", "vue-router": "^4" }, diff --git a/beam/src/index.js b/beam/src/index.js index c37be3e1..c05b12bf 100644 --- a/beam/src/index.js +++ b/beam/src/index.js @@ -36,20 +36,6 @@ if (typeof window !== 'undefined' && window.Vue) { install(window.Vue) } -export { - Navbar, - ListView, - ListItem, - ListAnchor, - ItemCount, - ItemCheck, - ScanInput, - ActionFooter, - BeamModal, - ConfirmDialog, - BeamModalOutlet, -} - export default { version: '0.1.0', install, diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index c8ac122e..1f5438a2 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -154,6 +154,28 @@ importers: specifier: ^4 version: 4.2.5(vue@3.4.19) + ../../beam: + dependencies: + portal-vue: + specifier: ~3.0.0 + version: 3.0.0(vue@3.4.19) + vue: + specifier: ^3.2.47 + version: 3.4.19(typescript@5.3.3) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.6.2(vite@4.5.2)(vue@3.4.19) + cypress: + specifier: ^12.11.0 + version: 12.17.4 + vite: + specifier: ^4.3.5 + version: 4.5.2(@types/node@20.11.17) + vue-router: + specifier: ^4 + version: 4.2.5(vue@3.4.19) + ../../code_editor: dependencies: '@agritheory/themes': @@ -4067,6 +4089,18 @@ packages: pathe: 1.1.2 dev: true + /portal-vue@3.0.0(vue@3.4.19): + resolution: {integrity: sha512-9eprMxNURLx6ijbcgkWjYNcTWJYu/H8QF8nyAeBzOmk9lKCea01BW1hYBeLkgz+AestmPOvznAEOFmNuO4Adjw==} + engines: {node: '>=14.19'} + peerDependencies: + vue: ^3.0.4 + peerDependenciesMeta: + vue: + optional: true + dependencies: + vue: 3.4.19(typescript@5.3.3) + dev: false + /postcss-selector-parser@6.0.15: resolution: {integrity: sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==} engines: {node: '>=4'} diff --git a/rush.json b/rush.json index 1e5a96ab..3960f697 100644 --- a/rush.json +++ b/rush.json @@ -39,6 +39,12 @@ "decoupledLocalDependencies": ["@agritheory/aform"], "versionPolicyName": "stonecrop" }, + { + "packageName": "@agritheory/beam", + "projectFolder": "beam", + "reviewCategory": "prototype", + "versionPolicyName": "stonecrop" + }, { "packageName": "@agritheory/desktop", "projectFolder": "desktop",