@ozdao/martyrs 0.2.570 → 0.2.572

package/dist/martyrs/src/modules/organizations/components/sections/MembersAdd.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersAdd.vue.js","sources":["../../../../../../../src/modules/organizations/components/sections/MembersAdd.vue"],"sourcesContent":["<template>\n  <div>\n    <p class=\"mn-b-thin t-transp p-regular\">{{text}}</p> \n\n    <div class=\"mn-b-thin pos-relative\">\n      <BlockSearch \n        v-click-outside=\"() => {searchUserShow = false}\" \n        @search=\"(event) => { searchUser = event; searchUserShow = true }\"\n        placeholder=\"Enter name, phone or email\"\n        class=\"bg-grey\"\n      />\n\n      <div \n        v-if=\"searchUser && searchUserShow\" \n        class=\"mn-t-thin pos-absolute w-100 pos-t-100 pos-l-0 z-index-3 bg-light pd-small radius-small\n      \">\n        <Feed\n          :states=\"{\n            empty: {\n              title: 'No User Found',\n              description: 'Currently, there are no such user.'\n            }\n          }\"\n          :store=\"{\n            read: (options) => users.actions.read(options),\n            state: null\n          }\"\n          :options=\"{\n            search: searchUser\n          }\"\n          :showLoadMore=\"false\"\n          v-slot=\"{ \n            items \n          }\"\n          class=\"h-max-20r o-scroll\"\n        >\n          <CardUser\n            v-for=\"(user, index) in items\" :key=\"user._id\"\n            :user=\"user\"\n            :photo=\"user.profile.photo\"\n            :name=\"user.profile.name || user.phone || user.email\"\n            @click=\"() => { \n              members.push({contact: user.email || user.phone})\n              searchUserShow = false\n            }\"\n            class=\"bg-white h-2r pd-thin radius-medium w-100 mn-b-thin\"\n          />\n        </Feed>\n      </div>\n    </div>\n\n    <section class=\"cols-1 mn-b-small radius-medium pd-semi bg-light pos-relative\">\n\n      <div\n        v-for=\"(member, index) in members\" \n        :key=\"index\" \n        class=\"\n          br-1px br-solid br-grey-transp-25\n          flex\n          gap-thin\n          radius-small\n          mn-b-thin\n        \"\n      >\n        <Field \n          v-model:field=\"member.contact\"   \n          placeholder=\"Enter email or phone\" \n          class=\"w-100 pd-small radius-small bg-white\"\n          :validation=\"contactValidation\"\n        >\n          <div \n            v-if=\"index < 1\" \n            @click=\"() => members.push({contact: ''})\"  \n            class=\"radius-small h-100 i-big flex-center flex aspect-1x1 bg-green\"\n          >\n            <IconAdd \n              class=\"i-medium\"\n              :fill=\"'rgb(var(--white)'\"\n            />\n          </div>\n\n          <div \n            v-else \n            @click=\"() => members.splice(index, 1)\" \n            class=\"radius-small h-100 i-big flex-center flex aspect-1x1 bg-red\"\n          >\n            <IconDelete \n              class=\"i-medium\"\n              :fill=\"'rgb(var(--white)'\"\n            />\n          </div>\n        </Field>\n      </div>\n    </section>\n\n\n      <Button  \n        :submit=\"submitMembers\" \n        class=\"w-100 bg-main\">\n        <span>Invite to organization</span>\n      </Button>\n  </div>\n</template>\n\n<script setup>\n  import { ref } from 'vue';\n\n  import Field    from '@martyrs/src/components/Field/Field.vue'\n  import Select   from '@martyrs/src/components/Select/Select.vue'\n  import Button   from '@martyrs/src/components/Button/Button.vue'\n  import Feed from '@martyrs/src/components/Feed/Feed.vue'\n\n  import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'\n\n  import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'\n\n  import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\n  import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\n  // Import validation\n  import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'\n  // Store\n  import * as users from '@martyrs/src/modules/auth/views/store/users.js';\n  // Props\n  const props = defineProps({\n    organization: Object,\n    text: String,\n  });\n  // User Search\n  let searchUser = ref(null)\n  let searchUserShow = ref(false)\n  // Validation\n  const contactValidation = ref(null)\n  // Define Emits\n  const emits = defineEmits(['send-invite']);\n  // Define State\n  const members = ref([{ contact: ''}]);\n\n  async function submitMembers() {\n    return new Promise((resolve, reject) => {\n      emits('send-invite', members.value, resolve, reject);\n    });\n  }\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgIE,QAAI,aAAa,IAAI,IAAI;AACzB,QAAI,iBAAiB,IAAI,KAAK;AAE9B,UAAM,oBAAoB,IAAI,IAAI;AAElC,UAAM,QAAQ;AAEd,UAAM,UAAU,IAAI,CAAC,EAAE,SAAS,GAAE,CAAC,CAAC;AAEpC,mBAAe,gBAAgB;AAC7B,aAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,cAAM,eAAe,QAAQ,OAAO,SAAS,MAAM;AAAA,MACrD,CAAC;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MembersAdd.vue.js","sources":["../../../../../../../src/modules/organizations/components/sections/MembersAdd.vue"],"sourcesContent":["<template>\n  <div>\n    <p class=\"mn-b-thin t-transp p-regular\">{{text}}</p> \n\n    <div class=\"mn-b-thin pos-relative\">\n      <BlockSearch \n        v-click-outside=\"() => {searchUserShow = false}\" \n        @search=\"(event) => { searchUser = event; searchUserShow = true }\"\n        placeholder=\"Enter name, phone or email\"\n        class=\"bg-grey\"\n      />\n\n      <div \n        v-if=\"searchUser && searchUserShow\" \n        class=\"mn-t-thin pos-absolute w-100 pos-t-100 pos-l-0 z-index-3 bg-light pd-small radius-small\n      \">\n        <Feed\n          :states=\"{\n            empty: {\n              title: 'No User Found',\n              description: 'Currently, there are no such user.'\n            }\n          }\"\n          :store=\"{\n            read: (options) => users.actions.read(options),\n            state: null\n          }\"\n          :options=\"{\n            search: searchUser\n          }\"\n          :showLoadMore=\"false\"\n          v-slot=\"{ \n            items \n          }\"\n          class=\"h-max-20r o-scroll\"\n        >\n          <CardUser\n            v-for=\"(user, index) in items\" :key=\"user._id\"\n            :user=\"user\"\n            :photo=\"user.profile.photo\"\n            :name=\"user.profile.name || user.phone || user.email\"\n            @click=\"() => { \n              members.push({contact: user.email || user.phone})\n              searchUserShow = false\n            }\"\n            class=\"bg-white h-2r pd-thin radius-medium w-100 mn-b-thin\"\n          />\n        </Feed>\n      </div>\n    </div>\n\n    <section class=\"cols-1 mn-b-small radius-medium pd-semi bg-light pos-relative\">\n\n      <div\n        v-for=\"(member, index) in members\" \n        :key=\"index\" \n        class=\"\n          br-1px br-grey-transp-25\n          flex\n          gap-thin\n          radius-small\n          mn-b-thin\n        \"\n      >\n        <Field \n          v-model:field=\"member.contact\"   \n          placeholder=\"Enter email or phone\" \n          class=\"w-100 pd-small radius-small bg-white\"\n          :validation=\"contactValidation\"\n        >\n          <div \n            v-if=\"index < 1\" \n            @click=\"() => members.push({contact: ''})\"  \n            class=\"radius-small h-100 i-big flex-center flex aspect-1x1 bg-green\"\n          >\n            <IconAdd \n              class=\"i-medium\"\n              :fill=\"'rgb(var(--white)'\"\n            />\n          </div>\n\n          <div \n            v-else \n            @click=\"() => members.splice(index, 1)\" \n            class=\"radius-small h-100 i-big flex-center flex aspect-1x1 bg-red\"\n          >\n            <IconDelete \n              class=\"i-medium\"\n              :fill=\"'rgb(var(--white)'\"\n            />\n          </div>\n        </Field>\n      </div>\n    </section>\n\n\n      <Button  \n        :submit=\"submitMembers\" \n        class=\"w-100 bg-main\">\n        <span>Invite to organization</span>\n      </Button>\n  </div>\n</template>\n\n<script setup>\n  import { ref } from 'vue';\n\n  import Field    from '@martyrs/src/components/Field/Field.vue'\n  import Select   from '@martyrs/src/components/Select/Select.vue'\n  import Button   from '@martyrs/src/components/Button/Button.vue'\n  import Feed from '@martyrs/src/components/Feed/Feed.vue'\n\n  import BlockSearch from '@martyrs/src/modules/core/views/components/blocks/BlockSearch.vue'\n\n  import CardUser from '@martyrs/src/modules/auth/views/components/blocks/CardUser.vue'\n\n  import IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\n  import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\n  // Import validation\n  import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'\n  // Store\n  import * as users from '@martyrs/src/modules/auth/views/store/users.js';\n  // Props\n  const props = defineProps({\n    organization: Object,\n    text: String,\n  });\n  // User Search\n  let searchUser = ref(null)\n  let searchUserShow = ref(false)\n  // Validation\n  const contactValidation = ref(null)\n  // Define Emits\n  const emits = defineEmits(['send-invite']);\n  // Define State\n  const members = ref([{ contact: ''}]);\n\n  async function submitMembers() {\n    return new Promise((resolve, reject) => {\n      emits('send-invite', members.value, resolve, reject);\n    });\n  }\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgIE,QAAI,aAAa,IAAI,IAAI;AACzB,QAAI,iBAAiB,IAAI,KAAK;AAE9B,UAAM,oBAAoB,IAAI,IAAI;AAElC,UAAM,QAAQ;AAEd,UAAM,UAAU,IAAI,CAAC,EAAE,SAAS,GAAE,CAAC,CAAC;AAEpC,mBAAe,gBAAgB;AAC7B,aAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,cAAM,eAAe,QAAQ,OAAO,SAAS,MAAM;AAAA,MACrD,CAAC;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/organizations/components/sections/Organizations.vue.js

@@ -2,10 +2,10 @@ import { ref, withAsyncContext, watch, createElementBlock, openBlock, createElem
 import { useRouter, useRoute } from "vue-router";
 import "../../../../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.js";
 /* empty css                                 */
-/* empty css                                     */
+/* empty css                                      */
+/* empty css                                        */
 /* empty css                                       */
 /* empty css                                       */
-/* empty css                                        */
 import _sfc_main$2 from "../blocks/CardOrganization.vue.js";
 import _sfc_main$1 from "../blocks/EmptyState.vue.js";
 import "./Unit.vue.js";

package/dist/martyrs/src/modules/pages/views/components/blocks/CardPage.vue.js

@@ -2,14 +2,14 @@ import { ref, resolveComponent, createElementBlock, openBlock, createElementVNod
 import _sfc_main$1 from "../../../../icons/navigation/IconEdit.vue.js";
 import _sfc_main$2 from "../../../../icons/navigation/IconAdd.vue.js";
 /* empty css                                          */
-/* empty css                                           */
-/* empty css                                        */
+/* empty css                                          */
+/* empty css                                         */
 import { useRouter } from "vue-router";
 /* empty css              */
 const _hoisted_1 = { class: "flex flex-nowrap gap-thin card-page-title" };
 const _hoisted_2 = {
   key: 0,
-  class: "mn-l-small br-t br-solid br-black-transp-10"
+  class: "mn-l-small br-t-1px br-black-transp-10"
 };
 const _sfc_main = {
   __name: "CardPage",
@@ -50,7 +50,7 @@ const _sfc_main = {
           createElementVNode("div", _hoisted_1, [
             createVNode(_component_router_link, {
               to: unref(router).resolve({ name: "Page", params: { url: __props.page.url.split("/") } }).href,
-              class: normalizeClass(["z-index-2 cursor-pointer mn-r-auto t-truncate", {
+              class: normalizeClass(["z-index-2 cursor-pointer mn-r-auto truncate", {
                 "t-main": _ctx.$route.params.url && __props.page.url === _ctx.joinArrayToUrl(_ctx.$route.params.url)
               }])
             }, {

package/dist/martyrs/src/modules/pages/views/components/blocks/CardPage.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardPage.vue.js","sources":["../../../../../../../../src/modules/pages/views/components/blocks/CardPage.vue"],"sourcesContent":["<template>\n  <div>\n    <div :class=\"$attrs.class\">\n      <!-- {{ page.url }} -->\n      <div class=\"flex flex-nowrap gap-thin card-page-title\">\n        <router-link\n          :to=\"router.resolve({ name: 'Page', params: { url: page.url.split('/') } }).href\" \n           class=\"\n            z-index-2\n            cursor-pointer\n            mn-r-auto\n            t-truncate\n          \"\n          :class=\"{\n            't-main': $route.params.url && page.url === joinArrayToUrl($route.params.url)\n          }\"\n        >\n          {{ page.name }}\n        </router-link>\n\n        <router-link\n          v-if=\"hasAdminRights\"\n          :to=\"router.resolve({ name: 'Backoffice Pages Edit', params: { url: page.url.split('/') } }).href\" \n          class=\"\n            z-index-2\n            cursor-pointer \n            card-page-actions\n            radius-extra pd-micro bg-second\n          \"\n        >\n          <IconEdit\n            class=\"i-small\"\n            classes=\"fill-white\"\n          />\n        </router-link>\n\n        <button\n           v-if=\"hasAdminRights\"\n          @click=\"createPage(page)\"\n          class=\"\n            z-index-2\n            cursor-pointer \n            card-page-actions\n            radius-extra pd-micro bg-second\n          \"\n        >\n          <IconAdd\n            class=\"i-small\"\n            :fill=\"'white'\"\n          />\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"page.children && page.children.length > 0 && page.children[0].url && showChildren\" class=\"mn-l-small br-t br-solid br-black-transp-10\">\n      <CardPage \n        @createPage=\"createPage\" \n        v-for=\"childPage in page.children\" \n        :key=\"childPage.url\" \n        :page=\"childPage\" \n        :hasAdminRights=\"hasAdminRights\"\n        :class=\"$attrs.class\"\n      />\n    </div>\n    \n  </div>\n</template>\n\n<script setup>\n  import { ref } from 'vue'\n\n  import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\n  import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\n\n  import Button  from '@martyrs/src/components/Button/Button.vue'\n  import Field from \"@martyrs/src/components/Field/Field.vue\"; \n\n  import { useRouter } from 'vue-router'\n  \n  const router = useRouter()\n\n  const props = defineProps({\n    page: {\n      type: Object,\n      required: true\n    },\n    hasAdminRights: {\n      type: Boolean,\n      default: false\n    },\n    showChildren: {\n      type: Boolean,\n      default: true\n    }\n  })\n\n  const emits = defineEmits([\n    'createPage'\n  ])\n\n  const newPage = ref({\n    show: false,\n    name: null\n  })\n\n  async function createPage(page) {\n    emits('createPage', page)\n  }\n</script>\n\n<style lang=\"scss\">\n.card-page-title {\n  .card-page-actions {\n    display: none;\n  }\n\n  &:hover {\n    .card-page-actions {\n      display: block;\n    }\n  }\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EE,UAAM,SAAS,UAAS;AAiBxB,UAAM,QAAQ;AAIE,QAAI;AAAA,MAClB,MAAM;AAAA,MACN,MAAM;AAAA,IACV,CAAG;AAED,mBAAe,WAAW,MAAM;AAC9B,YAAM,cAAc,IAAI;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardPage.vue.js","sources":["../../../../../../../../src/modules/pages/views/components/blocks/CardPage.vue"],"sourcesContent":["<template>\n  <div>\n    <div :class=\"$attrs.class\">\n      <!-- {{ page.url }} -->\n      <div class=\"flex flex-nowrap gap-thin card-page-title\">\n        <router-link\n          :to=\"router.resolve({ name: 'Page', params: { url: page.url.split('/') } }).href\" \n           class=\"\n            z-index-2\n            cursor-pointer\n            mn-r-auto\n            truncate\n          \"\n          :class=\"{\n            't-main': $route.params.url && page.url === joinArrayToUrl($route.params.url)\n          }\"\n        >\n          {{ page.name }}\n        </router-link>\n\n        <router-link\n          v-if=\"hasAdminRights\"\n          :to=\"router.resolve({ name: 'Backoffice Pages Edit', params: { url: page.url.split('/') } }).href\" \n          class=\"\n            z-index-2\n            cursor-pointer \n            card-page-actions\n            radius-extra pd-micro bg-second\n          \"\n        >\n          <IconEdit\n            class=\"i-small\"\n            classes=\"fill-white\"\n          />\n        </router-link>\n\n        <button\n           v-if=\"hasAdminRights\"\n          @click=\"createPage(page)\"\n          class=\"\n            z-index-2\n            cursor-pointer \n            card-page-actions\n            radius-extra pd-micro bg-second\n          \"\n        >\n          <IconAdd\n            class=\"i-small\"\n            :fill=\"'white'\"\n          />\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"page.children && page.children.length > 0 && page.children[0].url && showChildren\" class=\"mn-l-small br-t-1px br-black-transp-10\">\n      <CardPage \n        @createPage=\"createPage\" \n        v-for=\"childPage in page.children\" \n        :key=\"childPage.url\" \n        :page=\"childPage\" \n        :hasAdminRights=\"hasAdminRights\"\n        :class=\"$attrs.class\"\n      />\n    </div>\n    \n  </div>\n</template>\n\n<script setup>\n  import { ref } from 'vue'\n\n  import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\n  import IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\n\n  import Button  from '@martyrs/src/components/Button/Button.vue'\n  import Field from \"@martyrs/src/components/Field/Field.vue\"; \n\n  import { useRouter } from 'vue-router'\n  \n  const router = useRouter()\n\n  const props = defineProps({\n    page: {\n      type: Object,\n      required: true\n    },\n    hasAdminRights: {\n      type: Boolean,\n      default: false\n    },\n    showChildren: {\n      type: Boolean,\n      default: true\n    }\n  })\n\n  const emits = defineEmits([\n    'createPage'\n  ])\n\n  const newPage = ref({\n    show: false,\n    name: null\n  })\n\n  async function createPage(page) {\n    emits('createPage', page)\n  }\n</script>\n\n<style lang=\"scss\">\n.card-page-title {\n  .card-page-actions {\n    display: none;\n  }\n\n  &:hover {\n    .card-page-actions {\n      display: block;\n    }\n  }\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EE,UAAM,SAAS,UAAS;AAiBxB,UAAM,QAAQ;AAIE,QAAI;AAAA,MAClB,MAAM;AAAA,MACN,MAAM;AAAA,IACV,CAAG;AAED,mBAAe,WAAW,MAAM;AAC9B,YAAM,cAAc,IAAI;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/pages/views/components/pages/Page.vue.js

@@ -11,20 +11,20 @@ const _hoisted_1 = {
   style: { "overflow": "clip" },
   class: "bg-light pos-relative"
 };
-const _hoisted_2 = { class: "pd-medium pos-sticky mobile-only z-index-1 pos-t-0 bg-light w-100 br-b br-solid br-black-transp-10" };
+const _hoisted_2 = { class: "pd-medium pos-sticky mobile-only z-index-1 pos-t-0 bg-light w-100 br-b-1px br-black-transp-10" };
 const _hoisted_3 = {
   key: 0,
   class: "z-index-0 pos-relative"
 };
-const _hoisted_4 = { class: "transition-ease-in-out w-100 bg-light" };
+const _hoisted_4 = { class: "ease-in-out w-100 bg-light" };
 const _hoisted_5 = {
   key: 1,
-  class: "cols-2-1_3 h-100 bg-light z-index-0 pos-relative"
+  class: "cols-[1fr_3fr] mobile:cols-1 h-100 bg-light z-index-0 pos-relative"
 };
 const _hoisted_6 = { class: "desktop-only h-100 bg-white o-scroll z-index-0 pos-relative" };
-const _hoisted_7 = { class: "transition-ease-in-out w-100 bg-light" };
+const _hoisted_7 = { class: "ease-in-out w-100 bg-light" };
 const _hoisted_8 = { class: "o-scroll pd-medium" };
-const _hoisted_9 = { class: "gap-thin cols-2" };
+const _hoisted_9 = { class: "gap-thin cols-2 mobile:cols-1" };
 const _hoisted_10 = {
   key: 0,
   class: "bg-white pd-medium mn-b-thin radius-semi"

package/dist/martyrs/src/modules/pages/views/components/pages/Page.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.vue.js","sources":["../../../../../../../../src/modules/pages/views/components/pages/Page.vue"],"sourcesContent":["<template>\n      \n  <div v-if=\"page && page.content\"  style=\"overflow: clip\" class=\" bg-light pos-relative\"> \n    \n    <div class=\"pd-medium pos-sticky mobile-only  z-index-1 pos-t-0 bg-light w-100 br-b br-solid br-black-transp-10\">\n      <button @click=\"showMenu\" class=\"cursor-pointer\">\n        {{ isMenuOpen === false ? 'Show Menu' : 'Hide Menu' }}\n      </button>\n    </div>\n\n    <div  v-if=\"isMenuOpen\" class=\"z-index-0  pos-relative\">\n      <ul \n        class=\"transition-ease-in-out w-100  bg-light\"\n      >\n        <CardPage \n          :page=\"pageParent\" \n          :hasAdminRights=\"hasAdminRights\"\n          class=\"pd-thin\"\n        />\n      </ul>  \n    </div>\n\n    <div  v-if=\"!isMenuOpen\" class=\"cols-2-1_3 h-100 bg-light z-index-0 pos-relative\">\n\n      <div class=\"desktop-only h-100 bg-white o-scroll z-index-0  pos-relative\">\n        <ul \n          class=\"transition-ease-in-out w-100  bg-light\"\n        >\n          <CardPage \n            :page=\"pageParent\" \n            :hasAdminRights=\"hasAdminRights\"\n            class=\"bg-white pd-thin\"\n          />\n        </ul>  \n      </div>\n\n      <div class=\"o-scroll pd-medium\">\n        <Viewer\n          :content=\"page.content\"\n          class=\"\"\n        />\n\n        <div class=\"gap-thin cols-2\">\n          <div  v-if=\"navigationPages.previousPage\" class=\"bg-white pd-medium mn-b-thin radius-semi \">\n            <h4 class=\"mn-b-small\" >Read Previous</h4>\n\n            <CardPage \n              :page=\"navigationPages.previousPage\" \n              :showChildren=\"false\"\n              class=\"h3 t-main bg-white mn-b-thin radius-semi\"\n            />\n          </div>\n\n          <div v-if=\"navigationPages.children.length > 0\" class=\"bg-white pd-medium mn-b-thin radius-semi \">\n            <h4 class=\"mn-b-small pd-micro \">Table of Contents</h4>\n            <CardPage \n              v-for=\"childPage in navigationPages.children\" \n              :key=\"childPage.id\"\n              :page=\"childPage\" \n              class=\"bg-white pd-micro  radius-semi\"\n            />\n          </div>\n\n          <div v-if=\"navigationPages.nextPage\" class=\"bg-white pd-medium mn-b-thin radius-semi\">\n            <h4 class=\"mn-b-small\" >Read Next</h4>\n            <CardPage \n              :page=\"navigationPages.nextPage\" \n              class=\"h3 t-main  bg-white mn-b-thin radius-semi\"\n              :showChildren=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</template>\n\n<script setup>\n  // Import libs\n  import { computed, onMounted, ref, onServerPrefetch } from 'vue'\n\n  import { useRoute } from 'vue-router'\n  import { useI18n }    from 'vue-i18n'\n\n  import Viewer from '@martyrs/src/modules/constructor/components/sections/Viewer.vue';\n\n  import CardPage from '../blocks/CardPage.vue'\n\n  import * as pages from '../../store/pages';\n  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'\n\n  import { useGlobalMixins } from \"@martyrs/src/modules/core/views/mixins/mixins.js\"\n\n  const isMenuOpen = ref(false)\n\n  function showMenu () {\n    isMenuOpen.value = !isMenuOpen.value\n  }\n\n  function flattenTree(tree) {\n    const pages = [];\n\n    function recursiveFlatten(nodes, parent = null) {\n      for (const node of nodes) {\n        pages.push({ ...node, parent }); // Сохраняем родителя для каждого узла\n        if (node.children.length > 0) {\n          recursiveFlatten(node.children, node);\n        }\n      }\n    }\n\n    recursiveFlatten(tree.children);\n    return pages;\n  }\n\n  // Получаем плоский список всех страниц\n  const allPages = computed(() => flattenTree(pageParent.value));\n\n  // Вычисляемая функция для нахождения предыдущей и следующей страниц\n  const navigationPages = computed(() => {\n    // Если текущая страница - рутовая\n    if (page.value._id === pageParent.value._id) {\n      return { children: page.value.children, previousPage: null, nextPage: null };\n    }\n\n    const currentIndex = allPages.value.findIndex(p => p._id === page.value._id);\n    \n    const previousPage = currentIndex > 0 \n      ? allPages.value[currentIndex - 1] \n      : pageParent.value;  // Если нет предыдущего, берем родителя\n    \n    const nextPage = currentIndex < allPages.value.length - 1 \n      ? allPages.value[currentIndex + 1] \n      : null;\n\n    return { previousPage, nextPage, children: [] };\n  });\n\n  const { \n    normalizeUrlParam, \n    joinArrayToUrl,\n    isAdmin\n  } = useGlobalMixins()\n\n  const hasAdminRights = computed(() => {\n    return isAdmin(auth.state.access.roles)\n  })\n\n  const { t, locale } = useI18n()\n\n  const route = useRoute()\n\n  const pageParent = ref(null)\n  const page = ref(null)\n\n  onMounted(async () => {\n    let urlParent = route.params.url\n    if (urlParent.length > 0) urlParent = urlParent[0]\n\n    pageParent.value = await pages.actions.read({url: urlParent})\n\n    let url = route.params.url\n    if (url.length > 0) url = joinArrayToUrl(url)\n    \n    page.value = await pages.actions.read({url: url})  \n  })\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["auth.state","pages.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FE,UAAM,aAAa,IAAI,KAAK;AAE5B,aAAS,WAAY;AACnB,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,aAAS,YAAY,MAAM;AACzB,YAAM,QAAQ,CAAA;AAEd,eAAS,iBAAiB,OAAO,SAAS,MAAM;AAC9C,mBAAW,QAAQ,OAAO;AACxB,gBAAM,KAAK,EAAE,GAAG,MAAM,OAAM,CAAE;AAC9B,cAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,6BAAiB,KAAK,UAAU,IAAI;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,uBAAiB,KAAK,QAAQ;AAC9B,aAAO;AAAA,IACT;AAGA,UAAM,WAAW,SAAS,MAAM,YAAY,WAAW,KAAK,CAAC;AAG7D,UAAM,kBAAkB,SAAS,MAAM;AAErC,UAAI,KAAK,MAAM,QAAQ,WAAW,MAAM,KAAK;AAC3C,eAAO,EAAE,UAAU,KAAK,MAAM,UAAU,cAAc,MAAM,UAAU,KAAI;AAAA,MAC5E;AAEA,YAAM,eAAe,SAAS,MAAM,UAAU,OAAK,EAAE,QAAQ,KAAK,MAAM,GAAG;AAE3E,YAAM,eAAe,eAAe,IAChC,SAAS,MAAM,eAAe,CAAC,IAC/B,WAAW;AAEf,YAAM,WAAW,eAAe,SAAS,MAAM,SAAS,IACpD,SAAS,MAAM,eAAe,CAAC,IAC/B;AAEJ,aAAO,EAAE,cAAc,UAAU,UAAU,CAAA,EAAE;AAAA,IAC/C,CAAC;AAED,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAM,gBAAe;AAEnB,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,QAAQA,MAAW,OAAO,KAAK;AAAA,IACxC,CAAC;AAED,UAAM,EAAE,GAAG,OAAM,IAAK,QAAO;AAE7B,UAAM,QAAQ,SAAQ;AAEtB,UAAM,aAAa,IAAI,IAAI;AAC3B,UAAM,OAAO,IAAI,IAAI;AAErB,cAAU,YAAY;AACpB,UAAI,YAAY,MAAM,OAAO;AAC7B,UAAI,UAAU,SAAS,EAAG,aAAY,UAAU,CAAC;AAEjD,iBAAW,QAAQ,MAAMC,QAAc,KAAK,EAAC,KAAK,UAAS,CAAC;AAE5D,UAAI,MAAM,MAAM,OAAO;AACvB,UAAI,IAAI,SAAS,EAAG,OAAM,eAAe,GAAG;AAE5C,WAAK,QAAQ,MAAMA,QAAc,KAAK,EAAC,IAAQ,CAAC;AAAA,IAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Page.vue.js","sources":["../../../../../../../../src/modules/pages/views/components/pages/Page.vue"],"sourcesContent":["<template>\n      \n  <div v-if=\"page && page.content\"  style=\"overflow: clip\" class=\" bg-light pos-relative\"> \n    \n    <div class=\"pd-medium pos-sticky mobile-only  z-index-1 pos-t-0 bg-light w-100 br-b-1px br-black-transp-10\">\n      <button @click=\"showMenu\" class=\"cursor-pointer\">\n        {{ isMenuOpen === false ? 'Show Menu' : 'Hide Menu' }}\n      </button>\n    </div>\n\n    <div  v-if=\"isMenuOpen\" class=\"z-index-0  pos-relative\">\n      <ul \n        class=\"ease-in-out w-100  bg-light\"\n      >\n        <CardPage \n          :page=\"pageParent\" \n          :hasAdminRights=\"hasAdminRights\"\n          class=\"pd-thin\"\n        />\n      </ul>  \n    </div>\n\n    <div  v-if=\"!isMenuOpen\" class=\"cols-[1fr_3fr] mobile:cols-1 h-100 bg-light z-index-0 pos-relative\">\n\n      <div class=\"desktop-only h-100 bg-white o-scroll z-index-0  pos-relative\">\n        <ul \n          class=\"ease-in-out w-100  bg-light\"\n        >\n          <CardPage \n            :page=\"pageParent\" \n            :hasAdminRights=\"hasAdminRights\"\n            class=\"bg-white pd-thin\"\n          />\n        </ul>  \n      </div>\n\n      <div class=\"o-scroll pd-medium\">\n        <Viewer\n          :content=\"page.content\"\n          class=\"\"\n        />\n\n        <div class=\"gap-thin cols-2 mobile:cols-1\">\n          <div  v-if=\"navigationPages.previousPage\" class=\"bg-white pd-medium mn-b-thin radius-semi \">\n            <h4 class=\"mn-b-small\" >Read Previous</h4>\n\n            <CardPage \n              :page=\"navigationPages.previousPage\" \n              :showChildren=\"false\"\n              class=\"h3 t-main bg-white mn-b-thin radius-semi\"\n            />\n          </div>\n\n          <div v-if=\"navigationPages.children.length > 0\" class=\"bg-white pd-medium mn-b-thin radius-semi \">\n            <h4 class=\"mn-b-small pd-micro \">Table of Contents</h4>\n            <CardPage \n              v-for=\"childPage in navigationPages.children\" \n              :key=\"childPage.id\"\n              :page=\"childPage\" \n              class=\"bg-white pd-micro  radius-semi\"\n            />\n          </div>\n\n          <div v-if=\"navigationPages.nextPage\" class=\"bg-white pd-medium mn-b-thin radius-semi\">\n            <h4 class=\"mn-b-small\" >Read Next</h4>\n            <CardPage \n              :page=\"navigationPages.nextPage\" \n              class=\"h3 t-main  bg-white mn-b-thin radius-semi\"\n              :showChildren=\"false\"\n            />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</template>\n\n<script setup>\n  // Import libs\n  import { computed, onMounted, ref, onServerPrefetch } from 'vue'\n\n  import { useRoute } from 'vue-router'\n  import { useI18n }    from 'vue-i18n'\n\n  import Viewer from '@martyrs/src/modules/constructor/components/sections/Viewer.vue';\n\n  import CardPage from '../blocks/CardPage.vue'\n\n  import * as pages from '../../store/pages';\n  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'\n\n  import { useGlobalMixins } from \"@martyrs/src/modules/core/views/mixins/mixins.js\"\n\n  const isMenuOpen = ref(false)\n\n  function showMenu () {\n    isMenuOpen.value = !isMenuOpen.value\n  }\n\n  function flattenTree(tree) {\n    const pages = [];\n\n    function recursiveFlatten(nodes, parent = null) {\n      for (const node of nodes) {\n        pages.push({ ...node, parent }); // Сохраняем родителя для каждого узла\n        if (node.children.length > 0) {\n          recursiveFlatten(node.children, node);\n        }\n      }\n    }\n\n    recursiveFlatten(tree.children);\n    return pages;\n  }\n\n  // Получаем плоский список всех страниц\n  const allPages = computed(() => flattenTree(pageParent.value));\n\n  // Вычисляемая функция для нахождения предыдущей и следующей страниц\n  const navigationPages = computed(() => {\n    // Если текущая страница - рутовая\n    if (page.value._id === pageParent.value._id) {\n      return { children: page.value.children, previousPage: null, nextPage: null };\n    }\n\n    const currentIndex = allPages.value.findIndex(p => p._id === page.value._id);\n    \n    const previousPage = currentIndex > 0 \n      ? allPages.value[currentIndex - 1] \n      : pageParent.value;  // Если нет предыдущего, берем родителя\n    \n    const nextPage = currentIndex < allPages.value.length - 1 \n      ? allPages.value[currentIndex + 1] \n      : null;\n\n    return { previousPage, nextPage, children: [] };\n  });\n\n  const { \n    normalizeUrlParam, \n    joinArrayToUrl,\n    isAdmin\n  } = useGlobalMixins()\n\n  const hasAdminRights = computed(() => {\n    return isAdmin(auth.state.access.roles)\n  })\n\n  const { t, locale } = useI18n()\n\n  const route = useRoute()\n\n  const pageParent = ref(null)\n  const page = ref(null)\n\n  onMounted(async () => {\n    let urlParent = route.params.url\n    if (urlParent.length > 0) urlParent = urlParent[0]\n\n    pageParent.value = await pages.actions.read({url: urlParent})\n\n    let url = route.params.url\n    if (url.length > 0) url = joinArrayToUrl(url)\n    \n    page.value = await pages.actions.read({url: url})  \n  })\n</script>\n\n<style lang=\"scss\">\n</style>\n"],"names":["auth.state","pages.actions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FE,UAAM,aAAa,IAAI,KAAK;AAE5B,aAAS,WAAY;AACnB,iBAAW,QAAQ,CAAC,WAAW;AAAA,IACjC;AAEA,aAAS,YAAY,MAAM;AACzB,YAAM,QAAQ,CAAA;AAEd,eAAS,iBAAiB,OAAO,SAAS,MAAM;AAC9C,mBAAW,QAAQ,OAAO;AACxB,gBAAM,KAAK,EAAE,GAAG,MAAM,OAAM,CAAE;AAC9B,cAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,6BAAiB,KAAK,UAAU,IAAI;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAEA,uBAAiB,KAAK,QAAQ;AAC9B,aAAO;AAAA,IACT;AAGA,UAAM,WAAW,SAAS,MAAM,YAAY,WAAW,KAAK,CAAC;AAG7D,UAAM,kBAAkB,SAAS,MAAM;AAErC,UAAI,KAAK,MAAM,QAAQ,WAAW,MAAM,KAAK;AAC3C,eAAO,EAAE,UAAU,KAAK,MAAM,UAAU,cAAc,MAAM,UAAU,KAAI;AAAA,MAC5E;AAEA,YAAM,eAAe,SAAS,MAAM,UAAU,OAAK,EAAE,QAAQ,KAAK,MAAM,GAAG;AAE3E,YAAM,eAAe,eAAe,IAChC,SAAS,MAAM,eAAe,CAAC,IAC/B,WAAW;AAEf,YAAM,WAAW,eAAe,SAAS,MAAM,SAAS,IACpD,SAAS,MAAM,eAAe,CAAC,IAC/B;AAEJ,aAAO,EAAE,cAAc,UAAU,UAAU,CAAA,EAAE;AAAA,IAC/C,CAAC;AAED,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACJ,IAAM,gBAAe;AAEnB,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,QAAQA,MAAW,OAAO,KAAK;AAAA,IACxC,CAAC;AAED,UAAM,EAAE,GAAG,OAAM,IAAK,QAAO;AAE7B,UAAM,QAAQ,SAAQ;AAEtB,UAAM,aAAa,IAAI,IAAI;AAC3B,UAAM,OAAO,IAAI,IAAI;AAErB,cAAU,YAAY;AACpB,UAAI,YAAY,MAAM,OAAO;AAC7B,UAAI,UAAU,SAAS,EAAG,aAAY,UAAU,CAAC;AAEjD,iBAAW,QAAQ,MAAMC,QAAc,KAAK,EAAC,KAAK,UAAS,CAAC;AAE5D,UAAI,MAAM,MAAM,OAAO;AACvB,UAAI,IAAI,SAAS,EAAG,OAAM,eAAe,GAAG;AAE5C,WAAK,QAAQ,MAAMA,QAAc,KAAK,EAAC,IAAQ,CAAC;AAAA,IAClD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/pages/views/components/pages/PageEdit.vue.js

@@ -2,8 +2,8 @@ import { ref, onMounted, createElementBlock, createCommentVNode, openBlock, crea
 import { useRoute, useRouter } from "vue-router";
 import { useGlobalMixins } from "../../../../core/views/mixins/mixins.js";
 import { actions, state } from "../../store/pages.js";
-import _sfc_main$2 from "../../../../../components/Button/Button.vue.js";
-/* empty css                                        */
+import _sfc_main$2 from "../../../../../components/Button/Button.vue2.js";
+/* empty css                                         */
 /* empty css                      */
 /* empty css                                            */
 import _sfc_main$1 from "../../../../constructor/components/sections/Constructor.vue.js";

package/dist/martyrs/src/modules/pages/views/components/partials/SidebarPages.vue.js

@@ -2,7 +2,7 @@ import { computed, ref, onMounted, createBlock, createCommentVNode, openBlock, w
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$1 from "../../../../../components/Block/Block.vue.js";
 import _sfc_main$3 from "../../../../../components/Popup/Popup.vue.js";
-import _sfc_main$5 from "../../../../../components/Button/Button.vue.js";
+import _sfc_main$5 from "../../../../../components/Button/Button.vue2.js";
 import _sfc_main$4 from "../../../../constructor/components/sections/Constructor.vue.js";
 import _sfc_main$2 from "../blocks/CardPage.vue.js";
 import { actions } from "../../store/pages.js";

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

@@ -6,7 +6,7 @@ import _sfc_main$2 from "../../../icons/navigation/IconDelete.vue.js";
 const _hoisted_1 = { class: "flex-v-center bg-light pd-small radius-small flex-column flex" };
 const _hoisted_2 = { class: "w-100 flex-v-center flex-nowrap gap-thin flex" };
 const _hoisted_3 = ["src"];
-const _hoisted_4 = { class: "my-handle t-truncate w-100 w-max-100 mn-r-auto" };
+const _hoisted_4 = { class: "my-handle truncate w-100 w-max-100 mn-r-auto" };
 const _sfc_main = {
   __name: "CardCategory",
   props: {

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

@@ -1 +1 @@
-{"version":3,"file":"CardCategory.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardCategory.vue"],"sourcesContent":["<template>\n  <div class=\"flex-v-center bg-light pd-small radius-small flex-column flex\">\n    <div class=\"w-100 flex-v-center flex-nowrap gap-thin flex\">\n      <img v-if=\"category.photo\" class=\"i-big radius-small object-fit-contain bg-white\" :src=\"(FILE_SERVER_URL || '') + category.photo\"/>\n      <h4 class=\"my-handle t-truncate w-100 w-max-100 mn-r-auto\">{{category.name}}</h4>\n\n      <router-link\n       v-if=\"access\"\n       :to=\"{\n          name: route.meta.context === 'backoffice' ? 'BackofficeCategoryEdit' : 'Organization_CategoryEdit',\n          params: {\n            _id: route.params._id,\n            category: category._id\n          }\n        }\"\n        class=\"\n          i-medium\n          cursor-pointer\n          card-page-actions\n          radius-extra pd-micro bg-second\n          flex-child-default\n        \"\n      >\n        <IconEdit\n          class=\"w-100 h-100\"\n          classes=\"fill-white\"\n        />\n      </router-link>\n\n      <button\n        v-if=\"access\"\n        @click=\"deleteCategory(category)\"\n        class=\"\n          i-medium\n          cursor-pointer \n          card-page-actions\n          radius-extra pd-micro bg-second\n          flex-child-default\n        \"\n      >\n        <IconDelete\n          class=\"w-100 h-100\"\n          :fill=\"'white'\"\n        />\n      </button>\n    </div>\n\n    <!-- <p v-if=\" category.children.length > 0\" class=\"w-100\">Subcategories:</p> -->\n   <!--  <CardCategory\n      v-for=\"(subcategory,index) in category.children\"\n      :key=\"subcategory._id\"\n      :category=\"subcategory\" \n      class=\"pd-l-small bg-white w-100\"\n    /> -->\n\n   </div>\n</template>\n\n\n<script setup>\nimport { toRef, onMounted, defineEmits } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport CardCategory from './CardCategory.vue'\n\nimport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue'\n\n\nconst props = defineProps({\n  category: Object,\n  access: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst emits = defineEmits(['delete']);\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst deleteCategory = (category) => {\n  emits('delete', category);\n};\n\n</script>\n\n\n\n<style lang=\"scss\">\n.card-title {\n  .card-page-actions {\n    display: none;\n  }\n\n  &:hover {\n    .card-page-actions {\n      display: block;\n    }\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8EA,UAAM,QAAQ;AAEd,UAAM,QAAQ,SAAQ;AACP,cAAS;AAExB,UAAM,iBAAiB,CAAC,aAAa;AACnC,YAAM,UAAU,QAAQ;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardCategory.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardCategory.vue"],"sourcesContent":["<template>\n  <div class=\"flex-v-center bg-light pd-small radius-small flex-column flex\">\n    <div class=\"w-100 flex-v-center flex-nowrap gap-thin flex\">\n      <img v-if=\"category.photo\" class=\"i-big radius-small object-fit-contain bg-white\" :src=\"(FILE_SERVER_URL || '') + category.photo\"/>\n      <h4 class=\"my-handle truncate w-100 w-max-100 mn-r-auto\">{{category.name}}</h4>\n\n      <router-link\n       v-if=\"access\"\n       :to=\"{\n          name: route.meta.context === 'backoffice' ? 'BackofficeCategoryEdit' : 'Organization_CategoryEdit',\n          params: {\n            _id: route.params._id,\n            category: category._id\n          }\n        }\"\n        class=\"\n          i-medium\n          cursor-pointer\n          card-page-actions\n          radius-extra pd-micro bg-second\n          flex-child-default\n        \"\n      >\n        <IconEdit\n          class=\"w-100 h-100\"\n          classes=\"fill-white\"\n        />\n      </router-link>\n\n      <button\n        v-if=\"access\"\n        @click=\"deleteCategory(category)\"\n        class=\"\n          i-medium\n          cursor-pointer \n          card-page-actions\n          radius-extra pd-micro bg-second\n          flex-child-default\n        \"\n      >\n        <IconDelete\n          class=\"w-100 h-100\"\n          :fill=\"'white'\"\n        />\n      </button>\n    </div>\n\n    <!-- <p v-if=\" category.children.length > 0\" class=\"w-100\">Subcategories:</p> -->\n   <!--  <CardCategory\n      v-for=\"(subcategory,index) in category.children\"\n      :key=\"subcategory._id\"\n      :category=\"subcategory\" \n      class=\"pd-l-small bg-white w-100\"\n    /> -->\n\n   </div>\n</template>\n\n\n<script setup>\nimport { toRef, onMounted, defineEmits } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\n\nimport CardCategory from './CardCategory.vue'\n\nimport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue'\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue'\n\n\nconst props = defineProps({\n  category: Object,\n  access: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst emits = defineEmits(['delete']);\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst deleteCategory = (category) => {\n  emits('delete', category);\n};\n\n</script>\n\n\n\n<style lang=\"scss\">\n.card-title {\n  .card-page-actions {\n    display: none;\n  }\n\n  &:hover {\n    .card-page-actions {\n      display: block;\n    }\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8EA,UAAM,QAAQ;AAEd,UAAM,QAAQ,SAAQ;AACP,cAAS;AAExB,UAAM,iBAAiB,CAAC,aAAa;AACnC,YAAM,UAAU,QAAQ;AAAA,IAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,11 +8,11 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = ["src"];
 const _hoisted_4 = { class: "mn-micro-negative flex flex-column w-100 o-hidden" };
-const _hoisted_5 = { class: "w-100 pd-micro t-trim trimmed capitalize t-medium" };
+const _hoisted_5 = { class: "w-100 pd-micro truncate trimmed capitalize fw-medium" };
 const _hoisted_6 = { class: "flex pd-micro flex-v-center gap-micro w-max" };
 const _hoisted_7 = {
   key: 1,
-  class: "t-transp p-small d-inline-block t-medium"
+  class: "t-transp p-small d-inline-block fw-medium"
 };
 const _hoisted_8 = { class: "flex gap-thin" };
 const _hoisted_9 = ["onClick"];
@@ -71,7 +71,7 @@ const _sfc_main = {
           createElementVNode("div", _hoisted_6, [
             __props.title ? (openBlock(), createElementBlock("span", {
               key: 0,
-              class: normalizeClass([__props.title_class, "t-second d-inline-block t-demi"])
+              class: normalizeClass([__props.title_class, "t-grey d-inline-block fw-demi"])
             }, toDisplayString(__props.title), 3)) : createCommentVNode("", true),
             __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
           ]),
@@ -81,7 +81,7 @@ const _sfc_main = {
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.actions, (action, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: normalizeClass([action.class || "bg-light", "radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover-scale-1"]),
+              class: normalizeClass([action.class || "bg-light", "radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover:scale-[1.05]"]),
               onClick: () => action.handler(_ctx.item, index)
             }, [
               (openBlock(), createBlock(resolveDynamicComponent(action.component), { class: "i-medium" }))

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

@@ -1 +1 @@
-{"version":3,"file":"CardPosition.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardPosition.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-small pd-small flex-nowrap flex-v-center flex gap-thin\">\n    <!-- Thumbnail image -->\n    <div v-if=\"showThumbnail\" class=\"aspect-1x1 h-3r flex-child-default radius-small o-hidden\">\n      <img\n        v-if=\"image && image.length > 0\"\n        :src=\"(FILE_SERVER_URL || '') + image\"\n        alt=\"Item image\"\n        class=\"w-100 h-100 object-fit-cover\"\n      />\n      <PlaceholderImage v-else class=\"w-100 h-100\" />\n    </div>\n    \n    <!-- Item details -->\n    <div class=\"mn-micro-negative flex flex-column w-100 o-hidden\">\n      <p class=\"w-100 pd-micro t-trim trimmed capitalize t-medium\">{{ name || 'Unnamed Product' }}</p>\n      \n      <div class=\"flex pd-micro flex-v-center gap-micro w-max \">\n      \t<span v-if=\"title\" :class=\"title_class\" class=\"t-second  d-inline-block t-demi\">{{title}}</span>\n      \t<span v-if=\"subtitle\" class=\"t-transp p-small d-inline-block t-medium\">{{ subtitle }}</span>\n      </div>\n    \t<slot></slot>\n    </div>\n    <!-- <p>\n     \n\n      <span class=\"p-small t-transp\">\n        <template v-if=\"product.quantity\">{{returnCurrency() }}{{product.price}} </template>\n        × \n        <template v-if=\"product.listing === 'rent' && rentDates.start && rentDates.end\">\n          {{ rentalDays }} days\n        </template>\n        \n        <template v-else>\n          {{ product.quantity || 0 }} {{ product.unit || 'pcs' }}\n        </template>\n      </span>\n    </p>  -->\n    \n    <!-- Actions -->\n    <div class=\"flex gap-thin\">\n      <template v-for=\"(action, index) in actions\" :key=\"index\">\n        <div \n          :class=\"action.class || 'bg-light'\"\n          class=\"radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover-scale-1\"\n          @click=\"() => action.handler(item, index)\"\n        >\n          <component\n            :is=\"action.component\"\n            class=\"i-medium\"\n          />\n        </div>\n      </template>\n      <slot name=\"actions\"></slot>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { defineProps } from 'vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue';\nimport { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\nconst { formatPrice } = useGlobalMixins();\n\nconst props = defineProps({\n\timage: {\n    type: String,\n  },\n  name: {\n    type: String,\n  },\n  title: {\n    type: String,\n  },\n  title_class: {\n  \ttype: Array\n  },\n  subtitle: {\n    type: String,\n  },\n  showThumbnail: {\n    type: Boolean,\n    default: true\n  },\n  actions: {\n    type: Array,\n    default: () => []\n    // Expected format:\n    // [\n    //   {\n    //     component: IconEdit,\n    //     handler: (item, index) => {},\n    //     class: 'bg-light' // optional custom class\n    //   }\n    // ]\n  }\n});\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,UAAM,EAAE,YAAW,IAAK,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardPosition.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardPosition.vue"],"sourcesContent":["<template>\n  <div class=\"bg-white radius-small pd-small flex-nowrap flex-v-center flex gap-thin\">\n    <!-- Thumbnail image -->\n    <div v-if=\"showThumbnail\" class=\"aspect-1x1 h-3r flex-child-default radius-small o-hidden\">\n      <img\n        v-if=\"image && image.length > 0\"\n        :src=\"(FILE_SERVER_URL || '') + image\"\n        alt=\"Item image\"\n        class=\"w-100 h-100 object-fit-cover\"\n      />\n      <PlaceholderImage v-else class=\"w-100 h-100\" />\n    </div>\n    \n    <!-- Item details -->\n    <div class=\"mn-micro-negative flex flex-column w-100 o-hidden\">\n      <p class=\"w-100 pd-micro truncate trimmed capitalize fw-medium\">{{ name || 'Unnamed Product' }}</p>\n      \n      <div class=\"flex pd-micro flex-v-center gap-micro w-max \">\n      \t<span v-if=\"title\" :class=\"title_class\" class=\"t-grey  d-inline-block fw-demi\">{{title}}</span>\n      \t<span v-if=\"subtitle\" class=\"t-transp p-small d-inline-block fw-medium\">{{ subtitle }}</span>\n      </div>\n    \t<slot></slot>\n    </div>\n    <!-- <p>\n     \n\n      <span class=\"p-small t-transp\">\n        <template v-if=\"product.quantity\">{{returnCurrency() }}{{product.price}} </template>\n        × \n        <template v-if=\"product.listing === 'rent' && rentDates.start && rentDates.end\">\n          {{ rentalDays }} days\n        </template>\n        \n        <template v-else>\n          {{ product.quantity || 0 }} {{ product.unit || 'pcs' }}\n        </template>\n      </span>\n    </p>  -->\n    \n    <!-- Actions -->\n    <div class=\"flex gap-thin\">\n      <template v-for=\"(action, index) in actions\" :key=\"index\">\n        <div \n          :class=\"action.class || 'bg-light'\"\n          class=\"radius-small pd-small flex-center flex aspect-1x1 cursor-pointer hover:scale-[1.05]\"\n          @click=\"() => action.handler(item, index)\"\n        >\n          <component\n            :is=\"action.component\"\n            class=\"i-medium\"\n          />\n        </div>\n      </template>\n      <slot name=\"actions\"></slot>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { defineProps } from 'vue';\nimport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue';\nimport { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\nconst { formatPrice } = useGlobalMixins();\n\nconst props = defineProps({\n\timage: {\n    type: String,\n  },\n  name: {\n    type: String,\n  },\n  title: {\n    type: String,\n  },\n  title_class: {\n  \ttype: Array\n  },\n  subtitle: {\n    type: String,\n  },\n  showThumbnail: {\n    type: Boolean,\n    default: true\n  },\n  actions: {\n    type: Array,\n    default: () => []\n    // Expected format:\n    // [\n    //   {\n    //     component: IconEdit,\n    //     handler: (item, index) => {},\n    //     class: 'bg-light' // optional custom class\n    //   }\n    // ]\n  }\n});\n</script>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,UAAM,EAAE,YAAW,IAAK,gBAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -13,16 +13,16 @@ const _hoisted_3 = { class: "w-100 h-100 pos-relative" };
 const _hoisted_4 = ["src"];
 const _hoisted_5 = {
   key: 2,
-  class: "pos-absolute bg-white t-black pd-thin radius-medium p-small t-medium pos-t-medium pos-l-medium"
+  class: "pos-absolute bg-white t-black pd-thin radius-medium p-small fw-medium pos-t-small pos-l-small"
 };
 const _hoisted_6 = { class: "pd-small cols-1 t-left" };
 const _hoisted_7 = {
   key: 0,
-  class: "t-semi t-transp p-small mn-b-thin"
+  class: "fw-semi t-transp p-small mn-b-thin"
 };
 const _hoisted_8 = {
   style: { "hyphens": "auto" },
-  class: "word-break t-truncate p-regular mn-b-micro w-100 w-max-100"
+  class: "word-break truncate p-regular mn-b-micro w-100 w-max-100"
 };
 const _hoisted_9 = {
   key: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"CardProduct.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardProduct.vue"],"sourcesContent":["<template>\n\t<div \n\t\tclass=\"\n\t\t\tradius-medium \n\t\t\tcols-1\n\t\t\to-hidden\n\t\t\tpos-relative\n\t\t\"\n\t>\n\t\t<!-- Edit Button -->\n\t\t<router-link\n\t\t\tv-if=\"access\"\n      :to=\"editPath\"\n      class=\"\n      \tz-index-2\n        cursor-pointer \n        pos-absolute pos-t-regular pos-r-regular\n        radius-extra pd-thin bg-second\n      \"\n    >\n      <IconEdit\n        class=\"i-medium\"\n        classes=\"fill-white\"\n      />\n    </router-link>\n\n\t\t<!-- Product Image Sqaure -->\n\t\t<div \n\t\t\tclass=\"o-hidden d-flex  pd-thin pd-b-zero radius-medium o-hidden w-100 pos-relative aspect-1x1\"\n\t\t>\n\t\t\t<div class=\"w-100  h-100 pos-relative\">\n\t\t\t\t<!-- Image Wrappers  -->\n\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\tv-if=\"product.images?.[0]\" \n\t\t\t\t\t:src=\"(FILE_SERVER_URL || '') + (product.images?.[0] || '').split('/').slice(0, -1).join('/') + '/thumbnail_' + (product.images?.[0] || '').split('/').pop()\"\n\t\t\t\t\tclass=\"pos-absolute object-fit-cover radius-small h-max-100 h-100  w-100\"\n\t\t\t\t>\n\n\t\t\t\t<PlaceholderImage\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"radius-medium h-100 w-100\"\n\t\t\t\t/>\n\t\t\t\t<span v-if=\"product.available <= 0 && product.listing !== 'rent'\" class=\"pos-absolute bg-white t-black pd-thin radius-medium p-small t-medium pos-t-medium pos-l-medium\">Out of Stock</span>\n\t\t\t\t<THC v-if=\"product.attributes?.length > 0 && product.attributes[1]?.name === 'THC'\" :product=\"product\" />\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Product Info Start -->\n\t\t<div  class=\"pd-small cols-1 t-left\">\n\t\t\t<!-- Detail -->\n\t\t\t<p\n\t\t\t\tv-if=\"product.attributes?.length > 0\"\n\t\t\t\tclass=\"t-semi t-transp p-small mn-b-thin\"\n\t\t\t>\n\t\t\t\t{{product.attributes[0]?.value}}\n\t\t\t</p>\n\t\t\t<!-- Name -->\n\t\t\t<span style=\" hyphens: auto;\" class=\"word-break t-truncate p-regular mn-b-micro w-100 w-max-100 \">\n\t\t\t\t{{product.name}}\n\t\t\t</span>\n\n\t\t\t<p \n\t\t\t\tv-if=\"product.description && !product.translations && product.listing !== 'rent'\" \n\t\t\t\tclass=\"mn-b-small t-transp p-small\"\n\t\t\t>\n\t\t\t\t{{product.description.substring(0, 99)}}...\n\t\t\t</p>\n\n\t\t\t<slot></slot>\n\n\t\t\t<div v-if=\"product.variants?.length > 0\" class=\"flex-v-center flex-nowrap flex\">\n\t\t\t\t<Price \n\t\t\t\t\t:product=\"product\" \n\t\t\t\t\tsize=\"small\" \n\t\t\t\t\tclass=\"bg-white h-100 p-regular flex flex-center pd-thin radius-small mn-r-auto\" \n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t<button\n\t\t\t\t\tv-if=\"showAddToCart\"\n\t\t      class=\"\n\t\t        cursor-pointer \n\t\t        radius-extra pd-thin bg-main\n\t\t      \"\n\t\t    >\n\t\t      <IconShopcartAdd\n\t\t\t\t\t\tclass=\"icon-button-main i-medium\"\n\t\t\t\t\t/>\n\t\t    </button>\n\t\t  </div>\n\t\t</div>\n\n\t</div>\n\n</template>\n\n\n<script setup=\"props\">\n\timport {computed } from 'vue'\n\timport { useI18n }    from 'vue-i18n'\n\timport { useRoute } from 'vue-router'\n\n\timport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\n\timport IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue'\n\n\timport THC from '@martyrs/src/modules/products/components/elements/THC.vue'\n\timport Price from '@martyrs/src/modules/products/components/elements/Price.vue'\n\n\timport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\n\n\tconst route = useRoute()\n\n\tconst props = defineProps({\n\t\tproduct: {\n\t\t\ttype: Object\n\t\t},\n\t\taccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false\n\t\t},\n\t\torganization: {\n\t\t\ttype: String\n\t\t},\n\t\tshowAddToCart: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true\n\t\t},\n\t\tuser: {\n\t\t\ttype: [Object, String]\n\t\t},\n\t\ttype: {\n\t\t\ttype: Object\n\t\t}\n\t})\n\n  const { t } = useI18n()\n\n\tconst editPath = computed(() => {\n\t\tif (route.meta.context === 'backoffice') {\n\t\t\treturn `/backoffice/products/${props.product._id}/edit`\n\t\t}\n\t\tif (route.meta.context === 'organization' || props.organization) {\n\t\t\tconst orgId = props.organization || route.params._id\n\t\t\treturn `/organizations/${orgId}/products/${props.product._id}/edit`\n\t\t}\n\t\treturn `/products/${props.product._id}/edit`\n\t})\n</script>\n\n<style lang=\"scss\">\n.word-break {\n  width: 100%; \n  overflow: auto;\n  overflow-wrap: break-word;\n  word-break: break-all;\n  white-space: -moz-pre-wrap;\n  white-space: -hp-pre-wrap;\n  white-space: -o-pre-wrap;\n  white-space: -pre-wrap; \n  white-space: pre-wrap; \n  white-space: pre-line; \n  word-wrap: break-word;\n}\n</style>\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GC,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AAuBb,UAAM,EAAE,EAAC,IAAK,QAAO;AAEtB,UAAM,WAAW,SAAS,MAAM;AAC/B,UAAI,MAAM,KAAK,YAAY,cAAc;AACxC,eAAO,wBAAwB,MAAM,QAAQ,GAAG;AAAA,MACjD;AACA,UAAI,MAAM,KAAK,YAAY,kBAAkB,MAAM,cAAc;AAChE,cAAM,QAAQ,MAAM,gBAAgB,MAAM,OAAO;AACjD,eAAO,kBAAkB,KAAK,aAAa,MAAM,QAAQ,GAAG;AAAA,MAC7D;AACA,aAAO,aAAa,MAAM,QAAQ,GAAG;AAAA,IACtC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CardProduct.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/CardProduct.vue"],"sourcesContent":["<template>\n\t<div \n\t\tclass=\"\n\t\t\tradius-medium \n\t\t\tcols-1\n\t\t\to-hidden\n\t\t\tpos-relative\n\t\t\"\n\t>\n\t\t<!-- Edit Button -->\n\t\t<router-link\n\t\t\tv-if=\"access\"\n      :to=\"editPath\"\n      class=\"\n      \tz-index-2\n        cursor-pointer \n        pos-absolute pos-t-regular pos-r-regular\n        radius-extra pd-thin bg-second\n      \"\n    >\n      <IconEdit\n        class=\"i-medium\"\n        classes=\"fill-white\"\n      />\n    </router-link>\n\n\t\t<!-- Product Image Sqaure -->\n\t\t<div \n\t\t\tclass=\"o-hidden d-flex  pd-thin pd-b-zero radius-medium o-hidden w-100 pos-relative aspect-1x1\"\n\t\t>\n\t\t\t<div class=\"w-100  h-100 pos-relative\">\n\t\t\t\t<!-- Image Wrappers  -->\n\t\t\t\t<img loading=\"lazy\" \n\t\t\t\t\tv-if=\"product.images?.[0]\" \n\t\t\t\t\t:src=\"(FILE_SERVER_URL || '') + (product.images?.[0] || '').split('/').slice(0, -1).join('/') + '/thumbnail_' + (product.images?.[0] || '').split('/').pop()\"\n\t\t\t\t\tclass=\"pos-absolute object-fit-cover radius-small h-max-100 h-100  w-100\"\n\t\t\t\t>\n\n\t\t\t\t<PlaceholderImage\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"radius-medium h-100 w-100\"\n\t\t\t\t/>\n\t\t\t\t<span v-if=\"product.available <= 0 && product.listing !== 'rent'\" class=\"pos-absolute bg-white t-black pd-thin radius-medium p-small fw-medium pos-t-small pos-l-small\">Out of Stock</span>\n\t\t\t\t<THC v-if=\"product.attributes?.length > 0 && product.attributes[1]?.name === 'THC'\" :product=\"product\" />\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- Product Info Start -->\n\t\t<div  class=\"pd-small cols-1 t-left\">\n\t\t\t<!-- Detail -->\n\t\t\t<p\n\t\t\t\tv-if=\"product.attributes?.length > 0\"\n\t\t\t\tclass=\"fw-semi t-transp p-small mn-b-thin\"\n\t\t\t>\n\t\t\t\t{{product.attributes[0]?.value}}\n\t\t\t</p>\n\t\t\t<!-- Name -->\n\t\t\t<span style=\" hyphens: auto;\" class=\"word-break truncate p-regular mn-b-micro w-100 w-max-100 \">\n\t\t\t\t{{product.name}}\n\t\t\t</span>\n\n\t\t\t<p \n\t\t\t\tv-if=\"product.description && !product.translations && product.listing !== 'rent'\" \n\t\t\t\tclass=\"mn-b-small t-transp p-small\"\n\t\t\t>\n\t\t\t\t{{product.description.substring(0, 99)}}...\n\t\t\t</p>\n\n\t\t\t<slot></slot>\n\n\t\t\t<div v-if=\"product.variants?.length > 0\" class=\"flex-v-center flex-nowrap flex\">\n\t\t\t\t<Price \n\t\t\t\t\t:product=\"product\" \n\t\t\t\t\tsize=\"small\" \n\t\t\t\t\tclass=\"bg-white h-100 p-regular flex flex-center pd-thin radius-small mn-r-auto\" \n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t<button\n\t\t\t\t\tv-if=\"showAddToCart\"\n\t\t      class=\"\n\t\t        cursor-pointer \n\t\t        radius-extra pd-thin bg-main\n\t\t      \"\n\t\t    >\n\t\t      <IconShopcartAdd\n\t\t\t\t\t\tclass=\"icon-button-main i-medium\"\n\t\t\t\t\t/>\n\t\t    </button>\n\t\t  </div>\n\t\t</div>\n\n\t</div>\n\n</template>\n\n\n<script setup=\"props\">\n\timport {computed } from 'vue'\n\timport { useI18n }    from 'vue-i18n'\n\timport { useRoute } from 'vue-router'\n\n\timport IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'\n\timport IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue'\n\n\timport THC from '@martyrs/src/modules/products/components/elements/THC.vue'\n\timport Price from '@martyrs/src/modules/products/components/elements/Price.vue'\n\n\timport PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'\n\n\tconst route = useRoute()\n\n\tconst props = defineProps({\n\t\tproduct: {\n\t\t\ttype: Object\n\t\t},\n\t\taccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false\n\t\t},\n\t\torganization: {\n\t\t\ttype: String\n\t\t},\n\t\tshowAddToCart: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true\n\t\t},\n\t\tuser: {\n\t\t\ttype: [Object, String]\n\t\t},\n\t\ttype: {\n\t\t\ttype: Object\n\t\t}\n\t})\n\n  const { t } = useI18n()\n\n\tconst editPath = computed(() => {\n\t\tif (route.meta.context === 'backoffice') {\n\t\t\treturn `/backoffice/products/${props.product._id}/edit`\n\t\t}\n\t\tif (route.meta.context === 'organization' || props.organization) {\n\t\t\tconst orgId = props.organization || route.params._id\n\t\t\treturn `/organizations/${orgId}/products/${props.product._id}/edit`\n\t\t}\n\t\treturn `/products/${props.product._id}/edit`\n\t})\n</script>\n\n<style lang=\"scss\">\n.word-break {\n  width: 100%; \n  overflow: auto;\n  overflow-wrap: break-word;\n  word-break: break-all;\n  white-space: -moz-pre-wrap;\n  white-space: -hp-pre-wrap;\n  white-space: -o-pre-wrap;\n  white-space: -pre-wrap; \n  white-space: pre-wrap; \n  white-space: pre-line; \n  word-wrap: break-word;\n}\n</style>\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GC,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AAuBb,UAAM,EAAE,EAAC,IAAK,QAAO;AAEtB,UAAM,WAAW,SAAS,MAAM;AAC/B,UAAI,MAAM,KAAK,YAAY,cAAc;AACxC,eAAO,wBAAwB,MAAM,QAAQ,GAAG;AAAA,MACjD;AACA,UAAI,MAAM,KAAK,YAAY,kBAAkB,MAAM,cAAc;AAChE,cAAM,QAAQ,MAAM,gBAAgB,MAAM,OAAO;AACjD,eAAO,kBAAkB,KAAK,aAAa,MAAM,QAAQ,GAAG;AAAA,MAC7D;AACA,aAAO,aAAa,MAAM,QAAQ,GAAG;AAAA,IACtC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -10,7 +10,7 @@ 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"];
 const _hoisted_5 = { class: "flex flex-wrap gap-thin flex-v-center w-100" };
-const _hoisted_6 = { class: "discount-name t-semi p-regular" };
+const _hoisted_6 = { class: "discount-name fw-semi p-regular" };
 const _hoisted_7 = { class: "t-main p-regular" };
 const _hoisted_8 = {
   key: 0,
@@ -88,13 +88,13 @@ const _sfc_main = {
       return __props.discounts && __props.discounts.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           createVNode(_sfc_main$1, { class: "mn-r-micro i-medium" }),
-          _cache[0] || (_cache[0] = createElementVNode("p", { class: "t-medium" }, "Special Offers", -1))
+          _cache[0] || (_cache[0] = createElementVNode("p", { class: "fw-medium" }, "Special Offers", -1))
         ]),
         createElementVNode("div", _hoisted_3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.discounts, (discount, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
-              class: "discount-card bg-light pd-small radius-small br-1px br-solid br-light cursor-pointer",
+              class: "discount-card bg-light pd-small radius-small br-1px br-light cursor-pointer",
               onClick: ($event) => selectDiscount(discount)
             }, [
               createElementVNode("div", _hoisted_5, [
@@ -122,7 +122,7 @@ const _sfc_main = {
     };
   }
 };
-const ProductDiscounts = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-def3f361"]]);
+const ProductDiscounts = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-75ed8485"]]);
 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\">\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-regular\">{{ discount.name }}</span>\n          </Tooltip>\n\n          <span class=\"t-main p-regular\">\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';\nimport { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\nconst { returnCurrency } = useGlobalMixins();\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,EAAE,eAAc,IAAK,gBAAe;AAE1C,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;AAI7B,YAAM,UAAU;AAEhB,aAAO,UAAU,GAAG,KAAK,IAAI,GAAG,WAAW,GAAG,KAAK,IAAI,GAAG;AAAA,IAC5D;AAGA,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,MAAM,oBAAoB,MAAM,iBAAiB,SAAS,IAAI,MAAM,gBAAgB,CAAC,IAAI;AAAA,IAClG,CAAC;AAED,UAAM,uBAAuB,CAAC,aAAa;AACzC,YAAM,QAAQ,CAAA;AAUd,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,UAAU,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACpD,CAAK;AAAA,MACH;AAGA,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,cAAc,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACxD,CAAK;AAAA,MACH;AAEA,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=\"fw-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-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 fw-semi p-regular\">{{ discount.name }}</span>\n          </Tooltip>\n\n          <span class=\"t-main p-regular\">\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';\nimport { useGlobalMixins } from '@martyrs/src/modules/core/views/mixins/mixins.js';\n\nconst { returnCurrency } = useGlobalMixins();\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,EAAE,eAAc,IAAK,gBAAe;AAE1C,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;AAI7B,YAAM,UAAU;AAEhB,aAAO,UAAU,GAAG,KAAK,IAAI,GAAG,WAAW,GAAG,KAAK,IAAI,GAAG;AAAA,IAC5D;AAGA,UAAM,iBAAiB,SAAS,MAAM;AACpC,aAAO,MAAM,oBAAoB,MAAM,iBAAiB,SAAS,IAAI,MAAM,gBAAgB,CAAC,IAAI;AAAA,IAClG,CAAC;AAED,UAAM,uBAAuB,CAAC,aAAa;AACzC,YAAM,QAAQ,CAAA;AAUd,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,UAAU,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACpD,CAAK;AAAA,MACH;AAGA,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,KAAK;AAAA,UACT,MAAM,cAAc,gBAAgB,SAAS,IAAI,CAAC;AAAA,QACxD,CAAK;AAAA,MACH;AAEA,aAAO;AAAA,IACT;AAEA,UAAM,iBAAiB,CAAC,aAAa;AACnC,WAAK,mBAAmB,QAAQ;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,7 @@ import PlaceholderImage from "../../../icons/placeholders/PlaceholderImage.vue.j
 import Image360 from "../elements/Image360.vue.js";
 /* empty css                   */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-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_1 = { class: "w-100 bs-big 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,
@@ -78,7 +78,7 @@ const _sfc_main = {
             __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"
+              class: "aspect-1x1 radius-small o-hidden thumbnail flex flex-center fw-medium t-black bg-white"
             }, " +" + toDisplayString(__props.images.length - 5), 1)) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
@@ -99,7 +99,7 @@ const _sfc_main = {
     };
   }
 };
-const ProductImages = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-eddb4b2b"]]);
+const ProductImages = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2037f0f7"]]);
 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 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 w-100 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProductImages.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductImages.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 bs-big 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 fw-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 w-100 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.js

@@ -1,6 +1,6 @@
 import { ref, computed, watch, onMounted, createElementBlock, openBlock, Fragment, renderList, createElementVNode, toDisplayString, normalizeClass, createCommentVNode } from "vue";
 const _hoisted_1 = { class: "w-100" };
-const _hoisted_2 = { class: "capitalize mn-b-thin t-medium" };
+const _hoisted_2 = { class: "capitalize mn-b-thin fw-medium" };
 const _hoisted_3 = { class: "flex flex-wrap gap-thin mn-b-medium" };
 const _hoisted_4 = ["onClick", "disabled"];
 const _hoisted_5 = ["src"];
@@ -98,7 +98,7 @@ const _sfc_main = {
                   disabled: item.off,
                   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"
+                    item.off ? "o-50 cursor-not-allowed" : "cursor-pointer hover:scale-[1.05]"
                   ]])
                 }, [
                   item.img ? (openBlock(), createElementBlock("img", {

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\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  if (m && selected.value?._id !== m._id) {\n    pick(m);\n  } else if (!m) {\n    selected.value = null;\n  }\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":";;;;;;;;;;;;;;;;AA6CA,UAAM,QAAQ;AACd,UAAM,OAAO;AAEb,UAAM,qBAAqB,IAAI,EAAE;AACjC,UAAM,WAAW,IAAI,IAAI;AAEzB,UAAM,WAAW;AAAA,MAAS,MACxB,MAAM,gBAAgB,KAAK,OAAK,EAAE,YAAY,MAAM;AAAA,IACtD;AAEA,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,SAAS,OAAO;AAClB,cAAM,SAAS,CAAC,GAAG,IAAI,IAAI,MAAM,gBAAgB,CAAC,EAAE,WAAW,IAAI,OAAK,EAAE,IAAI,CAAC,CAAC;AAChF,eAAO,OAAO,IAAI,CAAC,KAAK,OAAO;AAAA,UAC7B,OAAO;AAAA,UACP,OAAO,CAAC,GAAG,IAAI;AAAA,YACb,MAAM,gBAAgB,IAAI,OAAK,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,GAAG,GAAG,KAAK;AAAA,UACpF,CAAO,EACE,OAAO,OAAO,EACd,IAAI,SAAO;AACV,kBAAM,IAAI,MAAM,gBAAgB,KAAK,OAAK,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,OAAO,EAAE,UAAU,GAAG,CAAC;AACnG,mBAAO;AAAA,cACL,KAAK,MAAM;AAAA,cACX,OAAO;AAAA,cACP,KAAK,MAAM,IAAI,EAAE,SAAS,CAAC,IAAI;AAAA,cAC/B,KAAK,CAAC,EAAE;AAAA,cACR,MAAM;AAAA,YAClB;AAAA,UACQ,CAAC;AAAA,QACT,EAAM;AAAA,MACJ;AACA,UAAI,MAAM,gBAAgB,SAAS,GAAG;AACpC,eAAO,CAAC;AAAA,UACN,OAAO;AAAA,UACP,OAAO,MAAM,gBAAgB,IAAI,QAAM;AAAA,YACrC,KAAK,EAAE;AAAA,YACP,SAAS;AAAA,YACT,KAAK,EAAE,SAAS,CAAC;AAAA,YACjB,KAAK,CAAC,EAAE;AAAA,YACR,MAAM,EAAE,QAAQ,EAAE;AAAA,UAC1B,EAAQ;AAAA,QACR,CAAK;AAAA,MACH;AACA,aAAO,CAAA;AAAA,IACT,CAAC;AAED,UAAM,OAAO,OAAK;AAChB,UAAI,CAAC,EAAE,UAAW;AAClB,yBAAmB,QAAQ,OAAO,YAAY,EAAE,YAAY,IAAI,OAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAA,CAAE;AAC7F,eAAS,QAAQ;AACjB,WAAK,oBAAoB,CAAC;AAC1B,QAAE,QAAQ,UAAU,KAAK,iBAAiB,EAAE,MAAM;AAAA,IACpD;AAEA,UAAM,WAAW,CAAC,KAAK,QAAQ;AAC7B,YAAM,OAAO,EAAE,GAAG,mBAAmB,OAAO,CAAC,GAAG,GAAG,IAAG;AACtD,UAAI,CAAC,MAAM,gBAAgB;AAAA,QAAK,OAC9B,OAAO,QAAQ,IAAI,EAAE;AAAA,UAAM,CAAC,CAAC,GAAG,CAAC,MAC/B,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,KAAK,EAAE,UAAU,CAAC;AAAA,QAC1D;AAAA,MACA,EAAK;AACH,yBAAmB,QAAQ;AAAA,IAC7B;AAEA,UAAM,oBAAoB,WAAS;AACjC,YAAM,IAAI,MAAM,gBAAgB;AAAA,QAAK,OACnC,OAAO,QAAQ,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,KAAK,EAAE,UAAU,CAAC,CAAC;AAAA,MACjG;AACE,UAAI,KAAK,SAAS,OAAO,QAAQ,EAAE,KAAK;AACtC,aAAK,CAAC;AAAA,MACR,WAAW,CAAC,GAAG;AACb,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF,CAAC;AAED,cAAU,MAAM,MAAM,gBAAgB,WAAW,KAAK,KAAK,MAAM,gBAAgB,CAAC,CAAC,CAAC;AAEpF,UAAM,aAAa,CAAC,GAAG,MACrB,EAAE,UAAU,YACR,SAAS,OAAO,QAAQ,EAAE,SAAS,MACnC,mBAAmB,MAAM,EAAE,KAAK,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ProductVariants.vue.js","sources":["../../../../../../../src/modules/products/components/blocks/ProductVariants.vue"],"sourcesContent":["<template>\n  <div class=\"w-100\">\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 fw-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.05]',\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  if (m && selected.value?._id !== m._id) {\n    pick(m);\n  } else if (!m) {\n    selected.value = null;\n  }\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":";;;;;;;;;;;;;;;;AA6CA,UAAM,QAAQ;AACd,UAAM,OAAO;AAEb,UAAM,qBAAqB,IAAI,EAAE;AACjC,UAAM,WAAW,IAAI,IAAI;AAEzB,UAAM,WAAW;AAAA,MAAS,MACxB,MAAM,gBAAgB,KAAK,OAAK,EAAE,YAAY,MAAM;AAAA,IACtD;AAEA,UAAM,SAAS,SAAS,MAAM;AAC5B,UAAI,SAAS,OAAO;AAClB,cAAM,SAAS,CAAC,GAAG,IAAI,IAAI,MAAM,gBAAgB,CAAC,EAAE,WAAW,IAAI,OAAK,EAAE,IAAI,CAAC,CAAC;AAChF,eAAO,OAAO,IAAI,CAAC,KAAK,OAAO;AAAA,UAC7B,OAAO;AAAA,UACP,OAAO,CAAC,GAAG,IAAI;AAAA,YACb,MAAM,gBAAgB,IAAI,OAAK,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,GAAG,GAAG,KAAK;AAAA,UACpF,CAAO,EACE,OAAO,OAAO,EACd,IAAI,SAAO;AACV,kBAAM,IAAI,MAAM,gBAAgB,KAAK,OAAK,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,OAAO,EAAE,UAAU,GAAG,CAAC;AACnG,mBAAO;AAAA,cACL,KAAK,MAAM;AAAA,cACX,OAAO;AAAA,cACP,KAAK,MAAM,IAAI,EAAE,SAAS,CAAC,IAAI;AAAA,cAC/B,KAAK,CAAC,EAAE;AAAA,cACR,MAAM;AAAA,YAClB;AAAA,UACQ,CAAC;AAAA,QACT,EAAM;AAAA,MACJ;AACA,UAAI,MAAM,gBAAgB,SAAS,GAAG;AACpC,eAAO,CAAC;AAAA,UACN,OAAO;AAAA,UACP,OAAO,MAAM,gBAAgB,IAAI,QAAM;AAAA,YACrC,KAAK,EAAE;AAAA,YACP,SAAS;AAAA,YACT,KAAK,EAAE,SAAS,CAAC;AAAA,YACjB,KAAK,CAAC,EAAE;AAAA,YACR,MAAM,EAAE,QAAQ,EAAE;AAAA,UAC1B,EAAQ;AAAA,QACR,CAAK;AAAA,MACH;AACA,aAAO,CAAA;AAAA,IACT,CAAC;AAED,UAAM,OAAO,OAAK;AAChB,UAAI,CAAC,EAAE,UAAW;AAClB,yBAAmB,QAAQ,OAAO,YAAY,EAAE,YAAY,IAAI,OAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,CAAA,CAAE;AAC7F,eAAS,QAAQ;AACjB,WAAK,oBAAoB,CAAC;AAC1B,QAAE,QAAQ,UAAU,KAAK,iBAAiB,EAAE,MAAM;AAAA,IACpD;AAEA,UAAM,WAAW,CAAC,KAAK,QAAQ;AAC7B,YAAM,OAAO,EAAE,GAAG,mBAAmB,OAAO,CAAC,GAAG,GAAG,IAAG;AACtD,UAAI,CAAC,MAAM,gBAAgB;AAAA,QAAK,OAC9B,OAAO,QAAQ,IAAI,EAAE;AAAA,UAAM,CAAC,CAAC,GAAG,CAAC,MAC/B,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,KAAK,EAAE,UAAU,CAAC;AAAA,QAC1D;AAAA,MACA,EAAK;AACH,yBAAmB,QAAQ;AAAA,IAC7B;AAEA,UAAM,oBAAoB,WAAS;AACjC,YAAM,IAAI,MAAM,gBAAgB;AAAA,QAAK,OACnC,OAAO,QAAQ,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,KAAK,OAAK,EAAE,SAAS,KAAK,EAAE,UAAU,CAAC,CAAC;AAAA,MACjG;AACE,UAAI,KAAK,SAAS,OAAO,QAAQ,EAAE,KAAK;AACtC,aAAK,CAAC;AAAA,MACR,WAAW,CAAC,GAAG;AACb,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF,CAAC;AAED,cAAU,MAAM,MAAM,gBAAgB,WAAW,KAAK,KAAK,MAAM,gBAAgB,CAAC,CAAC,CAAC;AAEpF,UAAM,aAAa,CAAC,GAAG,MACrB,EAAE,UAAU,YACR,SAAS,OAAO,QAAQ,EAAE,SAAS,MACnC,mBAAmB,MAAM,EAAE,KAAK,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/products/components/elements/Image360.vue.js

@@ -5,7 +5,7 @@ import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js
 const _hoisted_1 = { class: "product-360-viewer" };
 const _hoisted_2 = {
   key: 0,
-  class: "h-100 w-100 transition-ease"
+  class: "h-100 w-100 ease"
 };
 const _hoisted_3 = ["src"];
 const _sfc_main = {
@@ -87,7 +87,7 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        _cache[1] || (_cache[1] = createStaticVNode('<svg class="pos-absolute z-index-2 pos-b-0 pd-small" width="73" height="50" viewBox="0 0 73 50" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-489e9d2e><path d="M42.5934 17.2017C42.5934 20.8208 39.8428 23.7544 36.45 23.7544C33.0573 23.7544 30.3066 20.8208 30.3066 17.2017C30.3066 13.5826 33.0573 10.6484 36.45 10.6484C39.8428 10.6484 42.5934 13.5826 42.5934 17.2017Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-489e9d2e></path><path d="M22.5953 29.4883H50.3053C53.7389 29.4883 56.5197 26.778 56.5197 23.4405V10.8396C56.5197 7.49996 53.739 4.79176 50.3053 4.79176H48.8712C48.2747 2.05313 45.7826 0 42.7962 0H30.1063C27.1179 0 24.6257 2.053 24.0313 4.78967H22.5971C19.1656 4.78967 16.3828 7.49788 16.3828 10.8375V23.4384C16.3807 26.778 19.1634 29.4882 22.595 29.4882L22.5953 29.4883ZM36.449 8.31471C41.4535 8.31471 45.5123 12.2648 45.5123 17.1352C45.5123 22.0062 41.4535 25.9582 36.449 25.9582C31.4445 25.9582 27.3856 22.0081 27.3856 17.1377C27.3856 12.2673 31.4445 8.31471 36.449 8.31471ZM20.9092 9.32597H24.0182C24.9472 9.32597 25.7019 10.0584 25.7019 10.9625C25.7019 11.8686 24.9493 12.6011 24.0182 12.6011H20.9092C19.9823 12.6011 19.2254 11.8707 19.2254 10.9625C19.2275 10.0604 19.9822 9.32597 20.9092 9.32597Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-489e9d2e></path><path d="M58.8645 12.2878C58.8645 12.2878 77.1839 21.8549 65.5604 32.0445C63.6718 33.6967 55.2747 38.9138 42.5947 39.9368V45.0519C50.0424 44.2514 61.7635 41.887 68.4037 34.9253C82.5323 20.1097 58.8657 12.2871 58.8657 12.2871L58.8645 12.2878Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-489e9d2e></path><path d="M37.6664 41.209L29.1818 35.5097C28.077 34.7658 27.1702 35.2358 27.1702 36.5516V39.5855C16.2598 38.0408 9.07761 33.565 7.35125 32.0517C-4.2894 21.858 14.0557 12.2871 14.0557 12.2871C14.0557 12.2871 -9.64257 20.1134 4.5039 34.9343C10.2723 40.9769 19.8619 43.5552 27.1712 44.656V44.952V48.5701C27.1712 49.8901 28.078 50.3554 29.1827 49.6141L37.6673 43.9127C38.7757 43.1683 38.7757 41.9525 37.6673 41.2092L37.6664 41.209Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-489e9d2e></path></svg>', 1)),
+        _cache[1] || (_cache[1] = createStaticVNode('<svg class="pos-absolute z-index-2 pos-b-0 pd-small" width="73" height="50" viewBox="0 0 73 50" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-3db6b247><path d="M42.5934 17.2017C42.5934 20.8208 39.8428 23.7544 36.45 23.7544C33.0573 23.7544 30.3066 20.8208 30.3066 17.2017C30.3066 13.5826 33.0573 10.6484 36.45 10.6484C39.8428 10.6484 42.5934 13.5826 42.5934 17.2017Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-3db6b247></path><path d="M22.5953 29.4883H50.3053C53.7389 29.4883 56.5197 26.778 56.5197 23.4405V10.8396C56.5197 7.49996 53.739 4.79176 50.3053 4.79176H48.8712C48.2747 2.05313 45.7826 0 42.7962 0H30.1063C27.1179 0 24.6257 2.053 24.0313 4.78967H22.5971C19.1656 4.78967 16.3828 7.49788 16.3828 10.8375V23.4384C16.3807 26.778 19.1634 29.4882 22.595 29.4882L22.5953 29.4883ZM36.449 8.31471C41.4535 8.31471 45.5123 12.2648 45.5123 17.1352C45.5123 22.0062 41.4535 25.9582 36.449 25.9582C31.4445 25.9582 27.3856 22.0081 27.3856 17.1377C27.3856 12.2673 31.4445 8.31471 36.449 8.31471ZM20.9092 9.32597H24.0182C24.9472 9.32597 25.7019 10.0584 25.7019 10.9625C25.7019 11.8686 24.9493 12.6011 24.0182 12.6011H20.9092C19.9823 12.6011 19.2254 11.8707 19.2254 10.9625C19.2275 10.0604 19.9822 9.32597 20.9092 9.32597Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-3db6b247></path><path d="M58.8645 12.2878C58.8645 12.2878 77.1839 21.8549 65.5604 32.0445C63.6718 33.6967 55.2747 38.9138 42.5947 39.9368V45.0519C50.0424 44.2514 61.7635 41.887 68.4037 34.9253C82.5323 20.1097 58.8657 12.2871 58.8657 12.2871L58.8645 12.2878Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-3db6b247></path><path d="M37.6664 41.209L29.1818 35.5097C28.077 34.7658 27.1702 35.2358 27.1702 36.5516V39.5855C16.2598 38.0408 9.07761 33.565 7.35125 32.0517C-4.2894 21.858 14.0557 12.2871 14.0557 12.2871C14.0557 12.2871 -9.64257 20.1134 4.5039 34.9343C10.2723 40.9769 19.8619 43.5552 27.1712 44.656V44.952V48.5701C27.1712 49.8901 28.078 50.3554 29.1827 49.6141L37.6673 43.9127C38.7757 43.1683 38.7757 41.9525 37.6673 41.2092L37.6664 41.209Z" fill="rgb(var(--black))" fill-opacity="0.1" data-v-3db6b247></path></svg>', 1)),
         createVNode(Transition, {
           name: "scale5",
           css: !firstImageLoad.value,
@@ -98,7 +98,7 @@ const _sfc_main = {
               currentImage.value ? (openBlock(), createElementBlock("img", {
                 loading: "lazy",
                 key: currentImage.value,
-                class: "h-100 w-100 transition-ease",
+                class: "h-100 w-100 ease",
                 src: (_ctx.FILE_SERVER_URL || "") + currentImage.value.src,
                 alt: "360 product view",
                 onMousedown: startRotation,
@@ -129,7 +129,7 @@ const _sfc_main = {
     };
   }
 };
-const Image360 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-489e9d2e"]]);
+const Image360 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3db6b247"]]);
 export {
   Image360 as default
 };

package/dist/martyrs/src/modules/products/components/elements/Image360.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image360.vue.js","sources":["../../../../../../../src/modules/products/components/elements/Image360.vue"],"sourcesContent":["<template>\n  <div class=\"product-360-viewer\">\n    <svg class=\"pos-absolute z-index-2 pos-b-0 pd-small\" width=\"73\" height=\"50\" viewBox=\"0 0 73 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M42.5934 17.2017C42.5934 20.8208 39.8428 23.7544 36.45 23.7544C33.0573 23.7544 30.3066 20.8208 30.3066 17.2017C30.3066 13.5826 33.0573 10.6484 36.45 10.6484C39.8428 10.6484 42.5934 13.5826 42.5934 17.2017Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M22.5953 29.4883H50.3053C53.7389 29.4883 56.5197 26.778 56.5197 23.4405V10.8396C56.5197 7.49996 53.739 4.79176 50.3053 4.79176H48.8712C48.2747 2.05313 45.7826 0 42.7962 0H30.1063C27.1179 0 24.6257 2.053 24.0313 4.78967H22.5971C19.1656 4.78967 16.3828 7.49788 16.3828 10.8375V23.4384C16.3807 26.778 19.1634 29.4882 22.595 29.4882L22.5953 29.4883ZM36.449 8.31471C41.4535 8.31471 45.5123 12.2648 45.5123 17.1352C45.5123 22.0062 41.4535 25.9582 36.449 25.9582C31.4445 25.9582 27.3856 22.0081 27.3856 17.1377C27.3856 12.2673 31.4445 8.31471 36.449 8.31471ZM20.9092 9.32597H24.0182C24.9472 9.32597 25.7019 10.0584 25.7019 10.9625C25.7019 11.8686 24.9493 12.6011 24.0182 12.6011H20.9092C19.9823 12.6011 19.2254 11.8707 19.2254 10.9625C19.2275 10.0604 19.9822 9.32597 20.9092 9.32597Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M58.8645 12.2878C58.8645 12.2878 77.1839 21.8549 65.5604 32.0445C63.6718 33.6967 55.2747 38.9138 42.5947 39.9368V45.0519C50.0424 44.2514 61.7635 41.887 68.4037 34.9253C82.5323 20.1097 58.8657 12.2871 58.8657 12.2871L58.8645 12.2878Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M37.6664 41.209L29.1818 35.5097C28.077 34.7658 27.1702 35.2358 27.1702 36.5516V39.5855C16.2598 38.0408 9.07761 33.565 7.35125 32.0517C-4.2894 21.858 14.0557 12.2871 14.0557 12.2871C14.0557 12.2871 -9.64257 20.1134 4.5039 34.9343C10.2723 40.9769 19.8619 43.5552 27.1712 44.656V44.952V48.5701C27.1712 49.8901 28.078 50.3554 29.1827 49.6141L37.6673 43.9127C38.7757 43.1683 38.7757 41.9525 37.6673 41.2092L37.6664 41.209Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n    </svg>\n\n\n    <transition name=\"scale5\" :css=\"!firstImageLoad\" appear>\n      <div v-if=\"currentImage\" class=\"h-100 w-100 transition-ease\">\n        <img loading=\"lazy\" v-if=\"currentImage\" :key=\"currentImage\" class=\"h-100 w-100 transition-ease\" :src=\"(FILE_SERVER_URL || '') + currentImage.src\" alt=\"360 product view\" @mousedown=\"startRotation\" @mousemove=\"rotate\" @mouseup=\"stopRotation\" @mouseleave=\"stopRotation\" @touchstart=\"startRotation\" @touchmove=\"rotate\" @touchend=\"stopRotation\" @dragstart.prevent>\n\n      </div>\n    </transition>\n    <!-- Display the loading progress percentage next to the loader component -->\n    <transition name=\"scale5\">\n      <Loader v-if=\"!currentImage\" :progress=\"loadingProgress\" class=\"center z-index-5\"/>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, onMounted, onUnmounted, computed } from 'vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\nconst props = defineProps({\n  imagePath: {\n    type: String,\n    required: true,\n  },\n  imageCount: {\n    type: Number,\n    default: 36,\n  },\n  autoRotateSpeed: {\n    type: Number,\n    default: 100,\n  },\n});\n\nconst imageIndex = ref(0);\nconst isRotating = ref(false);\nconst startClientX = ref(0);\n\nconst loadedImages = ref(0);\nconst loaded = ref(true);\n\nconst loadImages = async () => {\n  const images = [];\n\n  for (let i = 1; i <= props.imageCount; i++) {\n    const img = new Image();\n    img.src = `${props.imagePath}/${i}.jpg`;\n\n    try {\n      await img.decode();\n      // Increase the number of loaded images\n      loadedImages.value++;\n    } catch (error) {\n      console.warn(`Failed to decode ${props.imagePath}/${i}.jpg:`, error);\n    }\n\n    images.push(img);\n  }\n\n  return images;\n};\n\n// Add a computed property to calculate the loading progress percentage\nconst loadingProgress = computed(() => {\n  return Math.round((loadedImages.value / props.imageCount) * 100);\n});\n\nconst images = ref([]);\n\nconst currentImage = ref('');\nconst firstImageLoad = ref(null);\nwatch(imageIndex, (index) => {\n  currentImage.value = images.value[index] || '';\n});\n\nfunction startRotation(event) {\n  isRotating.value = true;\n  startClientX.value = event.clientX || event.touches[0].clientX;\n}\n\nfunction rotate(event) {\n  if (!isRotating.value) return;\n\n  const currentClientX = event.clientX || event.touches[0].clientX;\n  const diff = currentClientX - startClientX.value;\n\n  if (Math.abs(diff) >= 5) {\n    const direction = diff > 0 ? 1 : -1;\n    imageIndex.value = (imageIndex.value + direction) % props.imageCount;\n    if (imageIndex.value < 0) imageIndex.value = props.imageCount - 1;\n\n    startClientX.value = currentClientX;\n  }\n}\n\nfunction stopRotation() {\n  isRotating.value = false;\n}\n\nlet autoRotateInterval = null;\n\nconst unloadImages = () => {\n  images.value = [];\n};\n\n\n\nonMounted(async () => {\n  images.value = await loadImages();\n  currentImage.value = images.value[0] || ''; \n});\nonUnmounted(() => {\n  clearInterval(autoRotateInterval);\n  unloadImages();\n});\n</script>\n\n\n<style scoped>\n  .expand-enter-active,\n.expand-leave-active {\n  transition: max-height 0.5s ease-in-out;\n  overflow: hidden;\n}\n.scale-enter-active,\n.scale-leave-active {\n  transition: transform 0.5s ease-in-out;\n}\n.scale5-enter-from,\n.scale5-leave-to {\n  transform: scale(1.2);\n  opacity: 0;\n}\n.scale5-enter-to,\n.scale5-leave-from {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.product-360-viewer {\n  user-select: none;\n   min-height: 16rem;\n}\n\n.product-360-viewer img {\n  max-width: 100%;\n  cursor: grab;\n\n  object-fit: cover;\n  transition: all 0.3s ease;\n}\n\n.product-360-viewer img:active {\n  cursor: grabbing;\n}\n\n/*.product-360-viewer img:hover {\n  transform: scale(1.1);\n}*/\n</style>"],"names":["images"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,UAAM,QAAQ;AAed,UAAM,aAAa,IAAI,CAAC;AACxB,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAI,CAAC;AAE1B,UAAM,eAAe,IAAI,CAAC;AACX,QAAI,IAAI;AAEvB,UAAM,aAAa,YAAY;AAC7B,YAAMA,UAAS,CAAA;AAEf,eAAS,IAAI,GAAG,KAAK,MAAM,YAAY,KAAK;AAC1C,cAAM,MAAM,IAAI,MAAK;AACrB,YAAI,MAAM,GAAG,MAAM,SAAS,IAAI,CAAC;AAEjC,YAAI;AACF,gBAAM,IAAI,OAAM;AAEhB,uBAAa;AAAA,QACf,SAAS,OAAO;AACd,kBAAQ,KAAK,oBAAoB,MAAM,SAAS,IAAI,CAAC,SAAS,KAAK;AAAA,QACrE;AAEA,QAAAA,QAAO,KAAK,GAAG;AAAA,MACjB;AAEA,aAAOA;AAAA,IACT;AAGA,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,KAAK,MAAO,aAAa,QAAQ,MAAM,aAAc,GAAG;AAAA,IACjE,CAAC;AAED,UAAM,SAAS,IAAI,EAAE;AAErB,UAAM,eAAe,IAAI,EAAE;AAC3B,UAAM,iBAAiB,IAAI,IAAI;AAC/B,UAAM,YAAY,CAAC,UAAU;AAC3B,mBAAa,QAAQ,OAAO,MAAM,KAAK,KAAK;AAAA,IAC9C,CAAC;AAED,aAAS,cAAc,OAAO;AAC5B,iBAAW,QAAQ;AACnB,mBAAa,QAAQ,MAAM,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACzD;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,WAAW,MAAO;AAEvB,YAAM,iBAAiB,MAAM,WAAW,MAAM,QAAQ,CAAC,EAAE;AACzD,YAAM,OAAO,iBAAiB,aAAa;AAE3C,UAAI,KAAK,IAAI,IAAI,KAAK,GAAG;AACvB,cAAM,YAAY,OAAO,IAAI,IAAI;AACjC,mBAAW,SAAS,WAAW,QAAQ,aAAa,MAAM;AAC1D,YAAI,WAAW,QAAQ,EAAG,YAAW,QAAQ,MAAM,aAAa;AAEhE,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAEA,aAAS,eAAe;AACtB,iBAAW,QAAQ;AAAA,IACrB;AAEA,QAAI,qBAAqB;AAEzB,UAAM,eAAe,MAAM;AACzB,aAAO,QAAQ,CAAA;AAAA,IACjB;AAIA,cAAU,YAAY;AACpB,aAAO,QAAQ,MAAM,WAAU;AAC/B,mBAAa,QAAQ,OAAO,MAAM,CAAC,KAAK;AAAA,IAC1C,CAAC;AACD,gBAAY,MAAM;AAChB,oBAAc,kBAAkB;AAChC,mBAAY;AAAA,IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Image360.vue.js","sources":["../../../../../../../src/modules/products/components/elements/Image360.vue"],"sourcesContent":["<template>\n  <div class=\"product-360-viewer\">\n    <svg class=\"pos-absolute z-index-2 pos-b-0 pd-small\" width=\"73\" height=\"50\" viewBox=\"0 0 73 50\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M42.5934 17.2017C42.5934 20.8208 39.8428 23.7544 36.45 23.7544C33.0573 23.7544 30.3066 20.8208 30.3066 17.2017C30.3066 13.5826 33.0573 10.6484 36.45 10.6484C39.8428 10.6484 42.5934 13.5826 42.5934 17.2017Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M22.5953 29.4883H50.3053C53.7389 29.4883 56.5197 26.778 56.5197 23.4405V10.8396C56.5197 7.49996 53.739 4.79176 50.3053 4.79176H48.8712C48.2747 2.05313 45.7826 0 42.7962 0H30.1063C27.1179 0 24.6257 2.053 24.0313 4.78967H22.5971C19.1656 4.78967 16.3828 7.49788 16.3828 10.8375V23.4384C16.3807 26.778 19.1634 29.4882 22.595 29.4882L22.5953 29.4883ZM36.449 8.31471C41.4535 8.31471 45.5123 12.2648 45.5123 17.1352C45.5123 22.0062 41.4535 25.9582 36.449 25.9582C31.4445 25.9582 27.3856 22.0081 27.3856 17.1377C27.3856 12.2673 31.4445 8.31471 36.449 8.31471ZM20.9092 9.32597H24.0182C24.9472 9.32597 25.7019 10.0584 25.7019 10.9625C25.7019 11.8686 24.9493 12.6011 24.0182 12.6011H20.9092C19.9823 12.6011 19.2254 11.8707 19.2254 10.9625C19.2275 10.0604 19.9822 9.32597 20.9092 9.32597Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M58.8645 12.2878C58.8645 12.2878 77.1839 21.8549 65.5604 32.0445C63.6718 33.6967 55.2747 38.9138 42.5947 39.9368V45.0519C50.0424 44.2514 61.7635 41.887 68.4037 34.9253C82.5323 20.1097 58.8657 12.2871 58.8657 12.2871L58.8645 12.2878Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n      <path d=\"M37.6664 41.209L29.1818 35.5097C28.077 34.7658 27.1702 35.2358 27.1702 36.5516V39.5855C16.2598 38.0408 9.07761 33.565 7.35125 32.0517C-4.2894 21.858 14.0557 12.2871 14.0557 12.2871C14.0557 12.2871 -9.64257 20.1134 4.5039 34.9343C10.2723 40.9769 19.8619 43.5552 27.1712 44.656V44.952V48.5701C27.1712 49.8901 28.078 50.3554 29.1827 49.6141L37.6673 43.9127C38.7757 43.1683 38.7757 41.9525 37.6673 41.2092L37.6664 41.209Z\" fill=\"rgb(var(--black))\" fill-opacity=\"0.1\"/>\n    </svg>\n\n\n    <transition name=\"scale5\" :css=\"!firstImageLoad\" appear>\n      <div v-if=\"currentImage\" class=\"h-100 w-100 ease\">\n        <img loading=\"lazy\" v-if=\"currentImage\" :key=\"currentImage\" class=\"h-100 w-100 ease\" :src=\"(FILE_SERVER_URL || '') + currentImage.src\" alt=\"360 product view\" @mousedown=\"startRotation\" @mousemove=\"rotate\" @mouseup=\"stopRotation\" @mouseleave=\"stopRotation\" @touchstart=\"startRotation\" @touchmove=\"rotate\" @touchend=\"stopRotation\" @dragstart.prevent>\n\n      </div>\n    </transition>\n    <!-- Display the loading progress percentage next to the loader component -->\n    <transition name=\"scale5\">\n      <Loader v-if=\"!currentImage\" :progress=\"loadingProgress\" class=\"center z-index-5\"/>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, onMounted, onUnmounted, computed } from 'vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue'\n\nconst props = defineProps({\n  imagePath: {\n    type: String,\n    required: true,\n  },\n  imageCount: {\n    type: Number,\n    default: 36,\n  },\n  autoRotateSpeed: {\n    type: Number,\n    default: 100,\n  },\n});\n\nconst imageIndex = ref(0);\nconst isRotating = ref(false);\nconst startClientX = ref(0);\n\nconst loadedImages = ref(0);\nconst loaded = ref(true);\n\nconst loadImages = async () => {\n  const images = [];\n\n  for (let i = 1; i <= props.imageCount; i++) {\n    const img = new Image();\n    img.src = `${props.imagePath}/${i}.jpg`;\n\n    try {\n      await img.decode();\n      // Increase the number of loaded images\n      loadedImages.value++;\n    } catch (error) {\n      console.warn(`Failed to decode ${props.imagePath}/${i}.jpg:`, error);\n    }\n\n    images.push(img);\n  }\n\n  return images;\n};\n\n// Add a computed property to calculate the loading progress percentage\nconst loadingProgress = computed(() => {\n  return Math.round((loadedImages.value / props.imageCount) * 100);\n});\n\nconst images = ref([]);\n\nconst currentImage = ref('');\nconst firstImageLoad = ref(null);\nwatch(imageIndex, (index) => {\n  currentImage.value = images.value[index] || '';\n});\n\nfunction startRotation(event) {\n  isRotating.value = true;\n  startClientX.value = event.clientX || event.touches[0].clientX;\n}\n\nfunction rotate(event) {\n  if (!isRotating.value) return;\n\n  const currentClientX = event.clientX || event.touches[0].clientX;\n  const diff = currentClientX - startClientX.value;\n\n  if (Math.abs(diff) >= 5) {\n    const direction = diff > 0 ? 1 : -1;\n    imageIndex.value = (imageIndex.value + direction) % props.imageCount;\n    if (imageIndex.value < 0) imageIndex.value = props.imageCount - 1;\n\n    startClientX.value = currentClientX;\n  }\n}\n\nfunction stopRotation() {\n  isRotating.value = false;\n}\n\nlet autoRotateInterval = null;\n\nconst unloadImages = () => {\n  images.value = [];\n};\n\n\n\nonMounted(async () => {\n  images.value = await loadImages();\n  currentImage.value = images.value[0] || ''; \n});\nonUnmounted(() => {\n  clearInterval(autoRotateInterval);\n  unloadImages();\n});\n</script>\n\n\n<style scoped>\n  .expand-enter-active,\n.expand-leave-active {\n  transition: max-height 0.5s ease-in-out;\n  overflow: hidden;\n}\n.scale-enter-active,\n.scale-leave-active {\n  transition: transform 0.5s ease-in-out;\n}\n.scale5-enter-from,\n.scale5-leave-to {\n  transform: scale(1.2);\n  opacity: 0;\n}\n.scale5-enter-to,\n.scale5-leave-from {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.product-360-viewer {\n  user-select: none;\n   min-height: 16rem;\n}\n\n.product-360-viewer img {\n  max-width: 100%;\n  cursor: grab;\n\n  object-fit: cover;\n  transition: all 0.3s ease;\n}\n\n.product-360-viewer img:active {\n  cursor: grabbing;\n}\n\n/*.product-360-viewer img:hover {\n  transform: scale(1.1);\n}*/\n</style>"],"names":["images"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,UAAM,QAAQ;AAed,UAAM,aAAa,IAAI,CAAC;AACxB,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAI,CAAC;AAE1B,UAAM,eAAe,IAAI,CAAC;AACX,QAAI,IAAI;AAEvB,UAAM,aAAa,YAAY;AAC7B,YAAMA,UAAS,CAAA;AAEf,eAAS,IAAI,GAAG,KAAK,MAAM,YAAY,KAAK;AAC1C,cAAM,MAAM,IAAI,MAAK;AACrB,YAAI,MAAM,GAAG,MAAM,SAAS,IAAI,CAAC;AAEjC,YAAI;AACF,gBAAM,IAAI,OAAM;AAEhB,uBAAa;AAAA,QACf,SAAS,OAAO;AACd,kBAAQ,KAAK,oBAAoB,MAAM,SAAS,IAAI,CAAC,SAAS,KAAK;AAAA,QACrE;AAEA,QAAAA,QAAO,KAAK,GAAG;AAAA,MACjB;AAEA,aAAOA;AAAA,IACT;AAGA,UAAM,kBAAkB,SAAS,MAAM;AACrC,aAAO,KAAK,MAAO,aAAa,QAAQ,MAAM,aAAc,GAAG;AAAA,IACjE,CAAC;AAED,UAAM,SAAS,IAAI,EAAE;AAErB,UAAM,eAAe,IAAI,EAAE;AAC3B,UAAM,iBAAiB,IAAI,IAAI;AAC/B,UAAM,YAAY,CAAC,UAAU;AAC3B,mBAAa,QAAQ,OAAO,MAAM,KAAK,KAAK;AAAA,IAC9C,CAAC;AAED,aAAS,cAAc,OAAO;AAC5B,iBAAW,QAAQ;AACnB,mBAAa,QAAQ,MAAM,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACzD;AAEA,aAAS,OAAO,OAAO;AACrB,UAAI,CAAC,WAAW,MAAO;AAEvB,YAAM,iBAAiB,MAAM,WAAW,MAAM,QAAQ,CAAC,EAAE;AACzD,YAAM,OAAO,iBAAiB,aAAa;AAE3C,UAAI,KAAK,IAAI,IAAI,KAAK,GAAG;AACvB,cAAM,YAAY,OAAO,IAAI,IAAI;AACjC,mBAAW,SAAS,WAAW,QAAQ,aAAa,MAAM;AAC1D,YAAI,WAAW,QAAQ,EAAG,YAAW,QAAQ,MAAM,aAAa;AAEhE,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAEA,aAAS,eAAe;AACtB,iBAAW,QAAQ;AAAA,IACrB;AAEA,QAAI,qBAAqB;AAEzB,UAAM,eAAe,MAAM;AACzB,aAAO,QAAQ,CAAA;AAAA,IACjB;AAIA,cAAU,YAAY;AACpB,aAAO,QAAQ,MAAM,WAAU;AAC/B,mBAAa,QAAQ,OAAO,MAAM,CAAC,KAAK;AAAA,IAC1C,CAAC;AACD,gBAAY,MAAM;AAChB,oBAAc,kBAAkB;AAChC,mBAAY;AAAA,IACd,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}