@ozdao/martyrs 0.2.480 → 0.2.482

package/dist/martyrs/src/modules/products/components/blocks/ProductDiscounts.vue.js

@@ -1,12 +1,9 @@
-import { computed, createElementBlock, createCommentVNode, openBlock, createElementVNode, createVNode, Fragment, renderList, withCtx, toDisplayString, createBlock } from "vue";
+import { computed, createElementBlock, createCommentVNode, openBlock, createElementVNode, createVNode, Fragment, renderList, withCtx, toDisplayString } from "vue";
 import _sfc_main$1 from "../../../icons/entities/IconDiscount.vue.js";
 import _sfc_main$3 from "../../../../components/Chips/Chips.vue2.js";
 import _sfc_main$2 from "../../../../components/Tooltip/Tooltip.vue2.js";
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "mn-t-large mn-b-large"
-};
+const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { class: "mn-b-small flex-nowrap flex flex-v-center" };
 const _hoisted_3 = { class: "flex flex-column flex-wrap gap-thin" };
 const _hoisted_4 = ["onClick"];
@@ -17,7 +14,10 @@ const _hoisted_8 = {
   key: 0,
   class: "t-small mn-t-thin t-transp"
 };
-const _hoisted_9 = { class: "mn-t-small" };
+const _hoisted_9 = {
+  key: 1,
+  class: "mn-t-small"
+};
 const _sfc_main = {
   __name: "ProductDiscounts",
   props: {
@@ -92,7 +92,7 @@ const _sfc_main = {
             var _a, _b;
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: "discount-card pd-medium radius-medium br-1px br-solid br-light cursor-pointer hover-scale-1",
+              class: "discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer",
               onClick: ($event) => selectDiscount(discount)
             }, [
               createElementVNode("div", _hoisted_5, [
@@ -107,13 +107,12 @@ const _sfc_main = {
                 createElementVNode("span", _hoisted_7, toDisplayString(_ctx.returnCurrency()) + toDisplayString(discount.value) + " per " + toDisplayString(((_a = currentVariant.value) == null ? void 0 : _a.quantity) || 1) + toDisplayString(((_b = currentVariant.value) == null ? void 0 : _b.unit) || _ctx.pcs), 1)
               ]),
               discount.description ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(discount.description), 1)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_9, [
-                getConditionsAsChips.length > 0 ? (openBlock(), createBlock(_sfc_main$3, {
-                  key: 0,
+              getConditionsAsChips(discount).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                createVNode(_sfc_main$3, {
                   class: "",
                   chips: getConditionsAsChips(discount)
-                }, null, 8, ["chips"])) : createCommentVNode("", true)
-              ])
+                }, null, 8, ["chips"])
+              ])) : createCommentVNode("", true)
             ], 8, _hoisted_4);
           }), 128))
         ])
@@ -121,7 +120,7 @@ const _sfc_main = {
     };
   }
 };
-const ProductDiscounts = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d7e1163a"]]);
+const ProductDiscounts = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5d1ccd1"]]);
 export {
   ProductDiscounts as default
 };

