@ozdao/martyrs 0.2.541 → 0.2.543

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

@@ -31,6 +31,7 @@ const _sfc_main = {
     const resizeObserver = ref(null);
     const checkInterval = ref(null);
     const resizeTimeout = ref(null);
+    const previousSize = ref({ width: 0, height: 0 });
     const widthMin = ref("100%");
     const widthContainer = ref(0);
     const widthContent = ref(0);
@@ -85,11 +86,19 @@ const _sfc_main = {
         if (resizeObserver.value) {
           resizeObserver.value.disconnect();
         }
-        resizeObserver.value = new ResizeObserver(() => {
-          clearTimeout(resizeTimeout.value);
-          resizeTimeout.value = setTimeout(() => {
-            calculateClones();
-          }, 150);
+        resizeObserver.value = new ResizeObserver((entries) => {
+          const entry = entries[0];
+          const newWidth = entry.contentRect.width;
+          const newHeight = entry.contentRect.height;
+          const widthChanged = Math.abs(newWidth - previousSize.value.width) > 1;
+          const heightChanged = Math.abs(newHeight - previousSize.value.height) > 1;
+          if (widthChanged || heightChanged) {
+            previousSize.value = { width: newWidth, height: newHeight };
+            clearTimeout(resizeTimeout.value);
+            resizeTimeout.value = setTimeout(() => {
+              calculateClones();
+            }, 300);
+          }
         });
         resizeObserver.value.observe(marqueeOverlayContainer.value);
       } else {
@@ -123,7 +132,7 @@ const _sfc_main = {
         "--pauseOnHover": `${props.pauseOnHover ? "paused" : "running"}`,
         "--pauseOnClick": `${props.pauseOnClick ? "paused" : "running"}`,
         "--pauseAnimation": `${props.vertical && verticalAnimationPause.value || props.pause ? "paused" : "running"}`,
-        "--gradient-color": `rgba(${props.gradientColor}, 1), rgba(${props.gradientColor}, 0)`,
+        "--gradient-color": props.gradientColor,
         "--gradient-length": `${gradientLength.value}`,
         "--min-width": `${widthMin.value}`,
         "--min-height": `${heightMin.value}`,
@@ -179,9 +188,9 @@ const _sfc_main = {
       (newVal, oldVal) => {
         if (newVal !== oldVal) {
           if (newVal) {
-            emits("onResume");
-          } else {
             emits("onPause");
+          } else {
+            emits("onResume");
           }
         }
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Marquee.vue.js","sources":["../../../../../src/components/Marquee/Marquee.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"ready\"\n    class=\"vue3-marquee\"\n    :class=\"{ vertical: vertical, horizontal: !vertical }\"\n    :style=\"getCurrentStyle\"\n    @mouseenter=\"hoverStarted\"\n    @mouseleave=\"hoverEnded\"\n    @mousedown=\"mouseDown\"\n    @mouseup=\"mouseUp\"\n  >\n    <div\n      class=\"transparent-overlay\"\n      ref=\"marqueeOverlayContainer\"\n      :aria-hidden=\"true\"\n      :class=\"{ vertical: vertical, horizontal: !vertical, overlay: gradient }\"\n    />\n\n    <div \n      class=\"marquee\"\n      ref=\"marqueeContent\">\n      <slot></slot>\n    </div>\n\n    <div \n      class=\"marquee\" \n      :aria-hidden=\"true\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      v-for=\"num in cloneAmount\"\n      :key=\"num\"\n      :aria-hidden=\"true\"\n      class=\"marquee cloned\"\n    >\n      <slot></slot>\n    </div\n    >\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'\n\nconst props = defineProps({\n  vertical: { type: Boolean, default: false },\n  direction: { type: String, default: 'normal' },\n  duration: { type: Number, default: 20 },\n  delay: { type: Number, default: 0 },\n  loop: { type: Number, default: 0 },\n  clone: { type: Boolean, default: false },\n  gradient: { type: Boolean, default: false },\n  gradientColor: { type: [Array,String], default: () => [255, 255, 255] },\n  gradientLength: { type: String },\n  pauseOnHover: { type: Boolean, default: false },\n  pauseOnClick: { type: Boolean, default: false },\n  pause: { type: Boolean, default: false }\n})\n\nconst emits = defineEmits(['onComplete', 'onLoopComplete', 'onPause', 'onResume'])\n\nconst ready = ref(false)\n\nconst cloneAmount = ref(0)\nconst loopCounter = ref(0)\nconst loopInterval = ref(null)\nconst resizeObserver = ref(null)\nconst checkInterval = ref(null)\nconst resizeTimeout = ref(null)\n\nconst widthMin = ref('100%')\nconst widthContainer = ref(0)\nconst widthContent = ref(0)\nconst heightMin = ref('100%')\nconst heightContainer = ref(0)\nconst heightContent = ref(0)\n\nconst gradientLength = ref('200px')\n\nconst verticalAnimationPause = ref(false)\nconst marqueeContent = ref(null)\nconst marqueeOverlayContainer = ref(null)\n\n// Removed ForcesUpdate - no longer needed\n\nconst checkForClone = async () => {\n  if (props.vertical) {\n    verticalAnimationPause.value = true\n  }\n\n  await nextTick()\n  \n  const calculateClones = () => {\n    widthMin.value = '0%'\n    heightMin.value = '0%'\n\n    if (marqueeContent.value !== null && marqueeOverlayContainer.value !== null) {\n      if (marqueeContent.value && marqueeOverlayContainer.value) {\n        if (\n          props.vertical &&\n          'clientHeight' in marqueeContent.value &&\n          'clientHeight' in marqueeOverlayContainer.value\n        ) {\n          heightContent.value = marqueeContent.value.clientHeight\n          heightContainer.value = marqueeOverlayContainer.value.clientHeight\n\n          const localCloneAmount = Math.ceil(heightContainer.value / heightContent.value)\n\n          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0\n\n          verticalAnimationPause.value = false\n\n          return cloneAmount.value\n        } else if (\n          !props.vertical &&\n          'clientWidth' in marqueeContent.value &&\n          'clientWidth' in marqueeOverlayContainer.value\n        ) {\n          widthContent.value = marqueeContent.value.clientWidth\n          widthContainer.value = marqueeOverlayContainer.value.clientWidth\n\n          const localCloneAmount = Math.ceil(widthContainer.value / widthContent.value)\n\n          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0\n\n          return cloneAmount.value\n        } else {\n          widthMin.value = '100%'\n          heightMin.value = '100%'\n          return 0\n        }\n      } else {\n        widthMin.value = '100%'\n        heightMin.value = '100%'\n        return 0\n      }\n    } else {\n      widthMin.value = '100%'\n      heightMin.value = '100%'\n      return 0\n    }\n  }\n  \n  // Run once immediately\n  calculateClones()\n  \n  // Setup ResizeObserver for efficient resize detection\n  if (typeof ResizeObserver !== 'undefined' && marqueeOverlayContainer.value) {\n    if (resizeObserver.value) {\n      resizeObserver.value.disconnect()\n    }\n    \n    resizeObserver.value = new ResizeObserver(() => {\n      clearTimeout(resizeTimeout.value)\n      resizeTimeout.value = setTimeout(() => {\n        calculateClones()\n      }, 150)\n    })\n    \n    resizeObserver.value.observe(marqueeOverlayContainer.value)\n  } else {\n    // Fallback for browsers without ResizeObserver\n    // Only check once after a delay for initial setup\n    if (checkInterval.value) {\n      clearInterval(checkInterval.value)\n    }\n    \n    checkInterval.value = setTimeout(() => {\n      calculateClones()\n      checkInterval.value = null\n    }, 500)\n  }\n}\n\nconst hoverStarted = () => { if (props.pauseOnHover) emits('onPause') }\nconst hoverEnded = () => { if (props.pauseOnHover) emits('onResume') }\nconst mouseDown = () => { if (props.pauseOnClick) emits('onPause') }\nconst mouseUp = () => { if (props.pauseOnClick) emits('onResume') }\n\nconst getCurrentStyle = computed(() => {\n  return {\n    '--loops': `${props.loop === 0 ? 'infinite' : props.loop}`,\n    '--duration': `${props.duration}s`,\n    '--delay': `${props.delay}s`,\n    '--direction': `${props.direction}`,\n    '--pauseOnHover': `${props.pauseOnHover ? 'paused' : 'running'}`,\n    '--pauseOnClick': `${props.pauseOnClick ? 'paused' : 'running'}`,\n    '--pauseAnimation': `${(props.vertical && verticalAnimationPause.value) || props.pause ? 'paused' : 'running'}`,\n    '--gradient-color': `rgba(${props.gradientColor}, 1), rgba(${props.gradientColor}, 0)`,\n    '--gradient-length': `${gradientLength.value}`,\n    '--min-width': `${widthMin.value}`,\n    '--min-height': `${heightMin.value}`,\n    '--orientation': props.vertical ? 'scrollY' : 'scrollX'\n  }\n})\n\nconst setupMarquee = async () => {\n  if (props.vertical) {\n    heightMin.value = '100%'\n    widthMin.value = 'auto'\n  } else {\n    heightMin.value = 'auto'\n    widthMin.value = '100%'\n  }\n\n  if (props.gradient && props.gradientLength) {\n    gradientLength.value = props.gradientLength\n  }\n\n  if (props.clone) {\n    await checkForClone()\n    ready.value = true\n  } else {\n    ready.value = true\n  }\n}\n\nonMounted(async () => {\n  setupMarquee()\n\n  loopInterval.value = setInterval(() => {\n    loopCounter.value++\n\n    if (props.loop !== 0 && loopCounter.value === props.loop) {\n      emits('onComplete')\n      clearInterval(loopInterval.value)\n    }\n\n    emits('onLoopComplete')\n  }, props.duration * 1000)\n})\n\nonBeforeUnmount(() => {\n  clearInterval(loopInterval.value)\n  \n  if (resizeObserver.value) {\n    resizeObserver.value.disconnect()\n    resizeObserver.value = null\n  }\n  \n  if (checkInterval.value) {\n    clearInterval(checkInterval.value)\n    checkInterval.value = null\n  }\n  \n  if (resizeTimeout.value) {\n    clearTimeout(resizeTimeout.value)\n    resizeTimeout.value = null\n  }\n})\n\n// Removed inefficient watchers - ResizeObserver handles this now\n\nwatch(\n  () => props.pause,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      if (newVal) {\n        emits('onResume')\n      } else {\n        emits('onPause')\n      }\n    }\n  }\n)\n</script>\n\n<style lang=\"scss\">\n.vue3-marquee {\n  display: flex !important;\n  position: relative;\n\n  .marquee {\n    flex: 0 0 auto;\n    min-width: var(--min-width);\n    min-height: var(--min-height);\n    z-index: 1;\n    will-change: transform;\n    transform: translateZ(0);\n    backface-visibility: hidden;\n\n    animation: var(--orientation) var(--duration) linear var(--delay) var(--loops);\n    animation-play-state: var(--pauseAnimation);\n    animation-direction: var(--direction);\n    contain: layout style paint;\n  }\n\n  .overlay {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n\n    &:before {\n      left: 0;\n      top: 0;\n    }\n\n    &:before, &:after {\n      content: '';\n      position: absolute;\n      z-index: 2;\n    }\n  }\n\n  .transparent-overlay {\n    position: absolute;\n    width: 100.5%;\n    height: 100.5%;\n  }\n\n\n  &.horizontal {\n    overflow-x: hidden !important;\n    overflow-y: hidden !important;\n    flex-direction: row !important;\n    width: 100%;\n    height: max-content;\n\n    .marquee {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    .overlay::before,.overlay::after {\n      background: linear-gradient(to right, var(--gradient-color));\n      height: 100%;\n      width: var(--gradient-length);\n    }\n\n    .overlay::after {\n      transform: rotateZ(180deg);\n      right: 0;\n      top: 0;\n    }\n  }\n\n  &.vertical {\n    overflow-y: hidden !important;\n    overflow-x: hidden !important;\n    flex-direction: column !important;\n    height: 100%;\n    width: max-content;\n\n    .marquee {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .overlay::before, .overlay::after {\n      background: linear-gradient(to bottom, var(--gradient-color));\n      height: var(--gradient-length);\n      width: 100%;\n    }\n\n    .overlay::after {\n      transform: rotateZ(-180deg);\n      left: 0;\n      bottom: 0;\n    }\n  }\n\n  &:hover {\n    div {\n      animation-play-state: var(--pauseOnHover);\n    }\n  }\n\n  &:active {\n    div {\n      animation-play-state: var(--pauseOnClick);\n    } \n  }\n}\n\n@keyframes scrollX {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  100% {\n    transform: translate3d(-100%, 0, 0);\n  }\n}\n\n@keyframes scrollY {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n</style>"],"names":[],"mappings":"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"}
+{"version":3,"file":"Marquee.vue.js","sources":["../../../../../src/components/Marquee/Marquee.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"ready\"\n    class=\"vue3-marquee\"\n    :class=\"{ vertical: vertical, horizontal: !vertical }\"\n    :style=\"getCurrentStyle\"\n    @mouseenter=\"hoverStarted\"\n    @mouseleave=\"hoverEnded\"\n    @mousedown=\"mouseDown\"\n    @mouseup=\"mouseUp\"\n  >\n    <div\n      class=\"transparent-overlay\"\n      ref=\"marqueeOverlayContainer\"\n      :aria-hidden=\"true\"\n      :class=\"{ vertical: vertical, horizontal: !vertical, overlay: gradient }\"\n    />\n\n    <div \n      class=\"marquee\"\n      ref=\"marqueeContent\">\n      <slot></slot>\n    </div>\n\n    <div \n      class=\"marquee\" \n      :aria-hidden=\"true\"\n    >\n      <slot></slot>\n    </div>\n\n    <div\n      v-for=\"num in cloneAmount\"\n      :key=\"num\"\n      :aria-hidden=\"true\"\n      class=\"marquee cloned\"\n    >\n      <slot></slot>\n    </div\n    >\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'\n\nconst props = defineProps({\n  vertical: { type: Boolean, default: false },\n  direction: { type: String, default: 'normal' },\n  duration: { type: Number, default: 20 },\n  delay: { type: Number, default: 0 },\n  loop: { type: Number, default: 0 },\n  clone: { type: Boolean, default: false },\n  gradient: { type: Boolean, default: false },\n  gradientColor: { type: [Array,String], default: () => [255, 255, 255] },\n  gradientLength: { type: String },\n  pauseOnHover: { type: Boolean, default: false },\n  pauseOnClick: { type: Boolean, default: false },\n  pause: { type: Boolean, default: false }\n})\n\nconst emits = defineEmits(['onComplete', 'onLoopComplete', 'onPause', 'onResume'])\n\nconst ready = ref(false)\n\nconst cloneAmount = ref(0)\nconst loopCounter = ref(0)\nconst loopInterval = ref(null)\nconst resizeObserver = ref(null)\nconst checkInterval = ref(null)\nconst resizeTimeout = ref(null)\nconst previousSize = ref({ width: 0, height: 0 })\n\nconst widthMin = ref('100%')\nconst widthContainer = ref(0)\nconst widthContent = ref(0)\nconst heightMin = ref('100%')\nconst heightContainer = ref(0)\nconst heightContent = ref(0)\n\nconst gradientLength = ref('200px')\n\nconst verticalAnimationPause = ref(false)\nconst marqueeContent = ref(null)\nconst marqueeOverlayContainer = ref(null)\n\n// Removed ForcesUpdate - no longer needed\n\nconst checkForClone = async () => {\n  if (props.vertical) {\n    verticalAnimationPause.value = true\n  }\n\n  await nextTick()\n  \n  const calculateClones = () => {\n    widthMin.value = '0%'\n    heightMin.value = '0%'\n\n    if (marqueeContent.value !== null && marqueeOverlayContainer.value !== null) {\n      if (marqueeContent.value && marqueeOverlayContainer.value) {\n        if (\n          props.vertical &&\n          'clientHeight' in marqueeContent.value &&\n          'clientHeight' in marqueeOverlayContainer.value\n        ) {\n          heightContent.value = marqueeContent.value.clientHeight\n          heightContainer.value = marqueeOverlayContainer.value.clientHeight\n\n          const localCloneAmount = Math.ceil(heightContainer.value / heightContent.value)\n\n          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0\n\n          verticalAnimationPause.value = false\n\n          return cloneAmount.value\n        } else if (\n          !props.vertical &&\n          'clientWidth' in marqueeContent.value &&\n          'clientWidth' in marqueeOverlayContainer.value\n        ) {\n          widthContent.value = marqueeContent.value.clientWidth\n          widthContainer.value = marqueeOverlayContainer.value.clientWidth\n\n          const localCloneAmount = Math.ceil(widthContainer.value / widthContent.value)\n\n          cloneAmount.value = isFinite(localCloneAmount) ? localCloneAmount : 0\n\n          return cloneAmount.value\n        } else {\n          widthMin.value = '100%'\n          heightMin.value = '100%'\n          return 0\n        }\n      } else {\n        widthMin.value = '100%'\n        heightMin.value = '100%'\n        return 0\n      }\n    } else {\n      widthMin.value = '100%'\n      heightMin.value = '100%'\n      return 0\n    }\n  }\n  \n  // Run once immediately\n  calculateClones()\n  \n  // Setup ResizeObserver for efficient resize detection\n  if (typeof ResizeObserver !== 'undefined' && marqueeOverlayContainer.value) {\n    if (resizeObserver.value) {\n      resizeObserver.value.disconnect()\n    }\n    \n    resizeObserver.value = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      const newWidth = entry.contentRect.width\n      const newHeight = entry.contentRect.height\n      \n      // Only recalculate if size changed significantly (more than 1px)\n      const widthChanged = Math.abs(newWidth - previousSize.value.width) > 1\n      const heightChanged = Math.abs(newHeight - previousSize.value.height) > 1\n      \n      if (widthChanged || heightChanged) {\n        previousSize.value = { width: newWidth, height: newHeight }\n        clearTimeout(resizeTimeout.value)\n        resizeTimeout.value = setTimeout(() => {\n          calculateClones()\n        }, 300)\n      }\n    })\n    \n    resizeObserver.value.observe(marqueeOverlayContainer.value)\n  } else {\n    // Fallback for browsers without ResizeObserver\n    // Only check once after a delay for initial setup\n    if (checkInterval.value) {\n      clearInterval(checkInterval.value)\n    }\n    \n    checkInterval.value = setTimeout(() => {\n      calculateClones()\n      checkInterval.value = null\n    }, 500)\n  }\n}\n\nconst hoverStarted = () => { if (props.pauseOnHover) emits('onPause') }\nconst hoverEnded = () => { if (props.pauseOnHover) emits('onResume') }\nconst mouseDown = () => { if (props.pauseOnClick) emits('onPause') }\nconst mouseUp = () => { if (props.pauseOnClick) emits('onResume') }\n\nconst getCurrentStyle = computed(() => {\n  return {\n    '--loops': `${props.loop === 0 ? 'infinite' : props.loop}`,\n    '--duration': `${props.duration}s`,\n    '--delay': `${props.delay}s`,\n    '--direction': `${props.direction}`,\n    '--pauseOnHover': `${props.pauseOnHover ? 'paused' : 'running'}`,\n    '--pauseOnClick': `${props.pauseOnClick ? 'paused' : 'running'}`,\n    '--pauseAnimation': `${(props.vertical && verticalAnimationPause.value) || props.pause ? 'paused' : 'running'}`,\n    '--gradient-color': props.gradientColor,\n    '--gradient-length': `${gradientLength.value}`,\n    '--min-width': `${widthMin.value}`,\n    '--min-height': `${heightMin.value}`,\n    '--orientation': props.vertical ? 'scrollY' : 'scrollX'\n  }\n})\n\nconst setupMarquee = async () => {\n  if (props.vertical) {\n    heightMin.value = '100%'\n    widthMin.value = 'auto'\n  } else {\n    heightMin.value = 'auto'\n    widthMin.value = '100%'\n  }\n\n  if (props.gradient && props.gradientLength) {\n    gradientLength.value = props.gradientLength\n  }\n\n  if (props.clone) {\n    await checkForClone()\n    ready.value = true\n  } else {\n    ready.value = true\n  }\n}\n\nonMounted(async () => {\n  setupMarquee()\n\n  loopInterval.value = setInterval(() => {\n    loopCounter.value++\n\n    if (props.loop !== 0 && loopCounter.value === props.loop) {\n      emits('onComplete')\n      clearInterval(loopInterval.value)\n    }\n\n    emits('onLoopComplete')\n  }, props.duration * 1000)\n})\n\nonBeforeUnmount(() => {\n  clearInterval(loopInterval.value)\n  \n  if (resizeObserver.value) {\n    resizeObserver.value.disconnect()\n    resizeObserver.value = null\n  }\n  \n  if (checkInterval.value) {\n    clearInterval(checkInterval.value)\n    checkInterval.value = null\n  }\n  \n  if (resizeTimeout.value) {\n    clearTimeout(resizeTimeout.value)\n    resizeTimeout.value = null\n  }\n})\n\n// Removed inefficient watchers - ResizeObserver handles this now\n\nwatch(\n  () => props.pause,\n  (newVal, oldVal) => {\n    if (newVal !== oldVal) {\n      if (newVal) {\n        emits('onPause')\n      } else {\n        emits('onResume')\n      }\n    }\n  }\n)\n</script>\n\n<style lang=\"scss\">\n.vue3-marquee {\n  display: flex !important;\n  position: relative;\n  will-change: transform;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n\n  .marquee {\n    flex: 0 0 auto;\n    min-width: var(--min-width);\n    min-height: var(--min-height);\n    z-index: 1;\n\n    animation: var(--orientation) var(--duration) linear var(--delay) var(--loops);\n    animation-play-state: var(--pauseAnimation);\n    animation-direction: var(--direction);\n  }\n\n  .overlay {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n\n    &:before {\n      left: 0;\n      top: 0;\n    }\n\n    &:before, &:after {\n      content: '';\n      position: absolute;\n      z-index: 2;\n    }\n  }\n\n  .transparent-overlay {\n    position: absolute;\n    width: 100.5%;\n    height: 100.5%;\n  }\n\n\n  &.horizontal {\n    overflow-x: hidden !important;\n    overflow-y: hidden !important;\n    flex-direction: row !important;\n    width: 100%;\n    height: max-content;\n\n    .marquee {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n    }\n\n    .overlay::before,.overlay::after {\n      background: linear-gradient(to right, var(--gradient-color), transparent);\n      height: 100%;\n      width: var(--gradient-length);\n    }\n\n    .overlay::after {\n      transform: rotateZ(180deg);\n      right: 0;\n      top: 0;\n    }\n  }\n\n  &.vertical {\n    overflow-y: hidden !important;\n    overflow-x: hidden !important;\n    flex-direction: column !important;\n    height: 100%;\n    width: max-content;\n\n    .marquee {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .overlay::before, .overlay::after {\n      background: linear-gradient(to bottom, var(--gradient-color), transparent);\n      height: var(--gradient-length);\n      width: 100%;\n    }\n\n    .overlay::after {\n      transform: rotateZ(-180deg);\n      left: 0;\n      bottom: 0;\n    }\n  }\n\n  &:hover {\n    div {\n      animation-play-state: var(--pauseOnHover);\n    }\n  }\n\n  &:active {\n    div {\n      animation-play-state: var(--pauseOnClick);\n    } \n  }\n}\n\n@keyframes scrollX {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  100% {\n    transform: translate3d(-100%, 0, 0);\n  }\n}\n\n@keyframes scrollY {\n  0% {\n    transform: translate3d(0, 0, 0);\n  }\n  100% {\n    transform: translate3d(0, -100%, 0);\n  }\n}\n</style>"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const mixins = require("../../modules/globals/views/mixins/mixins.cjs");
 ;/* empty css           */
 const _hoisted_1 = { class: "flex-nowrap flex-v-center flex pos-relative" };
 const _hoisted_2 = ["onClick"];
@@ -15,6 +16,7 @@ const _sfc_main = {
   },
   emits: ["update:selected", "tab-click"],
   setup(__props, { emit: __emit }) {
+    const { replaceClasses } = mixins.useGlobalMixins();
     const emit = __emit;
     const props = __props;
     const selectedTab = vue.ref(0);
@@ -59,7 +61,7 @@ const _sfc_main = {
             onClick: ($event) => handleTabClick(index, tab),
             class: vue.normalizeClass(["z-index-1 t-center cursor-pointer", [
               isSelected(index, tab) ? "bg-main" : "",
-              _ctx.replaceClasses("pd-small pd-r-medium pd-l-medium w-max pd-small radius-small", __props.classTab)
+              vue.unref(replaceClasses)("pd-small pd-r-medium pd-l-medium w-max pd-small radius-small", __props.classTab)
             ]]),
             style: vue.normalizeStyle(isSelected(index, tab) ? "background: rgb(var(--main)) !important" : "")
           }, vue.toDisplayString(tab.name || tab.label), 15, _hoisted_2);

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue.cjs","sources":["../../../../../src/components/Tab/Tab.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap flex-v-center flex pos-relative\">\n    <button  \n      v-for=\"(tab, index) in tabs\" \n      :key=\"index\" \n      @click=\"handleTabClick(index, tab)\" \n      class=\"z-index-1 t-center cursor-pointer\"\n      :style=\"isSelected(index, tab) ? 'background: rgb(var(--main)) !important' : ''\"\n      :class=\"[\n        isSelected(index, tab) ? 'bg-main' : '',\n        replaceClasses('pd-small pd-r-medium pd-l-medium w-max pd-small radius-small', classTab)\n      ]\"\n    >\n      {{tab.name || tab.label}}\n    </button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue'\n\nconst emit = defineEmits(['update:selected', 'tab-click']);\n\nconst props = defineProps({\n  tabs: Array,\n  classTab: String,\n  selected: [String, Number],\n  modelValue: [String, Number],\n  callback: Function\n})\n\nconst selectedTab = ref(0)\n\n// Handle both v-model and selected prop for backward compatibility\nconst updateSelectedIndex = () => {\n  if (props.modelValue !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.modelValue)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  } else if (props.selected !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.selected)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  }\n}\n\n// Initial setup\nupdateSelectedIndex()\n\n// Watch for changes in selected or modelValue props\nwatch(() => props.selected, updateSelectedIndex)\nwatch(() => props.modelValue, updateSelectedIndex)\n\n// Check if tab is selected\nconst isSelected = (index, tab) => {\n  if (props.modelValue !== undefined) {\n    return tab.value === props.modelValue\n  } else if (props.selected !== undefined) {\n    return tab.value === props.selected\n  }\n  return index === selectedTab.value\n}\n\n// Handle tab click\nfunction handleTabClick(index, tab) {\n  selectedTab.value = index\n  \n  // Emit both events for flexibility\n  emit('update:selected', tab.value)\n  emit('tab-click', { index, tab })\n  \n  // For v-model support\n  if (props.modelValue !== undefined) {\n    emit('update:modelValue', tab.value)\n  }\n  \n  // Call callback if provided\n  if (props.callback) props.callback(tab)\n}\n</script>\n\n<style lang=\"scss\">\n.tab-selector {\n  position: absolute;\n  width: 50%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n</style>"],"names":["ref","watch"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,UAAM,OAAO;AAEb,UAAM,QAAQ;AAQd,UAAM,cAAcA,IAAAA,IAAI,CAAC;AAGzB,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,eAAe,QAAW;AAClC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,UAAU;AAChF,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF,WAAW,MAAM,aAAa,QAAW;AACvC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,QAAQ;AAC9E,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAGA,wBAAmB;AAGnBC,QAAAA,MAAM,MAAM,MAAM,UAAU,mBAAmB;AAC/CA,QAAAA,MAAM,MAAM,MAAM,YAAY,mBAAmB;AAGjD,UAAM,aAAa,CAAC,OAAO,QAAQ;AACjC,UAAI,MAAM,eAAe,QAAW;AAClC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B,WAAW,MAAM,aAAa,QAAW;AACvC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B;AACA,aAAO,UAAU,YAAY;AAAA,IAC/B;AAGA,aAAS,eAAe,OAAO,KAAK;AAClC,kBAAY,QAAQ;AAGpB,WAAK,mBAAmB,IAAI,KAAK;AACjC,WAAK,aAAa,EAAE,OAAO,IAAG,CAAE;AAGhC,UAAI,MAAM,eAAe,QAAW;AAClC,aAAK,qBAAqB,IAAI,KAAK;AAAA,MACrC;AAGA,UAAI,MAAM,SAAU,OAAM,SAAS,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.vue.cjs","sources":["../../../../../src/components/Tab/Tab.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap flex-v-center flex pos-relative\">\n    <button  \n      v-for=\"(tab, index) in tabs\" \n      :key=\"index\" \n      @click=\"handleTabClick(index, tab)\" \n      class=\"z-index-1 t-center cursor-pointer\"\n      :style=\"isSelected(index, tab) ? 'background: rgb(var(--main)) !important' : ''\"\n      :class=\"[\n        isSelected(index, tab) ? 'bg-main' : '',\n        replaceClasses('pd-small pd-r-medium pd-l-medium w-max pd-small radius-small', classTab)\n      ]\"\n    >\n      {{tab.name || tab.label}}\n    </button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue'\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\n\nconst { replaceClasses } = useGlobalMixins();\nconst emit = defineEmits(['update:selected', 'tab-click']);\n\nconst props = defineProps({\n  tabs: Array,\n  classTab: String,\n  selected: [String, Number],\n  modelValue: [String, Number],\n  callback: Function\n})\n\nconst selectedTab = ref(0)\n\n// Handle both v-model and selected prop for backward compatibility\nconst updateSelectedIndex = () => {\n  if (props.modelValue !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.modelValue)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  } else if (props.selected !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.selected)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  }\n}\n\n// Initial setup\nupdateSelectedIndex()\n\n// Watch for changes in selected or modelValue props\nwatch(() => props.selected, updateSelectedIndex)\nwatch(() => props.modelValue, updateSelectedIndex)\n\n// Check if tab is selected\nconst isSelected = (index, tab) => {\n  if (props.modelValue !== undefined) {\n    return tab.value === props.modelValue\n  } else if (props.selected !== undefined) {\n    return tab.value === props.selected\n  }\n  return index === selectedTab.value\n}\n\n// Handle tab click\nfunction handleTabClick(index, tab) {\n  selectedTab.value = index\n  \n  // Emit both events for flexibility\n  emit('update:selected', tab.value)\n  emit('tab-click', { index, tab })\n  \n  // For v-model support\n  if (props.modelValue !== undefined) {\n    emit('update:modelValue', tab.value)\n  }\n  \n  // Call callback if provided\n  if (props.callback) props.callback(tab)\n}\n</script>\n\n<style lang=\"scss\">\n.tab-selector {\n  position: absolute;\n  width: 50%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n</style>"],"names":["useGlobalMixins","ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,UAAM,EAAE,eAAc,IAAKA,uBAAe;AAC1C,UAAM,OAAO;AAEb,UAAM,QAAQ;AAQd,UAAM,cAAcC,IAAAA,IAAI,CAAC;AAGzB,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,eAAe,QAAW;AAClC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,UAAU;AAChF,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF,WAAW,MAAM,aAAa,QAAW;AACvC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,QAAQ;AAC9E,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAGA,wBAAmB;AAGnBC,QAAAA,MAAM,MAAM,MAAM,UAAU,mBAAmB;AAC/CA,QAAAA,MAAM,MAAM,MAAM,YAAY,mBAAmB;AAGjD,UAAM,aAAa,CAAC,OAAO,QAAQ;AACjC,UAAI,MAAM,eAAe,QAAW;AAClC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B,WAAW,MAAM,aAAa,QAAW;AACvC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B;AACA,aAAO,UAAU,YAAY;AAAA,IAC/B;AAGA,aAAS,eAAe,OAAO,KAAK;AAClC,kBAAY,QAAQ;AAGpB,WAAK,mBAAmB,IAAI,KAAK;AACjC,WAAK,aAAa,EAAE,OAAO,IAAG,CAAE;AAGhC,UAAI,MAAM,eAAe,QAAW;AAClC,aAAK,qBAAqB,IAAI,KAAK;AAAA,MACrC;AAGA,UAAI,MAAM,SAAU,OAAM,SAAS,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,4 +1,5 @@
-import { ref, watch, createElementBlock, openBlock, Fragment, renderList, normalizeStyle, normalizeClass, toDisplayString } from "vue";
+import { ref, watch, createElementBlock, openBlock, Fragment, renderList, normalizeStyle, normalizeClass, unref, toDisplayString } from "vue";
+import { useGlobalMixins } from "../../modules/globals/views/mixins/mixins.js";
 /* empty css         */
 const _hoisted_1 = { class: "flex-nowrap flex-v-center flex pos-relative" };
 const _hoisted_2 = ["onClick"];
@@ -13,6 +14,7 @@ const _sfc_main = {
   },
   emits: ["update:selected", "tab-click"],
   setup(__props, { emit: __emit }) {
+    const { replaceClasses } = useGlobalMixins();
     const emit = __emit;
     const props = __props;
     const selectedTab = ref(0);
@@ -57,7 +59,7 @@ const _sfc_main = {
             onClick: ($event) => handleTabClick(index, tab),
             class: normalizeClass(["z-index-1 t-center cursor-pointer", [
               isSelected(index, tab) ? "bg-main" : "",
-              _ctx.replaceClasses("pd-small pd-r-medium pd-l-medium w-max pd-small radius-small", __props.classTab)
+              unref(replaceClasses)("pd-small pd-r-medium pd-l-medium w-max pd-small radius-small", __props.classTab)
             ]]),
             style: normalizeStyle(isSelected(index, tab) ? "background: rgb(var(--main)) !important" : "")
           }, toDisplayString(tab.name || tab.label), 15, _hoisted_2);

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue.js","sources":["../../../../../src/components/Tab/Tab.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap flex-v-center flex pos-relative\">\n    <button  \n      v-for=\"(tab, index) in tabs\" \n      :key=\"index\" \n      @click=\"handleTabClick(index, tab)\" \n      class=\"z-index-1 t-center cursor-pointer\"\n      :style=\"isSelected(index, tab) ? 'background: rgb(var(--main)) !important' : ''\"\n      :class=\"[\n        isSelected(index, tab) ? 'bg-main' : '',\n        replaceClasses('pd-small pd-r-medium pd-l-medium w-max pd-small radius-small', classTab)\n      ]\"\n    >\n      {{tab.name || tab.label}}\n    </button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue'\n\nconst emit = defineEmits(['update:selected', 'tab-click']);\n\nconst props = defineProps({\n  tabs: Array,\n  classTab: String,\n  selected: [String, Number],\n  modelValue: [String, Number],\n  callback: Function\n})\n\nconst selectedTab = ref(0)\n\n// Handle both v-model and selected prop for backward compatibility\nconst updateSelectedIndex = () => {\n  if (props.modelValue !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.modelValue)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  } else if (props.selected !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.selected)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  }\n}\n\n// Initial setup\nupdateSelectedIndex()\n\n// Watch for changes in selected or modelValue props\nwatch(() => props.selected, updateSelectedIndex)\nwatch(() => props.modelValue, updateSelectedIndex)\n\n// Check if tab is selected\nconst isSelected = (index, tab) => {\n  if (props.modelValue !== undefined) {\n    return tab.value === props.modelValue\n  } else if (props.selected !== undefined) {\n    return tab.value === props.selected\n  }\n  return index === selectedTab.value\n}\n\n// Handle tab click\nfunction handleTabClick(index, tab) {\n  selectedTab.value = index\n  \n  // Emit both events for flexibility\n  emit('update:selected', tab.value)\n  emit('tab-click', { index, tab })\n  \n  // For v-model support\n  if (props.modelValue !== undefined) {\n    emit('update:modelValue', tab.value)\n  }\n  \n  // Call callback if provided\n  if (props.callback) props.callback(tab)\n}\n</script>\n\n<style lang=\"scss\">\n.tab-selector {\n  position: absolute;\n  width: 50%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA,UAAM,OAAO;AAEb,UAAM,QAAQ;AAQd,UAAM,cAAc,IAAI,CAAC;AAGzB,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,eAAe,QAAW;AAClC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,UAAU;AAChF,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF,WAAW,MAAM,aAAa,QAAW;AACvC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,QAAQ;AAC9E,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAGA,wBAAmB;AAGnB,UAAM,MAAM,MAAM,UAAU,mBAAmB;AAC/C,UAAM,MAAM,MAAM,YAAY,mBAAmB;AAGjD,UAAM,aAAa,CAAC,OAAO,QAAQ;AACjC,UAAI,MAAM,eAAe,QAAW;AAClC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B,WAAW,MAAM,aAAa,QAAW;AACvC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B;AACA,aAAO,UAAU,YAAY;AAAA,IAC/B;AAGA,aAAS,eAAe,OAAO,KAAK;AAClC,kBAAY,QAAQ;AAGpB,WAAK,mBAAmB,IAAI,KAAK;AACjC,WAAK,aAAa,EAAE,OAAO,IAAG,CAAE;AAGhC,UAAI,MAAM,eAAe,QAAW;AAClC,aAAK,qBAAqB,IAAI,KAAK;AAAA,MACrC;AAGA,UAAI,MAAM,SAAU,OAAM,SAAS,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Tab.vue.js","sources":["../../../../../src/components/Tab/Tab.vue"],"sourcesContent":["<template>\n  <div class=\"flex-nowrap flex-v-center flex pos-relative\">\n    <button  \n      v-for=\"(tab, index) in tabs\" \n      :key=\"index\" \n      @click=\"handleTabClick(index, tab)\" \n      class=\"z-index-1 t-center cursor-pointer\"\n      :style=\"isSelected(index, tab) ? 'background: rgb(var(--main)) !important' : ''\"\n      :class=\"[\n        isSelected(index, tab) ? 'bg-main' : '',\n        replaceClasses('pd-small pd-r-medium pd-l-medium w-max pd-small radius-small', classTab)\n      ]\"\n    >\n      {{tab.name || tab.label}}\n    </button>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue'\nimport { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';\n\nconst { replaceClasses } = useGlobalMixins();\nconst emit = defineEmits(['update:selected', 'tab-click']);\n\nconst props = defineProps({\n  tabs: Array,\n  classTab: String,\n  selected: [String, Number],\n  modelValue: [String, Number],\n  callback: Function\n})\n\nconst selectedTab = ref(0)\n\n// Handle both v-model and selected prop for backward compatibility\nconst updateSelectedIndex = () => {\n  if (props.modelValue !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.modelValue)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  } else if (props.selected !== undefined) {\n    const selectedIndex = props.tabs.findIndex(tab => tab.value === props.selected)\n    if (selectedIndex !== -1) {\n      selectedTab.value = selectedIndex\n    }\n  }\n}\n\n// Initial setup\nupdateSelectedIndex()\n\n// Watch for changes in selected or modelValue props\nwatch(() => props.selected, updateSelectedIndex)\nwatch(() => props.modelValue, updateSelectedIndex)\n\n// Check if tab is selected\nconst isSelected = (index, tab) => {\n  if (props.modelValue !== undefined) {\n    return tab.value === props.modelValue\n  } else if (props.selected !== undefined) {\n    return tab.value === props.selected\n  }\n  return index === selectedTab.value\n}\n\n// Handle tab click\nfunction handleTabClick(index, tab) {\n  selectedTab.value = index\n  \n  // Emit both events for flexibility\n  emit('update:selected', tab.value)\n  emit('tab-click', { index, tab })\n  \n  // For v-model support\n  if (props.modelValue !== undefined) {\n    emit('update:modelValue', tab.value)\n  }\n  \n  // Call callback if provided\n  if (props.callback) props.callback(tab)\n}\n</script>\n\n<style lang=\"scss\">\n.tab-selector {\n  position: absolute;\n  width: 50%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA,UAAM,EAAE,eAAc,IAAK,gBAAe;AAC1C,UAAM,OAAO;AAEb,UAAM,QAAQ;AAQd,UAAM,cAAc,IAAI,CAAC;AAGzB,UAAM,sBAAsB,MAAM;AAChC,UAAI,MAAM,eAAe,QAAW;AAClC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,UAAU;AAChF,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF,WAAW,MAAM,aAAa,QAAW;AACvC,cAAM,gBAAgB,MAAM,KAAK,UAAU,SAAO,IAAI,UAAU,MAAM,QAAQ;AAC9E,YAAI,kBAAkB,IAAI;AACxB,sBAAY,QAAQ;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAGA,wBAAmB;AAGnB,UAAM,MAAM,MAAM,UAAU,mBAAmB;AAC/C,UAAM,MAAM,MAAM,YAAY,mBAAmB;AAGjD,UAAM,aAAa,CAAC,OAAO,QAAQ;AACjC,UAAI,MAAM,eAAe,QAAW;AAClC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B,WAAW,MAAM,aAAa,QAAW;AACvC,eAAO,IAAI,UAAU,MAAM;AAAA,MAC7B;AACA,aAAO,UAAU,YAAY;AAAA,IAC/B;AAGA,aAAS,eAAe,OAAO,KAAK;AAClC,kBAAY,QAAQ;AAGpB,WAAK,mBAAmB,IAAI,KAAK;AACjC,WAAK,aAAa,EAAE,OAAO,IAAG,CAAE;AAGhC,UAAI,MAAM,eAAe,QAAW;AAClC,aAAK,qBAAqB,IAAI,KAAK;AAAA,MACrC;AAGA,UAAI,MAAM,SAAU,OAAM,SAAS,GAAG;AAAA,IACxC;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/components/UploadImage/UploadImage.vue2.cjs

@@ -0,0 +1,219 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const axios = require("axios");
+const Loader = require("../Loader/Loader.vue2.cjs");
+const IconUpload = ;/* empty css                                              */
+const IconDelete = require("../../modules/icons/navigation/IconDelete.vue.cjs");
+;/* empty css                  */
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = ["src"];
+const _hoisted_2 = {
+  key: 1,
+  class: "flex-v-center pos-relative z-index-2 flex-h-center flex w-100 h-100 radius-small bg-second"
+};
+const _hoisted_3 = { class: "z-index-2 pos-relative hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex" };
+const _hoisted_4 = {
+  key: 0,
+  class: "hover-upload-icon"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "hover-buttons flex gap-small"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "upload-text-block flex flex-column"
+};
+const _hoisted_8 = { class: "mn-b-small t-medium" };
+const _hoisted_9 = { class: "mn-b-medium t-transp" };
+const _hoisted_10 = { key: 0 };
+const _hoisted_11 = {
+  key: 1,
+  class: "flex gap-thin"
+};
+const _sfc_main = {
+  __name: "UploadImage",
+  props: {
+    uploadPath: {
+      type: String,
+      required: true
+    },
+    photo: {
+      type: String,
+      default: null
+    },
+    text: {
+      type: [Object, Boolean],
+      default: null
+    }
+  },
+  emits: ["update:photo", "error"],
+  setup(__props, { emit: __emit }) {
+    const imageUrl = vue.ref(null);
+    const fileInput = vue.ref(null);
+    const previewUrl = vue.ref(null);
+    const loading = vue.ref(false);
+    const props = __props;
+    const emit = __emit;
+    const textConfig = vue.computed(() => {
+      const defaults = {
+        title: "Upload Image",
+        subtitle: "Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB",
+        buttonText: "Choose Image"
+      };
+      if (props.text === true) {
+        return defaults;
+      } else if (typeof props.text === "object" && props.text !== null) {
+        return {
+          title: props.text.title || defaults.title,
+          subtitle: props.text.subtitle || defaults.subtitle,
+          buttonText: props.text.buttonText || defaults.buttonText
+        };
+      }
+      return defaults;
+    });
+    vue.watch(props, ({ photo }) => {
+      if (photo) imageUrl.value = photo;
+    });
+    function onComponentClick() {
+      fileInput.value.click();
+    }
+    async function onFileChange(e) {
+      let file = e.target.files[0];
+      if (!file) {
+        console.error("No file selected");
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e2) => {
+        previewUrl.value = e2.target.result;
+      };
+      reader.readAsDataURL(file);
+      let formData = new FormData();
+      formData.append("file", file);
+      console.log("Sending file:", file.name);
+      loading.value = true;
+      try {
+        const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true });
+        let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);
+        console.log("Upload response:", response);
+        imageUrl.value = response.data[0].filepath;
+        previewUrl.value = null;
+        emit("update:photo", imageUrl.value);
+      } catch (error) {
+        emit("error", error);
+        console.error("Upload error:", error);
+        previewUrl.value = null;
+      } finally {
+        loading.value = false;
+      }
+    }
+    function onDrop(e) {
+      e.preventDefault();
+      onFileChange({
+        target: {
+          files: e.dataTransfer.files
+        }
+      });
+    }
+    function deleteImage() {
+      imageUrl.value = null;
+      previewUrl.value = null;
+      emit("update:photo", null);
+      if (fileInput.value) {
+        fileInput.value.value = "";
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["upload-image-wrapper flex-v-center flex-nowrap flex gap-small", { "with-text": __props.text }])
+      }, [
+        vue.createElementVNode("div", {
+          onClick: onComponentClick,
+          onDrop,
+          onDragover: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+          }, ["prevent"])),
+          class: "pos-relative radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer"
+        }, [
+          imageUrl.value || __props.photo || previewUrl.value ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            loading: "lazy",
+            src: previewUrl.value || (_ctx.FILE_SERVER_URL || "") + (imageUrl.value || __props.photo),
+            alt: "Uploaded image",
+            class: "pos-absolute radius-small o-hidden z-index-1 w-100 h-100 object-fit-cover"
+          }, null, 8, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+            vue.createVNode(IconUpload.default, {
+              class: "i-medium upload-icon",
+              fill: "rgb(var(--white))"
+            })
+          ])),
+          vue.createElementVNode("div", _hoisted_3, [
+            !imageUrl.value && !__props.photo && !previewUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              vue.createVNode(IconUpload.default, {
+                class: "i-medium",
+                fill: "rgb(var(--white))"
+              })
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+              vue.createElementVNode("button", {
+                onClick: vue.withModifiers(onComponentClick, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer"
+              }, [
+                vue.createVNode(IconUpload.default, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ]),
+              vue.createElementVNode("button", {
+                onClick: vue.withModifiers(deleteImage, ["stop"]),
+                class: "hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer"
+              }, [
+                vue.createVNode(IconDelete.default, {
+                  class: "i-semi",
+                  fill: "rgb(var(--white))"
+                })
+              ])
+            ]))
+          ]),
+          loading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.createVNode(Loader.default, { centered: false })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("input", {
+            type: "file",
+            name: "file",
+            ref_key: "fileInput",
+            ref: fileInput,
+            onChange: onFileChange,
+            style: { "display": "none" }
+          }, null, 544)
+        ], 32),
+        __props.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+          vue.createElementVNode("span", _hoisted_8, vue.toDisplayString(textConfig.value.title), 1),
+          vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(textConfig.value.subtitle), 1),
+          !imageUrl.value && !__props.photo && !previewUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+            vue.createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-main t-black cursor-pointer"
+            }, vue.toDisplayString(textConfig.value.buttonText), 1)
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
+            vue.createElementVNode("button", {
+              onClick: onComponentClick,
+              class: "button button-small w-max bg-second t-white cursor-pointer"
+            }, " Upload "),
+            vue.createElementVNode("button", {
+              onClick: deleteImage,
+              class: "button button-small w-max bg-red t-white cursor-pointer"
+            }, " Delete ")
+          ]))
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+};
+const UploadImage = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-26da6988"]]);
+exports.default = UploadImage;
+//# sourceMappingURL=UploadImage.vue2.cjs.map

