@stonecrop/beam 0.2.53 → 0.2.54

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

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

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -29,6 +29,7 @@
     "src/*"
   ],
   "dependencies": {
+    "@vueuse/core": "^11.1.0",
     "mqtt": "^5.10.1",
     "onscan.js": "^1.5.2",
     "vue": "^3.5.6"

package/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>

package/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>

package/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(() => {

package/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
+	}
+}