Updated

frontend/components/global/product-detail/QuantityCounter.vue

@@ -10,49 +10,58 @@ type Props = {
 // props
 
 const props = defineProps<Props>();
-const { modelValue } = toRefs(props);
+const { modelValue, max } = toRefs(props);
+
+// state
+
+const timer = ref<NodeJS.Timeout | null>(null);
 
 // emit
 
 const emit = defineEmits(["update:modelValue"]);
 
-// state
+// computed
 
-const currentQuantity = ref(modelValue.value);
+const currentQuantity = computed({
+    get: () => modelValue.value ?? 0,
+    set: (value: number) => {
+        if (timer.value) clearTimeout(timer.value);
+        timer.value = setTimeout(() => {
+            emit("update:modelValue", value);
+        }, 50);
+    }
+});
 
 // methods
 
 const onInput = (e: any) => {
-    currentQuantity.value = Number(e.target.value);
+    const value = Number(e.target.value);
+    if (value > 0 && value <= max.value) {
+        currentQuantity.value = value;
+    } else {
+        currentQuantity.value = 1;
+    }
 };
 
-// watch
-
-watch(() => currentQuantity.value, (newValue) => {
-    emit("update:modelValue", newValue);
-});
-
 
 </script>
 
 <template>
-    <div class="">
-        <NumberFieldRoot
-            class="rounded-full border-slate-200 border-[1.5px] flex items-center bg-white gap-4 p-4"
-            v-model="currentQuantity"
-            :min="1"
-            :max="max"
-        >
-            <NumberFieldIncrement class="cursor-pointer">
-                <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
-            </NumberFieldIncrement>
-            <NumberFieldInput
-                @input="onInput"
-                class="field-sizing-content bg-transparent outline-none typo-label-md text-black"
-            />
-            <NumberFieldDecrement class="cursor-pointer">
-                <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
-            </NumberFieldDecrement>
-        </NumberFieldRoot>
-    </div>
+    <NumberFieldRoot
+        class="rounded-full border-slate-200 border-[1.5px] flex items-center bg-white gap-4 p-4"
+        v-model="currentQuantity"
+        :min="1"
+        :max="max"
+    >
+        <NumberFieldIncrement class="cursor-pointer">
+            <Icon name="ci:plus" class="**:stroke-slate-500 size-5" />
+        </NumberFieldIncrement>
+        <NumberFieldInput
+            @input="onInput"
+            class="field-sizing-content bg-transparent outline-none typo-label-md text-black"
+        />
+        <NumberFieldDecrement class="cursor-pointer">
+            <Icon name="ci:minus" class="**:stroke-slate-500 size-5" />
+        </NumberFieldDecrement>
+    </NumberFieldRoot>
 </template>