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

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?.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?.data?.content?.globalstyles?.globalCSS || "";
+  const css = data?.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>;
+    price?: any;
+    productData?: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly price?: any;
+    readonly productData?: any;
+};

package/dist/runtime/components/product/PopUpCart.vue

@@ -0,0 +1,155 @@
+<script setup>
+const { productData, price } = defineProps(["productData", "price"]);
+const companyProfile = useCompanyProfile().profile.data;
+</script>
+
+<template>
+<div>
+    <div class="modals modal">
+        <div class="modal-dialog modal-dialog-centered opacity-100">
+            <div class="modal-content rounded-0">
+                <div class="modal-body pb-0 position-relative px-4">
+                    <div class="card mb-lg-3 border-0 bg-transparent position-relative">
+                        <button type="button" class="btn-close d-none d-md-block" @click="$emit('some-event')"></button>
+                        <div class="row gy-0 align-items-center">
+                            <div class="col-12 col-md-3 col-xl-2 d-flex align-items-center">
+                                <img :src="productData.image" height="300px" class="img-fluid image w-100"
+                                    :alt="productData.name">
+                            </div>
+                            <div class="col-12 col-sm-8 col-md-9 col-xl-10 d-flex align-items-center">
+                                <div class="card-body w-100">
+                                    <p class="fw-normal mb-0 fs-6">Added to your shopping cart</p>
+                                    <p class="fw-bold mb-2" v-if="Number(price)>0">{{ productData.name }} - <span class="text-primary">{{ companyProfile.currencySymbol  }} {{
+                                        price }}</span></p>
+                                    <p class="fw-bold mb-2 fs-4 mt-2" v-else>{{ productData.name }} - <span class="text-primary"> {{ companyProfile.currencySymbol }}{{
+                                        useCustomeScriptDynamic().productPrice || productData?.price }}</span></p>
+                                    <p class="text-secondary fw-bold mb-0 fs-6 mt-2">You can continue shopping or move to your
+                                        shopping cart
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer d-flex flex-row flex-wrap flex-md-nowrap mt-0 px-4">
+                    <button type="button" class="btn rounded-pill btn-secondary w-100 fw-semibold text-white" @click="$emit('someEvent')"> Continue Shopping</button>
+                    <NuxtLink :to="{ path:'/checkout/cart'}" class="btn rounded-pill btn-outline-secondary w-100 text-dark shadow-none fw-semibold border">View your shopping
+                        cart <i class="bi bi-chevron-right"></i> </NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style scoped>
+.modal {
+  z-index: 9999909999;
+  background-color: rgba(51, 51, 51, 0.55);
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+}
+.modal .modal-dialog {
+  max-width: 700px;
+  width: 75%;
+}
+.modal .modal-dialog .image {
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+}
+
+.btn-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  z-index: 10;
+  opacity: 0.6;
+  transition: opacity 0.2s ease;
+}
+.btn-close:hover {
+  opacity: 1;
+}
+
+@media only screen and (max-width: 768px) {
+  .modal-dialog {
+    width: 92% !important;
+    max-width: 400px !important;
+    margin: auto !important;
+    padding: 1rem !important;
+  }
+  .modal-content {
+    border-radius: 16px !important;
+    animation: fadeInScale 0.25s ease-out !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
+  }
+  .modal-body {
+    padding: 1rem 1.25rem 0.5rem !important;
+  }
+  /* Alternative position: Inside modal but top-right */
+  /* .btn-close {
+      position: absolute !important;
+      top: 0.75rem !important;
+      right: 0.75rem !important;
+      width: 36px !important;
+      height: 36px !important;
+      padding: 0.5rem !important;
+      opacity: 0.8 !important;
+      background-size: 1rem !important;
+      background-color: rgba(255, 255, 255, 0.95) !important;
+      border-radius: 50% !important;
+      backdrop-filter: blur(4px) !important;
+      z-index: 1000 !important;
+  } */
+  .modal-footer {
+    flex-direction: column !important;
+    gap: 0.625rem !important;
+    padding: 0.75rem 1.25rem 1.25rem !important;
+    border-top: 1px solid #f1f3f5 !important;
+  }
+  .card-body {
+    padding-right: 2rem !important;
+  }
+  .card-body p.fs-5 {
+    font-size: 0.8375rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .card-body p.fs-4 {
+    font-size: 1.4625rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .card-body p.fs-6 {
+    font-size: 0.8125rem !important;
+    line-height: 1.4 !important;
+    font-weight: 500 !important;
+  }
+  .card-body .fw-bold.mb-2 {
+    font-size: 0.875rem !important;
+    line-height: 1.3 !important;
+    max-height: 2.6em !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    display: block !important;
+  }
+  .image {
+    height: 195px !important;
+    border-radius: 6px !important;
+    object-fit: cover !important;
+  }
+  .row.g-0 {
+    gap: 0.75rem !important;
+  }
+}
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

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

package/dist/runtime/components/product/ProductInfo.d.vue.ts

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

package/dist/runtime/components/product/ProductInfo.vue

@@ -0,0 +1,105 @@
+<script setup>
+import ProductAddToCart from "./AddToCart.vue";
+const { product } = defineProps(["product"]);
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: "smooth" });
+}
+</script>
+
+<template>
+    <div v-if="product.type == 'custom'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3 rounded-4" />
+            <h2 class="mb-0 fs-4 me-4 fw-semibold">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="pricecontent fs-2 fw-bold text-primary">
+                    $<span class="price_span">{{ useCustomeScriptDynamic().productPrice }}</span>
+                </span>
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="useCustomeScriptDynamic().productDiscountedPrice > 0">
+                    $<span id="dis_price">{{ useCustomeScriptDynamic().productDiscountedPrice }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                    class="bi bi-arrow-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                        d="M8 12a.5.5 0 0 0 .5-.5V4.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 4.707V11.5A.5.5 0 0 0 8 12z" />
+                </svg> -->
+            </button>
+        </div>
+    </div>
+    <div v-if="product.type == 'simple'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3" />
+            <h2 class="mb-0 me-4 fs-4">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="product.rpfloat > product.pricefloat">
+                    <span id="dis_price">{{ product.rp }}</span>
+                </span>
+                <span class="pricecontent fs-1 fw-bold text-primary">
+                    <span class="price_span">{{ product.price }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                    class="bi bi-arrow-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd"
+                        d="M8 12a.5.5 0 0 0 .5-.5V4.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 4.707V11.5A.5.5 0 0 0 8 12z" />
+                </svg>
+            </button>
+        </div>
+    </div>
+    <div v-if="product?.type === 'bundle'"
+        class="fixed-product-info align-items-center justify-content-between py-2 px-5 d-none d-xl-flex">
+        <div class="d-flex align-items-center">
+            <img :src="product?.image" alt="Product Image" class="product-image me-3" />
+            <h2 class="mb-0 me-4 fs-4">{{ product?.name }}</h2>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div class="price lh-1 d-flex justify-content-start gap-3 align-items-center">
+                <span class="if-discounted text-danger text-decoration-line-through"
+                    v-if="product.rpfloat > product.pricefloat">
+                    <span id="dis_price">{{ product.rp }}</span>
+                </span>
+                <span class="pricecontent fs-1 fw-bold text-primary">
+                    <span class="price_span">{{ product.price }}</span>
+                </span>
+            </div>
+            <ProductAddToCart from="detailpage" :product="product" service="" />
+            <button class="btn" @click="scrollToTop" title="Go to top">
+                <div class="d-flex flex-column align-items-center p-0 m-0" style="gap:0; line-height:0;">
+                    <i class="p-0 m-0" style="display:block; line-height:0; height:20px; overflow:hidden;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="34" viewBox="0 0 24 24">
+                            <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" d="m17 14l-5-5m0 0l-5 5" />
+                        </svg>
+                    </i>
+                    <i class="p-0 m-0" style="display:block; line-height:0; height:24px; overflow:hidden;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            style="display:block; vertical-align:middle;">
+                            <g fill="none" stroke="#000" stroke-linejoin="round" stroke-width="1.5">
+                                <path d="M6 9a6 6 0 0 1 12 0v6a6 6 0 0 1-12 0z" />
+                                <path stroke-linecap="round" d="M12 7v4" />
+                            </g>
+                        </svg>
+                    </i>
+                </div>
+
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.fixed-product-info{background:#fff;border-top:1px solid #eee;bottom:0;box-shadow:0 -2px 8px rgba(0,0,0,.05);left:0;position:fixed;width:100%;z-index:2}.product-image{border-radius:8px;height:50px;-o-object-fit:contain;object-fit:contain;width:64px}
+</style>

package/dist/runtime/components/product/ProductInfo.vue.d.ts

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

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