@ozdao/martyrs 0.2.425 → 0.2.426

package/dist/martyrs/src/modules/rents/views/components/pages/Rents.vue.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Tab = require("../../../../../components/Tab/Tab.vue.cjs");
+const Tab = require("../../../../../components/Tab/Tab.vue2.cjs");
 const Feed = require("../../../../../components/Feed/Feed.vue.cjs");
 ;/* empty css                        */
 const GanttChart = require("./GanttChart.vue.cjs");

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

@@ -1,5 +1,5 @@
 import { ref, createElementBlock, openBlock, createElementVNode, createVNode, unref, toDisplayString, withCtx } from "vue";
-import _sfc_main$1 from "../../../../../components/Tab/Tab.vue.js";
+import _sfc_main$1 from "../../../../../components/Tab/Tab.vue2.js";
 import _sfc_main$2 from "../../../../../components/Feed/Feed.vue.js";
 /* empty css                      */
 import GanttChart from "./GanttChart.vue.js";

package/dist/martyrs/src/modules/rents/views/components/pages/RentsEdit.vue.cjs

@@ -4,8 +4,8 @@ const vue = require("vue");
 const Block = require("../../../../../components/Block/Block.vue.cjs");
 const Field = require("../../../../../components/Field/Field.vue.cjs");
 const Feed = require("../../../../../components/Feed/Feed.vue.cjs");
-const Popup = require("../../../../../components/Popup/Popup.vue2.cjs");
-;/* empty css                                                       */
+const Popup = require("../../../../../components/Popup/Popup.vue.cjs");
+;/* empty css                                                      */
 ;/* empty css                                             */
 const CardOrderItem = require("../../../../orders/components/blocks/CardOrderItem.vue.cjs");
 const vueRouter = require("vue-router");

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

