wip: shopping cart

spa/src/components/Quantity.vue

@@ -1,15 +1,29 @@
 <template>
   <div class="flex items-center text-center">
-    <button class="btn btn-lg" @click="inc">-</button>
+    <button class="btn" :class="btnClassList" @click="inc">-</button>
     <div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
-    <button class="btn btn-lg" @click="dec">+</button>
+    <button class="btn" :class="btnClassList" @click="dec">+</button>
   </div>
 </template>
 
 <script setup>
+import {computed} from "vue";
+
 const model = defineModel();
 const props = defineProps({
   max: Number,
+  size: {
+    type: String,
+    default: '',
+  }
+});
+
+const btnClassList = computed(() => {
+  let classList = ['btn'];
+  if (props.size) {
+    classList.push(`btn-${props.size}`);
+  }
+  return classList;
 });
 
 function inc() {