fix: modify date formatter

beam/src/components/BeamDayDivider.vue

@@ -1,28 +1,37 @@
 <template>
 	<div class="beam_day-divider">
-		<h2>{{ getDate }}</h2>
+		<h2>{{ date }}</h2>
 	</div>
+
 	<slot></slot>
 </template>
+
 <script setup lang="ts">
-import { defineProps, ref, computed } from 'vue'
+import { defineProps, computed } from 'vue'
 
 import type { ListViewItem } from '@/types'
 
+defineSlots<{ default(): any }>()
 const { item } = defineProps<{ item: ListViewItem }>()
 
-const getDate = computed(() => {
-	// 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 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 item.date.toISOString()
+				return dateObj.toISOString()
 		}
 	}
-	return item.date.toDateString()
+	return dateObj.toDateString()
 })
 </script>
+
 <style scoped>
 .beam_day-divider {
 	text-align: left;
@@ -42,6 +51,7 @@ const getDate = computed(() => {
 		padding: 0;
 	}
 }
+
 .beam_day-divider:first-of-type {
 	margin-top: 0;
 }

beam/src/components/ListView.vue

@@ -4,6 +4,7 @@
 			<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>
@@ -20,9 +21,9 @@
 <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'
-import BeamDayDivider from '@/components/BeamDayDivider.vue'
 
 defineProps<{ items: ListViewItem[] }>()
 const emit = defineEmits<{ update: [item: ListViewItem]; scrollbottom: [] }>()

beam/src/index.ts

@@ -23,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,19 +34,15 @@ import 'themes/beam.css'
 function install(app: App /* options */) {
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamArrow', BeamArrow)
-	app.component('BeamArrow', BeamArrow)
-	app.component('BeamBtn', BeamBtn)
 	app.component('BeamBtn', BeamBtn)
 	app.component('BeamDayDivider', BeamDayDivider)
 	app.component('BeamFilter', BeamFilter)
 	app.component('BeamFilterOption', BeamFilterOption)
 	app.component('BeamHeading', BeamHeading)
-	app.component('BeamHeading', BeamHeading)
 	app.component('BeamMetadata', BeamMetadata)
 	app.component('BeamModal', BeamModal)
 	app.component('BeamModalOutlet', BeamModalOutlet)
 	app.component('BeamProgress', BeamProgress)
-	app.component('BeamProgress', BeamProgress)
 	app.component('Confirm', Confirm)
 	app.component('FixedTop', FixedTop)
 	app.component('ItemCheck', ItemCheck)

beam/src/types/index.ts

@@ -1,15 +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?: Date
+	date?: string
 	dateFormat?: string
+	debounce?: number
+	linkComponent?: string
+	route?: string
 }

common/reviews/api/beam.api.md

@@ -23,6 +23,7 @@ import ItemCount from '@/components/ItemCount.vue';
 import ListAnchor from '@/components/ListAnchor.vue';
 import ListItem from '@/components/ListItem.vue';
 import ListView from '@/components/ListView.vue';
+import { ListViewItem } from '@/types';
 import Navbar from '@/components/Navbar.vue';
 import ScanInput from '@/components/ScanInput.vue';
 import SplitColumn from '@/components/SplitColumn.vue';
@@ -68,6 +69,8 @@ export { ListItem }
 
 export { ListView }
 
+export { ListViewItem }
+
 export { Navbar }
 
 export { ScanInput }

examples/beam/default.story.vue

@@ -62,7 +62,7 @@
 				<template #navbaraction>Done</template>
 			</Navbar>
 
-			<ListView :items="items" @scrollbottom="loadMoreItems" />
+			<ListView :items="itemsWithDivider" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />
 			<BeamModalOutlet @confirmmodal="confirmModal" @closemodal="closeModal"></BeamModalOutlet>
@@ -130,6 +130,7 @@
 						]" />
 				</BeamFilter>
 			</FixedTop>
+
 			<ListView :items="items" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
 			<ScanInput :scanHandler="incrementItemCount" />
@@ -139,13 +140,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onBeforeMount } from 'vue'
+import type { ListViewItem } from '@stonecrop/beam'
+import { ref, reactive, computed } from 'vue'
 import { type ToastPosition, useToast } from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-default.css'
 
 import data from './data/items.json'
 
-const items = ref(data)
+const items = ref<ListViewItem[]>(data)
+const showModal = ref(false)
 const workOrder = reactive({
 	orderNumber: 'WO#2024-01-00001',
 	product: 'Ambrosia Pie',
@@ -154,10 +157,6 @@ const workOrder = reactive({
 	complete: false,
 })
 
-onBeforeMount(() => {
-	items.splice(5, 0, { date: new Date('2024-11-12'), linkComponent: 'BeamDayDivider', dateFormat: 'default' })
-	items.splice(9, 0, { date: new Date('2024-10-18'), linkComponent: 'BeamDayDivider', dateFormat: 'iso' })
-})
 // Start Toast //
 const toast = useToast()
 const toastType = ref('default')
@@ -175,11 +174,20 @@ const showNotification = () => {
 }
 // End Toast //
 
-const showModal = ref(false)
-
-const handlePrimaryAction = () => {
-	showModal.value = true
-}
+const itemsWithDivider = computed(() => {
+	const itemsCopy = [...items.value]
+	itemsCopy.splice(3, 0, {
+		date: '2024-11-12T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'default',
+	})
+	itemsCopy.splice(7, 0, {
+		date: '2024-10-18T00:00:00.000Z',
+		linkComponent: 'BeamDayDivider',
+		dateFormat: 'iso',
+	})
+	return itemsCopy
+})
 
 const incrementItemCount = (barcode: string, qty: number) => {
 	// return indices of the matching barcode
@@ -263,4 +271,5 @@ const loadMoreItems = () => {
 
 const confirmModal = () => (showModal.value = false)
 const closeModal = () => (showModal.value = false)
+const handlePrimaryAction = () => (showModal.value = true)
 </script>