@stonecrop/beam 0.2.22 → 0.2.24

package/dist/beam.js

@@ -1,12 +1,12 @@
-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({
+import { defineComponent as m, openBlock as l, createElementBlock as r, 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__ */ m({
   __name: "ActionFooter",
   emits: ["click"],
   setup(t, { emit: e }) {
     const o = e, s = () => {
       o("click");
     };
-    return (n, a) => (l(), i("footer", F, [
+    return (n, a) => (l(), r("footer", F, [
       c("span", O, [
         c("button", {
           class: "footer-action btn",
@@ -17,7 +17,7 @@ const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper"
       ])
     ]));
   }
-}), P = { class: "beam__modal" }, U = /* @__PURE__ */ u({
+}), P = { class: "beam__modal" }, U = /* @__PURE__ */ m({
   __name: "BeamModal",
   props: {
     showModal: { type: Boolean }
@@ -44,7 +44,7 @@ const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper"
       });
     };
   }
-}), z = /* @__PURE__ */ u({
+}), z = /* @__PURE__ */ m({
   __name: "BeamModalOutlet",
   emits: ["confirmmodal", "closemodal"],
   setup(t, { emit: e }) {
@@ -60,7 +60,7 @@ const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper"
   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, [
+  return l(), r("div", Y, [
     j,
     c("button", {
       class: "btn",
@@ -75,27 +75,27 @@ function q(t, e) {
 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({
+}, null, -1)), X = /* @__PURE__ */ m({
   __name: "ItemCheck",
   props: {
     value: { type: Boolean }
   },
   emits: ["input"],
   setup(t, { emit: e }) {
-    const o = t, s = e, n = v(o.value), a = (r) => {
+    const o = t, s = e, n = v(o.value), a = (i) => {
       s("input", n.value);
     };
-    return (r, m) => (l(), i("label", K, [
+    return (i, u) => (l(), r("label", K, [
       c("input", {
         type: "checkbox",
-        checked: r.value,
+        checked: i.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({
+}), w = /* @__PURE__ */ I(X, [["__scopeId", "data-v-4d5731cd"]]), Z = { class: "beam__itemcount" }, x = ["contenteditable"], ee = { key: 0 }, y = /* @__PURE__ */ m({
   __name: "ItemCount",
   props: {
     value: { default: 0 },
@@ -105,27 +105,27 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
   },
   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, [
+    const o = e, s = t, n = v(s.value), a = (u) => {
+      u.preventDefault(), u.stopPropagation(), n.value = Number(u.target.innerHTML.replace(/[^0-9]/g, "")), o("input", n.value);
+    }, i = M(() => n.value === s.denominator);
+    return (u, pe) => (l(), r("div", Z, [
       c("span", {
-        contenteditable: m.editable,
-        class: N({ alert: r.value === !1 }),
+        contenteditable: u.editable,
+        class: N({ alert: i.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)
+      c("span", null, "/" + p(u.denominator), 1),
+      u.uom ? (l(), r("span", ee, "  " + p(u.uom), 1)) : h("", !0)
     ]));
   }
-}), te = ["href"], oe = /* @__PURE__ */ u({
+}), te = ["href"], oe = /* @__PURE__ */ m({
   __name: "ListAnchor",
   props: {
     to: { default: "" }
   },
   setup(t) {
-    return (e, o) => (l(), i("a", {
+    return (e, o) => (l(), r("a", {
       href: e.to,
       class: "beam__listanchor"
     }, [
@@ -135,13 +135,13 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
 }), ne = {
   tabindex: "0",
   class: "beam__listitem"
-}, se = { class: "beam__listtext" }, f = /* @__PURE__ */ u({
+}, se = { class: "beam__listtext" }, f = /* @__PURE__ */ m({
   __name: "ListItem",
   props: {
     item: {}
   },
   setup(t) {
-    return (e, o) => (l(), i("li", ne, [
+    return (e, o) => (l(), r("li", ne, [
       c("div", se, [
         c("label", null, p(e.item.label), 1),
         c("p", null, p(e.item.description), 1)
@@ -161,7 +161,7 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
       }, null, 8, ["modelValue"])) : h("", !0)
     ]));
   }
-}), ae = { class: "beam__listview" }, le = /* @__PURE__ */ u({
+}), ae = { class: "beam__listview" }, le = /* @__PURE__ */ m({
   __name: "ListView",
   props: {
     items: {}
@@ -178,32 +178,34 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
       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), {
+    return (n, a) => (l(), r("ul", ae, [
+      (l(!0), r(S, null, E(n.items, (i) => (l(), r("li", {
+        key: i.label
+      }, [
+        i.linkComponent ? (l(), _(A(i.linkComponent), {
           key: 0,
-          to: r.route,
+          to: i.route,
           tabindex: "-1"
         }, {
           default: $(() => [
-            T(f, { item: r }, null, 8, ["item"])
+            T(f, { item: i }, null, 8, ["item"])
           ]),
           _: 2
         }, 1032, ["to"])) : (l(), _(f, {
           key: 1,
-          item: r
+          item: i
         }, 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({
+}), 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__ */ m({
   __name: "Navbar",
   emits: ["click"],
   setup(t, { emit: e }) {
     const o = e, s = () => {
       o("click");
     };
-    return (n, a) => (l(), i("nav", ce, [
+    return (n, a) => (l(), r("nav", ce, [
       d(n.$slots, "icon", {}, () => [
         ie
       ]),
@@ -222,7 +224,7 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
       ])
     ]));
   }
-}), de = { id: "scan_input" }, _e = /* @__PURE__ */ u({
+}), de = { id: "scan_input" }, _e = /* @__PURE__ */ m({
   __name: "ScanInput",
   emits: ["scaninput"],
   setup(t, { emit: e }) {
@@ -237,7 +239,7 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
       window.removeEventListener("keypress", (a) => {
         n(a);
       });
-    }), (a, r) => (l(), i("div", de));
+    }), (a, i) => (l(), r("div", de));
   }
 });
 function fe(t) {

package/dist/beam.js.map

@@ -1 +1 @@
-{"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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"}
+{"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 in items\" :key=\"item.label\">\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 +1,2 @@
-(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"})});
+(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=>(e.openBlock(),e.createElementBlock("li",{key:i.label},[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 +1 @@
-{"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"}
+{"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 in items\" :key=\"item.label\">\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,ytBCjCD,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/package.json

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

package/src/components/ListView.vue

@@ -1,6 +1,6 @@
 <template>
 	<ul class="beam__listview">
-		<li v-for="(item, index) in items" :key="index">
+		<li v-for="item in items" :key="item.label">
 			<template v-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
 					<ListItem :item="item"></ListItem>