package/dist/martyrs/src/components/UploadImage/UploadImage.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadImage.vue2.cjs","sources":["../../../../../src/components/UploadImage/UploadImage.vue"],"sourcesContent":["<template>\n  <div class=\"upload-image-wrapper flex-v-center flex-nowrap flex gap-small\" :class=\"{'with-text': text}\">\n    <div \n      @click=\"onComponentClick\"\n      @drop=\"onDrop\"\n      @dragover.prevent\n      class=\"pos-relative radius-small br-solid br-1px br-black-transp-10 h-100 aspect-1x1 flex-v-center flex-h-center flex cursor-pointer\"\n    >\n      <img loading=\"lazy\" \n        v-if=\"imageUrl || photo || previewUrl\" \n        :src=\"previewUrl || (FILE_SERVER_URL || '') + (imageUrl || photo)\"\n        alt=\"Uploaded image\" \n        class=\"pos-absolute  radius-small o-hidden z-index-1 w-100 h-100 object-fit-cover\"\n      />\n      \n      <div v-else class=\"flex-v-center pos-relative z-index-2 flex-h-center flex w-100 h-100 radius-small  bg-second\" >\n        <IconUpload class=\"i-medium upload-icon\" fill=\"rgb(var(--white))\" />\n      </div>\n      \n      <!-- Hover controls -->\n      <div class=\"z-index-2 pos-relative  hover-controls pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <div v-if=\"!imageUrl && !photo && !previewUrl\" class=\"hover-upload-icon\">\n          <IconUpload class=\"i-medium\" fill=\"rgb(var(--white))\" />\n        </div>\n        <div v-else class=\"hover-buttons flex gap-small\">\n          <button @click.stop=\"onComponentClick\" class=\"hover-button radius-small pd-thin bg-main t-white br-none cursor-pointer\">\n            <IconUpload class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n          <button @click.stop=\"deleteImage\" class=\"hover-button radius-small pd-thin bg-danger t-white br-none cursor-pointer\">\n            <IconDelete class=\"i-semi\" fill=\"rgb(var(--white))\" />\n          </button>\n        </div>\n      </div>\n      \n      <!-- Loading overlay -->\n      <div v-if=\"loading\" class=\"z-index-2 loading-overlay pos-absolute w-100 h-100 flex-v-center flex-h-center flex\">\n        <Loader :centered=\"false\" />\n      </div>\n      \n      <input type=\"file\" name=\"file\" ref=\"fileInput\" @change=\"onFileChange\" style=\"display: none\"/>\n    </div>\n    \n    <!-- Text block -->\n    <div v-if=\"text\" class=\"upload-text-block  flex flex-column\">\n      <span class=\"mn-b-small t-medium\">{{ textConfig.title }}</span>\n      <span class=\"mn-b-medium t-transp\">{{ textConfig.subtitle }}</span>\n      <div v-if=\"!imageUrl && !photo && !previewUrl\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-main t-black cursor-pointer\">\n          {{ textConfig.buttonText }}\n        </button>\n      </div>\n      <div v-else class=\"flex gap-thin\">\n        <button @click=\"onComponentClick\" class=\"button button-small w-max bg-second t-white cursor-pointer\">\n          Upload \n        </button>\n        <button @click=\"deleteImage\" class=\"button button-small w-max bg-red t-white cursor-pointer\">\n          Delete\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch, computed } from 'vue';\nimport axios from 'axios';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport IconUpload from '@martyrs/src/modules/icons/navigation/IconUpload.vue';\nimport IconDelete from '@martyrs/src/modules/icons/navigation/IconDelete.vue';\n\nconst imageUrl = ref(null);\nconst fileInput = ref(null);\nconst previewUrl = ref(null);\nconst loading = ref(false);\n\nconst props = defineProps({\n  uploadPath: {\n    type: String,\n    required: true\n  },\n  photo: {\n    type: String,\n    default: null\n  },\n  text: {\n    type: [Object, Boolean],\n    default: null\n  }\n});\n\nconst emit = defineEmits(['update:photo', 'error']);\n\n// Text configuration with defaults\nconst textConfig = computed(() => {\n  const defaults = {\n    title: 'Upload Image',\n    subtitle: 'Drag & drop your image here or click button. Supported: JPG, PNG, GIF. Max size: 2MB',\n    buttonText: 'Choose Image'\n  };\n  \n  if (props.text === true) {\n    return defaults;\n  } else if (typeof props.text === 'object' && props.text !== null) {\n    return {\n      title: props.text.title || defaults.title,\n      subtitle: props.text.subtitle || defaults.subtitle,\n      buttonText: props.text.buttonText || defaults.buttonText\n    };\n  }\n  \n  return defaults;\n});\n\nwatch(props, ({photo}) => {\n  if(photo) imageUrl.value = photo;\n});\n\nfunction onComponentClick() {\n  fileInput.value.click();\n}\n\nasync function onFileChange(e) {\n  let file = e.target.files[0];\n  if (!file) {\n    console.error(\"No file selected\");\n    return;\n  }\n  \n  // Create preview from file\n  const reader = new FileReader();\n  reader.onload = (e) => {\n    previewUrl.value = e.target.result;\n  };\n  reader.readAsDataURL(file);\n  \n  let formData = new FormData();\n  formData.append(\"file\", file);\n\n  console.log(\"Sending file:\", file.name); // Логируем имя файла перед отправкой\n  \n  loading.value = true;\n\n  try {\n    const $axios = axios.create({ baseURL: process.env.API_URL, withCredentials: true }); \n\n    let response = await $axios.post(`/api/upload/multiple?folderName=${encodeURIComponent(props.uploadPath)}`, formData);\n    console.log(\"Upload response:\", response); // Логируем ответ сервера\n    imageUrl.value = response.data[0].filepath;\n    previewUrl.value = null; // Clear preview after successful upload\n    emit('update:photo', imageUrl.value);\n  } catch (error) {\n    emit('error', error);\n    console.error(\"Upload error:\", error); // Логируем ошибку\n    previewUrl.value = null; // Clear preview on error\n  } finally {\n    loading.value = false;\n  }\n}\n\n\nfunction onDrop(e) {\n  e.preventDefault();\n  onFileChange({\n    target: {\n      files: e.dataTransfer.files\n    }\n  });\n}\n\nfunction deleteImage() {\n  imageUrl.value = null;\n  previewUrl.value = null;\n  emit('update:photo', null);\n  // Reset file input\n  if (fileInput.value) {\n    fileInput.value.value = '';\n  }\n}\n</script>\n\n<style scoped>\n.image-upload-area {\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.image-upload-area:hover {\n  opacity: 0.95;\n}\n\n/* Hover controls */\n.hover-controls {\n  top: 0;\n  left: 0;\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n\n.image-upload-area:hover .hover-controls {\n  opacity: 1;\n  pointer-events: all;\n}\n\n.hover-upload-icon {\n  animation: pulse 1.5s infinite;\n}\n\n.hover-button {\n  transition: transform 0.2s ease, background-color 0.2s ease;\n}\n\n.hover-button:hover {\n  transform: scale(1.1);\n}\n\n.hover-button:active {\n  transform: scale(0.95);\n}\n\n/* Loading overlay */\n.loading-overlay {\n  top: 0;\n  left: 0;\n  background: rgba(255, 255, 255, 0.9);\n  z-index: 10;\n}\n\n/* Animations */\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Upload icon in empty state */\n.upload-icon {\n  transition: transform 0.3s ease;\n}\n\n.image-upload-area:hover .upload-icon {\n  transform: scale(1.1);\n}\n</style>\n"],"names":["ref","computed","watch","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,UAAM,WAAWA,IAAAA,IAAI,IAAI;AACzB,UAAM,YAAYA,IAAAA,IAAI,IAAI;AAC1B,UAAM,aAAaA,IAAAA,IAAI,IAAI;AAC3B,UAAM,UAAUA,IAAAA,IAAI,KAAK;AAEzB,UAAM,QAAQ;AAed,UAAM,OAAO;AAGb,UAAM,aAAaC,IAAAA,SAAS,MAAM;AAChC,YAAM,WAAW;AAAA,QACf,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,MAChB;AAEE,UAAI,MAAM,SAAS,MAAM;AACvB,eAAO;AAAA,MACT,WAAW,OAAO,MAAM,SAAS,YAAY,MAAM,SAAS,MAAM;AAChE,eAAO;AAAA,UACL,OAAO,MAAM,KAAK,SAAS,SAAS;AAAA,UACpC,UAAU,MAAM,KAAK,YAAY,SAAS;AAAA,UAC1C,YAAY,MAAM,KAAK,cAAc,SAAS;AAAA,QACpD;AAAA,MACE;AAEA,aAAO;AAAA,IACT,CAAC;AAEDC,QAAAA,MAAM,OAAO,CAAC,EAAC,MAAK,MAAM;AACxB,UAAG,MAAO,UAAS,QAAQ;AAAA,IAC7B,CAAC;AAED,aAAS,mBAAmB;AAC1B,gBAAU,MAAM,MAAK;AAAA,IACvB;AAEA,mBAAe,aAAa,GAAG;AAC7B,UAAI,OAAO,EAAE,OAAO,MAAM,CAAC;AAC3B,UAAI,CAAC,MAAM;AACT,gBAAQ,MAAM,kBAAkB;AAChC;AAAA,MACF;AAGA,YAAM,SAAS,IAAI,WAAU;AAC7B,aAAO,SAAS,CAACC,OAAM;AACrB,mBAAW,QAAQA,GAAE,OAAO;AAAA,MAC9B;AACA,aAAO,cAAc,IAAI;AAEzB,UAAI,WAAW,IAAI,SAAQ;AAC3B,eAAS,OAAO,QAAQ,IAAI;AAE5B,cAAQ,IAAI,iBAAiB,KAAK,IAAI;AAEtC,cAAQ,QAAQ;AAEhB,UAAI;AACF,cAAM,SAAS,MAAM,OAAO,EAAE,SAAS,QAAQ,IAAI,SAAS,iBAAiB,KAAI,CAAE;AAEnF,YAAI,WAAW,MAAM,OAAO,KAAK,mCAAmC,mBAAmB,MAAM,UAAU,CAAC,IAAI,QAAQ;AACpH,gBAAQ,IAAI,oBAAoB,QAAQ;AACxC,iBAAS,QAAQ,SAAS,KAAK,CAAC,EAAE;AAClC,mBAAW,QAAQ;AACnB,aAAK,gBAAgB,SAAS,KAAK;AAAA,MACrC,SAAS,OAAO;AACd,aAAK,SAAS,KAAK;AACnB,gBAAQ,MAAM,iBAAiB,KAAK;AACpC,mBAAW,QAAQ;AAAA,MACrB,UAAC;AACC,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IACF;AAGA,aAAS,OAAO,GAAG;AACjB,QAAE,eAAc;AAChB,mBAAa;AAAA,QACX,QAAQ;AAAA,UACN,OAAO,EAAE,aAAa;AAAA,QAC5B;AAAA,MACA,CAAG;AAAA,IACH;AAEA,aAAS,cAAc;AACrB,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AACnB,WAAK,gBAAgB,IAAI;AAEzB,UAAI,UAAU,OAAO;AACnB,kBAAU,MAAM,QAAQ;AAAA,MAC1B;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}