nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: product options, speedup home page, themes

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-21 13:37:09 +03:00
parent 51ce6ed959
commit e3cc0d4b10
18 changed files with 181 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
spa/src/components/ProductOptions/Types/OptionCheckbox.vue
View File

@@ -4,8 +4,9 @@
<div class="flex flex-wrap gap-2">
<label
v-for="value in model.values"
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-2 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25">
class="group relative flex items-center justify-center btn btn-soft btn-secondary btn-sm"
:class="value.selected ? 'btn-active' : ''"
>
<input
type="checkbox"
:value="value.product_option_value_id"
@@ -36,6 +37,8 @@ function select(toggledValue) {
}
});
model.value.value = model.value.values.filter(item => item.selected === true);
emit('update:modelValue', model.value);
}
</script>

8
spa/src/components/ProductOptions/Types/OptionRadio.vue
View File

@@ -3,7 +3,9 @@
<div class="flex flex-wrap gap-2">
<label
v-for="value in model.values"
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-base-200 p-2 has-checked:border-indigo-600 has-checked:bg-primary has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25">
class="group relative flex items-center justify-center btn btn-soft btn-secondary btn-sm"
:class="value.selected ? 'btn-active' : ''"
>
<input
type="radio"
@@ -14,7 +16,7 @@
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
/>
<span class="text-xs font-medium group-has-checked:text-white">
<span class="text-xs font-medium">
{{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
</span>
</label>
@@ -33,6 +35,8 @@ function select(selectedValue) {
value.selected = (value === selectedValue);
});
model.value.value = selectedValue;
emit('update:modelValue', model);
}
</script>

3
spa/src/components/ProductOptions/Types/OptionSelect.vue
View File

@@ -5,6 +5,7 @@
class="select"
@change="onChange"
>
<option value="" disabled>Выберите значение</option>
<option
v-for="value in model.values"
:key="value.product_option_value_id"
@@ -30,6 +31,8 @@ function onChange(event) {
value.selected = (value.product_option_value_id === selectedId);
});
model.value.value = model.value.values.find(value => value.product_option_value_id === selectedId);
emit('update:modelValue', model.value);
}
</script>