flowrix 1.0.1-beta.147 → 1.0.1-beta.149

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/message.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { defineProps, ref } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const SelecteValue = ref(props.attribute.value);
+const ChangeValue = ((value) => {
+  const aid = props.attribute.id;
+  const gid = props.group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+});
+</script>
+
+<template>
+ <div id="itm1vy" class="number-attribute-wrapper gjs-selected">
+  <div id="ikpyfr" class="number-attribute-wrapper label-top">
+    
+    <label id="i89qtk" class="attribute-label">
+      Number
+      <span id="ibt4zj" class="required-mark">*</span>
+    </label>
+
+    <div id="i6ky1m" class="input-group">
+      
+      <span id="ikzbqa" class="input-icon d-none">
+        <img id="ifwoeg" alt="Number" width="25">
+      </span>
+
+      <input
+        id="attribute_number_value"
+        type="number"
+        name="attribute_id[number]"
+        placeholder="0"
+        required="required"
+        class="number-input"
+      >
+    
+    </div>
+
+  </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/number.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.d.vue.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+    item?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+    readonly item?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { defineProps, ref, defineEmits } from "vue";
+const { attribute, item, group } = defineProps({ "attribute": Object, "item": Object, "group": Object });
+const addingtoCart = ref(false);
+const checkInCart = ((sample) => {
+  let cartItems = useCartStore().cart.items;
+  if (cartItems) {
+    for (const key in cartItems) {
+      if (cartItems[key].slug === sample) {
+        return true;
+      }
+    }
+  }
+  return false;
+});
+const addToCartSample = (async (sample) => {
+  addingtoCart.value = true;
+  await useCartStore().addToCart(sample, 1);
+  addingtoCart.value = false;
+});
+const removeFromCart = async (sample) => {
+  let productId = "";
+  let cartItems = useCartStore().cart.items;
+  if (cartItems) {
+    for (const key in cartItems) {
+      if (cartItems[key].slug === sample.slug) {
+        productId = cartItems[key].rowId;
+      }
+    }
+  }
+  await useCartStore().removeFromCart(productId, sample);
+};
+</script>
+
+<template>
+    <span v-if="attribute.offer_sample == true && item.sampleproduct!=''">
+        <div v-if="checkInCart(item.sampleproduct) == false"
+            @click="addToCartSample({ slug: item.sampleproduct })" class="btn btn-sm colorbutton btn-outline-secondary lh-1 py-2">Order Sample</div>
+        <div v-else @click="removeFromCart({ slug: item.sampleproduct })"
+            class="btn btn-sm colorbutton btn-primary">Remove Sample</div>
+    </span>
+</template>
+
+<style scoped>
+.colorbutton {
+  font-size: 1em !important;
+}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/orderSample/button.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+    item?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+    readonly item?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.vue

