@ozdao/martyrs 0.2.540 → 0.2.542

package/dist/martyrs/src/components/FieldTags/FieldTags.vue2.js

@@ -0,0 +1,235 @@
+import { ref, computed, watch, createElementBlock, openBlock, createElementVNode, createCommentVNode, withDirectives, Fragment, renderList, createTextVNode, toDisplayString, vModelText, normalizeClass } from "vue";
+/* empty css              */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "field-tags-new" };
+const _hoisted_2 = { class: "tags-container" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["placeholder", "maxlength", "disabled"];
+const _hoisted_5 = {
+  key: 0,
+  class: "autocomplete"
+};
+const _hoisted_6 = ["onClick", "onMouseenter"];
+const _sfc_main = {
+  __name: "FieldTags",
+  props: {
+    modelValue: Array,
+    textField: {
+      type: String,
+      default: "text"
+    },
+    autocompleteItems: Array,
+    separators: {
+      type: Array,
+      default: () => [",", ";"]
+    },
+    addOnKey: {
+      type: Array,
+      default: () => [13]
+      // Enter key
+    },
+    maxTags: {
+      type: Number,
+      default: 20
+    },
+    maxlength: {
+      type: Number,
+      default: 50
+    },
+    placeholder: String,
+    disabled: Boolean,
+    addOnBlur: {
+      type: Boolean,
+      default: true
+    },
+    autocompleteMinLength: {
+      type: Number,
+      default: 1
+    }
+  },
+  emits: ["update:modelValue", "tags-changed"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const newTag = ref("");
+    const focused = ref(false);
+    const selectedIndex = ref(-1);
+    const inputRef = ref(null);
+    const tags = computed({
+      get: () => props.modelValue || [],
+      set: (value) => {
+        emit("update:modelValue", value);
+        emit("tags-changed", value);
+      }
+    });
+    const showAutocomplete = computed(() => {
+      return focused.value && props.autocompleteItems?.length > 0 && newTag.value.length >= props.autocompleteMinLength;
+    });
+    const filteredAutocomplete = computed(() => {
+      if (!props.autocompleteItems) return [];
+      const searchText = newTag.value.toLowerCase();
+      return props.autocompleteItems.filter((item) => {
+        const itemText = getTagText(item).toLowerCase();
+        if (!itemText.includes(searchText)) return false;
+        return !isDuplicate(itemText);
+      });
+    });
+    function getTagText(tag) {
+      if (tag === null || tag === void 0) return "";
+      if (typeof tag === "string") return tag;
+      return tag[props.textField] || "";
+    }
+    function createTag(text) {
+      if (tags.value.length > 0) {
+        if (typeof tags.value[0] === "string") {
+          return text;
+        }
+      }
+      return { [props.textField]: text };
+    }
+    function isDuplicate(text) {
+      const searchText = text.toLowerCase().trim();
+      return tags.value.some(
+        (tag) => getTagText(tag).toLowerCase().trim() === searchText
+      );
+    }
+    function addTag(input) {
+      let text = "";
+      if (typeof input === "string") {
+        text = input.trim();
+      } else if (typeof input === "object") {
+        if (props.autocompleteItems?.includes(input)) {
+          if (!isDuplicate(getTagText(input))) {
+            tags.value = [...tags.value, input];
+          }
+          newTag.value = "";
+          selectedIndex.value = -1;
+          return;
+        }
+        text = getTagText(input).trim();
+      }
+      if (!text || tags.value.length >= props.maxTags) return;
+      if (isDuplicate(text)) return;
+      const tag = createTag(text);
+      tags.value = [...tags.value, tag];
+      newTag.value = "";
+      selectedIndex.value = -1;
+    }
+    function removeTag(index) {
+      if (props.disabled) return;
+      const newTags = [...tags.value];
+      newTags.splice(index, 1);
+      tags.value = newTags;
+    }
+    function handleKeyDown(event) {
+      if (showAutocomplete.value) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          selectedIndex.value = Math.min(
+            selectedIndex.value + 1,
+            filteredAutocomplete.value.length - 1
+          );
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          selectedIndex.value = Math.max(selectedIndex.value - 1, -1);
+          return;
+        }
+        if (event.key === "Enter" && selectedIndex.value >= 0) {
+          event.preventDefault();
+          addTag(filteredAutocomplete.value[selectedIndex.value]);
+          return;
+        }
+      }
+      const shouldAdd = props.addOnKey.some((key) => {
+        if (typeof key === "number") {
+          return event.keyCode === key;
+        }
+        return event.key === key;
+      });
+      if (shouldAdd) {
+        event.preventDefault();
+        addTag(newTag.value);
+        return;
+      }
+      if (event.key === "Backspace" && newTag.value === "" && tags.value.length > 0) {
+        removeTag(tags.value.length - 1);
+      }
+    }
+    function handlePaste(event) {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text");
+      if (!text) return;
+      const separatorRegex = new RegExp(
+        props.separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")
+      );
+      const parts = text.split(separatorRegex);
+      parts.forEach((part) => {
+        if (tags.value.length >= props.maxTags) return;
+        addTag(part);
+      });
+    }
+    function handleBlur() {
+      setTimeout(() => {
+        focused.value = false;
+        selectedIndex.value = -1;
+        if (props.addOnBlur && newTag.value) {
+          addTag(newTag.value);
+        }
+      }, 200);
+    }
+    watch(filteredAutocomplete, () => {
+      selectedIndex.value = -1;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag, index) => {
+            return openBlock(), createElementBlock("span", {
+              key: index,
+              class: "tag"
+            }, [
+              createTextVNode(toDisplayString(getTagText(tag)) + " ", 1),
+              createElementVNode("button", {
+                onClick: ($event) => removeTag(index),
+                class: "tag-remove",
+                type: "button"
+              }, " × ", 8, _hoisted_3)
+            ]);
+          }), 128)),
+          withDirectives(createElementVNode("input", {
+            ref_key: "inputRef",
+            ref: inputRef,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => newTag.value = $event),
+            onKeydown: handleKeyDown,
+            onPaste: handlePaste,
+            onFocus: _cache[1] || (_cache[1] = ($event) => focused.value = true),
+            onBlur: handleBlur,
+            placeholder: __props.placeholder || "Add tags",
+            maxlength: __props.maxlength,
+            disabled: __props.disabled,
+            class: "tag-input"
+          }, null, 40, _hoisted_4), [
+            [vModelText, newTag.value]
+          ])
+        ]),
+        showAutocomplete.value && filteredAutocomplete.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(filteredAutocomplete.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: getTagText(item),
+              onClick: ($event) => addTag(item),
+              onMouseenter: ($event) => selectedIndex.value = index,
+              class: normalizeClass(["autocomplete-item", { selected: selectedIndex.value === index }])
+            }, toDisplayString(getTagText(item)), 43, _hoisted_6);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const FieldTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1b76c0f9"]]);
+export {
+  FieldTags as default
+};
+//# sourceMappingURL=FieldTags.vue2.js.map