package/dist/martyrs/src/modules/products/components/blocks/ProductDiscounts.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductDiscounts.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductDiscounts.vue"],"sourcesContent":["<template>\n  <div v-if=\"discounts && discounts.length\" class=\"mn-t-large mn-b-large\">\n    <div class=\"mn-b-small flex-nowrap flex flex-v-center\">\n      <IconDiscount class=\"mn-r-micro i-medium\"/>\n      <p class=\"t-medium\">Special Offers</p>\n    </div>\n\n    <div class=\"flex flex-column flex-wrap gap-thin\">\n      <div \n        v-for=\"(discount, index) in discounts\" \n        :key=\"index\" \n        class=\"discount-card pd-medium radius-medium br-1px br-solid br-light cursor-pointer hover-scale-1\"\n        @click=\"selectDiscount(discount)\"\n      >\n        <div class=\"flex flex-wrap gap-thin flex-v-center w-100\">\n\n          <Tooltip :text=\"discount.description || 'No description'\">\n            <span class=\"discount-name t-semi p-medium\">{{ discount.name }}</span>\n          </Tooltip>\n\n          <span class=\"t-main p-medium\">\n            {{returnCurrency()}}{{ discount.value }} per {{ currentVariant?.quantity || 1 }}{{ currentVariant?.unit || pcs }}\n          </span>\n\n        </div>\n        \n        <p v-if=\"discount.description\" class=\"t-small mn-t-thin t-transp\">{{ discount.description }}</p>\n\n        <div class=\"mn-t-small\"><Chips v-if=\"getConditionsAsChips.length > 0\" class=\"\" :chips=\"getConditionsAsChips(discount)\" /></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport IconDiscount from '@martyrs/src/modules/icons/entities/IconDiscount.vue'\nimport Chips from '@martyrs/src/components/Chips/Chips.vue';\nimport Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue';\n\nconst props = defineProps({\n  discounts: { \n    type: Array, \n    default: () => [] \n  },\n  regularPrice: { \n    type: [String, Number], \n    default: 0 \n  },\n  selectedVariant: {\n    type: Object,\n    default: null\n  },\n  productVariants: {\n    type: Array,\n    default: () => []\n  }\n});\n\nconst emit = defineEmits(['select-discount']);\n\n// Helper to determine if a discount has date conditions\nconst hasDateCondition = (discount) => {\n  return discount.date && (discount.date.start || discount.date.end);\n};\n\n// Helper to determine if a discount has time conditions\nconst hasTimeCondition = (discount) => {\n  return discount.time && (discount.time.start || discount.time.end);\n};\n\n// Format date range for display\nconst formatDateRange = (dateRange) => {\n  if (!dateRange) return '';\n  \n  const start = dateRange.start ? new Date(dateRange.start).toLocaleDateString() : 'Anytime';\n  const end = dateRange.end ? new Date(dateRange.end).toLocaleDateString() : 'No end date';\n  \n  return `${start}-${end}`;\n};\n\n// Format time range for display\nconst formatTimeRange = (timeRange) => {\n  if (!timeRange) return '';\n  \n  const start = timeRange.start || 'Anytime';\n  const end = timeRange.end || 'No end time';\n  \n  // Check if we're referencing today\n  const now = new Date();\n  const isToday = true; // Simplification - in a real app we'd check if the date range includes today\n  \n  return isToday ? `${start}-${end} today` : `${start}-${end}`;\n};\n\n// Get the current variant (selected or default to first)\nconst currentVariant = computed(() => {\n  return props.selectedVariant || (props.productVariants?.length > 0 ? props.productVariants[0] : null);\n});\n\nconst getConditionsAsChips = (discount) => {\n  const chips = [];\n  \n  // Quantity condition - используем quantity из текущего варианта, а не из скидки\n  // if (currentVariant.value?.quantity && currentVariant.value.quantity > 0) {\n  //   chips.push({ \n  //     text: `+${discount.quantity}`, \n  //   });\n  // }\n  \n  // Date condition\n  if (hasDateCondition(discount)) {\n    chips.push({ \n      text: `Valid: ${formatDateRange(discount.date)}` \n    });\n  }\n  \n  // Time condition\n  if (hasTimeCondition(discount)) {\n    chips.push({ \n      text: `Available: ${formatTimeRange(discount.time)}` \n    });\n  }\n  \n  return chips;\n};\n// Handle discount selection\nconst selectDiscount = (discount) => {\n  emit('select-discount', discount);\n};\n</script>\n\n<style scoped>\n.discount-card {\n  transition: all 0.2s ease;\n}\n\n.discount-card:hover {\n  border-color: rgb(var(--main));\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,UAAM,QAAQ;AAmBd,UAAM,OAAO;AAGb,UAAM,mBAAmB,CAAC,aAAa;AACrC,aAAO,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,KAAK;AAAA,IAChE;AAGA,UAAM,mBAAmB,CAAC,aAAa;AACrC,aAAO,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,KAAK;AAAA,IAChE;AAGA,UAAM,kBAAkB,CAAC,cAAc;AACrC,UAAI,CAAC,UAAW,QAAO;AAEvB,YAAM,QAAQ,UAAU,QAAQ,IAAI,KAAK,UAAU,KAAK,EAAE,mBAAkB,IAAK;AACjF,YAAM,MAAM,UAAU,MAAM,IAAI,KAAK,UAAU,GAAG,EAAE,mBAAkB,IAAK;AAE3E,aAAO,GAAG,KAAK,IAAI,GAAG;AAAA,IACxB;AAGA,UAAM,kBAAkB,CAAC,cAAc;AACrC,UAAI,CAAC,UAAW,QAAO;AAEvB,YAAM,QAAQ,UAAU,SAAS;AACjC,YAAM,MAAM,UAAU,OAAO;AAM7B,aAAiB,GAAG,KAAK,IAAI,GAAG;AAAA,IAClC;AAGA,UAAM,iBAAiB,SAAS,MAAM;;AACpC,aAAO,MAAM,sBAAoB,WAAM,oBAAN,mBAAuB,UAAS,IAAI,MAAM,gBAAgB,CAAC,IAAI;AAAA,IAClG,CAAC;AAED,UAAM,uBAAuB,CAAC,aAAa;AACzC,YAAM,QAAQ,CAAE;AAUhB,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,UAAU,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACpD,CAAK;AAAA,MACL;AAGE,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,cAAc,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACxD,CAAK;AAAA,MACL;AAEE,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,WAAK,mBAAmB,QAAQ;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProductDiscounts.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductDiscounts.vue"],"sourcesContent":["<template>\n  <div v-if=\"discounts && discounts.length\">\n    <div class=\"mn-b-small flex-nowrap flex flex-v-center\">\n      <IconDiscount class=\"mn-r-micro i-medium\"/>\n      <p class=\"t-medium\">Special Offers</p>\n    </div>\n\n    <div class=\"flex flex-column flex-wrap gap-thin\">\n      <div \n        v-for=\"(discount, index) in discounts\" \n        :key=\"index\" \n        class=\"discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer \"\n        @click=\"selectDiscount(discount)\"\n      >\n        <div class=\"flex flex-wrap gap-thin flex-v-center w-100\">\n\n          <Tooltip :text=\"discount.description || 'No description'\">\n            <span class=\"discount-name t-semi p-medium\">{{ discount.name }}</span>\n          </Tooltip>\n\n          <span class=\"t-main p-medium\">\n            {{returnCurrency()}}{{ discount.value }} per {{ currentVariant?.quantity || 1 }}{{ currentVariant?.unit || pcs }}\n          </span>\n\n        </div>\n        \n        <p v-if=\"discount.description\" class=\"t-small mn-t-thin t-transp\">{{ discount.description }}</p>\n        <div v-if=\"getConditionsAsChips(discount).length > 0\" class=\"mn-t-small\"><Chips  class=\"\" :chips=\"getConditionsAsChips(discount)\" /></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport IconDiscount from '@martyrs/src/modules/icons/entities/IconDiscount.vue'\nimport Chips from '@martyrs/src/components/Chips/Chips.vue';\nimport Tooltip from '@martyrs/src/components/Tooltip/Tooltip.vue';\n\nconst props = defineProps({\n  discounts: { \n    type: Array, \n    default: () => [] \n  },\n  regularPrice: { \n    type: [String, Number], \n    default: 0 \n  },\n  selectedVariant: {\n    type: Object,\n    default: null\n  },\n  productVariants: {\n    type: Array,\n    default: () => []\n  }\n});\n\nconst emit = defineEmits(['select-discount']);\n\n// Helper to determine if a discount has date conditions\nconst hasDateCondition = (discount) => {\n  return discount.date && (discount.date.start || discount.date.end);\n};\n\n// Helper to determine if a discount has time conditions\nconst hasTimeCondition = (discount) => {\n  return discount.time && (discount.time.start || discount.time.end);\n};\n\n// Format date range for display\nconst formatDateRange = (dateRange) => {\n  if (!dateRange) return '';\n  \n  const start = dateRange.start ? new Date(dateRange.start).toLocaleDateString() : 'Anytime';\n  const end = dateRange.end ? new Date(dateRange.end).toLocaleDateString() : 'No end date';\n  \n  return `${start}-${end}`;\n};\n\n// Format time range for display\nconst formatTimeRange = (timeRange) => {\n  if (!timeRange) return '';\n  \n  const start = timeRange.start || 'Anytime';\n  const end = timeRange.end || 'No end time';\n  \n  // Check if we're referencing today\n  const now = new Date();\n  const isToday = true; // Simplification - in a real app we'd check if the date range includes today\n  \n  return isToday ? `${start}-${end} today` : `${start}-${end}`;\n};\n\n// Get the current variant (selected or default to first)\nconst currentVariant = computed(() => {\n  return props.selectedVariant || (props.productVariants?.length > 0 ? props.productVariants[0] : null);\n});\n\nconst getConditionsAsChips = (discount) => {\n  const chips = [];\n  \n  // Quantity condition - используем quantity из текущего варианта, а не из скидки\n  // if (currentVariant.value?.quantity && currentVariant.value.quantity > 0) {\n  //   chips.push({ \n  //     text: `+${discount.quantity}`, \n  //   });\n  // }\n  \n  // Date condition\n  if (hasDateCondition(discount)) {\n    chips.push({ \n      text: `Valid: ${formatDateRange(discount.date)}` \n    });\n  }\n  \n  // Time condition\n  if (hasTimeCondition(discount)) {\n    chips.push({ \n      text: `Available: ${formatTimeRange(discount.time)}` \n    });\n  }\n  \n  return chips;\n};\n// Handle discount selection\nconst selectDiscount = (discount) => {\n  emit('select-discount', discount);\n};\n</script>\n\n<style scoped>\n.discount-card {\n  transition: all 0.2s ease;\n}\n\n.discount-card:hover {\n  border-color: rgb(var(--main));\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,UAAM,QAAQ;AAmBd,UAAM,OAAO;AAGb,UAAM,mBAAmB,CAAC,aAAa;AACrC,aAAO,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,KAAK;AAAA,IAChE;AAGA,UAAM,mBAAmB,CAAC,aAAa;AACrC,aAAO,SAAS,SAAS,SAAS,KAAK,SAAS,SAAS,KAAK;AAAA,IAChE;AAGA,UAAM,kBAAkB,CAAC,cAAc;AACrC,UAAI,CAAC,UAAW,QAAO;AAEvB,YAAM,QAAQ,UAAU,QAAQ,IAAI,KAAK,UAAU,KAAK,EAAE,mBAAkB,IAAK;AACjF,YAAM,MAAM,UAAU,MAAM,IAAI,KAAK,UAAU,GAAG,EAAE,mBAAkB,IAAK;AAE3E,aAAO,GAAG,KAAK,IAAI,GAAG;AAAA,IACxB;AAGA,UAAM,kBAAkB,CAAC,cAAc;AACrC,UAAI,CAAC,UAAW,QAAO;AAEvB,YAAM,QAAQ,UAAU,SAAS;AACjC,YAAM,MAAM,UAAU,OAAO;AAM7B,aAAiB,GAAG,KAAK,IAAI,GAAG;AAAA,IAClC;AAGA,UAAM,iBAAiB,SAAS,MAAM;;AACpC,aAAO,MAAM,sBAAoB,WAAM,oBAAN,mBAAuB,UAAS,IAAI,MAAM,gBAAgB,CAAC,IAAI;AAAA,IAClG,CAAC;AAED,UAAM,uBAAuB,CAAC,aAAa;AACzC,YAAM,QAAQ,CAAE;AAUhB,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,UAAU,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACpD,CAAK;AAAA,MACL;AAGE,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,cAAc,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACxD,CAAK;AAAA,MACL;AAEE,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,WAAK,mBAAmB,QAAQ;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/products/components/blocks/ProductImages.vue.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
 const PhotoViewer = require("../../../../components/PhotoViewer/PhotoViewer.vue.cjs");
 const PlaceholderImage = require("../../../icons/placeholders/PlaceholderImage.vue.cjs");
 const Image360 = require("../elements/Image360.vue.cjs");
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const _hoisted_1 = { class: "w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative" };
+const _hoisted_1 = { class: "w-100 bs-heavy h-max mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = {
   key: 0,
-  class: "o-scroll w-100 pd-semi pd-t-zero"
+  class: "mobile:order-1 order-0 w-5r mobile:w-100"
 };
-const _hoisted_4 = { class: "no-responsive w-max flex flex-nowrap gap-thin" };
+const _hoisted_4 = { class: "w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin" };
 const _hoisted_5 = ["src", "onClick"];
 const _sfc_main = {
   __name: "ProductImages",
@@ -27,22 +27,25 @@ const _sfc_main = {
     }
   },
   setup(__props) {
+    const props = __props;
     const isPopupVisible = vue.ref(false);
-    const selectedImage = vue.ref(null);
-    const openPopup = (image) => {
-      if (!image) return;
-      selectedImage.value = image;
+    const selectedImageIndex = vue.ref(0);
+    const currentImageIndex = vue.ref(0);
+    const openPopup = (index) => {
+      if (!props.images.length) return;
+      selectedImageIndex.value = index;
       isPopupVisible.value = true;
     };
     const closePopup = () => {
+      selectedImageIndex.value = 0;
       isPopupVisible.value = false;
     };
     return (_ctx, _cache) => {
       var _a, _b;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", {
-          class: "pd-semi w-100 bg-light radius-semi o-hidden",
-          onClick: _cache[0] || (_cache[0] = ($event) => openPopup(__props.images[0]))
+          class: "order-1 w-100 bg-light radius-small o-hidden",
+          onClick: _cache[0] || (_cache[0] = ($event) => openPopup(currentImageIndex.value))
         }, [
           __props.product && __props.product.image3d ? (vue.openBlock(), vue.createBlock(Image360.default, {
             key: 0,
@@ -50,41 +53,47 @@ const _sfc_main = {
             imagePath: `/assets/images/products/${__props.product.image3d}`,
             imageCount: 36
           }, null, 8, ["imagePath"])) : vue.createCommentVNode("", true),
-          __props.images[0] && !((_a = __props.product) == null ? void 0 : _a.image3d) ? (vue.openBlock(), vue.createElementBlock("img", {
+          __props.images[currentImageIndex.value] && !((_a = __props.product) == null ? void 0 : _a.image3d) ? (vue.openBlock(), vue.createElementBlock("img", {
             key: 1,
             loading: "lazy",
-            class: "h-max h-max-15r bg-white radius-semi w-100",
+            class: "h-100 flex-child-default bg-white radius-small w-100",
             style: { "object-fit": "contain" },
-            src: (_ctx.FILE_SERVER_URL || "") + __props.images[0]
+            src: (_ctx.FILE_SERVER_URL || "") + __props.images[currentImageIndex.value]
           }, null, 8, _hoisted_2)) : vue.createCommentVNode("", true),
-          !__props.images[0] && !((_b = __props.product) == null ? void 0 : _b.image3d) ? (vue.openBlock(), vue.createBlock(PlaceholderImage.default, {
+          !__props.images[currentImageIndex.value] && !((_b = __props.product) == null ? void 0 : _b.image3d) ? (vue.openBlock(), vue.createBlock(PlaceholderImage.default, {
             key: 2,
-            class: "h-max-20r h-100 w-100",
+            class: "h-100 w-100",
             style: { "object-fit": "cover" }
           })) : vue.createCommentVNode("", true)
         ]),
         __props.images.length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
           vue.createElementVNode("div", _hoisted_4, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.images, (image, index) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.images.slice(0, 5), (image, index) => {
               return vue.openBlock(), vue.createElementBlock("img", {
                 loading: "lazy",
                 key: index,
                 src: (_ctx.FILE_SERVER_URL || "") + image,
-                onClick: ($event) => openPopup(image),
-                class: "flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
-              }, null, 8, _hoisted_5);
-            }), 128))
+                onClick: ($event) => currentImageIndex.value = index,
+                class: vue.normalizeClass(["aspect-1x1 radius-small bg-white o-hidden thumbnail", { "active": currentImageIndex.value === index }])
+              }, null, 10, _hoisted_5);
+            }), 128)),
+            __props.images.length > 5 ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              onClick: _cache[1] || (_cache[1] = ($event) => openPopup(5)),
+              class: "aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white"
+            }, " +" + vue.toDisplayString(__props.images.length - 5), 1)) : vue.createCommentVNode("", true)
           ])
         ])) : vue.createCommentVNode("", true),
         vue.createVNode(Popup.default, {
           onClosePopup: closePopup,
           isPopupOpen: isPopupVisible.value,
-          class: "radius-medium o-hidden"
+          class: "radius-zero o-hidden"
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(PhotoViewer.default, {
-              photoUrl: (_ctx.FILE_SERVER_URL || "") + selectedImage.value
-            }, null, 8, ["photoUrl"])
+              photos: __props.images.map((img) => (_ctx.FILE_SERVER_URL || "") + img),
+              initialIndex: selectedImageIndex.value
+            }, null, 8, ["photos", "initialIndex"])
           ]),
           _: 1
         }, 8, ["isPopupOpen"])
