@stonecrop/beam 0.2.56 → 0.2.58

package/dist/index.js

@@ -1,6 +1,7 @@
 import ActionFooter from '@/components/ActionFooter.vue';
 import BeamArrow from '@/components/BeamArrow.vue';
 import BeamBtn from '@/components/BeamBtn.vue';
+import BeamDayDivider from '@/components/BeamDayDivider.vue';
 import BeamFilter from '@/components/BeamFilter.vue';
 import BeamFilterOption from '@/components/BeamFilterOption.vue';
 import BeamHeading from '@/components/BeamHeading.vue';
@@ -30,6 +31,7 @@ function install(app /* options */) {
     app.component('ActionFooter', ActionFooter);
     app.component('BeamArrow', BeamArrow);
     app.component('BeamBtn', BeamBtn);
+    app.component('BeamDayDivider', BeamDayDivider);
     app.component('BeamFilter', BeamFilter);
     app.component('BeamFilterOption', BeamFilterOption);
     app.component('BeamHeading', BeamHeading);
@@ -49,4 +51,4 @@ function install(app /* options */) {
     app.component('SplitColumn', SplitColumn);
     app.component('ToggleArrow', ToggleArrow);
 }
-export { ActionFooter, BeamArrow, BeamBtn, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };
+export { ActionFooter, BeamArrow, BeamBtn, BeamDayDivider, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };

package/dist/src/index.d.ts

@@ -2,6 +2,7 @@ import { App } from 'vue';
 import ActionFooter from '@/components/ActionFooter.vue';
 import BeamArrow from '@/components/BeamArrow.vue';
 import BeamBtn from '@/components/BeamBtn.vue';
+import BeamDayDivider from '@/components/BeamDayDivider.vue';
 import BeamFilter from '@/components/BeamFilter.vue';
 import BeamFilterOption from '@/components/BeamFilterOption.vue';
 import BeamHeading from '@/components/BeamHeading.vue';
@@ -21,6 +22,7 @@ import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
 import ToggleArrow from '@/components/ToggleArrow.vue';
 import { useMqttStream } from '@/composables/mqtt';
+export type { ListViewItem } from '@/types';
 import 'themes/beam.css';
 /**
  * Install all Beam components
@@ -28,5 +30,5 @@ import 'themes/beam.css';
  * @public
  */
 declare function install(app: App): void;
-export { ActionFooter, BeamArrow, BeamBtn, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };
+export { ActionFooter, BeamArrow, BeamBtn, BeamDayDivider, BeamFilter, BeamFilterOption, BeamHeading, BeamMetadata, BeamModal, BeamModalOutlet, BeamProgress, Confirm, FixedTop, ItemCheck, ItemCount, ListAnchor, ListItem, ListView, Navbar, ScanInput, SplitColumn, ToggleArrow, install, useMqttStream, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,iBAAiB,CAAA;AAExB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAsBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAC3C,OAAO,iBAAiB,CAAA;AAExB;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAuBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}

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

@@ -2,13 +2,15 @@ export type ListViewItem = {
     description: string;
     label: string;
     checked?: boolean;
-    debounce?: number;
-    linkComponent?: string;
-    route?: string;
     count?: {
         count: number;
         of: number;
         uom: string;
     };
+    date?: string;
+    dateFormat?: string;
+    debounce?: number;
+    linkComponent?: string;
+    route?: string;
 };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;KACX,CAAA;CACD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;KACX,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}

package/package.json

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

package/src/components/ActionFooter.vue

@@ -1,9 +1,9 @@
 <template>
 	<footer class="beam_action-footer">
 		<span class="footer-action-wrapper">
-			<button class="beam_btn" @click="handleFooterAction">
+			<BeamBtn @click="handleFooterAction">
 				<slot />
-			</button>
+			</BeamBtn>
 		</span>
 	</footer>
 </template>
@@ -15,3 +15,17 @@ const handleFooterAction = () => {
 	emit('click')
 }
 </script>
