Update CommonInput.vue

Author: w3bdesign

components/common/CommonInput.vue

@@ -1,22 +1,29 @@
 <template>
-  <div
-    class="flex items-center border border-gray-200 rounded-xl bg-white px-2 py-1 min-w-[120px] w-fit h-10 justify-center gap-1"
-  >
+  <div class="flex items-center gap-2">
     <button
-      class="bg-transparent border-none text-gray-900 text-xl w-9 h-9 flex items-center justify-center rounded-lg transition-colors select-none disabled:text-gray-300 disabled:cursor-not-allowed active:bg-gray-100"
+      aria-label="Decrease quantity by one"
+      class="minus-button text-xl w-8 h-[34px] flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 transition disabled:text-gray-300 disabled:cursor-not-allowed"
       :disabled="loading || value <= min"
       @click="updateValue(value - 1)"
-      aria-label="Decrease quantity"
       type="button"
     >-</button>
-    <div class="border-l border-gray-200 h-6 mx-1"></div>
-    <span class="min-w-8 text-center font-medium text-lg text-gray-900 px-2 select-none">{{ value }}</span>
-    <div class="border-l border-gray-200 h-6 mx-1"></div>
+    <input
+      type="tel"
+      pattern="\d*"
+      maxlength="3"
+      :value="value"
+      @input="onInput"
+      class="quantity product-qty border-0 h-[34px] max-w-[50px] text-center bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none text-lg"
+      :disabled="loading"
+      aria-label="Quantity"
+      autocomplete="off"
+      inputmode="numeric"
+    />
     <button
-      class="bg-transparent border-none text-gray-900 text-xl w-9 h-9 flex items-center justify-center rounded-lg transition-colors select-none disabled:text-gray-300 disabled:cursor-not-allowed active:bg-gray-100"
+      aria-label="Increase quantity by one"
+      class="plus-button text-xl w-8 h-[34px] flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 transition disabled:text-gray-300 disabled:cursor-not-allowed"
       :disabled="loading || (max !== null && value >= max)"
       @click="updateValue(value + 1)"
-      aria-label="Increase quantity"
       type="button"
     >+</button>
   </div>
@@ -54,4 +61,11 @@ function updateValue(newValue) {
   if (newValue < props.min) return;
   emit("update:modelValue", newValue);
 }
+
+function onInput(e) {
+  const newValue = Number(e.target.value.replace(/\D/g, ""));
+  if (props.max !== null && newValue > props.max) return;
+  if (newValue < props.min) return;
+  emit("update:modelValue", newValue);
+}
 </script>