@@ -92,6 +101,6 @@ const _sfc_main = {
     };
   }
 };
-const ProductImages = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-641e5bb0"]]);
+const ProductImages = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-38ae846b"]]);
 exports.default = ProductImages;
 //# sourceMappingURL=ProductImages.vue.cjs.map

package/dist/martyrs/src/modules/products/components/blocks/ProductImages.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProductImages.vue.cjs","sources":["../../../../../../../src/modules/products/components/blocks/ProductImages.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative\">\n    <!-- Main image container -->\n    <div class=\"pd-semi w-100 bg-light radius-semi o-hidden\" @click=\"openPopup(images[0])\">\n      <Image360\n        v-if=\"product && product.image3d\"\n        class=\"h-100 w-100\"\n        :imagePath=\"`/assets/images/products/${product.image3d}`\"\n        :imageCount=\"36\"\n      />\n      <img\n        loading=\"lazy\"\n        v-if=\"images[0] && !product?.image3d\"\n        class=\"h-max h-max-15r bg-white radius-semi w-100\"\n        style=\"object-fit: contain;\"\n        :src=\"(FILE_SERVER_URL || '') + images[0]\"\n      />\n      <PlaceholderImage\n        v-if=\"!images[0] && !product?.image3d\"\n        class=\"h-max-20r h-100 w-100\"\n        style=\"object-fit: cover;\"\n      />\n    </div>\n    \n    <!-- Thumbnails -->\n    <div v-if=\"images.length > 1\" class=\"o-scroll w-100 pd-semi pd-t-zero\">\n      <div class=\"no-responsive w-max flex flex-nowrap gap-thin\">\n        <img loading=\"lazy\" \n          v-for=\"(image, index) in images\"\n          :key=\"index\"\n          :src=\"(FILE_SERVER_URL || '') + image\" \n          @click=\"openPopup(image)\"\n          class=\"flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail\"\n        />\n      </div>\n    </div>\n    \n    <!-- Popup with photo viewer -->\n    <Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-medium o-hidden\">\n      <PhotoViewer\n        :photoUrl=\"(FILE_SERVER_URL || '') + selectedImage\"\n      />\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';\n\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\n\nimport Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'\n\nconst props = defineProps({\n  images: {\n    type: Array,\n    required: true,\n  },\n  product: {\n    type: Object,\n    default: () => ({})\n  },\n});\n\nconst isPopupVisible = ref(false);\nconst selectedImage = ref(null);\n\nconst openPopup = (image) => {\n  if (!image) return;\n  selectedImage.value = image;\n  isPopupVisible.value = true;\n};\n\nconst closePopup = () => {\n  isPopupVisible.value = false;\n};\n</script>\n\n<style scoped>\n.thumbnail {\n  width: 100%;\n  max-width: 6rem;\n  height: 6rem;\n  object-fit: cover;\n  cursor: pointer;\n}\n</style>"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,UAAM,iBAAiBA,IAAG,IAAC,KAAK;AAChC,UAAM,gBAAgBA,IAAG,IAAC,IAAI;AAE9B,UAAM,YAAY,CAAC,UAAU;AAC3B,UAAI,CAAC,MAAO;AACZ,oBAAc,QAAQ;AACtB,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,MAAM;AACvB,qBAAe,QAAQ;AAAA,IACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProductImages.vue.cjs","sources":["../../../../../../../src/modules/products/components/blocks/ProductImages.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 bs-heavy h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative\">\n    <!-- Main image container -->\n    <div class=\"order-1 w-100 bg-light radius-small o-hidden\" @click=\"openPopup(currentImageIndex)\">\n      <Image360\n        v-if=\"product && product.image3d\"\n        class=\"h-100 w-100\"\n        :imagePath=\"`/assets/images/products/${product.image3d}`\"\n        :imageCount=\"36\"\n      />\n      <img\n        loading=\"lazy\"\n        v-if=\"images[currentImageIndex] && !product?.image3d\"\n        class=\"h-100 flex-child-default bg-white radius-small w-100\"\n        style=\"object-fit: contain;\"\n        :src=\"(FILE_SERVER_URL || '') + images[currentImageIndex]\"\n      />\n      <PlaceholderImage\n        v-if=\"!images[currentImageIndex] && !product?.image3d\"\n        class=\"h-100 w-100\"\n        style=\"object-fit: cover;\"\n      />\n    </div>\n    \n    <!-- Thumbnails -->\n    <div v-if=\"images.length > 1\" class=\"mobile:order-1 order-0 w-5r mobile:w-100\">\n      <div class=\"w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin\">\n        <img loading=\"lazy\" \n          v-for=\"(image, index) in images.slice(0, 5)\"\n          :key=\"index\"\n          :src=\"(FILE_SERVER_URL || '') + image\" \n          @click=\"currentImageIndex = index\"\n          class=\"aspect-1x1 radius-small bg-white o-hidden thumbnail\"\n          :class=\"{ 'active': currentImageIndex === index }\"\n        />\n        <div\n          v-if=\"images.length > 5\"\n          @click=\"openPopup(5)\"\n          class=\"aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white \"\n        >\n          +{{ images.length - 5 }}\n        </div>\n      </div>\n    </div>\n    \n    <!-- Popup with photo viewer -->\n    <Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-zero o-hidden\">\n      <PhotoViewer\n        :photos=\"images.map(img => (FILE_SERVER_URL || '') + img)\"\n        :initialIndex=\"selectedImageIndex\"\n      />\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\nimport Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'\n\nconst props = defineProps({\n  images: {\n    type: Array,\n    required: true,\n  },\n  product: {\n    type: Object,\n    default: () => ({})\n  },\n});\n\nconst isPopupVisible = ref(false);\nconst selectedImageIndex = ref(0);\nconst currentImageIndex = ref(0);\n\nconst openPopup = (index) => {\n  if (!props.images.length) return;\n  selectedImageIndex.value = index;\n  isPopupVisible.value = true;\n};\n\nconst closePopup = () => {\n  selectedImageIndex.value = 0;\n  isPopupVisible.value = false;\n};\n</script>\n\n<style scoped>\n.thumbnail {\n  width: 100%;\n  object-fit: cover;\n  cursor: pointer;\n}\n.thumbnail.active {\n  border: 1px solid rgb(var(--second));\n}\n</style>"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,UAAM,QAAQ;AAWd,UAAM,iBAAiBA,IAAG,IAAC,KAAK;AAChC,UAAM,qBAAqBA,IAAG,IAAC,CAAC;AAChC,UAAM,oBAAoBA,IAAG,IAAC,CAAC;AAE/B,UAAM,YAAY,CAAC,UAAU;AAC3B,UAAI,CAAC,MAAM,OAAO,OAAQ;AAC1B,yBAAmB,QAAQ;AAC3B,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,MAAM;AACvB,yBAAmB,QAAQ;AAC3B,qBAAe,QAAQ;AAAA,IACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/products/components/blocks/ProductImages.vue.js

