flowrix 1.0.1-beta.16 → 1.0.1-beta.160

package/dist/runtime/components/Product/AddtoCartSample.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    samples: Array<any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Badges.d.vue.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Badges.vue

@@ -0,0 +1,84 @@
+<script setup>
+const props = defineProps({
+  productData: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div class="badges">
+    <template v-for="(badge, index) in productData.badges">
+      <div class="single-badge" :class="badge.position" v-if="badge.image">
+        <img :src="badge.image" width="100%" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.badges {
+  position: absolute;
+  z-index: 9;
+  top: 0px;
+  left: 0px;
+  width: calc(100% - 15px);
+  height: calc(100% - 10px);
+  user-select: none;
+  pointer-events: none;
+}
+.badges .single-badge {
+  width: 100px;
+}
+.badges .single-badge.top-left {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.badges .single-badge.top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.badges .single-badge.top-center {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.badges .single-badge.middle-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.badges .single-badge.middle-right {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.badges .single-badge.middle-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.badges .single-badge.bottom-left {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.badges .single-badge.bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.badges .single-badge.bottom-center {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+</style>

package/dist/runtime/components/Product/Badges.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    productData: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Description.d.vue.ts

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

package/dist/runtime/components/Product/Description.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+defineProps(["product"]);
+const isMobile = ref(false);
+const checkMobile = () => {
+  isMobile.value = window.innerWidth < 768;
+};
+onMounted(() => {
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", checkMobile);
+});
+</script>
+
+<template>
+    <div class="accordion mt-5" id="accordionDescription">
+        <div class="accordion-item" v-if="product && product.description">
+            <h2 class="accordion-header">
+                <button 
+                    class="accordion-button" 
+                    :class="{ 'collapsed': !isMobile }"
+                    type="button" 
+                    data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseOne" 
+                    :aria-expanded="isMobile"
+                    aria-controls="flush-collapseOne">
+                    Product Details
+                </button>
+            </h2>
+            <div 
+                id="flush-collapseOne" 
+                class="accordion-collapse collapse"
+                :class="{ 'show': isMobile }"
+                data-bs-parent="#accordionDescription">
+                <div class="accordion-body" v-html="product.description"></div>
+            </div>
+        </div>
+        <div class="accordion-item" v-if="product && product.specs && product.specs.length > 0">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+                    Manufacturing & Delivery 
+                </button>
+            </h2>
+            <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionDescription">
+                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
+                    <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this
+                    being filled with some actual content.
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item" v-if="product && product.instructions && product.instructions.length > 0">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
+                    Measuring Guide
+                </button>
+            </h2>
+            <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionDescription">
+                <div class="accordion-body">
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item p-0" v-for="items in product.instructions" :key="items.id">
+                            <a :href="items.file" target="_blank">{{ items.title }}</a>
+                            <div v-html="items.description"></div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.accordion-item {
+  margin-bottom: 20px;
+  border-radius: 10px;
+}
+.accordion-item:not(:first-of-type) {
+  border-top: 1px solid #dee2e6;
+}
+.accordion-item .accordion-button {
+  border-radius: 10px !important;
+  font-weight: 600;
+}
+.accordion-item .accordion-button:focus {
+  box-shadow: unset;
+}
+.accordion-item .accordion-button:not(.collapsed) {
+  background: none;
+  box-shadow: unset;
+  border-bottom: 1px solid #ddd;
+  border-radius: 0 !important;
+}
+</style>

package/dist/runtime/components/Product/Description.vue.d.ts

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

package/dist/runtime/components/Product/Dynamic.d.vue.ts

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    product?: any;
+    data?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    product?: any;
+    data?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Dynamic.vue

@@ -0,0 +1,136 @@
+<script setup>
+import productAttribute from "./customProduct/Attributes.vue";
+import { useRoute } from "vue-router";
+import { useHead } from "#app";
+import { useCustomeScriptDynamic } from "../../composables/Product/CustomProductDynamic/useCustomeScriptDynamic";
+const route = useRoute();
+const { data, product } = defineProps(["data", "product"]);
+const variabledata = product.data;
+const CustomScript = useCustomeScriptDynamic();
+CustomScript.attributeIdz = variabledata.attributeIdz;
+CustomScript.lookupprices = variabledata.lookupprices;
+CustomScript.servicePriceSetting = variabledata.servicePriceSetting;
+CustomScript.conditions = variabledata.conditions;
+CustomScript.TYPES = variabledata.types;
+CustomScript.PRICETYPE = variabledata.pricetypes;
+CustomScript.UNIT_RELATIVE = variabledata.unit_relative;
+CustomScript.DISCOUNTS = variabledata.discounts;
+CustomScript.measurementUnit = variabledata.unit;
+CustomScript.promotionSettings = variabledata.promotionSettings;
+CustomScript.linked_promotionSettings = variabledata.inherit_promotions;
+CustomScript.B2BTYPE = variabledata.b2btype;
+CustomScript.USEBASEPRICE = variabledata.usebaseprice;
+CustomScript.BASEPRICE = variabledata.baseprice;
+CustomScript.usefitting = variabledata.usefitting;
+CustomScript.sevice_price_type = variabledata.servicePriceSetting?.sevice_price_type;
+CustomScript.serviceprice = 0;
+onMounted(() => {
+  if (dynamicRef.value) {
+    const container = dynamicRef.value.querySelector(".product-attributes-wrapper");
+    if (container) {
+      container.innerHTML = "";
+      attributeTeleportTarget.value = container;
+    }
+  }
+});
+onUnmounted(() => {
+  CustomScript.renderdValues = 0;
+});
+const applyDynamicSSR = (async (html, variables = {}) => {
+  if (!html || typeof html !== "string") return html ?? "";
+  return html.replace(
+    /<(p|h[1-5])([^>]*data-dynamic="true"[^>]*)>([\s\S]*?)<\/\1>/gi,
+    (match, tag, attrs) => {
+      const fieldMatch = attrs.match(/data-dynamic-field="([^"]+)"/);
+      if (!fieldMatch) return match;
+      const fieldName = fieldMatch[1];
+      const value = variables[fieldName];
+      if (value === void 0) return match;
+      return `<${tag}${attrs}>${value}</${tag}>`;
+    }
+  );
+});
+const injectProductSliderHTML = (html, datahtml) => {
+  if (!html || typeof html !== "string") return html ?? "";
+  let images = datahtml?.images;
+  if (!images || !Array.isArray(images) || images.length === 0) return html;
+  const total = images.length;
+  const mainSlidesHTML = images.map((item, index) => `
+    <div
+      data-gjs-type="product-slide"
+      class="swiper-slide"
+      role="group"
+      aria-label="${index + 1} / ${total}"
+      data-swiper-slide-index="${index}"
+    >
+      <img src="${item.image}" alt="Product Image ${index + 1}">
+    </div>
+  `).join("");
+  const thumbSlidesHTML = images.map((item, index) => `
+    <div
+      data-gjs-type="product-thumb-slide"
+      class="swiper-slide"
+      role="group"
+      aria-label="${index + 1} / ${total}"
+    >
+      <img src="${item.image}" alt="Product Image ${index + 1}">
+    </div>
+  `).join("");
+  html = html.replace(
+    /(<div[^>]*class="[^"]*swiper-wrapper[^"]*"[^>]*>)[\s\S]*?(<\/div>)/,
+    `$1${mainSlidesHTML}$2`
+  );
+  html = html.replace(
+    /(<div[^>]*class="[^"]*thumb-slider-container[\s\S]*?<div[^>]*class="[^"]*swiper-wrapper[^"]*"[^>]*>)[\s\S]*?(<\/div>)/,
+    `$1${thumbSlidesHTML}$2`
+  );
+  return html;
+};
+const htmlFromCMS = data?.content?.html ?? "";
+const finalHTML = await applyDynamicSSR(htmlFromCMS, variabledata);
+const finalHTMLSlider = await injectProductSliderHTML(finalHTML, variabledata);
+const hasAttributeContainer = /class="[^"]*product-attributes-wrapper[^"]*"/.test(finalHTML);
+const dynamicRef = ref(null);
+const attributeTeleportTarget = ref(null);
+function scopeCss(css, scope = ".dynamicContent") {
+  if (!css || typeof css !== "string") return "";
+  return css.replace(
+    /(^|})\s*([^@}{]+)\s*\{/g,
+    (match, brace, selector) => {
+      const scopedSelector = selector.split(",").map((sel) => {
+        sel = sel.trim();
+        if (sel.startsWith(scope)) return sel;
+        sel = sel.replace(/^body\b/, "").replace(/^html\b/, "").replace(/^\*/, "").trim();
+        return sel ? `${scope} ${sel}` : scope;
+      }).join(", ");
+      return `${brace} ${scopedSelector} {`;
+    }
+  );
+}
+useHead(() => {
+  const Globalcss = data?.content?.globalstyles?.globalCSS || "";
+  const css = data?.content?.css || "";
+  if (!css) return {};
+  return {
+    style: [
+      {
+        children: scopeCss(css),
+        id: "scoped-css",
+        type: "text/css"
+      },
+      {
+        children: Globalcss,
+        id: "global-css",
+        type: "text/css"
+      }
+    ]
+  };
+});
+</script>
+
+<template>
+  <div class="dynamicContent" ref="dynamicRef" v-html="finalHTML"></div>
+  <Teleport :to="attributeTeleportTarget" v-if="attributeTeleportTarget">
+    <productAttribute :product="variabledata" />
+  </Teleport>
+</template>

package/dist/runtime/components/Product/Dynamic.vue.d.ts

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{
+    product?: any;
+    data?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    product?: any;
+    data?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Gallery.d.vue.ts

@@ -0,0 +1,11 @@
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+declare const __VLS_export: import("vue").DefineComponent<{
+    productData?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    productData?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/Gallery.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { Swiper, SwiperSlide } from "swiper/vue";
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+import Badges from "./Badges.vue";
+import { FreeMode, Navigation, Thumbs, Mousewheel } from "swiper/modules";
+const modules = [FreeMode, Navigation, Thumbs, Mousewheel];
+defineProps(["productData"]);
+const isMobile = ref(false);
+if (typeof window !== "undefined") {
+  const checkMobile = () => {
+    isMobile.value = window.innerWidth <= 1200;
+  };
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
+}
+const thumbsSwiper = ref(null);
+const setThumbsSwiper = (swiper) => {
+  thumbsSwiper.value = swiper;
+};
+function goToSlide(index) {
+  if (!thumbsSwiper.value) return;
+  thumbsSwiper.value.slideTo(index);
+}
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-xl-3 col-12" v-if="productData.images && productData.images.length > 0">
+      <Swiper  :direction="isMobile ? 'horizontal' : 'vertical'"
+         @swiper="setThumbsSwiper"
+  :spaceBetween="isMobile ? 15 : 40"
+  :centeredSlides="true"
+  :centeredSlidesBounds="true"
+  :slidesPerView="3"
+  :modules="[]"
+  :class="isMobile ? 'mySwiper mt-3' : 'mySwiper'"
+  >
+        <SwiperSlide v-for="(item, index) in productData.images" :key="'thumb-' + index">
+          <div class="product-slider-img" @click="goToSlide(index)">
+            <img :src="item.image" class="img-fluid rounded-4 cursor-pointer" />
+          </div>
+        </SwiperSlide>
+      </Swiper>
+    </div>
+    <div :class="
+  productData.images && productData.images.length > 0 ? 'col-xl-9 col-12 order-first order-xl-last position-relative' : 'col-12 position-relative'
+">
+      <Badges :productData />
+      <Swiper v-if="productData.images && productData.images.length > 0" :style="{
+  '--swiper-navigation-color': '#000',
+  '--swiper-pagination-color': '#000'
+}" :spaceBetween="10" :loop="true" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" class="mySwiper2">
+        <SwiperSlide v-for="(item, index) in productData.images" :key="index">
+          <img :src="item.image" class="img-fluid rounded-4 w-100" />
+
+          <div class="discount-offer position-absolute top-0 z-1 ms-5" v-if="item.percentOff">
+            <img :src="item.percentOff" alt="15 Percent Off" class="img-fluid" />
+          </div>
+          <div v-if="item.badge"
+            class="text-white rounded-5 text-center px-4 mt-2 me-5 p-1 position-absolute top-0 end-0 z-1 bg-green">
+            {{ item.badge }}
+          </div>
+        </SwiperSlide>
+      </Swiper>
+      <div v-else-if="productData.image" class="mySwiper2">
+        <Badges :productData />
+        <img :src="productData.image" class="img-fluid rounded-4 w-100" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.mySwiper {
+  height: 410px;
+  scroll-behavior: smooth;
+}
+.mySwiper img {
+  height: 120px;
+  object-fit: cover;
+  padding-left: 3px;
+  width: 100%;
+}
+
+.swiper-slide-thumb-active img {
+  padding-left: 3px;
+}
+.swiper-slide-thumb-active .product-slider-img {
+  border-left: 3px solid var(--bs-secondary);
+}
+
+.bg-green {
+  background-color: var(--bs-green);
+}
+
+@media only screen and (max-width: 768px) {
+  .mySwiper img {
+    height: 100%;
+  }
+  .mySwiper .swiper-slide-thumb-active img {
+    border-bottom: 2px solid var(--bs-secondary);
+    padding-bottom: 3px;
+    border-left: 0 !important;
+    border-radius: 0 !important;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .mySwiper {
+    height: auto;
+    width: 100%;
+  }
+}
+@media only screen and (min-width: 1201px) and (max-width: 1400px) {
+  .mySwiper {
+    height: 375px;
+  }
+  .mySwiper img {
+    height: 100px;
+  }
+}
+@media only screen and (min-width: 1401px) {
+  .mySwiper {
+    height: 440px;
+  }
+}
+</style>

package/dist/runtime/components/Product/Gallery.vue.d.ts

@@ -0,0 +1,11 @@
+import "swiper/css";
+import "swiper/css/free-mode";
+import "swiper/css/navigation";
+import "swiper/css/thumbs";
+declare const __VLS_export: import("vue").DefineComponent<{
+    productData?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    productData?: any;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Product/PopUpCart.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>;
+    productData?: any;
+    price?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly productData?: any;
+    readonly price?: any;
+};