+
+<style scoped>
+.beam_action-footer {
+	margin-left: 0;
+	background: linear-gradient(180deg, transparent 0%, white 100%);
+	color: var(--sc-primary-text-color);
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	padding: 0.625rem;
+	text-align: center;
+}
+</style>

package/src/components/BeamBtn.vue

@@ -3,3 +3,21 @@
 		<slot>Action</slot>
 	</button>
 </template>
+
+<style scoped>
+.beam_btn {
+	font-size: 0.875rem;
+	text-align: center;
+	padding: 0.3125rem 0.75rem;
+	border: 1px solid var(--sc-btn-border);
+	color: var(--sc-btn-label-color);
+	background-color: var(--sc-btn-color);
+	cursor: pointer;
+	font-family: var(--sc-font-family);
+
+	&:hover,
+	&:active {
+		background-color: var(--sc-btn-hover);
+	}
+}
+</style>

package/src/components/BeamDayDivider.vue

@@ -0,0 +1,56 @@
+<template>
+	<div class="beam_day-divider">
+		<h2>{{ date }}</h2>
+	</div>
+
+	<slot></slot>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+
+import type { ListViewItem } from '@/types'
+
+defineSlots<{ default(): any }>()
+const { item } = defineProps<{ item: ListViewItem }>()
+
+const date = computed(() => {
+	if (!item.date || isNaN(Date.parse(item.date))) {
+		return item.date
+	}
+
+	// if needed, the user can specify a Date format flag that will dictate how the output is formatted,
+	// defaults to toDateString(); using switch/case here in case more values wanted to be added
+	const dateObj = new Date(item.date)
+	if (item.dateFormat) {
+		switch (item.dateFormat.toLowerCase()) {
+			case 'iso':
+				return dateObj.toISOString()
+		}
+	}
+	return dateObj.toDateString()
+})
+</script>
+
+<style scoped>
+.beam_day-divider {
+	text-align: left;
+	padding: 1rem;
+	background: var(--sc-cell-changed-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
+	box-sizing: border-box;
+	margin: 1rem 0;
+
+	& h2 {
+		text-align: left;
+		font-size: 1rem;
+		color: var(--sc-primary-text-color);
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.beam_day-divider:first-of-type {
+	margin-top: 0;
+}
+</style>

package/src/components/BeamHeading.vue

@@ -3,3 +3,15 @@
 		<slot></slot>
 	</h1>
 </template>
+
+<style scoped>
+.beam_header {
+	border: 1px solid transparent;
+	text-align: left;
+	font-size: 1.125rem;
+	color: var(--sc-primary-text-color);
+	margin: 0;
+	padding: 0;
+	font-family: var(--sc-font-family);
+}
+</style>

package/src/components/BeamMetadata.vue

@@ -36,3 +36,75 @@ defineProps<{
 	}
 }>()
 </script>
+
+<style scoped>
+.beam_metadata {
+	/* margin:3.125rem; */
+	box-sizing: border-box;
+	border: 1px solid black;
+	display: flex;
+	flex-direction: column;
+	max-height: 100vh;
+	color: var(--sc-primary-text-color);
+	font-family: var(--sc-font-family);
+}
+.beam_metadata_content {
+	padding-top: 10px;
+}
+.beam_metadata_header {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	padding: 0px 30px 0px 30px;
+	justify-content: space-between;
+}
+.beam_metadata_count {
+	font-size: 1.5rem;
+
+	& p {
+		margin: 0;
+	}
+}
+.beam_metadata_header-order-num {
+	font-weight: bold;
+	font-size: 1.5rem;
+}
+.beam_metadata_block {
+	padding: 0px 30px;
+	margin: 10px 0;
+}
+
+.beam_metadata_shipping {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	justify-content: space-between;
+
+	& p {
+		line-height: 1.5rem;
+	}
+}
+@media screen and (max-width: 600px) {
+	.beam_metadata_shipping {
+		flex-direction: column;
+	}
+}
+
+.beam_metadata_component_header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: baseline;
+}
+.beam_metadata_components {
+	overflow: scroll;
+}
+</style>
+<style>
+.beam_metadata_heading {
+	font-size: 1.125rem;
+	font-weight: bold;
+	margin: 0.625rem 0;
+	color: var(--sc-primary-text-color);
+}
+</style>

package/src/components/BeamModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<portal to="beam_modal_outlet">
 		<div class="beam_modal" v-show="showModal">
-			<button class="beam_btn" @click="$emit('closemodal')">Close Modal</button>
+			<BeamBtn @click="$emit('closemodal')">Close Modal</BeamBtn>
 			<slot @closemodal="$emit('closemodal')" @confirmmodal="$emit('confirmmodal')"></slot>
 		</div>
 	</portal>
@@ -10,3 +10,18 @@
 <script setup lang="ts">
 defineProps<{ showModal: boolean }>()
 </script>
+
+<style scoped>
+.beam_modal {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(2px);
+	z-index: 1000;
+	text-align: center;
+	padding: 1.25rem;
+}
+</style>

package/src/components/Confirm.vue

@@ -1,7 +1,29 @@
 <template>
 	<div class="beam_modal-confirm">
 		<h2>Would you like to continue?</h2>
-		<button class="beam_btn" @click="$emit('confirmmodal')">Yes</button>
-		<button class="beam_btn" @click="$emit('closemodal')">No</button>
+		<BeamBtn @click="$emit('confirmmodal')">Yes</BeamBtn>
+		<BeamBtn @click="$emit('confirmmodal')">No</BeamBtn>
 	</div>
 </template>
+
+<style scoped>
+.beam_modal-confirm {
+	background: #ffffff;
+	padding: 1.25rem;
+	width: 80%;
+	max-width: 400px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	& button {
+		margin: 0.625rem;
+	}
+	& h2 {
+		border-bottom: 1px solid var(--sc-row-border-color);
+		padding-bottom: 0.625rem;
+		color: var(--sc-primary-text-color);
+	}
+}
+</style>

package/src/components/ItemCount.vue

@@ -40,3 +40,16 @@ const validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {
 const debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)
 const debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)
 </script>
