Merge pull request #1487 from w3bdesign/develop

Improve design of quantity

Author: w3bdesign

components/common/CommonInput.vue

@@ -1,30 +1,24 @@
 <template>
-  <div class="flex items-center space-x-2">
+  <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"
+  >
     <button
-      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      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"
       :disabled="loading || value <= min"
       @click="updateValue(value - 1)"
       aria-label="Decrease quantity"
-    >
-      -
-    </button>
-    <input
-      type="number"
-      :value="value"
-      :min="min"
-      :max="max"
-      class="w-12 text-center border rounded"
-      :disabled="loading"
-      @input="onInput"
-    />
+      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>
     <button
-      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      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"
       :disabled="loading || (max !== null && value >= max)"
       @click="updateValue(value + 1)"
       aria-label="Increase quantity"
-    >
-      +
-    </button>
+      type="button"
+    >+</button>
   </div>
 </template>
 
@@ -60,9 +54,4 @@ function updateValue(newValue) {
   if (newValue < props.min) return;
   emit("update:modelValue", newValue);
 }
-
-function onInput(e) {
-  const newValue = Number(e.target.value);
-  updateValue(newValue);
-}
 </script>