wip: shopping cart, product options

spa/src/components/Quantity.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex items-center text-center">
-    <button class="btn" :class="btnClassList" @click="inc">-</button>
+    <button class="btn" :class="btnClassList" @click="dec" :disabled="disabled">-</button>
     <div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
-    <button class="btn" :class="btnClassList" @click="dec">+</button>
+    <button class="btn" :class="btnClassList" @click="inc" :disabled="disabled">+</button>
   </div>
 </template>
 
@@ -15,6 +15,10 @@ const props = defineProps({
   size: {
     type: String,
     default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   }
 });
 
@@ -27,12 +31,8 @@ const btnClassList = computed(() => {
 });
 
 function inc() {
-  if (model.value  - 1 >= 0) {
-    model.value--;
-  }
-}
+  if (props.disabled) return;
 
-function dec() {
   if (props.max && model.value + 1 > props.max) {
     model.value = props.max;
     return;
@@ -40,4 +40,12 @@ function dec() {
 
   model.value++;
 }
+
+function dec() {
+  if (props.disabled) return;
+
+  if (model.value  - 1 >= 1) {
+    model.value--;
+  }
+}
 </script>