@ozdao/martyrs 0.2.488 → 0.2.489

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

@@ -0,0 +1,243 @@
+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 pos = ref({ x: 0, y: 0 });
+    const image = 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: `scale3d(${scale.value}, ${scale.value}, 1) translate3d(${pos.value.x}px, ${pos.value.y}px, 0)`,
+      backfaceVisibility: "hidden"
+    }));
+    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" });
+      }
+    };
+    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 [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;
+      constrain();
+    };
+    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 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 });
+      };
+      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 = (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 {
+        dragTimer = setTimeout(() => startDrag(e), 50);
+      }
+    };
+    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 = () => {
+      clearTimeout(dragTimer);
+      startDist = 0;
+    };
+    const handleWheel = (e) => {
+      clearTimeout(wheelTimer);
+      wheelTimer = setTimeout(() => zoom(scale.value + (e.deltaY > 0 ? -0.1 : 0.1), e.clientX, e.clientY), 10);
+    };
+    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("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-viewer",
+        onWheel: withModifiers(handleWheel, ["prevent"])
+      }, [
+        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 {
+  PhotoViewer as default
+};
+//# sourceMappingURL=PhotoViewer.vue.js.map

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

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;;;;;;AAME,UAAM,QAAQ;AAOd,UAAM,eAAe,IAAI,CAAC;AAC1B,UAAM,aAAa,IAAI,CAAC;AACxB,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,QAAQ,IAAI,CAAC;AACnB,UAAM,MAAM,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG;AAC9B,UAAM,QAAQ,IAAI,IAAI;AACtB,UAAM,gBAAgB,IAAI,IAAI;AAE9B,QAAI,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,GAAG,YAAY;AAEtE,UAAM,SAAS,SAAS,MAAM;;AAAA,0BAAM,WAAN,mBAAc,UAAS,MAAM,SAAS,MAAM,WAAW,CAAC,MAAM,QAAQ,IAAI,CAAA;AAAA,KAAE;AAE1G,UAAM,cAAc,SAAS,OAAO;AAAA,MAClC,WAAW,eAAe,WAAW,KAAK;AAAA,MAC1C,YAAY,WAAW,QAAQ,SAAS;AAAA,MACxC,oBAAoB;AAAA,IACxB,EAAI;AAEF,UAAM,WAAW,SAAS,OAAO;AAAA,MAC/B,WAAW,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,oBAAoB,IAAI,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC;AAAA,MAClG,oBAAoB;AAAA,IACxB,EAAI;AAEF,UAAM,QAAQ,MAAM;AAClB,YAAM,QAAQ;AACd,UAAI,QAAQ,EAAE,GAAG,GAAG,GAAG,EAAG;AAAA,IAC3B;AAED,UAAM,OAAO,CAAC,UAAU;AACtB,mBAAa,QAAQ;AACrB,iBAAW,QAAQ,CAAC,QAAQ,OAAO;AACnC,YAAO;AAAA,IACR;AAED,UAAM,SAAS,CAAC,UAAU;AACxB,iBAAW,QAAQ;AACnB,WAAK,KAAK;AACV,4BAAsB,MAAM,WAAW,QAAQ,KAAK;AAAA,IACrD;AAED,UAAM,gBAAgB,CAAC,OAAO;AAC5B,UAAI,MAAM,cAAc,OAAO;AAC7B,cAAM,YAAY,cAAc;AAChC,cAAM,QAAQ;AACd,cAAM,OAAO,MAAM,aAAa,UAAU,cAAc,IAAI,MAAM,cAAc;AAChF,kBAAU,SAAS,EAAE,MAAM,UAAU,SAAQ,CAAE;AAAA,MACrD;AAAA,IACG;AAED,UAAM,QAAQ,CAAC,MAAM;;AACnB,YAAM,MAAI,OAAE,YAAF,mBAAY,OAAM;AAC5B,aAAO,CAAC,EAAE,SAAS,EAAE,OAAO;AAAA,IAC7B;AAED,UAAM,YAAY,MAAM;AACtB,UAAI,MAAM,SAAS,KAAK,CAAC,MAAM,MAAO,QAAO,MAAO;AAEpD,YAAM,EAAE,cAAc,IAAI,eAAe,GAAE,IAAK,MAAM;AACtD,YAAM,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,OAAO,WAAW;AACvD,YAAM,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;AAEtC,YAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,KAAK;AACtE,YAAM,OAAO,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,QAAQ,MAAM,IAAI,MAAM,KAAK;AAEtE,UAAI,MAAM,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,CAAC;AACzD,UAAI,MAAM,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,MAAM,IAAI,MAAM,CAAC,CAAC;AAAA,IAC1D;AAED,UAAM,OAAO,CAAC,UAAU,IAAI,OAAO;AACjC,UAAI,CAAC,MAAM,MAAO;AAElB,iBAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,CAAC;AAC5C,YAAM,OAAO,MAAM,MAAM,sBAAuB;AAChD,YAAM,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO,KAAK,QAAQ,GAAG,KAAK,KAAK,MAAM,KAAK,SAAS,CAAC;AAClF,YAAM,SAAS,WAAW,MAAM;AAEhC,UAAI,MAAM,KAAM,KAAK,MAAM,SAAU,SAAS;AAC9C,UAAI,MAAM,KAAM,KAAK,MAAM,SAAU,SAAS;AAC9C,YAAM,QAAQ;AACd,gBAAW;AAAA,IACZ;AAED,UAAM,YAAY,CAAC,MAAM;AACvB,UAAI,EAAE,SAAS,YAAa,GAAE,eAAgB;AAC9C,iBAAW,QAAQ;AACnB,UAAI,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC;AAEpB,YAAM,aAAa,MAAM,QAAQ,IAC7B,CAACA,OAAM;AACL,YAAI,CAAC,WAAW,MAAO;AACvB,YAAIA,GAAE,SAAS,YAAa,CAAAA,GAAE,eAAgB;AAC9C,cAAM,CAAC,IAAI,EAAE,IAAI,MAAMA,EAAC;AACxB,YAAI,MAAM,MAAM,KAAK,KAAK,MAAM;AAChC,YAAI,MAAM,MAAM,KAAK,KAAK,MAAM;AAChC,kBAAW;AACX,SAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE;AAAA,MAC1B,IACQ,CAACA,OAAM;AACL,YAAI,CAAC,WAAW,MAAO;AACvB,YAAIA,GAAE,SAAS,YAAa,CAAAA,GAAE,eAAgB;AAC9C,gBAAQ,MAAMA,EAAC,EAAE,CAAC,IAAI;AACtB,mBAAW,QAAQ,QAAQ,aAAa,QAAQ,OAAO;AAAA,MACxD;AAEL,YAAM,YAAY,MAAM;AACtB,mBAAW,QAAQ;AACnB,YAAI,MAAM,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,OAAO,aAAa,GAAG;AAC/D,eAAK,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,SAAS,GAAG,aAAa,SAAS,QAAQ,IAAI,KAAK,EAAE,CAAC,CAAC;AAAA,QACtG,WAAiB,MAAM,SAAS,GAAG;AAC3B,eAAK,aAAa,KAAK;AAAA,QAC/B;AACM,gBAAQ;AACR,iBAAS,oBAAoB,aAAa,YAAY,EAAE,SAAS,MAAM;AACvE,iBAAS,oBAAoB,WAAW,WAAW,EAAE,SAAS,MAAM;AACpE,iBAAS,oBAAoB,aAAa,YAAY,EAAE,SAAS,OAAO;AACxE,iBAAS,oBAAoB,YAAY,WAAW,EAAE,SAAS,MAAM;AAAA,MACtE;AAED,UAAI,MAAM,SAAS,EAAG,UAAS;AAC/B,eAAS,iBAAiB,aAAa,YAAY,EAAE,SAAS,MAAM;AACpE,eAAS,iBAAiB,WAAW,WAAW,EAAE,SAAS,MAAM;AACjE,eAAS,iBAAiB,aAAa,YAAY,EAAE,SAAS,OAAO;AACrE,eAAS,iBAAiB,YAAY,WAAW,EAAE,SAAS,MAAM;AAAA,IACnE;AAED,UAAM,mBAAmB,CAAC,MAAM;AAC9B,UAAI,EAAE,QAAQ,WAAW,GAAG;AAC1B,qBAAa,SAAS;AACtB,cAAM,CAAC,IAAI,EAAE,IAAI,EAAE;AACnB,oBAAY,KAAK,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO;AACvE,qBAAa,MAAM;AAAA,MACzB,OAAW;AACL,oBAAY,WAAW,MAAM,UAAU,CAAC,GAAG,EAAE;AAAA,MACnD;AAAA,IACG;AAED,UAAM,kBAAkB,CAAC,MAAM;AAC7B,UAAI,EAAE,QAAQ,WAAW,KAAK,CAAC,WAAW,OAAO;AAC/C,qBAAa,SAAS;AACtB,UAAE,eAAgB;AAClB,cAAM,CAAC,IAAI,EAAE,IAAI,EAAE;AACnB,cAAM,OAAO,KAAK,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO;AACxE,aAAK,cAAc,OAAO,aAAa,GAAG,UAAU,GAAG,WAAW,IAAI,GAAG,UAAU,GAAG,WAAW,CAAC;AAAA,MACxG;AAAA,IACG;AAED,UAAM,iBAAiB,MAAM;AAC3B,mBAAa,SAAS;AACtB,kBAAY;AAAA,IACb;AAED,UAAM,cAAc,CAAC,MAAM;AACzB,mBAAa,UAAU;AACvB,mBAAa,WAAW,MAAM,KAAK,MAAM,SAAS,EAAE,SAAS,IAAI,OAAO,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,EAAE;AAAA,IACxG;AAED,UAAM,YAAY,CAAC,MAAM;AACvB,YAAM,MAAM,EAAE,WAAW,IAAI,YAAY,EAAG,EAAC,EAAE,GAAG;AAClD,UAAI,IAAK,MAAK,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,SAAS,GAAG,aAAa,QAAQ,GAAG,CAAC,CAAC;AAAA,IACvF;AAED,UAAM,MAAM,MAAM,cAAc,CAAC,MAAM,KAAK,QAAQ,OAAO,CAAC,CAAC;AAE7D,cAAU,MAAM;AACd,aAAO,iBAAiB,WAAW,WAAW,EAAE,SAAS,MAAM;AAC/D,aAAO,MAAM,gBAAgB,CAAC;AAAA,IAClC,CAAG;AAED,oBAAgB,MAAM;AACpB,aAAO,oBAAoB,WAAW,SAAS;AAC/C,mBAAa,UAAU;AACvB,mBAAa,SAAS;AAAA,IAC1B,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const IconCross = require("../../modules/icons/navigation/IconCross.vue.cjs");
+;/* empty css             */
+const _hoisted_1 = {
+  key: 0,
+  class: "mn-b-medium"
+};
+const _sfc_main = {
+  __name: "Popup",
+  props: {
+    isPopupOpen: {
+      type: Boolean,
+      default: false
+    },
+    style: String,
+    title: String,
+    align: {
+      type: String,
+      default: "center center",
+      validator: (value) => {
+        const validAlignments = [
+          "top left",
+          "top center",
+          "top right",
+          "center left",
+          "center center",
+          "center right",
+          "bottom left",
+          "bottom center",
+          "bottom right"
+        ];
+        return validAlignments.includes(value);
+      }
+    }
+  },
+  emits: ["close-popup"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const alignClass = vue.computed(() => {
+      return `align-${props.align.replace(/\s+/g, "-")}`;
+    });
+    function closePopup() {
+      emits("close-popup");
+    }
+    vue.watch(() => props.isPopupOpen, (newVal) => {
+      if (newVal) {
+        document.body.classList.add("no-scroll");
+      } else {
+        document.body.classList.remove("no-scroll");
+      }
+    });
+    vueRouter.useRoute();
+    vueRouter.useRouter();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Transition, { name: "moveFromTop" }, {
+        default: vue.withCtx(() => [
+          __props.isPopupOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            key: 0,
+            to: "body"
+          }, [
+            __props.isPopupOpen ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: "popup-content",
+              class: vue.normalizeClass(["z-index-6 popup-wrapper", {
+                "pd-t-extra": _ctx.MOBILE_APP === "ios",
+                [alignClass.value]: true
+              }])
+            }, [
+              vue.createVNode(vue.Transition, {
+                name: "TransitionTranslateY",
+                mode: "out-in"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("section", vue.mergeProps({ class: "h-max-100 o-y-scroll pos-relative z-index-4" }, _ctx.$attrs, {
+                    class: _ctx.$attrs.class
+                  }), [
+                    __props.title ? (vue.openBlock(), vue.createElementBlock("h4", _hoisted_1, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
+                    vue.createVNode(IconCross.default, {
+                      fill: "rgb(var(--white))",
+                      onClick: _cache[0] || (_cache[0] = ($event) => closePopup()),
+                      class: "cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5"
+                    }),
+                    vue.renderSlot(_ctx.$slots, "default")
+                  ], 16)
+                ]),
+                _: 3
+              }),
+              vue.createElementVNode("div", {
+                onClick: _cache[1] || (_cache[1] = ($event) => closePopup()),
+                class: vue.normalizeClass([{ "active": __props.isPopupOpen === true }, "color-overlay z-index-3"])
+              }, null, 2)
+            ], 2)) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Popup.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.vue.cjs","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n  <transition name=\"moveFromTop\">\n    <teleport to=\"body\" v-if=\"isPopupOpen\">\n      <div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"z-index-6 popup-wrapper\"\n        :class=\"{\n          'pd-t-extra': MOBILE_APP === 'ios',\n          [alignClass]: true\n        }\"\n      >\n        <transition name=\"TransitionTranslateY\" mode=\"out-in\">\n          <section class=\"h-max-100 o-y-scroll pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n            <h4 v-if=\"title\" class=\"mn-b-medium\">{{title}}</h4>\n            <IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5\"/>\n            <slot></slot>\n          </section>  \n        </transition>\n\n        <div \n          @click=\"closePopup()\" \n          :class=\"{'active':isPopupOpen === true}\" \n          class=\"color-overlay z-index-3\">\n        </div>\n      </div>\n    </teleport>\n  </transition>\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\n// import { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n    type: Boolean,\n    default: false\n  },\n  style: String,\n  title: String,\n  align: {\n    type: String,\n    default: 'center center',\n    validator: (value) => {\n      const validAlignments = [\n        'top left', 'top center', 'top right',\n        'center left', 'center center', 'center right',\n        'bottom left', 'bottom center', 'bottom right'\n      ];\n      return validAlignments.includes(value);\n    }\n  }\n});\n\nconst emits = defineEmits(['close-popup'])\n\n// Compute the alignment class from the align prop\nconst alignClass = computed(() => {\n  return `align-${props.align.replace(/\\s+/g, '-')}`;\n});\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  messages: {\n    en: {},\n    ru: {}\n  }\n}\n// const { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n  .no-scroll {\n    overflow: hidden;\n\n    #view {\n      overflow: hidden;\n    }\n  }\n\n  .popup-wrapper {\n    display: flex;\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    z-index: 40;\n\n    /* Default alignment - center center */\n    &.align-center-center {\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Top alignments */\n    &.align-top-left {\n      align-items: flex-start;\n      justify-content: flex-start;\n    }\n    \n    &.align-top-center {\n      align-items: flex-start;\n      justify-content: center;\n    }\n    \n    &.align-top-right {\n      align-items: flex-start;\n      justify-content: flex-end;\n    }\n\n    /* Center alignments */\n    &.align-center-left {\n      align-items: center;\n      justify-content: flex-start;\n    }\n    \n    &.align-center-right {\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    /* Bottom alignments */\n    &.align-bottom-left {\n      align-items: flex-end;\n      justify-content: flex-start;\n    }\n    \n    &.align-bottom-center {\n      align-items: flex-end;\n      justify-content: center;\n    }\n    \n    &.align-bottom-right {\n      align-items: flex-end;\n      justify-content: flex-end;\n    }\n\n    .popup {\n      position: absolute;\n      height: auto;\n      padding: 2rem;\n      min-width: 24rem;\n      border-radius: 2rem;\n      overflow: hidden;\n      color: white;\n      background: black;\n      z-index: 40;\n    }\n  }\n\n  .color-overlay {\n    display: block;\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.0);\n    pointer-events: none;\n    transform: scale(1.5);\n    transition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n    \n    &.active {\n      background: rgba(#000,0.25);\n      pointer-events: all;\n    }\n  }\n</style>"],"names":["computed","watch","useRoute","useRouter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ;AAqBd,UAAM,QAAQ;AAGd,UAAM,aAAaA,IAAQ,SAAC,MAAM;AAChC,aAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,IAClD,CAAC;AAED,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEAC,QAAK,MAAC,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC9C;AAAA,IACA,CAAC;AAGaC,cAAQ,SAAA;AACPC,cAAS,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,104 @@
+import { computed, watch, createBlock, openBlock, Transition, withCtx, createCommentVNode, Teleport, createElementBlock, normalizeClass, createVNode, createElementVNode, mergeProps, renderSlot, toDisplayString } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import _sfc_main$1 from "../../modules/icons/navigation/IconCross.vue.js";
+/* empty css           */
+const _hoisted_1 = {
+  key: 0,
+  class: "mn-b-medium"
+};
+const _sfc_main = {
+  __name: "Popup",
+  props: {
+    isPopupOpen: {
+      type: Boolean,
+      default: false
+    },
+    style: String,
+    title: String,
+    align: {
+      type: String,
+      default: "center center",
+      validator: (value) => {
+        const validAlignments = [
+          "top left",
+          "top center",
+          "top right",
+          "center left",
+          "center center",
+          "center right",
+          "bottom left",
+          "bottom center",
+          "bottom right"
+        ];
+        return validAlignments.includes(value);
+      }
+    }
+  },
+  emits: ["close-popup"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const alignClass = computed(() => {
+      return `align-${props.align.replace(/\s+/g, "-")}`;
+    });
+    function closePopup() {
+      emits("close-popup");
+    }
+    watch(() => props.isPopupOpen, (newVal) => {
+      if (newVal) {
+        document.body.classList.add("no-scroll");
+      } else {
+        document.body.classList.remove("no-scroll");
+      }
+    });
+    useRoute();
+    useRouter();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, { name: "moveFromTop" }, {
+        default: withCtx(() => [
+          __props.isPopupOpen ? (openBlock(), createBlock(Teleport, {
+            key: 0,
+            to: "body"
+          }, [
+            __props.isPopupOpen ? (openBlock(), createElementBlock("div", {
+              key: "popup-content",
+              class: normalizeClass(["z-index-6 popup-wrapper", {
+                "pd-t-extra": _ctx.MOBILE_APP === "ios",
+                [alignClass.value]: true
+              }])
+            }, [
+              createVNode(Transition, {
+                name: "TransitionTranslateY",
+                mode: "out-in"
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("section", mergeProps({ class: "h-max-100 o-y-scroll pos-relative z-index-4" }, _ctx.$attrs, {
+                    class: _ctx.$attrs.class
+                  }), [
+                    __props.title ? (openBlock(), createElementBlock("h4", _hoisted_1, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+                    createVNode(_sfc_main$1, {
+                      fill: "rgb(var(--white))",
+                      onClick: _cache[0] || (_cache[0] = ($event) => closePopup()),
+                      class: "cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5"
+                    }),
+                    renderSlot(_ctx.$slots, "default")
+                  ], 16)
+                ]),
+                _: 3
+              }),
+              createElementVNode("div", {
+                onClick: _cache[1] || (_cache[1] = ($event) => closePopup()),
+                class: normalizeClass([{ "active": __props.isPopupOpen === true }, "color-overlay z-index-3"])
+              }, null, 2)
+            ], 2)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Popup.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.vue.js","sources":["../../../../../src/components/Popup/Popup.vue"],"sourcesContent":["<template>\n  <transition name=\"moveFromTop\">\n    <teleport to=\"body\" v-if=\"isPopupOpen\">\n      <div v-if=\"isPopupOpen\" key=\"popup-content\" class=\"z-index-6 popup-wrapper\"\n        :class=\"{\n          'pd-t-extra': MOBILE_APP === 'ios',\n          [alignClass]: true\n        }\"\n      >\n        <transition name=\"TransitionTranslateY\" mode=\"out-in\">\n          <section class=\"h-max-100 o-y-scroll pos-relative z-index-4\" v-bind=\"$attrs\" :class=\"$attrs.class\">\n            <h4 v-if=\"title\" class=\"mn-b-medium\">{{title}}</h4>\n            <IconCross :fill=\"'rgb(var(--white))'\" @click=\"closePopup()\" class=\"cursor-pointer bg-second pd-micro radius-extra pos-absolute pos-t-0 pos-r-0 mn-t-medium mn-r-medium hover-scale-1 i-medium z-index-5\"/>\n            <slot></slot>\n          </section>  \n        </transition>\n\n        <div \n          @click=\"closePopup()\" \n          :class=\"{'active':isPopupOpen === true}\" \n          class=\"color-overlay z-index-3\">\n        </div>\n      </div>\n    </teleport>\n  </transition>\n</template>\n\n<script setup>\nimport { computed, watch, onMounted, ref, nextTick } from 'vue';\n// Import libs\nimport { useRoute, useRouter } from 'vue-router'\n// import { useI18n } from 'vue-i18n'\n// Icons\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n// Define props\nconst props = defineProps({\n  isPopupOpen: {\n    type: Boolean,\n    default: false\n  },\n  style: String,\n  title: String,\n  align: {\n    type: String,\n    default: 'center center',\n    validator: (value) => {\n      const validAlignments = [\n        'top left', 'top center', 'top right',\n        'center left', 'center center', 'center right',\n        'bottom left', 'bottom center', 'bottom right'\n      ];\n      return validAlignments.includes(value);\n    }\n  }\n});\n\nconst emits = defineEmits(['close-popup'])\n\n// Compute the alignment class from the align prop\nconst alignClass = computed(() => {\n  return `align-${props.align.replace(/\\s+/g, '-')}`;\n});\n\nfunction closePopup() {\n  emits(\"close-popup\");\n} \n\nwatch(() => props.isPopupOpen, (newVal) => {\n  if (newVal) {\n    document.body.classList.add('no-scroll');\n  } else {\n    document.body.classList.remove('no-scroll');\n  }\n});\n\n// Accessing router and store\nconst route = useRoute()\nconst router = useRouter()\n// Localization\nconst text = {\n  messages: {\n    en: {},\n    ru: {}\n  }\n}\n// const { t } = useI18n(text)\n</script>\n\n<style lang=\"scss\">\n  .no-scroll {\n    overflow: hidden;\n\n    #view {\n      overflow: hidden;\n    }\n  }\n\n  .popup-wrapper {\n    display: flex;\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n    z-index: 40;\n\n    /* Default alignment - center center */\n    &.align-center-center {\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Top alignments */\n    &.align-top-left {\n      align-items: flex-start;\n      justify-content: flex-start;\n    }\n    \n    &.align-top-center {\n      align-items: flex-start;\n      justify-content: center;\n    }\n    \n    &.align-top-right {\n      align-items: flex-start;\n      justify-content: flex-end;\n    }\n\n    /* Center alignments */\n    &.align-center-left {\n      align-items: center;\n      justify-content: flex-start;\n    }\n    \n    &.align-center-right {\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    /* Bottom alignments */\n    &.align-bottom-left {\n      align-items: flex-end;\n      justify-content: flex-start;\n    }\n    \n    &.align-bottom-center {\n      align-items: flex-end;\n      justify-content: center;\n    }\n    \n    &.align-bottom-right {\n      align-items: flex-end;\n      justify-content: flex-end;\n    }\n\n    .popup {\n      position: absolute;\n      height: auto;\n      padding: 2rem;\n      min-width: 24rem;\n      border-radius: 2rem;\n      overflow: hidden;\n      color: white;\n      background: black;\n      z-index: 40;\n    }\n  }\n\n  .color-overlay {\n    display: block;\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.0);\n    pointer-events: none;\n    transform: scale(1.5);\n    transition: all 0.5s cubic-bezier(.31,.79,.24,.92);\n    \n    &.active {\n      background: rgba(#000,0.25);\n      pointer-events: all;\n    }\n  }\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAM,QAAQ;AAqBd,UAAM,QAAQ;AAGd,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,IAClD,CAAC;AAED,aAAS,aAAa;AACpB,YAAM,aAAa;AAAA,IACrB;AAEA,UAAM,MAAM,MAAM,aAAa,CAAC,WAAW;AACzC,UAAI,QAAQ;AACV,iBAAS,KAAK,UAAU,IAAI,WAAW;AAAA,MAC3C,OAAS;AACL,iBAAS,KAAK,UAAU,OAAO,WAAW;AAAA,MAC9C;AAAA,IACA,CAAC;AAGa,aAAQ;AACP,cAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const _hoisted_1 = { class: "flex-v-center flex-nowrap flex" };
+const _hoisted_2 = {
+  key: 0,
+  class: "br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "mn-l-thin mn-r-auto t-transp mn-r-small"
+};
+const _hoisted_4 = ["name", "value", "checked"];
+const _sfc_main = {
+  __name: "Radio",
+  props: {
+    label: String,
+    name: String,
+    value: false,
+    radio: [Object, String]
+  },
+  emits: ["update:radio"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("label", _hoisted_1, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
+            "bg-main": __props.radio === __props.value
+          }])
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["radius-extra pd-micro w-100 h-100", {
+              "bg-white": __props.radio === __props.value
+            }])
+          }, null, 2),
+          __props.radio !== __props.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2)) : vue.createCommentVNode("", true)
+        ], 2),
+        __props.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          vue.createElementVNode("span", null, vue.toDisplayString(__props.label), 1)
+        ])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("input", {
+          onInput: _cache[0] || (_cache[0] = (event) => _ctx.text = emit("update:radio", event.target.value)),
+          class: "round radiobutton",
+          type: "checkbox",
+          name: __props.name,
+          value: __props.value,
+          checked: __props.value === __props.radio
+        }, null, 40, _hoisted_4)
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Radio.vue.cjs.map

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

@@ -0,0 +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 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

@@ -0,0 +1,55 @@
+import { createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, toDisplayString } from "vue";
+const _hoisted_1 = { class: "flex-v-center flex-nowrap flex" };
+const _hoisted_2 = {
+  key: 0,
+  class: "br-solid br-2px br-grey-transp-25 pos-absolute pos-t-0 pos-r-0 radius-extra w-100 h-100"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "mn-l-thin mn-r-auto t-transp mn-r-small"
+};
+const _hoisted_4 = ["name", "value", "checked"];
+const _sfc_main = {
+  __name: "Radio",
+  props: {
+    label: String,
+    name: String,
+    value: false,
+    radio: [Object, String]
+  },
+  emits: ["update:radio"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["cursor-pointer radius-extra pd-micro h-100 aspect-1x1 pos-relative", {
+            "bg-main": __props.radio === __props.value
+          }])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["radius-extra pd-micro w-100 h-100", {
+              "bg-white": __props.radio === __props.value
+            }])
+          }, null, 2),
+          __props.radio !== __props.value ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true)
+        ], 2),
+        __props.label ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("span", null, toDisplayString(__props.label), 1)
+        ])) : createCommentVNode("", true),
+        createElementVNode("input", {
+          onInput: _cache[0] || (_cache[0] = (event) => _ctx.text = emit("update:radio", event.target.value)),
+          class: "round radiobutton",
+          type: "checkbox",
+          name: __props.name,
+          value: __props.value,
+          checked: __props.value === __props.radio
+        }, null, 40, _hoisted_4)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=Radio.vue.js.map

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

@@ -0,0 +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 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}