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

spa/src/views/Cart.vue

@@ -1,38 +1,44 @@
 <template>
   <div class="max-w-3xl mx-auto p-4 space-y-6">
-    <h2 class="text-2xl font-semibold text-gray-900">Корзина</h2>
+    <h2 class="text-2xl">Корзина</h2>
+
+    <div v-if="cart.items.length > 0">
 
-    <div
-        v-if="cart.items.length"
-        class="rounded-2xl border border-gray-200 bg-white shadow-md overflow-hidden divide-y"
-    >
       <div
           v-for="item in cart.items"
           :key="item.productId"
-          class="p-4 flex items-center justify-between"
+          class="card w-96 bg-base-100 card-sm shadow-sm"
       >
-        <div class="flex-1">
+        <div class="card-body">
-          <h3 class="text-base font-semibold text-gray-900">{{ item.productName }}</h3>
+          <h2 class="card-title">{{ item.productName }}</h2>
-          <p class="text-sm text-gray-500 mt-1">{{ item.price }}</p>
+          <p class="text-sm mt-1">{{ item.price }}</p>
-          <div class="flex items-center gap-2 mt-3">
+          <div v-if="item.options.length">
-            <button
+            <p v-for="option in item.options.filter(i => ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(i.type) !== -1)">
-                class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
+              <span v-if="option.type === 'radio'" class="text-xs font-medium">
-                @click="decrease(item)"
+                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
-            >−</button>
+              </span>
-            <span class="text-sm font-medium w-6 text-center">{{ item.quantity }}</span>
+              <span v-else-if="option.type === 'checkbox'" class="text-xs font-medium">
-            <button
+                <span v-for="check in option.value" class="text-xs font-medium">
-                class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
+                  {{ check.name }}<span v-if="check.price"> ({{ check.price_prefix }}{{ check.price }})</span>
-                @click="increase(item)"
+                </span>
-            >＋</button>
+              </span>
+              <span v-else-if="option.type === 'select'" class="text-xs font-medium">
+                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
+              </span>
+              <span v-else-if="option.type === 'text' || option.type === 'textarea'" class="text-xs font-medium">
+                {{ option.value }}
+              </span>
+            </p>
+          </div>
+          <div class="card-actions justify-between">
+            <Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item, $event)"/>
+            <button class="btn btn-error" @click="remove(item)">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+              </svg>
+            </button>
           </div>
         </div>
-
-        <button
-            @click="remove(item)"
-            class="ml-4 text-sm text-red-500 hover:underline"
-        >
-          Удалить
-        </button>
       </div>
     </div>
 
@@ -47,17 +53,12 @@
 
 <script setup>
 import { useCartStore } from '../stores/CartStore.js'
+import Quantity from "@/components/Quantity.vue";
 
 const cart = useCartStore()
 
-function increase(item) {
+function onQuantityUpdate(item, newQuantity) {
-  item.quantity++
+  if (newQuantity === 0) {
-}
-
-function decrease(item) {
-  if (item.quantity > 1) {
-    item.quantity--
-  } else {
     remove(item)
   }
 }

spa/src/views/Product.vue

@@ -55,6 +55,7 @@
           :modelValue="quantity"
           @update:modelValue="setQuantity"
           :max="10"
+          size="lg"
       />
     </div>
   </div>