@@ -1,16 +1,16 @@
-import { ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, createBlock, Fragment, renderList, withCtx } from "vue";
-import _sfc_main$1 from "../../../../components/Popup/Popup.vue.js";
-import _sfc_main$2 from "../../../../components/PhotoViewer/PhotoViewer.vue.js";
+import { ref, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, createBlock, Fragment, renderList, normalizeClass, toDisplayString, withCtx } from "vue";
+import _sfc_main$1 from "../../../../components/Popup/Popup.vue2.js";
+import PhotoViewer from "../../../../components/PhotoViewer/PhotoViewer.vue.js";
 import PlaceholderImage from "../../../icons/placeholders/PlaceholderImage.vue.js";
 import Image360 from "../elements/Image360.vue.js";
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative" };
+const _hoisted_1 = { class: "w-100 bs-heavy h-max mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = {
   key: 0,
-  class: "o-scroll w-100 pd-semi pd-t-zero"
+  class: "mobile:order-1 order-0 w-5r mobile:w-100"
 };
-const _hoisted_4 = { class: "no-responsive w-max flex flex-nowrap gap-thin" };
+const _hoisted_4 = { class: "w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin" };
 const _hoisted_5 = ["src", "onClick"];
 const _sfc_main = {
   __name: "ProductImages",
@@ -25,22 +25,25 @@ const _sfc_main = {
     }
   },
   setup(__props) {
+    const props = __props;
     const isPopupVisible = ref(false);
-    const selectedImage = ref(null);
-    const openPopup = (image) => {
-      if (!image) return;
-      selectedImage.value = image;
+    const selectedImageIndex = ref(0);
+    const currentImageIndex = ref(0);
+    const openPopup = (index) => {
+      if (!props.images.length) return;
+      selectedImageIndex.value = index;
       isPopupVisible.value = true;
     };
     const closePopup = () => {
+      selectedImageIndex.value = 0;
       isPopupVisible.value = false;
     };
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
-          class: "pd-semi w-100 bg-light radius-semi o-hidden",
-          onClick: _cache[0] || (_cache[0] = ($event) => openPopup(__props.images[0]))
+          class: "order-1 w-100 bg-light radius-small o-hidden",
+          onClick: _cache[0] || (_cache[0] = ($event) => openPopup(currentImageIndex.value))
         }, [
           __props.product && __props.product.image3d ? (openBlock(), createBlock(Image360, {
             key: 0,
@@ -48,41 +51,47 @@ const _sfc_main = {
             imagePath: `/assets/images/products/${__props.product.image3d}`,
             imageCount: 36
           }, null, 8, ["imagePath"])) : createCommentVNode("", true),
-          __props.images[0] && !((_a = __props.product) == null ? void 0 : _a.image3d) ? (openBlock(), createElementBlock("img", {
+          __props.images[currentImageIndex.value] && !((_a = __props.product) == null ? void 0 : _a.image3d) ? (openBlock(), createElementBlock("img", {
             key: 1,
             loading: "lazy",
-            class: "h-max h-max-15r bg-white radius-semi w-100",
+            class: "h-100 flex-child-default bg-white radius-small w-100",
             style: { "object-fit": "contain" },
-            src: (_ctx.FILE_SERVER_URL || "") + __props.images[0]
+            src: (_ctx.FILE_SERVER_URL || "") + __props.images[currentImageIndex.value]
           }, null, 8, _hoisted_2)) : createCommentVNode("", true),
-          !__props.images[0] && !((_b = __props.product) == null ? void 0 : _b.image3d) ? (openBlock(), createBlock(PlaceholderImage, {
+          !__props.images[currentImageIndex.value] && !((_b = __props.product) == null ? void 0 : _b.image3d) ? (openBlock(), createBlock(PlaceholderImage, {
             key: 2,
-            class: "h-max-20r h-100 w-100",
+            class: "h-100 w-100",
             style: { "object-fit": "cover" }
           })) : createCommentVNode("", true)
         ]),
         __props.images.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [
           createElementVNode("div", _hoisted_4, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.images, (image, index) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.images.slice(0, 5), (image, index) => {
               return openBlock(), createElementBlock("img", {
                 loading: "lazy",
                 key: index,
                 src: (_ctx.FILE_SERVER_URL || "") + image,
-                onClick: ($event) => openPopup(image),
-                class: "flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
-              }, null, 8, _hoisted_5);
-            }), 128))
+                onClick: ($event) => currentImageIndex.value = index,
+                class: normalizeClass(["aspect-1x1 radius-small bg-white o-hidden thumbnail", { "active": currentImageIndex.value === index }])
+              }, null, 10, _hoisted_5);
+            }), 128)),
+            __props.images.length > 5 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              onClick: _cache[1] || (_cache[1] = ($event) => openPopup(5)),
+              class: "aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white"
+            }, " +" + toDisplayString(__props.images.length - 5), 1)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
         createVNode(_sfc_main$1, {
           onClosePopup: closePopup,
           isPopupOpen: isPopupVisible.value,
-          class: "radius-medium o-hidden"
+          class: "radius-zero o-hidden"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$2, {
-              photoUrl: (_ctx.FILE_SERVER_URL || "") + selectedImage.value
-            }, null, 8, ["photoUrl"])
+            createVNode(PhotoViewer, {
+              photos: __props.images.map((img) => (_ctx.FILE_SERVER_URL || "") + img),
+              initialIndex: selectedImageIndex.value
+            }, null, 8, ["photos", "initialIndex"])
           ]),
           _: 1
         }, 8, ["isPopupOpen"])
