@stonecrop/beam 0.2.23 → 0.2.25

package/dist/beam.d.ts

@@ -0,0 +1,43 @@
+import ActionFooter from '@/components/ActionFooter.vue';
+import { App } from 'vue';
+import BeamModal from '@/components/BeamModal.vue';
+import BeamModalOutlet from '@/components/BeamModalOutlet.vue';
+import Confirm from '@/components/Confirm.vue';
+import ItemCheck from '@/components/ItemCheck.vue';
+import ItemCount from '@/components/ItemCount.vue';
+import ListAnchor from '@/components/ListAnchor.vue';
+import ListItem from '@/components/ListItem.vue';
+import ListView from '@/components/ListView.vue';
+import Navbar from '@/components/Navbar.vue';
+import ScanInput from '@/components/ScanInput.vue';
+
+export { ActionFooter }
+
+export { BeamModal }
+
+export { BeamModalOutlet }
+
+export { Confirm }
+
+/**
+ * Install all Beam components
+ * @param app - Vue app instance
+ * @public
+ */
+export declare function install(app: App): void;
+
+export { ItemCheck }
+
+export { ItemCount }
+
+export { ListAnchor }
+
+export { ListItem }
+
+export { ListView }
+
+export { Navbar }
+
+export { ScanInput }
+
+export { }

package/dist/beam.js

@@ -1,10 +1,10 @@
-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 i, createElementVNode as c, renderSlot as d, resolveComponent as f, createBlock as _, withCtx as $, withDirectives as L, vShow as g, ref as h, pushScopeId as V, popScopeId as B, computed as E, normalizeClass as M, toDisplayString as p, createCommentVNode as v, onMounted as k, onUnmounted as C, Fragment as N, renderList as S, 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");
+  setup(e, { emit: o }) {
+    const t = o, s = () => {
+      t("click");
     };
     return (n, a) => (l(), i("footer", F, [
       c("span", O, [
@@ -17,75 +17,74 @@ 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 }
   },
-  setup(t) {
-    return (e, o) => {
-      const s = b("portal");
+  setup(e) {
+    return (o, t) => {
+      const s = f("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"))
+              onClick: t[0] || (t[0] = (n) => o.$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"))
+            d(o.$slots, "default", {
+              onClosemodal: t[1] || (t[1] = (n) => o.$emit("closemodal")),
+              onConfirmmodal: t[2] || (t[2] = (n) => o.$emit("confirmmodal"))
             })
           ], 512), [
-            [g, e.showModal]
+            [g, o.showModal]
           ])
         ]),
         _: 3
       });
     };
   }