+
+<style scoped>
+.beam_item-count {
+	font-size: 1.3125rem;
+	color: var(--sc-primary-text-color);
+}
+
+.beam_item-count span {
+	margin: 0;
+	padding: 0;
+	outline: none;
+}
+</style>

package/src/components/ListAnchor.vue

@@ -7,3 +7,11 @@
 <script setup lang="ts">
 const { to = '' } = defineProps<{ to?: string }>()
 </script>
+
+<style scoped>
+.beam_list-anchor {
+	text-decoration: none;
+	outline: none;
+	color: var(--sc-primary-text-color);
+}
+</style>

package/src/components/ListItem.vue

@@ -36,3 +36,50 @@ watch(
 	{ deep: true }
 )
 </script>
+
+<style scoped>
+.beam_list-item {
+	padding: 0.625rem;
+	border-bottom: 1px solid var(--sc-row-border-color);
+	max-width: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	gap: 1.25rem;
+	cursor: pointer;
+	outline: 2px solid transparent;
+	outline-offset: -1px;
+
+	&:focus {
+		outline: 2px solid var(--sc-focus-cell-outline);
+		background-color: var(--sc-focus-cell-background);
+	}
+}
+
+.beam_list-text {
+	width: 80%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	flex-grow: 1;
+	font-size: 0.875rem;
+	color: var(--sc-primary-text-color);
+
+	& label,
+	& p {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		width: 100%;
+		display: block;
+	}
+}
+
+.beam_list-item label {
+	display: block;
+}
+
+.beam_list-item p {
+	margin: 0;
+}
+</style>

package/src/components/ListView.vue

@@ -1,11 +1,16 @@
 <template>
 	<ul class="beam_list-view">
 		<li v-for="item in items" :key="item.label">
-			<template v-if="item.linkComponent">
+			<template v-if="item.linkComponent == 'BeamDayDivider'">
+				<BeamDayDivider :item="item"></BeamDayDivider>
+			</template>
+
+			<template v-else-if="item.linkComponent">
 				<component :is="item.linkComponent" :to="item.route" tabindex="-1">
 					<ListItem :item="item" @update="handleUpdate"></ListItem>
 				</component>
 			</template>
