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

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

@@ -0,0 +1,269 @@
+<script setup>
+import { ref, watch } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import SlideSlide from "./SingleSlidemagnifier.vue";
+import contentPopup from "../PopupContent/Popup.vue";
+const CustomScript = useCustomeScriptDynamic();
+import "swiper/swiper-bundle.css";
+import { Navigation, Virtual } from "swiper/modules";
+const { attribute, group } = defineProps({ "attribute": Object, "group": Object });
+const { script } = useSingleValue(attribute);
+function goToPrev() {
+  document.querySelector(`.swiper-container${attribute.id}`).swiper.slidePrev();
+}
+function goToNext() {
+  document.querySelector(`.swiper-container${attribute.id}`).swiper.slideNext();
+}
+const colorspopupShow = ref(false);
+const popupOpen = ((index, key) => {
+  showColorLargeImage(index, key);
+});
+const showColorLargeImage = ((index, key) => {
+  colorspopupShow.value = key;
+  setTimeout(function() {
+    let curentpopup = document.querySelector(`#colorspopup_${key}`);
+    let colorimages = curentpopup.querySelector(".colors-images");
+    let images = colorimages.querySelectorAll(".colors-image");
+    images.forEach((image) => {
+      image.style.display = "none";
+      image.classList.remove("active");
+    });
+    let colorimage = colorimages.querySelector(".ColorImageIndex_" + index);
+    colorimage.style.display = "block";
+    colorimage.classList.add("active");
+  }, 500);
+});
+const closecolorspopup = (() => {
+  colorspopupShow.value = false;
+});
+const NextColorImage = ((key) => {
+  let curentpopup = document.querySelector(`#colorspopup_${key}`);
+  let colorimages = curentpopup.querySelector(".colors-images");
+  let curentImage = colorimages.querySelector(".colors-image.active");
+  let children = colorimages.querySelectorAll(".colors-image");
+  let firstChild = children[0];
+  if (curentImage.nextSibling != null && curentImage.nextSibling.classList != void 0 && Object.values(curentImage.nextSibling.classList).indexOf("colors-image") > -1) {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    curentImage.nextSibling.style.display = "block";
+    curentImage.nextSibling.classList.add("active");
+  } else {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    firstChild.style.display = "block";
+    firstChild.classList.add("active");
+  }
+});
+const PrevColorImage = ((key) => {
+  let curentpopup = document.querySelector(`#colorspopup_${key}`);
+  let colorimages = curentpopup.querySelector(".colors-images");
+  let curentImage = colorimages.querySelector(".colors-image.active");
+  let children = colorimages.querySelectorAll(".colors-image");
+  let lastChild = children[children.length - 1];
+  if (curentImage.previousSibling != null && curentImage.previousSibling.classList != void 0 && Object.values(curentImage.previousSibling.classList).indexOf("colors-image") > -1) {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    curentImage.previousSibling.style.display = "block";
+    curentImage.previousSibling.classList.add("active");
+  } else {
+    curentImage.style.display = "none";
+    curentImage.classList.remove("active");
+    lastChild.style.display = "block";
+    lastChild.classList.add("active");
+  }
+});
+const groupedObjects = (objects) => {
+  const groups = {};
+  objects.forEach((obj) => {
+    const parent = obj.parent;
+    if (!groups[parent]) {
+      groups[parent] = [];
+    }
+    groups[parent].push(obj);
+  });
+  return groups;
+};
+const checkParent = ref("");
+watch(
+  () => CustomScript.SelectedOptions,
+  // This is the state you're watching
+  (newValue, oldValue) => {
+  },
+  { deep: true }
+  // Add this if you want to deeply watch nested objects or arrays
+);
+</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;">
+                <template v-for="(atitems, key) in groupedObjects(attribute.values)">
+                    <span v-if="atitems.length > 5" @click="goToPrev()"
+                        :class="[`icon-arrow-left icon-arrow-left${attribute.id}${key}`, { 'd-none': checkParent != key }]"></span>
+                    <span v-if="atitems.length > 5" @click="goToNext()"
+                        :class="[`icon-arrow-right icon-arrow-right${attribute.id}${key}`, { 'd-none': checkParent != key }]"></span>
+
+                </template>
+            </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${attribute.id}${key}`, prevEl: `.icon-arrow-left${attribute.id}${key}` }">
+                        <SwiperSlide v-for="(slideContent, index) in atitems" :key="index" :virtualIndex="index">
+                            <SlideSlide @popupOpen="popupOpen(index, key)" :group="group" :attribute="attribute"
+                                :slide="slideContent" />
+                        </SwiperSlide>
+                    </Swiper>
+                </div>
+
+                <div :id="`colorspopup_${atitems[0].parent}`" class="colorspopup"
+                    :class="{ 'active': colorspopupShow == atitems[0].parent }" v-if="colorspopupShow == atitems[0].parent">
+                    <div class="modal-dialog modal-dialog-centered modal-lg">
+                        <div class="modal-content">
+                            <button @click="closecolorspopup()" type="button" class="btn-close" data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                            <div class="modal-body colors-images">
+                                <div v-for="(item, index) in atitems" :class="`ColorImageIndex_${index}`" :key="index"
+                                    class="colors-image">
+                                    <img :src="item.swatch" width="100%">
+                                    <div class="text-center mt-2">
+                                        <div class="h3 fw-bold">{{ item.title }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="colorImagesNav">
+                                <button @click="PrevColorImage()" type="button"><svg xmlns="http://www.w3.org/2000/svg"
+                                        width="36" height="36" viewBox="0 0 24 24">
+                                        <path fill="currentColor"
+                                            d="m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z" />
+                                    </svg></button>
+                                <button @click="NextColorImage()" type="button"><svg xmlns="http://www.w3.org/2000/svg"
+                                        width="36" height="36" viewBox="0 0 24 24">
+                                        <path fill="currentColor"
+                                            d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z" />
+                                    </svg></button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<style>
+.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(--iseek-secondary);
+}
+.slider-nav-buttons .icon-arrow-left.swiper-button-disabled,
+.slider-nav-buttons .icon-arrow-right.swiper-button-disabled {
+  background: #ccc;
+  opacity: 0.5;
+}
+.slider-nav-buttons .icon-arrow-left,
+.slider-nav-buttons .icon-arrow-right {
+  /* top: 50%; */
+  /* transform: translateY(-50%); */
+  /* z-index: 10; */
+}
+
+.attributeslider .swiper-slide {
+  height: unset !important;
+  overflow: hidden;
+}
+
+.swiper-container .swiper-slide {
+  height: unset !important;
+  overflow: hidden;
+}
+
+.modal-dialog {
+  opacity: 0;
+  transition-duration: 20000ms;
+}
+.modal-dialog .modal-content {
+  position: relative;
+}
+.modal-dialog .modal-content .btn-close {
+  background-color: var(--bs-white);
+  position: absolute;
+  right: -20px;
+  top: -20px;
+  z-index: 2;
+}
+
+.colorspopup {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.5019607843);
+}
+.colorspopup.active .modal-dialog {
+  opacity: 1;
+}
+
+.colors-images {
+  position: relative;
+  padding: 10px;
+  background: #fff;
+  border-radius: 20px;
+}
+.colors-images .colors-image {
+  display: none;
+  border-radius: 20px;
+  overflow: hidden;
+}
+.colors-images .colors-image img {
+  border: 1px solid #ccc;
+  width: 450px;
+  height: 450px;
+}
+.colors-images .colors-image:first-child {
+  display: block;
+}
+
+.colorImagesNav {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 50px;
+  font-size: 38px;
+  line-height: 1;
+  top: calc(50% - 25px);
+}
+.colorImagesNav button {
+  background-color: #fff;
+  border: 0;
+  color: var(--iseek-primary);
+}
+.colorImagesNav button:hover {
+  background-color: var(--iseek-secondary);
+}
+</style>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/sliderWithMagnifier.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 __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;
+};

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subheight.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/subheight.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent } 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 correctValue = ref(true);
+const ChangeValue = ((value) => {
+  SelecteValue.value = Math.floor(Number(value));
+  value = Math.floor(Number(value));
+  correctValue.value = true;
+  if (SelecteValue.value < props.attribute.min) {
+    correctValue.value = false;
+    SelecteValue.value = "";
+  } else if (SelecteValue.value > props.attribute.max) {
+    correctValue.value = false;
+    SelecteValue.value = "";
+  } else {
+    const aid = props.attribute.id;
+    const gid = props.group.id;
+    const vid = value;
+    CustomScript.SelectedOptions = { aid, gid, vid };
+    CustomScript.initprocess();
+  }
+});
+</script>
+
+<template>
+<div id="ilxf55" class="subheight-attribute-wrapper">
+  <div id="iedxsc" class="subheight-attribute-wrapper label-top">
+    
+    <label id="ikqvu4" class="attribute-label">
+      Subheight
+      <span id="ixu2va" class="required-mark">*</span>
+    </label>
+    
+    <small id="ip8gqf" class="min-max-text d-none"></small>
+    
+    <div id="icfk6l" class="input-group">
+      
+      <span id="iemoag" class="input-icon d-none">
+        <img id="iwbvlp" alt="Subheight" width="28" class="subheighticon">
+      </span>
+      
+      <input
+        id="attribute_subheight_value"
+        type="text"
+        name="attribute_id[subheight]"
+        placeholder="500"
+        required="required"
+        class="subheight-input"
+      >
+      
+      <span id="im4rnf" class="input-unit d-none"></span>
+    
+    </div>
+    
+    <p id="i97lun" class="error-message d-none"></p>
+  
+  </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subheight.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/subwidth.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/subwidth.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { defineProps, ref, defineAsyncComponent } 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 correctValue = ref(true);
+const ChangeValue = ((value) => {
+  SelecteValue.value = Math.floor(Number(value));
+  value = Math.floor(Number(value));
+  correctValue.value = true;
+  if (SelecteValue.value < props.attribute.min) {
+    correctValue.value = false;
+    SelecteValue.value = "";
+  } else if (SelecteValue.value > props.attribute.max) {
+    correctValue.value = false;
+    SelecteValue.value = "";
+  } else {
+    const aid = props.attribute.id;
+    const gid = props.group.id;
+    const vid = value;
+    CustomScript.SelectedOptions = { aid, gid, vid };
+    CustomScript.initprocess();
+  }
+});
+</script>
+
+<template>
+  <div id="iklge2" class="subwidth-attribute-wrapper gjs-selected">
+  <div id="iw8rq2" class="subwidth-attribute-wrapper label-top">
+    
+    <label id="ifnn9w" class="attribute-label">
+      Subwidth
+      <span id="iwapeq" class="required-mark">*</span>
+    </label>
+    
+    <small id="ihfbse" class="min-max-text d-none"></small>
+    
+    <div id="i9u6im" class="input-group">
+      
+      <span id="iw2aoy" class="input-icon d-none">
+        <img id="imcr8i" alt="Subwidth" width="28" class="subwidthicon">
+      </span>
+      
+      <input
+        id="attribute_subwidth_value"
+        type="text"
+        name="attribute_id[subwidth]"
+        placeholder="500"
+        required="required"
+        class="subwidth-input"
+      >
+      
+      <span id="ipey8j" class="input-unit d-none"></span>
+    
+    </div>
+    
+    <p id="i5xigy" class="error-message d-none"></p>
+  
+  </div>
+</div>
+</template>

package/dist/runtime/components/product/customProduct/AttributesComponents/Styles/subwidth.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/swatch.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;
+};