-}), z = /* @__PURE__ */ u({
+}), z = /* @__PURE__ */ m({
   __name: "BeamModalOutlet",
-  emits: ["confirmmodal", "closemodal"],
-  setup(t, { emit: e }) {
-    return (o, s) => {
-      const n = b("portal-target");
-      return l(), _(n, { name: "beam__modal_outlet" });
+  setup(e) {
+    return (o, t) => {
+      const s = f("portal-target");
+      return l(), _(s, { 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,
+}), I = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [s, n] of o)
+    t[s] = n;
+  return t;
+}, K = {}, W = { class: "beam__modal-confirm" }, Y = /* @__PURE__ */ c("h2", null, "Would you like to continue?", -1);
+function j(e, o) {
+  return l(), i("div", W, [
+    Y,
     c("button", {
       class: "btn",
-      onClick: e[0] || (e[0] = (o) => t.$emit("confirmmodal"))
+      onClick: o[0] || (o[0] = (t) => e.$emit("confirmmodal"))
     }, "Yes"),
     c("button", {
       class: "btn",
-      onClick: e[1] || (e[1] = (o) => t.$emit("closemodal"))
+      onClick: o[1] || (o[1] = (t) => e.$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", {
+const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"), e = e(), B(), e), J = { class: "container" }, Q = ["checked"], R = /* @__PURE__ */ G(() => /* @__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) => {
+  setup(e, { emit: o }) {
+    const t = e, s = o, n = h(t.value), a = () => {
       s("input", n.value);
     };
-    return (r, m) => (l(), i("label", K, [
+    return (r, u) => (l(), i("label", J, [
       c("input", {
         type: "checkbox",
         checked: r.value,
@@ -95,7 +94,7 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
       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-7261b52e"]]), Z = { class: "beam__itemcount" }, x = ["contenteditable"], ee = { key: 0 }, y = /* @__PURE__ */ m({
   __name: "ItemCount",
   props: {
     value: { default: 0 },
@@ -104,71 +103,72 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
     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, [
+  setup(e, { emit: o }) {
+    const t = o, s = e, n = h(s.value), a = (u) => {
+      u.preventDefault(), u.stopPropagation(), n.value = Number(u.target.innerHTML.replace(/[^0-9]/g, "")), t("input", n.value);
+    }, r = E(() => n.value === s.denominator);
+    return (u, pe) => (l(), i("div", Z, [
       c("span", {
-        contenteditable: m.editable,
-        class: N({ alert: r.value === !1 }),
+        contenteditable: u.editable,
+        class: M({ 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)
+      c("span", null, "/" + p(u.denominator), 1),
+      u.uom ? (l(), i("span", ee, "  " + p(u.uom), 1)) : v("", !0)
     ]));
   }
-}), te = ["href"], oe = /* @__PURE__ */ u({
+}), te = ["href"], oe = /* @__PURE__ */ m({
   __name: "ListAnchor",
   props: {
     to: { default: "" }
   },
-  setup(t) {
-    return (e, o) => (l(), i("a", {
-      href: e.to,
+  setup(e) {
+    return (o, t) => (l(), i("a", {
+      href: o.to,
       class: "beam__listanchor"
     }, [
-      d(e.$slots, "default")
+      d(o.$slots, "default")
     ], 8, te));
   }
 }), ne = {
   tabindex: "0",
   class: "beam__listitem"
-}, se = { class: "beam__listtext" }, f = /* @__PURE__ */ u({
+}, se = { class: "beam__listtext" }, b = /* @__PURE__ */ m({
   __name: "ListItem",
   props: {
     item: {}
   },
-  setup(t) {
-    return (e, o) => (l(), i("li", ne, [
+  setup(e) {
+    const t = h(e.item);
+    return (s, n) => (l(), i("li", ne, [
       c("div", se, [
-        c("label", null, p(e.item.label), 1),
-        c("p", null, p(e.item.description), 1)
+        c("label", null, p(s.item.label), 1),
+        c("p", null, p(s.item.description), 1)
       ]),
-      e.item.count ? (l(), _(y, {
+      s.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,
+        modelValue: t.value.count.count,
+        "onUpdate:modelValue": n[0] || (n[0] = (a) => t.value.count.count = a),
+        denominator: s.item.count.of,
+        uom: s.item.count.uom,
         editable: !0
-      }, null, 8, ["modelValue", "denominator", "uom"])) : h("", !0),
-      e.item.hasOwnProperty("checked") ? (l(), _(w, {
+      }, null, 8, ["modelValue", "denominator", "uom"])) : v("", !0),
+      s.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)
+        modelValue: t.value.checked,
+        "onUpdate:modelValue": n[1] || (n[1] = (a) => t.value.checked = a)
+      }, null, 8, ["modelValue"])) : v("", !0)
     ]));
   }
-}), ae = { class: "beam__listview" }, le = /* @__PURE__ */ u({
+}), ae = { class: "beam__listview" }, le = /* @__PURE__ */ m({
   __name: "ListView",
   props: {
     items: {}
   },
   emits: ["scrollbottom"],
-  setup(t, { emit: e }) {
-    const o = e;
+  setup(e, { emit: o }) {
+    const t = o;
     k(() => {
       window.addEventListener("scroll", s);
     }), C(() => {
@@ -176,32 +176,34 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
     });
     const s = () => {
       const n = document.documentElement.scrollHeight - window.innerHeight, a = document.documentElement.scrollTop;
-      n - a <= 2 && o("scrollbottom");
+      n - a <= 2 && t("scrollbottom");
     };
     return (n, a) => (l(), i("ul", ae, [
-      (l(!0), i(S, null, E(n.items, (r, m) => (l(), i("li", { key: m }, [
+      (l(!0), i(N, null, S(n.items, (r) => (l(), i("li", {
+        key: r.label
+      }, [
         r.linkComponent ? (l(), _(A(r.linkComponent), {
           key: 0,
           to: r.route,
           tabindex: "-1"
         }, {
           default: $(() => [
-            T(f, { item: r }, null, 8, ["item"])
+            T(b, { item: r }, null, 8, ["item"])
           ]),
           _: 2
-        }, 1032, ["to"])) : (l(), _(f, {
+        }, 1032, ["to"])) : (l(), _(b, {
           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({
+}), 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");
+  setup(e, { emit: o }) {
+    const t = o, s = () => {
+      t("click");
     };
     return (n, a) => (l(), i("nav", ce, [
       d(n.$slots, "icon", {}, () => [
@@ -222,12 +224,12 @@ 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 }) {
-    const o = e, s = v(""), n = (a) => {
-      a.target.tagName !== "INPUT" && (a.key !== "Enter" ? s.value += `${a.key}` : (o("scaninput", s.value), s.value = ""));
+  setup(e, { emit: o }) {
+    const t = o, s = h(""), n = (a) => {
+      a.target.tagName !== "INPUT" && (a instanceof KeyboardEvent && a.key !== "Enter" ? s.value += `${a.key}` : (t("scaninput", s.value), s.value = ""));
     };
     return k(() => {
       document.addEventListener("keypress", (a) => {
@@ -240,21 +242,21 @@ const G = /* @__PURE__ */ I(W, [["render", q]]), J = (t) => (V("data-v-4d5731cd"
     }), (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);
+function ve(e) {
+  e.component("ActionFooter", H), e.component("BeamModal", U), e.component("BeamModalOutlet", z), e.component("Confirm", q), e.component("ItemCheck", w), e.component("ItemCount", y), e.component("ListAnchor", oe), e.component("ListItem", b), e.component("ListView", le), e.component("Navbar", ue), e.component("ScanInput", _e);
 }
 export {
   H as ActionFooter,
   U as BeamModal,
   z as BeamModalOutlet,
-  G as Confirm,
+  q as Confirm,
   w as ItemCheck,
   y as ItemCount,
   oe as ListAnchor,
-  f as ListItem,
+  b as ListItem,
   le as ListView,
   ue as Navbar,
   _e as ScanInput,
-  fe as install
+  ve as install
 };
 //# sourceMappingURL=beam.js.map

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/ListItem.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 = () => {\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 as HTMLElement).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<li tabindex=\"0\" class=\"beam__listitem\">\n\t\t<div class=\"beam__listtext\">\n\t\t\t<label>{{ item.label }}</label>\n\t\t\t<p>{{ item.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"item.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:denominator=\"item.count.of\"\n\t\t\t:uom=\"item.count.uom\"\n\t\t\t:editable=\"true\" />\n\t\t<ItemCheck v-if=\"item.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport ItemCount from '@/components/ItemCount.vue'\nimport ItemCheck from '@/components/ItemCheck.vue'\n\nconst props = defineProps<{\n\titem: {\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}\n}>()\n\nconst listItem = ref(props.item)\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 '@/components/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 as HTMLElement).tagName !== 'INPUT') {\n\t\tif (event instanceof KeyboardEvent && 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\n/**\n * Install all Beam components\n * @param app - Vue app instance\n * @public\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","count","event","countColor","computed","listItem","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.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.5.2"}

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(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s["@stonecrop/beam"]={},s.Vue))})(this,function(s,e){"use strict";const E={class:"beam__actionfooter"},V={class:"footer-action-wrapper"},_=e.defineComponent({__name:"ActionFooter",emits:["click"],setup(t,{emit:o}){const n=o,c=()=>{n("click")};return(l,a)=>(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(t){return(o,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=>o.$emit("closemodal"))},"Close Modal"),e.renderSlot(o.$slots,"default",{onClosemodal:n[1]||(n[1]=l=>o.$emit("closemodal")),onConfirmmodal:n[2]||(n[2]=l=>o.$emit("confirmmodal"))})],512),[[e.vShow,o.showModal]])]),_:3})}}}),k=e.defineComponent({__name:"BeamModalOutlet",setup(t){return(o,n)=>{const c=e.resolveComponent("portal-target");return e.openBlock(),e.createBlock(c,{name:"beam__modal_outlet"})}}}),u=(t,o)=>{const n=t.__vccOpts||t;for(const[c,l]of o)n[c]=l;return n},y={},I={class:"beam__modal-confirm"},w=e.createElementVNode("h2",null,"Would you like to continue?",-1);function S(t,o){return e.openBlock(),e.createElementBlock("div",I,[w,e.createElementVNode("button",{class:"btn",onClick:o[0]||(o[0]=n=>t.$emit("confirmmodal"))},"Yes"),e.createElementVNode("button",{class:"btn",onClick:o[1]||(o[1]=n=>t.$emit("closemodal"))},"No")])}const h=u(y,[["render",S]]),g=t=>(e.pushScopeId("data-v-7261b52e"),t=t(),e.popScopeId(),t),L={class:"container"},M=["checked"],A=g(()=>e.createElementVNode("div",{class:"checkmark",tabindex:"0"},null,-1)),d=u(e.defineComponent({__name:"ItemCheck",props:{value:{type:Boolean}},emits:["input"],setup(t,{emit:o}){const n=t,c=o,l=e.ref(n.value),a=()=>{c("input",l.value)};return(r,i)=>(e.openBlock(),e.createElementBlock("label",L,[e.createElementVNode("input",{type:"checkbox",checked:r.value,onInput:a,tabindex:"-1"},null,40,M),A]))}}),[["__scopeId","data-v-7261b52e"]]),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(t,{emit:o}){const n=o,c=t,l=e.ref(c.value),a=i=>{i.preventDefault(),i.stopPropagation(),l.value=Number(i.target.innerHTML.replace(/[^0-9]/g,"")),n("input",l.value)},r=e.computed(()=>l.value===c.denominator);return(i,J)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("span",{contenteditable:i.editable,class:e.normalizeClass({alert:r.value===!1}),onInput:a,onClick:a},e.toDisplayString(l.value),43,T),e.createElementVNode("span",null,"/"+e.toDisplayString(i.denominator),1),i.uom?(e.openBlock(),e.createElementBlock("span",O,"  "+e.toDisplayString(i.uom),1)):e.createCommentVNode("",!0)]))}}),F=["href"],b=e.defineComponent({__name:"ListAnchor",props:{to:{default:""}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("a",{href:o.to,class:"beam__listanchor"},[e.renderSlot(o.$slots,"default")],8,F))}}),P={tabindex:"0",class:"beam__listitem"},U={class:"beam__listtext"},m=e.defineComponent({__name:"ListItem",props:{item:{}},setup(t){const o=t,n=e.ref(o.item);return(c,l)=>(e.openBlock(),e.createElementBlock("li",P,[e.createElementVNode("div",U,[e.createElementVNode("label",null,e.toDisplayString(c.item.label),1),e.createElementVNode("p",null,e.toDisplayString(c.item.description),1)]),c.item.count?(e.openBlock(),e.createBlock(p,{key:0,modelValue:n.value.count.count,"onUpdate:modelValue":l[0]||(l[0]=a=>n.value.count.count=a),denominator:c.item.count.of,uom:c.item.count.uom,editable:!0},null,8,["modelValue","denominator","uom"])):e.createCommentVNode("",!0),c.item.hasOwnProperty("checked")?(e.openBlock(),e.createBlock(d,{key:1,modelValue:n.value.checked,"onUpdate:modelValue":l[1]||(l[1]=a=>n.value.checked=a)},null,8,["modelValue"])):e.createCommentVNode("",!0)]))}}),H={class:"beam__listview"},B=e.defineComponent({__name:"ListView",props:{items:{}},emits:["scrollbottom"],setup(t,{emit:o}){const n=o;e.onMounted(()=>{window.addEventListener("scroll",c)}),e.onUnmounted(()=>{window.removeEventListener("scroll",c)});const c=()=>{const l=document.documentElement.scrollHeight-window.innerHeight,a=document.documentElement.scrollTop;l-a<=2&&n("scrollbottom")};return(l,a)=>(e.openBlock(),e.createElementBlock("ul",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.items,r=>(e.openBlock(),e.createElementBlock("li",{key:r.label},[r.linkComponent?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.linkComponent),{key:0,to:r.route,tabindex:"-1"},{default:e.withCtx(()=>[e.createVNode(m,{item:r},null,8,["item"])]),_:2},1032,["to"])):(e.openBlock(),e.createBlock(m,{key:1,item:r},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),K={class:"navbar-action-wrapper"},$=e.defineComponent({__name:"Navbar",emits:["click"],setup(t,{emit:o}){const n=o,c=()=>{n("click")};return(l,a)=>(e.openBlock(),e.createElementBlock("nav",j,[e.renderSlot(l.$slots,"icon",{},()=>[q]),e.renderSlot(l.$slots,"title",{},()=>[z]),e.createElementVNode("div",K,[e.createElementVNode("button",{class:"navbar-action btn",onClick:c},[e.renderSlot(l.$slots,"navbaraction",{},()=>[e.createTextVNode("Action")])])])]))}}),W={id:"scan_input"},C=e.defineComponent({__name:"ScanInput",emits:["scaninput"],setup(t,{emit:o}){const n=o,c=e.ref(""),l=a=>{a.target.tagName!=="INPUT"&&(a instanceof KeyboardEvent&&a.key!=="Enter"?c.value+=`${a.key}`:(n("scaninput",c.value),c.value=""))};return e.onMounted(()=>{document.addEventListener("keypress",a=>{l(a)})}),e.onUnmounted(()=>{window.removeEventListener("keypress",a=>{l(a)})}),(a,r)=>(e.openBlock(),e.createElementBlock("div",W))}});function Y(t){t.component("ActionFooter",_),t.component("BeamModal",f),t.component("BeamModalOutlet",k),t.component("Confirm",h),t.component("ItemCheck",d),t.component("ItemCount",p),t.component("ListAnchor",b),t.component("ListItem",m),t.component("ListView",B),t.component("Navbar",$),t.component("ScanInput",C)}s.ActionFooter=_,s.BeamModal=f,s.BeamModalOutlet=k,s.Confirm=h,s.ItemCheck=d,s.ItemCount=p,s.ListAnchor=b,s.ListItem=m,s.ListView=B,s.Navbar=$,s.ScanInput=C,s.install=Y,Object.defineProperty(s,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/ListItem.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 = () => {\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 as HTMLElement).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<li tabindex=\"0\" class=\"beam__listitem\">\n\t\t<div class=\"beam__listtext\">\n\t\t\t<label>{{ item.label }}</label>\n\t\t\t<p>{{ item.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"item.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:denominator=\"item.count.of\"\n\t\t\t:uom=\"item.count.uom\"\n\t\t\t:editable=\"true\" />\n\t\t<ItemCheck v-if=\"item.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nimport ItemCount from '@/components/ItemCount.vue'\nimport ItemCheck from '@/components/ItemCheck.vue'\n\nconst props = defineProps<{\n\titem: {\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}\n}>()\n\nconst listItem = ref(props.item)\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 '@/components/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 as HTMLElement).tagName !== 'INPUT') {\n\t\tif (event instanceof KeyboardEvent && 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\n/**\n * Install all Beam components\n * @param app - Vue app instance\n * @public\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","count","event","countColor","computed","listItem","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,mhCCZXG,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,EAAc,IAAM,CACpBhB,EAAA,QAASc,EAAQ,KAAK,CAAA,8aCH5B,MAAMd,EAAOC,EACPW,EAAQC,EAURI,EAAQF,EAAAA,IAAIH,EAAM,KAAK,EAEvBI,EAAeE,GAAmC,CACvDA,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EAChBD,EAAA,MAAQ,OAAQC,EAAM,OAAuB,UAAU,QAAQ,UAAW,EAAE,CAAC,EAC9ElB,EAAA,QAASiB,EAAM,KAAK,CAAA,EAGpBE,EAAaC,EAAAA,SAAS,IACpBH,EAAM,QAAUL,EAAM,WAC7B,qvBChBD,MAAMA,EAAQC,EAaRQ,EAAWN,EAAAA,IAAIH,EAAM,IAAI,40BCD/B,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,EAAmBX,GAAsC,CACzDA,EAAM,OAAuB,UAAY,UACzCA,aAAiB,eAAiBA,EAAM,MAAQ,QAC3CU,EAAA,OAAS,GAAGV,EAAM,GAAG,IAExBlB,EAAA,YAAa4B,EAAQ,KAAK,EAC/BA,EAAQ,MAAQ,IAElB,EAGDN,OAAAA,EAAAA,UAAU,IAAM,CACN,SAAA,iBAAiB,WAAqBJ,GAAA,CAC9CW,EAAgBX,CAAK,CAAA,CACrB,CAAA,CACD,EAEDM,EAAAA,YAAY,IAAM,CACV,OAAA,oBAAoB,WAAqBN,GAAA,CAC/CW,EAAgBX,CAAK,CAAA,CACrB,CAAA,CACD,0DCZD,SAASY,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/index.js

@@ -0,0 +1,30 @@
+import ActionFooter from '@/components/ActionFooter.vue';
+import BeamModal from '@/components/BeamModal.vue';
+import BeamModalOutlet from '@/components/BeamModalOutlet.vue';
+import Confirm from '@/components/Confirm.vue';
+import ItemCheck from '@/components/ItemCheck.vue';
+import ItemCount from '@/components/ItemCount.vue';
+import ListAnchor from '@/components/ListAnchor.vue';
+import ListItem from '@/components/ListItem.vue';
+import ListView from '@/components/ListView.vue';
+import Navbar from '@/components/Navbar.vue';
+import ScanInput from '@/components/ScanInput.vue';
+/**
+ * Install all Beam components
+ * @param app - Vue app instance
+ * @public
+ */
+function install(app /* options */) {
+    app.component('ActionFooter', ActionFooter);
+    app.component('BeamModal', BeamModal);
+    app.component('BeamModalOutlet', BeamModalOutlet);
+    app.component('Confirm', Confirm);
+    app.component('ItemCheck', ItemCheck);
+    app.component('ItemCount', ItemCount);
+    app.component('ListAnchor', ListAnchor);
+    app.component('ListItem', ListItem);
+    app.component('ListView', ListView);
+    app.component('Navbar', Navbar);
+    app.component('ScanInput', ScanInput);
+}
+export { ActionFooter, BeamModal, BeamModalOutlet, Confirm, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, install, };

package/dist/src/index.d.ts

@@ -0,0 +1,20 @@
+import { App } from 'vue';
+import ActionFooter from '@/components/ActionFooter.vue';
+import BeamModal from '@/components/BeamModal.vue';
+import BeamModalOutlet from '@/components/BeamModalOutlet.vue';
+import Confirm from '@/components/Confirm.vue';
+import ItemCheck from '@/components/ItemCheck.vue';
+import ItemCount from '@/components/ItemCount.vue';
+import ListAnchor from '@/components/ListAnchor.vue';
+import ListItem from '@/components/ListItem.vue';
+import ListView from '@/components/ListView.vue';
+import Navbar from '@/components/Navbar.vue';
+import ScanInput from '@/components/ScanInput.vue';
+/**
+ * Install all Beam components
+ * @param app - Vue app instance
+ * @public
+ */
+declare function install(app: App): void;
+export { ActionFooter, BeamModal, BeamModalOutlet, Confirm, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, install, };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAElD;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAYxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,eAAe,EACf,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,GACP,CAAA"}

package/dist/style.css

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

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.47.0"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -29,23 +29,23 @@
     "src/*"
   ],
   "dependencies": {
-    "portal-vue": "^3.0.0",
-    "vue": "^3.4.23"
+    "vue": "^3.4.31"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.17",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "cypress": "^12.11.0",
+    "@microsoft/api-documenter": "^7.25.3",
+    "@rushstack/heft": "^0.66.18",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "cypress": "^13.11.0",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
-    "histoire": "^0.17.17",
     "sass": "^1.75.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.9",
-    "vue-router": "^4"
+    "typescript": "^5.5.2",
+    "vite": "^5.3.2",
+    "vue-router": "^4.4.0",
+    "stonecrop-rig": "0.2.22"
   },
   "publishConfig": {
     "access": "public"
@@ -54,13 +54,11 @@
     "node": ">=20.11.0"
   },
   "scripts": {
-    "prepublish": "tsc -b && vite build",
-    "build": "tsc -b && vite build",
+    "prepublish": "heft build && vite build && rushx docs",
+    "build": "heft build && vite build && rushx docs",
     "dev": "vite",
+    "docs": "api-documenter markdown -i temp -o ../docs/beam",
     "lint": "eslint . --ext .ts,.vue",
-    "preview": "vite preview",
-    "story:build": "histoire build",
-    "story:dev": "histoire dev",
-    "story:preview": "histoire preview"
+    "preview": "vite preview"
   }
 }

package/src/components/BeamModalOutlet.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits(['confirmmodal', 'closemodal'])
+// const emit = defineEmits(['confirmmodal', 'closemodal'])
 
-const confirmModal = () => {
-	emit('confirmmodal')
-}
-const closeModal = () => {
-	emit('closemodal')
-}
+// const confirmModal = () => {
+// 	emit('confirmmodal')
+// }
+
+// const closeModal = () => {
+// 	emit('closemodal')
+// }
 </script>

package/src/components/ItemCheck.vue

@@ -17,7 +17,7 @@ const emit = defineEmits(['input'])
 
 const checked = ref(props.value)
 
-const handleInput = (e: InputEvent) => {
+const handleInput = () => {
 	emit('input', checked.value)
 }
 </script>

package/src/components/ItemCount.vue

@@ -31,7 +31,7 @@ const count = ref(props.value)
 const handleInput = (event: InputEvent | MouseEvent) => {
 	event.preventDefault()
 	event.stopPropagation()
-	count.value = Number(event.target.innerHTML.replace(/[^0-9]/g, ''))
+	count.value = Number((event.target as HTMLElement).innerHTML.replace(/[^0-9]/g, ''))
 	emit('input', count.value)
 }
 

package/src/components/ListItem.vue

@@ -7,19 +7,21 @@
 
 		<ItemCount
 			v-if="item.count"
-			v-model="item.count.count"
+			v-model="listItem.count.count"
 			:denominator="item.count.of"
 			:uom="item.count.uom"
 			:editable="true" />
-		<ItemCheck v-if="item.hasOwnProperty('checked')" v-model="item.checked" />
+		<ItemCheck v-if="item.hasOwnProperty('checked')" v-model="listItem.checked" />
 	</li>
 </template>
 
 <script setup lang="ts">
-import ItemCount from './ItemCount.vue'
-import ItemCheck from './ItemCheck.vue'
+import { ref } from 'vue'
 
-defineProps<{
+import ItemCount from '@/components/ItemCount.vue'
+import ItemCheck from '@/components/ItemCheck.vue'
+
+const props = defineProps<{
 	item: {
 		label: string
 		description: string
@@ -31,4 +33,6 @@ defineProps<{
 		checked?: boolean
 	}
 }>()
+
+const listItem = ref(props.item)
 </script>

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>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 
-import ListItem from './ListItem.vue'
+import ListItem from '@/components/ListItem.vue'
 
 defineProps<{
 	items: {

package/src/components/ScanInput.vue

@@ -9,8 +9,8 @@ const emit = defineEmits(['scaninput'])
 const barcode = ref('')
 
 const handleScanInput = (event: InputEvent | KeyboardEvent) => {
-	if (event.target.tagName !== 'INPUT') {
-		if (event.key !== 'Enter') {
+	if ((event.target as HTMLElement).tagName !== 'INPUT') {
+		if (event instanceof KeyboardEvent && event.key !== 'Enter') {
 			barcode.value += `${event.key}`
 		} else {
 			emit('scaninput', barcode.value)

package/src/index.ts

@@ -12,6 +12,11 @@ import ListView from '@/components/ListView.vue'
 import Navbar from '@/components/Navbar.vue'
 import ScanInput from '@/components/ScanInput.vue'
 
+/**
+ * Install all Beam components
+ * @param app - Vue app instance
+ * @public
+ */
 function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamModal', BeamModal)

package/src/histoire.setup.ts

@@ -1,30 +0,0 @@
-import { defineSetupVue3 } from '@histoire/plugin-vue'
-
-import ActionFooter from '@/components/ActionFooter.vue'
-import BeamModal from '@/components/BeamModal.vue'
-import BeamModalOutlet from '@/components/BeamModalOutlet.vue'
-import Confirm from '@/components/Confirm.vue'
-import ItemCheck from '@/components/ItemCheck.vue'
-import ItemCount from '@/components/ItemCount.vue'
-import ListAnchor from '@/components/ListAnchor.vue'
-import ListItem from '@/components/ListItem.vue'
-import ListView from '@/components/ListView.vue'
-import Navbar from '@/components/Navbar.vue'
-import ScanInput from '@/components/ScanInput.vue'
-import PortalVue from 'portal-vue'
-
-export const setupVue3 = defineSetupVue3(({ app }) => {
-	app.use(PortalVue)
-
-	app.component('ActionFooter', ActionFooter)
-	app.component('BeamModal', BeamModal)
-	app.component('BeamModalOutlet', BeamModalOutlet)
-	app.component('Confirm', Confirm)
-	app.component('ItemCheck', ItemCheck)
-	app.component('ItemCount', ItemCount)
-	app.component('ListAnchor', ListAnchor)
-	app.component('ListItem', ListItem)
-	app.component('ListView', ListView)
-	app.component('Navbar', Navbar)
-	app.component('ScanInput', ScanInput)
-})