+
 			<template v-else>
 				<ListItem :item="item" @update="handleUpdate"></ListItem>
 			</template>
@@ -16,6 +21,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue'
 
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 import ListItem from '@/components/ListItem.vue'
 import type { ListViewItem } from '@/types'
 
@@ -39,3 +45,18 @@ const handleScroll = () => {
 	}
 }
 </script>
+
+<style scoped>
+.beam_list-view {
+	list-style-type: none;
+	margin: var(--sc-list-margin);
+	padding: 0;
+	/* padding-bottom: 2.5em; */
+	margin-top: 1px;
+	font-family: var(--sc-font-family);
+}
+
+ul.beam_list-view:last-of-type {
+	padding-bottom: 2.5em;
+}
+</style>

package/src/components/Navbar.vue

@@ -3,9 +3,9 @@
 		<slot name="title">
 			<BeamHeading>TITLE</BeamHeading>
 		</slot>
-		<button class="navbar-action beam_btn" @click="handlePrimaryAction">
+		<BeamBtn @click="handlePrimaryAction">
 			<slot name="navbaraction">Action</slot>
-		</button>
+		</BeamBtn>
 	</nav>
 </template>
 
@@ -16,3 +16,27 @@ const handlePrimaryAction = () => {
 	emit('click')
 }
 </script>
+
+<style scoped>
+.beam_navbar {
+	padding: 0.625rem;
+	background-color: var(--sc-primary-color);
+	margin-left: 0;
+	min-height: 2em;
+	max-height: 2em;
+	color: var(--sc-primary-text-color);
+	display: flex;
+	flex-flow: row nowrap;
+	align-content: center;
+	justify-content: space-between;
+	align-items: center;
+	position: sticky;
+	top: 0;
+	font-family: var(--sc-font-family);
+	border-bottom: 1px solid var(--sc-row-border-color);
+
+	& h1 {
+		margin-left: 0.625rem;
+	}
+}
+</style>

package/src/index.ts

@@ -3,6 +3,7 @@ import { App } from 'vue'
 import ActionFooter from '@/components/ActionFooter.vue'
 import BeamArrow from '@/components/BeamArrow.vue'
 import BeamBtn from '@/components/BeamBtn.vue'
+import BeamDayDivider from '@/components/BeamDayDivider.vue'
 import BeamFilter from '@/components/BeamFilter.vue'
 import BeamFilterOption from '@/components/BeamFilterOption.vue'
 import BeamHeading from '@/components/BeamHeading.vue'
@@ -22,6 +23,7 @@ import ScanInput from '@/components/ScanInput.vue'
 import SplitColumn from '@/components/SplitColumn.vue'
 import ToggleArrow from '@/components/ToggleArrow.vue'
 import { useMqttStream } from '@/composables/mqtt'
+export type { ListViewItem } from '@/types'
 import 'themes/beam.css'
 
 /**
@@ -33,6 +35,7 @@ function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamArrow', BeamArrow)
 	app.component('BeamBtn', BeamBtn)
+	app.component('BeamDayDivider', BeamDayDivider)
 	app.component('BeamFilter', BeamFilter)
 	app.component('BeamFilterOption', BeamFilterOption)
 	app.component('BeamHeading', BeamHeading)
@@ -57,6 +60,7 @@ export {
 	ActionFooter,
 	BeamArrow,
 	BeamBtn,
+	BeamDayDivider,
 	BeamFilter,
 	BeamFilterOption,
 	BeamHeading,

package/src/types/index.ts

@@ -1,13 +1,16 @@
 export type ListViewItem = {
 	description: string
 	label: string
+
 	checked?: boolean
-	debounce?: number
-	linkComponent?: string
-	route?: string
 	count?: {
 		count: number
 		of: number
 		uom: string
 	}
+	date?: string
+	dateFormat?: string
+	debounce?: number
+	linkComponent?: string
+	route?: string
 }