@stonecrop/beam 0.2.52 → 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.52",
+  "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/BeamFilter.vue

@@ -45,12 +45,12 @@ const getTotalHeight = (el: HTMLDivElement) => {
 	overflow: hidden;
 	box-sizing: border-box;
 	transition: all 0.2s ease-in-out;
-	border-bottom: 1px solid var(--row-border-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
 	background: white;
 }
 
 .beam_filters-heading {
-	background: var(--primary-color);
+	background: var(--sc-primary-color);
 	cursor: pointer;
 	display: flex;
 	align-items: center;

package/src/components/BeamFilterOption.vue

@@ -67,11 +67,11 @@ const toggle = () => {
 .beam_filter-option-select {
 	position: relative;
 	appearance: none;
-	border: 1px solid var(--row-border-color);
+	border: 1px solid var(--sc-row-border-color);
 	font-weight: bold;
-	color: var(--primary-text-color);
+	color: var(--sc-primary-text-color);
 	font-size: 0.8rem;
-	font-family: var(--font-family);
+	font-family: var(--sc-font-family);
 	display: flex;
 	align-items: stretch;
 }
@@ -82,8 +82,8 @@ label {
 }
 
 .beam_filter-arrow {
-	background: var(--primary-color);
-	color: var(--primary-text-color);
+	background: var(--sc-primary-color);
+	color: var(--sc-primary-text-color);
 	cursor: pointer;
 	display: flex;
 	align-items: center;
@@ -97,7 +97,7 @@ label {
 }
 
 svg {
-	fill: var(--primary-text-color);
+	fill: var(--sc-primary-text-color);
 	width: 5px;
 	transform: rotate(90deg);
 }
@@ -107,7 +107,7 @@ svg {
 	z-index: 100;
 	border-top: none;
 	left: 0;
-	border: 1px solid var(--row-border-color);
+	border: 1px solid var(--sc-row-border-color);
 	padding: 0rem;
 	list-style: none;
 	width: 100%;
@@ -119,21 +119,21 @@ svg {
 
 .beam_filter-select-option {
 	font-size: 0.8rem;
-	font-family: var(--font-family);
+	font-family: var(--sc-font-family);
 	font-weight: bold;
-	color: var(--primary-text-color);
-	border-bottom: 1px solid var(--row-border-color);
+	color: var(--sc-primary-text-color);
+	border-bottom: 1px solid var(--sc-row-border-color);
 	padding: 0.5rem;
 	&:hover {
-		background: var(--primary-color);
+		background: var(--sc-primary-color);
 	}
 }
 
 .selected {
-	background: var(--row-border-color);
+	background: var(--sc-row-border-color);
 
 	&:hover {
-		background: var(--row-border-color);
+		background: var(--sc-row-border-color);
 	}
 }
 </style>

package/src/components/ItemCheck.vue

@@ -41,7 +41,7 @@ const value = defineModel<boolean>({ default: false })
 	width: 2rem;
 	background-color: #eee;
 	outline: 2px solid transparent;
-	border: 1px solid var(--highlight);
+	border: 1px solid var(--sc-highlight);
 }
 
 .container:hover input ~ .checkmark {
@@ -49,7 +49,7 @@ const value = defineModel<boolean>({ default: false })
 }
 
 .container input:checked ~ .checkmark {
-	background-color: var(--brand-secondary);
+	background-color: var(--sc-brand-secondary);
 }
 
 .checkmark:after {
@@ -67,7 +67,7 @@ const value = defineModel<boolean>({ default: false })
 	top: 50%;
 	width: 0.5rem;
 	height: 1rem;
-	border: solid var(--text-color);
+	border: solid var(--sc-text-color);
 	border-width: 0 3px 3px 0;
 	-webkit-transform: rotate(45deg);
 	-ms-transform: rotate(45deg);

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/components/ToggleArrow.vue

@@ -14,7 +14,7 @@ const { open } = defineProps<{ open: boolean }>()
 svg {
 	width: 100%;
 	overflow: visible;
-	fill: var(--primary-text-color);
+	fill: var(--sc-primary-text-color);
 }
 
 .arrow-icon {

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