package/dist/martyrs/src/components/FieldTags/FieldTags.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldTags.vue2.js","sources":["../../../../../src/components/FieldTags/FieldTags.vue"],"sourcesContent":["<template>\n  <div class=\"field-tags-new\">\n    <!-- Tags container -->\n    <div class=\"tags-container\">\n      <span \n        v-for=\"(tag, index) in tags\" \n        :key=\"index\"\n        class=\"tag\"\n      >\n        {{ getTagText(tag) }}\n        <button \n          @click=\"removeTag(index)\" \n          class=\"tag-remove\"\n          type=\"button\"\n        >\n          ×\n        </button>\n      </span>\n      \n      <input\n        ref=\"inputRef\"\n        v-model=\"newTag\"\n        @keydown=\"handleKeyDown\"\n        @paste=\"handlePaste\"\n        @focus=\"focused = true\"\n        @blur=\"handleBlur\"\n        :placeholder=\"placeholder || 'Add tags'\"\n        :maxlength=\"maxlength\"\n        :disabled=\"disabled\"\n        class=\"tag-input\"\n      />\n    </div>\n    \n    <!-- Autocomplete dropdown -->\n    <div \n      v-if=\"showAutocomplete && filteredAutocomplete.length > 0\"\n      class=\"autocomplete\"\n    >\n      <div \n        v-for=\"(item, index) in filteredAutocomplete\"\n        :key=\"getTagText(item)\"\n        @click=\"addTag(item)\"\n        @mouseenter=\"selectedIndex = index\"\n        :class=\"['autocomplete-item', { selected: selectedIndex === index }]\"\n      >\n        {{ getTagText(item) }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, watch } from 'vue'\n\nconst props = defineProps({\n  modelValue: Array,\n  textField: {\n    type: String,\n    default: 'text'\n  },\n  autocompleteItems: Array,\n  separators: {\n    type: Array,\n    default: () => [',', ';']\n  },\n  addOnKey: {\n    type: Array,\n    default: () => [13] // Enter key\n  },\n  maxTags: {\n    type: Number,\n    default: 20\n  },\n  maxlength: {\n    type: Number,\n    default: 50\n  },\n  placeholder: String,\n  disabled: Boolean,\n  addOnBlur: {\n    type: Boolean,\n    default: true\n  },\n  autocompleteMinLength: {\n    type: Number,\n    default: 1\n  }\n})\n\nconst emit = defineEmits(['update:modelValue', 'tags-changed'])\n\n// State\nconst newTag = ref('')\nconst focused = ref(false)\nconst selectedIndex = ref(-1)\nconst inputRef = ref(null)\n\n// Computed\nconst tags = computed({\n  get: () => props.modelValue || [],\n  set: (value) => {\n    emit('update:modelValue', value)\n    emit('tags-changed', value)\n  }\n})\n\nconst showAutocomplete = computed(() => {\n  return focused.value && \n         props.autocompleteItems?.length > 0 &&\n         newTag.value.length >= props.autocompleteMinLength\n})\n\nconst filteredAutocomplete = computed(() => {\n  if (!props.autocompleteItems) return []\n  \n  const searchText = newTag.value.toLowerCase()\n  \n  return props.autocompleteItems.filter(item => {\n    const itemText = getTagText(item).toLowerCase()\n    \n    // Filter by search text\n    if (!itemText.includes(searchText)) return false\n    \n    // Filter out duplicates\n    return !isDuplicate(itemText)\n  })\n})\n\n// Methods\nfunction getTagText(tag) {\n  if (tag === null || tag === undefined) return ''\n  if (typeof tag === 'string') return tag\n  return tag[props.textField] || ''\n}\n\nfunction createTag(text) {\n  // Preserve format based on existing data\n  if (tags.value.length > 0) {\n    if (typeof tags.value[0] === 'string') {\n      return text\n    }\n  }\n  \n  // Default to object with custom field\n  return { [props.textField]: text }\n}\n\nfunction isDuplicate(text) {\n  const searchText = text.toLowerCase().trim()\n  return tags.value.some(tag => \n    getTagText(tag).toLowerCase().trim() === searchText\n  )\n}\n\nfunction addTag(input) {\n  let text = ''\n  \n  if (typeof input === 'string') {\n    text = input.trim()\n  } else if (typeof input === 'object') {\n    // If it's an autocomplete item, preserve the whole object\n    if (props.autocompleteItems?.includes(input)) {\n      if (!isDuplicate(getTagText(input))) {\n        tags.value = [...tags.value, input]\n      }\n      newTag.value = ''\n      selectedIndex.value = -1\n      return\n    }\n    text = getTagText(input).trim()\n  }\n  \n  if (!text || tags.value.length >= props.maxTags) return\n  \n  if (isDuplicate(text)) return\n  \n  const tag = createTag(text)\n  tags.value = [...tags.value, tag]\n  newTag.value = ''\n  selectedIndex.value = -1\n}\n\nfunction removeTag(index) {\n  if (props.disabled) return\n  \n  const newTags = [...tags.value]\n  newTags.splice(index, 1)\n  tags.value = newTags\n}\n\nfunction handleKeyDown(event) {\n  // Handle arrow keys for autocomplete navigation\n  if (showAutocomplete.value) {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      selectedIndex.value = Math.min(\n        selectedIndex.value + 1, \n        filteredAutocomplete.value.length - 1\n      )\n      return\n    }\n    \n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      selectedIndex.value = Math.max(selectedIndex.value - 1, -1)\n      return\n    }\n    \n    // Add selected autocomplete item on Enter\n    if (event.key === 'Enter' && selectedIndex.value >= 0) {\n      event.preventDefault()\n      addTag(filteredAutocomplete.value[selectedIndex.value])\n      return\n    }\n  }\n  \n  // Check for add triggers\n  const shouldAdd = props.addOnKey.some(key => {\n    if (typeof key === 'number') {\n      return event.keyCode === key\n    }\n    return event.key === key\n  })\n  \n  if (shouldAdd) {\n    event.preventDefault()\n    addTag(newTag.value)\n    return\n  }\n  \n  // Handle backspace to delete last tag\n  if (event.key === 'Backspace' && newTag.value === '' && tags.value.length > 0) {\n    removeTag(tags.value.length - 1)\n  }\n}\n\nfunction handlePaste(event) {\n  event.preventDefault()\n  \n  const text = event.clipboardData.getData('text')\n  if (!text) return\n  \n  // Create regex from separators\n  const separatorRegex = new RegExp(\n    props.separators.map(s => s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')).join('|')\n  )\n  \n  // Split by separators and add each tag\n  const parts = text.split(separatorRegex)\n  \n  parts.forEach(part => {\n    if (tags.value.length >= props.maxTags) return\n    addTag(part)\n  })\n}\n\nfunction handleBlur() {\n  // Small delay to allow click on autocomplete items\n  setTimeout(() => {\n    focused.value = false\n    selectedIndex.value = -1\n    \n    if (props.addOnBlur && newTag.value) {\n      addTag(newTag.value)\n    }\n  }, 200)\n}\n\n// Reset selected index when autocomplete items change\nwatch(filteredAutocomplete, () => {\n  selectedIndex.value = -1\n})\n</script>\n\n<style scoped>\n.field-tags-new {\n  position: relative;\n}\n\n.tags-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  background: rgb(var(--main, 255, 215, 0));\n  color: rgb(var(--black, 0, 0, 0));\n  padding: 0.25rem 0.5rem;\n  border-radius: 2rem;\n  font-size: 0.875rem;\n}\n\n.tag-remove {\n  margin-left: 0.25rem;\n  background: none;\n  border: none;\n  color: inherit;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.tag-remove:hover {\n  opacity: 1;\n}\n\n.tag-input {\n  flex: 1;\n  border: none;\n  background: none;\n  outline: none;\n  min-width: 150px;\n  padding: 0.25rem;\n  font-size: inherit;\n  font-family: inherit;\n}\n\n.tag-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.autocomplete {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  margin-top: 0.25rem;\n  background: white;\n  border: 1px solid rgb(var(--gray, 224, 224, 224));\n  border-radius: 0.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  max-height: 200px;\n  overflow-y: auto;\n  z-index: 100;\n}\n\n.autocomplete-item {\n  padding: 0.5rem 0.75rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.autocomplete-item:hover,\n.autocomplete-item.selected {\n  background: rgb(var(--gray-light, 248, 248, 248));\n}\n\n.autocomplete-item:first-child {\n  border-radius: 0.5rem 0.5rem 0 0;\n}\n\n.autocomplete-item:last-child {\n  border-radius: 0 0 0.5rem 0.5rem;\n}\n</style>"],"names":[],"mappings":"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"}

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

@@ -33,6 +33,7 @@ const _sfc_main = {
     const resizeObserver = vue.ref(null);
     const checkInterval = vue.ref(null);
     const resizeTimeout = vue.ref(null);
+    const previousSize = vue.ref({ width: 0, height: 0 });
     const widthMin = vue.ref("100%");
     const widthContainer = vue.ref(0);
     const widthContent = vue.ref(0);
@@ -87,11 +88,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 {
@@ -125,7 +134,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}`,
@@ -181,9 +190,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.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Marquee.vue.cjs","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":["ref","nextTick","computed","onMounted","onBeforeUnmount","watch"],"mappings":"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"}
+{"version":3,"file":"Marquee.vue.cjs","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":["ref","nextTick","computed","onMounted","onBeforeUnmount","watch"],"mappings":"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"}

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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"}