@ozdao/martyrs 0.2.481 → 0.2.483

package/dist/martyrs/src/components/PhotoViewer/PhotoViewer.vue.js

@@ -1,191 +1,243 @@
-import { ref, reactive, computed, watch, onMounted, createElementBlock, openBlock, createElementVNode, normalizeStyle } from "vue";
-/* empty css                 */
-const _hoisted_1 = ["src"];
+import { ref, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, withModifiers, createElementVNode, createCommentVNode, normalizeStyle, Fragment, renderList, toDisplayString, createVNode, normalizeClass } from "vue";
+import IconChevronLeft from "../../modules/icons/navigation/IconChevronLeft.vue.js";
+import IconChevronRight from "../../modules/icons/navigation/IconChevronRight.vue.js";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["src", "onLoad"];
+const _hoisted_2 = { class: "pos-absolute pos-l-small bs-small pos-t-small radius-small pd-thin bg-white t-black t-medium" };
+const _hoisted_3 = { class: "pos-absolute pos-b-small radius-small pd-thin bg-light thumbnails-container" };
+const _hoisted_4 = ["src", "onClick"];
 const _sfc_main = {
   __name: "PhotoViewer",
   props: {
     photoUrl: String,
+    photos: Array,
+    initialIndex: Number,
     show: Boolean
   },
   setup(__props) {
+    const props = __props;
+    const currentIndex = ref(0);
+    const translateX = ref(0);
+    const isDragging = ref(false);
     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 pos = ref({ x: 0, y: 0 });
     const image = ref(null);
-    ref(null);
+    const thumbnailsRef = ref(null);
+    let startX = 0, startDist = 0, startScale = 1, dragX = 0, wheelTimer, dragTimer;
+    const photos = computed(() => {
+      var _a;
+      return ((_a = props.photos) == null ? void 0 : _a.length) ? props.photos : props.photoUrl ? [props.photoUrl] : [];
+    });
+    const sliderStyle = computed(() => ({
+      transform: `translate3d(${translateX.value}px, 0, 0)`,
+      transition: isDragging.value ? "none" : "transform 0.3s",
+      backfaceVisibility: "hidden"
+    }));
     const imgStyle = computed(() => ({
-      transform: `scale(${scale.value}) translate(${position.x}px, ${position.y}px)`
+      transform: `scale3d(${scale.value}, ${scale.value}, 1) translate3d(${pos.value.x}px, ${pos.value.y}px, 0)`,
+      backfaceVisibility: "hidden"
     }));
-    watch(scale, () => {
-      constrainPosition();
-    });
-    const getImageDimensions = () => {
-      var _a;
-      if (!image.value) return { width: 0, height: 0 };
-      const imgWidth = image.value.naturalWidth;
-      const imgHeight = image.value.naturalHeight;
-      const containerRect = (_a = image.value.parentElement) == null ? void 0 : _a.getBoundingClientRect();
-      if (!containerRect) return { width: 0, height: 0 };
-      const containerWidth = containerRect.width;
-      const containerHeight = containerRect.height;
-      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;
+    const reset = () => {
+      scale.value = 1;
+      pos.value = { x: 0, y: 0 };
+    };
+    const goTo = (index) => {
+      currentIndex.value = index;
+      translateX.value = -index * window.innerWidth;
+      reset();
+    };
+    const jumpTo = (index) => {
+      isDragging.value = true;
+      goTo(index);
+      requestAnimationFrame(() => isDragging.value = false);
+    };
+    const scrollToThumb = (el) => {
+      if (el && thumbnailsRef.value) {
+        const container = thumbnailsRef.value;
+        const thumb = el;
+        const left = thumb.offsetLeft - container.offsetWidth / 2 + thumb.offsetWidth / 2;
+        container.scrollTo({ left, behavior: "smooth" });
       }
-      return {
-        renderedWidth,
-        renderedHeight,
-        containerWidth,
-        containerHeight
-      };
     };
-    const handleWheel = (event) => {
-      event.preventDefault();
-      const delta = event.deltaY > 0 ? -0.1 : 0.1;
-      const newScale = Math.min(Math.max(1, scale.value + delta), 3);
+    const getXY = (e) => {
+      var _a;
+      const t = ((_a = e.touches) == null ? void 0 : _a[0]) || e;
+      return [t.clientX, t.clientY];
+    };
+    const constrain = () => {
+      if (scale.value <= 1 || !image.value) return reset();
+      const { naturalWidth: nw, naturalHeight: nh } = image.value;
+      const [cw, ch] = [window.innerWidth, window.innerHeight];
+      const r = Math.min(cw / nw, ch / nh, 1);
+      const maxX = Math.max(0, (nw * r * scale.value - cw) / 2 / scale.value);
+      const maxY = Math.max(0, (nh * r * scale.value - ch) / 2 / scale.value);
+      pos.value.x = Math.max(-maxX, Math.min(maxX, pos.value.x));
+      pos.value.y = Math.max(-maxY, Math.min(maxY, pos.value.y));
+    };
+    const zoom = (newScale, fx, fy) => {
+      if (!image.value) return;
+      newScale = Math.max(1, Math.min(3, newScale));
       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);
+      const [mx, my] = [fx - rect.left - rect.width / 2, fy - rect.top - rect.height / 2];
+      const change = newScale / scale.value;
+      pos.value.x -= mx / scale.value * (change - 1);
+      pos.value.y -= my / scale.value * (change - 1);
       scale.value = newScale;
-      constrainPosition();
+      constrain();
     };
-    const startDrag = (event) => {
-      event.preventDefault();
-      if (scale.value <= 1) return;
-      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;
-          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 startDrag = (e) => {
+      if (e.type === "mousedown") e.preventDefault();
+      isDragging.value = true;
+      let [x, y] = getXY(e);
+      const handleMove = scale.value > 1 ? (e2) => {
+        if (!isDragging.value) return;
+        if (e2.type === "touchmove") e2.preventDefault();
+        const [cx, cy] = getXY(e2);
+        pos.value.x += (cx - x) / scale.value;
+        pos.value.y += (cy - y) / scale.value;
+        constrain();
+        [x, y] = [cx, cy];
+      } : (e2) => {
+        if (!isDragging.value) return;
+        if (e2.type === "touchmove") e2.preventDefault();
+        dragX = getXY(e2)[0] - startX;
+        translateX.value = dragX - currentIndex.value * window.innerWidth;
       };
-      const endDrag = () => {
-        dragging.value = false;
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", endDrag);
-        document.removeEventListener("touchmove", move);
-        document.removeEventListener("touchend", endDrag);
+      const handleEnd = () => {
+        isDragging.value = false;
+        if (scale.value <= 1 && Math.abs(dragX) > window.innerWidth / 4) {
+          goTo(Math.max(0, Math.min(photos.value.length - 1, currentIndex.value + (dragX > 0 ? -1 : 1))));
+        } else if (scale.value <= 1) {
+          goTo(currentIndex.value);
+        }
+        dragX = 0;
+        document.removeEventListener("mousemove", handleMove, { passive: true });
+        document.removeEventListener("mouseup", handleEnd, { passive: true });
+        document.removeEventListener("touchmove", handleMove, { passive: false });
+        document.removeEventListener("touchend", handleEnd, { passive: true });
       };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", endDrag);
-      document.addEventListener("touchmove", move);
-      document.addEventListener("touchend", endDrag);
+      if (scale.value <= 1) startX = x;
+      document.addEventListener("mousemove", handleMove, { passive: true });
+      document.addEventListener("mouseup", handleEnd, { passive: true });
+      document.addEventListener("touchmove", handleMove, { passive: false });
+      document.addEventListener("touchend", handleEnd, { passive: true });
     };
-    const handleTouchStart = (event) => {
-      if (event.touches.length === 2) {
-        const touch1 = event.touches[0];
-        const touch2 = event.touches[1];
-        const distanceX = Math.abs(touch1.clientX - touch2.clientX);
-        const distanceY = Math.abs(touch1.clientY - touch2.clientY);
-        startDistance.value = Math.sqrt(distanceX ** 2 + distanceY ** 2);
-        startScale.value = scale.value;
+    const handleTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        clearTimeout(dragTimer);
+        const [t1, t2] = e.touches;
+        startDist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
+        startScale = scale.value;
       } else {
-        startDrag(event);
+        dragTimer = setTimeout(() => startDrag(e), 50);
       }
     };
-    const handleTouchMove = (event) => {
-      if (event.touches.length === 2) {
-        event.preventDefault();
-        const touch1 = event.touches[0];
-        const touch2 = event.touches[1];
-        const distanceX = Math.abs(touch1.clientX - touch2.clientX);
-        const distanceY = Math.abs(touch1.clientY - touch2.clientY);
-        const newDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
-        const scaleFactor = newDistance / startDistance.value;
-        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();
+    const handleTouchMove = (e) => {
+      if (e.touches.length === 2 && !isDragging.value) {
+        clearTimeout(dragTimer);
+        e.preventDefault();
+        const [t1, t2] = e.touches;
+        const dist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
+        zoom(startScale * (dist / startDist), (t1.clientX + t2.clientX) / 2, (t1.clientY + t2.clientY) / 2);
       }
     };
-    const handleTouchEnd = (event) => {
-      if (event.touches.length === 0) {
-        startDistance.value = 0;
-      }
+    const handleTouchEnd = () => {
+      clearTimeout(dragTimer);
+      startDist = 0;
     };
-    const initialize = () => {
-      scale.value = 1;
-      position.x = 0;
-      position.y = 0;
+    const handleWheel = (e) => {
+      clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => zoom(scale.value + (e.deltaY > 0 ? -0.1 : 0.1), e.clientX, e.clientY), 10);
     };
-    const constrainPosition = () => {
-      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;
-      }
+    const handleKey = (e) => {
+      const dir = { ArrowLeft: -1, ArrowRight: 1 }[e.key];
+      if (dir) goTo(Math.max(0, Math.min(photos.value.length - 1, currentIndex.value + dir)));
     };
+    watch(() => props.initialIndex, (i) => i != null && jumpTo(i));
     onMounted(() => {
-      window.addEventListener("resize", () => {
-        constrainPosition();
-      });
+      window.addEventListener("keydown", handleKey, { passive: true });
+      jumpTo(props.initialIndex || 0);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("keydown", handleKey);
+      clearTimeout(wheelTimer);
+      clearTimeout(dragTimer);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "photo-container",
-        onWheel: handleWheel,
-        onMousedown: startDrag,
-        onTouchstart: handleTouchStart,
-        onTouchmove: handleTouchMove,
-        onTouchend: handleTouchEnd
+        class: "photo-viewer",
+        onWheel: withModifiers(handleWheel, ["prevent"])
       }, [
-        createElementVNode("img", {
-          loading: "lazy",
-          src: __props.photoUrl,
-          style: normalizeStyle(imgStyle.value),
-          ref_key: "image",
-          ref: image,
-          onLoad: initialize
-        }, null, 44, _hoisted_1)
+        createElementVNode("div", {
+          class: "slider-track",
+          style: normalizeStyle(sliderStyle.value),
+          onMousedown: startDrag,
+          onTouchstart: handleTouchStart,
+          onTouchmove: handleTouchMove,
+          onTouchend: handleTouchEnd
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(photos.value, (photo, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: "slide"
+            }, [
+              createElementVNode("img", {
+                src: photo,
+                style: normalizeStyle(index === currentIndex.value ? imgStyle.value : null),
+                ref_for: true,
+                ref: (el) => index === currentIndex.value && (image.value = el),
+                onLoad: () => index === currentIndex.value && reset()
+              }, null, 44, _hoisted_1)
+            ]);
+          }), 128))
+        ], 36),
+        photos.value.length > 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("span", _hoisted_2, toDisplayString(currentIndex.value + 1) + " / " + toDisplayString(photos.value.length), 1),
+          currentIndex.value > 0 ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            onClick: _cache[0] || (_cache[0] = ($event) => goTo(currentIndex.value - 1)),
+            class: "cursor-pointer hover-scale-1 bs-small pos-absolute pos-t-50 pos-l-small bg-white radius-small pd-thin"
+          }, [
+            createVNode(IconChevronLeft, {
+              fill: "rgb(var(--black)",
+              class: "i-medium"
+            })
+          ])) : createCommentVNode("", true),
+          currentIndex.value < photos.value.length - 1 ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            onClick: _cache[1] || (_cache[1] = ($event) => goTo(currentIndex.value + 1)),
+            class: "cursor-pointer hover-scale-1 bs-small pos-absolute pos-t-50 pos-r-small bg-white radius-small pd-thin"
+          }, [
+            createVNode(IconChevronRight, {
+              fill: "rgb(var(--black)",
+              class: "i-medium"
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", {
+              class: "thumbnails",
+              ref_key: "thumbnailsRef",
+              ref: thumbnailsRef
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(photos.value, (photo, i) => {
+                return openBlock(), createElementBlock("img", {
+                  key: i,
+                  src: photo,
+                  onClick: ($event) => jumpTo(i),
+                  class: normalizeClass(["thumbnail", { active: i === currentIndex.value }]),
+                  ref_for: true,
+                  ref: (el) => i === currentIndex.value && scrollToThumb(el)
+                }, null, 10, _hoisted_4);
+              }), 128))
+            ], 512)
+          ])
+        ], 64)) : createCommentVNode("", true)
       ], 32);
     };
   }
 };
