@stonecrop/beam 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "license": "MIT",
   "type": "module",
   "author": {

package/dist/beam.js

@@ -1,260 +0,0 @@
-import { defineComponent as u, openBlock as l, createElementBlock as i, createElementVNode as c, renderSlot as d, resolveComponent as b, createBlock as _, withCtx as $, withDirectives as L, vShow as g, ref as v, pushScopeId as V, popScopeId as B, computed as M, normalizeClass as N, toDisplayString as p, createCommentVNode as h, onMounted as k, onUnmounted as C, Fragment as S, renderList as E, resolveDynamicComponent as A, createVNode as T, createTextVNode as D } from "vue";
-const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper" }, H = /* @__PURE__ */ u({
-  __name: "ActionFooter",
-  emits: ["click"],
-  setup(t, { emit: e }) {
-    const o = e, s = () => {
-      o("click");
-    };
-    return (n, a) => (l(), i("footer", F, [
-      c("span", O, [
-        c("button", {
-          class: "footer-action btn",
-          onClick: s
-        }, [
-          d(n.$slots, "default")
-        ])
-      ])
-    ]));
-  }
-}), P = { class: "beam__modal" }, U = /* @__PURE__ */ u({
-  __name: "BeamModal",
-  props: {
-    showModal: { type: Boolean }
-  },
-  setup(t) {
-    return (e, o) => {
-      const s = b("portal");
-      return l(), _(s, { to: "beam__modal_outlet" }, {
-        default: $(() => [
-          L(c("div", P, [
-            c("button", {
-              class: "btn",
-              onClick: o[0] || (o[0] = (n) => e.$emit("closemodal"))
-            }, "Close Modal"),
-            d(e.$slots, "default", {
-              onClosemodal: o[1] || (o[1] = (n) => e.$emit("closemodal")),
-              onConfirmmodal: o[2] || (o[2] = (n) => e.$emit("confirmmodal"))
-            })
-          ], 512), [
-            [g, e.showModal]
-          ])
-        ]),
-        _: 3
-      });
-    };
-  }
-}), z = /* @__PURE__ */ u({
-  __name: "BeamModalOutlet",
-  emits: ["confirmmodal", "closemodal"],
-  setup(t, { emit: e }) {
-    return (o, s) => {
-      const n = b("portal-target");
-      return l(), _(n, { name: "beam__modal_outlet" });
-    };
-  }
-}), I = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [s, n] of e)
-    o[s] = n;
-  return o;
-}, W = {}, Y = { class: "beam__modal-confirm" }, j = /* @__PURE__ */ c("h2", null, "Would you like to continue?", -1);
-function q(t, e) {
-  return l(), i("div", Y, [
-    j,
-    c("button", {
-      class: "btn",
-      onClick: e[0] || (e[0] = (o) => t.$emit("confirmmodal"))
-    }, "Yes"),
-    c("button", {
-      class: "btn",
-      onClick: e[1] || (e[1] = (o) => t.$emit("closemodal"))
-    }, "No")
-  ]);
-}
-const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"), t = t(), B(), t), K = { class: "container" }, Q = ["checked"], R = /* @__PURE__ */ J(() => /* @__PURE__ */ c("div", {
-  class: "checkmark",
-  tabindex: "0"
-}, null, -1)), X = /* @__PURE__ */ u({
-  __name: "ItemCheck",
-  props: {
-    value: { type: Boolean }
-  },
-  emits: ["input"],
-  setup(t, { emit: e }) {
-    const o = t, s = e, n = v(o.value), a = (r) => {
-      s("input", n.value);
-    };
-    return (r, m) => (l(), i("label", K, [
-      c("input", {
-        type: "checkbox",
-        checked: r.value,
-        onInput: a,
-        tabindex: "-1"
-      }, null, 40, Q),
-      R
-    ]));
-  }
-}), w = /* @__PURE__ */ I(X, [["__scopeId", "data-v-4d5731cd"]]), Z = { class: "beam__itemcount" }, x = ["contenteditable"], ee = { key: 0 }, y = /* @__PURE__ */ u({
-  __name: "ItemCount",
-  props: {
-    value: { default: 0 },
-    denominator: {},
-    uom: { default: "" },
-    editable: { type: Boolean, default: !0 }
-  },
-  emits: ["input"],
-  setup(t, { emit: e }) {
-    const o = e, s = t, n = v(s.value), a = (m) => {
-      m.preventDefault(), m.stopPropagation(), n.value = Number(m.target.innerHTML.replace(/[^0-9]/g, "")), o("input", n.value);
-    }, r = M(() => n.value === s.denominator);
-    return (m, pe) => (l(), i("div", Z, [
-      c("span", {
-        contenteditable: m.editable,
-        class: N({ alert: r.value === !1 }),
-        onInput: a,
-        onClick: a
-      }, p(n.value), 43, x),
-      c("span", null, "/" + p(m.denominator), 1),
-      m.uom ? (l(), i("span", ee, "  " + p(m.uom), 1)) : h("", !0)
-    ]));
-  }
-}), te = ["href"], oe = /* @__PURE__ */ u({
-  __name: "ListAnchor",
-  props: {
-    to: { default: "" }
-  },
-  setup(t) {
-    return (e, o) => (l(), i("a", {
-      href: e.to,
-      class: "beam__listanchor"
-    }, [
-      d(e.$slots, "default")
-    ], 8, te));
-  }
-}), ne = {
-  tabindex: "0",
-  class: "beam__listitem"
-}, se = { class: "beam__listtext" }, f = /* @__PURE__ */ u({
-  __name: "ListItem",
-  props: {
-    item: {}
-  },
-  setup(t) {
-    return (e, o) => (l(), i("li", ne, [
-      c("div", se, [
-        c("label", null, p(e.item.label), 1),
-        c("p", null, p(e.item.description), 1)
-      ]),
-      e.item.count ? (l(), _(y, {
-        key: 0,
-        modelValue: e.item.count.count,
-        "onUpdate:modelValue": o[0] || (o[0] = (s) => e.item.count.count = s),
-        denominator: e.item.count.of,
-        uom: e.item.count.uom,
-        editable: !0
-      }, null, 8, ["modelValue", "denominator", "uom"])) : h("", !0),
-      e.item.hasOwnProperty("checked") ? (l(), _(w, {
-        key: 1,
-        modelValue: e.item.checked,
-        "onUpdate:modelValue": o[1] || (o[1] = (s) => e.item.checked = s)
-      }, null, 8, ["modelValue"])) : h("", !0)
-    ]));
-  }
-}), ae = { class: "beam__listview" }, le = /* @__PURE__ */ u({
-  __name: "ListView",
-  props: {
-    items: {}
-  },
-  emits: ["scrollbottom"],
-  setup(t, { emit: e }) {
-    const o = e;
-    k(() => {
-      window.addEventListener("scroll", s);
-    }), C(() => {
-      window.removeEventListener("scroll", s);
-    });
-    const s = () => {
-      const n = document.documentElement.scrollHeight - window.innerHeight, a = document.documentElement.scrollTop;
-      n - a <= 2 && o("scrollbottom");
-    };
-    return (n, a) => (l(), i("ul", ae, [
-      (l(!0), i(S, null, E(n.items, (r, m) => (l(), i("li", { key: m }, [
-        r.linkComponent ? (l(), _(A(r.linkComponent), {
-          key: 0,
-          to: r.route,
-          tabindex: "-1"
-        }, {
-          default: $(() => [
-            T(f, { item: r }, null, 8, ["item"])
-          ]),
-          _: 2
-        }, 1032, ["to"])) : (l(), _(f, {
-          key: 1,
-          item: r
-        }, null, 8, ["item"]))
-      ]))), 128))
-    ]));
-  }
-}), ce = { class: "beam__navbar" }, ie = /* @__PURE__ */ c("span", { class: "home-icon" }, "⬣", -1), re = /* @__PURE__ */ c("h1", { class: "nav-title" }, "TITLE", -1), me = { class: "navbar-action-wrapper" }, ue = /* @__PURE__ */ u({
-  __name: "Navbar",
-  emits: ["click"],
-  setup(t, { emit: e }) {
-    const o = e, s = () => {
-      o("click");
-    };
-    return (n, a) => (l(), i("nav", ce, [
-      d(n.$slots, "icon", {}, () => [
-        ie
-      ]),
-      d(n.$slots, "title", {}, () => [
-        re
-      ]),
-      c("div", me, [
-        c("button", {
-          class: "navbar-action btn",
-          onClick: s
-        }, [
-          d(n.$slots, "navbaraction", {}, () => [
-            D("Action")
-          ])
-        ])
-      ])
-    ]));
-  }
-}), de = { id: "scan_input" }, _e = /* @__PURE__ */ u({
-  __name: "ScanInput",
-  emits: ["scaninput"],
-  setup(t, { emit: e }) {
-    const o = e, s = v(""), n = (a) => {
-      a.target.tagName !== "INPUT" && (a.key !== "Enter" ? s.value += `${a.key}` : (o("scaninput", s.value), s.value = ""));
-    };
-    return k(() => {
-      document.addEventListener("keypress", (a) => {
-        n(a);
-      });
-    }), C(() => {
-      window.removeEventListener("keypress", (a) => {
-        n(a);
-      });
-    }), (a, r) => (l(), i("div", de));
-  }
-});
-function fe(t) {
-  t.component("ActionFooter", H), t.component("BeamModal", U), t.component("BeamModalOutlet", z), t.component("Confirm", G), t.component("ItemCheck", w), t.component("ItemCount", y), t.component("ListAnchor", oe), t.component("ListItem", f), t.component("ListView", le), t.component("Navbar", ue), t.component("ScanInput", _e);
-}
-export {
-  H as ActionFooter,
-  U as BeamModal,
-  z as BeamModalOutlet,
-  G as Confirm,
-  w as ItemCheck,
-  y as ItemCount,
-  oe as ListAnchor,
-  f as ListItem,
-  le as ListView,
-  ue as Navbar,
-  _e as ScanInput,
-  fe as install
-};
-//# sourceMappingURL=beam.js.map

