@stonecrop/beam 0.2.29 → 0.2.31

package/dist/beam.js

@@ -1,18 +1,18 @@
-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";
+import { defineComponent as m, openBlock as l, createElementBlock as i, createElementVNode as c, renderSlot as p, resolveComponent as f, createBlock as d, 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 _, 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(e, { emit: o }) {
-    const t = o, s = () => {
+    const t = o, n = () => {
       t("click");
     };
-    return (n, a) => (l(), i("footer", F, [
+    return (s, a) => (l(), i("footer", F, [
       c("span", O, [
         c("button", {
           class: "footer-action btn",
-          onClick: s
+          onClick: n
         }, [
-          d(n.$slots, "default")
+          p(s.$slots, "default")
         ])
       ])
     ]));
@@ -24,17 +24,17 @@ const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper"
   },
   setup(e) {
     return (o, t) => {
-      const s = f("portal");
-      return l(), _(s, { to: "beam__modal_outlet" }, {
+      const n = f("portal");
+      return l(), d(n, { to: "beam__modal_outlet" }, {
         default: $(() => [
           L(c("div", P, [
             c("button", {
               class: "btn",
-              onClick: t[0] || (t[0] = (n) => o.$emit("closemodal"))
+              onClick: t[0] || (t[0] = (s) => o.$emit("closemodal"))
             }, "Close Modal"),
-            d(o.$slots, "default", {
-              onClosemodal: t[1] || (t[1] = (n) => o.$emit("closemodal")),
-              onConfirmmodal: t[2] || (t[2] = (n) => o.$emit("confirmmodal"))
+            p(o.$slots, "default", {
+              onClosemodal: t[1] || (t[1] = (s) => o.$emit("closemodal")),
+              onConfirmmodal: t[2] || (t[2] = (s) => o.$emit("confirmmodal"))
             })
           ], 512), [
             [g, o.showModal]
@@ -48,14 +48,14 @@ const F = { class: "beam__actionfooter" }, O = { class: "footer-action-wrapper"
   __name: "BeamModalOutlet",
   setup(e) {
     return (o, t) => {
-      const s = f("portal-target");
-      return l(), _(s, { name: "beam__modal_outlet" });
+      const n = f("portal-target");
+      return l(), d(n, { name: "beam__modal_outlet" });
     };
   }
 }), I = (e, o) => {
   const t = e.__vccOpts || e;
-  for (const [s, n] of o)
-    t[s] = n;
+  for (const [n, s] of o)
+    t[n] = s;
   return t;
 }, K = {}, W = { class: "beam__modal-confirm" }, Y = /* @__PURE__ */ c("h2", null, "Would you like to continue?", -1);
 function j(e, o) {
@@ -81,8 +81,8 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
   },
   emits: ["input"],
   setup(e, { emit: o }) {
-    const t = e, s = o, n = h(t.value), a = () => {
-      s("input", n.value);
+    const t = e, n = o, s = h(t.value), a = () => {
+      n("input", s.value);
     };
     return (r, u) => (l(), i("label", J, [
       c("input", {
@@ -104,18 +104,18 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
   },
   emits: ["input"],
   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, [
+    const t = o, n = e, s = h(n.value), a = (u) => {
+      u.preventDefault(), u.stopPropagation(), s.value = Number(u.target.innerHTML.replace(/[^0-9]/g, "")), t("input", s.value);
+    }, r = E(() => s.value === n.denominator);
+    return (u, _e) => (l(), i("div", Z, [
       c("span", {
         contenteditable: u.editable,
         class: M({ alert: r.value === !1 }),
         onInput: a,
         onClick: a
-      }, p(n.value), 43, x),
-      c("span", null, "/" + p(u.denominator), 1),
-      u.uom ? (l(), i("span", ee, "  " + p(u.uom), 1)) : v("", !0)
+      }, _(s.value), 43, x),
+      c("span", null, "/" + _(u.denominator), 1),
+      u.uom ? (l(), i("span", ee, "  " + _(u.uom), 1)) : v("", !0)
     ]));
   }
 }), te = ["href"], oe = /* @__PURE__ */ m({
@@ -128,7 +128,7 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
       href: o.to,
       class: "beam__listanchor"
     }, [
-      d(o.$slots, "default")
+      p(o.$slots, "default")
     ], 8, te));
   }
 }), ne = {
@@ -141,23 +141,23 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
   },
   setup(e) {
     const t = h(e.item);
-    return (s, n) => (l(), i("li", ne, [
+    return (n, s) => (l(), i("li", ne, [
       c("div", se, [
-        c("label", null, p(s.item.label), 1),
-        c("p", null, p(s.item.description), 1)
+        c("label", null, _(n.item.label), 1),
+        c("p", null, _(n.item.description), 1)
       ]),
-      s.item.count ? (l(), _(y, {
+      n.item.count ? (l(), d(y, {
         key: 0,
         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,
+        "onUpdate:modelValue": s[0] || (s[0] = (a) => t.value.count.count = a),
+        denominator: n.item.count.of,
+        uom: n.item.count.uom,
         editable: !0
       }, null, 8, ["modelValue", "denominator", "uom"])) : v("", !0),
-      s.item.hasOwnProperty("checked") ? (l(), _(w, {
+      n.item.hasOwnProperty("checked") ? (l(), d(w, {
         key: 1,
         modelValue: t.value.checked,
-        "onUpdate:modelValue": n[1] || (n[1] = (a) => t.value.checked = a)
+        "onUpdate:modelValue": s[1] || (s[1] = (a) => t.value.checked = a)
       }, null, 8, ["modelValue"])) : v("", !0)
     ]));
   }
@@ -170,19 +170,19 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
   setup(e, { emit: o }) {
     const t = o;
     k(() => {
-      window.addEventListener("scroll", s);
+      window.addEventListener("scroll", n);
     }), C(() => {
-      window.removeEventListener("scroll", s);
+      window.removeEventListener("scroll", n);
     });
-    const s = () => {
-      const n = document.documentElement.scrollHeight - window.innerHeight, a = document.documentElement.scrollTop;
-      n - a <= 2 && t("scrollbottom");
+    const n = () => {
+      const s = document.documentElement.scrollHeight - window.innerHeight, a = document.documentElement.scrollTop;
+      s - a <= 2 && t("scrollbottom");
     };
-    return (n, a) => (l(), i("ul", ae, [
-      (l(!0), i(N, null, S(n.items, (r) => (l(), i("li", {
+    return (s, a) => (l(), i("ul", ae, [
+      (l(!0), i(N, null, S(s.items, (r) => (l(), i("li", {
         key: r.label
       }, [
-        r.linkComponent ? (l(), _(A(r.linkComponent), {
+        r.linkComponent ? (l(), d(A(r.linkComponent), {
           key: 0,
           to: r.route,
           tabindex: "-1"
@@ -191,59 +191,56 @@ const q = /* @__PURE__ */ I(K, [["render", j]]), G = (e) => (V("data-v-7261b52e"
             T(b, { item: r }, null, 8, ["item"])
           ]),
           _: 2
-        }, 1032, ["to"])) : (l(), _(b, {
+        }, 1032, ["to"])) : (l(), d(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__ */ m({
+}), ce = { class: "beam__navbar" }, ie = /* @__PURE__ */ c("h1", { class: "nav-title" }, "TITLE", -1), re = { class: "navbar-action-wrapper" }, me = /* @__PURE__ */ m({
   __name: "Navbar",
   emits: ["click"],
   setup(e, { emit: o }) {
-    const t = o, s = () => {
+    const t = o, n = () => {
       t("click");
     };
-    return (n, a) => (l(), i("nav", ce, [
-      d(n.$slots, "icon", {}, () => [
+    return (s, a) => (l(), i("nav", ce, [
+      p(s.$slots, "title", {}, () => [
         ie
       ]),
-      d(n.$slots, "title", {}, () => [
-        re
-      ]),
-      c("div", me, [
+      c("div", re, [
         c("button", {
           class: "navbar-action btn",
-          onClick: s
+          onClick: n
         }, [
-          d(n.$slots, "navbaraction", {}, () => [
+          p(s.$slots, "navbaraction", {}, () => [
             D("Action")
           ])
         ])
       ])
     ]));
   }
-}), de = { id: "scan_input" }, _e = /* @__PURE__ */ m({
+}), ue = { id: "scan_input" }, de = /* @__PURE__ */ m({
   __name: "ScanInput",
   emits: ["scaninput"],
   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 = ""));
+    const t = o, n = h(""), s = (a) => {
+      a.target.tagName !== "INPUT" && (a instanceof KeyboardEvent && a.key !== "Enter" ? n.value += `${a.key}` : (t("scaninput", n.value), n.value = ""));
     };
     return k(() => {
       document.addEventListener("keypress", (a) => {
-        n(a);
+        s(a);
       });
     }), C(() => {
       window.removeEventListener("keypress", (a) => {
-        n(a);
+        s(a);
       });
-    }), (a, r) => (l(), i("div", de));
+    }), (a, r) => (l(), i("div", ue));
   }
 });
-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);
+function he(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", me), e.component("ScanInput", de);
 }
 export {
   H as ActionFooter,
@@ -255,8 +252,8 @@ export {
   oe as ListAnchor,
   b as ListItem,
   le as ListView,
-  ue as Navbar,
-  _e as ScanInput,
-  ve as install
+  me as Navbar,
+  de as ScanInput,
+  he 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/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'\nimport 'themes/beam.css'\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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"}
+{"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=\"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'\nimport 'themes/beam.css'\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":";;;;;AAWA,UAAMA,IAAOC,GAEPC,IAAqB,MAAM;AAChC,MAAAF,EAAK,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WCZXG,IAAA,EAAA,OAAA,sBAAA;AADD,SAAAC,EAAAC,GAAAC,GAAA;SACqCC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA,IACpCM;AAAAA,IAAQC,EAAW,UAAA;AAAA,MAAE,OAAK;AAAA,eAA4BJ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAK,MAAAN,EAAA,MAAA,cAAA;AAAA,IACM,GAAA,KAAA;AAAA,IAApDK,EAAW,UAAA;AAAA,MAAE,OAAK;AAAA,eAAyBJ,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAK,MAAAN,EAAA,MAAA,YAAA;AAAA;;;;;;;;;;;;;ACOrD,UAAMO,IAAQC,GAIRb,IAAOC,GAEPa,IAAUC,EAAIH,EAAM,KAAK,GAEzBI,IAAc,MAAM;AACpB,MAAAhB,EAAA,SAASc,EAAQ,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;ACH5B,UAAMd,IAAOC,GACPW,IAAQC,GAURI,IAAQF,EAAIH,EAAM,KAAK,GAEvBI,IAAc,CAACE,MAAmC;AACvD,MAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GAChBD,EAAA,QAAQ,OAAQC,EAAM,OAAuB,UAAU,QAAQ,WAAW,EAAE,CAAC,GAC9ElB,EAAA,SAASiB,EAAM,KAAK;AAAA,IAAA,GAGpBE,IAAaC,EAAS,MACpBH,EAAM,UAAUL,EAAM,WAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHK,UAAAS,IAAWN,EAbHF,EAaa,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACD/B,UAAMb,IAAOC;AAEb,IAAAqB,EAAU,MAAM;AACR,aAAA,iBAAiB,UAAUC,CAAY;AAAA,IAAA,CAC9C,GAEDC,EAAY,MAAM;AACV,aAAA,oBAAoB,UAAUD,CAAY;AAAA,IAAA,CACjD;AAED,UAAMA,IAAe,MAAM;AAC1B,YAAME,IAAyB,SAAS,gBAAgB,eAAe,OAAO,aACxEC,IAAiB,SAAS,gBAAgB;AAC5C,MAAAD,IAAyBC,KAAkB,KAC9C1B,EAAK,cAAc;AAAA,IACpB;;;;;;;;;;;;;;;;;;;;;;;;;ACpCD,UAAMA,IAAOC,GAEP0B,IAAsB,MAAM;AACjC,MAAA3B,EAAK,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;ACVb,UAAMA,IAAOC,GACP2B,IAAUb,EAAI,EAAE,GAEhBc,IAAkB,CAACX,MAAsC;AACzD,MAAAA,EAAM,OAAuB,YAAY,YACzCA,aAAiB,iBAAiBA,EAAM,QAAQ,UAC3CU,EAAA,SAAS,GAAGV,EAAM,GAAG,MAExBlB,EAAA,aAAa4B,EAAQ,KAAK,GAC/BA,EAAQ,QAAQ;AAAA,IAElB;AAGD,WAAAN,EAAU,MAAM;AACN,eAAA,iBAAiB,YAAY,CAASJ,MAAA;AAC9C,QAAAW,EAAgBX,CAAK;AAAA,MAAA,CACrB;AAAA,IAAA,CACD,GAEDM,EAAY,MAAM;AACV,aAAA,oBAAoB,YAAY,CAASN,MAAA;AAC/C,QAAAW,EAAgBX,CAAK;AAAA,MAAA,CACrB;AAAA,IAAA,CACD;;;ACXD,SAASY,GAAQC,GAAwB;AACpC,EAAAA,EAAA,UAAU,gBAAgBC,CAAY,GACtCD,EAAA,UAAU,aAAaE,CAAS,GAChCF,EAAA,UAAU,mBAAmBG,CAAe,GAC5CH,EAAA,UAAU,WAAWI,CAAO,GAC5BJ,EAAA,UAAU,aAAaK,CAAS,GAChCL,EAAA,UAAU,aAAaM,CAAS,GAChCN,EAAA,UAAU,cAAcO,EAAU,GAClCP,EAAA,UAAU,YAAYQ,CAAQ,GAC9BR,EAAA,UAAU,YAAYS,EAAQ,GAC9BT,EAAA,UAAU,UAAUU,EAAM,GAC1BV,EAAA,UAAU,aAAaW,EAAS;AACrC;"}

package/dist/beam.umd.cjs

@@ -1,2 +1,2 @@
-(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"})});
+(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,l=()=>{n("click")};return(c,a)=>(e.openBlock(),e.createElementBlock("footer",E,[e.createElementVNode("span",V,[e.createElementVNode("button",{class:"footer-action btn",onClick:l},[e.renderSlot(c.$slots,"default")])])]))}}),y={class:"beam__modal"},f=e.defineComponent({__name:"BeamModal",props:{showModal:{type:Boolean}},setup(t){return(o,n)=>{const l=e.resolveComponent("portal");return e.openBlock(),e.createBlock(l,{to:"beam__modal_outlet"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",y,[e.createElementVNode("button",{class:"btn",onClick:n[0]||(n[0]=c=>o.$emit("closemodal"))},"Close Modal"),e.renderSlot(o.$slots,"default",{onClosemodal:n[1]||(n[1]=c=>o.$emit("closemodal")),onConfirmmodal:n[2]||(n[2]=c=>o.$emit("confirmmodal"))})],512),[[e.vShow,o.showModal]])]),_:3})}}}),k=e.defineComponent({__name:"BeamModalOutlet",setup(t){return(o,n)=>{const l=e.resolveComponent("portal-target");return e.openBlock(),e.createBlock(l,{name:"beam__modal_outlet"})}}}),u=(t,o)=>{const n=t.__vccOpts||t;for(const[l,c]of o)n[l]=c;return n},N={},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(N,[["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,l=o,c=e.ref(n.value),a=()=>{l("input",c.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,l=t,c=e.ref(l.value),a=i=>{i.preventDefault(),i.stopPropagation(),c.value=Number(i.target.innerHTML.replace(/[^0-9]/g,"")),n("input",c.value)},r=e.computed(()=>c.value===l.denominator);return(i,G)=>(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(c.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(l,c)=>(e.openBlock(),e.createElementBlock("li",P,[e.createElementVNode("div",U,[e.createElementVNode("label",null,e.toDisplayString(l.item.label),1),e.createElementVNode("p",null,e.toDisplayString(l.item.description),1)]),l.item.count?(e.openBlock(),e.createBlock(p,{key:0,modelValue:n.value.count.count,"onUpdate:modelValue":c[0]||(c[0]=a=>n.value.count.count=a),denominator:l.item.count.of,uom:l.item.count.uom,editable:!0},null,8,["modelValue","denominator","uom"])):e.createCommentVNode("",!0),l.item.hasOwnProperty("checked")?(e.openBlock(),e.createBlock(d,{key:1,modelValue:n.value.checked,"onUpdate:modelValue":c[1]||(c[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",l)}),e.onUnmounted(()=>{window.removeEventListener("scroll",l)});const l=()=>{const c=document.documentElement.scrollHeight-window.innerHeight,a=document.documentElement.scrollTop;c-a<=2&&n("scrollbottom")};return(c,a)=>(e.openBlock(),e.createElementBlock("ul",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.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("h1",{class:"nav-title"},"TITLE",-1),z={class:"navbar-action-wrapper"},$=e.defineComponent({__name:"Navbar",emits:["click"],setup(t,{emit:o}){const n=o,l=()=>{n("click")};return(c,a)=>(e.openBlock(),e.createElementBlock("nav",j,[e.renderSlot(c.$slots,"title",{},()=>[q]),e.createElementVNode("div",z,[e.createElementVNode("button",{class:"navbar-action btn",onClick:l},[e.renderSlot(c.$slots,"navbaraction",{},()=>[e.createTextVNode("Action")])])])]))}}),K={id:"scan_input"},C=e.defineComponent({__name:"ScanInput",emits:["scaninput"],setup(t,{emit:o}){const n=o,l=e.ref(""),c=a=>{a.target.tagName!=="INPUT"&&(a instanceof KeyboardEvent&&a.key!=="Enter"?l.value+=`${a.key}`:(n("scaninput",l.value),l.value=""))};return e.onMounted(()=>{document.addEventListener("keypress",a=>{c(a)})}),e.onUnmounted(()=>{window.removeEventListener("keypress",a=>{c(a)})}),(a,r)=>(e.openBlock(),e.createElementBlock("div",K))}});function W(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=W,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/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'\nimport 'themes/beam.css'\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,0DCXD,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"}
+{"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=\"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'\nimport 'themes/beam.css'\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,+pBCpCD,MAAMA,EAAOC,EAEP0B,EAAsB,IAAM,CACjC3B,EAAK,OAAO,CAAA,gYCVb,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,0DCXD,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/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.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%)}:root{--primary-color: #0098c9;--primary-text-color: #ffffff;--brand-color: #202a44;--gray-5: #f2f2f2;--gray-10: #e6e6e6;--gray-20: #cccccc;--gray-50: #808080;--gray-60: #666666;--gray-80: #333333;--brand-danger: #e63c28;--brand-success: #155724;--row-color-zebra-light: #eeeeee;--row-color-zebra-dark: #dddddd;--focus-cell-background: #ffffff;--focus-cell-outline: #000000;--cell-border-color: #ffffff;--cell-text-color: #3a3c41;--active-cell-background: #ffffff;--active-cell-outline: #e6a92d;--row-border-color: var(--gray-20);--header-border-color: #ffffff;--header-text-color: var(--gray-20);--row-number-background-color: #ffffff;--input-border-color: var(--gray-20);--input-label-color: var(--gray-60);--input-active-border-color: #000000;--input-active-label-color: #000000;--required-border: #e63c28;--font-size: 10px;--font-family: Arimo, Arial, sans-serif;--table-font-size: 16px;--atable-font-family: "Arimo", sans-serif;--atable-row-padding: 0px;--atable-row-height: 1.5em;--btn-color: white;--btn-border: #cccccc;--btn-hover: #f2f2f2;--btn-label-color: black}.aform{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;padding:1rem;border:1px solid var(--gray-5);border-left:4px solid var(--gray-5);margin-bottom:1rem}.aform__form-element{min-width:30%;flex-basis:32%;border:1px solid transparent;padding:0;margin:0;margin-right:.5rem;margin-bottom:.5rem;display:grid;position:relative;margin:.5rem 0}.aform__input-field{outline:1px solid transparent;border:1px solid var(--input-border-color);font-size:1rem;padding:.5rem .25rem .25rem .5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;position:relative;color:var(--cell-text-color)}.aform__field-label{color:var(--input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;width:auto;box-sizing:border-box;background:#fff;margin:0;border:1px solid var(--input-border-color);grid-row:1;top:0;left:10px;border:none;transform:translateY(-50%)}p.error{display:block;display:inline-block;display:none;padding:0rem 0rem 0rem .5rem;margin:.5rem 0 .25rem 0rem;border:1px solid transparent;width:100%;width:auto;color:var(--brand-danger);font-size:.8rem;position:absolute;right:0;top:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform__input-field:focus{border:1px solid var(--input-active-border-color)}.aform__input-field:focus+.aform__field-label{color:var(--input-active-label-color)}.aform__checkbox{cursor:pointer;width:auto}.aform__checkbox:checked{accent-color:var(--primary-color);border:1px solid black}.aform__checkbox-container{width:100%;display:inline-block;text-align:left}.aform__checkbox-container input{width:auto}.aform__checkbox-container:hover+.aform__field-label{color:var(--input-active-label-color)}.aform-primary-action{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--primary-color);color:var(--primary-text-color);background-color:var(--primary-color);outline:2px solid var(--primary-text-color);transition:outline-offset .2s ease;font-size:var(--font-size);margin:.5ch}.aform-primary-action:hover,.aform-primary-action:active{outline:2px solid var(--primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}tr:focus{background-color:#add8e6;outline:auto}.atable{font-family:var(--atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--table-font-size);border-collapse:collapse}.row-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.expandable-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height);border-left:4px solid var(--row-border-color)}.expanded-row{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color)}.expanded-row-content{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color);padding:1.5rem}.atable__cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--cell-text-color);text-overflow:ellipsis;overflow:hidden;padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);border-spacing:0px;border-collapse:collapse}.atable__cell:focus,.atable__cell:focus-within{background-color:var(--focus-cell-background);outline-width:2px;outline-style:solid;outline-color:var(--focus-cell-outline);box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.table-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:v-bind(numberedRowWidth);max-width:v-bind(numberedRowWidth)}.tree-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.atable #header-index{width:v-bind(numberedRowWidth);max-width:v-bind(numberedRowWidth)}.atable th{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);color:var(--gray-60);height:var(--atable-row-height);font-weight:300;letter-spacing:.05rem}.atable th:focus{outline:none}.amodal{z-index:100;position:absolute;background-color:var(--row-color-zebra-dark)}.login-container{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-family)}.account-container{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container{display:grid;gap:.5rem}.login-form-element{display:grid;margin:.5rem 0}.login-field{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--input-border-color);border-radius:.25rem}.login-field:focus{border:1px solid black}.btn{background-color:var(--btn-color);color:var(--btn-label-color);border:1px solid var(--btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn:hover{background-color:var(--btn-hover)}.btn:disabled{background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));color:light-dark(rgb(84,84,84),rgb(170,170,170))}.disabled{opacity:.5}.loading-icon{animation:spin 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--primary-color: #f2f2f2;--primary-text-color: #666666;--brand-color: #202a44}body{font-family:var(--font-family);background-color:#fff;margin:0;padding:0;display:flex;flex-direction:column;flex:1 0 auto;height:100%}.home-icon{font-size:1.875rem;text-align:left;color:var(--primary-text-color);border:1px solid transparent}.home-icon:hover{border:1px solid var(--brand-primary)}.beam__navbar{padding:.625rem;background-color:var(--primary-color);margin-left:0;min-height:4em;max-height:4em;color:var(--primary-text-color);display:flex;flex-flow:row nowrap;align-content:center;justify-content:flex-start;align-items:center;position:relative;border-bottom:1px solid var(--row-border-color)}.beam__navbar .nav-title{display:inline-block;border:1px solid transparent;margin-left:.625rem;text-align:left;font-size:1.125rem;color:var(--primary-text-color)}.beam__navbar .navbar-action-wrapper{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);text-align:right}.beam__listview{list-style-type:none;margin:0rem .625rem;padding:0 0 2.5em;margin-top:1px}.beam__listitem{padding:.625rem;border-bottom:1px solid var(--row-border-color);max-width:100%;box-sizing:border-box;display:flex;flex-flow:row nowrap;justify-content:space-between;gap:1.25rem;cursor:pointer;outline:2px solid transparent;outline-offset:-1px}.beam__listitem:focus{outline:2px solid var(--focus-cell-outline);background-color:var(--focus-cell-background)}.beam__listtext{width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex-grow:1;color:var(--primary-text-color)}.beam__listitem label{font-size:.875rem;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis}.beam__listitem p{font-size:.875rem;margin:0;overflow:hidden;text-overflow:ellipsis}.beam__itemcount{font-size:1.3125rem;color:var(--primary-text-color)}.beam__itemcount span{margin:0;padding:0;outline:none}.beam__listanchor{text-decoration:none;outline:none;color:var(--primary-text-color)}.btn{font-size:.875rem;text-align:center;padding:.3125rem .75rem;border:1px solid var(--btn-border);color:var(--btn-label-color);background-color:var(--btn-color);cursor:pointer}.btn:hover,.btn:active{background-color:var(--btn-hover)}.beam__actionfooter{margin-left:0;background:linear-gradient(180deg,transparent 0%,white 100%);color:var(--text-color);position:fixed;bottom:0;left:0;right:0;padding:.625rem;text-align:center}.success{color:var(--brand-success)}.alert{color:var(--brand-danger)}.beam__modal{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;text-align:center;padding:1.25rem}.beam__modal-confirm{background:#fff;padding:1.25rem;width:80%;max-width:400px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.beam__modal-confirm button{margin:.625rem}.beam__modal-confirm h2{border-bottom:1px solid var(--row-border-color);padding-bottom:.625rem;color:var(--primary-text-color)}
+@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.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%)}:root{--primary-color: #0098c9;--primary-text-color: #ffffff;--brand-color: #202a44;--gray-5: #f2f2f2;--gray-10: #e6e6e6;--gray-20: #cccccc;--gray-50: #808080;--gray-60: #666666;--gray-80: #333333;--brand-danger: #e63c28;--brand-success: #155724;--row-color-zebra-light: #eeeeee;--row-color-zebra-dark: #dddddd;--focus-cell-background: #ffffff;--focus-cell-outline: #000000;--cell-border-color: #ffffff;--cell-text-color: #3a3c41;--active-cell-background: #ffffff;--active-cell-outline: #e6a92d;--row-border-color: var(--gray-20);--header-border-color: #ffffff;--header-text-color: var(--gray-20);--row-number-background-color: #ffffff;--input-border-color: var(--gray-20);--input-label-color: var(--gray-60);--input-active-border-color: #000000;--input-active-label-color: #000000;--required-border: #e63c28;--font-size: 10px;--font-family: Arimo, Arial, sans-serif;--table-font-size: 16px;--atable-font-family: "Arimo", sans-serif;--atable-row-padding: 0px;--atable-row-height: 1.5em;--btn-color: white;--btn-border: #cccccc;--btn-hover: #f2f2f2;--btn-label-color: black}.aform{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--gray-5);border-left:4px solid var(--gray-5);margin-bottom:1rem;max-width:100%}@media screen and (max-width:400px){.aform{flex-direction:column}}.aform__form-element{border:1px solid transparent;padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:100px}.aform__input-field{outline:1px solid transparent;border:1px solid var(--input-border-color);font-size:1rem;padding:.5rem .25rem .25rem .5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;position:relative;color:var(--cell-text-color)}.aform__field-label{color:var(--input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;width:auto;box-sizing:border-box;background:#fff;margin:0;border:1px solid var(--input-border-color);grid-row:1;top:0;left:10px;border:none;transform:translateY(-50%)}p.error{display:block;display:inline-block;display:none;padding:0rem 0rem 0rem .5rem;margin:.5rem 0 .25rem 0rem;border:1px solid transparent;width:100%;width:auto;color:var(--brand-danger);font-size:.8rem;position:absolute;right:0;top:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform__input-field:focus{border:1px solid var(--input-active-border-color)}.aform__input-field:focus+.aform__field-label{color:var(--input-active-label-color)}.aform__checkbox{cursor:pointer;width:auto;margin-top:0;display:block}.aform__checkbox:checked{accent-color:var(--primary-color);border:1px solid black}.aform__checkbox-container{width:100%;display:inline-block;text-align:left}.aform__checkbox-container input{width:auto}.aform__checkbox-container:hover+.aform__field-label{color:var(--input-active-label-color)}.aform-primary-action{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--primary-color);color:var(--primary-text-color);background-color:var(--primary-color);outline:2px solid var(--primary-text-color);transition:outline-offset .2s ease;font-size:var(--font-size);margin:.5ch}.aform-primary-action:hover,.aform-primary-action:active{outline:2px solid var(--primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}tr:focus{background-color:#add8e6;outline:auto}.aform__form-btn{padding:.5rem 2rem;width:auto;border:1px solid var(--input-border-color);color:var(--input-label-color);cursor:pointer;background-color:#fff}.aform__form-btn:disabled{background-color:var(--gray-5)}.aform__file-attach{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--input-border-color);width:100%}@media screen and (max-width:400px){.aform__file-attach>.aform__form-btn{width:100%}}.aform__file-attach-feedback{color:var(--input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform__file-attach-feedback>li{list-style:none;font-style:italic}.aform__file-attach-feedback>p{margin-top:0}.atable{font-family:var(--atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--table-font-size);border-collapse:collapse}.row-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.expandable-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height);border-left:4px solid var(--row-border-color)}.expanded-row{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color)}.expanded-row-content{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color);padding:1.5rem}.atable__cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--cell-text-color);text-overflow:ellipsis;overflow:hidden;padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);border-spacing:0px;border-collapse:collapse}.atable__cell:focus,.atable__cell:focus-within{background-color:var(--focus-cell-background);outline-width:2px;outline-style:solid;outline-color:var(--focus-cell-outline);box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.table-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:v-bind(numberedRowWidth);max-width:v-bind(numberedRowWidth)}.tree-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.atable #header-index{width:v-bind(numberedRowWidth);max-width:v-bind(numberedRowWidth)}.atable th{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);color:var(--gray-60);height:var(--atable-row-height);font-weight:300;letter-spacing:.05rem}.atable th:focus{outline:none}.amodal{z-index:100;position:absolute;background-color:var(--row-color-zebra-dark)}.login-container{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-family)}.account-container{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container{display:grid;gap:.5rem}.login-form-element{display:grid;margin:.5rem 0;position:relative}.login-field{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--input-border-color);border-radius:.25rem}.login-field:focus{border:1px solid black}.btn{background-color:var(--btn-color);color:var(--btn-label-color);border:1px solid var(--btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn:hover{background-color:var(--btn-hover)}.btn:disabled{background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));color:light-dark(rgb(84,84,84),rgb(170,170,170))}.disabled{opacity:.5}.loading-icon{animation:spin 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--primary-color: #f2f2f2;--primary-text-color: #666666;--brand-color: #202a44}body{font-family:var(--font-family);background-color:#fff;margin:0;padding:0;display:flex;flex-direction:column;flex:1 0 auto;height:100%}.home-icon{font-size:1.875rem;text-align:left;color:var(--primary-text-color);border:1px solid transparent}.home-icon:hover{border:1px solid var(--brand-primary)}.beam__navbar{padding:.625rem;background-color:var(--primary-color);margin-left:0;min-height:2em;max-height:2em;color:var(--primary-text-color);display:flex;flex-flow:row nowrap;align-content:center;justify-content:flex-start;align-items:center;position:sticky;top:0;border-bottom:1px solid var(--row-border-color)}.beam__navbar .nav-title{display:inline-block;border:1px solid transparent;margin-left:.625rem;text-align:left;font-size:1.125rem;color:var(--primary-text-color)}.beam__navbar .navbar-action-wrapper{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);text-align:right}.beam__listview{list-style-type:none;margin:0rem .625rem;padding:0 0 2.5em;margin-top:1px}.beam__listitem{padding:.625rem;border-bottom:1px solid var(--row-border-color);max-width:100%;box-sizing:border-box;display:flex;flex-flow:row nowrap;justify-content:space-between;gap:1.25rem;cursor:pointer;outline:2px solid transparent;outline-offset:-1px}.beam__listitem:focus{outline:2px solid var(--focus-cell-outline);background-color:var(--focus-cell-background)}.beam__listtext{width:80%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex-grow:1;color:var(--primary-text-color)}.beam__listitem label{font-size:.875rem;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis}.beam__listitem p{font-size:.875rem;margin:0;overflow:hidden;text-overflow:ellipsis}.beam__itemcount{font-size:1.3125rem;color:var(--primary-text-color)}.beam__itemcount span{margin:0;padding:0;outline:none}.beam__listanchor{text-decoration:none;outline:none;color:var(--primary-text-color)}.btn{font-size:.875rem;text-align:center;padding:.3125rem .75rem;border:1px solid var(--btn-border);color:var(--btn-label-color);background-color:var(--btn-color);cursor:pointer}.btn:hover,.btn:active{background-color:var(--btn-hover)}.beam__actionfooter{margin-left:0;background:linear-gradient(180deg,transparent 0%,white 100%);color:var(--text-color);position:fixed;bottom:0;left:0;right:0;padding:.625rem;text-align:center}.success{color:var(--brand-success)}.alert{color:var(--brand-danger)}.beam__modal{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;text-align:center;padding:1.25rem}.beam__modal-confirm{background:#fff;padding:1.25rem;width:80%;max-width:400px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.beam__modal-confirm button{margin:.625rem}.beam__modal-confirm h2{border-bottom:1px solid var(--row-border-color);padding-bottom:.625rem;color:var(--primary-text-color)}.__histoire-render-story:not(.__histoire-render-custom-controls){overflow:clip!important}

package/package.json

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

package/src/components/Navbar.vue

@@ -1,8 +1,5 @@
 <template>
 	<nav class="beam__navbar">
-		<slot name="icon">
-			<span class="home-icon">&#11043;</span>
-		</slot>
 		<slot name="title">
 			<h1 class="nav-title">TITLE</h1>
 		</slot>