[beam] add debounce to list item input

beam/package.json

@@ -40,6 +40,7 @@
 		"test:ui": "vitest --ui"
 	},
 	"dependencies": {
+		"@vueuse/core": "^11.1.0",
 		"mqtt": "^5.10.1",
 		"onscan.js": "^1.5.2",
 		"vue": "^3.5.6"

beam/src/components/ItemCount.vue

@@ -3,8 +3,9 @@
 		<span
 			:contenteditable="editable"
 			:class="{ 'beam--alert': !isCountComplete }"
-			@input="handleInput"
-			@click="handleInput">
+			@click.stop.prevent="validate"
+			@input.stop.prevent="debouncedValidate"
+			@paste="validate">
 			{{ count }}
 		</span>
 		<span>/{{ denominator }}</span>
@@ -13,25 +14,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, type HTMLAttributes } from 'vue'
 
 const count = defineModel<number>({ required: true })
 const {
 	denominator,
-	uom = '',
+	debounce = 300,
 	editable = true,
+	uom = '',
 } = defineProps<{
 	denominator: number
+	debounce?: number
+	editable?: HTMLAttributes['contenteditable']
 	uom?: string
-	editable?: boolean
 }>()
 
 const isCountComplete = computed(() => count.value === denominator)
 
-const handleInput = (event: InputEvent | MouseEvent) => {
-	event.preventDefault()
-	event.stopPropagation()
-	const newValue = Number((event.target as HTMLElement).innerHTML) || 0
+const validate = (payload: ClipboardEvent | InputEvent | MouseEvent) => {
+	const newValue = Number((payload.target as HTMLElement).innerHTML) || 0
 	count.value = Math.min(newValue, denominator)
 }
+
+const debouncedRequest = useDebounceFn((payload: InputEvent) => validate(payload), debounce)
+const debouncedValidate = async (payload: InputEvent) => await debouncedRequest(payload)
 </script>

beam/src/components/ListItem.vue

@@ -8,9 +8,10 @@
 		<ItemCount
 			v-if="listItem.count"
 			v-model="listItem.count.count"
+			:debounce="listItem.debounce"
 			:denominator="listItem.count.of"
-			:uom="listItem.count.uom"
-			:editable="true" />
+			:editable="true"
+			:uom="listItem.count.uom" />
 		<ItemCheck v-if="listItem.hasOwnProperty('checked')" v-model="listItem.checked" />
 	</li>
 </template>
@@ -20,19 +21,9 @@ import { ref } from 'vue'
 
 import ItemCount from '@/components/ItemCount.vue'
 import ItemCheck from '@/components/ItemCheck.vue'
+import type { ListViewItem } from '@/types'
 
-const { item } = defineProps<{
-	item: {
-		label: string
-		description: string
-		count?: {
-			count: number
-			of: number
-			uom: string
-		}
-		checked?: boolean
-	}
-}>()
+const { item } = defineProps<{ item: ListViewItem }>()
 
 const listItem = ref(item)
 </script>

beam/src/components/ListView.vue

@@ -17,22 +17,9 @@
 import { onMounted, onUnmounted } from 'vue'
 
 import ListItem from '@/components/ListItem.vue'
+import type { ListViewItem } from '@/types'
 
-defineProps<{
-	items: {
-		label: string
-		description: string
-		count?: {
-			count: number
-			of: number
-			uom: string
-		}
-		checked?: boolean
-		linkComponent?: string
-		route?: string
-	}[]
-}>()
-
+defineProps<{ items: ListViewItem[] }>()
 const emit = defineEmits<{ scrollbottom: [] }>()
 
 onMounted(() => {

beam/src/types/index.ts

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

common/changes/@stonecrop/beam/feat-beam-toast-notify_2024-10-28-18-12.json

@@ -3,7 +3,7 @@
     {
       "packageName": "@stonecrop/beam",
       "comment": "added toast notifications",
-      "type": "none"
+      "type": "patch"
     }
   ],
   "packageName": "@stonecrop/beam"

common/changes/@stonecrop/beam/fix-list-count-debounce_2024-11-14-09-45.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "add debounce to list item input",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}

common/changes/@stonecrop/themes/feat-beam-toast-notify_2024-10-28-18-12.json

@@ -3,7 +3,7 @@
     {
       "packageName": "@stonecrop/themes",
       "comment": "added warning color variable",
-      "type": "none"
+      "type": "patch"
     }
   ],
   "packageName": "@stonecrop/themes"

examples/beam/default.story.vue

@@ -34,7 +34,7 @@
 							<BeamHeading> WO#2024-01-00001 <span class="beam--normal">Ambrosia Pie</span> </BeamHeading>
 						</template>
 						<template #right>
-							<ItemCount denominator="10" model-value="5" />
+							<ItemCount denominator="20" model-value="5" />
 						</template>
 					</SplitColumn>
 					<BeamProgress :complete="workOrder.complete" progress-message="In Transit" />