package/dist/beam.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"beam.js","sources":["../src/components/ActionFooter.vue","../src/components/Confirm.vue","../src/components/ItemCheck.vue","../src/components/ItemCount.vue","../src/components/ListView.vue","../src/components/Navbar.vue","../src/components/ScanInput.vue","../src/index.ts"],"sourcesContent":["<template>\n\t<footer class=\"beam__actionfooter\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<button class=\"footer-action btn\" @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</button>\n\t\t</span>\n\t</footer>\n</template>\n\n<script setup lang=\"ts\">\nconst emit = defineEmits(['click'])\n\nconst handleFooterAction = () => {\n\temit('click')\n}\n</script>\n","<template>\n\t<div class=\"beam__modal-confirm\">\n\t\t<h2>Would you like to continue?</h2>\n\t\t<button class=\"btn\" @click=\"$emit('confirmmodal')\">Yes</button>\n\t\t<button class=\"btn\" @click=\"$emit('closemodal')\">No</button>\n\t</div>\n</template>\n","<template>\n\t<label class=\"container\">\n\t\t<input type=\"checkbox\" :checked=\"value\" @input=\"handleInput\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\n// make this v-model sensitive from parent\nconst props = defineProps<{\n\tvalue?: boolean\n}>()\n\nconst emit = defineEmits(['input'])\n\nconst checked = ref(props.value)\n\nconst handleInput = (e: InputEvent) => {\n\temit('input', checked.value)\n}\n</script>\n\n<style scoped>\n.container {\n\tdisplay: block;\n\tposition: relative;\n\tpadding-left: 2.5ch;\n\tmargin: 0;\n\tmargin-top: 0.5rem;\n\tcursor: pointer;\n\tfont-size: 2rem;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n\n/* hide default checkbox */\n.container input {\n\tposition: absolute;\n\topacity: 0;\n\tcursor: pointer;\n\theight: 0;\n\twidth: 0;\n}\n\n.checkmark {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\theight: 2rem;\n\twidth: 2rem;\n\tbackground-color: #eee;\n\toutline: 2px solid transparent;\n\tborder: 1px solid var(--highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--brand-secondary);\n}\n\n.checkmark:after {\n\tcontent: '';\n\tposition: absolute;\n\tdisplay: none;\n}\n\n.container input:checked ~ .checkmark:after {\n\tdisplay: block;\n}\n\n.container .checkmark:after {\n\tleft: 25%;\n\ttop: 50%;\n\twidth: 0.5rem;\n\theight: 1rem;\n\tborder: solid var(--text-color);\n\tborder-width: 0 3px 3px 0;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg) translate(-50%, -50%);\n}\n</style>\n","<template>\n\t<div class=\"beam__itemcount\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ alert: countColor === false }\"\n\t\t\t@input=\"handleInput\"\n\t\t\t@click=\"handleInput\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span>/{{ denominator }}</span>\n\t\t<span v-if=\"uom\">&nbsp; {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst emit = defineEmits(['input'])\nconst props = withDefaults(\n\tdefineProps<{\n\t\tvalue?: number\n\t\tdenominator: number\n\t\tuom?: string\n\t\teditable?: boolean\n\t}>(),\n\t{ value: 0, editable: true, uom: '' }\n)\n\nconst count = ref(props.value)\n\nconst handleInput = (event: InputEvent | MouseEvent) => {\n\tevent.preventDefault()\n\tevent.stopPropagation()\n\tcount.value = Number(event.target.innerHTML.replace(/[^0-9]/g, ''))\n\temit('input', count.value)\n}\n\nconst countColor = computed(() => {\n\treturn count.value === props.denominator\n})\n</script>\n","<template>\n\t<ul class=\"beam__listview\">\n\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t<template v-if=\"item.linkComponent\">\n\t\t\t\t<component :is=\"item.linkComponent\" :to=\"item.route\" tabindex=\"-1\">\n\t\t\t\t\t<ListItem :item=\"item\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\"></ListItem>\n\t\t\t</template>\n\t\t</li>\n\t</ul>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\nimport ListItem from './ListItem.vue'\n\ndefineProps<{\n\titems: {\n\t\tlabel: string\n\t\tdescription: string\n\t\tcount?: {\n\t\t\tcount: number\n\t\t\tof: number\n\t\t\tuom: string\n\t\t}\n\t\tchecked?: boolean\n\t\tlinkComponent?: string\n\t\troute?: string\n\t}[]\n}>()\n\nconst emit = defineEmits(['scrollbottom'])\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleScroll = () => {\n\tconst scrollHeightDifference = document.documentElement.scrollHeight - window.innerHeight\n\tconst scrollposition = document.documentElement.scrollTop\n\tif (scrollHeightDifference - scrollposition <= 2) {\n\t\temit('scrollbottom')\n\t}\n}\n</script>\n","<template>\n\t<nav class=\"beam__navbar\">\n\t\t<slot name=\"icon\">\n\t\t\t<span class=\"home-icon\">&#11043;</span>\n\t\t</slot>\n\t\t<slot name=\"title\">\n\t\t\t<h1 class=\"nav-title\">TITLE</h1>\n\t\t</slot>\n\t\t<div class=\"navbar-action-wrapper\">\n\t\t\t<button class=\"navbar-action btn\" @click=\"handlePrimaryAction\">\n\t\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t\t</button>\n\t\t</div>\n\t</nav>\n</template>\n\n<script setup lang=\"ts\">\nconst emit = defineEmits(['click'])\n\nconst handlePrimaryAction = () => {\n\temit('click')\n}\n</script>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits(['scaninput'])\nconst barcode = ref('')\n\nconst handleScanInput = (event: InputEvent | KeyboardEvent) => {\n\tif (event.target.tagName !== 'INPUT') {\n\t\tif (event.key !== 'Enter') {\n\t\t\tbarcode.value += `${event.key}`\n\t\t} else {\n\t\t\temit('scaninput', barcode.value)\n\t\t\tbarcode.value = ''\n\t\t}\n\t}\n}\n\nonMounted(() => {\n\tdocument.addEventListener('keypress', event => {\n\t\thandleScanInput(event)\n\t})\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('keypress', event => {\n\t\thandleScanInput(event)\n\t})\n})\n</script>\n","import { App } from 'vue'\n\nimport ActionFooter from '@/components/ActionFooter.vue'\nimport BeamModal from '@/components/BeamModal.vue'\nimport BeamModalOutlet from '@/components/BeamModalOutlet.vue'\nimport Confirm from '@/components/Confirm.vue'\nimport ItemCheck from '@/components/ItemCheck.vue'\nimport ItemCount from '@/components/ItemCount.vue'\nimport ListAnchor from '@/components/ListAnchor.vue'\nimport ListItem from '@/components/ListItem.vue'\nimport ListView from '@/components/ListView.vue'\nimport Navbar from '@/components/Navbar.vue'\nimport ScanInput from '@/components/ScanInput.vue'\n\nfunction install(app: App /* options */) {\n\tapp.component('ActionFooter', ActionFooter)\n\tapp.component('BeamModal', BeamModal)\n\tapp.component('BeamModalOutlet', BeamModalOutlet)\n\tapp.component('Confirm', Confirm)\n\tapp.component('ItemCheck', ItemCheck)\n\tapp.component('ItemCount', ItemCount)\n\tapp.component('ListAnchor', ListAnchor)\n\tapp.component('ListItem', ListItem)\n\tapp.component('ListView', ListView)\n\tapp.component('Navbar', Navbar)\n\tapp.component('ScanInput', ScanInput)\n}\n\nexport {\n\tActionFooter,\n\tBeamModal,\n\tBeamModalOutlet,\n\tConfirm,\n\tItemCheck,\n\tItemCount,\n\tListAnchor,\n\tListItem,\n\tListView,\n\tNavbar,\n\tScanInput,\n\tinstall,\n}\n"],"names":["emit","__emit","handleFooterAction","_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_2","_createElementVNode","$event","props","__props","checked","ref","handleInput","e","count","event","countColor","computed","onMounted","handleScroll","onUnmounted","scrollHeightDifference","scrollposition","handlePrimaryAction","barcode","handleScanInput","install","app","ActionFooter","BeamModal","BeamModalOutlet","Confirm","ItemCheck","ItemCount","ListAnchor","ListItem","ListView","Navbar","ScanInput"],"mappings":"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"}

