flowrix 1.0.1-beta.147 → 1.0.1-beta.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/SampleProductCard.d.vue.ts +13 -0
- package/dist/runtime/components/SampleProductCard.vue +362 -0
- package/dist/runtime/components/SampleProductCard.vue.d.ts +13 -0
- package/dist/runtime/components/WishList/dropdown.d.vue.ts +9 -0
- package/dist/runtime/components/WishList/dropdown.vue +417 -0
- package/dist/runtime/components/WishList/dropdown.vue.d.ts +9 -0
- package/dist/runtime/components/WishList/modal.d.vue.ts +13 -0
- package/dist/runtime/components/WishList/modal.vue +229 -0
- package/dist/runtime/components/WishList/modal.vue.d.ts +13 -0
- package/dist/runtime/components/product/AddToCart.d.vue.ts +15 -0
- package/dist/runtime/components/product/AddToCart.vue +176 -0
- package/dist/runtime/components/product/AddToCart.vue.d.ts +15 -0
- package/dist/runtime/components/product/AddtoCartSample.d.vue.ts +6 -0
- package/dist/runtime/components/product/AddtoCartSample.vue +110 -0
- package/dist/runtime/components/product/AddtoCartSample.vue.d.ts +6 -0
- package/dist/runtime/components/product/Badges.d.vue.ts +13 -0
- package/dist/runtime/components/product/Badges.vue +84 -0
- package/dist/runtime/components/product/Badges.vue.d.ts +13 -0
- package/dist/runtime/components/product/Description.d.vue.ts +9 -0
- package/dist/runtime/components/product/Description.vue +96 -0
- package/dist/runtime/components/product/Description.vue.d.ts +9 -0
- package/dist/runtime/components/product/Dynamic.d.vue.ts +9 -0
- package/dist/runtime/components/product/Dynamic.vue +136 -0
- package/dist/runtime/components/product/Dynamic.vue.d.ts +9 -0
- package/dist/runtime/components/product/Gallery.d.vue.ts +11 -0
- package/dist/runtime/components/product/Gallery.vue +133 -0
- package/dist/runtime/components/product/Gallery.vue.d.ts +11 -0
- package/dist/runtime/components/product/PopUpCart.d.vue.ts +11 -0
- package/dist/runtime/components/product/PopUpCart.vue +155 -0
- package/dist/runtime/components/product/PopUpCart.vue.d.ts +11 -0
- package/dist/runtime/components/product/ProductInfo.d.vue.ts +7 -0
- package/dist/runtime/components/product/ProductInfo.vue +105 -0
- package/dist/runtime/components/product/ProductInfo.vue.d.ts +7 -0
- package/dist/runtime/components/product/RequiredPopUp.d.vue.ts +9 -0
- package/dist/runtime/components/product/RequiredPopUp.vue +57 -0
- package/dist/runtime/components/product/RequiredPopUp.vue.d.ts +9 -0
- package/dist/runtime/components/product/bundleProduct/Bundle.d.vue.ts +13 -0
- package/dist/runtime/components/product/bundleProduct/Bundle.vue +35 -0
- package/dist/runtime/components/product/bundleProduct/Bundle.vue.d.ts +13 -0
- package/dist/runtime/components/product/bundleProduct/index.d.vue.ts +8 -0
- package/dist/runtime/components/product/bundleProduct/index.vue +32 -0
- package/dist/runtime/components/product/bundleProduct/index.vue.d.ts +8 -0
- package/dist/runtime/components/product/customProduct/AddtoCartSample.d.vue.ts +6 -0
- package/dist/runtime/components/product/customProduct/AddtoCartSample.vue +101 -0
- package/dist/runtime/components/product/customProduct/AddtoCartSample.vue.d.ts +6 -0
- package/dist/runtime/components/product/customProduct/Attributes.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/Attributes.vue +12 -0
- package/dist/runtime/components/product/customProduct/Attributes.vue.d.ts +9 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/drop-down.d.vue.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/drop-down.vue +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/drop-down.vue.d.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-collection.d.vue.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-collection.vue +253 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-collection.vue.d.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-colors.d.vue.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-colors.vue +253 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-colors.vue.d.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-values.d.vue.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-values.vue +214 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/multi-values.vue.d.ts +3 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.d.vue.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.vue +9 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/style.vue.d.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/swatch.d.vue.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/swatch.vue +9 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/AttributeType/swatch.vue.d.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.vue +133 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/PopupContent/Popup.vue.d.ts +9 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/SingleAttribute.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/SingleAttribute.vue +35 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/SingleAttribute.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlide.d.vue.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlide.vue +134 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlide.vue.d.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlidemagnifier.d.vue.ts +15 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlidemagnifier.vue +138 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlidemagnifier.vue.d.ts +15 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/button.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/button.vue +149 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/button.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.vue +82 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdownWithIcon.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdownWithIcon.vue +108 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdownWithIcon.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/height.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/height.vue +104 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/height.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBox.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBox.vue +87 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBox.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBoxWithMagnifier.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBoxWithMagnifier.vue +219 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/imageBoxWithMagnifier.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/message.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/message.vue +36 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/message.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.vue +45 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.d.vue.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.vue +48 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.vue.d.ts +13 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.vue +154 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.vue +111 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/sliderWithMagnifier.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/sliderWithMagnifier.vue +269 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/sliderWithMagnifier.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subheight.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subheight.vue +63 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subheight.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subwidth.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subwidth.vue +63 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subwidth.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/swatch.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/swatch.vue +220 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/swatch.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.vue +47 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/text.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.vue +91 -0
- package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/width.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/ConfirmPopup.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/ConfirmPopup.vue +25 -0
- package/dist/runtime/components/product/customProduct/ConfirmPopup.vue.d.ts +9 -0
- package/dist/runtime/components/product/customProduct/RequiredPopUp.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/RequiredPopUp.vue +49 -0
- package/dist/runtime/components/product/customProduct/RequiredPopUp.vue.d.ts +9 -0
- package/dist/runtime/components/product/customProduct/Reviews.d.vue.ts +7 -0
- package/dist/runtime/components/product/customProduct/Reviews.vue +25 -0
- package/dist/runtime/components/product/customProduct/Reviews.vue.d.ts +7 -0
- package/dist/runtime/components/product/customProduct/SingleStep.d.vue.ts +11 -0
- package/dist/runtime/components/product/customProduct/SingleStep.vue +11 -0
- package/dist/runtime/components/product/customProduct/SingleStep.vue.d.ts +11 -0
- package/dist/runtime/components/product/customProduct/Steps.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/Steps.vue +221 -0
- package/dist/runtime/components/product/customProduct/Steps.vue.d.ts +9 -0
- package/dist/runtime/components/product/customProduct/index.d.vue.ts +9 -0
- package/dist/runtime/components/product/customProduct/index.vue +272 -0
- package/dist/runtime/components/product/customProduct/index.vue.d.ts +9 -0
- package/dist/runtime/components/product/index.d.vue.ts +8 -0
- package/dist/runtime/components/product/index.vue +90 -0
- package/dist/runtime/components/product/index.vue.d.ts +8 -0
- package/dist/runtime/components/product/sampleProduct/ProductVariation.d.vue.ts +11 -0
- package/dist/runtime/components/product/sampleProduct/ProductVariation.vue +61 -0
- package/dist/runtime/components/product/sampleProduct/ProductVariation.vue.d.ts +11 -0
- package/dist/runtime/components/product/sampleProduct/SampleDetails.d.vue.ts +7 -0
- package/dist/runtime/components/product/sampleProduct/SampleDetails.vue +74 -0
- package/dist/runtime/components/product/sampleProduct/SampleDetails.vue.d.ts +7 -0
- package/dist/runtime/components/product/sampleProduct/SampleFeatures.d.vue.ts +9 -0
- package/dist/runtime/components/product/sampleProduct/SampleFeatures.vue +63 -0
- package/dist/runtime/components/product/sampleProduct/SampleFeatures.vue.d.ts +9 -0
- package/dist/runtime/components/product/sampleProduct/index.d.vue.ts +8 -0
- package/dist/runtime/components/product/sampleProduct/index.vue +64 -0
- package/dist/runtime/components/product/sampleProduct/index.vue.d.ts +8 -0
- package/dist/runtime/components/product/simpleProduct/ProductVariation.d.vue.ts +11 -0
- package/dist/runtime/components/product/simpleProduct/ProductVariation.vue +61 -0
- package/dist/runtime/components/product/simpleProduct/ProductVariation.vue.d.ts +11 -0
- package/dist/runtime/components/product/simpleProduct/index.d.vue.ts +8 -0
- package/dist/runtime/components/product/simpleProduct/index.vue +34 -0
- package/dist/runtime/components/product/simpleProduct/index.vue.d.ts +8 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useAttributeTypeDynamic.d.ts +3 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useAttributeTypeDynamic.js +20 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useAttributesDynamic.d.ts +70 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useAttributesDynamic.js +63 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useCustomProductDynamic.d.ts +74 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useCustomProductDynamic.js +107 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useCustomeScriptDynamic.d.ts +159 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useCustomeScriptDynamic.js +2079 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleAttributeDynamic.d.ts +4 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleAttributeDynamic.js +27 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleStepDynamic.d.ts +68 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleStepDynamic.js +21 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleValueDynamic.d.ts +67 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useSingleValueDynamic.js +15 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useStepsDynamic.d.ts +88 -0
- package/dist/runtime/composables/Product/CustomProductDynamic/useStepsDynamic.js +72 -0
- package/dist/runtime/composables/index.d.ts +8 -0
- package/dist/runtime/composables/index.js +8 -0
- package/dist/runtime/pages/flowrix-default.vue +15 -6
- package/dist/runtime/plugins/bootstrap.client.d.ts +2 -0
- package/dist/runtime/plugins/bootstrap.client.js +9 -0
- package/dist/runtime/server/api/cart/related.js +15 -2
- package/package.json +1 -1
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/SingleSlide.vue
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const { attribute, slide, group } = defineProps({ "attribute": Object, "slide": Object, "group": Object });
|
|
3
|
+
const SelecteValue = ref(0);
|
|
4
|
+
const CustomScript = useCustomeScriptDynamic();
|
|
5
|
+
const SelectedItem = attribute.values.find((i) => i.selected === true);
|
|
6
|
+
if (SelectedItem) {
|
|
7
|
+
SelecteValue.value = SelectedItem.id;
|
|
8
|
+
}
|
|
9
|
+
const ChangeValue = ((value) => {
|
|
10
|
+
const aid = attribute.id;
|
|
11
|
+
const gid = group.id;
|
|
12
|
+
const vid = value;
|
|
13
|
+
CustomScript.SelectedOptions = { aid, gid, vid };
|
|
14
|
+
CustomScript.initprocess();
|
|
15
|
+
if (attribute.typeLabel == "swatch") {
|
|
16
|
+
}
|
|
17
|
+
if (attribute.typeLabel == "style") {
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
const checkInCart = ((sample) => {
|
|
21
|
+
let cartItems = useCartStore().cart.items;
|
|
22
|
+
if (cartItems) {
|
|
23
|
+
for (const key in cartItems) {
|
|
24
|
+
if (cartItems[key].slug === sample) {
|
|
25
|
+
return true;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return false;
|
|
30
|
+
});
|
|
31
|
+
const addToCartSample = (async (sample) => {
|
|
32
|
+
await useCartStore().addToCart(sample, 1);
|
|
33
|
+
});
|
|
34
|
+
const removeFromCart = async (sample) => {
|
|
35
|
+
let productId = "";
|
|
36
|
+
let cartItems = useCartStore().cart.items;
|
|
37
|
+
if (cartItems) {
|
|
38
|
+
for (const key in cartItems) {
|
|
39
|
+
if (cartItems[key].slug === sample.slug) {
|
|
40
|
+
productId = cartItems[key].rowId;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
await useCartStore().removeFromCart(productId, sample);
|
|
45
|
+
};
|
|
46
|
+
const swatchimagesSrcset = ((swatchImage) => {
|
|
47
|
+
let swatchImage64 = swatchImage.replace(/.webp/gi, "64.webp");
|
|
48
|
+
let swatchImage150 = swatchImage.replace(/.webp/gi, "150.webp");
|
|
49
|
+
let swatchImage320 = swatchImage.replace(/.webp/gi, "320.webp");
|
|
50
|
+
let swatchImage640 = swatchImage.replace(/.webp/gi, "640.webp");
|
|
51
|
+
let swatchImage1024 = swatchImage.replace(/.webp/gi, "1024.webp");
|
|
52
|
+
return swatchImage150;
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<template>
|
|
57
|
+
<div class="value-item position-relative">
|
|
58
|
+
<input :data-label="attribute.title" class="position-absolute top-0 left-0 w-100 h-100" v-model="SelecteValue"
|
|
59
|
+
:required="attribute.required" @change="ChangeValue(slide.id)" :data-attributevalue="attribute.parent"
|
|
60
|
+
:data-child="slide.parent" :value="slide.id" :data-value="slide.id" type="radio"
|
|
61
|
+
:name="`attribute_id[${attribute.id}]`" :id="`attribute_${attribute.id}_value${slide.id}`" />
|
|
62
|
+
<label class="value-label border h-100" :for="`attribute_${attribute.id}_value${slide.id}`">
|
|
63
|
+
<div class="image-container">
|
|
64
|
+
<img loading="lazy" :src="swatchimagesSrcset(slide.swatch)" width="100%" />
|
|
65
|
+
</div>
|
|
66
|
+
<span class="slide-title">{{ slide.title }}</span>
|
|
67
|
+
<span v-if="attribute.offer_sample == true && slide.sampleproduct != ''" class="sample-button">
|
|
68
|
+
<div v-if="checkInCart(slide.sampleproduct) == false"
|
|
69
|
+
@click="addToCartSample({ slug: slide.sampleproduct })" class="btn btn-sm">Add Sample</div>
|
|
70
|
+
<div v-else @click="removeFromCart({ slug: slide.sampleproduct })" class="btn btn-sm btn-primary">Remove
|
|
71
|
+
Sample</div>
|
|
72
|
+
</span>
|
|
73
|
+
</label>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<style scoped>
|
|
78
|
+
.value-item {
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 100%;
|
|
81
|
+
}
|
|
82
|
+
.value-item input {
|
|
83
|
+
opacity: 0;
|
|
84
|
+
z-index: -1;
|
|
85
|
+
}
|
|
86
|
+
.value-item input:checked ~ label {
|
|
87
|
+
border-color: var(--bs-secondary) !important;
|
|
88
|
+
border-width: 2px !important;
|
|
89
|
+
}
|
|
90
|
+
.value-item input:checked ~ label .slide-title {
|
|
91
|
+
font-weight: bold;
|
|
92
|
+
}
|
|
93
|
+
.value-item label {
|
|
94
|
+
border-width: 2px !important;
|
|
95
|
+
display: flex;
|
|
96
|
+
cursor: pointer;
|
|
97
|
+
text-align: center;
|
|
98
|
+
align-items: center;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
justify-content: flex-start;
|
|
101
|
+
background-color: #f5f7fb;
|
|
102
|
+
border-radius: 8px;
|
|
103
|
+
padding: 5px;
|
|
104
|
+
}
|
|
105
|
+
.value-item label .image-container {
|
|
106
|
+
position: relative;
|
|
107
|
+
min-height: 68px;
|
|
108
|
+
width: 100%;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
background: #fff;
|
|
111
|
+
border: 1px solid #C8C8C8;
|
|
112
|
+
border-radius: 5px;
|
|
113
|
+
}
|
|
114
|
+
.value-item label .image-container img {
|
|
115
|
+
top: 0;
|
|
116
|
+
left: 0;
|
|
117
|
+
width: 100%;
|
|
118
|
+
height: 100%;
|
|
119
|
+
object-fit: fill;
|
|
120
|
+
object-position: top left;
|
|
121
|
+
position: relative;
|
|
122
|
+
}
|
|
123
|
+
.value-item label .slide-title {
|
|
124
|
+
padding: 5px 0;
|
|
125
|
+
font-weight: 500;
|
|
126
|
+
font-size: 14px;
|
|
127
|
+
}
|
|
128
|
+
.value-item label .sample-button {
|
|
129
|
+
padding: 5px 0;
|
|
130
|
+
}
|
|
131
|
+
.value-item label:hover {
|
|
132
|
+
box-shadow: rgb(238, 238, 238) 0px 0px 3px 3px;
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof __VLS_props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
slide?: Record<string, any> | undefined;
|
|
8
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
9
|
+
declare const __VLS_props: {
|
|
10
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
11
|
+
readonly group?: Record<string, any> | undefined;
|
|
12
|
+
readonly slide?: Record<string, any> | undefined;
|
|
13
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$emit: typeof emit;
|
|
5
|
+
$props: Partial<typeof __VLS_props>;
|
|
6
|
+
attribute?: Record<string, any> | undefined;
|
|
7
|
+
group?: Record<string, any> | undefined;
|
|
8
|
+
slide?: Record<string, any> | undefined;
|
|
9
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
+
declare const emit: (event: "popupOpen", ...args: any[]) => void;
|
|
11
|
+
declare const __VLS_props: {
|
|
12
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
13
|
+
readonly group?: Record<string, any> | undefined;
|
|
14
|
+
readonly slide?: Record<string, any> | undefined;
|
|
15
|
+
};
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import orderSample from "./orderSample/button.vue";
|
|
3
|
+
const { attribute, slide, group } = defineProps({ "attribute": Object, "slide": Object, "group": Object });
|
|
4
|
+
const CustomScript = useCustomeScriptDynamic();
|
|
5
|
+
const emit = defineEmits(["popupOpen"]);
|
|
6
|
+
const SelecteValue = ref(0);
|
|
7
|
+
const SelectedItem = attribute.values.find((i) => i.selected === true);
|
|
8
|
+
if (SelectedItem) {
|
|
9
|
+
SelecteValue.value = SelectedItem.id;
|
|
10
|
+
}
|
|
11
|
+
const ChangeValue = ((value) => {
|
|
12
|
+
const aid = attribute.id;
|
|
13
|
+
const gid = group.id;
|
|
14
|
+
const vid = value;
|
|
15
|
+
CustomScript.SelectedOptions = { aid, gid, vid };
|
|
16
|
+
CustomScript.initprocess();
|
|
17
|
+
if (attribute.typeLabel == "swatch") {
|
|
18
|
+
}
|
|
19
|
+
if (attribute.typeLabel == "style") {
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const showColorLargeImage = ((index) => {
|
|
23
|
+
emit("popupOpen", index, slide.parent);
|
|
24
|
+
});
|
|
25
|
+
const swatchimagesSrcset = ((swatchImage) => {
|
|
26
|
+
let swatchImage64 = swatchImage.replace(/.webp/gi, "64.webp");
|
|
27
|
+
let swatchImage150 = swatchImage.replace(/.webp/gi, "150.webp");
|
|
28
|
+
let swatchImage320 = swatchImage.replace(/.webp/gi, "320.webp");
|
|
29
|
+
let swatchImage640 = swatchImage.replace(/.webp/gi, "640.webp");
|
|
30
|
+
let swatchImage1024 = swatchImage.replace(/.webp/gi, "1024.webp");
|
|
31
|
+
return swatchImage150;
|
|
32
|
+
});
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<div class="value-item position-relative">
|
|
37
|
+
<input
|
|
38
|
+
class="position-absolute top-0 left-0 w-100 h-100"
|
|
39
|
+
:data-label="attribute.title" v-model="SelecteValue"
|
|
40
|
+
@change="ChangeValue(slide.id)"
|
|
41
|
+
:data-attributevalue="attribute.parent"
|
|
42
|
+
:data-child="slide.parent"
|
|
43
|
+
:required="attribute.required"
|
|
44
|
+
:data-validation="attribute.validation_message"
|
|
45
|
+
:value="slide.id"
|
|
46
|
+
:data-value="slide.id"
|
|
47
|
+
type="radio"
|
|
48
|
+
:name="`attribute_id[${attribute.id}]`"
|
|
49
|
+
:id="`attribute_${attribute.id}_value${slide.id}`"/>
|
|
50
|
+
<label class="value-label border h-100" :for="`attribute_${attribute.id}_value${slide.id}`">
|
|
51
|
+
<div class="image-container">
|
|
52
|
+
<svg xmlns="http://www.w3.org/2000/svg" @click="showColorLargeImage(item.id, item.parent)" class="p-1 icon-for-large d-none d-md-block" width="25" height="25" viewBox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208M208 352a144 144 0 1 0 0-288a144 144 0 1 0 0 288"/></svg>
|
|
53
|
+
<img loading="lazy" v-if="swatchimagesSrcset(slide.swatch)" :src="slide.swatch" width="100%"/>
|
|
54
|
+
<div class="slide-iconcolor" v-else-if="slide.iconcolor" :style="`background-color:${slide.iconcolor}`"></div>
|
|
55
|
+
</div>
|
|
56
|
+
<span>{{ slide.title }}</span>
|
|
57
|
+
<orderSample :attribute="attribute" :item="slide" :group="group"/>
|
|
58
|
+
</label>
|
|
59
|
+
</div>
|
|
60
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<style scoped>
|
|
63
|
+
.slide-iconcolor {
|
|
64
|
+
height: 100%;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.modal-dialog {
|
|
68
|
+
opacity: 0;
|
|
69
|
+
transition-duration: 20000ms;
|
|
70
|
+
}
|
|
71
|
+
.modal-dialog .modal-content {
|
|
72
|
+
position: relative;
|
|
73
|
+
}
|
|
74
|
+
.modal-dialog .modal-content .btn-close {
|
|
75
|
+
background-color: var(--bs-white);
|
|
76
|
+
position: absolute;
|
|
77
|
+
right: -20px;
|
|
78
|
+
top: -20px;
|
|
79
|
+
z-index: 2;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.colorspopup {
|
|
83
|
+
position: fixed;
|
|
84
|
+
width: 100%;
|
|
85
|
+
height: 100%;
|
|
86
|
+
top: 0;
|
|
87
|
+
left: 0;
|
|
88
|
+
z-index: 99999;
|
|
89
|
+
display: flex;
|
|
90
|
+
background-color: rgba(0, 0, 0, 0.5019607843);
|
|
91
|
+
}
|
|
92
|
+
.colorspopup.active .modal-dialog {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.colors-images {
|
|
97
|
+
position: relative;
|
|
98
|
+
padding: 10px;
|
|
99
|
+
background: #fff;
|
|
100
|
+
border-radius: 20px;
|
|
101
|
+
}
|
|
102
|
+
.colors-images .colors-image {
|
|
103
|
+
display: none;
|
|
104
|
+
border-radius: 20px;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
}
|
|
107
|
+
.colors-images .colors-image img {
|
|
108
|
+
border: 1px solid #ccc;
|
|
109
|
+
width: 450px;
|
|
110
|
+
height: 450px;
|
|
111
|
+
}
|
|
112
|
+
.colors-images .colors-image:first-child {
|
|
113
|
+
display: block;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.colorImagesNav {
|
|
117
|
+
position: absolute;
|
|
118
|
+
width: 100%;
|
|
119
|
+
display: flex;
|
|
120
|
+
justify-content: space-between;
|
|
121
|
+
height: 50px;
|
|
122
|
+
font-size: 38px;
|
|
123
|
+
line-height: 1;
|
|
124
|
+
top: calc(50% - 25px);
|
|
125
|
+
}
|
|
126
|
+
.colorImagesNav button {
|
|
127
|
+
background-color: #fff;
|
|
128
|
+
border: 0;
|
|
129
|
+
color: var(--iseek-primary);
|
|
130
|
+
}
|
|
131
|
+
.colorImagesNav button:hover {
|
|
132
|
+
background-color: var(--iseek-secondary);
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
135
|
+
|
|
136
|
+
<style scoped>
|
|
137
|
+
.value-item{height:100%;width:100%}.value-item input{opacity:0;z-index:-1}.value-item input:checked~label{border-color:var(--iseek-primary)!important;border-width:2px!important}.value-item label{align-items:center;border-width:2px!important;cursor:pointer;display:flex;flex-direction:column;font-size:12px;font-weight:700;justify-content:flex-start;padding:5px;text-align:center}.value-item label .image-container{height:90px;overflow:hidden;position:relative;width:100%}.value-item label .image-container img{height:100%;left:0;-o-object-fit:fill;object-fit:fill;-o-object-position:top left;object-position:top left;position:relative;top:0;width:100%}.value-item label span{padding:5px 0}.value-item label:hover{box-shadow:0 0 3px 3px #eee}.value-item label .icon-for-large{align-items:center;background-color:#fff;display:flex;height:20px;justify-content:center;line-height:1;position:absolute;right:0;top:0;width:20px;z-index:1}
|
|
138
|
+
</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$emit: typeof emit;
|
|
5
|
+
$props: Partial<typeof __VLS_props>;
|
|
6
|
+
attribute?: Record<string, any> | undefined;
|
|
7
|
+
group?: Record<string, any> | undefined;
|
|
8
|
+
slide?: Record<string, any> | undefined;
|
|
9
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
+
declare const emit: (event: "popupOpen", ...args: any[]) => void;
|
|
11
|
+
declare const __VLS_props: {
|
|
12
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
13
|
+
readonly group?: Record<string, any> | undefined;
|
|
14
|
+
readonly slide?: Record<string, any> | undefined;
|
|
15
|
+
};
|
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/button.d.vue.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const props: {
|
|
9
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
10
|
+
readonly group?: Record<string, any> | undefined;
|
|
11
|
+
};
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { defineProps, ref, onMounted, nextTick, watch } from "vue";
|
|
3
|
+
import contentPopup from "../PopupContent/Popup.vue";
|
|
4
|
+
const CustomScript = useCustomeScriptDynamic();
|
|
5
|
+
const props = defineProps({ "attribute": Object, "group": Object });
|
|
6
|
+
const { script } = useSingleValue(props.attribute);
|
|
7
|
+
const selectedOption = ref(null);
|
|
8
|
+
const containerRef = ref(null);
|
|
9
|
+
const getselectedOption = props.attribute.values.find((item) => item.selected === true);
|
|
10
|
+
if (getselectedOption) {
|
|
11
|
+
selectedOption.value = getselectedOption.id;
|
|
12
|
+
}
|
|
13
|
+
const ChangeValue = ((value) => {
|
|
14
|
+
const aid = props.attribute.id;
|
|
15
|
+
const gid = props.group.id;
|
|
16
|
+
const vid = value;
|
|
17
|
+
CustomScript.SelectedOptions = { aid, gid, vid };
|
|
18
|
+
CustomScript.initprocess();
|
|
19
|
+
nextTick(() => {
|
|
20
|
+
hideDisabledColumns();
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
const hideDisabledColumns = () => {
|
|
24
|
+
if (!containerRef.value) return;
|
|
25
|
+
const cols = containerRef.value.querySelectorAll(".col-6");
|
|
26
|
+
cols.forEach((col) => {
|
|
27
|
+
const valueItem = col.querySelector(".value-item");
|
|
28
|
+
if (valueItem) {
|
|
29
|
+
const displayStyle = window.getComputedStyle(valueItem).display;
|
|
30
|
+
if (displayStyle === "none") {
|
|
31
|
+
col.classList.add("d-none");
|
|
32
|
+
} else {
|
|
33
|
+
col.classList.remove("d-none");
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
onMounted(() => {
|
|
39
|
+
nextTick(() => {
|
|
40
|
+
hideDisabledColumns();
|
|
41
|
+
const observer = new MutationObserver(() => {
|
|
42
|
+
hideDisabledColumns();
|
|
43
|
+
});
|
|
44
|
+
if (containerRef.value) {
|
|
45
|
+
observer.observe(containerRef.value, {
|
|
46
|
+
attributes: true,
|
|
47
|
+
childList: true,
|
|
48
|
+
subtree: true,
|
|
49
|
+
attributeFilter: ["style", "disabled"]
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<template>
|
|
57
|
+
<div class="button-attribute-wrapper button-style-1 row">
|
|
58
|
+
<div class="col-md-4 px-0">
|
|
59
|
+
<label class="attribute-label">
|
|
60
|
+
{{ attribute.title }}
|
|
61
|
+
<span v-if="attribute.required" class="text-danger">*</span>
|
|
62
|
+
<contentPopup :attribute="attribute" />
|
|
63
|
+
</label>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col-md-8" ref="containerRef">
|
|
66
|
+
<div class="row g-2">
|
|
67
|
+
<div class="col-6" v-for="item in attribute.values" :key="item.id">
|
|
68
|
+
<div class="value-item position-relative h-100">
|
|
69
|
+
<input
|
|
70
|
+
class="buttonInput position-absolute w-100 h-100"
|
|
71
|
+
:data-label="attribute.title"
|
|
72
|
+
:required="attribute.required"
|
|
73
|
+
v-model="selectedOption"
|
|
74
|
+
@change="ChangeValue(item.id)"
|
|
75
|
+
:data-attributevalue="attribute.parent"
|
|
76
|
+
:data-child="item.parent"
|
|
77
|
+
:value="item.id"
|
|
78
|
+
:data-value="item.id"
|
|
79
|
+
type="radio"
|
|
80
|
+
:name="`button_attribute_${attribute.id}`"
|
|
81
|
+
:id="`button_attr_${attribute.id}_${item.id}`"
|
|
82
|
+
:checked="selectedOption === item.id"
|
|
83
|
+
/>
|
|
84
|
+
<label
|
|
85
|
+
class="value-label d-flex align-items-center justify-content-start gap-1 px-3 py-2 rounded border"
|
|
86
|
+
:for="`button_attr_${attribute.id}_${item.id}`">
|
|
87
|
+
<div class="d-flex align-items-center justify-content-center">
|
|
88
|
+
<img v-if="item.swatch && item.swatch != ''"
|
|
89
|
+
:src="item.swatch"
|
|
90
|
+
width="28"
|
|
91
|
+
height="28"
|
|
92
|
+
class="button-img object-fit-contain" />
|
|
93
|
+
<div v-else-if="item.iconcolor && item.iconcolor != '#ffffff'"
|
|
94
|
+
:style="{ backgroundColor: item.iconcolor }"
|
|
95
|
+
class="valueIcon">
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
<span class="value-title text-center text-truncate">{{ item.title }}</span>
|
|
99
|
+
</label>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
|
|
107
|
+
<style scoped>
|
|
108
|
+
input {
|
|
109
|
+
z-index: -1;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.valueIcon {
|
|
113
|
+
width: 24px;
|
|
114
|
+
height: 24px;
|
|
115
|
+
border-radius: 50%;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.buttonInput {
|
|
120
|
+
z-index: -1;
|
|
121
|
+
}
|
|
122
|
+
.buttonInput:checked ~ .value-label {
|
|
123
|
+
border: 1px solid var(--bs-secondary) !important;
|
|
124
|
+
background-color: #F5F7FB;
|
|
125
|
+
}
|
|
126
|
+
.buttonInput:checked ~ .value-label img {
|
|
127
|
+
background-color: #fff !important;
|
|
128
|
+
}
|
|
129
|
+
.buttonInput:checked ~ .value-label .value-title {
|
|
130
|
+
font-weight: bold;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.value-label {
|
|
134
|
+
cursor: pointer;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
font-size: 14px !important;
|
|
137
|
+
border: 1px solid #C8C8C8;
|
|
138
|
+
background-color: #F5F7FB;
|
|
139
|
+
}
|
|
140
|
+
.value-label .value-title {
|
|
141
|
+
font-weight: normal;
|
|
142
|
+
}
|
|
143
|
+
.value-label:hover {
|
|
144
|
+
border: 1px solid var(--bs-secondary) !important;
|
|
145
|
+
}
|
|
146
|
+
.value-label:hover img {
|
|
147
|
+
background-color: #fff;
|
|
148
|
+
}
|
|
149
|
+
</style>
|
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/button.vue.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const props: {
|
|
9
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
10
|
+
readonly group?: Record<string, any> | undefined;
|
|
11
|
+
};
|
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.d.vue.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const props: {
|
|
9
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
10
|
+
readonly group?: Record<string, any> | undefined;
|
|
11
|
+
};
|
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.vue
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { defineProps, ref, defineAsyncComponent } from "vue";
|
|
3
|
+
import contentPopup from "../PopupContent/Popup.vue";
|
|
4
|
+
const CustomScript = useCustomeScriptDynamic();
|
|
5
|
+
const props = defineProps({ "attribute": Object, "group": Object });
|
|
6
|
+
const { script } = useSingleValue(props.attribute);
|
|
7
|
+
const options = ref(props.attribute.values);
|
|
8
|
+
const selectedOption = ref(options.value[0]);
|
|
9
|
+
const isOpen = ref(false);
|
|
10
|
+
const toggleDropdown = () => {
|
|
11
|
+
isOpen.value = !isOpen.value;
|
|
12
|
+
};
|
|
13
|
+
const selectOption = (option) => {
|
|
14
|
+
selectedOption.value = option;
|
|
15
|
+
isOpen.value = false;
|
|
16
|
+
};
|
|
17
|
+
const closeDropDown = () => {
|
|
18
|
+
isOpen.value = false;
|
|
19
|
+
};
|
|
20
|
+
const ChangeValue = ((value) => {
|
|
21
|
+
const aid = props.attribute.id;
|
|
22
|
+
const gid = props.group.id;
|
|
23
|
+
const vid = value;
|
|
24
|
+
CustomScript.SelectedOptions = { aid, gid, vid };
|
|
25
|
+
CustomScript.initprocess();
|
|
26
|
+
});
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<template>
|
|
30
|
+
<div class="dropdown-attribute-wrapper dropdown-style-1 row">
|
|
31
|
+
<div class="col-md-4">
|
|
32
|
+
<label class="attribute-label mt-lg-2">
|
|
33
|
+
{{ attribute.title }}
|
|
34
|
+
<span v-if="attribute.required" class="text-danger">*</span>
|
|
35
|
+
<contentPopup :attribute="attribute" />
|
|
36
|
+
</label>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-md-8">
|
|
39
|
+
<div class="dropdown-select position-relative" @mouseleave="closeDropDown()">
|
|
40
|
+
<!-- Selected value display -->
|
|
41
|
+
<div class="selected position-relative rounded-2 ps-2" @click="toggleDropdown">
|
|
42
|
+
<input
|
|
43
|
+
class="dropdownInput position-absolute w-100 h-100"
|
|
44
|
+
:value="selectedOption.id"
|
|
45
|
+
:required="attribute.required"
|
|
46
|
+
type="radio"
|
|
47
|
+
:name="`dropdown_attribute_${attribute.id}`"
|
|
48
|
+
:id="`dropdown_selected_${attribute.id}`"
|
|
49
|
+
:checked="selectedOption.id === selectedOption.id"
|
|
50
|
+
/>
|
|
51
|
+
<span class="selected-title">{{ selectedOption.title || 'Select Option' }}</span>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<!-- Dropdown options -->
|
|
55
|
+
<ul v-show="isOpen" class="dropdown-options position-absolute list-unstyled">
|
|
56
|
+
<li
|
|
57
|
+
v-for="option in options"
|
|
58
|
+
:key="option.id"
|
|
59
|
+
@click="selectOption(option), ChangeValue(option.id)"
|
|
60
|
+
class="option-item position-relative"
|
|
61
|
+
:class="{ 'is-selected': option.id === selectedOption.id }"
|
|
62
|
+
>
|
|
63
|
+
<input
|
|
64
|
+
:data-label="attribute.title"
|
|
65
|
+
:required="attribute.required"
|
|
66
|
+
class="dropdownOptionInput position-absolute w-100 h-100"
|
|
67
|
+
:data-attributevalue="attribute.parent"
|
|
68
|
+
:data-child="option.parent"
|
|
69
|
+
:value="option.id"
|
|
70
|
+
:data-value="option.id"
|
|
71
|
+
type="radio"
|
|
72
|
+
:name="`dropdown_attribute_option_${attribute.id}`"
|
|
73
|
+
:id="`dropdown_option_${attribute.id}_${option.id}`"
|
|
74
|
+
:checked="option.id === selectedOption.id"
|
|
75
|
+
/>
|
|
76
|
+
<span class="option-title">{{ option.title }}</span>
|
|
77
|
+
</li>
|
|
78
|
+
</ul>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</template>
|
package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/dropdown.vue.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const props: {
|
|
9
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
10
|
+
readonly group?: Record<string, any> | undefined;
|
|
11
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
+
$props: Partial<typeof props>;
|
|
5
|
+
attribute?: Record<string, any> | undefined;
|
|
6
|
+
group?: Record<string, any> | undefined;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
8
|
+
declare const props: {
|
|
9
|
+
readonly attribute?: Record<string, any> | undefined;
|
|
10
|
+
readonly group?: Record<string, any> | undefined;
|
|
11
|
+
};
|