@@ -90,7 +99,7 @@ const _sfc_main = {
     };
   }
 };
-const ProductImages = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-641e5bb0"]]);
+const ProductImages = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38ae846b"]]);
 export {
   ProductImages as default
 };

package/dist/martyrs/src/modules/products/components/blocks/ProductImages.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductImages.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductImages.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 o-hidden bg-light radius-medium flex-nowrap flex-column flex pos-relative\">\n    <!-- Main image container -->\n    <div class=\"pd-semi w-100 bg-light radius-semi o-hidden\" @click=\"openPopup(images[0])\">\n      <Image360\n        v-if=\"product && product.image3d\"\n        class=\"h-100 w-100\"\n        :imagePath=\"`/assets/images/products/${product.image3d}`\"\n        :imageCount=\"36\"\n      />\n      <img\n        loading=\"lazy\"\n        v-if=\"images[0] && !product?.image3d\"\n        class=\"h-max h-max-15r bg-white radius-semi w-100\"\n        style=\"object-fit: contain;\"\n        :src=\"(FILE_SERVER_URL || '') + images[0]\"\n      />\n      <PlaceholderImage\n        v-if=\"!images[0] && !product?.image3d\"\n        class=\"h-max-20r h-100 w-100\"\n        style=\"object-fit: cover;\"\n      />\n    </div>\n    \n    <!-- Thumbnails -->\n    <div v-if=\"images.length > 1\" class=\"o-scroll w-100 pd-semi pd-t-zero\">\n      <div class=\"no-responsive w-max flex flex-nowrap gap-thin\">\n        <img loading=\"lazy\" \n          v-for=\"(image, index) in images\"\n          :key=\"index\"\n          :src=\"(FILE_SERVER_URL || '') + image\" \n          @click=\"openPopup(image)\"\n          class=\"flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail\"\n        />\n      </div>\n    </div>\n    \n    <!-- Popup with photo viewer -->\n    <Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-medium o-hidden\">\n      <PhotoViewer\n        :photoUrl=\"(FILE_SERVER_URL || '') + selectedImage\"\n      />\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';\n\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\n\nimport Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'\n\nconst props = defineProps({\n  images: {\n    type: Array,\n    required: true,\n  },\n  product: {\n    type: Object,\n    default: () => ({})\n  },\n});\n\nconst isPopupVisible = ref(false);\nconst selectedImage = ref(null);\n\nconst openPopup = (image) => {\n  if (!image) return;\n  selectedImage.value = image;\n  isPopupVisible.value = true;\n};\n\nconst closePopup = () => {\n  isPopupVisible.value = false;\n};\n</script>\n\n<style scoped>\n.thumbnail {\n  width: 100%;\n  max-width: 6rem;\n  height: 6rem;\n  object-fit: cover;\n  cursor: pointer;\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,UAAM,iBAAiB,IAAI,KAAK;AAChC,UAAM,gBAAgB,IAAI,IAAI;AAE9B,UAAM,YAAY,CAAC,UAAU;AAC3B,UAAI,CAAC,MAAO;AACZ,oBAAc,QAAQ;AACtB,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,MAAM;AACvB,qBAAe,QAAQ;AAAA,IACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProductImages.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductImages.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 bs-heavy h-max  mobile:pos-relative tablet:pos-relative pos-sticky pos-t-0 pd-medium o-hidden bg-light radius-medium gap-small flex-nowrap flex-row mobile:flex-column flex pos-relative\">\n    <!-- Main image container -->\n    <div class=\"order-1 w-100 bg-light radius-small o-hidden\" @click=\"openPopup(currentImageIndex)\">\n      <Image360\n        v-if=\"product && product.image3d\"\n        class=\"h-100 w-100\"\n        :imagePath=\"`/assets/images/products/${product.image3d}`\"\n        :imageCount=\"36\"\n      />\n      <img\n        loading=\"lazy\"\n        v-if=\"images[currentImageIndex] && !product?.image3d\"\n        class=\"h-100 flex-child-default bg-white radius-small w-100\"\n        style=\"object-fit: contain;\"\n        :src=\"(FILE_SERVER_URL || '') + images[currentImageIndex]\"\n      />\n      <PlaceholderImage\n        v-if=\"!images[currentImageIndex] && !product?.image3d\"\n        class=\"h-100 w-100\"\n        style=\"object-fit: cover;\"\n      />\n    </div>\n    \n    <!-- Thumbnails -->\n    <div v-if=\"images.length > 1\" class=\"mobile:order-1 order-0 w-5r mobile:w-100\">\n      <div class=\"w-100 mobile:flex-row flex-column flex flex-nowrap gap-thin\">\n        <img loading=\"lazy\" \n          v-for=\"(image, index) in images.slice(0, 5)\"\n          :key=\"index\"\n          :src=\"(FILE_SERVER_URL || '') + image\" \n          @click=\"currentImageIndex = index\"\n          class=\"aspect-1x1 radius-small bg-white o-hidden thumbnail\"\n          :class=\"{ 'active': currentImageIndex === index }\"\n        />\n        <div\n          v-if=\"images.length > 5\"\n          @click=\"openPopup(5)\"\n          class=\"aspect-1x1 radius-small o-hidden thumbnail flex flex-center t-medium t-black bg-white \"\n        >\n          +{{ images.length - 5 }}\n        </div>\n      </div>\n    </div>\n    \n    <!-- Popup with photo viewer -->\n    <Popup @close-popup=\"closePopup\" :isPopupOpen=\"isPopupVisible\" class=\"radius-zero o-hidden\">\n      <PhotoViewer\n        :photos=\"images.map(img => (FILE_SERVER_URL || '') + img)\"\n        :initialIndex=\"selectedImageIndex\"\n      />\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\nimport Image360 from '@martyrs/src/modules/products/components/elements/Image360.vue'\n\nconst props = defineProps({\n  images: {\n    type: Array,\n    required: true,\n  },\n  product: {\n    type: Object,\n    default: () => ({})\n  },\n});\n\nconst isPopupVisible = ref(false);\nconst selectedImageIndex = ref(0);\nconst currentImageIndex = ref(0);\n\nconst openPopup = (index) => {\n  if (!props.images.length) return;\n  selectedImageIndex.value = index;\n  isPopupVisible.value = true;\n};\n\nconst closePopup = () => {\n  selectedImageIndex.value = 0;\n  isPopupVisible.value = false;\n};\n</script>\n\n<style scoped>\n.thumbnail {\n  width: 100%;\n  object-fit: cover;\n  cursor: pointer;\n}\n.thumbnail.active {\n  border: 1px solid rgb(var(--second));\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,UAAM,QAAQ;AAWd,UAAM,iBAAiB,IAAI,KAAK;AAChC,UAAM,qBAAqB,IAAI,CAAC;AAChC,UAAM,oBAAoB,IAAI,CAAC;AAE/B,UAAM,YAAY,CAAC,UAAU;AAC3B,UAAI,CAAC,MAAM,OAAO,OAAQ;AAC1B,yBAAmB,QAAQ;AAC3B,qBAAe,QAAQ;AAAA,IACzB;AAEA,UAAM,aAAa,MAAM;AACvB,yBAAmB,QAAQ;AAC3B,qBAAe,QAAQ;AAAA,IACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/products/components/blocks/ProductVariants.vue.cjs

@@ -8,10 +8,10 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = { class: "h2 t-bold" };
 const _hoisted_4 = { class: "capitalize mn-b-thin t-medium" };
-const _hoisted_5 = { class: "flex flex-wrap gap-small mn-b-medium" };
+const _hoisted_5 = { class: "flex flex-wrap gap-thin mn-b-medium" };
 const _hoisted_6 = ["onClick", "disabled"];
 const _hoisted_7 = ["src"];