package/dist/beam.umd.cjs

@@ -1,2 +0,0 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a["@stonecrop/beam"]={},a.Vue))})(this,function(a,e){"use strict";const E={class:"beam__actionfooter"},V={class:"footer-action-wrapper"},_=e.defineComponent({__name:"ActionFooter",emits:["click"],setup(o,{emit:t}){const n=t,c=()=>{n("click")};return(l,s)=>(e.openBlock(),e.createElementBlock("footer",E,[e.createElementVNode("span",V,[e.createElementVNode("button",{class:"footer-action btn",onClick:c},[e.renderSlot(l.$slots,"default")])])]))}}),N={class:"beam__modal"},f=e.defineComponent({__name:"BeamModal",props:{showModal:{type:Boolean}},setup(o){return(t,n)=>{const c=e.resolveComponent("portal");return e.openBlock(),e.createBlock(c,{to:"beam__modal_outlet"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",N,[e.createElementVNode("button",{class:"btn",onClick:n[0]||(n[0]=l=>t.$emit("closemodal"))},"Close Modal"),e.renderSlot(t.$slots,"default",{onClosemodal:n[1]||(n[1]=l=>t.$emit("closemodal")),onConfirmmodal:n[2]||(n[2]=l=>t.$emit("confirmmodal"))})],512),[[e.vShow,t.showModal]])]),_:3})}}}),k=e.defineComponent({__name:"BeamModalOutlet",emits:["confirmmodal","closemodal"],setup(o,{emit:t}){return(n,c)=>{const l=e.resolveComponent("portal-target");return e.openBlock(),e.createBlock(l,{name:"beam__modal_outlet"})}}}),h=(o,t)=>{const n=o.__vccOpts||o;for(const[c,l]of t)n[c]=l;return n},y={},I={class:"beam__modal-confirm"},w=e.createElementVNode("h2",null,"Would you like to continue?",-1);function S(o,t){return e.openBlock(),e.createElementBlock("div",I,[w,e.createElementVNode("button",{class:"btn",onClick:t[0]||(t[0]=n=>o.$emit("confirmmodal"))},"Yes"),e.createElementVNode("button",{class:"btn",onClick:t[1]||(t[1]=n=>o.$emit("closemodal"))},"No")])}const u=h(y,[["render",S]]),g=o=>(e.pushScopeId("data-v-4d5731cd"),o=o(),e.popScopeId(),o),L={class:"container"},M=["checked"],A=g(()=>e.createElementVNode("div",{class:"checkmark",tabindex:"0"},null,-1)),d=h(e.defineComponent({__name:"ItemCheck",props:{value:{type:Boolean}},emits:["input"],setup(o,{emit:t}){const n=o,c=t,l=e.ref(n.value),s=i=>{c("input",l.value)};return(i,r)=>(e.openBlock(),e.createElementBlock("label",L,[e.createElementVNode("input",{type:"checkbox",checked:i.value,onInput:s,tabindex:"-1"},null,40,M),A]))}}),[["__scopeId","data-v-4d5731cd"]]),D={class:"beam__itemcount"},T=["contenteditable"],O={key:0},p=e.defineComponent({__name:"ItemCount",props:{value:{default:0},denominator:{},uom:{default:""},editable:{type:Boolean,default:!0}},emits:["input"],setup(o,{emit:t}){const n=t,c=o,l=e.ref(c.value),s=r=>{r.preventDefault(),r.stopPropagation(),l.value=Number(r.target.innerHTML.replace(/[^0-9]/g,"")),n("input",l.value)},i=e.computed(()=>l.value===c.denominator);return(r,K)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("span",{contenteditable:r.editable,class:e.normalizeClass({alert:i.value===!1}),onInput:s,onClick:s},e.toDisplayString(l.value),43,T),e.createElementVNode("span",null,"/"+e.toDisplayString(r.denominator),1),r.uom?(e.openBlock(),e.createElementBlock("span",O,"  "+e.toDisplayString(r.uom),1)):e.createCommentVNode("",!0)]))}}),F=["href"],b=e.defineComponent({__name:"ListAnchor",props:{to:{default:""}},setup(o){return(t,n)=>(e.openBlock(),e.createElementBlock("a",{href:t.to,class:"beam__listanchor"},[e.renderSlot(t.$slots,"default")],8,F))}}),P={tabindex:"0",class:"beam__listitem"},U={class:"beam__listtext"},m=e.defineComponent({__name:"ListItem",props:{item:{}},setup(o){return(t,n)=>(e.openBlock(),e.createElementBlock("li",P,[e.createElementVNode("div",U,[e.createElementVNode("label",null,e.toDisplayString(t.item.label),1),e.createElementVNode("p",null,e.toDisplayString(t.item.description),1)]),t.item.count?(e.openBlock(),e.createBlock(p,{key:0,modelValue:t.item.count.count,"onUpdate:modelValue":n[0]||(n[0]=c=>t.item.count.count=c),denominator:t.item.count.of,uom:t.item.count.uom,editable:!0},null,8,["modelValue","denominator","uom"])):e.createCommentVNode("",!0),t.item.hasOwnProperty("checked")?(e.openBlock(),e.createBlock(d,{key:1,modelValue:t.item.checked,"onUpdate:modelValue":n[1]||(n[1]=c=>t.item.checked=c)},null,8,["modelValue"])):e.createCommentVNode("",!0)]))}}),H={class:"beam__listview"},B=e.defineComponent({__name:"ListView",props:{items:{}},emits:["scrollbottom"],setup(o,{emit:t}){const n=t;e.onMounted(()=>{window.addEventListener("scroll",c)}),e.onUnmounted(()=>{window.removeEventListener("scroll",c)});const c=()=>{const l=document.documentElement.scrollHeight-window.innerHeight,s=document.documentElement.scrollTop;l-s<=2&&n("scrollbottom")};return(l,s)=>(e.openBlock(),e.createElementBlock("ul",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,(i,r)=>(e.openBlock(),e.createElementBlock("li",{key:r},[i.linkComponent?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.linkComponent),{key:0,to:i.route,tabindex:"-1"},{default:e.withCtx(()=>[e.createVNode(m,{item:i},null,8,["item"])]),_:2},1032,["to"])):(e.openBlock(),e.createBlock(m,{key:1,item:i},null,8,["item"]))]))),128))]))}}),j={class:"beam__navbar"},q=e.createElementVNode("span",{class:"home-icon"},"⬣",-1),z=e.createElementVNode("h1",{class:"nav-title"},"TITLE",-1),W={class:"navbar-action-wrapper"},$=e.defineComponent({__name:"Navbar",emits:["click"],setup(o,{emit:t}){const n=t,c=()=>{n("click")};return(l,s)=>(e.openBlock(),e.createElementBlock("nav",j,[e.renderSlot(l.$slots,"icon",{},()=>[q]),e.renderSlot(l.$slots,"title",{},()=>[z]),e.createElementVNode("div",W,[e.createElementVNode("button",{class:"navbar-action btn",onClick:c},[e.renderSlot(l.$slots,"navbaraction",{},()=>[e.createTextVNode("Action")])])])]))}}),Y={id:"scan_input"},C=e.defineComponent({__name:"ScanInput",emits:["scaninput"],setup(o,{emit:t}){const n=t,c=e.ref(""),l=s=>{s.target.tagName!=="INPUT"&&(s.key!=="Enter"?c.value+=`${s.key}`:(n("scaninput",c.value),c.value=""))};return e.onMounted(()=>{document.addEventListener("keypress",s=>{l(s)})}),e.onUnmounted(()=>{window.removeEventListener("keypress",s=>{l(s)})}),(s,i)=>(e.openBlock(),e.createElementBlock("div",Y))}});function G(o){o.component("ActionFooter",_),o.component("BeamModal",f),o.component("BeamModalOutlet",k),o.component("Confirm",u),o.component("ItemCheck",d),o.component("ItemCount",p),o.component("ListAnchor",b),o.component("ListItem",m),o.component("ListView",B),o.component("Navbar",$),o.component("ScanInput",C)}a.ActionFooter=_,a.BeamModal=f,a.BeamModalOutlet=k,a.Confirm=u,a.ItemCheck=d,a.ItemCount=p,a.ListAnchor=b,a.ListItem=m,a.ListView=B,a.Navbar=$,a.ScanInput=C,a.install=G,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=beam.umd.cjs.map

package/dist/beam.umd.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"beam.umd.cjs","sources":["../src/components/ActionFooter.vue","../src/components/Confirm.vue","../src/components/ItemCheck.vue","../src/components/ItemCount.vue","../src/components/ListView.vue","../src/components/Navbar.vue","../src/components/ScanInput.vue","../src/index.ts"],"sourcesContent":["<template>\n\t<footer class=\"beam__actionfooter\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<button class=\"footer-action btn\" @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</button>\n\t\t</span>\n\t</footer>\n</template>\n\n<script setup lang=\"ts\">\nconst emit = defineEmits(['click'])\n\nconst handleFooterAction = () => {\n\temit('click')\n}\n</script>\n","<template>\n\t<div class=\"beam__modal-confirm\">\n\t\t<h2>Would you like to continue?</h2>\n\t\t<button class=\"btn\" @click=\"$emit('confirmmodal')\">Yes</button>\n\t\t<button class=\"btn\" @click=\"$emit('closemodal')\">No</button>\n\t</div>\n</template>\n","<template>\n\t<label class=\"container\">\n\t\t<input type=\"checkbox\" :checked=\"value\" @input=\"handleInput\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\n// make this v-model sensitive from parent\nconst props = defineProps<{\n\tvalue?: boolean\n}>()\n\nconst emit = defineEmits(['input'])\n\nconst checked = ref(props.value)\n\nconst handleInput = (e: InputEvent) => {\n\temit('input', checked.value)\n}\n</script>\n\n<style scoped>\n.container {\n\tdisplay: block;\n\tposition: relative;\n\tpadding-left: 2.5ch;\n\tmargin: 0;\n\tmargin-top: 0.5rem;\n\tcursor: pointer;\n\tfont-size: 2rem;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n\n/* hide default checkbox */\n.container input {\n\tposition: absolute;\n\topacity: 0;\n\tcursor: pointer;\n\theight: 0;\n\twidth: 0;\n}\n\n.checkmark {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\theight: 2rem;\n\twidth: 2rem;\n\tbackground-color: #eee;\n\toutline: 2px solid transparent;\n\tborder: 1px solid var(--highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--brand-secondary);\n}\n\n.checkmark:after {\n\tcontent: '';\n\tposition: absolute;\n\tdisplay: none;\n}\n\n.container input:checked ~ .checkmark:after {\n\tdisplay: block;\n}\n\n.container .checkmark:after {\n\tleft: 25%;\n\ttop: 50%;\n\twidth: 0.5rem;\n\theight: 1rem;\n\tborder: solid var(--text-color);\n\tborder-width: 0 3px 3px 0;\n\t-webkit-transform: rotate(45deg);\n\t-ms-transform: rotate(45deg);\n\ttransform: rotate(45deg) translate(-50%, -50%);\n}\n</style>\n","<template>\n\t<div class=\"beam__itemcount\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ alert: countColor === false }\"\n\t\t\t@input=\"handleInput\"\n\t\t\t@click=\"handleInput\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span>/{{ denominator }}</span>\n\t\t<span v-if=\"uom\">&nbsp; {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst emit = defineEmits(['input'])\nconst props = withDefaults(\n\tdefineProps<{\n\t\tvalue?: number\n\t\tdenominator: number\n\t\tuom?: string\n\t\teditable?: boolean\n\t}>(),\n\t{ value: 0, editable: true, uom: '' }\n)\n\nconst count = ref(props.value)\n\nconst handleInput = (event: InputEvent | MouseEvent) => {\n\tevent.preventDefault()\n\tevent.stopPropagation()\n\tcount.value = Number(event.target.innerHTML.replace(/[^0-9]/g, ''))\n\temit('input', count.value)\n}\n\nconst countColor = computed(() => {\n\treturn count.value === props.denominator\n})\n</script>\n","<template>\n\t<ul class=\"beam__listview\">\n\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t<template v-if=\"item.linkComponent\">\n\t\t\t\t<component :is=\"item.linkComponent\" :to=\"item.route\" tabindex=\"-1\">\n\t\t\t\t\t<ListItem :item=\"item\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\"></ListItem>\n\t\t\t</template>\n\t\t</li>\n\t</ul>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\nimport ListItem from './ListItem.vue'\n\ndefineProps<{\n\titems: {\n\t\tlabel: string\n\t\tdescription: string\n\t\tcount?: {\n\t\t\tcount: number\n\t\t\tof: number\n\t\t\tuom: string\n\t\t}\n\t\tchecked?: boolean\n\t\tlinkComponent?: string\n\t\troute?: string\n\t}[]\n}>()\n\nconst emit = defineEmits(['scrollbottom'])\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleScroll = () => {\n\tconst scrollHeightDifference = document.documentElement.scrollHeight - window.innerHeight\n\tconst scrollposition = document.documentElement.scrollTop\n\tif (scrollHeightDifference - scrollposition <= 2) {\n\t\temit('scrollbottom')\n\t}\n}\n</script>\n","<template>\n\t<nav class=\"beam__navbar\">\n\t\t<slot name=\"icon\">\n\t\t\t<span class=\"home-icon\">&#11043;</span>\n\t\t</slot>\n\t\t<slot name=\"title\">\n\t\t\t<h1 class=\"nav-title\">TITLE</h1>\n\t\t</slot>\n\t\t<div class=\"navbar-action-wrapper\">\n\t\t\t<button class=\"navbar-action btn\" @click=\"handlePrimaryAction\">\n\t\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t\t</button>\n\t\t</div>\n\t</nav>\n</template>\n\n<script setup lang=\"ts\">\nconst emit = defineEmits(['click'])\n\nconst handlePrimaryAction = () => {\n\temit('click')\n}\n</script>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits(['scaninput'])\nconst barcode = ref('')\n\nconst handleScanInput = (event: InputEvent | KeyboardEvent) => {\n\tif (event.target.tagName !== 'INPUT') {\n\t\tif (event.key !== 'Enter') {\n\t\t\tbarcode.value += `${event.key}`\n\t\t} else {\n\t\t\temit('scaninput', barcode.value)\n\t\t\tbarcode.value = ''\n\t\t}\n\t}\n}\n\nonMounted(() => {\n\tdocument.addEventListener('keypress', event => {\n\t\thandleScanInput(event)\n\t})\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('keypress', event => {\n\t\thandleScanInput(event)\n\t})\n})\n</script>\n","import { App } from 'vue'\n\nimport ActionFooter from '@/components/ActionFooter.vue'\nimport BeamModal from '@/components/BeamModal.vue'\nimport BeamModalOutlet from '@/components/BeamModalOutlet.vue'\nimport Confirm from '@/components/Confirm.vue'\nimport ItemCheck from '@/components/ItemCheck.vue'\nimport ItemCount from '@/components/ItemCount.vue'\nimport ListAnchor from '@/components/ListAnchor.vue'\nimport ListItem from '@/components/ListItem.vue'\nimport ListView from '@/components/ListView.vue'\nimport Navbar from '@/components/Navbar.vue'\nimport ScanInput from '@/components/ScanInput.vue'\n\nfunction install(app: App /* options */) {\n\tapp.component('ActionFooter', ActionFooter)\n\tapp.component('BeamModal', BeamModal)\n\tapp.component('BeamModalOutlet', BeamModalOutlet)\n\tapp.component('Confirm', Confirm)\n\tapp.component('ItemCheck', ItemCheck)\n\tapp.component('ItemCount', ItemCount)\n\tapp.component('ListAnchor', ListAnchor)\n\tapp.component('ListItem', ListItem)\n\tapp.component('ListView', ListView)\n\tapp.component('Navbar', Navbar)\n\tapp.component('ScanInput', ScanInput)\n}\n\nexport {\n\tActionFooter,\n\tBeamModal,\n\tBeamModalOutlet,\n\tConfirm,\n\tItemCheck,\n\tItemCount,\n\tListAnchor,\n\tListItem,\n\tListView,\n\tNavbar,\n\tScanInput,\n\tinstall,\n}\n"],"names":["emit","__emit","handleFooterAction","_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_hoisted_2","_createElementVNode","$event","props","__props","checked","ref","handleInput","e","count","event","countColor","computed","onMounted","handleScroll","onUnmounted","scrollHeightDifference","scrollposition","handlePrimaryAction","barcode","handleScanInput","install","app","ActionFooter","BeamModal","BeamModalOutlet","Confirm","ItemCheck","ItemCount","ListAnchor","ListItem","ListView","Navbar","ScanInput"],"mappings":"2ZAWA,MAAMA,EAAOC,EAEPC,EAAqB,IAAM,CAChCF,EAAK,OAAO,CAAA,gkCCZXG,EAAA,CAAA,MAAA,qBAAA,qEADD,SAAAC,EAAAC,EAAAC,EAAA,QACqCC,YAAA,EAAAC,qBAAA,MAAAL,EAAA,CACpCM,EAAQC,EAAAA,mBAAW,SAAA,CAAE,MAAK,cAA4BJ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAK,GAAAN,EAAA,MAAA,cAAA,EACM,EAAA,KAAA,EAApDK,EAAAA,mBAAW,SAAA,CAAE,MAAK,cAAyBJ,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAK,GAAAN,EAAA,MAAA,YAAA,kUCOrD,MAAMO,EAAQC,EAIRb,EAAOC,EAEPa,EAAUC,EAAAA,IAAIH,EAAM,KAAK,EAEzBI,EAAeC,GAAkB,CACjCjB,EAAA,QAASc,EAAQ,KAAK,CAAA,8aCH5B,MAAMd,EAAOC,EACPW,EAAQC,EAURK,EAAQH,EAAAA,IAAIH,EAAM,KAAK,EAEvBI,EAAeG,GAAmC,CACvDA,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EAChBD,EAAA,MAAQ,OAAOC,EAAM,OAAO,UAAU,QAAQ,UAAW,EAAE,CAAC,EAC7DnB,EAAA,QAASkB,EAAM,KAAK,CAAA,EAGpBE,EAAaC,EAAAA,SAAS,IACpBH,EAAM,QAAUN,EAAM,WAC7B,2jDCJD,MAAMZ,EAAOC,EAEbqB,EAAAA,UAAU,IAAM,CACR,OAAA,iBAAiB,SAAUC,CAAY,CAAA,CAC9C,EAEDC,EAAAA,YAAY,IAAM,CACV,OAAA,oBAAoB,SAAUD,CAAY,CAAA,CACjD,EAED,MAAMA,EAAe,IAAM,CAC1B,MAAME,EAAyB,SAAS,gBAAgB,aAAe,OAAO,YACxEC,EAAiB,SAAS,gBAAgB,UAC5CD,EAAyBC,GAAkB,GAC9C1B,EAAK,cAAc,CACpB,utBCjCD,MAAMA,EAAOC,EAEP0B,EAAsB,IAAM,CACjC3B,EAAK,OAAO,CAAA,yaCbb,MAAMA,EAAOC,EACP2B,EAAUb,MAAI,EAAE,EAEhBc,EAAmBV,GAAsC,CAC1DA,EAAM,OAAO,UAAY,UACxBA,EAAM,MAAQ,QACTS,EAAA,OAAS,GAAGT,EAAM,GAAG,IAExBnB,EAAA,YAAa4B,EAAQ,KAAK,EAC/BA,EAAQ,MAAQ,IAElB,EAGDN,OAAAA,EAAAA,UAAU,IAAM,CACN,SAAA,iBAAiB,WAAqBH,GAAA,CAC9CU,EAAgBV,CAAK,CAAA,CACrB,CAAA,CACD,EAEDK,EAAAA,YAAY,IAAM,CACV,OAAA,oBAAoB,WAAqBL,GAAA,CAC/CU,EAAgBV,CAAK,CAAA,CACrB,CAAA,CACD,0DCjBD,SAASW,EAAQC,EAAwB,CACpCA,EAAA,UAAU,eAAgBC,CAAY,EACtCD,EAAA,UAAU,YAAaE,CAAS,EAChCF,EAAA,UAAU,kBAAmBG,CAAe,EAC5CH,EAAA,UAAU,UAAWI,CAAO,EAC5BJ,EAAA,UAAU,YAAaK,CAAS,EAChCL,EAAA,UAAU,YAAaM,CAAS,EAChCN,EAAA,UAAU,aAAcO,CAAU,EAClCP,EAAA,UAAU,WAAYQ,CAAQ,EAC9BR,EAAA,UAAU,WAAYS,CAAQ,EAC9BT,EAAA,UAAU,SAAUU,CAAM,EAC1BV,EAAA,UAAU,YAAaW,CAAS,CACrC"}

package/dist/style.css

@@ -1 +0,0 @@
-.container[data-v-4d5731cd]{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-4d5731cd]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark[data-v-4d5731cd]{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-4d5731cd]{background-color:#fff}.container input:checked~.checkmark[data-v-4d5731cd]{background-color:var(--brand-secondary)}.checkmark[data-v-4d5731cd]:after{content:"";position:absolute;display:none}.container input:checked~.checkmark[data-v-4d5731cd]:after{display:block}.container .checkmark[data-v-4d5731cd]: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%)}