+const PhotoViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-447a838c"]]);
 export {
-  _sfc_main as default
+  PhotoViewer as default
 };
 //# sourceMappingURL=PhotoViewer.vue.js.map

package/dist/martyrs/src/components/PhotoViewer/PhotoViewer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhotoViewer.vue.js","sources":["../../../../../src/components/PhotoViewer/PhotoViewer.vue"],"sourcesContent":["<template>\n  <div class=\"photo-container\" @wheel=\"handleWheel\" @mousedown=\"startDrag\" @touchstart=\"handleTouchStart\" @touchmove=\"handleTouchMove\" @touchend=\"handleTouchEnd\">\n    <img loading=\"lazy\" :src=\"photoUrl\" :style=\"imgStyle\" ref=\"image\" @load=\"initialize\" />\n  </div>\n</template>\n<script setup>\nimport { ref, reactive, computed, onMounted, watch } from 'vue';\nconst props = defineProps({\n  photoUrl: String,\n  show: Boolean,\n});\nconst scale = ref(1);\nconst position = reactive({ x: 0, y: 0 });\nconst dragging = ref(false);\nconst startPosition = reactive({ x: 0, y: 0 });\nconst startScale = ref(1);\nconst startDistance = ref(0);\nconst image = ref(null);\nconst container = ref(null);\n\nconst imgStyle = computed(() => ({\n  transform: `scale(${scale.value}) translate(${position.x}px, ${position.y}px)`,\n}));\n\n// Наблюдаем за изменением масштаба, чтобы ограничивать позицию\nwatch(scale, () => {\n  constrainPosition();\n});\n\nconst getImageDimensions = () => {\n  if (!image.value) return { width: 0, height: 0 };\n  \n  // Используем естественные размеры изображения\n  const imgWidth = image.value.naturalWidth;\n  const imgHeight = image.value.naturalHeight;\n  \n  // Получаем размеры контейнера\n  const containerRect = image.value.parentElement?.getBoundingClientRect();\n  if (!containerRect) return { width: 0, height: 0 };\n  \n  const containerWidth = containerRect.width;\n  const containerHeight = containerRect.height;\n  \n  // Определяем, как изображение вписывается в контейнер (с учетом object-fit: scale-down)\n  let renderedWidth, renderedHeight;\n  \n  if (imgWidth > containerWidth || imgHeight > containerHeight) {\n    const ratioX = containerWidth / imgWidth;\n    const ratioY = containerHeight / imgHeight;\n    const ratio = Math.min(ratioX, ratioY);\n    \n    renderedWidth = imgWidth * ratio;\n    renderedHeight = imgHeight * ratio;\n  } else {\n    renderedWidth = imgWidth;\n    renderedHeight = imgHeight;\n  }\n  \n  return {\n    renderedWidth,\n    renderedHeight,\n    containerWidth,\n    containerHeight\n  };\n};\n\nconst handleWheel = (event) => {\n  event.preventDefault();\n  \n  const delta = event.deltaY > 0 ? -0.1 : 0.1;\n  const newScale = Math.min(Math.max(1, scale.value + delta), 3);\n  \n  // Рассчитываем позицию курсора относительно центра изображения\n  const rect = image.value.getBoundingClientRect();\n  const mouseX = event.clientX - rect.left - rect.width / 2;\n  const mouseY = event.clientY - rect.top - rect.height / 2;\n  \n  // Сохраняем соотношение позиции курсора к изображению при масштабировании\n  const scaleChange = newScale / scale.value;\n  \n  // Обновляем позицию так, чтобы точка под курсором оставалась на месте\n  position.x = position.x - (mouseX / scale.value) * (scaleChange - 1);\n  position.y = position.y - (mouseY / scale.value) * (scaleChange - 1);\n  \n  // Обновляем масштаб\n  scale.value = newScale;\n  \n  // Ограничиваем позицию после обновления масштаба\n  constrainPosition();\n};\n\nconst startDrag = (event) => {\n  event.preventDefault();\n  if (scale.value <= 1) return; // Не позволяем перетаскивать при масштабе 1\n  \n  dragging.value = true;\n  startPosition.x = event.type === 'mousedown' ? event.clientX : event.touches[0].clientX;\n  startPosition.y = event.type === 'mousedown' ? event.clientY : event.touches[0].clientY;\n  \n  const move = (moveEvent) => {\n    if (dragging.value) {\n      const currentX = moveEvent.type === 'mousemove' ? moveEvent.clientX : moveEvent.touches[0].clientX;\n      const currentY = moveEvent.type === 'mousemove' ? moveEvent.clientY : moveEvent.touches[0].clientY;\n      \n      const deltaX = (currentX - startPosition.x) / scale.value;\n      const deltaY = (currentY - startPosition.y) / scale.value;\n      \n      position.x += deltaX;\n      position.y += deltaY;\n      \n      // Ограничиваем позицию после перемещения\n      constrainPosition();\n      \n      startPosition.x = currentX;\n      startPosition.y = currentY;\n    }\n  };\n  \n  const endDrag = () => {\n    dragging.value = false;\n    document.removeEventListener('mousemove', move);\n    document.removeEventListener('mouseup', endDrag);\n    document.removeEventListener('touchmove', move);\n    document.removeEventListener('touchend', endDrag);\n  };\n  \n  document.addEventListener('mousemove', move);\n  document.addEventListener('mouseup', endDrag);\n  document.addEventListener('touchmove', move);\n  document.addEventListener('touchend', endDrag);\n};\n\nconst handleTouchStart = (event) => {\n  if (event.touches.length === 2) {\n    const touch1 = event.touches[0];\n    const touch2 = event.touches[1];\n    const distanceX = Math.abs(touch1.clientX - touch2.clientX);\n    const distanceY = Math.abs(touch1.clientY - touch2.clientY);\n    startDistance.value = Math.sqrt(distanceX ** 2 + distanceY ** 2);\n    startScale.value = scale.value;\n  } else {\n    startDrag(event);\n  }\n};\n\nconst handleTouchMove = (event) => {\n  if (event.touches.length === 2) {\n    event.preventDefault();\n    const touch1 = event.touches[0];\n    const touch2 = event.touches[1];\n    const distanceX = Math.abs(touch1.clientX - touch2.clientX);\n    const distanceY = Math.abs(touch1.clientY - touch2.clientY);\n    const newDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);\n    const scaleFactor = newDistance / startDistance.value;\n    \n    // Получаем центр между двумя касаниями\n    const centerX = (touch1.clientX + touch2.clientX) / 2;\n    const centerY = (touch1.clientY + touch2.clientY) / 2;\n    \n    // Получаем координаты центра касания относительно изображения\n    const rect = image.value.getBoundingClientRect();\n    const touchCenterX = centerX - rect.left - rect.width / 2;\n    const touchCenterY = centerY - rect.top - rect.height / 2;\n    \n    const newScale = Math.min(Math.max(1, startScale.value * scaleFactor), 3);\n    const scaleChange = newScale / scale.value;\n    \n    // Обновляем позицию, чтобы центр касания оставался на месте\n    position.x = position.x - (touchCenterX / scale.value) * (scaleChange - 1);\n    position.y = position.y - (touchCenterY / scale.value) * (scaleChange - 1);\n    \n    scale.value = newScale;\n    constrainPosition();\n  }\n};\n\nconst handleTouchEnd = (event) => {\n  if (event.touches.length === 0) {\n    startDistance.value = 0;\n  }\n};\n\nconst initialize = () => {\n  scale.value = 1;\n  position.x = 0;\n  position.y = 0;\n};\n\nconst constrainPosition = () => {\n  // Если масштаб 1, сбрасываем позицию в центр\n  if (scale.value <= 1) {\n    position.x = 0;\n    position.y = 0;\n    return;\n  }\n  \n  const { renderedWidth, renderedHeight, containerWidth, containerHeight } = getImageDimensions();\n  \n  // Вычисляем максимальное смещение\n  const scaledWidth = renderedWidth * scale.value;\n  const scaledHeight = renderedHeight * scale.value;\n  \n  // Отступ от края изображения до края контейнера при текущем масштабе\n  const horizontalOffset = (scaledWidth - containerWidth) / 2 / scale.value;\n  const verticalOffset = (scaledHeight - containerHeight) / 2 / scale.value;\n  \n  // Ограничиваем смещение, чтобы изображение не выходило за пределы контейнера\n  if (horizontalOffset > 0) {\n    position.x = Math.max(-horizontalOffset, Math.min(horizontalOffset, position.x));\n  } else {\n    position.x = 0;\n  }\n  \n  if (verticalOffset > 0) {\n    position.y = Math.max(-verticalOffset, Math.min(verticalOffset, position.y));\n  } else {\n    position.y = 0;\n  }\n};\n\nonMounted(() => {\n  window.addEventListener('resize', () => {\n    constrainPosition();\n  });\n});\n</script>\n<style>\n.photo-container {\n  width: 100%;\n  height: 100%;\n  background: black;\n  overflow: hidden;\n  position: relative;\n  cursor: grab;\n}\n.photo-container img {\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  transition: transform 0.05s;\n  transform-origin: center center;\n}\n</style>"],"names":[],"mappings":"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"}
+{"version":3,"file":"PhotoViewer.vue.js","sources":["../../../../../src/components/PhotoViewer/PhotoViewer.vue"],"sourcesContent":["<script setup>\n  import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';\n\n  import IconChevronLeft from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\n  import IconChevronRight from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\n\n  const props = defineProps({\n    photoUrl: String,\n    photos: Array,\n    initialIndex: Number,\n    show: Boolean,\n  });\n\n  const currentIndex = ref(0);\n  const translateX = ref(0);\n  const isDragging = ref(false);\n  const scale = ref(1);\n  const pos = ref({ x: 0, y: 0 });\n  const image = ref(null);\n  const thumbnailsRef = ref(null);\n\n  let startX = 0, startDist = 0, startScale = 1, dragX = 0, wheelTimer, dragTimer;\n\n  const photos = computed(() => props.photos?.length ? props.photos : props.photoUrl ? [props.photoUrl] : []);\n\n  const sliderStyle = computed(() => ({\n    transform: `translate3d(${translateX.value}px, 0, 0)`,\n    transition: isDragging.value ? 'none' : 'transform 0.3s',\n    backfaceVisibility: 'hidden'\n  }));\n\n  const imgStyle = computed(() => ({\n    transform: `scale3d(${scale.value}, ${scale.value}, 1) translate3d(${pos.value.x}px, ${pos.value.y}px, 0)`,\n    backfaceVisibility: 'hidden'\n  }));\n\n  const reset = () => {\n    scale.value = 1;\n    pos.value = { x: 0, y: 0 };\n  };\n\n  const goTo = (index) => {\n    currentIndex.value = index;\n    translateX.value = -index * window.innerWidth;\n    reset();\n  };\n\n  const jumpTo = (index) => {\n    isDragging.value = true;\n    goTo(index);\n    requestAnimationFrame(() => isDragging.value = false);\n  };\n\n  const scrollToThumb = (el) => {\n    if (el && thumbnailsRef.value) {\n      const container = thumbnailsRef.value;\n      const thumb = el;\n      const left = thumb.offsetLeft - container.offsetWidth / 2 + thumb.offsetWidth / 2;\n      container.scrollTo({ left, behavior: 'smooth' });\n    }\n  };\n\n  const getXY = (e) => {\n    const t = e.touches?.[0] || e;\n    return [t.clientX, t.clientY];\n  };\n\n  const constrain = () => {\n    if (scale.value <= 1 || !image.value) return reset();\n    \n    const { naturalWidth: nw, naturalHeight: nh } = image.value;\n    const [cw, ch] = [window.innerWidth, window.innerHeight];\n    const r = Math.min(cw / nw, ch / nh, 1);\n    \n    const maxX = Math.max(0, (nw * r * scale.value - cw) / 2 / scale.value);\n    const maxY = Math.max(0, (nh * r * scale.value - ch) / 2 / scale.value);\n    \n    pos.value.x = Math.max(-maxX, Math.min(maxX, pos.value.x));\n    pos.value.y = Math.max(-maxY, Math.min(maxY, pos.value.y));\n  };\n\n  const zoom = (newScale, fx, fy) => {\n    if (!image.value) return;\n    \n    newScale = Math.max(1, Math.min(3, newScale));\n    const rect = image.value.getBoundingClientRect();\n    const [mx, my] = [fx - rect.left - rect.width / 2, fy - rect.top - rect.height / 2];\n    const change = newScale / scale.value;\n    \n    pos.value.x -= (mx / scale.value) * (change - 1);\n    pos.value.y -= (my / scale.value) * (change - 1);\n    scale.value = newScale;\n    constrain();\n  };\n\n  const startDrag = (e) => {\n    if (e.type === 'mousedown') e.preventDefault();\n    isDragging.value = true;\n    let [x, y] = getXY(e);\n    \n    const handleMove = scale.value > 1\n      ? (e) => {\n          if (!isDragging.value) return;\n          if (e.type === 'touchmove') e.preventDefault();\n          const [cx, cy] = getXY(e);\n          pos.value.x += (cx - x) / scale.value;\n          pos.value.y += (cy - y) / scale.value;\n          constrain();\n          [x, y] = [cx, cy];\n        }\n      : (e) => {\n          if (!isDragging.value) return;\n          if (e.type === 'touchmove') e.preventDefault();\n          dragX = getXY(e)[0] - startX;\n          translateX.value = dragX - currentIndex.value * window.innerWidth;\n        };\n    \n    const handleEnd = () => {\n      isDragging.value = false;\n      if (scale.value <= 1 && Math.abs(dragX) > window.innerWidth / 4) {\n        goTo(Math.max(0, Math.min(photos.value.length - 1, currentIndex.value + (dragX > 0 ? -1 : 1))));\n      } else if (scale.value <= 1) {\n        goTo(currentIndex.value);\n      }\n      dragX = 0;\n      document.removeEventListener('mousemove', handleMove, { passive: true });\n      document.removeEventListener('mouseup', handleEnd, { passive: true });\n      document.removeEventListener('touchmove', handleMove, { passive: false });\n      document.removeEventListener('touchend', handleEnd, { passive: true });\n    };\n    \n    if (scale.value <= 1) startX = x;\n    document.addEventListener('mousemove', handleMove, { passive: true });\n    document.addEventListener('mouseup', handleEnd, { passive: true });\n    document.addEventListener('touchmove', handleMove, { passive: false });\n    document.addEventListener('touchend', handleEnd, { passive: true });\n  };\n\n  const handleTouchStart = (e) => {\n    if (e.touches.length === 2) {\n      clearTimeout(dragTimer);\n      const [t1, t2] = e.touches;\n      startDist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);\n      startScale = scale.value;\n    } else {\n      dragTimer = setTimeout(() => startDrag(e), 50);\n    }\n  };\n\n  const handleTouchMove = (e) => {\n    if (e.touches.length === 2 && !isDragging.value) {\n      clearTimeout(dragTimer);\n      e.preventDefault();\n      const [t1, t2] = e.touches;\n      const dist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);\n      zoom(startScale * (dist / startDist), (t1.clientX + t2.clientX) / 2, (t1.clientY + t2.clientY) / 2);\n    }\n  };\n\n  const handleTouchEnd = () => {\n    clearTimeout(dragTimer);\n    startDist = 0;\n  };\n\n  const handleWheel = (e) => {\n    clearTimeout(wheelTimer);\n    wheelTimer = setTimeout(() => zoom(scale.value + (e.deltaY > 0 ? -0.1 : 0.1), e.clientX, e.clientY), 10);\n  };\n\n  const handleKey = (e) => {\n    const dir = { ArrowLeft: -1, ArrowRight: 1 }[e.key];\n    if (dir) goTo(Math.max(0, Math.min(photos.value.length - 1, currentIndex.value + dir)));\n  };\n\n  watch(() => props.initialIndex, (i) => i != null && jumpTo(i));\n\n  onMounted(() => {\n    window.addEventListener('keydown', handleKey, { passive: true });\n    jumpTo(props.initialIndex || 0);\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('keydown', handleKey);\n    clearTimeout(wheelTimer);\n    clearTimeout(dragTimer);\n  });\n</script>\n\n<template>\n  <div class=\"photo-viewer\" @wheel.prevent=\"handleWheel\">\n    <div \n      class=\"slider-track\" \n      :style=\"sliderStyle\"\n      @mousedown=\"startDrag\" \n      @touchstart=\"handleTouchStart\"\n      @touchmove=\"handleTouchMove\"\n      @touchend=\"handleTouchEnd\"\n    >\n      <div \n        v-for=\"(photo, index) in photos\" \n        :key=\"index\"\n        class=\"slide\"\n      >\n        <img \n          :src=\"photo\" \n          :style=\"index === currentIndex ? imgStyle : null\"\n          :ref=\"el => index === currentIndex && (image = el)\"\n          @load=\"() => index === currentIndex && reset()\" \n        />\n      </div>\n    </div>\n    \n    <template \n      v-if=\"photos.length > 1\"\n    >\n\n      <span class=\"pos-absolute pos-l-small bs-small pos-t-small radius-small pd-thin bg-white t-black t-medium\">\n        {{ currentIndex + 1 }} / {{ photos.length }}\n      </span>\n      \n      <button \n        v-if=\"currentIndex > 0\" \n        @click=\"goTo(currentIndex - 1)\" \n        class=\"cursor-pointer hover-scale-1 bs-small pos-absolute pos-t-50 pos-l-small bg-white radius-small pd-thin\"\n      >\n        <IconChevronLeft fill=\"rgb(var(--black)\" class=\"i-medium\"/>\n      </button>\n\n      <button \n        v-if=\"currentIndex < photos.length - 1\" \n        @click=\"goTo(currentIndex + 1)\" \n        class=\"cursor-pointer hover-scale-1 bs-small pos-absolute pos-t-50 pos-r-small bg-white radius-small pd-thin\"\n      >\n        <IconChevronRight fill=\"rgb(var(--black)\" class=\"i-medium\"/>\n      </button>\n      \n      <div class=\"pos-absolute pos-b-small radius-small pd-thin bg-light  thumbnails-container\">\n        <div class=\"thumbnails\" ref=\"thumbnailsRef\">\n          <img \n            v-for=\"(photo, i) in photos\" \n            :key=\"i\"\n            :src=\"photo\"\n            @click=\"jumpTo(i)\"\n            :class=\"['thumbnail', { active: i === currentIndex }]\"\n            :ref=\"el => i === currentIndex && scrollToThumb(el)\" \n          />\n        </div>\n      </div>\n    </template>\n\n  </div>\n</template>\n\n<style scoped>\n.photo-viewer {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  background: #fff;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n}\n\n.slider-track {\n  display: flex;\n  height: 100%;\n  cursor: grab;\n  backface-visibility: hidden;\n}\n\n.slider-track:active {\n  cursor: grabbing;\n}\n\n.slide {\n  flex: 0 0 100%;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  transform-origin: center;\n  pointer-events: none;\n  backface-visibility: hidden;\n}\n\n.thumbnails-container {\n  left: 50%;\n  transform: translateX(-50%);\n  max-width: 100%;\n  z-index: 1;\n}\n\n.thumbnails {\n  display: flex;\n  gap: 0.25rem;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.thumbnails::-webkit-scrollbar {\n  display: none;\n}\n\n.thumbnail {\n  width: 4rem;\n  height: 4rem;\n  object-fit: cover;\n  cursor: pointer;\n  transition: opacity 0.2s;\n  border-radius: 0.25rem;\n  flex-shrink: 0;\n}\n\n.thumbnail.active {\n  opacity: 1;\n  border: 1px solid rgb(var(--second));\n}\n\n\n@media (max-width: 768px) {\n  .nav-arrow { display: none; }\n  .thumbnail { width: 3rem; height: 3rem; }\n}\n</style>"],"names":["e"],"mappings":"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"}