-const _hoisted_8 = { class: "flex-center capitalize flex h-100 w-100 t-small t-center" };
+const _hoisted_8 = { class: "" };
 const _hoisted_9 = {
   key: 1,
   class: "pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small"
@@ -116,7 +116,7 @@ const _sfc_main = {
                   key: item.key,
                   onClick: ($event) => group.label === "Options" ? pick(item.variant) : pickAttr(group.label, item.value),
                   disabled: item.off,
-                  class: vue.normalizeClass(["h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro", [
+                  class: vue.normalizeClass(["pd-small radius-small", [
                     isSelected(group, item) ? "br-main" : "br-black-transp-10",
                     item.off ? "o-50 cursor-not-allowed" : "cursor-pointer hover-scale-1"
                   ]])
@@ -126,7 +126,7 @@ const _sfc_main = {
                     src: `${_ctx.FILE_SERVER_URL}${item.img}`,
                     class: "h-100 radius-thin aspect-1x1 object-fit-contain"
                   }, null, 8, _hoisted_7)) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(item.text), 1),
+                  vue.createElementVNode("p", _hoisted_8, vue.toDisplayString(item.text), 1),
                   isSelected(group, item) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, " Selected ")) : vue.createCommentVNode("", true)
                 ], 10, _hoisted_6);
               }), 128))

package/dist/martyrs/src/modules/products/components/blocks/ProductVariants.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProductVariants.vue.cjs","sources":["../../../../../../../src/modules/products/components/blocks/ProductVariants.vue"],"sourcesContent":["<template>\n  <div class=\"w-100\">\n    <div v-if=\"selected\" class=\"mn-b-small\">\n      <span class=\"h2 t-bold\">${{ selected.price.toFixed(2) }}</span>\n    </div>\n\n    <div\n      v-for=\"group in groups\"\n      :key=\"group.label\"\n      class=\"w-100 mn-b-medium\"\n    >\n      <p class=\"capitalize mn-b-thin t-medium\">{{ group.label }}</p>\n      <div class=\"flex flex-wrap gap-small mn-b-medium\">\n        <button\n          v-for=\"item in group.items\"\n          :key=\"item.key\"\n          @click=\"group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)\"\n          :disabled=\"item.off\"\n          class=\"h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro\"\n          :class=\"[\n            isSelected(group, item) ? 'br-main' : 'br-black-transp-10',\n            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',\n          ]\"\n        >\n          <img\n            v-if=\"item.img\"\n            :src=\"`${FILE_SERVER_URL}${item.img}`\"\n            class=\"h-100 radius-thin aspect-1x1 object-fit-contain\"\n          />\n          <span class=\"flex-center capitalize flex h-100 w-100 t-small t-center\">\n            {{ item.text }}\n          </span>\n          <div\n            v-if=\"isSelected(group, item)\"\n            class=\"pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small\"\n          >\n            Selected\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\nconst props = defineProps({ productVariants: Array });\nconst emit = defineEmits(['variant-selected', 'update-images']);\n\nconst selectedAttributes = ref({});\nconst selected = ref(null);\n\nconst hasAttrs = computed(() =>\n  props.productVariants.some(v => v.attributes?.length)\n);\n\nconst groups = computed(() => {\n  if (hasAttrs.value) {\n    const labels = [...new Set(props.productVariants[0].attributes.map(a => a.name))];\n    return labels.map((lbl, i) => ({\n      label: lbl,\n      items: [...new Set(\n        props.productVariants.map(v => v.attributes.find(a => a.name === lbl)?.value)\n      )]\n        .filter(Boolean)\n        .map(val => {\n          const v = props.productVariants.find(x => x.attributes.find(a => a.name === lbl && a.value === val));\n          return {\n            key: lbl + val,\n            value: val,\n            img: i === 0 ? v.images?.[0] : null,\n            off: !v.available,\n            text: val,\n          };\n        }),\n    }));\n  }\n  if (props.productVariants.length > 1) {\n    return [{\n      label: 'Options',\n      items: props.productVariants.map(v => ({\n        key: v._id,\n        variant: v,\n        img: v.images?.[0],\n        off: !v.available,\n        text: v.name || v.sku,\n      })),\n    }];\n  }\n  return [];\n});\n\nconst pick = v => {\n  if (!v.available) return;\n  selectedAttributes.value = Object.fromEntries(v.attributes?.map(a => [a.name, a.value]) || []);\n  selected.value = v;\n  emit('variant-selected', v);\n  v.images?.length && emit('update-images', v.images);\n};\n\nconst pickAttr = (lbl, val) => {\n  const test = { ...selectedAttributes.value, [lbl]: val };\n  if (!props.productVariants.some(v =>\n    Object.entries(test).every(([k, x]) =>\n      v.attributes.find(a => a.name === k && a.value === x)\n    )\n  )) return;\n  selectedAttributes.value = test;\n};\n\nwatch(selectedAttributes, attrs => {\n  const m = props.productVariants.find(v =>\n    Object.entries(attrs).every(([k, x]) => v.attributes.find(a => a.name === k && a.value === x))\n  );\n  m ? pick(m) : (selected.value = null);\n});\n\nonMounted(() => props.productVariants.length === 1 && pick(props.productVariants[0]));\n\nconst isSelected = (g, i) =>\n  g.label === 'Options'\n    ? selected.value?._id === i.variant?._id\n    : selectedAttributes.value[g.label] === i.value;\n</script>\n"],"names":["ref","computed","watch","onMounted"],"mappings":"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"}
+{"version":3,"file":"ProductVariants.vue.cjs","sources":["../../../../../../../src/modules/products/components/blocks/ProductVariants.vue"],"sourcesContent":["<template>\n  <div class=\"w-100\">\n    <div v-if=\"selected\" class=\"mn-b-small\">\n      <span class=\"h2 t-bold\">${{ selected.price.toFixed(2) }}</span>\n    </div>\n\n    <div\n      v-for=\"group in groups\"\n      :key=\"group.label\"\n      class=\"w-100 mn-b-medium\"\n    >\n      <p class=\"capitalize mn-b-thin t-medium\">{{ group.label }}</p>\n\n      <div class=\"flex flex-wrap gap-thin mn-b-medium\">\n        <button\n          v-for=\"item in group.items\"\n          :key=\"item.key\"\n          @click=\"group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)\"\n          :disabled=\"item.off\"\n          class=\"pd-small radius-small\"\n          :class=\"[\n            isSelected(group, item) ? 'br-main' : 'br-black-transp-10',\n            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',\n          ]\"\n        >\n          <img\n            v-if=\"item.img\"\n            :src=\"`${FILE_SERVER_URL}${item.img}`\"\n            class=\"h-100 radius-thin aspect-1x1 object-fit-contain\"\n          />\n          <p class=\"\">\n            {{ item.text }}\n          </p>\n\n          <div\n            v-if=\"isSelected(group, item)\"\n            class=\"pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small\"\n          >\n            Selected\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\nconst props = defineProps({ productVariants: Array });\nconst emit = defineEmits(['variant-selected', 'update-images']);\n\nconst selectedAttributes = ref({});\nconst selected = ref(null);\n\nconst hasAttrs = computed(() =>\n  props.productVariants.some(v => v.attributes?.length)\n);\n\nconst groups = computed(() => {\n  if (hasAttrs.value) {\n    const labels = [...new Set(props.productVariants[0].attributes.map(a => a.name))];\n    return labels.map((lbl, i) => ({\n      label: lbl,\n      items: [...new Set(\n        props.productVariants.map(v => v.attributes.find(a => a.name === lbl)?.value)\n      )]\n        .filter(Boolean)\n        .map(val => {\n          const v = props.productVariants.find(x => x.attributes.find(a => a.name === lbl && a.value === val));\n          return {\n            key: lbl + val,\n            value: val,\n            img: i === 0 ? v.images?.[0] : null,\n            off: !v.available,\n            text: val,\n          };\n        }),\n    }));\n  }\n  if (props.productVariants.length > 1) {\n    return [{\n      label: 'Options',\n      items: props.productVariants.map(v => ({\n        key: v._id,\n        variant: v,\n        img: v.images?.[0],\n        off: !v.available,\n        text: v.name || v.sku,\n      })),\n    }];\n  }\n  return [];\n});\n\nconst pick = v => {\n  if (!v.available) return;\n  selectedAttributes.value = Object.fromEntries(v.attributes?.map(a => [a.name, a.value]) || []);\n  selected.value = v;\n  emit('variant-selected', v);\n  v.images?.length && emit('update-images', v.images);\n};\n\nconst pickAttr = (lbl, val) => {\n  const test = { ...selectedAttributes.value, [lbl]: val };\n  if (!props.productVariants.some(v =>\n    Object.entries(test).every(([k, x]) =>\n      v.attributes.find(a => a.name === k && a.value === x)\n    )\n  )) return;\n  selectedAttributes.value = test;\n};\n\nwatch(selectedAttributes, attrs => {\n  const m = props.productVariants.find(v =>\n    Object.entries(attrs).every(([k, x]) => v.attributes.find(a => a.name === k && a.value === x))\n  );\n  m ? pick(m) : (selected.value = null);\n});\n\nonMounted(() => props.productVariants.length === 1 && pick(props.productVariants[0]));\n\nconst isSelected = (g, i) =>\n  g.label === 'Options'\n    ? selected.value?._id === i.variant?._id\n    : selectedAttributes.value[g.label] === i.value;\n</script>\n"],"names":["ref","computed","watch","onMounted"],"mappings":"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"}

