wip: shopping cart, product options

spa/src/components/ProductOptions/Cart/OptionCheckbox.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

spa/src/components/ProductOptions/Cart/OptionText.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

spa/src/components/ProductOptions/ProductOptions.vue

@@ -1,10 +1,13 @@
 <template>
   <div v-for="option in options" :key="option.product_option_id" class="mt-3">
-    <OptionRadio v-if="option.type === 'radio'" :modelValue="option"/>
-    <OptionCheckbox v-else-if="option.type === 'checkbox'" :modelValue="option"/>
-    <OptionText v-else-if="option.type === 'text'" :modelValue="option"/>
-    <OptionTextarea v-else-if="option.type === 'textarea'" :modelValue="option"/>
-    <OptionSelect v-else-if="option.type === 'select'" :modelValue="option"/>
+    <component
+        v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
+        :is="componentMap[option.type]"
+        :modelValue="option"
+    />
+    <div v-else class="text-sm text-error">
+      Тип опции "{{ option.type }}" не поддерживается.
+    </div>
   </div>
 </template>
 
@@ -14,6 +17,15 @@ import OptionCheckbox from "./Types/OptionCheckbox.vue";
 import OptionText from "./Types/OptionText.vue";
 import OptionTextarea from "./Types/OptionTextarea.vue";
 import OptionSelect from "./Types/OptionSelect.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+
+const componentMap = {
+  radio: OptionRadio,
+  checkbox: OptionCheckbox,
+  text: OptionText,
+  textarea: OptionTextarea,
+  select: OptionSelect,
+};
 
 const options = defineModel();
 </script>

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

@@ -5,7 +5,7 @@
         class="select"
         @change="onChange"
     >
-      <option value="" disabled>Выберите значение</option>
+      <option value="" disabled selected>Выберите значение</option>
       <option
           v-for="value in model.values"
           :key="value.product_option_value_id"