package/dist/martyrs/src/components/Radio/Radio.vue.cjs

@@ -8,7 +8,7 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 0,
-  class: "mn-r-auto t-transp mn-r-small"
+  class: "mn-l-thin mn-r-auto t-transp mn-r-small"
 };
 const _hoisted_4 = ["name", "value", "checked"];
 const _sfc_main = {
@@ -25,7 +25,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["cursor-pointer mn-r-thin radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
+          class: vue.normalizeClass(["cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
             "bg-main": __props.radio === __props.value
           }])
         }, [

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.vue.cjs","sources":["../../../../../src/components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <label class=\"flex-v-center flex-nowrap flex\">\n    <!-- ////////////////////////// -->\n    <!-- Checkmark -->\n    <!-- ////////////////////////// -->\n    <div \n      class=\"cursor-pointer mn-r-thin radius-extra pd-micro h-100 aspect-1x1 pos-relative\"\n      :class=\"{\n        'bg-main': radio === value,\n      }\"\n    >\n      <div \n        class=\"radius-extra pd-micro w-100 h-100\"\n        :class=\"{\n          'bg-white': radio === value,\n        }\"\n      >\n\n      </div> \n\n      <div \n        v-if=\"radio !== value\"\n        class=\"br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100\"\n      >\n\n      </div> \n    </div> \n    <!-- <div v-if=\"radio === value\" class=\"\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g id=\"24 / basic / check-mark\">\n          <path id=\"icon\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.28033 10.7197L14.25 3.75L15.3107 4.81066L7.28033 12.841L3 8.56066L4.06066 7.5L7.28033 10.7197Z\" fill=\"#000000\"/>\n        </g>\n      </svg>\n    </div> -->\n\n    <!-- ////////////////////////// -->\n    <!-- Label -->\n    <!-- ////////////////////////// -->\n\n    <div v-if=\"label\" class=\"mn-r-auto t-transp mn-r-small\">\n      <span>{{label}}</span>\n    </div>\n\n    <!-- ////////////////////////// -->\n    <!-- Input -->\n    <!-- ////////////////////////// -->\n    <input \n      @input=\"event => text = emit('update:radio', event.target.value)\"\n      class=\"round radiobutton\" \n      type=\"checkbox\" \n      :name=\"name\" \n      :value=\"value\"\n      :checked=\"value === radio\"\n    >\n  </label>\n</template>\n\n<script setup>\n  const props = defineProps({\n    label: String,\n    name: String,\n    value: false,\n    radio: [Object, String]\n  })\n\n  const emit = defineEmits(['update:radio'])\n\n  const updateInputText = () => {\n    emit('update:radio', value)\n  }\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiEE,UAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.vue.cjs","sources":["../../../../../src/components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <label class=\"flex-v-center flex-nowrap flex\">\n    <!-- ////////////////////////// -->\n    <!-- Checkmark -->\n    <!-- ////////////////////////// -->\n    <div \n      class=\"cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative\"\n      :class=\"{\n        'bg-main': radio === value,\n      }\"\n    >\n      <div \n        class=\"radius-extra pd-micro w-100 h-100\"\n        :class=\"{\n          'bg-white': radio === value,\n        }\"\n      >\n\n      </div> \n\n      <div \n        v-if=\"radio !== value\"\n        class=\"br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100\"\n      >\n\n      </div> \n    </div> \n    <!-- ////////////////////////// -->\n    <!-- Label -->\n    <!-- ////////////////////////// -->\n\n    <div v-if=\"label\" class=\"mn-l-thin mn-r-auto t-transp mn-r-small\">\n      <span>{{label}}</span>\n    </div>\n\n    <!-- ////////////////////////// -->\n    <!-- Input -->\n    <!-- ////////////////////////// -->\n    <input \n      @input=\"event => text = emit('update:radio', event.target.value)\"\n      class=\"round radiobutton\" \n      type=\"checkbox\" \n      :name=\"name\" \n      :value=\"value\"\n      :checked=\"value === radio\"\n    >\n  </label>\n</template>\n\n<script setup>\n  const props = defineProps({\n    label: String,\n    name: String,\n    value: false,\n    radio: [Object, String]\n  })\n\n  const emit = defineEmits(['update:radio'])\n\n  const updateInputText = () => {\n    emit('update:radio', value)\n  }\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyDE,UAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Radio/Radio.vue.js

@@ -6,7 +6,7 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 0,
-  class: "mn-r-auto t-transp mn-r-small"
+  class: "mn-l-thin mn-r-auto t-transp mn-r-small"
 };
 const _hoisted_4 = ["name", "value", "checked"];
 const _sfc_main = {
@@ -23,7 +23,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", _hoisted_1, [
         createElementVNode("div", {
-          class: normalizeClass(["cursor-pointer mn-r-thin radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
+          class: normalizeClass(["cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
             "bg-main": __props.radio === __props.value
           }])
         }, [

package/dist/martyrs/src/components/Radio/Radio.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.vue.js","sources":["../../../../../src/components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <label class=\"flex-v-center flex-nowrap flex\">\n    <!-- ////////////////////////// -->\n    <!-- Checkmark -->\n    <!-- ////////////////////////// -->\n    <div \n      class=\"cursor-pointer mn-r-thin radius-extra pd-micro h-100 aspect-1x1 pos-relative\"\n      :class=\"{\n        'bg-main': radio === value,\n      }\"\n    >\n      <div \n        class=\"radius-extra pd-micro w-100 h-100\"\n        :class=\"{\n          'bg-white': radio === value,\n        }\"\n      >\n\n      </div> \n\n      <div \n        v-if=\"radio !== value\"\n        class=\"br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100\"\n      >\n\n      </div> \n    </div> \n    <!-- <div v-if=\"radio === value\" class=\"\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g id=\"24 / basic / check-mark\">\n          <path id=\"icon\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.28033 10.7197L14.25 3.75L15.3107 4.81066L7.28033 12.841L3 8.56066L4.06066 7.5L7.28033 10.7197Z\" fill=\"#000000\"/>\n        </g>\n      </svg>\n    </div> -->\n\n    <!-- ////////////////////////// -->\n    <!-- Label -->\n    <!-- ////////////////////////// -->\n\n    <div v-if=\"label\" class=\"mn-r-auto t-transp mn-r-small\">\n      <span>{{label}}</span>\n    </div>\n\n    <!-- ////////////////////////// -->\n    <!-- Input -->\n    <!-- ////////////////////////// -->\n    <input \n      @input=\"event => text = emit('update:radio', event.target.value)\"\n      class=\"round radiobutton\" \n      type=\"checkbox\" \n      :name=\"name\" \n      :value=\"value\"\n      :checked=\"value === radio\"\n    >\n  </label>\n</template>\n\n<script setup>\n  const props = defineProps({\n    label: String,\n    name: String,\n    value: false,\n    radio: [Object, String]\n  })\n\n  const emit = defineEmits(['update:radio'])\n\n  const updateInputText = () => {\n    emit('update:radio', value)\n  }\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiEE,UAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Radio.vue.js","sources":["../../../../../src/components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <label class=\"flex-v-center flex-nowrap flex\">\n    <!-- ////////////////////////// -->\n    <!-- Checkmark -->\n    <!-- ////////////////////////// -->\n    <div \n      class=\"cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative\"\n      :class=\"{\n        'bg-main': radio === value,\n      }\"\n    >\n      <div \n        class=\"radius-extra pd-micro w-100 h-100\"\n        :class=\"{\n          'bg-white': radio === value,\n        }\"\n      >\n\n      </div> \n\n      <div \n        v-if=\"radio !== value\"\n        class=\"br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100\"\n      >\n\n      </div> \n    </div> \n    <!-- ////////////////////////// -->\n    <!-- Label -->\n    <!-- ////////////////////////// -->\n\n    <div v-if=\"label\" class=\"mn-l-thin mn-r-auto t-transp mn-r-small\">\n      <span>{{label}}</span>\n    </div>\n\n    <!-- ////////////////////////// -->\n    <!-- Input -->\n    <!-- ////////////////////////// -->\n    <input \n      @input=\"event => text = emit('update:radio', event.target.value)\"\n      class=\"round radiobutton\" \n      type=\"checkbox\" \n      :name=\"name\" \n      :value=\"value\"\n      :checked=\"value === radio\"\n    >\n  </label>\n</template>\n\n<script setup>\n  const props = defineProps({\n    label: String,\n    name: String,\n    value: false,\n    radio: [Object, String]\n  })\n\n  const emit = defineEmits(['update:radio'])\n\n  const updateInputText = () => {\n    emit('update:radio', value)\n  }\n</script>\n\n<style lang=\"scss\">\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyDE,UAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/Skeleton/Skeleton.vue.cjs

@@ -64,7 +64,7 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["skeleton-wrapper", { "skeleton-wrapper--loading": __props.loading }])
+        class: vue.normalizeClass(["w-100 pos-relative", { "skeleton-wrapper--loading": __props.loading }])
       }, [
         hasDefaultSlot.value && !__props.structure.length ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, void 0, true) : __props.structure.length ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
@@ -76,7 +76,8 @@ const _sfc_main = {
               class: vue.normalizeClass(["skeleton-item", [
                 `skeleton-item--${item.block}`,
                 `skeleton-item--${item.size || "medium"}`,
-                { "skeleton-item--rounded": item.rounded }
+                { "skeleton-item--rounded": item.rounded },
+                item.class
               ]]),
               style: vue.normalizeStyle(item.style)
             }, null, 6);
@@ -90,6 +91,6 @@ const _sfc_main = {
     };
   }
 };
-const Skeleton = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-70b3339a"]]);
+const Skeleton = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-b175ac0f"]]);
 exports.default = Skeleton;
 //# sourceMappingURL=Skeleton.vue.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vue.cjs","sources":["../../../../../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<template>\n  <div class=\"skeleton-wrapper\" :class=\"{ 'skeleton-wrapper--loading': loading }\">\n    <!-- Используем слот по умолчанию, если он есть -->\n    <slot v-if=\"hasDefaultSlot && !structure.length\"></slot>\n    \n    <!-- Создаем скелетон на основе переданной структуры, если слот пустой -->\n    <div v-else-if=\"structure.length\" class=\"skeleton-structure\" :class=\"{ 'skeleton-structure--horizontal': horizontal }\">\n      <div \n        v-for=\"(item, index) in structure\" \n        :key=\"index\" \n        class=\"skeleton-item\"\n        :class=\"[\n          `skeleton-item--${item.block}`,\n          `skeleton-item--${item.size || 'medium'}`,\n          { 'skeleton-item--rounded': item.rounded }\n        ]\"\n        :style=\"item.style\"\n      ></div>\n    </div>\n    \n    <!-- Если слот пустой и структура не определена - показываем дефолтный скелетон -->\n    <div v-else class=\"skeleton-default\">\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--small\"></div>\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--medium\"></div>\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--large\"></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, useSlots, computed, onMounted } from 'vue';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  // Флаг загрузки, определяет, нужно ли показывать скелетон\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  // Структура скелетона, если не используется слот\n  structure: {\n    type: Array,\n    default: () => []\n  },\n  // Горизонтальное расположение элементов (для карточек пользователей)\n  horizontal: {\n    type: Boolean,\n    default: false\n  },\n  // Цвет фона карточки (светлый фон)\n  cardColor: {\n    type: String,\n    default: 'rgb(var(--light))'\n  },\n  // Цвет блоков скелетона (серый)\n  blockColor: {\n    type: String,\n    default: 'rgba(var(--white),0.25)'\n  },\n  // Цвет анимированной полосы (белый с прозрачностью)\n  highlightColor: {\n    type: String,\n    default: 'rgba(var(--white), 0.9)'\n  },\n  // Скорость анимации в секундах\n  animationDuration: {\n    type: Number,\n    default: 1.5\n  },\n  // Радиус закругления\n  borderRadius: {\n    type: String,\n    default: '0.5rem'\n  }\n});\n\n// Проверяем наличие слота по умолчанию\nconst hasDefaultSlot = computed(() => Boolean(slots.default));\n\n// Применяем CSS переменные для настройки стилей\nonMounted(() => {\n  const root = document.documentElement;\n  root.style.setProperty('--skeleton-card-color', props.cardColor);\n  root.style.setProperty('--skeleton-block-color', props.blockColor);\n  root.style.setProperty('--skeleton-highlight-color', props.highlightColor);\n  root.style.setProperty('--skeleton-animation-duration', `${props.animationDuration}s`);\n  root.style.setProperty('--skeleton-border-radius', props.borderRadius);\n});\n</script>\n\n<style scoped>\n.skeleton-wrapper {\n  width: 100%;\n  position: relative;\n  background-color: var(--skeleton-card-color);\n  padding: 1rem;\n}\n\n/* Стили для режима загрузки */\n.skeleton-wrapper--loading ::v-deep(*) {\n  color: transparent !important;\n  border-color: transparent !important;\n  position: relative;\n}\n\n.skeleton-wrapper--loading ::v-deep(img),\n.skeleton-wrapper--loading ::v-deep(svg),\n.skeleton-wrapper--loading ::v-deep(button),\n.skeleton-wrapper--loading ::v-deep(a) {\n  opacity: 0;\n}\n\n.skeleton-wrapper--loading ::v-deep(*::before),\n.skeleton-wrapper--loading ::v-deep(*::after) {\n  display: none !important;\n}\n\n.skeleton-wrapper--loading ::v-deep(*) {\n  position: relative;\n  background-color: var(--skeleton-block-color) !important;\n  border-radius: var(--skeleton-border-radius);\n  overflow: hidden;\n}\n\n.skeleton-wrapper--loading ::v-deep(*)::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  display: block !important;\n  animation: shimmer var(--skeleton-animation-duration) infinite;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--skeleton-highlight-color) 50%,\n    transparent 100%\n  );\n}\n\n/* Стили для структурного скелетона */\n.skeleton-structure {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 100%;\n}\n\n/* Горизонтальный скелетон для карточек пользователей */\n.skeleton-structure--horizontal {\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.skeleton-item {\n  background-color: var(--skeleton-block-color);\n  border-radius: var(--skeleton-border-radius);\n  position: relative;\n  overflow: hidden;\n}\n\n.skeleton-item::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  animation: shimmer var(--skeleton-animation-duration) infinite;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--skeleton-highlight-color) 50%,\n    transparent 100%\n  );\n}\n\n/* Типы блоков */\n.skeleton-item--text {\n  height: 1rem;\n  width: 100%;\n}\n\n.skeleton-item--text-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1;\n}\n\n.skeleton-item--image {\n  width: 100%;\n  aspect-ratio: 16 / 9;\n}\n\n.skeleton-item--avatar {\n  width: 4rem;\n  height: 4rem;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.skeleton-item--button {\n  height: 3rem;\n  width: 8rem;\n}\n\n.skeleton-item--circle {\n  border-radius: 50%;\n}\n\n.skeleton-item--action {\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.skeleton-item--actions-group {\n  display: flex;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n.skeleton-item--square {\n  aspect-ratio: 1 / 1;\n}\n\n/* Размеры */\n.skeleton-item--small {\n  width: 30%;\n}\n\n.skeleton-item--medium {\n  width: 60%;\n}\n\n.skeleton-item--large {\n  width: 100%;\n}\n\n.skeleton-item--rounded {\n  border-radius: 50%;\n}\n\n/* Дефолтный скелетон */\n.skeleton-default {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 100%;\n}\n\n/* Анимация движения полосы */\n@keyframes shimmer {\n  0% {\n    left: -100%;\n  }\n  100% {\n    left: 100%;\n  }\n}\n</style>"],"names":["useSlots","computed","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,UAAM,QAAQA,IAAAA,SAAU;AAExB,UAAM,QAAQ;AA4Cd,UAAM,iBAAiBC,IAAAA,SAAS,MAAM,QAAQ,MAAM,OAAO,CAAC;AAG5DC,QAAAA,UAAU,MAAM;AACd,YAAM,OAAO,SAAS;AACtB,WAAK,MAAM,YAAY,yBAAyB,MAAM,SAAS;AAC/D,WAAK,MAAM,YAAY,0BAA0B,MAAM,UAAU;AACjE,WAAK,MAAM,YAAY,8BAA8B,MAAM,cAAc;AACzE,WAAK,MAAM,YAAY,iCAAiC,GAAG,MAAM,iBAAiB,GAAG;AACrF,WAAK,MAAM,YAAY,4BAA4B,MAAM,YAAY;AAAA,IACvE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.vue.cjs","sources":["../../../../../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<template>\n  <div class=\"w-100 pos-relative\" :class=\"{ 'skeleton-wrapper--loading': loading }\">\n    <!-- Используем слот по умолчанию, если он есть -->\n    <slot v-if=\"hasDefaultSlot && !structure.length\"></slot>\n    \n    <div \n      v-else-if=\"structure.length\" \n      class=\"skeleton-structure\"\n       :class=\"{ 'skeleton-structure--horizontal': horizontal }\"\n    >\n      <div \n        v-for=\"(item, index) in structure\" \n        :key=\"index\" \n        class=\"skeleton-item\"\n        :class=\"[\n          `skeleton-item--${item.block}`,\n          `skeleton-item--${item.size || 'medium'}`,\n          { 'skeleton-item--rounded': item.rounded },\n          item.class\n        ]\"\n        :style=\"item.style\"\n      />\n    </div>\n    \n    <!-- Если слот пустой и структура не определена - показываем дефолтный скелетон -->\n    <div v-else class=\"skeleton-default\">\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--small\"></div>\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--medium\"></div>\n      <div class=\"skeleton-item skeleton-item--text skeleton-item--large\"></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, useSlots, computed, onMounted } from 'vue';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  // Флаг загрузки, определяет, нужно ли показывать скелетон\n  loading: {\n    type: Boolean,\n    default: false\n  },\n  // Структура скелетона, если не используется слот\n  structure: {\n    type: Array,\n    default: () => []\n  },\n  // Горизонтальное расположение элементов (для карточек пользователей)\n  horizontal: {\n    type: Boolean,\n    default: false\n  },\n  // Цвет фона карточки (светлый фон)\n  cardColor: {\n    type: String,\n    default: 'rgb(var(--light))'\n  },\n  // Цвет блоков скелетона (серый)\n  blockColor: {\n    type: String,\n    default: 'rgba(var(--white),0.25)'\n  },\n  // Цвет анимированной полосы (белый с прозрачностью)\n  highlightColor: {\n    type: String,\n    default: 'rgba(var(--white), 0.9)'\n  },\n  // Скорость анимации в секундах\n  animationDuration: {\n    type: Number,\n    default: 1.5\n  },\n  // Радиус закругления\n  borderRadius: {\n    type: String,\n    default: '0.5rem'\n  }\n});\n\n// Проверяем наличие слота по умолчанию\nconst hasDefaultSlot = computed(() => Boolean(slots.default));\n\n// Применяем CSS переменные для настройки стилей\nonMounted(() => {\n  const root = document.documentElement;\n  root.style.setProperty('--skeleton-card-color', props.cardColor);\n  root.style.setProperty('--skeleton-block-color', props.blockColor);\n  root.style.setProperty('--skeleton-highlight-color', props.highlightColor);\n  root.style.setProperty('--skeleton-animation-duration', `${props.animationDuration}s`);\n  root.style.setProperty('--skeleton-border-radius', props.borderRadius);\n});\n</script>\n\n<style scoped>\n/* Стили для режима загрузки */\n.skeleton-wrapper--loading ::v-deep(*) {\n  color: transparent !important;\n  border-color: transparent !important;\n  position: relative;\n}\n\n.skeleton-wrapper--loading ::v-deep(img),\n.skeleton-wrapper--loading ::v-deep(svg),\n.skeleton-wrapper--loading ::v-deep(button),\n.skeleton-wrapper--loading ::v-deep(a) {\n  opacity: 0;\n}\n\n.skeleton-wrapper--loading ::v-deep(*::before),\n.skeleton-wrapper--loading ::v-deep(*::after) {\n  display: none !important;\n}\n\n.skeleton-wrapper--loading ::v-deep(*) {\n  position: relative;\n  background-color: var(--skeleton-block-color) !important;\n  border-radius: var(--skeleton-border-radius);\n  overflow: hidden;\n}\n\n.skeleton-wrapper--loading ::v-deep(*)::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  display: block !important;\n  animation: shimmer var(--skeleton-animation-duration) infinite;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--skeleton-highlight-color) 50%,\n    transparent 100%\n  );\n}\n\n/* Стили для структурного скелетона */\n.skeleton-structure {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 100%;\n}\n\n/* Горизонтальный скелетон для карточек пользователей */\n.skeleton-structure--horizontal {\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.skeleton-item {\n  background-color: var(--skeleton-block-color);\n  border-radius: var(--skeleton-border-radius);\n  position: relative;\n  overflow: hidden;\n}\n\n.skeleton-item::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -100%;\n  width: 100%;\n  height: 100%;\n  animation: shimmer var(--skeleton-animation-duration) infinite;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--skeleton-highlight-color) 50%,\n    transparent 100%\n  );\n}\n\n/* Типы блоков */\n.skeleton-item--text {\n  height: 1rem;\n  width: 100%;\n}\n\n.skeleton-item--text-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  flex: 1;\n}\n\n.skeleton-item--image {\n  width: 100%;\n  aspect-ratio: 16 / 9;\n}\n\n.skeleton-item--avatar {\n  width: 4rem;\n  height: 4rem;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.skeleton-item--button {\n  height: 3rem;\n  width: 8rem;\n}\n\n.skeleton-item--circle {\n  border-radius: 50%;\n}\n\n.skeleton-item--action {\n  width: 2rem;\n  height: 2rem;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.skeleton-item--actions-group {\n  display: flex;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n.skeleton-item--square {\n  aspect-ratio: 1 / 1;\n}\n\n/* Размеры */\n.skeleton-item--small {\n  width: 30%;\n}\n\n.skeleton-item--medium {\n  width: 60%;\n}\n\n.skeleton-item--large {\n  width: 100%;\n}\n\n.skeleton-item--rounded {\n  border-radius: 50%;\n}\n\n/* Дефолтный скелетон */\n.skeleton-default {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  width: 100%;\n}\n\n/* Анимация движения полосы */\n@keyframes shimmer {\n  0% {\n    left: -100%;\n  }\n  100% {\n    left: 100%;\n  }\n}\n</style>"],"names":["useSlots","computed","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQA,IAAAA,SAAU;AAExB,UAAM,QAAQ;AA4Cd,UAAM,iBAAiBC,IAAAA,SAAS,MAAM,QAAQ,MAAM,OAAO,CAAC;AAG5DC,QAAAA,UAAU,MAAM;AACd,YAAM,OAAO,SAAS;AACtB,WAAK,MAAM,YAAY,yBAAyB,MAAM,SAAS;AAC/D,WAAK,MAAM,YAAY,0BAA0B,MAAM,UAAU;AACjE,WAAK,MAAM,YAAY,8BAA8B,MAAM,cAAc;AACzE,WAAK,MAAM,YAAY,iCAAiC,GAAG,MAAM,iBAAiB,GAAG;AACrF,WAAK,MAAM,YAAY,4BAA4B,MAAM,YAAY;AAAA,IACvE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}