package/dist/martyrs/src/modules/products/components/blocks/ProductVariants.vue.js

@@ -6,10 +6,10 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = { class: "h2 t-bold" };
 const _hoisted_4 = { class: "capitalize mn-b-thin t-medium" };
-const _hoisted_5 = { class: "flex flex-wrap gap-small mn-b-medium" };
+const _hoisted_5 = { class: "flex flex-wrap gap-thin mn-b-medium" };
 const _hoisted_6 = ["onClick", "disabled"];
 const _hoisted_7 = ["src"];
-const _hoisted_8 = { class: "flex-center capitalize flex h-100 w-100 t-small t-center" };
+const _hoisted_8 = { class: "" };
 const _hoisted_9 = {
   key: 1,
   class: "pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small"
@@ -114,7 +114,7 @@ const _sfc_main = {
                   key: item.key,
                   onClick: ($event) => group.label === "Options" ? pick(item.variant) : pickAttr(group.label, item.value),
                   disabled: item.off,
-                  class: normalizeClass(["h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro", [
+                  class: normalizeClass(["pd-small radius-small", [
                     isSelected(group, item) ? "br-main" : "br-black-transp-10",
                     item.off ? "o-50 cursor-not-allowed" : "cursor-pointer hover-scale-1"
                   ]])
@@ -124,7 +124,7 @@ const _sfc_main = {
                     src: `${_ctx.FILE_SERVER_URL}${item.img}`,
                     class: "h-100 radius-thin aspect-1x1 object-fit-contain"
                   }, null, 8, _hoisted_7)) : createCommentVNode("", true),
-                  createElementVNode("span", _hoisted_8, toDisplayString(item.text), 1),
+                  createElementVNode("p", _hoisted_8, toDisplayString(item.text), 1),
                   isSelected(group, item) ? (openBlock(), createElementBlock("div", _hoisted_9, " Selected ")) : createCommentVNode("", true)
                 ], 10, _hoisted_6);
               }), 128))

package/dist/martyrs/src/modules/products/components/blocks/ProductVariants.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductVariants.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductVariants.vue"],"sourcesContent":["<template>\n  <div class=\"w-100\">\n    <div v-if=\"selected\" class=\"mn-b-small\">\n      <span class=\"h2 t-bold\">${{ selected.price.toFixed(2) }}</span>\n    </div>\n\n    <div\n      v-for=\"group in groups\"\n      :key=\"group.label\"\n      class=\"w-100 mn-b-medium\"\n    >\n      <p class=\"capitalize mn-b-thin t-medium\">{{ group.label }}</p>\n      <div class=\"flex flex-wrap gap-small mn-b-medium\">\n        <button\n          v-for=\"item in group.items\"\n          :key=\"item.key\"\n          @click=\"group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)\"\n          :disabled=\"item.off\"\n          class=\"h-3r w-min-3r flex-nowrap gap-thin radius-small flex flex-center pos-relative br-1px pd-micro\"\n          :class=\"[\n            isSelected(group, item) ? 'br-main' : 'br-black-transp-10',\n            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',\n          ]\"\n        >\n          <img\n            v-if=\"item.img\"\n            :src=\"`${FILE_SERVER_URL}${item.img}`\"\n            class=\"h-100 radius-thin aspect-1x1 object-fit-contain\"\n          />\n          <span class=\"flex-center capitalize flex h-100 w-100 t-small t-center\">\n            {{ item.text }}\n          </span>\n          <div\n            v-if=\"isSelected(group, item)\"\n            class=\"pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small\"\n          >\n            Selected\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\nconst props = defineProps({ productVariants: Array });\nconst emit = defineEmits(['variant-selected', 'update-images']);\n\nconst selectedAttributes = ref({});\nconst selected = ref(null);\n\nconst hasAttrs = computed(() =>\n  props.productVariants.some(v => v.attributes?.length)\n);\n\nconst groups = computed(() => {\n  if (hasAttrs.value) {\n    const labels = [...new Set(props.productVariants[0].attributes.map(a => a.name))];\n    return labels.map((lbl, i) => ({\n      label: lbl,\n      items: [...new Set(\n        props.productVariants.map(v => v.attributes.find(a => a.name === lbl)?.value)\n      )]\n        .filter(Boolean)\n        .map(val => {\n          const v = props.productVariants.find(x => x.attributes.find(a => a.name === lbl && a.value === val));\n          return {\n            key: lbl + val,\n            value: val,\n            img: i === 0 ? v.images?.[0] : null,\n            off: !v.available,\n            text: val,\n          };\n        }),\n    }));\n  }\n  if (props.productVariants.length > 1) {\n    return [{\n      label: 'Options',\n      items: props.productVariants.map(v => ({\n        key: v._id,\n        variant: v,\n        img: v.images?.[0],\n        off: !v.available,\n        text: v.name || v.sku,\n      })),\n    }];\n  }\n  return [];\n});\n\nconst pick = v => {\n  if (!v.available) return;\n  selectedAttributes.value = Object.fromEntries(v.attributes?.map(a => [a.name, a.value]) || []);\n  selected.value = v;\n  emit('variant-selected', v);\n  v.images?.length && emit('update-images', v.images);\n};\n\nconst pickAttr = (lbl, val) => {\n  const test = { ...selectedAttributes.value, [lbl]: val };\n  if (!props.productVariants.some(v =>\n    Object.entries(test).every(([k, x]) =>\n      v.attributes.find(a => a.name === k && a.value === x)\n    )\n  )) return;\n  selectedAttributes.value = test;\n};\n\nwatch(selectedAttributes, attrs => {\n  const m = props.productVariants.find(v =>\n    Object.entries(attrs).every(([k, x]) => v.attributes.find(a => a.name === k && a.value === x))\n  );\n  m ? pick(m) : (selected.value = null);\n});\n\nonMounted(() => props.productVariants.length === 1 && pick(props.productVariants[0]));\n\nconst isSelected = (g, i) =>\n  g.label === 'Options'\n    ? selected.value?._id === i.variant?._id\n    : selectedAttributes.value[g.label] === i.value;\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductVariants.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductVariants.vue"],"sourcesContent":["<template>\n  <div class=\"w-100\">\n    <div v-if=\"selected\" class=\"mn-b-small\">\n      <span class=\"h2 t-bold\">${{ selected.price.toFixed(2) }}</span>\n    </div>\n\n    <div\n      v-for=\"group in groups\"\n      :key=\"group.label\"\n      class=\"w-100 mn-b-medium\"\n    >\n      <p class=\"capitalize mn-b-thin t-medium\">{{ group.label }}</p>\n\n      <div class=\"flex flex-wrap gap-thin mn-b-medium\">\n        <button\n          v-for=\"item in group.items\"\n          :key=\"item.key\"\n          @click=\"group.label === 'Options' ? pick(item.variant) : pickAttr(group.label, item.value)\"\n          :disabled=\"item.off\"\n          class=\"pd-small radius-small\"\n          :class=\"[\n            isSelected(group, item) ? 'br-main' : 'br-black-transp-10',\n            item.off ? 'o-50 cursor-not-allowed' : 'cursor-pointer hover-scale-1',\n          ]\"\n        >\n          <img\n            v-if=\"item.img\"\n            :src=\"`${FILE_SERVER_URL}${item.img}`\"\n            class=\"h-100 radius-thin aspect-1x1 object-fit-contain\"\n          />\n          <p class=\"\">\n            {{ item.text }}\n          </p>\n\n          <div\n            v-if=\"isSelected(group, item)\"\n            class=\"pos-absolute pos-b-0 pos-r-0 pos-l-0 flex flex-center h-1r bg-main t-white t-small\"\n          >\n            Selected\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\nconst props = defineProps({ productVariants: Array });\nconst emit = defineEmits(['variant-selected', 'update-images']);\n\nconst selectedAttributes = ref({});\nconst selected = ref(null);\n\nconst hasAttrs = computed(() =>\n  props.productVariants.some(v => v.attributes?.length)\n);\n\nconst groups = computed(() => {\n  if (hasAttrs.value) {\n    const labels = [...new Set(props.productVariants[0].attributes.map(a => a.name))];\n    return labels.map((lbl, i) => ({\n      label: lbl,\n      items: [...new Set(\n        props.productVariants.map(v => v.attributes.find(a => a.name === lbl)?.value)\n      )]\n        .filter(Boolean)\n        .map(val => {\n          const v = props.productVariants.find(x => x.attributes.find(a => a.name === lbl && a.value === val));\n          return {\n            key: lbl + val,\n            value: val,\n            img: i === 0 ? v.images?.[0] : null,\n            off: !v.available,\n            text: val,\n          };\n        }),\n    }));\n  }\n  if (props.productVariants.length > 1) {\n    return [{\n      label: 'Options',\n      items: props.productVariants.map(v => ({\n        key: v._id,\n        variant: v,\n        img: v.images?.[0],\n        off: !v.available,\n        text: v.name || v.sku,\n      })),\n    }];\n  }\n  return [];\n});\n\nconst pick = v => {\n  if (!v.available) return;\n  selectedAttributes.value = Object.fromEntries(v.attributes?.map(a => [a.name, a.value]) || []);\n  selected.value = v;\n  emit('variant-selected', v);\n  v.images?.length && emit('update-images', v.images);\n};\n\nconst pickAttr = (lbl, val) => {\n  const test = { ...selectedAttributes.value, [lbl]: val };\n  if (!props.productVariants.some(v =>\n    Object.entries(test).every(([k, x]) =>\n      v.attributes.find(a => a.name === k && a.value === x)\n    )\n  )) return;\n  selectedAttributes.value = test;\n};\n\nwatch(selectedAttributes, attrs => {\n  const m = props.productVariants.find(v =>\n    Object.entries(attrs).every(([k, x]) => v.attributes.find(a => a.name === k && a.value === x))\n  );\n  m ? pick(m) : (selected.value = null);\n});\n\nonMounted(() => props.productVariants.length === 1 && pick(props.productVariants[0]));\n\nconst isSelected = (g, i) =>\n  g.label === 'Options'\n    ? selected.value?._id === i.variant?._id\n    : selectedAttributes.value[g.label] === i.value;\n</script>\n"],"names":[],"mappings":"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"}

