wip: shopping cart

spa/src/components/ProductOptions/ProductOptions.vue

@@ -16,5 +16,4 @@ import OptionTextarea from "./Types/OptionTextarea.vue";
 import OptionSelect from "./Types/OptionSelect.vue";
 
 const options = defineModel();
-
 </script>

spa/src/components/ProductOptions/Types/OptionRadio.vue

@@ -16,7 +16,7 @@
             class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
         />
 
-        <span class="text-xs font-medium">
+          <span class="text-xs font-medium">
             {{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
           </span>
       </label>

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() {