@@ -2,8 +2,8 @@ import { ref, computed, onMounted, createElementBlock, openBlock, createElementV
 import _sfc_main$4 from "../../../../../components/Block/Block.vue.js";
 import Field from "../../../../../components/Field/Field.vue.js";
 import _sfc_main$2 from "../../../../../components/Feed/Feed.vue.js";
-import _sfc_main$1 from "../../../../../components/Popup/Popup.vue2.js";
-/* empty css                                                     */
+import _sfc_main$1 from "../../../../../components/Popup/Popup.vue.js";
+/* empty css                                                    */
 /* empty css                                           */
 import _sfc_main$3 from "../../../../orders/components/blocks/CardOrderItem.vue.js";
 import { useRoute, useRouter } from "vue-router";

package/dist/martyrs/src/modules/reports/components/sections/FormReport.vue.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const Popup = require("../../../../components/Popup/Popup.vue2.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
 const reports = require("../../store/reports.cjs");

package/dist/martyrs/src/modules/reports/components/sections/FormReport.vue.js

@@ -1,5 +1,5 @@
 import { reactive, ref, createElementBlock, openBlock, renderSlot, createVNode, withCtx, createElementVNode, createTextVNode } from "vue";
-import _sfc_main$1 from "../../../../components/Popup/Popup.vue2.js";
+import _sfc_main$1 from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
 import Select from "../../../../components/Select/Select.vue.js";
 import { actions } from "../../store/reports.js";

package/dist/martyrs/src/modules/spots/components/blocks/CardSpot.vue.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const IconEdit = require("../../../icons/navigation/IconEdit.vue.cjs");
 const IconCheckmark = require("../../../icons/navigation/IconCheckmark.vue.cjs");
-const Chips = require("../../../../components/Chips/Chips.vue.cjs");
+const Chips = require("../../../../components/Chips/Chips.vue2.cjs");
 const Map = require("../../../../components/Map/Map.vue.cjs");
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "pos-relative cols-2-1_3" };

package/dist/martyrs/src/modules/spots/components/blocks/CardSpot.vue.js

@@ -1,7 +1,7 @@
 import { createElementBlock, openBlock, createVNode, createElementVNode, createBlock, createCommentVNode, toDisplayString } from "vue";
 import _sfc_main$1 from "../../../icons/navigation/IconEdit.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconCheckmark.vue.js";
-import _sfc_main$3 from "../../../../components/Chips/Chips.vue.js";
+import _sfc_main$3 from "../../../../components/Chips/Chips.vue2.js";
 import Map from "../../../../components/Map/Map.vue.js";
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const _hoisted_1 = { class: "pos-relative cols-2-1_3" };

package/dist/martyrs/src/modules/spots/components/layouts/Spots.vue.cjs

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const vueI18n = require("vue-i18n");
 ;/* empty css                                           */
 ;/* empty css                                                   */
-;/* empty css                                              */
+;/* empty css                                             */
 const globals = require("../../../globals/views/store/globals.cjs");
 const categories = require("../../../products/store/categories.cjs");
 const marketplace = require("../../../marketplace/views/store/marketplace.cjs");

package/dist/martyrs/src/modules/spots/components/layouts/Spots.vue.js

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 /* empty css                                         */
 /* empty css                                                 */
-/* empty css                                            */
+/* empty css                                           */
 import { state as state$1 } from "../../../globals/views/store/globals.js";
 import { actions, state as state$2 } from "../../../products/store/categories.js";
 import { state } from "../../../marketplace/views/store/marketplace.js";

package/dist/martyrs/src/modules/spots/components/pages/SpotEdit.vue.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const vueRouter = require("vue-router");
 const Block = require("../../../../components/Block/Block.vue.cjs");
 const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
-;/* empty css                                    */
+;/* empty css                                   */
 const Field = require("../../../../components/Field/Field.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
@@ -12,7 +12,7 @@ const Address = require("../../../../components/Address/Address.vue2.cjs");
 const LocationMarker = require("../../../../components/LocationMarker/LocationMarker.vue2.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 require("vue-i18n");
-;/* empty css                                       */
+;/* empty css                                        */
 const spots = require("../../store/spots.cjs");
 const _hoisted_1 = { class: "for-transition w-100 cols-1 pd-thin gap-thin" };
 const _hoisted_2 = { class: "mn-r-auto" };

package/dist/martyrs/src/modules/spots/components/pages/SpotEdit.vue.js

@@ -2,7 +2,7 @@ import { ref, onMounted, createElementBlock, openBlock, createVNode, createEleme
 import { useRouter, useRoute } from "vue-router";
 import _sfc_main$1 from "../../../../components/Block/Block.vue.js";
 import _sfc_main$3 from "../../../../components/UploadImage/UploadImage.vue.js";
-/* empty css                                  */
+/* empty css                                 */
 import Field from "../../../../components/Field/Field.vue.js";
 import Select from "../../../../components/Select/Select.vue.js";
 import _sfc_main$4 from "../../../../components/Checkbox/Checkbox.vue.js";
@@ -10,7 +10,7 @@ import _sfc_main$5 from "../../../../components/Address/Address.vue2.js";
 import _sfc_main$6 from "../../../../components/LocationMarker/LocationMarker.vue2.js";
 import _sfc_main$2 from "../../../../components/Button/Button.vue.js";
 import "vue-i18n";
-/* empty css                                     */
+/* empty css                                      */
 import { actions, state } from "../../store/spots.js";
 const _hoisted_1 = { class: "for-transition w-100 cols-1 pd-thin gap-thin" };
 const _hoisted_2 = { class: "mn-r-auto" };

package/dist/style.css

@@ -2159,39 +2159,55 @@ to {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
-  transition: transform 0.3s;
+  transition: transform 0.05s;
+  transform-origin: center center;
 }
 
-.magnifier[data-v-77776640] {
-  max-width: 32rem;
+.expand-enter-active[data-v-cd8791b7],
+.expand-leave-active[data-v-cd8791b7] {
+  transition: max-height 0.5s ease-in-out;
+  overflow: hidden;
 }
-.product-images[data-v-77776640] {
-  display: flex;
-  flex-direction: column;
+.scale-enter-active[data-v-cd8791b7],
+.scale-leave-active[data-v-cd8791b7] {
+  transition: transform 0.5s ease-in-out;
+}
+.scale5-enter-from[data-v-cd8791b7],
+.scale5-leave-to[data-v-cd8791b7] {
+  transform: scale(1.2);
+  opacity: 0;
 }
-.thumbnail[data-v-77776640] {
+.scale5-enter-to[data-v-cd8791b7],
+.scale5-leave-from[data-v-cd8791b7] {
+  transform: scale(1);
+  opacity: 1;
+}
+.product-360-viewer[data-v-cd8791b7] {
+  user-select: none;
+   min-height: 16rem;
+}
+.product-360-viewer img[data-v-cd8791b7] {
+  max-width: 100%;
+  cursor: grab;
+
+  object-fit: cover;
+  transition: all 0.3s ease;
+}
+.product-360-viewer img[data-v-cd8791b7]:active {
+  cursor: grabbing;
+}
+
+/*.product-360-viewer img:hover {
+  transform: scale(1.1);
+}*/
+
+.thumbnail[data-v-832a66d9] {
   width: 100%;
   max-width: 6rem;
   height: 6rem;
   object-fit: cover;
   cursor: pointer;
 }
-.popup[data-v-77776640] {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: zoom-out;
-}
-.popup-image[data-v-77776640] {
-  max-width: 90%;
-  max-height: 90%;
-}
 .vue-select {
   background: #f7f7f7;
   border-radius: 0.5rem;
@@ -2227,44 +2243,6 @@ to {
 .spoiler-active[data-v-e326492a] {
   transform: rotate(180deg);
 }
-.expand-enter-active[data-v-cd8791b7],
-.expand-leave-active[data-v-cd8791b7] {
-  transition: max-height 0.5s ease-in-out;
-  overflow: hidden;
-}
-.scale-enter-active[data-v-cd8791b7],
-.scale-leave-active[data-v-cd8791b7] {
-  transition: transform 0.5s ease-in-out;
-}
-.scale5-enter-from[data-v-cd8791b7],
-.scale5-leave-to[data-v-cd8791b7] {
-  transform: scale(1.2);
-  opacity: 0;
-}
-.scale5-enter-to[data-v-cd8791b7],
-.scale5-leave-from[data-v-cd8791b7] {
-  transform: scale(1);
-  opacity: 1;
-}
-.product-360-viewer[data-v-cd8791b7] {
-  user-select: none;
-   min-height: 16rem;
-}
-.product-360-viewer img[data-v-cd8791b7] {
-  max-width: 100%;
-  cursor: grab;
-
-  object-fit: cover;
-  transition: all 0.3s ease;
-}
-.product-360-viewer img[data-v-cd8791b7]:active {
-  cursor: grabbing;
-}
-
-/*.product-360-viewer img:hover {
-  transform: scale(1.1);
-}*/
-
 #glcanvas {
     width: 100%;
     height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.425",
+  "version": "0.2.426",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/PhotoViewer/PhotoViewer.vue

@@ -3,47 +3,119 @@
     <img loading="lazy" :src="photoUrl" :style="imgStyle" ref="image" @load="initialize" />
   </div>
 </template>
-
 <script setup>
-import { ref, reactive, computed } from 'vue';
-
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 const props = defineProps({
   photoUrl: String,
   show: Boolean,
 });
-
 const scale = ref(1);
 const position = reactive({ x: 0, y: 0 });
 const dragging = ref(false);
 const startPosition = reactive({ x: 0, y: 0 });
 const startScale = ref(1);
 const startDistance = ref(0);
+const image = ref(null);
+const container = ref(null);
 
 const imgStyle = computed(() => ({
   transform: `scale(${scale.value}) translate(${position.x}px, ${position.y}px)`,
 }));
 
+// Наблюдаем за изменением масштаба, чтобы ограничивать позицию
+watch(scale, () => {
+  constrainPosition();
+});
+
+const getImageDimensions = () => {
+  if (!image.value) return { width: 0, height: 0 };
+  
+  // Используем естественные размеры изображения
+  const imgWidth = image.value.naturalWidth;
+  const imgHeight = image.value.naturalHeight;
+  
+  // Получаем размеры контейнера
+  const containerRect = image.value.parentElement?.getBoundingClientRect();
+  if (!containerRect) return { width: 0, height: 0 };
+  
+  const containerWidth = containerRect.width;
+  const containerHeight = containerRect.height;
+  
+  // Определяем, как изображение вписывается в контейнер (с учетом object-fit: scale-down)
+  let renderedWidth, renderedHeight;
+  
+  if (imgWidth > containerWidth || imgHeight > containerHeight) {
+    const ratioX = containerWidth / imgWidth;
+    const ratioY = containerHeight / imgHeight;
+    const ratio = Math.min(ratioX, ratioY);
+    
+    renderedWidth = imgWidth * ratio;
+    renderedHeight = imgHeight * ratio;
+  } else {
+    renderedWidth = imgWidth;
+    renderedHeight = imgHeight;
+  }
+  
+  return {
+    renderedWidth,
+    renderedHeight,
+    containerWidth,
+    containerHeight
+  };
+};
+
 const handleWheel = (event) => {
   event.preventDefault();
+  
   const delta = event.deltaY > 0 ? -0.1 : 0.1;
-  scale.value = Math.min(Math.max(1, scale.value + delta), 3);
+  const newScale = Math.min(Math.max(1, scale.value + delta), 3);
+  
+  // Рассчитываем позицию курсора относительно центра изображения
+  const rect = image.value.getBoundingClientRect();
+  const mouseX = event.clientX - rect.left - rect.width / 2;
+  const mouseY = event.clientY - rect.top - rect.height / 2;
+  
+  // Сохраняем соотношение позиции курсора к изображению при масштабировании
+  const scaleChange = newScale / scale.value;
+  
+  // Обновляем позицию так, чтобы точка под курсором оставалась на месте
+  position.x = position.x - (mouseX / scale.value) * (scaleChange - 1);
+  position.y = position.y - (mouseY / scale.value) * (scaleChange - 1);
+  
+  // Обновляем масштаб
+  scale.value = newScale;
+  
+  // Ограничиваем позицию после обновления масштаба
+  constrainPosition();
 };
 
 const startDrag = (event) => {
   event.preventDefault();
+  if (scale.value <= 1) return; // Не позволяем перетаскивать при масштабе 1
+  
   dragging.value = true;
   startPosition.x = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;
   startPosition.y = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;
+  
   const move = (moveEvent) => {
     if (dragging.value) {
       const currentX = moveEvent.type === 'mousemove' ? moveEvent.clientX : moveEvent.touches[0].clientX;
       const currentY = moveEvent.type === 'mousemove' ? moveEvent.clientY : moveEvent.touches[0].clientY;
-      position.x += (currentX - startPosition.x) / scale.value;
-      position.y += (currentY - startPosition.y) / scale.value;
+      
+      const deltaX = (currentX - startPosition.x) / scale.value;
+      const deltaY = (currentY - startPosition.y) / scale.value;
+      
+      position.x += deltaX;
+      position.y += deltaY;
+      
+      // Ограничиваем позицию после перемещения
+      constrainPosition();
+      
       startPosition.x = currentX;
       startPosition.y = currentY;
     }
   };
+  
   const endDrag = () => {
     dragging.value = false;
     document.removeEventListener('mousemove', move);
@@ -51,6 +123,7 @@ const startDrag = (event) => {
     document.removeEventListener('touchmove', move);
     document.removeEventListener('touchend', endDrag);
   };
+  
   document.addEventListener('mousemove', move);
   document.addEventListener('mouseup', endDrag);
   document.addEventListener('touchmove', move);
@@ -79,7 +152,25 @@ const handleTouchMove = (event) => {
     const distanceY = Math.abs(touch1.clientY - touch2.clientY);
     const newDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
     const scaleFactor = newDistance / startDistance.value;
-    scale.value = Math.min(Math.max(1, startScale.value * scaleFactor), 3);
+    
+    // Получаем центр между двумя касаниями
+    const centerX = (touch1.clientX + touch2.clientX) / 2;
+    const centerY = (touch1.clientY + touch2.clientY) / 2;
+    
+    // Получаем координаты центра касания относительно изображения
+    const rect = image.value.getBoundingClientRect();
+    const touchCenterX = centerX - rect.left - rect.width / 2;
+    const touchCenterY = centerY - rect.top - rect.height / 2;
+    
+    const newScale = Math.min(Math.max(1, startScale.value * scaleFactor), 3);
+    const scaleChange = newScale / scale.value;
+    
+    // Обновляем позицию, чтобы центр касания оставался на месте
+    position.x = position.x - (touchCenterX / scale.value) * (scaleChange - 1);
+    position.y = position.y - (touchCenterY / scale.value) * (scaleChange - 1);
+    
+    scale.value = newScale;
+    constrainPosition();
   }
 };
 
@@ -94,8 +185,45 @@ const initialize = () => {
   position.x = 0;
   position.y = 0;
 };
-</script>
 
+const constrainPosition = () => {
+  // Если масштаб 1, сбрасываем позицию в центр
+  if (scale.value <= 1) {
+    position.x = 0;
+    position.y = 0;
+    return;
+  }
+  
+  const { renderedWidth, renderedHeight, containerWidth, containerHeight } = getImageDimensions();
+  
+  // Вычисляем максимальное смещение
+  const scaledWidth = renderedWidth * scale.value;
+  const scaledHeight = renderedHeight * scale.value;
+  
+  // Отступ от края изображения до края контейнера при текущем масштабе
+  const horizontalOffset = (scaledWidth - containerWidth) / 2 / scale.value;
+  const verticalOffset = (scaledHeight - containerHeight) / 2 / scale.value;
+  
+  // Ограничиваем смещение, чтобы изображение не выходило за пределы контейнера
+  if (horizontalOffset > 0) {
+    position.x = Math.max(-horizontalOffset, Math.min(horizontalOffset, position.x));
+  } else {
+    position.x = 0;
+  }
+  
+  if (verticalOffset > 0) {
+    position.y = Math.max(-verticalOffset, Math.min(verticalOffset, position.y));
+  } else {
+    position.y = 0;
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    constrainPosition();
+  });
+});
+</script>
 <style>
 .photo-container {
   width: 100%;
@@ -105,11 +233,11 @@ const initialize = () => {
   position: relative;
   cursor: grab;
 }
-
 .photo-container img {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
-  transition: transform 0.3s;
+  transition: transform 0.05s;
+  transform-origin: center center;
 }
-</style>
+</style>

package/src/modules/products/components/blocks/ImagesThumbnails.vue

@@ -1,14 +1,41 @@
 <template>
-  <div class="o-scroll w-100 product-images">
-    <div class="no-responsive w-max flex flex-nowrap gap-thin">
-      <img loading="lazy" 
-        v-for="(image, index) in images"
-        :key="index"
-        :src="(FILE_SERVER_URL || '') + image" 
-        @click="openPopup(image)"
-        class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+  <div class="w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative">
+    <!-- Main image container -->
+    <div class="pd-semi w-100 bg-light radius-semi o-hidden" @click="openPopup(images[0])">
+      <Images360
+        v-if="product && product.image3d"
+        class="h-100 w-100"
+        :imagePath="`/assets/images/products/${product.image3d}`"
+        :imageCount="36"
       />
+      <img
+        loading="lazy"
+        v-if="images[0] && !product?.image3d"
+        class="h-max h-max-15r bg-white radius-semi w-100"
+        style="object-fit: contain;"
+        :src="(FILE_SERVER_URL || '') + images[0]"
+      />
+      <PlaceholderImage
+        v-if="!images[0] && !product?.image3d"
+        class="h-max-20r h-100 w-100"
+        style="object-fit: cover;"
+      />
+    </div>
+    
+    <!-- Thumbnails -->
+    <div v-if="images.length > 1" class="o-scroll w-100 pd-semi pd-t-zero">
+      <div class="no-responsive w-max flex flex-nowrap gap-thin">
+        <img loading="lazy" 
+          v-for="(image, index) in images"
+          :key="index"
+          :src="(FILE_SERVER_URL || '') + image" 
+          @click="openPopup(image)"
+          class="flex-child flex-child-grow-1 aspect-1x1 radius-semi bg-white o-hidden thumbnail"
+        />
+      </div>
     </div>
+    
+    <!-- Popup with photo viewer -->
     <Popup @close-popup="closePopup" :isPopupOpen="isPopupVisible" class="radius-medium o-hidden">
       <PhotoViewer
         :photoUrl="(FILE_SERVER_URL || '') + selectedImage"
@@ -20,20 +47,28 @@
 <script setup>
 import { ref } from "vue";
 
-import Popup from '@martyrs/src/components/Popup/Popup.vue'
-import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue'
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import PhotoViewer from '@martyrs/src/components/PhotoViewer/PhotoViewer.vue';
+
+
+import Images360 from '@martyrs/src/modules/products/components/blocks/Images360.vue'
 
 const props = defineProps({
   images: {
     type: Array,
     required: true,
-  }
+  },
+  product: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
 const isPopupVisible = ref(false);
 const selectedImage = ref(null);
 
 const openPopup = (image) => {
+  if (!image) return;
   selectedImage.value = image;
   isPopupVisible.value = true;
 };
@@ -44,14 +79,6 @@ const closePopup = () => {
 </script>
 
 <style scoped>
-.magnifier {
-  max-width: 32rem;
-}
-.product-images {
-  display: flex;
-  flex-direction: column;
-}
-
 .thumbnail {
   width: 100%;
   max-width: 6rem;
@@ -59,22 +86,4 @@ const closePopup = () => {
   object-fit: cover;
   cursor: pointer;
 }
-
-.popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: zoom-out;
-}
-
-.popup-image {
-  max-width: 90%;
-  max-height: 90%;
-}
 </style>

package/src/modules/products/components/pages/Product.vue

@@ -1,33 +1,11 @@
 <template>
   <div v-if="products.state.current._id" class="h-100 w-100 mobile:pd-thin pd-big bg-white">
     <div class="cols-2-1_2 w-100 gap-medium">
-      <div class="w-100 o-hidden bg-light radius-big flex-nowrap flex-column flex pos-relative">
-        <div class="pd-semi w-100 bg-light radius-semi o-hidden">
-          <Images360
-            v-if="product && product.image3d"
-            class="h-100 w-100"
-            :imagePath="`/assets/images/products/${product.image3d}`"
-            :imageCount="36"
-          />
-          <img
-            loading="lazy"
-            v-if="images[0] && !product.image3d"
-            class="h-max h-max-15r bg-white radius-semi w-100"
-            style="object-fit: contain;"
-            :src="(FILE_SERVER_URL || '') + images[0]"
-          />
-          <PlaceholderImage
-            v-if="!images[0] && !product.image3d"
-            class="h-max-20r h-100 w-100"
-            style="object-fit: cover;"
-          />
-        </div>
-        <ImagesThumbnails
-          v-if="images.length > 1"
-          :images="images"
-          class="pd-semi pd-t-zero"
-        />
-      </div>
+
+      <ImagesThumbnails
+        :images="images"
+        :product="product"
+      />
 
       <div class="pos-relative w-100 h-100 flex-column flex-h-center flex">
         <IconEdit
@@ -138,7 +116,6 @@ import PopupDateSelector from '@martyrs/src/modules/globals/views/components/blo
 import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'
 import IconShopcartAdd from '@martyrs/src/modules/icons/actions/IconShopcartAdd.vue'
 import PlaceholderImage from '@martyrs/src/modules/icons/placeholders/PlaceholderImage.vue'
-import Images360 from '@martyrs/src/modules/products/components/blocks/Images360.vue'
 import ImagesThumbnails from '@martyrs/src/modules/products/components/blocks/ImagesThumbnails.vue'
 import Price from '@martyrs/src/modules/products/components/elements/Price.vue'
 import PopularProducts from '@martyrs/src/modules/products/components/sections/PopularProducts.vue'

package/dist/martyrs/src/components/Chips/Chips.vue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chips.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}