package/dist/martyrs/src/modules/products/components/elements/Price.vue.cjs

@@ -10,22 +10,24 @@ const _sfc_main = {
   __name: "Price",
   props: {
     product: Object,
+    variants: Array,
     size: String
   },
   setup(__props) {
     const props = __props;
     const variant = vue.computed(() => {
-      var _a, _b;
-      return ((_b = (_a = props.product) == null ? void 0 : _a.variants) == null ? void 0 : _b[0]) || props.product;
+      var _a, _b, _c;
+      return ((_b = (_a = props.product) == null ? void 0 : _a.variants) == null ? void 0 : _b[0]) || ((_c = props.variants) == null ? void 0 : _c[0]) || props.product;
     });
     return (_ctx, _cache) => {
+      var _a;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("span", {
-          class: vue.normalizeClass([{
+          class: vue.normalizeClass({
             "h4": !__props.size,
             "p-medium t-semi": __props.size === "small",
             "h3 t-semi": __props.size === "big"
-          }, "t-second"])
+          })
         }, vue.toDisplayString(_ctx.returnCurrency() + variant.value.price), 3),
         vue.createElementVNode("span", {
           class: vue.normalizeClass([{
@@ -33,7 +35,7 @@ const _sfc_main = {
             "p-small": __props.size === "small",
             "p-big": __props.size === "big"
           }, "p-small mn-l-micro t-transp"])
-        }, vue.toDisplayString(__props.product.listing === "rent" ? "per day" : "for " + variant.value.quantity + variant.value.unit), 3),
+        }, vue.toDisplayString(((_a = __props.product) == null ? void 0 : _a.listing) === "rent" ? "per day" : "for " + variant.value.quantity + variant.value.unit), 3),
         variant.value.sale ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString(_ctx.returnCurrency() + variant.value.price / 100 * (100 + variant.value.sale)), 1)) : vue.createCommentVNode("", true)
       ]);
     };

package/dist/martyrs/src/modules/products/components/elements/Price.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Price.vue.cjs","sources":["../../../../../../../src/modules/products/components/elements/Price.vue"],"sourcesContent":["<template>\n  <div class=\"radius-small\">\n    <span\n      :class=\"{\n        'h4': !size,\n        'p-medium t-semi': size === 'small',\n        'h3 t-semi': size === 'big'\n      }\"\n      class=\"t-second\"\n    >\n      {{ returnCurrency() + variant.price }}\n    </span>\n\n    <span\n      :class=\"{\n        'p-medium': !size,\n        'p-small': size === 'small',\n        'p-big': size === 'big'\n      }\"\n      class=\"p-small mn-l-micro t-transp\"\n    >\n      {{ product.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}\n    </span>\n\n    <p\n      v-if=\"variant.sale\"\n      class=\"pd-r-small t-transp p-medium line-through price\"\n    >\n      {{ returnCurrency() + ((variant.price / 100) * (100 + variant.sale)) }}\n    </p>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  product: Object,\n  size: String\n});\n\nconst variant = computed(() => {\n  return props.product?.variants?.[0] || props.product;\n});\n</script>\n"],"names":["computed"],"mappings":";;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAKd,UAAM,UAAUA,IAAQ,SAAC,MAAM;;AAC7B,eAAO,iBAAM,YAAN,mBAAe,aAAf,mBAA0B,OAAM,MAAM;AAAA,IAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Price.vue.cjs","sources":["../../../../../../../src/modules/products/components/elements/Price.vue"],"sourcesContent":["<template>\n  <div class=\"radius-small\">\n    <span\n      :class=\"{\n        'h4': !size,\n        'p-medium t-semi': size === 'small',\n        'h3 t-semi': size === 'big'\n      }\"\n    >\n      {{ returnCurrency() + variant.price }}\n    </span>\n\n    <span\n      :class=\"{\n        'p-medium': !size,\n        'p-small': size === 'small',\n        'p-big': size === 'big'\n      }\"\n      class=\"p-small mn-l-micro t-transp\"\n    >\n      {{ product?.listing === 'rent' ? 'per day' : 'for ' + variant.quantity + variant.unit }}\n    </span>\n\n    <p\n      v-if=\"variant.sale\"\n      class=\"pd-r-small t-transp p-medium line-through price\"\n    >\n      {{ returnCurrency() + ((variant.price / 100) * (100 + variant.sale)) }}\n    </p>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\n\nconst props = defineProps({\n  product: Object,\n  variants: Array,\n  size: String\n});\n\nconst variant = computed(() => {\n  return props.product?.variants?.[0] || props.variants?.[0] || props.product;\n});\n</script>\n"],"names":["computed"],"mappings":";;;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ;AAMd,UAAM,UAAUA,IAAQ,SAAC,MAAM;;AAC7B,eAAO,iBAAM,YAAN,mBAAe,aAAf,mBAA0B,SAAM,WAAM,aAAN,mBAAiB,OAAM,MAAM;AAAA,IACtE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;"}