@stonecrop/beam 0.2.57 → 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.57",
+  "version": "0.2.58",
   "license": "MIT",
   "type": "module",
   "author": {

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/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'
 
@@ -45,8 +51,12 @@ const handleScroll = () => {
 	list-style-type: none;
 	margin: var(--sc-list-margin);
 	padding: 0;
-	padding-bottom: 2.5em;
+	/* 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/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
 }