@stonecrop/beam 0.35.0 → 0.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/index.css
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.beam_day-divider {
|
|
59
|
-
&[data-v-
|
|
59
|
+
&[data-v-b7f92890] {
|
|
60
60
|
text-align: left;
|
|
61
61
|
padding: 1rem;
|
|
62
62
|
background: var(--sc-cell-changed-color);
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
margin-left: calc(-1 * var(--sc-list-margin));
|
|
69
69
|
margin-right: calc(-1 * var(--sc-list-margin));
|
|
70
70
|
}
|
|
71
|
-
& h2[data-v-
|
|
71
|
+
& h2[data-v-b7f92890] {
|
|
72
72
|
text-align: left;
|
|
73
73
|
font-size: 1rem;
|
|
74
74
|
color: var(--sc-primary-text-color);
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
padding: 0;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
.beam_day-divider[data-v-
|
|
79
|
+
.beam_day-divider[data-v-b7f92890]:first-of-type {
|
|
80
80
|
margin-top: 0;
|
|
81
81
|
}
|
|
82
82
|
|
package/dist/beam.js
CHANGED
|
@@ -76,9 +76,14 @@ var BeamDayDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
|
|
|
76
76
|
__name: "BeamDayDivider",
|
|
77
77
|
props: { item: {} },
|
|
78
78
|
setup(__props) {
|
|
79
|
+
function parseListDate(raw) {
|
|
80
|
+
const calendar = /^(\d{4})-(\d{2})-(\d{2})$/.exec(raw);
|
|
81
|
+
if (calendar) return new Date(Number(calendar[1]), Number(calendar[2]) - 1, Number(calendar[3]));
|
|
82
|
+
return new Date(raw);
|
|
83
|
+
}
|
|
79
84
|
const date = computed(() => {
|
|
80
85
|
if (!__props.item.date || isNaN(Date.parse(__props.item.date))) return __props.item.date;
|
|
81
|
-
const dateObj =
|
|
86
|
+
const dateObj = parseListDate(__props.item.date);
|
|
82
87
|
if (__props.item.dateFormat) switch (__props.item.dateFormat.toLowerCase()) {
|
|
83
88
|
case "iso": return dateObj.toISOString();
|
|
84
89
|
}
|
|
@@ -88,7 +93,7 @@ var BeamDayDivider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
|
|
|
88
93
|
return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1$16, [createElementVNode("h2", null, toDisplayString(date.value), 1)]), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 64);
|
|
89
94
|
};
|
|
90
95
|
}
|
|
91
|
-
}), [["__scopeId", "data-v-
|
|
96
|
+
}), [["__scopeId", "data-v-b7f92890"]]);
|
|
92
97
|
//#endregion
|
|
93
98
|
//#region src/components/BeamFilter.vue?vue&type=script&setup=true&lang.ts
|
|
94
99
|
var _hoisted_1$15 = { class: "beam_filters" };
|
package/dist/beam.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"beam.js","names":["$emit"],"sources":["../src/components/ActionFooter.vue","../src/components/ActionFooter.vue","../src/components/BeamArrow.vue","../src/components/BeamArrow.vue","../src/components/BeamBtn.vue","../src/components/BeamDayDivider.vue","../src/components/BeamDayDivider.vue","../src/components/BeamFilter.vue","../src/components/BeamFilter.vue","../src/components/BeamFilterOption.vue","../src/components/BeamFilterOption.vue","../src/components/BeamHeading.vue","../src/components/BeamMetadata.vue","../src/components/BeamMetadata.vue","../src/components/BeamModal.vue","../src/components/BeamModal.vue","../src/components/BeamModalOutlet.vue","../src/components/BeamModalOutlet.vue","../src/components/BeamProgress.vue","../src/components/BeamProgress.vue","../src/components/Confirm.vue","../src/components/FixedTop.vue","../src/components/ItemCheck.vue","../src/components/ItemCheck.vue","../src/components/ItemCount.vue","../src/components/ItemCount.vue","../src/components/ListAnchor.vue","../src/components/ListAnchor.vue","../src/components/ListItem.vue","../src/components/ListItem.vue","../src/components/ListView.vue","../src/components/ListView.vue","../src/components/Navbar.vue","../src/components/Navbar.vue","../src/components/ScanInput.vue","../src/components/ScanInput.vue","../src/components/SegmentedDisplay.vue","../src/components/SegmentedDisplay.vue","../src/components/SplitColumn.vue","../src/components/SplitColumn.vue","../src/components/ToggleArrow.vue","../src/components/ToggleArrow.vue","../src/composables/mqtt.ts","../src/index.ts"],"sourcesContent":["<template>\n\t<footer class=\"beam_action-footer\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<BeamBtn @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</BeamBtn>\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\n<style scoped>\n.beam_action-footer {\n\tmargin-left: 0;\n\tbackground: linear-gradient(180deg, transparent 0%, white 100%);\n\tcolor: var(--sc-primary-text-color);\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tpadding: 0.625rem;\n\ttext-align: center;\n}\n</style>\n","<template>\n\t<footer class=\"beam_action-footer\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<BeamBtn @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</BeamBtn>\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\n<style scoped>\n.beam_action-footer {\n\tmargin-left: 0;\n\tbackground: linear-gradient(180deg, transparent 0%, white 100%);\n\tcolor: var(--sc-primary-text-color);\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tpadding: 0.625rem;\n\ttext-align: center;\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata_arrow\">\n\t\t<div class=\"beam_metadata_arrow-body\" :style=\"{ background: color }\"></div>\n\t\t<div class=\"beam_metadata_arrow-head\">\n\t\t\t<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 6.74 7.78\">\n\t\t\t\t<polygon points=\"6.74 3.89 0 0 0 7.78 6.74 3.89\" style=\"fill: #c4c4c4\" :style=\"{ fill: color }\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { color = '#c4c4c4' } = defineProps<{ color?: string }>()\n</script>\n\n<style scoped>\n.beam_metadata_arrow {\n\talign-self: center;\n\tflex-grow: 1;\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.beam_metadata_arrow-body {\n\twidth: 100%;\n\theight: 10px;\n\tbackground: #c4c4c4;\n}\n\n.beam_metadata_arrow-head {\n\t& svg {\n\t\twidth: 20px;\n\t\tdisplay: block;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata_arrow\">\n\t\t<div class=\"beam_metadata_arrow-body\" :style=\"{ background: color }\"></div>\n\t\t<div class=\"beam_metadata_arrow-head\">\n\t\t\t<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 6.74 7.78\">\n\t\t\t\t<polygon points=\"6.74 3.89 0 0 0 7.78 6.74 3.89\" style=\"fill: #c4c4c4\" :style=\"{ fill: color }\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { color = '#c4c4c4' } = defineProps<{ color?: string }>()\n</script>\n\n<style scoped>\n.beam_metadata_arrow {\n\talign-self: center;\n\tflex-grow: 1;\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.beam_metadata_arrow-body {\n\twidth: 100%;\n\theight: 10px;\n\tbackground: #c4c4c4;\n}\n\n.beam_metadata_arrow-head {\n\t& svg {\n\t\twidth: 20px;\n\t\tdisplay: block;\n\t}\n}\n</style>\n","<template>\n\t<button class=\"beam_btn\">\n\t\t<slot>Action</slot>\n\t</button>\n</template>\n\n<style scoped>\n.beam_btn {\n\tfont-size: 0.875rem;\n\ttext-align: center;\n\tpadding: 0.3125rem 0.75rem;\n\tborder: 1px solid var(--sc-btn-border);\n\tcolor: var(--sc-btn-label-color);\n\tbackground-color: var(--sc-btn-color);\n\tcursor: pointer;\n\tfont-family: var(--sc-font-family);\n\n\t&:hover,\n\t&:active {\n\t\tbackground-color: var(--sc-btn-hover);\n\t}\n}\n</style>\n<style>\n.beam_btn a:link,\n.beam_btn a:visited,\n.beam_btn a:hover,\n.beam_btn a:active {\n\ttext-decoration: none;\n\tcolor: var(--sc-btn-label-color);\n}\n</style>\n","<template>\n\t<div class=\"beam_day-divider\">\n\t\t<h2>{{ date }}</h2>\n\t</div>\n\n\t<slot></slot>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { ListViewItem } from '../types'\n\ndefineSlots<{ default(): any }>()\nconst { item } = defineProps<{ item: ListViewItem }>()\n\nconst date = computed(() => {\n\tif (!item.date || isNaN(Date.parse(item.date))) {\n\t\treturn item.date\n\t}\n\n\t// if needed, the user can specify a Date format flag that will dictate how the output is formatted,\n\t// defaults to toDateString(); using switch/case here in case more values wanted to be added\n\tconst dateObj = new Date(item.date)\n\tif (item.dateFormat) {\n\t\tswitch (item.dateFormat.toLowerCase()) {\n\t\t\tcase 'iso':\n\t\t\t\treturn dateObj.toISOString()\n\t\t}\n\t}\n\treturn dateObj.toDateString()\n})\n</script>\n\n<style scoped>\n.beam_day-divider {\n\ttext-align: left;\n\tpadding: 1rem;\n\tbackground: var(--sc-cell-changed-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmargin-bottom: 1rem;\n\n\t/* reverse margins only for day-divider elements in list */\n\tmargin-left: calc(-1 * var(--sc-list-margin));\n\tmargin-right: calc(-1 * var(--sc-list-margin));\n\n\t& h2 {\n\t\ttext-align: left;\n\t\tfont-size: 1rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n\n.beam_day-divider:first-of-type {\n\tmargin-top: 0;\n}\n</style>\n","<template>\n\t<div class=\"beam_day-divider\">\n\t\t<h2>{{ date }}</h2>\n\t</div>\n\n\t<slot></slot>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { ListViewItem } from '../types'\n\ndefineSlots<{ default(): any }>()\nconst { item } = defineProps<{ item: ListViewItem }>()\n\nconst date = computed(() => {\n\tif (!item.date || isNaN(Date.parse(item.date))) {\n\t\treturn item.date\n\t}\n\n\t// if needed, the user can specify a Date format flag that will dictate how the output is formatted,\n\t// defaults to toDateString(); using switch/case here in case more values wanted to be added\n\tconst dateObj = new Date(item.date)\n\tif (item.dateFormat) {\n\t\tswitch (item.dateFormat.toLowerCase()) {\n\t\t\tcase 'iso':\n\t\t\t\treturn dateObj.toISOString()\n\t\t}\n\t}\n\treturn dateObj.toDateString()\n})\n</script>\n\n<style scoped>\n.beam_day-divider {\n\ttext-align: left;\n\tpadding: 1rem;\n\tbackground: var(--sc-cell-changed-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmargin-bottom: 1rem;\n\n\t/* reverse margins only for day-divider elements in list */\n\tmargin-left: calc(-1 * var(--sc-list-margin));\n\tmargin-right: calc(-1 * var(--sc-list-margin));\n\n\t& h2 {\n\t\ttext-align: left;\n\t\tfont-size: 1rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n\n.beam_day-divider:first-of-type {\n\tmargin-top: 0;\n}\n</style>\n","<template>\n\t<div class=\"beam_filters\">\n\t\t<div class=\"beam_filters-heading\" @click=\"isFilterExpanded = !isFilterExpanded\">\n\t\t\t<ToggleArrow :open=\"isFilterExpanded\" />\n\t\t\t<BeamHeading>Filter</BeamHeading>\n\t\t</div>\n\n\t\t<div v-show=\"isFilterExpanded\" class=\"beam_filters-options\">\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineSlots<{ default(): any }>()\n\nconst isFilterExpanded = ref(false)\n</script>\n\n<style scoped>\n.beam_filters {\n\tbackground-color: var(--sc-primary-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmin-height: 2em;\n\toverflow: visible;\n\tpadding: 0.625rem;\n\ttransition: all 0.2s ease-in-out;\n}\n\n.beam_filters-heading {\n\talign-items: center;\n\tbackground-color: var(--sc-primary-color);\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-size: 1rem;\n\n\t& > h1 {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.beam_filters-options {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tmargin: 1rem 0;\n\tpadding: 0 1rem;\n\tgap: 1rem;\n\n\t@media (max-width: 479px) {\n\t\tflex-direction: column;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"beam_filters\">\n\t\t<div class=\"beam_filters-heading\" @click=\"isFilterExpanded = !isFilterExpanded\">\n\t\t\t<ToggleArrow :open=\"isFilterExpanded\" />\n\t\t\t<BeamHeading>Filter</BeamHeading>\n\t\t</div>\n\n\t\t<div v-show=\"isFilterExpanded\" class=\"beam_filters-options\">\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineSlots<{ default(): any }>()\n\nconst isFilterExpanded = ref(false)\n</script>\n\n<style scoped>\n.beam_filters {\n\tbackground-color: var(--sc-primary-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmin-height: 2em;\n\toverflow: visible;\n\tpadding: 0.625rem;\n\ttransition: all 0.2s ease-in-out;\n}\n\n.beam_filters-heading {\n\talign-items: center;\n\tbackground-color: var(--sc-primary-color);\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-size: 1rem;\n\n\t& > h1 {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.beam_filters-options {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tmargin: 1rem 0;\n\tpadding: 0 1rem;\n\tgap: 1rem;\n\n\t@media (max-width: 479px) {\n\t\tflex-direction: column;\n\t}\n}\n</style>\n","<template>\n\t<div v-on-click-outside=\"() => (isMenuOpen = false)\" class=\"beam_filter-container\">\n\t\t<BeamHeading class=\"beam_filter-option-heading\">{{ title }}</BeamHeading>\n\t\t<div class=\"beam_filter-option\" @click=\"isMenuOpen = !isMenuOpen\">\n\t\t\t<div class=\"beam_filter-option-select\">\n\t\t\t\t<div class=\"beam_filter-arrow\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_filter-label\">\n\t\t\t\t\t<label>{{ label }}</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ul v-if=\"isMenuOpen\" ref=\"menu\" class=\"beam_filter-select-menu\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"choice in choices\"\n\t\t\t\t\t:key=\"choice.value\"\n\t\t\t\t\t:class=\"{ selected: label == choice.label }\"\n\t\t\t\t\t:data-value=\"choice.value\"\n\t\t\t\t\tclass=\"beam_filter-select-option\"\n\t\t\t\t\t@click=\"selectChoice(choice)\">\n\t\t\t\t\t{{ choice.label }}\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { vOnClickOutside } from '@vueuse/components'\nimport { ref } from 'vue'\n\nimport { BeamFilterChoice } from '../types'\n\nconst emit = defineEmits<{ select: [choice: BeamFilterChoice] }>()\n\nconst { choices, title = 'title' } = defineProps<{\n\tchoices: BeamFilterChoice[]\n\ttitle?: string\n}>()\n\nconst isMenuOpen = ref(false)\nconst label = ref(choices[0].label)\nconst value = ref(choices[0].value)\n\nconst selectChoice = (data: BeamFilterChoice) => {\n\tlabel.value = data.label\n\tvalue.value = data.value\n\temit('select', data)\n}\n</script>\n\n<style scoped>\n.beam_filter-option {\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.beam_filter-option-heading {\n\tfont-size: 1rem !important;\n\tpadding-bottom: 0.25rem;\n}\n\n.beam_filter-option-select {\n\talign-items: stretch;\n\tappearance: none;\n\tbackground-color: white;\n\tborder: 1px solid var(--sc-row-border-color);\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tfont-family: var(--sc-font-family);\n\tfont-size: 0.8rem;\n\tfont-weight: bold;\n\tposition: relative;\n}\n\nlabel {\n\tcursor: pointer;\n\tpadding: 0.5rem;\n}\n\n.beam_filter-arrow {\n\tbackground: var(--sc-primary-color);\n\tcolor: var(--sc-primary-text-color);\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 5px;\n\tpadding: 0.5rem 0.7rem;\n}\n\n.beam_filter-label {\n\tdisplay: flex;\n\talign-items: center;\n}\n\nsvg {\n\tfill: var(--sc-primary-text-color);\n\twidth: 5px;\n\ttransform: rotate(90deg);\n}\n\n.beam_filter-select-menu {\n\tbackground-color: white;\n\tborder-top: none;\n\tborder: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tleft: 0;\n\tlist-style: none;\n\tmargin: 0;\n\tmax-height: 200px;\n\toverflow-y: scroll;\n\tpadding: 0rem;\n\tposition: absolute;\n\twidth: 100%;\n\tz-index: 100;\n}\n\n.beam_filter-select-option {\n\tfont-size: 0.8rem;\n\tfont-family: var(--sc-font-family);\n\tfont-weight: bold;\n\tcolor: var(--sc-primary-text-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tpadding: 0.5rem;\n\t&:hover {\n\t\tbackground: var(--sc-primary-color);\n\t}\n}\n\n.selected {\n\tbackground: var(--sc-row-border-color);\n\n\t&:hover {\n\t\tbackground: var(--sc-row-border-color);\n\t}\n}\n.beam_filter-container {\n\tflex-grow: 1;\n\tmax-width: 300px;\n\twidth: 50%;\n\n\t@media (max-width: 479px) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n</style>\n","<template>\n\t<div v-on-click-outside=\"() => (isMenuOpen = false)\" class=\"beam_filter-container\">\n\t\t<BeamHeading class=\"beam_filter-option-heading\">{{ title }}</BeamHeading>\n\t\t<div class=\"beam_filter-option\" @click=\"isMenuOpen = !isMenuOpen\">\n\t\t\t<div class=\"beam_filter-option-select\">\n\t\t\t\t<div class=\"beam_filter-arrow\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_filter-label\">\n\t\t\t\t\t<label>{{ label }}</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ul v-if=\"isMenuOpen\" ref=\"menu\" class=\"beam_filter-select-menu\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"choice in choices\"\n\t\t\t\t\t:key=\"choice.value\"\n\t\t\t\t\t:class=\"{ selected: label == choice.label }\"\n\t\t\t\t\t:data-value=\"choice.value\"\n\t\t\t\t\tclass=\"beam_filter-select-option\"\n\t\t\t\t\t@click=\"selectChoice(choice)\">\n\t\t\t\t\t{{ choice.label }}\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { vOnClickOutside } from '@vueuse/components'\nimport { ref } from 'vue'\n\nimport { BeamFilterChoice } from '../types'\n\nconst emit = defineEmits<{ select: [choice: BeamFilterChoice] }>()\n\nconst { choices, title = 'title' } = defineProps<{\n\tchoices: BeamFilterChoice[]\n\ttitle?: string\n}>()\n\nconst isMenuOpen = ref(false)\nconst label = ref(choices[0].label)\nconst value = ref(choices[0].value)\n\nconst selectChoice = (data: BeamFilterChoice) => {\n\tlabel.value = data.label\n\tvalue.value = data.value\n\temit('select', data)\n}\n</script>\n\n<style scoped>\n.beam_filter-option {\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.beam_filter-option-heading {\n\tfont-size: 1rem !important;\n\tpadding-bottom: 0.25rem;\n}\n\n.beam_filter-option-select {\n\talign-items: stretch;\n\tappearance: none;\n\tbackground-color: white;\n\tborder: 1px solid var(--sc-row-border-color);\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tfont-family: var(--sc-font-family);\n\tfont-size: 0.8rem;\n\tfont-weight: bold;\n\tposition: relative;\n}\n\nlabel {\n\tcursor: pointer;\n\tpadding: 0.5rem;\n}\n\n.beam_filter-arrow {\n\tbackground: var(--sc-primary-color);\n\tcolor: var(--sc-primary-text-color);\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 5px;\n\tpadding: 0.5rem 0.7rem;\n}\n\n.beam_filter-label {\n\tdisplay: flex;\n\talign-items: center;\n}\n\nsvg {\n\tfill: var(--sc-primary-text-color);\n\twidth: 5px;\n\ttransform: rotate(90deg);\n}\n\n.beam_filter-select-menu {\n\tbackground-color: white;\n\tborder-top: none;\n\tborder: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tleft: 0;\n\tlist-style: none;\n\tmargin: 0;\n\tmax-height: 200px;\n\toverflow-y: scroll;\n\tpadding: 0rem;\n\tposition: absolute;\n\twidth: 100%;\n\tz-index: 100;\n}\n\n.beam_filter-select-option {\n\tfont-size: 0.8rem;\n\tfont-family: var(--sc-font-family);\n\tfont-weight: bold;\n\tcolor: var(--sc-primary-text-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tpadding: 0.5rem;\n\t&:hover {\n\t\tbackground: var(--sc-primary-color);\n\t}\n}\n\n.selected {\n\tbackground: var(--sc-row-border-color);\n\n\t&:hover {\n\t\tbackground: var(--sc-row-border-color);\n\t}\n}\n.beam_filter-container {\n\tflex-grow: 1;\n\tmax-width: 300px;\n\twidth: 50%;\n\n\t@media (max-width: 479px) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n</style>\n","<template>\n\t<h1 class=\"beam_header\">\n\t\t<slot></slot>\n\t</h1>\n</template>\n\n<style scoped>\n.beam_header {\n\tborder: 1px solid transparent;\n\ttext-align: left;\n\tfont-size: 1.125rem;\n\tcolor: var(--sc-primary-text-color);\n\tmargin: 0;\n\tpadding: 0;\n\tfont-family: var(--sc-font-family);\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata\">\n\t\t<div class=\"beam_metadata_content\">\n\t\t\t<slot>\n\t\t\t\t<div class=\"beam_metadata_header beam_metadata--two-column\"></div>\n\t\t\t\t<div class=\"beam_metadata_block\">\n\t\t\t\t\t<p class=\"beam_metadata_heading\">\n\t\t\t\t\t\tStatus:\n\t\t\t\t\t\t<span :class=\"{ alert: !order.complete }\" class=\"beam_metadata--normal\">{{\n\t\t\t\t\t\t\torder.complete ? 'Complete' : 'In Progress'\n\t\t\t\t\t\t}}</span>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_metadata_shipping beam_metadata_block\">\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Source</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Receiving</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</slot>\n\t\t</div>\n\t\t<hr />\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n\torder: {\n\t\torderNumber: string\n\t\tproduct: string\n\t\tquantity: number\n\t\ttotal: number\n\t\tcomplete: boolean\n\t}\n}>()\n</script>\n\n<style scoped>\n.beam_metadata {\n\t/* margin:3.125rem; */\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-height: 100vh;\n\tcolor: var(--sc-primary-text-color);\n\tfont-family: var(--sc-font-family);\n}\n.beam_metadata_content {\n\tpadding-top: 10px;\n}\n.beam_metadata_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tpadding: 0px 30px 0px 30px;\n\tjustify-content: space-between;\n}\n.beam_metadata_count {\n\tfont-size: 1.5rem;\n\n\t& p {\n\t\tmargin: 0;\n\t}\n}\n.beam_metadata_header-order-num {\n\tfont-weight: bold;\n\tfont-size: 1.5rem;\n}\n.beam_metadata_block {\n\tpadding: 0px 30px;\n\tmargin: 10px 0;\n}\n\n.beam_metadata_shipping {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\n\t& p {\n\t\tline-height: 1.5rem;\n\t}\n}\n@media screen and (max-width: 600px) {\n\t.beam_metadata_shipping {\n\t\tflex-direction: column;\n\t}\n}\n\n.beam_metadata_component_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n.beam_metadata_components {\n\toverflow: scroll;\n}\nhr {\n\tdisplay: block;\n\theight: 1px;\n\tborder: 0;\n\tborder-top: 1px solid var(--sc-row-border-color);\n\tmargin: 1em 0;\n\tpadding: 0;\n}\n</style>\n<style>\n.beam_metadata_heading {\n\tfont-size: 1.125rem;\n\tfont-weight: bold;\n\tmargin: 0.625rem 0;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata\">\n\t\t<div class=\"beam_metadata_content\">\n\t\t\t<slot>\n\t\t\t\t<div class=\"beam_metadata_header beam_metadata--two-column\"></div>\n\t\t\t\t<div class=\"beam_metadata_block\">\n\t\t\t\t\t<p class=\"beam_metadata_heading\">\n\t\t\t\t\t\tStatus:\n\t\t\t\t\t\t<span :class=\"{ alert: !order.complete }\" class=\"beam_metadata--normal\">{{\n\t\t\t\t\t\t\torder.complete ? 'Complete' : 'In Progress'\n\t\t\t\t\t\t}}</span>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_metadata_shipping beam_metadata_block\">\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Source</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Receiving</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</slot>\n\t\t</div>\n\t\t<hr />\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n\torder: {\n\t\torderNumber: string\n\t\tproduct: string\n\t\tquantity: number\n\t\ttotal: number\n\t\tcomplete: boolean\n\t}\n}>()\n</script>\n\n<style scoped>\n.beam_metadata {\n\t/* margin:3.125rem; */\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-height: 100vh;\n\tcolor: var(--sc-primary-text-color);\n\tfont-family: var(--sc-font-family);\n}\n.beam_metadata_content {\n\tpadding-top: 10px;\n}\n.beam_metadata_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tpadding: 0px 30px 0px 30px;\n\tjustify-content: space-between;\n}\n.beam_metadata_count {\n\tfont-size: 1.5rem;\n\n\t& p {\n\t\tmargin: 0;\n\t}\n}\n.beam_metadata_header-order-num {\n\tfont-weight: bold;\n\tfont-size: 1.5rem;\n}\n.beam_metadata_block {\n\tpadding: 0px 30px;\n\tmargin: 10px 0;\n}\n\n.beam_metadata_shipping {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\n\t& p {\n\t\tline-height: 1.5rem;\n\t}\n}\n@media screen and (max-width: 600px) {\n\t.beam_metadata_shipping {\n\t\tflex-direction: column;\n\t}\n}\n\n.beam_metadata_component_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n.beam_metadata_components {\n\toverflow: scroll;\n}\nhr {\n\tdisplay: block;\n\theight: 1px;\n\tborder: 0;\n\tborder-top: 1px solid var(--sc-row-border-color);\n\tmargin: 1em 0;\n\tpadding: 0;\n}\n</style>\n<style>\n.beam_metadata_heading {\n\tfont-size: 1.125rem;\n\tfont-weight: bold;\n\tmargin: 0.625rem 0;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<portal to=\"beam_modal_outlet\">\n\t\t<div v-show=\"showModal\" class=\"beam_modal\">\n\t\t\t<BeamBtn @click=\"$emit('closemodal')\">Close Modal</BeamBtn>\n\t\t\t<slot @closemodal=\"$emit('closemodal')\" @confirmmodal=\"$emit('confirmmodal')\"></slot>\n\t\t</div>\n\t</portal>\n</template>\n\n<script setup lang=\"ts\">\ndefineEmits<{ closemodal: []; confirmmodal: [] }>()\ndefineProps<{ showModal: boolean }>()\n</script>\n\n<style scoped>\n.beam_modal {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tbackdrop-filter: blur(2px);\n\tz-index: 200;\n\ttext-align: center;\n\tpadding: 1.25rem;\n}\n</style>\n","<template>\n\t<portal to=\"beam_modal_outlet\">\n\t\t<div v-show=\"showModal\" class=\"beam_modal\">\n\t\t\t<BeamBtn @click=\"$emit('closemodal')\">Close Modal</BeamBtn>\n\t\t\t<slot @closemodal=\"$emit('closemodal')\" @confirmmodal=\"$emit('confirmmodal')\"></slot>\n\t\t</div>\n\t</portal>\n</template>\n\n<script setup lang=\"ts\">\ndefineEmits<{ closemodal: []; confirmmodal: [] }>()\ndefineProps<{ showModal: boolean }>()\n</script>\n\n<style scoped>\n.beam_modal {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tbackdrop-filter: blur(2px);\n\tz-index: 200;\n\ttext-align: center;\n\tpadding: 1.25rem;\n}\n</style>\n","<template>\n\t<portal-target name=\"beam_modal_outlet\" />\n</template>\n\n<script setup lang=\"ts\">\n/* const emit = */ defineEmits<{\n\tconfirmmodal: []\n\tclosemodal: []\n}>()\n\n// const confirmModal = () => {\n// \temit('confirmmodal')\n// }\n\n// const closeModal = () => {\n// \temit('closemodal')\n// }\n</script>\n","<template>\n\t<portal-target name=\"beam_modal_outlet\" />\n</template>\n\n<script setup lang=\"ts\">\n/* const emit = */ defineEmits<{\n\tconfirmmodal: []\n\tclosemodal: []\n}>()\n\n// const confirmModal = () => {\n// \temit('confirmmodal')\n// }\n\n// const closeModal = () => {\n// \temit('closemodal')\n// }\n</script>\n","<template>\n\t<p class=\"beam_metadata_heading\">\n\t\t{{ label }}: <span :class=\"{ 'beam--alert': !complete }\" class=\"beam--normal\">{{ statusMessage }}</span>\n\t</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n\tlabel = 'Status',\n\tprogressMessage = 'In Progress',\n\tcompleteMessage = 'Complete',\n\tcomplete = false,\n} = defineProps<{\n\tlabel?: string\n\tprogressMessage?: string\n\tcompleteMessage?: string\n\tcomplete?: boolean\n}>()\n\nconst statusMessage = computed(() => (complete ? completeMessage : progressMessage))\n</script>\n","<template>\n\t<p class=\"beam_metadata_heading\">\n\t\t{{ label }}: <span :class=\"{ 'beam--alert': !complete }\" class=\"beam--normal\">{{ statusMessage }}</span>\n\t</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n\tlabel = 'Status',\n\tprogressMessage = 'In Progress',\n\tcompleteMessage = 'Complete',\n\tcomplete = false,\n} = defineProps<{\n\tlabel?: string\n\tprogressMessage?: string\n\tcompleteMessage?: string\n\tcomplete?: boolean\n}>()\n\nconst statusMessage = computed(() => (complete ? completeMessage : progressMessage))\n</script>\n","<template>\n\t<div class=\"beam_modal-confirm\">\n\t\t<h2>Would you like to continue?</h2>\n\t\t<BeamBtn @click=\"$emit('confirmmodal')\">Yes</BeamBtn>\n\t\t<BeamBtn @click=\"$emit('confirmmodal')\">No</BeamBtn>\n\t</div>\n</template>\n\n<style scoped>\n.beam_modal-confirm {\n\tbackground: #ffffff;\n\tpadding: 1.25rem;\n\twidth: 80%;\n\tmax-width: 400px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\n\t& button {\n\t\tmargin: 0.625rem;\n\t}\n\t& h2 {\n\t\tborder-bottom: 1px solid var(--sc-row-border-color);\n\t\tpadding-bottom: 0.625rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t}\n}\n</style>\n","<template>\n\t<div class=\"fixed-top\">\n\t\t<slot></slot>\n\t</div>\n</template>\n\n<style scoped>\n.fixed-top {\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n}\n</style>\n","<template>\n\t<label class=\"container\">\n\t\t<input v-model=\"value\" type=\"checkbox\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nconst value = defineModel<boolean>({ default: false })\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(--sc-highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--sc-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(--sc-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<label class=\"container\">\n\t\t<input v-model=\"value\" type=\"checkbox\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nconst value = defineModel<boolean>({ default: false })\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(--sc-highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--sc-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(--sc-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_item-count\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ 'beam--alert': !isCountComplete }\"\n\t\t\t@click.stop.prevent=\"validate\"\n\t\t\t@input.stop.prevent=\"debouncedValidate\"\n\t\t\t@paste=\"validate\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span v-if=\"denominator\">/{{ denominator }}</span>\n\t\t<span v-if=\"uom\"> {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useDebounceFn } from '@vueuse/core'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst count = defineModel<number>({ required: true })\nconst {\n\tdenominator = 0,\n\tdebounce = 300,\n\teditable = true,\n\tuom = '',\n} = defineProps<{\n\tdenominator?: number\n\tdebounce?: number\n\teditable?: HTMLAttributes['contenteditable']\n\tuom?: string\n}>()\n\nconst isCountComplete = computed(() => denominator !== 0 && count.value === denominator)\n\nconst validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {\n\tconst newValue = Number((payload.target as HTMLElement).innerHTML) || 0\n\tcount.value = denominator ? Math.min(newValue, denominator) : newValue\n}\n\nconst debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)\nconst debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)\n</script>\n\n<style scoped>\n.beam_item-count {\n\tfont-size: 1.3125rem;\n\tcolor: var(--sc-primary-text-color);\n}\n\n.beam_item-count span {\n\tmargin: 0;\n\tpadding: 0;\n\toutline: none;\n}\n</style>\n","<template>\n\t<div class=\"beam_item-count\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ 'beam--alert': !isCountComplete }\"\n\t\t\t@click.stop.prevent=\"validate\"\n\t\t\t@input.stop.prevent=\"debouncedValidate\"\n\t\t\t@paste=\"validate\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span v-if=\"denominator\">/{{ denominator }}</span>\n\t\t<span v-if=\"uom\"> {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useDebounceFn } from '@vueuse/core'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst count = defineModel<number>({ required: true })\nconst {\n\tdenominator = 0,\n\tdebounce = 300,\n\teditable = true,\n\tuom = '',\n} = defineProps<{\n\tdenominator?: number\n\tdebounce?: number\n\teditable?: HTMLAttributes['contenteditable']\n\tuom?: string\n}>()\n\nconst isCountComplete = computed(() => denominator !== 0 && count.value === denominator)\n\nconst validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {\n\tconst newValue = Number((payload.target as HTMLElement).innerHTML) || 0\n\tcount.value = denominator ? Math.min(newValue, denominator) : newValue\n}\n\nconst debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)\nconst debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)\n</script>\n\n<style scoped>\n.beam_item-count {\n\tfont-size: 1.3125rem;\n\tcolor: var(--sc-primary-text-color);\n}\n\n.beam_item-count span {\n\tmargin: 0;\n\tpadding: 0;\n\toutline: none;\n}\n</style>\n","<template>\n\t<a :href=\"to\" class=\"beam_list-anchor\">\n\t\t<slot />\n\t</a>\n</template>\n\n<script setup lang=\"ts\">\nconst { to = '' } = defineProps<{ to?: string }>()\n</script>\n\n<style scoped>\n.beam_list-anchor {\n\ttext-decoration: none;\n\toutline: none;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<a :href=\"to\" class=\"beam_list-anchor\">\n\t\t<slot />\n\t</a>\n</template>\n\n<script setup lang=\"ts\">\nconst { to = '' } = defineProps<{ to?: string }>()\n</script>\n\n<style scoped>\n.beam_list-anchor {\n\ttext-decoration: none;\n\toutline: none;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<li tabindex=\"0\" class=\"beam_list-item\">\n\t\t<div class=\"beam_list-text\">\n\t\t\t<label class=\"beam--bold\">{{ listItem.label }}</label>\n\t\t\t<p>{{ listItem.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"listItem.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:debounce=\"listItem.debounce\"\n\t\t\t:denominator=\"listItem.count.of\"\n\t\t\t:editable=\"true\"\n\t\t\t:uom=\"listItem.count.uom\" />\n\t\t<ItemCheck v-if=\"listItem.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ItemCount from './ItemCount.vue'\nimport ItemCheck from './ItemCheck.vue'\nimport type { ListViewItem } from '../types'\n\nconst { item } = defineProps<{ item: ListViewItem }>()\nconst emit = defineEmits<{ update: [item: ListViewItem] }>()\n\nconst listItem = ref(item)\n\nwatch(\n\tlistItem,\n\tvalue => {\n\t\temit('update', value)\n\t},\n\t{ deep: true }\n)\n</script>\n\n<style scoped>\n.beam_list-item {\n\tpadding: 0.625rem;\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tmax-width: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\tjustify-content: space-between;\n\tgap: 1.25rem;\n\tcursor: pointer;\n\toutline: 2px solid transparent;\n\toutline-offset: -1px;\n\n\t&:focus {\n\t\toutline: 2px solid var(--sc-focus-cell-outline);\n\t\tbackground-color: var(--sc-focus-cell-background);\n\t}\n}\n\n.beam_list-text {\n\twidth: 80%;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\tflex-grow: 1;\n\tfont-size: 0.875rem;\n\tcolor: var(--sc-primary-text-color);\n\n\t& label,\n\t& p {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n}\n\n.beam_list-item label {\n\tdisplay: block;\n}\n\n.beam_list-item p {\n\tmargin: 0;\n}\n</style>\n","<template>\n\t<li tabindex=\"0\" class=\"beam_list-item\">\n\t\t<div class=\"beam_list-text\">\n\t\t\t<label class=\"beam--bold\">{{ listItem.label }}</label>\n\t\t\t<p>{{ listItem.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"listItem.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:debounce=\"listItem.debounce\"\n\t\t\t:denominator=\"listItem.count.of\"\n\t\t\t:editable=\"true\"\n\t\t\t:uom=\"listItem.count.uom\" />\n\t\t<ItemCheck v-if=\"listItem.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ItemCount from './ItemCount.vue'\nimport ItemCheck from './ItemCheck.vue'\nimport type { ListViewItem } from '../types'\n\nconst { item } = defineProps<{ item: ListViewItem }>()\nconst emit = defineEmits<{ update: [item: ListViewItem] }>()\n\nconst listItem = ref(item)\n\nwatch(\n\tlistItem,\n\tvalue => {\n\t\temit('update', value)\n\t},\n\t{ deep: true }\n)\n</script>\n\n<style scoped>\n.beam_list-item {\n\tpadding: 0.625rem;\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tmax-width: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\tjustify-content: space-between;\n\tgap: 1.25rem;\n\tcursor: pointer;\n\toutline: 2px solid transparent;\n\toutline-offset: -1px;\n\n\t&:focus {\n\t\toutline: 2px solid var(--sc-focus-cell-outline);\n\t\tbackground-color: var(--sc-focus-cell-background);\n\t}\n}\n\n.beam_list-text {\n\twidth: 80%;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\tflex-grow: 1;\n\tfont-size: 0.875rem;\n\tcolor: var(--sc-primary-text-color);\n\n\t& label,\n\t& p {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n}\n\n.beam_list-item label {\n\tdisplay: block;\n}\n\n.beam_list-item p {\n\tmargin: 0;\n}\n</style>\n","<template>\n\t<ul class=\"beam_list-view\">\n\t\t<li v-for=\"item in items\" :key=\"item.barcode || item.label\">\n\t\t\t<template v-if=\"item.linkComponent == 'BeamDayDivider'\">\n\t\t\t\t<BeamDayDivider :item=\"item\"></BeamDayDivider>\n\t\t\t</template>\n\n\t\t\t<template v-else-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\" @update=\"handleUpdate\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\" @update=\"handleUpdate\"></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 BeamDayDivider from './BeamDayDivider.vue'\nimport ListItem from './ListItem.vue'\nimport type { ListViewItem } from '../types'\n\ndefineProps<{ items: ListViewItem[] }>()\nconst emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleUpdate = (item: ListViewItem) => emit('update', item)\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\n<style scoped>\n.beam_list-view {\n\tfont-family: var(--sc-font-family);\n\tlist-style-type: none;\n\tmargin-top: 1px;\n\tmargin-left: var(--sc-list-margin);\n\tmargin-right: var(--sc-list-margin);\n\tpadding: 0;\n}\n\nul.beam_list-view:last-of-type {\n\tpadding-bottom: 2.5em;\n}\n</style>\n","<template>\n\t<ul class=\"beam_list-view\">\n\t\t<li v-for=\"item in items\" :key=\"item.barcode || item.label\">\n\t\t\t<template v-if=\"item.linkComponent == 'BeamDayDivider'\">\n\t\t\t\t<BeamDayDivider :item=\"item\"></BeamDayDivider>\n\t\t\t</template>\n\n\t\t\t<template v-else-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\" @update=\"handleUpdate\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\" @update=\"handleUpdate\"></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 BeamDayDivider from './BeamDayDivider.vue'\nimport ListItem from './ListItem.vue'\nimport type { ListViewItem } from '../types'\n\ndefineProps<{ items: ListViewItem[] }>()\nconst emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleUpdate = (item: ListViewItem) => emit('update', item)\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\n<style scoped>\n.beam_list-view {\n\tfont-family: var(--sc-font-family);\n\tlist-style-type: none;\n\tmargin-top: 1px;\n\tmargin-left: var(--sc-list-margin);\n\tmargin-right: var(--sc-list-margin);\n\tpadding: 0;\n}\n\nul.beam_list-view:last-of-type {\n\tpadding-bottom: 2.5em;\n}\n</style>\n","<template>\n\t<nav class=\"beam_navbar\">\n\t\t<slot name=\"title\">\n\t\t\t<BeamHeading>TITLE</BeamHeading>\n\t\t</slot>\n\t\t<BeamBtn @click=\"handlePrimaryAction\">\n\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t</BeamBtn>\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\n<style scoped>\n.beam_navbar {\n\tpadding: 0.625rem;\n\tbackground-color: var(--sc-primary-color);\n\tmargin-left: 0;\n\tmin-height: 2em;\n\tmax-height: 2em;\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\talign-content: center;\n\tjustify-content: space-between;\n\talign-items: center;\n\tposition: sticky;\n\ttop: 0;\n\tfont-family: var(--sc-font-family);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\n\t& h1 {\n\t\tmargin-left: 0.625rem;\n\t}\n}\n</style>\n","<template>\n\t<nav class=\"beam_navbar\">\n\t\t<slot name=\"title\">\n\t\t\t<BeamHeading>TITLE</BeamHeading>\n\t\t</slot>\n\t\t<BeamBtn @click=\"handlePrimaryAction\">\n\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t</BeamBtn>\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\n<style scoped>\n.beam_navbar {\n\tpadding: 0.625rem;\n\tbackground-color: var(--sc-primary-color);\n\tmargin-left: 0;\n\tmin-height: 2em;\n\tmax-height: 2em;\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\talign-content: center;\n\tjustify-content: space-between;\n\talign-items: center;\n\tposition: sticky;\n\ttop: 0;\n\tfont-family: var(--sc-font-family);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\n\t& h1 {\n\t\tmargin-left: 0.625rem;\n\t}\n}\n</style>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport onScan from 'onscan.js'\nimport type { OnScan } from 'onscan.js'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits<{ scanInstance: [instance: OnScan] }>()\nconst props = defineProps<{\n\tscanHandler: (barcode: string, qty: number) => void\n}>()\n\nonMounted(() => {\n\tconst instance = onScan.attachTo(window, { onScan: props.scanHandler })\n\temit('scanInstance', instance)\n})\n\nonUnmounted(() => {\n\tonScan.detachFrom(window)\n})\n</script>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport onScan from 'onscan.js'\nimport type { OnScan } from 'onscan.js'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits<{ scanInstance: [instance: OnScan] }>()\nconst props = defineProps<{\n\tscanHandler: (barcode: string, qty: number) => void\n}>()\n\nonMounted(() => {\n\tconst instance = onScan.attachTo(window, { onScan: props.scanHandler })\n\temit('scanInstance', instance)\n})\n\nonUnmounted(() => {\n\tonScan.detachFrom(window)\n})\n</script>\n","<template>\n\t<div class=\"segmented-display\" :style=\"{ background: getColor(displayColor) }\">\n\t\t<h1 class=\"segmented-display-output\" :style=\"{ color: getColor(textColor) }\">{{ getOutput }}</h1>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { BeamColor } from '../types'\n\nconst {\n\tdisplayInput = 120.2568,\n\tdecimalPlaces = 2,\n\tdisplayColor = 'gray',\n\ttextColor = 'white',\n} = defineProps<{\n\tdisplayInput?: number\n\tdecimalPlaces?: number\n\tdisplayColor?: BeamColor\n\ttextColor?: BeamColor\n}>()\n\nconst getOutput = computed(() => {\n\tif (displayInput === 0) return Number(0).toFixed(decimalPlaces)\n\treturn displayInput.toFixed(decimalPlaces)\n})\n\nconst getColor = (color: BeamColor) => {\n\treturn color?.substring(0, 2) == '--' ? `var(${color})` : color\n}\n</script>\n\n<style scoped>\n.segmented-display {\n\twidth: 100%;\n\tpadding: 1rem;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tbackground: var(--sc-segmented-display-background);\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n.segmented-display-output {\n\ttext-align: right;\n\tfont-family: Segment7, Arimo, sans-serif;\n\tfont-weight: normal;\n\tfont-size: var(--sc-segemented-display-font-size);\n\tpadding: 0;\n\tmargin: 0;\n\tletter-spacing: 0.3rem;\n\tmargin-bottom: -0.7rem;\n\tcolor: var(--sc-segmented-display-color);\n}\n</style>\n","<template>\n\t<div class=\"segmented-display\" :style=\"{ background: getColor(displayColor) }\">\n\t\t<h1 class=\"segmented-display-output\" :style=\"{ color: getColor(textColor) }\">{{ getOutput }}</h1>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { BeamColor } from '../types'\n\nconst {\n\tdisplayInput = 120.2568,\n\tdecimalPlaces = 2,\n\tdisplayColor = 'gray',\n\ttextColor = 'white',\n} = defineProps<{\n\tdisplayInput?: number\n\tdecimalPlaces?: number\n\tdisplayColor?: BeamColor\n\ttextColor?: BeamColor\n}>()\n\nconst getOutput = computed(() => {\n\tif (displayInput === 0) return Number(0).toFixed(decimalPlaces)\n\treturn displayInput.toFixed(decimalPlaces)\n})\n\nconst getColor = (color: BeamColor) => {\n\treturn color?.substring(0, 2) == '--' ? `var(${color})` : color\n}\n</script>\n\n<style scoped>\n.segmented-display {\n\twidth: 100%;\n\tpadding: 1rem;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tbackground: var(--sc-segmented-display-background);\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n.segmented-display-output {\n\ttext-align: right;\n\tfont-family: Segment7, Arimo, sans-serif;\n\tfont-weight: normal;\n\tfont-size: var(--sc-segemented-display-font-size);\n\tpadding: 0;\n\tmargin: 0;\n\tletter-spacing: 0.3rem;\n\tmargin-bottom: -0.7rem;\n\tcolor: var(--sc-segmented-display-color);\n}\n</style>\n","<template>\n\t<div class=\"two-column\" :style=\"{ justifyContent, alignItems }\">\n\t\t<div class=\"column column-left\">\n\t\t\t<slot name=\"left\"></slot>\n\t\t</div>\n\t\t<div class=\"column column-right\">\n\t\t\t<slot name=\"right\"></slot>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue'\n\nconst { justifyContent = 'space-between', alignItems = 'flex-start' } = defineProps<{\n\tjustifyContent?: CSSProperties['justifyContent']\n\talignItems?: CSSProperties['alignItems']\n}>()\n</script>\n\n<style scoped>\n.two-column {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tgap: 1rem;\n\n\t@media screen and (max-width: 400px) {\n\t\tflex-direction: column;\n\t\tgap: 0;\n\t}\n}\n\n.column {\n\tflex-grow: 1;\n\twidth: 50%;\n\t@media screen and (max-width: 400px) {\n\t\twidth: 100%;\n\t}\n}\n\n.column-right {\n\ttext-align: right;\n\t@media screen and (max-width: 400px) {\n\t\ttext-align: left;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"two-column\" :style=\"{ justifyContent, alignItems }\">\n\t\t<div class=\"column column-left\">\n\t\t\t<slot name=\"left\"></slot>\n\t\t</div>\n\t\t<div class=\"column column-right\">\n\t\t\t<slot name=\"right\"></slot>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue'\n\nconst { justifyContent = 'space-between', alignItems = 'flex-start' } = defineProps<{\n\tjustifyContent?: CSSProperties['justifyContent']\n\talignItems?: CSSProperties['alignItems']\n}>()\n</script>\n\n<style scoped>\n.two-column {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tgap: 1rem;\n\n\t@media screen and (max-width: 400px) {\n\t\tflex-direction: column;\n\t\tgap: 0;\n\t}\n}\n\n.column {\n\tflex-grow: 1;\n\twidth: 50%;\n\t@media screen and (max-width: 400px) {\n\t\twidth: 100%;\n\t}\n}\n\n.column-right {\n\ttext-align: right;\n\t@media screen and (max-width: 400px) {\n\t\ttext-align: left;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"arrow-icon\" :class=\"{ open }\">\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { open } = defineProps<{ open: boolean }>()\n</script>\n\n<style scoped>\nsvg {\n\twidth: 100%;\n\toverflow: visible;\n\tfill: var(--sc-primary-text-color);\n}\n\n.arrow-icon {\n\twidth: 0.4rem;\n\ttransform: rotate(0);\n\ttransform-origin: center;\n\tposition: relative;\n\ttransition: all 0.1s ease-in-out;\n\tmargin: 0.5rem;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.open {\n\ttransform: rotate(90deg);\n}\n</style>\n","<template>\n\t<div class=\"arrow-icon\" :class=\"{ open }\">\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { open } = defineProps<{ open: boolean }>()\n</script>\n\n<style scoped>\nsvg {\n\twidth: 100%;\n\toverflow: visible;\n\tfill: var(--sc-primary-text-color);\n}\n\n.arrow-icon {\n\twidth: 0.4rem;\n\ttransform: rotate(0);\n\ttransform-origin: center;\n\tposition: relative;\n\ttransition: all 0.1s ease-in-out;\n\tmargin: 0.5rem;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.open {\n\ttransform: rotate(90deg);\n}\n</style>\n","import mqtt, { type MqttClient } from 'mqtt'\nimport { onMounted, onUnmounted, ref } from 'vue'\n\nimport { IMqttStream } from '../types'\n\n/**\n * Use MQTT stream\n * @param options - MQTT stream options\n * @returns MQTT stream messages\n * @beta\n */\nexport const useMqttStream = async (options: IMqttStream) => {\n\tconst messages = ref<Record<string, string[]>>({})\n\n\tif (options.host && options.port) {\n\t\tconst portActive = await isPortActive(options.host, options.port)\n\t\tif (!portActive) {\n\t\t\treturn { messages }\n\t\t}\n\t}\n\n\tconst client = ref<MqttClient>()\n\n\tonMounted(() => {\n\t\tclient.value = mqtt.connect(options)\n\n\t\tif (!options.topics) {\n\t\t\toptions.topics = ['#']\n\t\t}\n\n\t\tfor (const topic of options.topics) {\n\t\t\tclient.value.subscribe(topic, err => {\n\t\t\t\tif (err) {\n\t\t\t\t\tthrow err\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\n\t\tclient.value.on('message', (topic, message) => {\n\t\t\tif (!messages.value[topic]) {\n\t\t\t\tmessages.value[topic] = []\n\t\t\t}\n\n\t\t\tmessages.value[topic].push(message.toString())\n\t\t})\n\t})\n\n\tonUnmounted(() => {\n\t\tclient.value?.end()\n\t})\n\n\treturn { messages }\n}\n\n/**\n * Check if a local port has a service running\n * @param host the host to check\n * @param port the port to check\n * @returns true if the port has a service running, false otherwise\n *\n * @beta\n */\nexport const isPortActive = async (host: string, port: number) => {\n\ttry {\n\t\tconst controller = new AbortController()\n\t\t// Set a timeout of 2 seconds\n\t\tconst timeoutId = setTimeout(() => controller.abort(), 2000)\n\n\t\ttry {\n\t\t\tawait fetch(`${host}:${port}`, {\n\t\t\t\tmode: 'no-cors', // This allows checking without CORS issues\n\t\t\t\tsignal: controller.signal,\n\t\t\t})\n\n\t\t\tclearTimeout(timeoutId)\n\t\t\t// If we get any response, the port is in use\n\t\t\treturn true\n\t\t} catch (error) {\n\t\t\tclearTimeout(timeoutId)\n\t\t\tif (error instanceof DOMException && error.name === 'AbortError') {\n\t\t\t\t// Timeout - port is probably not in use\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\t// For connection refused errors, we need to check the error message\n\t\t\t// as different browsers handle this differently\n\t\t\tconst errorString = String(error)\n\t\t\tif (\n\t\t\t\terrorString.includes('NetworkError') ||\n\t\t\t\terrorString.includes('Failed to fetch') ||\n\t\t\t\terrorString.includes('net::ERR_CONNECTION_REFUSED')\n\t\t\t) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\t// If we get here, there might be something running on the port\n\t\t\treturn true\n\t\t}\n\t} catch {\n\t\treturn false\n\t}\n}\n","import { App } from 'vue'\n\nimport ActionFooter from './components/ActionFooter.vue'\nimport BeamArrow from './components/BeamArrow.vue'\nimport BeamBtn from './components/BeamBtn.vue'\nimport BeamDayDivider from './components/BeamDayDivider.vue'\nimport BeamFilter from './components/BeamFilter.vue'\nimport BeamFilterOption from './components/BeamFilterOption.vue'\nimport BeamHeading from './components/BeamHeading.vue'\nimport BeamMetadata from './components/BeamMetadata.vue'\nimport BeamModal from './components/BeamModal.vue'\nimport BeamModalOutlet from './components/BeamModalOutlet.vue'\nimport BeamProgress from './components/BeamProgress.vue'\nimport Confirm from './components/Confirm.vue'\nimport FixedTop from './components/FixedTop.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 SegmentedDisplay from './components/SegmentedDisplay.vue'\nimport SplitColumn from './components/SplitColumn.vue'\nimport ToggleArrow from './components/ToggleArrow.vue'\nimport { useMqttStream } from './composables/mqtt'\nexport type * from './types'\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('BeamArrow', BeamArrow)\n\tapp.component('BeamBtn', BeamBtn)\n\tapp.component('BeamDayDivider', BeamDayDivider)\n\tapp.component('BeamFilter', BeamFilter)\n\tapp.component('BeamFilterOption', BeamFilterOption)\n\tapp.component('BeamHeading', BeamHeading)\n\tapp.component('BeamMetadata', BeamMetadata)\n\tapp.component('BeamModal', BeamModal)\n\tapp.component('BeamModalOutlet', BeamModalOutlet)\n\tapp.component('BeamProgress', BeamProgress)\n\tapp.component('Confirm', Confirm)\n\tapp.component('FixedTop', FixedTop)\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\tapp.component('SegmentedDisplay', SegmentedDisplay)\n\tapp.component('SplitColumn', SplitColumn)\n\tapp.component('ToggleArrow', ToggleArrow)\n}\n\nexport {\n\tActionFooter,\n\tBeamArrow,\n\tBeamBtn,\n\tBeamDayDivider,\n\tBeamFilter,\n\tBeamFilterOption,\n\tBeamHeading,\n\tBeamMetadata,\n\tBeamModal,\n\tBeamModalOutlet,\n\tBeamProgress,\n\tConfirm,\n\tFixedTop,\n\tItemCheck,\n\tItemCount,\n\tListAnchor,\n\tListItem,\n\tListView,\n\tNavbar,\n\tScanInput,\n\tSegmentedDisplay,\n\tSplitColumn,\n\tToggleArrow,\n\tinstall,\n\tuseMqttStream,\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"beam.js","names":["$emit"],"sources":["../src/components/ActionFooter.vue","../src/components/ActionFooter.vue","../src/components/BeamArrow.vue","../src/components/BeamArrow.vue","../src/components/BeamBtn.vue","../src/components/BeamDayDivider.vue","../src/components/BeamDayDivider.vue","../src/components/BeamFilter.vue","../src/components/BeamFilter.vue","../src/components/BeamFilterOption.vue","../src/components/BeamFilterOption.vue","../src/components/BeamHeading.vue","../src/components/BeamMetadata.vue","../src/components/BeamMetadata.vue","../src/components/BeamModal.vue","../src/components/BeamModal.vue","../src/components/BeamModalOutlet.vue","../src/components/BeamModalOutlet.vue","../src/components/BeamProgress.vue","../src/components/BeamProgress.vue","../src/components/Confirm.vue","../src/components/FixedTop.vue","../src/components/ItemCheck.vue","../src/components/ItemCheck.vue","../src/components/ItemCount.vue","../src/components/ItemCount.vue","../src/components/ListAnchor.vue","../src/components/ListAnchor.vue","../src/components/ListItem.vue","../src/components/ListItem.vue","../src/components/ListView.vue","../src/components/ListView.vue","../src/components/Navbar.vue","../src/components/Navbar.vue","../src/components/ScanInput.vue","../src/components/ScanInput.vue","../src/components/SegmentedDisplay.vue","../src/components/SegmentedDisplay.vue","../src/components/SplitColumn.vue","../src/components/SplitColumn.vue","../src/components/ToggleArrow.vue","../src/components/ToggleArrow.vue","../src/composables/mqtt.ts","../src/index.ts"],"sourcesContent":["<template>\n\t<footer class=\"beam_action-footer\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<BeamBtn @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</BeamBtn>\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\n<style scoped>\n.beam_action-footer {\n\tmargin-left: 0;\n\tbackground: linear-gradient(180deg, transparent 0%, white 100%);\n\tcolor: var(--sc-primary-text-color);\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tpadding: 0.625rem;\n\ttext-align: center;\n}\n</style>\n","<template>\n\t<footer class=\"beam_action-footer\">\n\t\t<span class=\"footer-action-wrapper\">\n\t\t\t<BeamBtn @click=\"handleFooterAction\">\n\t\t\t\t<slot />\n\t\t\t</BeamBtn>\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\n<style scoped>\n.beam_action-footer {\n\tmargin-left: 0;\n\tbackground: linear-gradient(180deg, transparent 0%, white 100%);\n\tcolor: var(--sc-primary-text-color);\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 0;\n\twidth: 100%;\n\tpadding: 0.625rem;\n\ttext-align: center;\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata_arrow\">\n\t\t<div class=\"beam_metadata_arrow-body\" :style=\"{ background: color }\"></div>\n\t\t<div class=\"beam_metadata_arrow-head\">\n\t\t\t<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 6.74 7.78\">\n\t\t\t\t<polygon points=\"6.74 3.89 0 0 0 7.78 6.74 3.89\" style=\"fill: #c4c4c4\" :style=\"{ fill: color }\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { color = '#c4c4c4' } = defineProps<{ color?: string }>()\n</script>\n\n<style scoped>\n.beam_metadata_arrow {\n\talign-self: center;\n\tflex-grow: 1;\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.beam_metadata_arrow-body {\n\twidth: 100%;\n\theight: 10px;\n\tbackground: #c4c4c4;\n}\n\n.beam_metadata_arrow-head {\n\t& svg {\n\t\twidth: 20px;\n\t\tdisplay: block;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata_arrow\">\n\t\t<div class=\"beam_metadata_arrow-body\" :style=\"{ background: color }\"></div>\n\t\t<div class=\"beam_metadata_arrow-head\">\n\t\t\t<svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 6.74 7.78\">\n\t\t\t\t<polygon points=\"6.74 3.89 0 0 0 7.78 6.74 3.89\" style=\"fill: #c4c4c4\" :style=\"{ fill: color }\" />\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { color = '#c4c4c4' } = defineProps<{ color?: string }>()\n</script>\n\n<style scoped>\n.beam_metadata_arrow {\n\talign-self: center;\n\tflex-grow: 1;\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.beam_metadata_arrow-body {\n\twidth: 100%;\n\theight: 10px;\n\tbackground: #c4c4c4;\n}\n\n.beam_metadata_arrow-head {\n\t& svg {\n\t\twidth: 20px;\n\t\tdisplay: block;\n\t}\n}\n</style>\n","<template>\n\t<button class=\"beam_btn\">\n\t\t<slot>Action</slot>\n\t</button>\n</template>\n\n<style scoped>\n.beam_btn {\n\tfont-size: 0.875rem;\n\ttext-align: center;\n\tpadding: 0.3125rem 0.75rem;\n\tborder: 1px solid var(--sc-btn-border);\n\tcolor: var(--sc-btn-label-color);\n\tbackground-color: var(--sc-btn-color);\n\tcursor: pointer;\n\tfont-family: var(--sc-font-family);\n\n\t&:hover,\n\t&:active {\n\t\tbackground-color: var(--sc-btn-hover);\n\t}\n}\n</style>\n<style>\n.beam_btn a:link,\n.beam_btn a:visited,\n.beam_btn a:hover,\n.beam_btn a:active {\n\ttext-decoration: none;\n\tcolor: var(--sc-btn-label-color);\n}\n</style>\n","<template>\n\t<div class=\"beam_day-divider\">\n\t\t<h2>{{ date }}</h2>\n\t</div>\n\n\t<slot></slot>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { ListViewItem } from '../types'\n\ndefineSlots<{ default(): any }>()\nconst { item } = defineProps<{ item: ListViewItem }>()\n\nfunction parseListDate(raw: string): Date {\n\tconst calendar = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(raw)\n\tif (calendar) {\n\t\treturn new Date(Number(calendar[1]), Number(calendar[2]) - 1, Number(calendar[3]))\n\t}\n\treturn new Date(raw)\n}\n\nconst date = computed(() => {\n\tif (!item.date || isNaN(Date.parse(item.date))) {\n\t\treturn item.date\n\t}\n\n\t// if needed, the user can specify a Date format flag that will dictate how the output is formatted,\n\t// defaults to toDateString(); using switch/case here in case more values wanted to be added\n\tconst dateObj = parseListDate(item.date)\n\tif (item.dateFormat) {\n\t\tswitch (item.dateFormat.toLowerCase()) {\n\t\t\tcase 'iso':\n\t\t\t\treturn dateObj.toISOString()\n\t\t}\n\t}\n\treturn dateObj.toDateString()\n})\n</script>\n\n<style scoped>\n.beam_day-divider {\n\ttext-align: left;\n\tpadding: 1rem;\n\tbackground: var(--sc-cell-changed-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmargin-bottom: 1rem;\n\n\t/* reverse margins only for day-divider elements in list */\n\tmargin-left: calc(-1 * var(--sc-list-margin));\n\tmargin-right: calc(-1 * var(--sc-list-margin));\n\n\t& h2 {\n\t\ttext-align: left;\n\t\tfont-size: 1rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n\n.beam_day-divider:first-of-type {\n\tmargin-top: 0;\n}\n</style>\n","<template>\n\t<div class=\"beam_day-divider\">\n\t\t<h2>{{ date }}</h2>\n\t</div>\n\n\t<slot></slot>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport type { ListViewItem } from '../types'\n\ndefineSlots<{ default(): any }>()\nconst { item } = defineProps<{ item: ListViewItem }>()\n\nfunction parseListDate(raw: string): Date {\n\tconst calendar = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(raw)\n\tif (calendar) {\n\t\treturn new Date(Number(calendar[1]), Number(calendar[2]) - 1, Number(calendar[3]))\n\t}\n\treturn new Date(raw)\n}\n\nconst date = computed(() => {\n\tif (!item.date || isNaN(Date.parse(item.date))) {\n\t\treturn item.date\n\t}\n\n\t// if needed, the user can specify a Date format flag that will dictate how the output is formatted,\n\t// defaults to toDateString(); using switch/case here in case more values wanted to be added\n\tconst dateObj = parseListDate(item.date)\n\tif (item.dateFormat) {\n\t\tswitch (item.dateFormat.toLowerCase()) {\n\t\t\tcase 'iso':\n\t\t\t\treturn dateObj.toISOString()\n\t\t}\n\t}\n\treturn dateObj.toDateString()\n})\n</script>\n\n<style scoped>\n.beam_day-divider {\n\ttext-align: left;\n\tpadding: 1rem;\n\tbackground: var(--sc-cell-changed-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmargin-bottom: 1rem;\n\n\t/* reverse margins only for day-divider elements in list */\n\tmargin-left: calc(-1 * var(--sc-list-margin));\n\tmargin-right: calc(-1 * var(--sc-list-margin));\n\n\t& h2 {\n\t\ttext-align: left;\n\t\tfont-size: 1rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n}\n\n.beam_day-divider:first-of-type {\n\tmargin-top: 0;\n}\n</style>\n","<template>\n\t<div class=\"beam_filters\">\n\t\t<div class=\"beam_filters-heading\" @click=\"isFilterExpanded = !isFilterExpanded\">\n\t\t\t<ToggleArrow :open=\"isFilterExpanded\" />\n\t\t\t<BeamHeading>Filter</BeamHeading>\n\t\t</div>\n\n\t\t<div v-show=\"isFilterExpanded\" class=\"beam_filters-options\">\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineSlots<{ default(): any }>()\n\nconst isFilterExpanded = ref(false)\n</script>\n\n<style scoped>\n.beam_filters {\n\tbackground-color: var(--sc-primary-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmin-height: 2em;\n\toverflow: visible;\n\tpadding: 0.625rem;\n\ttransition: all 0.2s ease-in-out;\n}\n\n.beam_filters-heading {\n\talign-items: center;\n\tbackground-color: var(--sc-primary-color);\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-size: 1rem;\n\n\t& > h1 {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.beam_filters-options {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tmargin: 1rem 0;\n\tpadding: 0 1rem;\n\tgap: 1rem;\n\n\t@media (max-width: 479px) {\n\t\tflex-direction: column;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"beam_filters\">\n\t\t<div class=\"beam_filters-heading\" @click=\"isFilterExpanded = !isFilterExpanded\">\n\t\t\t<ToggleArrow :open=\"isFilterExpanded\" />\n\t\t\t<BeamHeading>Filter</BeamHeading>\n\t\t</div>\n\n\t\t<div v-show=\"isFilterExpanded\" class=\"beam_filters-options\">\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\ndefineSlots<{ default(): any }>()\n\nconst isFilterExpanded = ref(false)\n</script>\n\n<style scoped>\n.beam_filters {\n\tbackground-color: var(--sc-primary-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tmin-height: 2em;\n\toverflow: visible;\n\tpadding: 0.625rem;\n\ttransition: all 0.2s ease-in-out;\n}\n\n.beam_filters-heading {\n\talign-items: center;\n\tbackground-color: var(--sc-primary-color);\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-size: 1rem;\n\n\t& > h1 {\n\t\tfont-size: 1rem;\n\t}\n}\n\n.beam_filters-options {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\tmargin: 1rem 0;\n\tpadding: 0 1rem;\n\tgap: 1rem;\n\n\t@media (max-width: 479px) {\n\t\tflex-direction: column;\n\t}\n}\n</style>\n","<template>\n\t<div v-on-click-outside=\"() => (isMenuOpen = false)\" class=\"beam_filter-container\">\n\t\t<BeamHeading class=\"beam_filter-option-heading\">{{ title }}</BeamHeading>\n\t\t<div class=\"beam_filter-option\" @click=\"isMenuOpen = !isMenuOpen\">\n\t\t\t<div class=\"beam_filter-option-select\">\n\t\t\t\t<div class=\"beam_filter-arrow\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_filter-label\">\n\t\t\t\t\t<label>{{ label }}</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ul v-if=\"isMenuOpen\" ref=\"menu\" class=\"beam_filter-select-menu\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"choice in choices\"\n\t\t\t\t\t:key=\"choice.value\"\n\t\t\t\t\t:class=\"{ selected: label == choice.label }\"\n\t\t\t\t\t:data-value=\"choice.value\"\n\t\t\t\t\tclass=\"beam_filter-select-option\"\n\t\t\t\t\t@click=\"selectChoice(choice)\">\n\t\t\t\t\t{{ choice.label }}\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { vOnClickOutside } from '@vueuse/components'\nimport { ref } from 'vue'\n\nimport { BeamFilterChoice } from '../types'\n\nconst emit = defineEmits<{ select: [choice: BeamFilterChoice] }>()\n\nconst { choices, title = 'title' } = defineProps<{\n\tchoices: BeamFilterChoice[]\n\ttitle?: string\n}>()\n\nconst isMenuOpen = ref(false)\nconst label = ref(choices[0].label)\nconst value = ref(choices[0].value)\n\nconst selectChoice = (data: BeamFilterChoice) => {\n\tlabel.value = data.label\n\tvalue.value = data.value\n\temit('select', data)\n}\n</script>\n\n<style scoped>\n.beam_filter-option {\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.beam_filter-option-heading {\n\tfont-size: 1rem !important;\n\tpadding-bottom: 0.25rem;\n}\n\n.beam_filter-option-select {\n\talign-items: stretch;\n\tappearance: none;\n\tbackground-color: white;\n\tborder: 1px solid var(--sc-row-border-color);\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tfont-family: var(--sc-font-family);\n\tfont-size: 0.8rem;\n\tfont-weight: bold;\n\tposition: relative;\n}\n\nlabel {\n\tcursor: pointer;\n\tpadding: 0.5rem;\n}\n\n.beam_filter-arrow {\n\tbackground: var(--sc-primary-color);\n\tcolor: var(--sc-primary-text-color);\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 5px;\n\tpadding: 0.5rem 0.7rem;\n}\n\n.beam_filter-label {\n\tdisplay: flex;\n\talign-items: center;\n}\n\nsvg {\n\tfill: var(--sc-primary-text-color);\n\twidth: 5px;\n\ttransform: rotate(90deg);\n}\n\n.beam_filter-select-menu {\n\tbackground-color: white;\n\tborder-top: none;\n\tborder: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tleft: 0;\n\tlist-style: none;\n\tmargin: 0;\n\tmax-height: 200px;\n\toverflow-y: scroll;\n\tpadding: 0rem;\n\tposition: absolute;\n\twidth: 100%;\n\tz-index: 100;\n}\n\n.beam_filter-select-option {\n\tfont-size: 0.8rem;\n\tfont-family: var(--sc-font-family);\n\tfont-weight: bold;\n\tcolor: var(--sc-primary-text-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tpadding: 0.5rem;\n\t&:hover {\n\t\tbackground: var(--sc-primary-color);\n\t}\n}\n\n.selected {\n\tbackground: var(--sc-row-border-color);\n\n\t&:hover {\n\t\tbackground: var(--sc-row-border-color);\n\t}\n}\n.beam_filter-container {\n\tflex-grow: 1;\n\tmax-width: 300px;\n\twidth: 50%;\n\n\t@media (max-width: 479px) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n</style>\n","<template>\n\t<div v-on-click-outside=\"() => (isMenuOpen = false)\" class=\"beam_filter-container\">\n\t\t<BeamHeading class=\"beam_filter-option-heading\">{{ title }}</BeamHeading>\n\t\t<div class=\"beam_filter-option\" @click=\"isMenuOpen = !isMenuOpen\">\n\t\t\t<div class=\"beam_filter-option-select\">\n\t\t\t\t<div class=\"beam_filter-arrow\">\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_filter-label\">\n\t\t\t\t\t<label>{{ label }}</label>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<ul v-if=\"isMenuOpen\" ref=\"menu\" class=\"beam_filter-select-menu\">\n\t\t\t\t<li\n\t\t\t\t\tv-for=\"choice in choices\"\n\t\t\t\t\t:key=\"choice.value\"\n\t\t\t\t\t:class=\"{ selected: label == choice.label }\"\n\t\t\t\t\t:data-value=\"choice.value\"\n\t\t\t\t\tclass=\"beam_filter-select-option\"\n\t\t\t\t\t@click=\"selectChoice(choice)\">\n\t\t\t\t\t{{ choice.label }}\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { vOnClickOutside } from '@vueuse/components'\nimport { ref } from 'vue'\n\nimport { BeamFilterChoice } from '../types'\n\nconst emit = defineEmits<{ select: [choice: BeamFilterChoice] }>()\n\nconst { choices, title = 'title' } = defineProps<{\n\tchoices: BeamFilterChoice[]\n\ttitle?: string\n}>()\n\nconst isMenuOpen = ref(false)\nconst label = ref(choices[0].label)\nconst value = ref(choices[0].value)\n\nconst selectChoice = (data: BeamFilterChoice) => {\n\tlabel.value = data.label\n\tvalue.value = data.value\n\temit('select', data)\n}\n</script>\n\n<style scoped>\n.beam_filter-option {\n\tcursor: pointer;\n\tposition: relative;\n}\n\n.beam_filter-option-heading {\n\tfont-size: 1rem !important;\n\tpadding-bottom: 0.25rem;\n}\n\n.beam_filter-option-select {\n\talign-items: stretch;\n\tappearance: none;\n\tbackground-color: white;\n\tborder: 1px solid var(--sc-row-border-color);\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tfont-family: var(--sc-font-family);\n\tfont-size: 0.8rem;\n\tfont-weight: bold;\n\tposition: relative;\n}\n\nlabel {\n\tcursor: pointer;\n\tpadding: 0.5rem;\n}\n\n.beam_filter-arrow {\n\tbackground: var(--sc-primary-color);\n\tcolor: var(--sc-primary-text-color);\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 5px;\n\tpadding: 0.5rem 0.7rem;\n}\n\n.beam_filter-label {\n\tdisplay: flex;\n\talign-items: center;\n}\n\nsvg {\n\tfill: var(--sc-primary-text-color);\n\twidth: 5px;\n\ttransform: rotate(90deg);\n}\n\n.beam_filter-select-menu {\n\tbackground-color: white;\n\tborder-top: none;\n\tborder: 1px solid var(--sc-row-border-color);\n\tbox-sizing: border-box;\n\tleft: 0;\n\tlist-style: none;\n\tmargin: 0;\n\tmax-height: 200px;\n\toverflow-y: scroll;\n\tpadding: 0rem;\n\tposition: absolute;\n\twidth: 100%;\n\tz-index: 100;\n}\n\n.beam_filter-select-option {\n\tfont-size: 0.8rem;\n\tfont-family: var(--sc-font-family);\n\tfont-weight: bold;\n\tcolor: var(--sc-primary-text-color);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tpadding: 0.5rem;\n\t&:hover {\n\t\tbackground: var(--sc-primary-color);\n\t}\n}\n\n.selected {\n\tbackground: var(--sc-row-border-color);\n\n\t&:hover {\n\t\tbackground: var(--sc-row-border-color);\n\t}\n}\n.beam_filter-container {\n\tflex-grow: 1;\n\tmax-width: 300px;\n\twidth: 50%;\n\n\t@media (max-width: 479px) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n</style>\n","<template>\n\t<h1 class=\"beam_header\">\n\t\t<slot></slot>\n\t</h1>\n</template>\n\n<style scoped>\n.beam_header {\n\tborder: 1px solid transparent;\n\ttext-align: left;\n\tfont-size: 1.125rem;\n\tcolor: var(--sc-primary-text-color);\n\tmargin: 0;\n\tpadding: 0;\n\tfont-family: var(--sc-font-family);\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata\">\n\t\t<div class=\"beam_metadata_content\">\n\t\t\t<slot>\n\t\t\t\t<div class=\"beam_metadata_header beam_metadata--two-column\"></div>\n\t\t\t\t<div class=\"beam_metadata_block\">\n\t\t\t\t\t<p class=\"beam_metadata_heading\">\n\t\t\t\t\t\tStatus:\n\t\t\t\t\t\t<span :class=\"{ alert: !order.complete }\" class=\"beam_metadata--normal\">{{\n\t\t\t\t\t\t\torder.complete ? 'Complete' : 'In Progress'\n\t\t\t\t\t\t}}</span>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_metadata_shipping beam_metadata_block\">\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Source</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Receiving</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</slot>\n\t\t</div>\n\t\t<hr />\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n\torder: {\n\t\torderNumber: string\n\t\tproduct: string\n\t\tquantity: number\n\t\ttotal: number\n\t\tcomplete: boolean\n\t}\n}>()\n</script>\n\n<style scoped>\n.beam_metadata {\n\t/* margin:3.125rem; */\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-height: 100vh;\n\tcolor: var(--sc-primary-text-color);\n\tfont-family: var(--sc-font-family);\n}\n.beam_metadata_content {\n\tpadding-top: 10px;\n}\n.beam_metadata_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tpadding: 0px 30px 0px 30px;\n\tjustify-content: space-between;\n}\n.beam_metadata_count {\n\tfont-size: 1.5rem;\n\n\t& p {\n\t\tmargin: 0;\n\t}\n}\n.beam_metadata_header-order-num {\n\tfont-weight: bold;\n\tfont-size: 1.5rem;\n}\n.beam_metadata_block {\n\tpadding: 0px 30px;\n\tmargin: 10px 0;\n}\n\n.beam_metadata_shipping {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\n\t& p {\n\t\tline-height: 1.5rem;\n\t}\n}\n@media screen and (max-width: 600px) {\n\t.beam_metadata_shipping {\n\t\tflex-direction: column;\n\t}\n}\n\n.beam_metadata_component_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n.beam_metadata_components {\n\toverflow: scroll;\n}\nhr {\n\tdisplay: block;\n\theight: 1px;\n\tborder: 0;\n\tborder-top: 1px solid var(--sc-row-border-color);\n\tmargin: 1em 0;\n\tpadding: 0;\n}\n</style>\n<style>\n.beam_metadata_heading {\n\tfont-size: 1.125rem;\n\tfont-weight: bold;\n\tmargin: 0.625rem 0;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<div class=\"beam_metadata\">\n\t\t<div class=\"beam_metadata_content\">\n\t\t\t<slot>\n\t\t\t\t<div class=\"beam_metadata_header beam_metadata--two-column\"></div>\n\t\t\t\t<div class=\"beam_metadata_block\">\n\t\t\t\t\t<p class=\"beam_metadata_heading\">\n\t\t\t\t\t\tStatus:\n\t\t\t\t\t\t<span :class=\"{ alert: !order.complete }\" class=\"beam_metadata--normal\">{{\n\t\t\t\t\t\t\torder.complete ? 'Complete' : 'In Progress'\n\t\t\t\t\t\t}}</span>\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"beam_metadata_shipping beam_metadata_block\">\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Source</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div class=\"beam_metadata_source\">\n\t\t\t\t\t\t<p class=\"beam_metadata_heading\">Receiving</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</slot>\n\t\t</div>\n\t\t<hr />\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n\torder: {\n\t\torderNumber: string\n\t\tproduct: string\n\t\tquantity: number\n\t\ttotal: number\n\t\tcomplete: boolean\n\t}\n}>()\n</script>\n\n<style scoped>\n.beam_metadata {\n\t/* margin:3.125rem; */\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-direction: column;\n\tmax-height: 100vh;\n\tcolor: var(--sc-primary-text-color);\n\tfont-family: var(--sc-font-family);\n}\n.beam_metadata_content {\n\tpadding-top: 10px;\n}\n.beam_metadata_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tpadding: 0px 30px 0px 30px;\n\tjustify-content: space-between;\n}\n.beam_metadata_count {\n\tfont-size: 1.5rem;\n\n\t& p {\n\t\tmargin: 0;\n\t}\n}\n.beam_metadata_header-order-num {\n\tfont-weight: bold;\n\tfont-size: 1.5rem;\n}\n.beam_metadata_block {\n\tpadding: 0px 30px;\n\tmargin: 10px 0;\n}\n\n.beam_metadata_shipping {\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: baseline;\n\tjustify-content: space-between;\n\n\t& p {\n\t\tline-height: 1.5rem;\n\t}\n}\n@media screen and (max-width: 600px) {\n\t.beam_metadata_shipping {\n\t\tflex-direction: column;\n\t}\n}\n\n.beam_metadata_component_header {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n.beam_metadata_components {\n\toverflow: scroll;\n}\nhr {\n\tdisplay: block;\n\theight: 1px;\n\tborder: 0;\n\tborder-top: 1px solid var(--sc-row-border-color);\n\tmargin: 1em 0;\n\tpadding: 0;\n}\n</style>\n<style>\n.beam_metadata_heading {\n\tfont-size: 1.125rem;\n\tfont-weight: bold;\n\tmargin: 0.625rem 0;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<portal to=\"beam_modal_outlet\">\n\t\t<div v-show=\"showModal\" class=\"beam_modal\">\n\t\t\t<BeamBtn @click=\"$emit('closemodal')\">Close Modal</BeamBtn>\n\t\t\t<slot @closemodal=\"$emit('closemodal')\" @confirmmodal=\"$emit('confirmmodal')\"></slot>\n\t\t</div>\n\t</portal>\n</template>\n\n<script setup lang=\"ts\">\ndefineEmits<{ closemodal: []; confirmmodal: [] }>()\ndefineProps<{ showModal: boolean }>()\n</script>\n\n<style scoped>\n.beam_modal {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tbackdrop-filter: blur(2px);\n\tz-index: 200;\n\ttext-align: center;\n\tpadding: 1.25rem;\n}\n</style>\n","<template>\n\t<portal to=\"beam_modal_outlet\">\n\t\t<div v-show=\"showModal\" class=\"beam_modal\">\n\t\t\t<BeamBtn @click=\"$emit('closemodal')\">Close Modal</BeamBtn>\n\t\t\t<slot @closemodal=\"$emit('closemodal')\" @confirmmodal=\"$emit('confirmmodal')\"></slot>\n\t\t</div>\n\t</portal>\n</template>\n\n<script setup lang=\"ts\">\ndefineEmits<{ closemodal: []; confirmmodal: [] }>()\ndefineProps<{ showModal: boolean }>()\n</script>\n\n<style scoped>\n.beam_modal {\n\tposition: fixed;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\tbackdrop-filter: blur(2px);\n\tz-index: 200;\n\ttext-align: center;\n\tpadding: 1.25rem;\n}\n</style>\n","<template>\n\t<portal-target name=\"beam_modal_outlet\" />\n</template>\n\n<script setup lang=\"ts\">\n/* const emit = */ defineEmits<{\n\tconfirmmodal: []\n\tclosemodal: []\n}>()\n\n// const confirmModal = () => {\n// \temit('confirmmodal')\n// }\n\n// const closeModal = () => {\n// \temit('closemodal')\n// }\n</script>\n","<template>\n\t<portal-target name=\"beam_modal_outlet\" />\n</template>\n\n<script setup lang=\"ts\">\n/* const emit = */ defineEmits<{\n\tconfirmmodal: []\n\tclosemodal: []\n}>()\n\n// const confirmModal = () => {\n// \temit('confirmmodal')\n// }\n\n// const closeModal = () => {\n// \temit('closemodal')\n// }\n</script>\n","<template>\n\t<p class=\"beam_metadata_heading\">\n\t\t{{ label }}: <span :class=\"{ 'beam--alert': !complete }\" class=\"beam--normal\">{{ statusMessage }}</span>\n\t</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n\tlabel = 'Status',\n\tprogressMessage = 'In Progress',\n\tcompleteMessage = 'Complete',\n\tcomplete = false,\n} = defineProps<{\n\tlabel?: string\n\tprogressMessage?: string\n\tcompleteMessage?: string\n\tcomplete?: boolean\n}>()\n\nconst statusMessage = computed(() => (complete ? completeMessage : progressMessage))\n</script>\n","<template>\n\t<p class=\"beam_metadata_heading\">\n\t\t{{ label }}: <span :class=\"{ 'beam--alert': !complete }\" class=\"beam--normal\">{{ statusMessage }}</span>\n\t</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n\tlabel = 'Status',\n\tprogressMessage = 'In Progress',\n\tcompleteMessage = 'Complete',\n\tcomplete = false,\n} = defineProps<{\n\tlabel?: string\n\tprogressMessage?: string\n\tcompleteMessage?: string\n\tcomplete?: boolean\n}>()\n\nconst statusMessage = computed(() => (complete ? completeMessage : progressMessage))\n</script>\n","<template>\n\t<div class=\"beam_modal-confirm\">\n\t\t<h2>Would you like to continue?</h2>\n\t\t<BeamBtn @click=\"$emit('confirmmodal')\">Yes</BeamBtn>\n\t\t<BeamBtn @click=\"$emit('confirmmodal')\">No</BeamBtn>\n\t</div>\n</template>\n\n<style scoped>\n.beam_modal-confirm {\n\tbackground: #ffffff;\n\tpadding: 1.25rem;\n\twidth: 80%;\n\tmax-width: 400px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\n\t& button {\n\t\tmargin: 0.625rem;\n\t}\n\t& h2 {\n\t\tborder-bottom: 1px solid var(--sc-row-border-color);\n\t\tpadding-bottom: 0.625rem;\n\t\tcolor: var(--sc-primary-text-color);\n\t}\n}\n</style>\n","<template>\n\t<div class=\"fixed-top\">\n\t\t<slot></slot>\n\t</div>\n</template>\n\n<style scoped>\n.fixed-top {\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n}\n</style>\n","<template>\n\t<label class=\"container\">\n\t\t<input v-model=\"value\" type=\"checkbox\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nconst value = defineModel<boolean>({ default: false })\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(--sc-highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--sc-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(--sc-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<label class=\"container\">\n\t\t<input v-model=\"value\" type=\"checkbox\" tabindex=\"-1\" />\n\t\t<div class=\"checkmark\" tabindex=\"0\"></div>\n\t</label>\n</template>\n\n<script setup lang=\"ts\">\nconst value = defineModel<boolean>({ default: false })\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(--sc-highlight);\n}\n\n.container:hover input ~ .checkmark {\n\tbackground-color: white;\n}\n\n.container input:checked ~ .checkmark {\n\tbackground-color: var(--sc-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(--sc-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_item-count\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ 'beam--alert': !isCountComplete }\"\n\t\t\t@click.stop.prevent=\"validate\"\n\t\t\t@input.stop.prevent=\"debouncedValidate\"\n\t\t\t@paste=\"validate\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span v-if=\"denominator\">/{{ denominator }}</span>\n\t\t<span v-if=\"uom\"> {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useDebounceFn } from '@vueuse/core'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst count = defineModel<number>({ required: true })\nconst {\n\tdenominator = 0,\n\tdebounce = 300,\n\teditable = true,\n\tuom = '',\n} = defineProps<{\n\tdenominator?: number\n\tdebounce?: number\n\teditable?: HTMLAttributes['contenteditable']\n\tuom?: string\n}>()\n\nconst isCountComplete = computed(() => denominator !== 0 && count.value === denominator)\n\nconst validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {\n\tconst newValue = Number((payload.target as HTMLElement).innerHTML) || 0\n\tcount.value = denominator ? Math.min(newValue, denominator) : newValue\n}\n\nconst debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)\nconst debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)\n</script>\n\n<style scoped>\n.beam_item-count {\n\tfont-size: 1.3125rem;\n\tcolor: var(--sc-primary-text-color);\n}\n\n.beam_item-count span {\n\tmargin: 0;\n\tpadding: 0;\n\toutline: none;\n}\n</style>\n","<template>\n\t<div class=\"beam_item-count\">\n\t\t<span\n\t\t\t:contenteditable=\"editable\"\n\t\t\t:class=\"{ 'beam--alert': !isCountComplete }\"\n\t\t\t@click.stop.prevent=\"validate\"\n\t\t\t@input.stop.prevent=\"debouncedValidate\"\n\t\t\t@paste=\"validate\">\n\t\t\t{{ count }}\n\t\t</span>\n\t\t<span v-if=\"denominator\">/{{ denominator }}</span>\n\t\t<span v-if=\"uom\"> {{ uom }}</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useDebounceFn } from '@vueuse/core'\nimport { computed, type HTMLAttributes } from 'vue'\n\nconst count = defineModel<number>({ required: true })\nconst {\n\tdenominator = 0,\n\tdebounce = 300,\n\teditable = true,\n\tuom = '',\n} = defineProps<{\n\tdenominator?: number\n\tdebounce?: number\n\teditable?: HTMLAttributes['contenteditable']\n\tuom?: string\n}>()\n\nconst isCountComplete = computed(() => denominator !== 0 && count.value === denominator)\n\nconst validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {\n\tconst newValue = Number((payload.target as HTMLElement).innerHTML) || 0\n\tcount.value = denominator ? Math.min(newValue, denominator) : newValue\n}\n\nconst debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)\nconst debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)\n</script>\n\n<style scoped>\n.beam_item-count {\n\tfont-size: 1.3125rem;\n\tcolor: var(--sc-primary-text-color);\n}\n\n.beam_item-count span {\n\tmargin: 0;\n\tpadding: 0;\n\toutline: none;\n}\n</style>\n","<template>\n\t<a :href=\"to\" class=\"beam_list-anchor\">\n\t\t<slot />\n\t</a>\n</template>\n\n<script setup lang=\"ts\">\nconst { to = '' } = defineProps<{ to?: string }>()\n</script>\n\n<style scoped>\n.beam_list-anchor {\n\ttext-decoration: none;\n\toutline: none;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<a :href=\"to\" class=\"beam_list-anchor\">\n\t\t<slot />\n\t</a>\n</template>\n\n<script setup lang=\"ts\">\nconst { to = '' } = defineProps<{ to?: string }>()\n</script>\n\n<style scoped>\n.beam_list-anchor {\n\ttext-decoration: none;\n\toutline: none;\n\tcolor: var(--sc-primary-text-color);\n}\n</style>\n","<template>\n\t<li tabindex=\"0\" class=\"beam_list-item\">\n\t\t<div class=\"beam_list-text\">\n\t\t\t<label class=\"beam--bold\">{{ listItem.label }}</label>\n\t\t\t<p>{{ listItem.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"listItem.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:debounce=\"listItem.debounce\"\n\t\t\t:denominator=\"listItem.count.of\"\n\t\t\t:editable=\"true\"\n\t\t\t:uom=\"listItem.count.uom\" />\n\t\t<ItemCheck v-if=\"listItem.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ItemCount from './ItemCount.vue'\nimport ItemCheck from './ItemCheck.vue'\nimport type { ListViewItem } from '../types'\n\nconst { item } = defineProps<{ item: ListViewItem }>()\nconst emit = defineEmits<{ update: [item: ListViewItem] }>()\n\nconst listItem = ref(item)\n\nwatch(\n\tlistItem,\n\tvalue => {\n\t\temit('update', value)\n\t},\n\t{ deep: true }\n)\n</script>\n\n<style scoped>\n.beam_list-item {\n\tpadding: 0.625rem;\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tmax-width: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\tjustify-content: space-between;\n\tgap: 1.25rem;\n\tcursor: pointer;\n\toutline: 2px solid transparent;\n\toutline-offset: -1px;\n\n\t&:focus {\n\t\toutline: 2px solid var(--sc-focus-cell-outline);\n\t\tbackground-color: var(--sc-focus-cell-background);\n\t}\n}\n\n.beam_list-text {\n\twidth: 80%;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\tflex-grow: 1;\n\tfont-size: 0.875rem;\n\tcolor: var(--sc-primary-text-color);\n\n\t& label,\n\t& p {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n}\n\n.beam_list-item label {\n\tdisplay: block;\n}\n\n.beam_list-item p {\n\tmargin: 0;\n}\n</style>\n","<template>\n\t<li tabindex=\"0\" class=\"beam_list-item\">\n\t\t<div class=\"beam_list-text\">\n\t\t\t<label class=\"beam--bold\">{{ listItem.label }}</label>\n\t\t\t<p>{{ listItem.description }}</p>\n\t\t</div>\n\n\t\t<ItemCount\n\t\t\tv-if=\"listItem.count\"\n\t\t\tv-model=\"listItem.count.count\"\n\t\t\t:debounce=\"listItem.debounce\"\n\t\t\t:denominator=\"listItem.count.of\"\n\t\t\t:editable=\"true\"\n\t\t\t:uom=\"listItem.count.uom\" />\n\t\t<ItemCheck v-if=\"listItem.hasOwnProperty('checked')\" v-model=\"listItem.checked\" />\n\t</li>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport ItemCount from './ItemCount.vue'\nimport ItemCheck from './ItemCheck.vue'\nimport type { ListViewItem } from '../types'\n\nconst { item } = defineProps<{ item: ListViewItem }>()\nconst emit = defineEmits<{ update: [item: ListViewItem] }>()\n\nconst listItem = ref(item)\n\nwatch(\n\tlistItem,\n\tvalue => {\n\t\temit('update', value)\n\t},\n\t{ deep: true }\n)\n</script>\n\n<style scoped>\n.beam_list-item {\n\tpadding: 0.625rem;\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\tmax-width: 100%;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\tjustify-content: space-between;\n\tgap: 1.25rem;\n\tcursor: pointer;\n\toutline: 2px solid transparent;\n\toutline-offset: -1px;\n\n\t&:focus {\n\t\toutline: 2px solid var(--sc-focus-cell-outline);\n\t\tbackground-color: var(--sc-focus-cell-background);\n\t}\n}\n\n.beam_list-text {\n\twidth: 80%;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\tflex-grow: 1;\n\tfont-size: 0.875rem;\n\tcolor: var(--sc-primary-text-color);\n\n\t& label,\n\t& p {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t}\n}\n\n.beam_list-item label {\n\tdisplay: block;\n}\n\n.beam_list-item p {\n\tmargin: 0;\n}\n</style>\n","<template>\n\t<ul class=\"beam_list-view\">\n\t\t<li v-for=\"item in items\" :key=\"item.barcode || item.label\">\n\t\t\t<template v-if=\"item.linkComponent == 'BeamDayDivider'\">\n\t\t\t\t<BeamDayDivider :item=\"item\"></BeamDayDivider>\n\t\t\t</template>\n\n\t\t\t<template v-else-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\" @update=\"handleUpdate\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\" @update=\"handleUpdate\"></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 BeamDayDivider from './BeamDayDivider.vue'\nimport ListItem from './ListItem.vue'\nimport type { ListViewItem } from '../types'\n\ndefineProps<{ items: ListViewItem[] }>()\nconst emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleUpdate = (item: ListViewItem) => emit('update', item)\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\n<style scoped>\n.beam_list-view {\n\tfont-family: var(--sc-font-family);\n\tlist-style-type: none;\n\tmargin-top: 1px;\n\tmargin-left: var(--sc-list-margin);\n\tmargin-right: var(--sc-list-margin);\n\tpadding: 0;\n}\n\nul.beam_list-view:last-of-type {\n\tpadding-bottom: 2.5em;\n}\n</style>\n","<template>\n\t<ul class=\"beam_list-view\">\n\t\t<li v-for=\"item in items\" :key=\"item.barcode || item.label\">\n\t\t\t<template v-if=\"item.linkComponent == 'BeamDayDivider'\">\n\t\t\t\t<BeamDayDivider :item=\"item\"></BeamDayDivider>\n\t\t\t</template>\n\n\t\t\t<template v-else-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\" @update=\"handleUpdate\"></ListItem>\n\t\t\t\t</component>\n\t\t\t</template>\n\n\t\t\t<template v-else>\n\t\t\t\t<ListItem :item=\"item\" @update=\"handleUpdate\"></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 BeamDayDivider from './BeamDayDivider.vue'\nimport ListItem from './ListItem.vue'\nimport type { ListViewItem } from '../types'\n\ndefineProps<{ items: ListViewItem[] }>()\nconst emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()\n\nonMounted(() => {\n\twindow.addEventListener('scroll', handleScroll)\n})\n\nonUnmounted(() => {\n\twindow.removeEventListener('scroll', handleScroll)\n})\n\nconst handleUpdate = (item: ListViewItem) => emit('update', item)\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\n<style scoped>\n.beam_list-view {\n\tfont-family: var(--sc-font-family);\n\tlist-style-type: none;\n\tmargin-top: 1px;\n\tmargin-left: var(--sc-list-margin);\n\tmargin-right: var(--sc-list-margin);\n\tpadding: 0;\n}\n\nul.beam_list-view:last-of-type {\n\tpadding-bottom: 2.5em;\n}\n</style>\n","<template>\n\t<nav class=\"beam_navbar\">\n\t\t<slot name=\"title\">\n\t\t\t<BeamHeading>TITLE</BeamHeading>\n\t\t</slot>\n\t\t<BeamBtn @click=\"handlePrimaryAction\">\n\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t</BeamBtn>\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\n<style scoped>\n.beam_navbar {\n\tpadding: 0.625rem;\n\tbackground-color: var(--sc-primary-color);\n\tmargin-left: 0;\n\tmin-height: 2em;\n\tmax-height: 2em;\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\talign-content: center;\n\tjustify-content: space-between;\n\talign-items: center;\n\tposition: sticky;\n\ttop: 0;\n\tfont-family: var(--sc-font-family);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\n\t& h1 {\n\t\tmargin-left: 0.625rem;\n\t}\n}\n</style>\n","<template>\n\t<nav class=\"beam_navbar\">\n\t\t<slot name=\"title\">\n\t\t\t<BeamHeading>TITLE</BeamHeading>\n\t\t</slot>\n\t\t<BeamBtn @click=\"handlePrimaryAction\">\n\t\t\t<slot name=\"navbaraction\">Action</slot>\n\t\t</BeamBtn>\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\n<style scoped>\n.beam_navbar {\n\tpadding: 0.625rem;\n\tbackground-color: var(--sc-primary-color);\n\tmargin-left: 0;\n\tmin-height: 2em;\n\tmax-height: 2em;\n\tcolor: var(--sc-primary-text-color);\n\tdisplay: flex;\n\tflex-flow: row nowrap;\n\talign-content: center;\n\tjustify-content: space-between;\n\talign-items: center;\n\tposition: sticky;\n\ttop: 0;\n\tfont-family: var(--sc-font-family);\n\tborder-bottom: 1px solid var(--sc-row-border-color);\n\n\t& h1 {\n\t\tmargin-left: 0.625rem;\n\t}\n}\n</style>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport onScan from 'onscan.js'\nimport type { OnScan } from 'onscan.js'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits<{ scanInstance: [instance: OnScan] }>()\nconst props = defineProps<{\n\tscanHandler: (barcode: string, qty: number) => void\n}>()\n\nonMounted(() => {\n\tconst instance = onScan.attachTo(window, { onScan: props.scanHandler })\n\temit('scanInstance', instance)\n})\n\nonUnmounted(() => {\n\tonScan.detachFrom(window)\n})\n</script>\n","<template>\n\t<div id=\"scan_input\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport onScan from 'onscan.js'\nimport type { OnScan } from 'onscan.js'\nimport { onMounted, onUnmounted } from 'vue'\n\nconst emit = defineEmits<{ scanInstance: [instance: OnScan] }>()\nconst props = defineProps<{\n\tscanHandler: (barcode: string, qty: number) => void\n}>()\n\nonMounted(() => {\n\tconst instance = onScan.attachTo(window, { onScan: props.scanHandler })\n\temit('scanInstance', instance)\n})\n\nonUnmounted(() => {\n\tonScan.detachFrom(window)\n})\n</script>\n","<template>\n\t<div class=\"segmented-display\" :style=\"{ background: getColor(displayColor) }\">\n\t\t<h1 class=\"segmented-display-output\" :style=\"{ color: getColor(textColor) }\">{{ getOutput }}</h1>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { BeamColor } from '../types'\n\nconst {\n\tdisplayInput = 120.2568,\n\tdecimalPlaces = 2,\n\tdisplayColor = 'gray',\n\ttextColor = 'white',\n} = defineProps<{\n\tdisplayInput?: number\n\tdecimalPlaces?: number\n\tdisplayColor?: BeamColor\n\ttextColor?: BeamColor\n}>()\n\nconst getOutput = computed(() => {\n\tif (displayInput === 0) return Number(0).toFixed(decimalPlaces)\n\treturn displayInput.toFixed(decimalPlaces)\n})\n\nconst getColor = (color: BeamColor) => {\n\treturn color?.substring(0, 2) == '--' ? `var(${color})` : color\n}\n</script>\n\n<style scoped>\n.segmented-display {\n\twidth: 100%;\n\tpadding: 1rem;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tbackground: var(--sc-segmented-display-background);\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n.segmented-display-output {\n\ttext-align: right;\n\tfont-family: Segment7, Arimo, sans-serif;\n\tfont-weight: normal;\n\tfont-size: var(--sc-segemented-display-font-size);\n\tpadding: 0;\n\tmargin: 0;\n\tletter-spacing: 0.3rem;\n\tmargin-bottom: -0.7rem;\n\tcolor: var(--sc-segmented-display-color);\n}\n</style>\n","<template>\n\t<div class=\"segmented-display\" :style=\"{ background: getColor(displayColor) }\">\n\t\t<h1 class=\"segmented-display-output\" :style=\"{ color: getColor(textColor) }\">{{ getOutput }}</h1>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { BeamColor } from '../types'\n\nconst {\n\tdisplayInput = 120.2568,\n\tdecimalPlaces = 2,\n\tdisplayColor = 'gray',\n\ttextColor = 'white',\n} = defineProps<{\n\tdisplayInput?: number\n\tdecimalPlaces?: number\n\tdisplayColor?: BeamColor\n\ttextColor?: BeamColor\n}>()\n\nconst getOutput = computed(() => {\n\tif (displayInput === 0) return Number(0).toFixed(decimalPlaces)\n\treturn displayInput.toFixed(decimalPlaces)\n})\n\nconst getColor = (color: BeamColor) => {\n\treturn color?.substring(0, 2) == '--' ? `var(${color})` : color\n}\n</script>\n\n<style scoped>\n.segmented-display {\n\twidth: 100%;\n\tpadding: 1rem;\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tbackground: var(--sc-segmented-display-background);\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n.segmented-display-output {\n\ttext-align: right;\n\tfont-family: Segment7, Arimo, sans-serif;\n\tfont-weight: normal;\n\tfont-size: var(--sc-segemented-display-font-size);\n\tpadding: 0;\n\tmargin: 0;\n\tletter-spacing: 0.3rem;\n\tmargin-bottom: -0.7rem;\n\tcolor: var(--sc-segmented-display-color);\n}\n</style>\n","<template>\n\t<div class=\"two-column\" :style=\"{ justifyContent, alignItems }\">\n\t\t<div class=\"column column-left\">\n\t\t\t<slot name=\"left\"></slot>\n\t\t</div>\n\t\t<div class=\"column column-right\">\n\t\t\t<slot name=\"right\"></slot>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue'\n\nconst { justifyContent = 'space-between', alignItems = 'flex-start' } = defineProps<{\n\tjustifyContent?: CSSProperties['justifyContent']\n\talignItems?: CSSProperties['alignItems']\n}>()\n</script>\n\n<style scoped>\n.two-column {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tgap: 1rem;\n\n\t@media screen and (max-width: 400px) {\n\t\tflex-direction: column;\n\t\tgap: 0;\n\t}\n}\n\n.column {\n\tflex-grow: 1;\n\twidth: 50%;\n\t@media screen and (max-width: 400px) {\n\t\twidth: 100%;\n\t}\n}\n\n.column-right {\n\ttext-align: right;\n\t@media screen and (max-width: 400px) {\n\t\ttext-align: left;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"two-column\" :style=\"{ justifyContent, alignItems }\">\n\t\t<div class=\"column column-left\">\n\t\t\t<slot name=\"left\"></slot>\n\t\t</div>\n\t\t<div class=\"column column-right\">\n\t\t\t<slot name=\"right\"></slot>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue'\n\nconst { justifyContent = 'space-between', alignItems = 'flex-start' } = defineProps<{\n\tjustifyContent?: CSSProperties['justifyContent']\n\talignItems?: CSSProperties['alignItems']\n}>()\n</script>\n\n<style scoped>\n.two-column {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: baseline;\n\tgap: 1rem;\n\n\t@media screen and (max-width: 400px) {\n\t\tflex-direction: column;\n\t\tgap: 0;\n\t}\n}\n\n.column {\n\tflex-grow: 1;\n\twidth: 50%;\n\t@media screen and (max-width: 400px) {\n\t\twidth: 100%;\n\t}\n}\n\n.column-right {\n\ttext-align: right;\n\t@media screen and (max-width: 400px) {\n\t\ttext-align: left;\n\t}\n}\n</style>\n","<template>\n\t<div class=\"arrow-icon\" :class=\"{ open }\">\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { open } = defineProps<{ open: boolean }>()\n</script>\n\n<style scoped>\nsvg {\n\twidth: 100%;\n\toverflow: visible;\n\tfill: var(--sc-primary-text-color);\n}\n\n.arrow-icon {\n\twidth: 0.4rem;\n\ttransform: rotate(0);\n\ttransform-origin: center;\n\tposition: relative;\n\ttransition: all 0.1s ease-in-out;\n\tmargin: 0.5rem;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.open {\n\ttransform: rotate(90deg);\n}\n</style>\n","<template>\n\t<div class=\"arrow-icon\" :class=\"{ open }\">\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 35.36 70.71\">\n\t\t\t<polygon points=\"0 70.71 0 0 35.36 35.36 0 70.71\" />\n\t\t</svg>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nconst { open } = defineProps<{ open: boolean }>()\n</script>\n\n<style scoped>\nsvg {\n\twidth: 100%;\n\toverflow: visible;\n\tfill: var(--sc-primary-text-color);\n}\n\n.arrow-icon {\n\twidth: 0.4rem;\n\ttransform: rotate(0);\n\ttransform-origin: center;\n\tposition: relative;\n\ttransition: all 0.1s ease-in-out;\n\tmargin: 0.5rem;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.open {\n\ttransform: rotate(90deg);\n}\n</style>\n","import mqtt, { type MqttClient } from 'mqtt'\nimport { onMounted, onUnmounted, ref } from 'vue'\n\nimport { IMqttStream } from '../types'\n\n/**\n * Use MQTT stream\n * @param options - MQTT stream options\n * @returns MQTT stream messages\n * @beta\n */\nexport const useMqttStream = async (options: IMqttStream) => {\n\tconst messages = ref<Record<string, string[]>>({})\n\n\tif (options.host && options.port) {\n\t\tconst portActive = await isPortActive(options.host, options.port)\n\t\tif (!portActive) {\n\t\t\treturn { messages }\n\t\t}\n\t}\n\n\tconst client = ref<MqttClient>()\n\n\tonMounted(() => {\n\t\tclient.value = mqtt.connect(options)\n\n\t\tif (!options.topics) {\n\t\t\toptions.topics = ['#']\n\t\t}\n\n\t\tfor (const topic of options.topics) {\n\t\t\tclient.value.subscribe(topic, err => {\n\t\t\t\tif (err) {\n\t\t\t\t\tthrow err\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\n\t\tclient.value.on('message', (topic, message) => {\n\t\t\tif (!messages.value[topic]) {\n\t\t\t\tmessages.value[topic] = []\n\t\t\t}\n\n\t\t\tmessages.value[topic].push(message.toString())\n\t\t})\n\t})\n\n\tonUnmounted(() => {\n\t\tclient.value?.end()\n\t})\n\n\treturn { messages }\n}\n\n/**\n * Check if a local port has a service running\n * @param host the host to check\n * @param port the port to check\n * @returns true if the port has a service running, false otherwise\n *\n * @beta\n */\nexport const isPortActive = async (host: string, port: number) => {\n\ttry {\n\t\tconst controller = new AbortController()\n\t\t// Set a timeout of 2 seconds\n\t\tconst timeoutId = setTimeout(() => controller.abort(), 2000)\n\n\t\ttry {\n\t\t\tawait fetch(`${host}:${port}`, {\n\t\t\t\tmode: 'no-cors', // This allows checking without CORS issues\n\t\t\t\tsignal: controller.signal,\n\t\t\t})\n\n\t\t\tclearTimeout(timeoutId)\n\t\t\t// If we get any response, the port is in use\n\t\t\treturn true\n\t\t} catch (error) {\n\t\t\tclearTimeout(timeoutId)\n\t\t\tif (error instanceof DOMException && error.name === 'AbortError') {\n\t\t\t\t// Timeout - port is probably not in use\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\t// For connection refused errors, we need to check the error message\n\t\t\t// as different browsers handle this differently\n\t\t\tconst errorString = String(error)\n\t\t\tif (\n\t\t\t\terrorString.includes('NetworkError') ||\n\t\t\t\terrorString.includes('Failed to fetch') ||\n\t\t\t\terrorString.includes('net::ERR_CONNECTION_REFUSED')\n\t\t\t) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\t// If we get here, there might be something running on the port\n\t\t\treturn true\n\t\t}\n\t} catch {\n\t\treturn false\n\t}\n}\n","import { App } from 'vue'\n\nimport ActionFooter from './components/ActionFooter.vue'\nimport BeamArrow from './components/BeamArrow.vue'\nimport BeamBtn from './components/BeamBtn.vue'\nimport BeamDayDivider from './components/BeamDayDivider.vue'\nimport BeamFilter from './components/BeamFilter.vue'\nimport BeamFilterOption from './components/BeamFilterOption.vue'\nimport BeamHeading from './components/BeamHeading.vue'\nimport BeamMetadata from './components/BeamMetadata.vue'\nimport BeamModal from './components/BeamModal.vue'\nimport BeamModalOutlet from './components/BeamModalOutlet.vue'\nimport BeamProgress from './components/BeamProgress.vue'\nimport Confirm from './components/Confirm.vue'\nimport FixedTop from './components/FixedTop.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 SegmentedDisplay from './components/SegmentedDisplay.vue'\nimport SplitColumn from './components/SplitColumn.vue'\nimport ToggleArrow from './components/ToggleArrow.vue'\nimport { useMqttStream } from './composables/mqtt'\nexport type * from './types'\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('BeamArrow', BeamArrow)\n\tapp.component('BeamBtn', BeamBtn)\n\tapp.component('BeamDayDivider', BeamDayDivider)\n\tapp.component('BeamFilter', BeamFilter)\n\tapp.component('BeamFilterOption', BeamFilterOption)\n\tapp.component('BeamHeading', BeamHeading)\n\tapp.component('BeamMetadata', BeamMetadata)\n\tapp.component('BeamModal', BeamModal)\n\tapp.component('BeamModalOutlet', BeamModalOutlet)\n\tapp.component('BeamProgress', BeamProgress)\n\tapp.component('Confirm', Confirm)\n\tapp.component('FixedTop', FixedTop)\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\tapp.component('SegmentedDisplay', SegmentedDisplay)\n\tapp.component('SplitColumn', SplitColumn)\n\tapp.component('ToggleArrow', ToggleArrow)\n}\n\nexport {\n\tActionFooter,\n\tBeamArrow,\n\tBeamBtn,\n\tBeamDayDivider,\n\tBeamFilter,\n\tBeamFilterOption,\n\tBeamHeading,\n\tBeamMetadata,\n\tBeamModal,\n\tBeamModalOutlet,\n\tBeamProgress,\n\tConfirm,\n\tFixedTop,\n\tItemCheck,\n\tItemCount,\n\tListAnchor,\n\tListItem,\n\tListView,\n\tNavbar,\n\tScanInput,\n\tSegmentedDisplay,\n\tSplitColumn,\n\tToggleArrow,\n\tinstall,\n\tuseMqttStream,\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BeamDayDivider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/BeamDayDivider.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BeamDayDivider.vue.d.ts","sourceRoot":"","sources":["../../../src/components/BeamDayDivider.vue"],"names":[],"mappings":"AAyEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,KAAK,WAAW,GAAG;IAAE,OAAO,IAAI,GAAG,CAAA;CAAE,CAAC;AAEtC,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAC;AA4D1C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|