@@ -0,0 +1,154 @@
+<script setup>
+import { defineProps, ref } from "vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const SelectedItem = props.attribute.values.find((i) => i.selected === true);
+const SelecteValue = ref(0);
+if (SelectedItem) {
+  SelecteValue.value = SelectedItem.id;
+}
+const ChangeValue = ((value) => {
+  const aid = props.attribute.id;
+  const gid = props.group.id;
+  const vid = value;
+  CustomScript.SelectedOptions = { aid, gid, vid };
+  CustomScript.initprocess();
+});
+</script>
+
+<template>
+   <div class="product-radio-wrapper radio-style-1 row">
+    <div class="col-md-4">
+        <label class="attribute-label">
+            {{ attribute.title }}
+            <span v-if="attribute.required" class="text-danger">*</span>
+            <contentPopup :attribute="attribute" />
+        </label>
+    </div>
+    <div class="col-md-8">
+        <div class="row g-2">
+            <div class="col-6" v-for="item in attribute.values" :key="item.id">
+                <div class="value-item position-relative h-100">
+                    <input 
+                        :data-label="attribute.title"
+                        class="buttonInput position-absolute w-100 h-100"
+                        v-model="selectedValue"
+                        :required="attribute.required"
+                        @change="ChangeValue(item.id)"
+                        :data-attributevalue="attribute.parent"
+                        :data-child="item.parent"
+                        :value="item.id"
+                        :data-value="item.id"
+                        type="radio"
+                        :name="`product_attribute_${attribute.id}`"
+                        :id="`attribute_${attribute.id}_${item.id}`"
+                        :checked="selectedValue === item.id"
+                    />
+                    <label 
+                        class="value-label d-flex align-items-center justify-content-start gap-2 p-3 rounded border h-100"
+                        :for="`attribute_${attribute.id}_${item.id}`">
+                        <div class="radio-icon">
+                            <span class="radio-outer">
+                                <span class="radio-inner"></span>
+                            </span>
+                        </div>
+                        <div class="d-flex align-items-center justify-content-center">
+                            <img v-if="item.swatch && item.swatch != ''" 
+                                :src="item.swatch" 
+                                width="20" 
+                                height="20" 
+                                class="object-fit-contain" />
+                            <div v-else-if="item.iconcolor && item.iconcolor != '#ffffff'"
+                                :style="{ backgroundColor: item.iconcolor }" 
+                                class="valueIcon">
+                            </div>
+                        </div>
+                        <span class="value-title text-center text-truncate">{{ item.title }}</span>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style scoped>
+input {
+  z-index: -1;
+}
+
+.valueIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.radio-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.radio-outer {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #C8C8C8;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.radio-inner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: all 0.2s ease;
+}
+
+.buttonInput {
+  z-index: -1;
+}
+.buttonInput:checked ~ .value-label {
+  border-color: var(--bs-secondary) !important;
+  background-color: #F5F7FB;
+}
+.buttonInput:checked ~ .value-label img {
+  background-color: #fff !important;
+}
+.buttonInput:checked ~ .value-label .value-title {
+  font-weight: bold;
+}
+.buttonInput:checked ~ .value-label .radio-outer {
+  border-color: var(--bs-secondary);
+}
+.buttonInput:checked ~ .value-label .radio-inner {
+  background-color: var(--bs-secondary);
+}
+
+.value-label {
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 14px !important;
+  border: 1px solid #C8C8C8;
+  background-color: #F5F7FB;
+}
+.value-label .value-title {
+  font-weight: normal;
+}
+.value-label:hover {
+  border: 1px solid var(--bs-secondary) !important;
+}
+.value-label:hover img {
+  background-color: #fff;
+}
+.value-label:hover .radio-outer {
+  border-color: var(--bs-secondary);
+}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/radio.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { watch, ref } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import contentPopup from "../PopupContent/Popup.vue";
+import SlideSlide from "./SingleSlide.vue";
+import "swiper/swiper-bundle.css";
+const CustomScript = useCustomeScriptDynamic();
+import { Navigation, Virtual } from "swiper/modules";
+const props = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(props.attribute);
+const selectedSlideId = ref(0);
+const initialSelected = props.attribute.values.find((item) => item.selected === true);
+if (initialSelected) {
+  selectedSlideId.value = initialSelected.id;
+}
+function goToPrev() {
+  document.querySelector(`.swiper-container${props.attribute.id}`).swiper.slidePrev();
+}
+function goToNext() {
+  document.querySelector(`.swiper-container${props.attribute.id}`).swiper.slideNext();
+}
+const handleSlideSelect = (slideId) => {
+  selectedSlideId.value = slideId;
+};
+const groupedObjects = (objects) => {
+  const groups = {};
+  objects.forEach((obj) => {
+    const parent = obj.parent;
+    if (!groups[parent]) {
+      groups[parent] = [];
+    }
+    groups[parent].push(obj);
+  });
+  return groups;
+};
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-md-12 d-flex justify-content-between ">
+      <label class="attribute-label">{{ attribute.title }}
+        <span v-if="attribute.required" class="text-danger">*</span>
+        <contentPopup :attribute="attribute" />
+      </label>
+      <div class="slider-nav-buttons d-flex gap-3 justify-content-end" style="opacity: 1;">
+        <span @click="goToPrev()" :class="`icon-arrow-left icon-arrow-left${props.attribute.id}`"></span>
+        <span @click="goToNext()" :class="`icon-arrow-right icon-arrow-right${props.attribute.id}`"></span>
+      </div>
+    </div>
+    <div class="col-md-12">
+      <template v-for="(atitems, key) in groupedObjects(attribute.values)">
+        <div :class="`attributeslider swiper-container_${key}`">
+          <!-- Swiper -->
+          <Swiper 
+            :modules="[Virtual, Navigation]" 
+            :slides-per-view="4" 
+            :space-between="20" 
+            virtual
+            :navigation="{ 
+              nextEl: `.icon-arrow-right${props.attribute.id}`, 
+              prevEl: `.icon-arrow-left${props.attribute.id}` 
+            }">
+            <SwiperSlide v-for="(slideContent, index) in atitems" :key="slideContent.id" :virtualIndex="index">
+              <SlideSlide 
+                :attribute="attribute" 
+                :group="group" 
+                :slide="slideContent"
+                :isSelected="selectedSlideId === slideContent.id"
+                @select="handleSlideSelect"
+              />
+            </SwiperSlide>
+          </Swiper>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slider-nav-buttons .icon-arrow-left,
+.slider-nav-buttons .icon-arrow-right {
+  color: #fff;
+  cursor: pointer;
+  background: #333;
+  border-radius: 50%;
+  place-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  display: flex;
+}
+.slider-nav-buttons .icon-arrow-left:hover,
+.slider-nav-buttons .icon-arrow-right:hover {
+  background: var(--bs-secondary);
+}
+.slider-nav-buttons .icon-arrow-left.swiper-button-disabled,
+.slider-nav-buttons .icon-arrow-right.swiper-button-disabled {
+  background: #ccc;
+  opacity: 0.5;
+}
+
+.attributeslider .swiper-slide {
+  height: unset !important;
+  overflow: hidden;
+}
+
+.swiper-button-disabled {
+  opacity: 0 !important;
+}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/slider.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/sliderWithMagnifier.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    attribute?: Record<string, any> | undefined;
+    group?: Record<string, any> | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly attribute?: Record<string, any> | undefined;
+    readonly group?: Record<string, any> | undefined;
+};