directix 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 /*!
- * directix v1.0.0
+ * directix v1.1.0
  * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
@@ -10,6 +10,7 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -56,36 +57,117 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v1.0.0
+ * directix v1.1.0
  * A comprehensive, easy-to-use, and high-performance Vue custom directives library supporting both Vue 2 and Vue 3
  * (c) 2021-present saqqdy <https://github.com/saqqdy>
  * Released under the MIT License.
  */
-let _vueVersion = null;
+let _vueVersion = null, _isVue2 = null, _isVue27 = null, _isVue3 = null;
+function parseVersion(version) {
+  if (version.startsWith("2.7")) return 2.7;
+  if (version.startsWith("2")) return 2;
+  if (version.startsWith("3")) return 3;
+  return null;
+}
 function getVueVersion() {
   var _a, _b;
   if (_vueVersion !== null) return _vueVersion;
+  if (typeof process !== "undefined") {
+    const envVersion = process.env.DIRECTIX_VUE_VERSION;
+    if (envVersion === "2.7") {
+      _vueVersion = 2.7;
+      return _vueVersion;
+    }
+    if (envVersion === "2") {
+      _vueVersion = 2;
+      return _vueVersion;
+    }
+    if (envVersion === "3") {
+      _vueVersion = 3;
+      return _vueVersion;
+    }
+  }
   try {
     const vue = require("vue");
-    if ((_a = vue == null ? void 0 : vue.version) == null ? void 0 : _a.startsWith("2")) {
+    const version = parseVersion(vue == null ? void 0 : vue.version);
+    if (version !== null) {
+      _vueVersion = version;
+      return _vueVersion;
+    }
+  } catch (e) {
+  }
+  if (typeof window !== "undefined") {
+    const win = window;
+    const vue = win.Vue;
+    if (vue == null ? void 0 : vue.version) {
+      const version = parseVersion(vue.version);
+      if (version !== null) {
+        _vueVersion = version;
+        return _vueVersion;
+      }
+    }
+    if (typeof (vue == null ? void 0 : vue.observable) === "function") {
       _vueVersion = 2;
-    } else if ((_b = vue == null ? void 0 : vue.version) == null ? void 0 : _b.startsWith("3")) {
+      return _vueVersion;
+    }
+    if (typeof (vue == null ? void 0 : vue.createApp) === "function" && typeof (vue == null ? void 0 : vue.observable) !== "function") {
       _vueVersion = 3;
+      return _vueVersion;
+    }
+    const devtools = win.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    if ((_a = devtools == null ? void 0 : devtools.Vue) == null ? void 0 : _a.version) {
+      const version = parseVersion(devtools.Vue.version);
+      if (version !== null) {
+        _vueVersion = version;
+        return _vueVersion;
+      }
+    }
+    if ((_b = devtools == null ? void 0 : devtools.apps) == null ? void 0 : _b.length) {
+      _vueVersion = 3;
+      return _vueVersion;
     }
-  } catch (e) {
   }
   if (_vueVersion === null) {
     if (typeof window !== "undefined") {
       console.warn(
-        "[Directix] Unable to detect Vue version, defaulting to Vue 3. Please ensure Vue is installed correctly."
+        "[Directix] Unable to detect Vue version, defaulting to Vue 3. Set DIRECTIX_VUE_VERSION=2 or call setVueVersion(2) if using Vue 2."
       );
     }
     _vueVersion = 3;
   }
   return _vueVersion;
 }
-const isVue2 = () => getVueVersion() === 2;
-const isVue3 = () => getVueVersion() === 3;
+function setVueVersion(version) {
+  _vueVersion = version;
+  _isVue2 = version === 2 || version === 2.7;
+  _isVue27 = version === 2.7;
+  _isVue3 = version === 3;
+}
+function resetVueVersion() {
+  _vueVersion = null;
+  _isVue2 = null;
+  _isVue27 = null;
+  _isVue3 = null;
+}
+function isVue2() {
+  if (_isVue2 === null) {
+    const version = getVueVersion();
+    _isVue2 = version === 2 || version === 2.7;
+  }
+  return _isVue2;
+}
+function isVue27() {
+  if (_isVue27 === null) {
+    _isVue27 = getVueVersion() === 2.7;
+  }
+  return _isVue27;
+}
+function isVue3() {
+  if (_isVue3 === null) {
+    _isVue3 = getVueVersion() === 3;
+  }
+  return _isVue3;
+}
 const isBrowser = () => {
   return typeof window !== "undefined" && typeof document !== "undefined";
 };
@@ -260,19 +342,45 @@ function defineDirective(definition) {
   }
   const wrappedHooks = {
     mounted: hooks.mounted ? (el, binding, vnode) => {
-      const mergedBinding = applyDefaults(binding, defaults);
-      hooks.mounted(el, mergedBinding, vnode);
+      hooks.mounted(el, applyDefaults(binding, defaults), vnode);
     } : void 0,
     updated: hooks.updated ? (el, binding, vnode, prevBinding, prevVnode) => {
-      const mergedBinding = applyDefaults(binding, defaults);
-      hooks.updated(el, mergedBinding, vnode, prevBinding, prevVnode);
+      hooks.updated(el, applyDefaults(binding, defaults), vnode, prevBinding, prevVnode);
     } : void 0,
     unmounted: hooks.unmounted
   };
-  if (isVue2()) {
-    return createVue2Directive(wrappedHooks);
+  return createLazyDirective(wrappedHooks);
+}
+function createLazyDirective(hooks) {
+  let cachedDirective = null;
+  function getDirective() {
+    if (!cachedDirective) {
+      cachedDirective = getVueVersion() === 2 ? createVue2Directive(hooks) : createVue3Directive(hooks);
+    }
+    return cachedDirective;
+  }
+  function createHook(hookName) {
+    return function(el, binding, vnode, prevVnode) {
+      var _a, _b;
+      (_b = (_a = getDirective())[hookName]) == null ? void 0 : _b.call(_a, el, binding, vnode, prevVnode);
+    };
   }
-  return createVue3Directive(wrappedHooks);
+  return {
+    // Vue 2 hooks
+    bind: createHook("bind"),
+    inserted: createHook("inserted"),
+    update: createHook("update"),
+    componentUpdated: createHook("componentUpdated"),
+    unbind: createHook("unbind"),
+    // Vue 3 hooks
+    created: createHook("created"),
+    beforeMount: createHook("beforeMount"),
+    mounted: createHook("mounted"),
+    beforeUpdate: createHook("beforeUpdate"),
+    updated: createHook("updated"),
+    beforeUnmount: createHook("beforeUnmount"),
+    unmounted: createHook("unmounted")
+  };
 }
 function applyDefaults(binding, defaults) {
   if (!defaults) return binding;
@@ -312,17 +420,29 @@ function getElement(target) {
   }
   return isElement(target) ? target : null;
 }
+function getScrollParent(el) {
+  if (!isBrowser()) return window;
+  let parent = el.parentElement;
+  while (parent) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+    if (/(auto|scroll)/.test(overflow + overflowX + overflowY)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return window;
+}
 function on(target, event, handler, options = false) {
   if (!isBrowser()) return;
-  const opts = normalizeOptions$5(options);
+  const opts = normalizeOptions$k(options);
   target.addEventListener(event, handler, opts);
 }
 function off(target, event, handler, options = false) {
   if (!isBrowser()) return;
-  const opts = normalizeOptions$5(options);
+  const opts = normalizeOptions$k(options);
   target.removeEventListener(event, handler, opts);
 }
-function normalizeOptions$5(options) {
+function normalizeOptions$k(options) {
   if (typeof options === "boolean") {
     return options;
   }
@@ -332,6 +452,22 @@ function normalizeOptions$5(options) {
   }
   return capture;
 }
+function getEventPosition(e) {
+  let clientX = 0, clientY = 0;
+  if ("touches" in e && e.touches.length > 0) {
+    clientX = e.touches[0].clientX;
+    clientY = e.touches[0].clientY;
+  } else if ("clientX" in e) {
+    clientX = e.clientX;
+    clientY = e.clientY;
+  }
+  return {
+    x: clientX,
+    y: clientY,
+    clientX,
+    clientY
+  };
+}
 function isString(value) {
   return typeof value === "string";
 }
@@ -529,7 +665,7 @@ const vClickOutside = defineDirective({
     prevent: false
   },
   mounted(el, binding) {
-    const options = normalizeOptions$4(binding.value);
+    const options = normalizeOptions$j(binding.value);
     if (options.disabled) return;
     const state = {
       options,
@@ -564,7 +700,7 @@ const vClickOutside = defineDirective({
     const state = el.__clickOutside;
     if (!state) return;
     const oldOptions = state.options;
-    const newOptions = normalizeOptions$4(binding.value);
+    const newOptions = normalizeOptions$j(binding.value);
     if (oldOptions.disabled !== newOptions.disabled) {
       if (newOptions.disabled) {
         state.handlers.forEach((handler, eventType) => {
@@ -601,7 +737,7 @@ const vClickOutside = defineDirective({
     delete el.__clickOutside;
   }
 });
-function normalizeOptions$4(binding) {
+function normalizeOptions$j(binding) {
   var _a, _b, _c, _d, _e;
   if (typeof binding === "function") {
     return {
@@ -678,7 +814,7 @@ const vCopy = defineDirective({
   name: "copy",
   ssr: false,
   mounted(el, binding) {
-    const options = normalizeOptions$3(binding.value);
+    const options = normalizeOptions$i(binding.value);
     if (options.disabled) return;
     if (options.title) {
       el.setAttribute("title", options.title);
@@ -714,7 +850,7 @@ const vCopy = defineDirective({
   updated(el, binding) {
     const state = el.__copy;
     if (!state) return;
-    state.options = normalizeOptions$3(binding.value);
+    state.options = normalizeOptions$i(binding.value);
     if (state.options.title) {
       el.setAttribute("title", state.options.title);
     }
@@ -726,7 +862,7 @@ const vCopy = defineDirective({
     delete el.__copy;
   }
 });
-function normalizeOptions$3(binding) {
+function normalizeOptions$i(binding) {
   if (typeof binding === "string") {
     return { value: binding };
   }
@@ -734,14 +870,15 @@ function normalizeOptions$3(binding) {
 }
 const vDebounce = defineDirective({
   name: "debounce",
-  ssr: false,
+  ssr: true,
+  // SSR safe - event binding is skipped on server
   defaults: {
     wait: 300,
     leading: false,
     trailing: true
   },
   mounted(el, binding) {
-    const options = normalizeOptions$2(binding.value, binding);
+    const options = normalizeOptions$h(binding.value, binding);
     const eventType = getEventTypeFromModifiers$1(binding.modifiers) || getEventType$1(el);
     const debouncedFn = debounce(options.handler, options.wait, {
       leading: options.leading,
@@ -757,7 +894,7 @@ const vDebounce = defineDirective({
   updated(el, binding) {
     const state = el.__debounce;
     if (!state) return;
-    const newOptions = normalizeOptions$2(binding.value, binding);
+    const newOptions = normalizeOptions$h(binding.value, binding);
     if (newOptions.wait !== state.options.wait || newOptions.leading !== state.options.leading || newOptions.trailing !== state.options.trailing) {
       state.debouncedFn.cancel();
       const debouncedFn = debounce(newOptions.handler, newOptions.wait, {
@@ -783,7 +920,7 @@ const vDebounce = defineDirective({
     delete el.__debounce;
   }
 });
-function normalizeOptions$2(binding, directiveBinding) {
+function normalizeOptions$h(binding, directiveBinding) {
   const wait = parseTime(directiveBinding.arg) || 300;
   if (typeof binding === "function") {
     return { handler: binding, wait };
@@ -827,14 +964,15 @@ function getEventTypeFromModifiers$1(modifiers) {
 }
 const vThrottle = defineDirective({
   name: "throttle",
-  ssr: false,
+  ssr: true,
+  // SSR safe - event binding is skipped on server
   defaults: {
     wait: 300,
     leading: true,
     trailing: true
   },
   mounted(el, binding) {
-    const options = normalizeOptions$1(binding.value, binding);
+    const options = normalizeOptions$g(binding.value, binding);
     const eventType = getEventTypeFromModifiers(binding.modifiers) || getEventType(el);
     const throttledFn = throttle(options.handler, options.wait, {
       leading: options.leading,
@@ -850,7 +988,7 @@ const vThrottle = defineDirective({
   updated(el, binding) {
     const state = el.__throttle;
     if (!state) return;
-    const newOptions = normalizeOptions$1(binding.value, binding);
+    const newOptions = normalizeOptions$g(binding.value, binding);
     if (newOptions.wait !== state.options.wait || newOptions.leading !== state.options.leading || newOptions.trailing !== state.options.trailing) {
       state.throttledFn.cancel();
       const throttledFn = throttle(newOptions.handler, newOptions.wait, {
@@ -876,7 +1014,7 @@ const vThrottle = defineDirective({
     delete el.__throttle;
   }
 });
-function normalizeOptions$1(binding, directiveBinding) {
+function normalizeOptions$g(binding, directiveBinding) {
   const wait = parseTime(directiveBinding.arg) || 300;
   if (typeof binding === "function") {
     return { handler: binding, wait };
@@ -931,13 +1069,15 @@ function isEqual(a, b) {
 }
 const vFocus = defineDirective({
   name: "focus",
-  ssr: false,
+  ssr: true,
+  // SSR safe - will skip focus on server
   defaults: {
     focus: true,
     refocus: false
   },
   mounted(el, binding) {
-    const options = normalizeOptions(binding.value);
+    if (!isBrowser()) return;
+    const options = normalizeOptions$f(binding.value);
     if (!options.focus || !isFocusable(el)) {
       if (options.focus) {
         console.warn("[Directix] v-focus: Element is not focusable");
@@ -965,7 +1105,7 @@ const vFocus = defineDirective({
   updated(el, binding) {
     const state = el.__focus;
     if (!state) return;
-    const newOptions = normalizeOptions(binding.value);
+    const newOptions = normalizeOptions$f(binding.value);
     if (newOptions.onFocus !== state.options.onFocus) {
       el.removeEventListener("focus", state.handleFocus);
       state.handleFocus = () => {
@@ -997,7 +1137,7 @@ const vFocus = defineDirective({
     delete el.__focus;
   }
 });
-function normalizeOptions(binding) {
+function normalizeOptions$f(binding) {
   if (typeof binding === "boolean") {
     return { focus: binding, refocus: false };
   }
@@ -1020,14 +1160,1935 @@ function isFocusable(el) {
   }
   return false;
 }
-const allDirectives = {
-  "click-outside": vClickOutside,
-  copy: vCopy,
-  debounce: vDebounce,
-  throttle: vThrottle,
-  focus: vFocus
-};
-const install = (app, options = {}) => {
+let globalObserver = null;
+function getGlobalObserver(preload) {
+  if (globalObserver) return globalObserver;
+  globalObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          load(entry.target);
+          globalObserver == null ? void 0 : globalObserver.unobserve(entry.target);
+        }
+      });
+    },
+    {
+      rootMargin: `${preload}px`
+    }
+  );
+  return globalObserver;
+}
+function setSrc(el, src) {
+  if (el.tagName === "IMG") {
+    el.src = src;
+  } else {
+    el.style.backgroundImage = `url("${src}")`;
+  }
+}
+function setLazyState(el, state) {
+  el.dataset.lazyState = state;
+}
+function getLazyState(el) {
+  return el.dataset.lazyState || "pending";
+}
+function load(el) {
+  const state = el.__lazy;
+  if (!state || !state.options.src) return;
+  if (state.options.filter && !state.options.filter(state.options.src)) {
+    return;
+  }
+  setLazyState(el, "loading");
+  state.attempt++;
+  el.classList.add("v-lazy--loading");
+  const img = new Image();
+  img.onload = () => {
+    var _a, _b;
+    setSrc(el, state.options.src);
+    setLazyState(el, "loaded");
+    el.classList.remove("v-lazy--loading");
+    el.classList.add("v-lazy--loaded");
+    (_b = (_a = state.options).onLoad) == null ? void 0 : _b.call(_a, el);
+  };
+  img.onerror = () => {
+    var _a, _b;
+    el.classList.remove("v-lazy--loading");
+    if (state.attempt < (state.options.attempt || 1)) {
+      setTimeout(() => load(el), 1e3 * state.attempt);
+      return;
+    }
+    if (state.options.error) {
+      setSrc(el, state.options.error);
+    }
+    setLazyState(el, "error");
+    el.classList.add("v-lazy--error");
+    (_b = (_a = state.options).onError) == null ? void 0 : _b.call(_a, el, new Error("Failed to load image"));
+  };
+  img.src = state.options.src;
+}
+function observe(el) {
+  const state = el.__lazy;
+  if (!state) return;
+  if (!supportsIntersectionObserver()) {
+    load(el);
+    return;
+  }
+  if (state.options.observer) {
+    state.observer = state.options.observer;
+    state.observer.observe(el);
+  } else {
+    const observer = getGlobalObserver(state.options.preload || 0);
+    state.observer = observer;
+    observer.observe(el);
+  }
+}
+function unobserve(el) {
+  const state = el.__lazy;
+  if (!state) return;
+  if (state.observer) {
+    state.observer.unobserve(el);
+  } else if (globalObserver) {
+    globalObserver.unobserve(el);
+  }
+}
+function normalizeOptions$e(binding) {
+  if (typeof binding === "string") {
+    return { src: binding };
+  }
+  return binding || {};
+}
+const vLazy = defineDirective({
+  name: "lazy",
+  ssr: false,
+  defaults: {
+    preload: 0,
+    attempt: 1,
+    disabled: false
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$e(binding.value);
+    if (options.disabled) return;
+    if (!options.src) {
+      console.warn("[Directix] v-lazy: No source provided");
+      return;
+    }
+    setLazyState(el, "pending");
+    if (options.placeholder) {
+      setSrc(el, options.placeholder);
+    }
+    el.classList.add("v-lazy");
+    const state = {
+      options,
+      attempt: 0
+    };
+    el.__lazy = state;
+    observe(el);
+  },
+  updated(el, binding) {
+    const state = el.__lazy;
+    if (!state) return;
+    const newOptions = normalizeOptions$e(binding.value);
+    if (newOptions.disabled) {
+      unobserve(el);
+      return;
+    }
+    if (newOptions.src !== state.options.src) {
+      state.options = newOptions;
+      state.attempt = 0;
+      if (getLazyState(el) !== "pending") {
+        setLazyState(el, "pending");
+        el.classList.remove("v-lazy--loaded", "v-lazy--error");
+        if (newOptions.placeholder) {
+          setSrc(el, newOptions.placeholder);
+        }
+        observe(el);
+      }
+    }
+  },
+  unmounted(el) {
+    unobserve(el);
+    delete el.__lazy;
+  }
+});
+const STATE_KEY$3 = "__intersect";
+function normalizeOptions$d(binding) {
+  const options = typeof binding === "function" ? { handler: binding } : __spreadValues({}, binding);
+  if (options.root !== null && typeof options.root === "object" && "value" in options.root) {
+    options.root = options.root.value;
+  }
+  return options;
+}
+function createObserverCallback(el, state, options) {
+  return (entries) => {
+    var _a, _b, _c, _d;
+    for (const entry of entries) {
+      if (options.once && state.hasTriggeredOnce) continue;
+      const { isIntersecting } = entry;
+      (_a = options.handler) == null ? void 0 : _a.call(options, entry, state.observer);
+      (_b = options.onChange) == null ? void 0 : _b.call(options, isIntersecting, entry);
+      if (isIntersecting) {
+        (_c = options.onEnter) == null ? void 0 : _c.call(options, entry, state.observer);
+        if (options.once) state.hasTriggeredOnce = true;
+      } else {
+        (_d = options.onLeave) == null ? void 0 : _d.call(options, entry, state.observer);
+      }
+      el.dispatchEvent(new CustomEvent("intersect", { detail: { isIntersecting, entry } }));
+    }
+  };
+}
+function createObserver(el, state, options) {
+  return new IntersectionObserver(createObserverCallback(el, state, options), {
+    root: options.root,
+    rootMargin: options.rootMargin,
+    threshold: options.threshold
+  });
+}
+const vIntersect = defineDirective({
+  name: "intersect",
+  ssr: false,
+  defaults: {
+    disabled: false,
+    once: false,
+    rootMargin: "0px",
+    threshold: 0
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$d(binding.value);
+    if (options.disabled || !isBrowser() || !supportsIntersectionObserver()) {
+      if (!supportsIntersectionObserver()) {
+        console.warn("[Directix] v-intersect: IntersectionObserver not supported");
+      }
+      return;
+    }
+    const state = {
+      options,
+      observer: null,
+      hasTriggeredOnce: false
+    };
+    state.observer = createObserver(el, state, options);
+    el[STATE_KEY$3] = state;
+    state.observer.observe(el);
+  },
+  updated(el, binding) {
+    var _a, _b, _c;
+    const state = el[STATE_KEY$3];
+    if (!state) return;
+    const newOptions = normalizeOptions$d(binding.value);
+    const observerOptionsChanged = newOptions.root !== state.options.root || newOptions.rootMargin !== state.options.rootMargin || newOptions.threshold !== state.options.threshold;
+    if (newOptions.disabled !== state.options.disabled) {
+      if (newOptions.disabled) {
+        (_a = state.observer) == null ? void 0 : _a.disconnect();
+      } else {
+        (_b = state.observer) == null ? void 0 : _b.observe(el);
+      }
+    }
+    if (observerOptionsChanged) {
+      (_c = state.observer) == null ? void 0 : _c.disconnect();
+      state.observer = createObserver(el, state, newOptions);
+      state.observer.observe(el);
+    }
+    state.options = newOptions;
+  },
+  unmounted(el) {
+    var _a;
+    const state = el[STATE_KEY$3];
+    if (!state) return;
+    (_a = state.observer) == null ? void 0 : _a.disconnect();
+    delete el[STATE_KEY$3];
+  }
+});
+function normalizeOptions$c(binding) {
+  if (typeof binding === "boolean") {
+    return { initial: binding };
+  }
+  return __spreadValues({
+    initial: true,
+    disabled: false,
+    useHidden: false
+  }, binding);
+}
+const vVisible = defineDirective({
+  name: "visible",
+  ssr: true,
+  // SSR safe - will set initial visibility on server
+  defaults: {
+    initial: true,
+    disabled: false,
+    useHidden: false
+  },
+  mounted(el, binding) {
+    var _a, _b;
+    if (!isBrowser()) return;
+    const options = normalizeOptions$c(binding.value);
+    const originalDisplay = el.style.display;
+    const originalVisibility = el.style.visibility;
+    const state = {
+      options,
+      isVisible: (_a = options.initial) != null ? _a : true,
+      originalDisplay,
+      originalVisibility,
+      transitionEndHandler: (e) => {
+        if (e.propertyName === "opacity" || e.propertyName === "visibility") {
+          el.dispatchEvent(new CustomEvent("visible:transition-end", {
+            detail: { isVisible: state.isVisible }
+          }));
+        }
+      }
+    };
+    el.__visible = state;
+    on(el, "transitionend", state.transitionEndHandler);
+    applyVisibility(el, state, (_b = options.initial) != null ? _b : true);
+  },
+  updated(el, binding) {
+    var _a;
+    const state = el.__visible;
+    if (!state) return;
+    const newOptions = normalizeOptions$c(binding.value);
+    let newVisibility;
+    if (typeof binding.value === "boolean") {
+      newVisibility = binding.value;
+    } else {
+      newVisibility = (_a = newOptions.initial) != null ? _a : true;
+    }
+    if (state.isVisible !== newVisibility) {
+      applyVisibility(el, state, newVisibility);
+    }
+    state.options = newOptions;
+  },
+  unmounted(el) {
+    const state = el.__visible;
+    if (!state) return;
+    off(el, "transitionend", state.transitionEndHandler);
+    el.style.display = state.originalDisplay;
+    el.style.visibility = state.originalVisibility;
+    delete el.__visible;
+  }
+});
+function applyVisibility(el, state, isVisible) {
+  const previousVisibility = state.isVisible;
+  state.isVisible = isVisible;
+  if (isVisible) {
+    el.classList.remove("v-hidden");
+    el.classList.add("v-visible");
+  } else {
+    el.classList.remove("v-visible");
+    el.classList.add("v-hidden");
+  }
+  if (state.options.useHidden) {
+    if (isVisible) {
+      el.style.visibility = state.originalVisibility || "visible";
+    } else {
+      const computedStyle = getComputedStyle(el);
+      const hasTransition = computedStyle.transitionDuration !== "0s";
+      if (hasTransition) {
+        const handleTransitionEnd = (e) => {
+          if (e.target === el && (e.propertyName === "opacity" || e.propertyName === "transform")) {
+            if (!state.isVisible) {
+              el.style.visibility = "hidden";
+            }
+            el.removeEventListener("transitionend", handleTransitionEnd);
+          }
+        };
+        el.addEventListener("transitionend", handleTransitionEnd);
+      } else {
+        el.style.visibility = "hidden";
+      }
+    }
+  } else {
+    el.style.display = isVisible ? state.originalDisplay : "none";
+  }
+  el.dispatchEvent(new CustomEvent("visible:change", {
+    detail: { isVisible, previousVisibility }
+  }));
+  if (state.options.handler && previousVisibility !== isVisible) {
+    state.options.handler(isVisible);
+  }
+}
+function normalizeOptions$b(binding) {
+  if (typeof binding === "boolean") {
+    return { value: binding };
+  }
+  return __spreadValues({
+    value: true,
+    loadingClass: "v-loading",
+    spinnerClass: "v-loading__spinner",
+    textClass: "v-loading__text",
+    background: "rgba(255, 255, 255, 0.9)",
+    lock: false,
+    disabled: false
+  }, binding);
+}
+const DEFAULT_SPINNER = `
+<svg class="v-loading__circular" viewBox="25 25 50 50">
+  <circle class="v-loading__path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
+</svg>
+`;
+function createLoadingOverlay(options) {
+  const overlay = document.createElement("div");
+  overlay.className = options.loadingClass || "v-loading";
+  overlay.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background: ${options.background || "rgba(255, 255, 255, 0.9)"};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `;
+  const spinnerHtml = options.spinner || DEFAULT_SPINNER;
+  const spinnerContainer = document.createElement("div");
+  spinnerContainer.className = options.spinnerClass || "v-loading__spinner";
+  spinnerContainer.innerHTML = spinnerHtml;
+  overlay.appendChild(spinnerContainer);
+  if (options.text) {
+    const textEl = document.createElement("div");
+    textEl.className = options.textClass || "v-loading__text";
+    textEl.textContent = options.text;
+    overlay.appendChild(textEl);
+  }
+  return overlay;
+}
+const vLoading = defineDirective({
+  name: "loading",
+  ssr: true,
+  // SSR safe - will skip DOM manipulation on server
+  defaults: {
+    value: true,
+    loadingClass: "v-loading",
+    spinnerClass: "v-loading__spinner",
+    textClass: "v-loading__text",
+    background: "rgba(255, 255, 255, 0.9)",
+    lock: false,
+    disabled: false
+  },
+  mounted(el, binding) {
+    if (!isBrowser()) return;
+    const options = normalizeOptions$b(binding.value);
+    if (options.disabled) return;
+    const computedStyle = getComputedStyle(el);
+    const originalPosition = el.style.position;
+    const originalOverflow = el.style.overflow;
+    const state = {
+      options,
+      loadingOverlay: null,
+      originalPosition,
+      originalOverflow
+    };
+    el.__loading = state;
+    if (computedStyle.position === "static") {
+      el.style.position = "relative";
+    }
+    if (options.value) {
+      showLoading(el, state);
+    }
+  },
+  updated(el, binding) {
+    const state = el.__loading;
+    if (!state) return;
+    const newOptions = normalizeOptions$b(binding.value);
+    if (newOptions.disabled) {
+      hideLoading(el, state);
+      return;
+    }
+    if (newOptions.value && !state.options.value) {
+      showLoading(el, state);
+    } else if (!newOptions.value && state.options.value) {
+      hideLoading(el, state);
+    }
+    if (state.loadingOverlay && newOptions.text !== state.options.text) {
+      const textEl = state.loadingOverlay.querySelector(`.${state.options.textClass}`);
+      if (textEl) {
+        textEl.textContent = newOptions.text || "";
+      }
+    }
+    state.options = newOptions;
+  },
+  unmounted(el) {
+    const state = el.__loading;
+    if (!state) return;
+    hideLoading(el, state);
+    el.style.position = state.originalPosition;
+    el.style.overflow = state.originalOverflow;
+    delete el.__loading;
+  }
+});
+function showLoading(el, state) {
+  if (state.loadingOverlay) return;
+  state.loadingOverlay = createLoadingOverlay(state.options);
+  el.appendChild(state.loadingOverlay);
+  if (state.options.lock) {
+    el.style.overflow = "hidden";
+  }
+  el.classList.add("v-loading--active");
+}
+function hideLoading(el, state) {
+  if (!state.loadingOverlay) return;
+  state.loadingOverlay.remove();
+  state.loadingOverlay = null;
+  if (state.options.lock) {
+    el.style.overflow = state.originalOverflow;
+  }
+  el.classList.remove("v-loading--active");
+}
+function getScrollInfo(container, lastScrollLeft, lastScrollTop) {
+  let scrollLeft = 0, scrollTop = 0, scrollLeftMax = 0, scrollTopMax = 0;
+  if (container === window) {
+    scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    scrollTop = window.scrollY || document.documentElement.scrollTop;
+    scrollLeftMax = document.documentElement.scrollWidth - window.innerWidth;
+    scrollTopMax = document.documentElement.scrollHeight - window.innerHeight;
+  } else {
+    const el = container;
+    scrollLeft = el.scrollLeft;
+    scrollTop = el.scrollTop;
+    scrollLeftMax = el.scrollWidth - el.clientWidth;
+    scrollTopMax = el.scrollHeight - el.clientHeight;
+  }
+  const progressX = scrollLeftMax > 0 ? scrollLeft / scrollLeftMax : 0;
+  const progressY = scrollTopMax > 0 ? scrollTop / scrollTopMax : 0;
+  const directionX = scrollLeft !== lastScrollLeft ? scrollLeft > lastScrollLeft ? 1 : -1 : 0;
+  const directionY = scrollTop !== lastScrollTop ? scrollTop > lastScrollTop ? 1 : -1 : 0;
+  return {
+    scrollLeft,
+    scrollTop,
+    scrollLeftMax,
+    scrollTopMax,
+    progressX,
+    progressY,
+    directionX,
+    directionY,
+    container
+  };
+}
+function normalizeOptions$a(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding, passive: true };
+  }
+  if (!binding) {
+    throw new Error("[Directix] v-scroll: handler is required");
+  }
+  return __spreadValues({
+    passive: true,
+    throttle: 0,
+    disabled: false
+  }, binding);
+}
+const vScroll = defineDirective({
+  name: "scroll",
+  ssr: false,
+  defaults: {
+    passive: true,
+    throttle: 0,
+    disabled: false
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$a(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    let container;
+    if (options.container) {
+      if (options.container === window) {
+        container = window;
+      } else if (typeof options.container === "string") {
+        const found = document.querySelector(options.container);
+        container = found || getScrollParent(el);
+      } else {
+        container = options.container;
+      }
+    } else {
+      const { overflow, overflowX, overflowY } = getComputedStyle(el);
+      const isSelfScrollable = /(auto|scroll)/.test(overflow + overflowX + overflowY);
+      container = isSelfScrollable ? el : getScrollParent(el);
+    }
+    const state = {
+      options,
+      container,
+      lastScrollLeft: 0,
+      lastScrollTop: 0,
+      throttleTimer: null,
+      pendingEvent: null,
+      scrollHandler: (e) => {
+        if (options.throttle && options.throttle > 0) {
+          state.pendingEvent = e;
+          if (!state.throttleTimer) {
+            state.throttleTimer = setTimeout(() => {
+              if (state.pendingEvent) {
+                const info = getScrollInfo(container, state.lastScrollLeft, state.lastScrollTop);
+                state.lastScrollLeft = info.scrollLeft;
+                state.lastScrollTop = info.scrollTop;
+                options.handler(state.pendingEvent, info);
+              }
+              state.throttleTimer = null;
+              state.pendingEvent = null;
+            }, options.throttle);
+          }
+        } else {
+          const info = getScrollInfo(container, state.lastScrollLeft, state.lastScrollTop);
+          state.lastScrollLeft = info.scrollLeft;
+          state.lastScrollTop = info.scrollTop;
+          options.handler(e, info);
+        }
+      }
+    };
+    const initialInfo = getScrollInfo(container, 0, 0);
+    state.lastScrollLeft = initialInfo.scrollLeft;
+    state.lastScrollTop = initialInfo.scrollTop;
+    el.__scroll = state;
+    on(container, "scroll", state.scrollHandler, { passive: options.passive });
+  },
+  updated(el, binding) {
+    const state = el.__scroll;
+    if (!state) return;
+    state.options = normalizeOptions$a(binding.value);
+  },
+  unmounted(el) {
+    const state = el.__scroll;
+    if (!state) return;
+    if (state.throttleTimer) {
+      clearTimeout(state.throttleTimer);
+    }
+    off(state.container, "scroll", state.scrollHandler);
+    delete el.__scroll;
+  }
+});
+function normalizeOptions$9(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding, distance: 0, throttle: 200, useIntersection: true };
+  }
+  if (!binding) {
+    throw new Error("[Directix] v-infinite-scroll: handler is required");
+  }
+  return __spreadValues({
+    distance: 0,
+    disabled: false,
+    loading: false,
+    useIntersection: true,
+    throttle: 200
+  }, binding);
+}
+const vInfiniteScroll = defineDirective({
+  name: "infinite-scroll",
+  ssr: false,
+  defaults: {
+    distance: 0,
+    disabled: false,
+    loading: false,
+    useIntersection: true,
+    throttle: 200
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$9(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    let container;
+    if (options.container) {
+      if (typeof options.container === "string") {
+        const found = document.querySelector(options.container);
+        container = found || getScrollParent(el);
+      } else {
+        container = options.container;
+      }
+    } else {
+      container = getScrollParent(el);
+    }
+    const state = {
+      options,
+      container,
+      sentinel: null,
+      observer: null,
+      throttleTimer: null,
+      isLoading: false,
+      scrollHandler: (_e) => __async(null, null, function* () {
+        if (state.isLoading || state.options.disabled || state.options.loading) {
+          return;
+        }
+        if (state.throttleTimer) {
+          return;
+        }
+        state.throttleTimer = setTimeout(() => {
+          state.throttleTimer = null;
+        }, options.throttle);
+        const shouldLoad = checkShouldLoad(container, el, options.distance || 0);
+        if (shouldLoad) {
+          yield triggerLoad(state, el);
+        }
+      })
+    };
+    el.__infiniteScroll = state;
+    if (options.useIntersection && supportsIntersectionObserver()) {
+      setupIntersectionObserver(el, state);
+    } else {
+      on(container, "scroll", state.scrollHandler, { passive: true });
+    }
+  },
+  updated(el, binding) {
+    const state = el.__infiniteScroll;
+    if (!state) return;
+    state.options = normalizeOptions$9(binding.value);
+  },
+  unmounted(el) {
+    const state = el.__infiniteScroll;
+    if (!state) return;
+    if (state.throttleTimer) {
+      clearTimeout(state.throttleTimer);
+    }
+    if (state.observer) {
+      state.observer.disconnect();
+    }
+    if (state.sentinel && state.sentinel.parentNode) {
+      state.sentinel.parentNode.removeChild(state.sentinel);
+    }
+    off(state.container, "scroll", state.scrollHandler);
+    delete el.__infiniteScroll;
+  }
+});
+function checkShouldLoad(container, _el, distance) {
+  if (container === window) {
+    const scrollTop2 = window.scrollY || document.documentElement.scrollTop;
+    const scrollHeight2 = document.documentElement.scrollHeight;
+    const clientHeight2 = window.innerHeight;
+    return scrollTop2 + clientHeight2 >= scrollHeight2 - distance;
+  }
+  const el = container;
+  const scrollTop = el.scrollTop;
+  const scrollHeight = el.scrollHeight;
+  const clientHeight = el.clientHeight;
+  return scrollTop + clientHeight >= scrollHeight - distance;
+}
+function triggerLoad(state, el) {
+  return __async(this, null, function* () {
+    var _a, _b, _c, _d, _e, _f;
+    state.isLoading = true;
+    (_b = (_a = state.options).onLoadStart) == null ? void 0 : _b.call(_a);
+    el.classList.add("v-infinite-scroll--loading");
+    try {
+      yield state.options.handler();
+    } catch (err) {
+      (_d = (_c = state.options).onError) == null ? void 0 : _d.call(_c, err);
+    } finally {
+      state.isLoading = false;
+      (_f = (_e = state.options).onLoadEnd) == null ? void 0 : _f.call(_e);
+      el.classList.remove("v-infinite-scroll--loading");
+    }
+  });
+}
+function setupIntersectionObserver(el, state) {
+  const sentinel = document.createElement("div");
+  sentinel.className = "v-infinite-scroll__sentinel";
+  sentinel.style.cssText = `
+    height: 1px;
+    width: 100%;
+    clear: both;
+  `;
+  el.appendChild(sentinel);
+  state.sentinel = sentinel;
+  state.observer = new IntersectionObserver(
+    (entries) => __async(null, null, function* () {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          if (!state.isLoading && !state.options.disabled && !state.options.loading) {
+            yield triggerLoad(state, el);
+          }
+        }
+      }
+    }),
+    {
+      root: state.container === window ? null : state.container,
+      rootMargin: `${state.options.distance || 0}px`,
+      threshold: 0
+    }
+  );
+  state.observer.observe(sentinel);
+}
+const STATE_KEY$2 = "__sticky";
+function normalizeOptions$8(binding) {
+  if (binding === false) return { disabled: true, top: 0, zIndex: 100 };
+  if (typeof binding === "number") return { top: binding, zIndex: 100 };
+  return __spreadValues({
+    top: 0,
+    zIndex: 100,
+    stickyClass: "v-sticky--fixed",
+    disabled: false
+  }, binding && typeof binding === "object" ? binding : {});
+}
+function parseOffset(value) {
+  if (value === void 0) return "0";
+  return typeof value === "number" ? `${value}px` : value;
+}
+function getScrollContainer(el, customContainer) {
+  if (customContainer) {
+    if (typeof customContainer === "string") {
+      return document.querySelector(customContainer) || getScrollParent(el);
+    }
+    return customContainer;
+  }
+  const parent = el.parentElement;
+  if (parent) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent);
+    if (/(auto|scroll)/.test(overflow + overflowX + overflowY)) {
+      return parent;
+    }
+  }
+  return getScrollParent(el);
+}
+function checkSticky(el, state) {
+  if (state.options.disabled) {
+    unsetSticky(el, state);
+    return;
+  }
+  const topOffset = Number.parseFloat(parseOffset(state.options.top));
+  const containerRect = state.container === window ? { top: 0 } : state.container.getBoundingClientRect();
+  const referenceEl = state.placeholder || el;
+  const rect = referenceEl.getBoundingClientRect();
+  const elementTopRelativeToContainer = rect.top - containerRect.top;
+  const shouldSticky = elementTopRelativeToContainer <= topOffset;
+  if (shouldSticky && !state.isSticky) {
+    setSticky(el, state, topOffset, containerRect.top);
+  } else if (!shouldSticky && state.isSticky) {
+    unsetSticky(el, state);
+  }
+}
+function setSticky(el, state, topOffset, containerTop) {
+  var _a, _b, _c;
+  state.isSticky = true;
+  const placeholder = document.createElement("div");
+  placeholder.style.cssText = `width:${el.offsetWidth}px;height:${el.offsetHeight}px`;
+  (_a = el.parentNode) == null ? void 0 : _a.insertBefore(placeholder, el);
+  state.placeholder = placeholder;
+  const fixedTop = state.container === window ? topOffset : containerTop + topOffset;
+  el.style.position = "fixed";
+  el.style.top = `${fixedTop}px`;
+  el.style.zIndex = String(state.options.zIndex || 100);
+  el.style.width = `${el.offsetWidth}px`;
+  if (state.options.bottom !== void 0) {
+    el.style.bottom = parseOffset(state.options.bottom);
+  }
+  state.options.stickyClass && el.classList.add(state.options.stickyClass);
+  el.dispatchEvent(new CustomEvent("sticky:change", { detail: { isSticky: true } }));
+  (_c = (_b = state.options).onChange) == null ? void 0 : _c.call(_b, true);
+}
+function unsetSticky(el, state) {
+  var _a, _b, _c, _d;
+  if (!state.isSticky) return;
+  state.isSticky = false;
+  (_b = (_a = state.placeholder) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(state.placeholder);
+  state.placeholder = null;
+  Object.assign(el.style, state.originalStyles);
+  state.options.stickyClass && el.classList.remove(state.options.stickyClass);
+  el.dispatchEvent(new CustomEvent("sticky:change", { detail: { isSticky: false } }));
+  (_d = (_c = state.options).onChange) == null ? void 0 : _d.call(_c, false);
+}
+const vSticky = defineDirective({
+  name: "sticky",
+  ssr: false,
+  defaults: { top: 0, zIndex: 100, stickyClass: "v-sticky--fixed", disabled: false },
+  mounted(el, binding) {
+    const options = normalizeOptions$8(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const container = getScrollContainer(el, options.container);
+    const state = {
+      options,
+      placeholder: null,
+      originalStyles: {
+        position: el.style.position,
+        top: el.style.top,
+        bottom: el.style.bottom,
+        zIndex: el.style.zIndex,
+        width: el.style.width
+      },
+      isSticky: false,
+      container,
+      scrollHandler: () => checkSticky(el, state),
+      resizeHandler: () => checkSticky(el, state)
+    };
+    el.classList.add("v-sticky");
+    el[STATE_KEY$2] = state;
+    on(container, "scroll", state.scrollHandler, { passive: true });
+    on(window, "resize", state.resizeHandler, { passive: true });
+    checkSticky(el, state);
+  },
+  updated(el, binding) {
+    const state = el[STATE_KEY$2];
+    if (!state) return;
+    state.options = normalizeOptions$8(binding.value);
+    checkSticky(el, state);
+  },
+  unmounted(el) {
+    var _a, _b;
+    const state = el[STATE_KEY$2];
+    if (!state) return;
+    (_b = (_a = state.placeholder) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(state.placeholder);
+    Object.assign(el.style, state.originalStyles);
+    el.classList.remove("v-sticky", state.options.stickyClass || "v-sticky--fixed");
+    off(state.container, "scroll", state.scrollHandler);
+    off(window, "resize", state.resizeHandler);
+    delete el[STATE_KEY$2];
+  }
+});
+function normalizeOptions$7(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding, duration: 500, distance: 10 };
+  }
+  if (!binding) {
+    throw new Error("[Directix] v-long-press: handler is required");
+  }
+  return __spreadValues({
+    duration: 500,
+    distance: 10,
+    disabled: false,
+    prevent: true,
+    stop: false,
+    tickInterval: 100
+  }, binding);
+}
+function getDistance(p1, p2) {
+  return Math.sqrt(__pow(p2.x - p1.x, 2) + __pow(p2.y - p1.y, 2));
+}
+const vLongPress = defineDirective({
+  name: "long-press",
+  ssr: false,
+  defaults: {
+    duration: 500,
+    distance: 10,
+    disabled: false,
+    prevent: true,
+    stop: false,
+    tickInterval: 100
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$7(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const state = {
+      options,
+      timerId: null,
+      tickTimerId: null,
+      startTime: 0,
+      startPos: { x: 0, y: 0 },
+      startHandler: () => {
+      },
+      endHandler: () => {
+      },
+      moveHandler: () => {
+      }
+    };
+    state.startHandler = (e) => {
+      var _a;
+      const event = e;
+      if (options.prevent) {
+        event.preventDefault();
+      }
+      if (options.stop) {
+        event.stopPropagation();
+      }
+      if (state.timerId) {
+        clearTimeout(state.timerId);
+        state.timerId = null;
+      }
+      if (state.tickTimerId) {
+        clearInterval(state.tickTimerId);
+        state.tickTimerId = null;
+      }
+      const pos = getEventPosition(event);
+      state.startPos = { x: pos.x, y: pos.y };
+      state.startTime = Date.now();
+      (_a = options.onStart) == null ? void 0 : _a.call(options, event);
+      if (options.onTick) {
+        let remaining = options.duration;
+        state.tickTimerId = setInterval(() => {
+          var _a2;
+          remaining -= options.tickInterval;
+          (_a2 = options.onTick) == null ? void 0 : _a2.call(options, Math.max(0, remaining));
+        }, options.tickInterval);
+      }
+      state.timerId = setTimeout(() => {
+        if (state.tickTimerId) {
+          clearInterval(state.tickTimerId);
+          state.tickTimerId = null;
+        }
+        options.handler(event);
+      }, options.duration);
+    };
+    state.endHandler = (e) => {
+      var _a;
+      const event = e;
+      if (state.timerId) {
+        clearTimeout(state.timerId);
+        state.timerId = null;
+      }
+      if (state.tickTimerId) {
+        clearInterval(state.tickTimerId);
+        state.tickTimerId = null;
+      }
+      if (state.startTime > 0) {
+        (_a = options.onCancel) == null ? void 0 : _a.call(options, event);
+      }
+      state.startTime = 0;
+    };
+    state.moveHandler = (e) => {
+      var _a;
+      if (!state.timerId) return;
+      const event = e;
+      const pos = getEventPosition(event);
+      const distance = getDistance(state.startPos, { x: pos.x, y: pos.y });
+      if (distance > (options.distance || 10)) {
+        if (state.timerId) {
+          clearTimeout(state.timerId);
+          state.timerId = null;
+        }
+        if (state.tickTimerId) {
+          clearInterval(state.tickTimerId);
+          state.tickTimerId = null;
+        }
+        (_a = options.onCancel) == null ? void 0 : _a.call(options, event);
+        state.startTime = 0;
+      }
+    };
+    el.__longPress = state;
+    on(el, "mousedown", state.startHandler);
+    on(el, "mouseup", state.endHandler);
+    on(el, "mouseleave", state.endHandler);
+    on(el, "mousemove", state.moveHandler);
+    on(el, "touchstart", state.startHandler, { passive: !options.prevent });
+    on(el, "touchend", state.endHandler);
+    on(el, "touchcancel", state.endHandler);
+    on(el, "touchmove", state.moveHandler, { passive: true });
+  },
+  updated(el, binding) {
+    const state = el.__longPress;
+    if (!state) {
+      const options = normalizeOptions$7(binding.value);
+      if (!options.disabled) {
+        el.__longPress = null;
+      }
+      return;
+    }
+    state.options = normalizeOptions$7(binding.value);
+  },
+  unmounted(el) {
+    const state = el.__longPress;
+    if (!state) return;
+    if (state.timerId) {
+      clearTimeout(state.timerId);
+    }
+    if (state.tickTimerId) {
+      clearInterval(state.tickTimerId);
+    }
+    off(el, "mousedown", state.startHandler);
+    off(el, "mouseup", state.endHandler);
+    off(el, "mouseleave", state.endHandler);
+    off(el, "mousemove", state.moveHandler);
+    off(el, "touchstart", state.startHandler);
+    off(el, "touchend", state.endHandler);
+    off(el, "touchcancel", state.endHandler);
+    off(el, "touchmove", state.moveHandler);
+    delete el.__longPress;
+  }
+});
+function normalizeOptions$6(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding, class: "v-hover" };
+  }
+  return __spreadValues({
+    class: "v-hover",
+    disabled: false,
+    enterDelay: 0,
+    leaveDelay: 0
+  }, binding);
+}
+const vHover = defineDirective({
+  name: "hover",
+  ssr: false,
+  defaults: {
+    class: "v-hover",
+    disabled: false,
+    enterDelay: 0,
+    leaveDelay: 0
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$6(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const state = {
+      options,
+      isHovering: false,
+      enterTimerId: null,
+      leaveTimerId: null,
+      enterHandler: () => {
+      },
+      leaveHandler: () => {
+      }
+    };
+    state.enterHandler = (e) => {
+      const event = e;
+      if (state.leaveTimerId) {
+        clearTimeout(state.leaveTimerId);
+        state.leaveTimerId = null;
+      }
+      if (state.isHovering) return;
+      if (options.enterDelay && options.enterDelay > 0) {
+        state.enterTimerId = setTimeout(() => {
+          state.isHovering = true;
+          applyHoverState(el, state, event);
+        }, options.enterDelay);
+      } else {
+        state.isHovering = true;
+        applyHoverState(el, state, event);
+      }
+    };
+    state.leaveHandler = (e) => {
+      const event = e;
+      if (state.enterTimerId) {
+        clearTimeout(state.enterTimerId);
+        state.enterTimerId = null;
+      }
+      if (!state.isHovering) return;
+      if (options.leaveDelay && options.leaveDelay > 0) {
+        state.leaveTimerId = setTimeout(() => {
+          state.isHovering = false;
+          applyLeaveState(el, state, event);
+        }, options.leaveDelay);
+      } else {
+        state.isHovering = false;
+        applyLeaveState(el, state, event);
+      }
+    };
+    el.__hover = state;
+    on(el, "mouseenter", state.enterHandler);
+    on(el, "mouseleave", state.leaveHandler);
+  },
+  updated(el, binding) {
+    const state = el.__hover;
+    if (!state) return;
+    const newOptions = normalizeOptions$6(binding.value);
+    if (newOptions.disabled && !state.options.disabled) {
+      el.classList.remove(state.options.class || "v-hover");
+    } else if (!newOptions.disabled && state.options.disabled) ;
+    state.options = newOptions;
+  },
+  unmounted(el) {
+    const state = el.__hover;
+    if (!state) return;
+    if (state.enterTimerId) {
+      clearTimeout(state.enterTimerId);
+    }
+    if (state.leaveTimerId) {
+      clearTimeout(state.leaveTimerId);
+    }
+    off(el, "mouseenter", state.enterHandler);
+    off(el, "mouseleave", state.leaveHandler);
+    el.classList.remove(state.options.class || "v-hover");
+    delete el.__hover;
+  }
+});
+function applyHoverState(el, state, e) {
+  var _a, _b;
+  const { options } = state;
+  if (options.class) {
+    el.classList.add(options.class);
+  }
+  el.dispatchEvent(new CustomEvent("hover:enter", { detail: { event: e } }));
+  (_a = options.onEnter) == null ? void 0 : _a.call(options, e);
+  (_b = options.handler) == null ? void 0 : _b.call(options, true, e);
+}
+function applyLeaveState(el, state, e) {
+  var _a, _b;
+  const { options } = state;
+  if (options.class) {
+    el.classList.remove(options.class);
+  }
+  el.dispatchEvent(new CustomEvent("hover:leave", { detail: { event: e } }));
+  (_a = options.onLeave) == null ? void 0 : _a.call(options, e);
+  (_b = options.handler) == null ? void 0 : _b.call(options, false, e);
+}
+function normalizeOptions$5(binding) {
+  if (binding === false) {
+    return { disabled: true, color: "currentColor", duration: 600 };
+  }
+  if (typeof binding === "string") {
+    return { color: binding, duration: 600 };
+  }
+  const base = {
+    color: "currentColor",
+    duration: 600,
+    disabled: false,
+    initialScale: 0,
+    finalScale: 2
+  };
+  return binding && typeof binding === "object" ? __spreadValues(__spreadValues({}, base), binding) : base;
+}
+function createRipple(event, el, options) {
+  const rect = el.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const y = event.clientY - rect.top;
+  const size = Math.max(rect.width, rect.height) * 2;
+  const ripple = document.createElement("span");
+  ripple.className = "v-ripple__wave";
+  ripple.style.cssText = `
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    background-color: ${options.color};
+    width: ${size}px;
+    height: ${size}px;
+    left: ${x - size / 2}px;
+    top: ${y - size / 2}px;
+    transform: scale(${options.initialScale});
+    opacity: 0.3;
+    z-index: 0;
+  `;
+  return ripple;
+}
+function animateRipple(ripple, options) {
+  const duration = options.duration || 600;
+  const initialScale = options.initialScale || 0;
+  const finalScale = options.finalScale || 2;
+  if (typeof ripple.animate === "function") {
+    ripple.animate(
+      [
+        { transform: `scale(${initialScale})`, opacity: 0.3 },
+        { transform: `scale(${finalScale})`, opacity: 0 }
+      ],
+      {
+        duration,
+        easing: "ease-out",
+        fill: "forwards"
+      }
+    ).onfinish = () => {
+      ripple.remove();
+    };
+  } else {
+    ripple.style.transition = `transform ${duration}ms ease-out, opacity ${duration}ms ease-out`;
+    String(ripple.offsetHeight);
+    ripple.style.transform = `scale(${finalScale})`;
+    ripple.style.opacity = "0";
+    setTimeout(() => {
+      ripple.remove();
+    }, duration);
+  }
+}
+const vRipple = defineDirective({
+  name: "ripple",
+  ssr: false,
+  defaults: {
+    color: "currentColor",
+    duration: 600,
+    disabled: false,
+    initialScale: 0,
+    finalScale: 2
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$5(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const computedStyle = getComputedStyle(el);
+    if (computedStyle.position === "static") {
+      el.style.position = "relative";
+    }
+    if (computedStyle.overflow === "visible") {
+      el.style.overflow = "hidden";
+    }
+    el.classList.add("v-ripple");
+    const state = {
+      options,
+      clickHandler: (e) => {
+        if (state.options.disabled) return;
+        const mouseEvent = e;
+        const ripple = createRipple(mouseEvent, el, state.options);
+        if (ripple) {
+          el.appendChild(ripple);
+          animateRipple(ripple, state.options);
+        }
+      }
+    };
+    el.__ripple = state;
+    on(el, "click", state.clickHandler);
+  },
+  updated(el, binding) {
+    const state = el.__ripple;
+    if (!state) return;
+    state.options = normalizeOptions$5(binding.value);
+  },
+  unmounted(el) {
+    const state = el.__ripple;
+    if (!state) return;
+    off(el, "click", state.clickHandler);
+    el.classList.remove("v-ripple");
+    delete el.__ripple;
+  }
+});
+const STATE_KEY$1 = "__mask";
+const TOKEN_PATTERNS = {
+  "#": /\d/,
+  A: /[A-Za-z]/,
+  N: /[A-Za-z0-9]/,
+  X: /./
+};
+function parseMask(mask, placeholder) {
+  return [...mask].map((char) => {
+    const pattern = TOKEN_PATTERNS[char];
+    return pattern ? { pattern, placeholder, isLiteral: false } : { pattern: new RegExp(`\\${char}`), placeholder: char, isLiteral: true };
+  });
+}
+function normalizeOptions$4(binding) {
+  if (typeof binding === "string") return { mask: binding, placeholder: "_", showPlaceholder: true };
+  if (!(binding == null ? void 0 : binding.mask)) throw new Error("[Directix] v-mask: mask is required");
+  return __spreadValues({ placeholder: "_", showPlaceholder: true, showMaskOnBlur: false, clearIncomplete: false, disabled: false }, binding);
+}
+function isInput(el) {
+  return el.tagName === "INPUT" || el.tagName === "TEXTAREA";
+}
+function formatValue(value, tokens, placeholder, showPlaceholder) {
+  let result = "", valueIndex = 0;
+  for (const token of tokens) {
+    if (valueIndex >= value.length) {
+      result += token.isLiteral ? token.placeholder : showPlaceholder ? placeholder : "";
+      continue;
+    }
+    const inputChar = value[valueIndex];
+    if (token.isLiteral) {
+      if (inputChar === token.placeholder) valueIndex++;
+      result += token.placeholder;
+    } else if (token.pattern.test(inputChar)) {
+      result += inputChar;
+      valueIndex++;
+    } else if (inputChar === placeholder) {
+      result += showPlaceholder ? placeholder : "";
+      valueIndex++;
+    } else {
+      valueIndex++;
+    }
+  }
+  return result;
+}
+function getRawValue(value, tokens, placeholder) {
+  let raw = "";
+  for (let i = 0; i < value.length && i < tokens.length; i++) {
+    if (!tokens[i].isLiteral && value[i] !== placeholder) {
+      raw += value[i];
+    }
+  }
+  return raw;
+}
+function isComplete(value, tokens, placeholder) {
+  for (let i = 0; i < tokens.length; i++) {
+    if (!tokens[i].isLiteral && (i >= value.length || value[i] === placeholder)) {
+      return false;
+    }
+  }
+  return true;
+}
+function getCursorPos(tokens, rawCursorPos) {
+  let pos = rawCursorPos;
+  while (pos < tokens.length && tokens[pos].isLiteral) {
+    pos++;
+  }
+  return Math.min(pos, tokens.length);
+}
+const vMask = defineDirective({
+  name: "mask",
+  ssr: false,
+  defaults: { placeholder: "_", showPlaceholder: true, showMaskOnBlur: false, clearIncomplete: false, disabled: false },
+  mounted(el, binding) {
+    var _a;
+    if (!isInput(el)) {
+      console.warn("[Directix] v-mask: directive must be used on input or textarea elements");
+      return;
+    }
+    const options = normalizeOptions$4(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const placeholder = options.placeholder || "_";
+    const tokens = parseMask(options.mask, placeholder);
+    const inputHandler = (e) => {
+      var _a2, _b, _c;
+      const target = e.target;
+      const rawValue = target.value;
+      const cursorPos = target.selectionStart || 0;
+      const formatted = formatValue(rawValue, tokens, placeholder, (_a2 = options.showPlaceholder) != null ? _a2 : true);
+      if (formatted !== rawValue) {
+        target.value = formatted;
+        target.setSelectionRange(getCursorPos(tokens, cursorPos), getCursorPos(tokens, cursorPos));
+        target.dispatchEvent(new Event("input", { bubbles: true }));
+        return;
+      }
+      (_b = options.onChange) == null ? void 0 : _b.call(options, formatted, getRawValue(formatted, tokens, placeholder));
+      if (isComplete(formatted, tokens, placeholder)) {
+        (_c = options.onComplete) == null ? void 0 : _c.call(options, formatted);
+      }
+    };
+    const focusHandler = () => {
+      if (!el.value && options.showPlaceholder) {
+        el.value = formatValue("", tokens, placeholder, true);
+      }
+    };
+    const blurHandler = () => {
+      if (!options.showMaskOnBlur && !isComplete(el.value, tokens, placeholder) && options.clearIncomplete) {
+        el.value = "";
+      }
+    };
+    on(el, "input", inputHandler);
+    on(el, "focus", focusHandler);
+    on(el, "blur", blurHandler);
+    el[STATE_KEY$1] = { options, tokens, placeholder, inputHandler, focusHandler, blurHandler };
+    if (el.value) {
+      el.value = formatValue(el.value, tokens, placeholder, (_a = options.showPlaceholder) != null ? _a : true);
+    }
+  },
+  updated(el, binding) {
+    const state = el[STATE_KEY$1];
+    if (!state) return;
+    state.options = normalizeOptions$4(binding.value);
+    state.tokens = parseMask(state.options.mask, state.placeholder);
+  },
+  unmounted(el) {
+    const state = el[STATE_KEY$1];
+    if (!state) return;
+    off(el, "input", state.inputHandler);
+    off(el, "focus", state.focusHandler);
+    off(el, "blur", state.blurHandler);
+    delete el[STATE_KEY$1];
+  }
+});
+const STATE_KEY = "__permission";
+const WILDCARD = "*";
+let globalConfig = null;
+function configurePermission(config) {
+  globalConfig = config;
+}
+function getPermissionConfig() {
+  return globalConfig;
+}
+function normalizeOptions$3(binding) {
+  if (!binding) {
+    throw new Error("[Directix] v-permission: permission value is required");
+  }
+  if (typeof binding === "string") {
+    return { value: binding };
+  }
+  if (Array.isArray(binding)) {
+    return { value: binding };
+  }
+  return binding;
+}
+function hasPermission(required, permissions) {
+  return permissions.includes(WILDCARD) || permissions.includes(required);
+}
+function verifyPermission(options) {
+  var _a;
+  if (options.check) {
+    return options.check(options.value, options.mode || "some");
+  }
+  if (!globalConfig) {
+    console.warn("[Directix] v-permission: No permission config provided");
+    return true;
+  }
+  const permissions = globalConfig.getPermissions();
+  const roles = ((_a = globalConfig.getRoles) == null ? void 0 : _a.call(globalConfig)) || [];
+  const roleMap = globalConfig.roleMap || {};
+  const required = Array.isArray(options.value) ? options.value : [options.value];
+  const mode = options.mode || "some";
+  function checkSingle(value) {
+    if (value in roleMap) {
+      return roles.includes(value);
+    }
+    if (hasPermission(value, permissions)) {
+      return true;
+    }
+    for (const role of roles) {
+      const rolePermissions = roleMap[role] || [];
+      if (hasPermission(value, rolePermissions)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return mode === "every" ? required.every(checkSingle) : required.some(checkSingle);
+}
+function handleDenied(el, action, state) {
+  var _a, _b;
+  switch (action) {
+    case "remove":
+      state.parentNode = el.parentNode;
+      state.placeholder = document.createComment("v-permission");
+      (_a = el.parentNode) == null ? void 0 : _a.insertBefore(state.placeholder, el);
+      (_b = el.parentNode) == null ? void 0 : _b.removeChild(el);
+      break;
+    case "disable":
+      state.originalDisabled = el.getAttribute("disabled") || false;
+      el.setAttribute("disabled", "true");
+      el.classList.add("v-permission--disabled");
+      break;
+    case "hide":
+      state.originalDisplay = el.style.display;
+      el.style.display = "none";
+      el.classList.add("v-permission--hidden");
+      break;
+  }
+}
+function handleGranted(el, action, state) {
+  switch (action) {
+    case "remove":
+      if (state.placeholder && state.parentNode) {
+        state.parentNode.insertBefore(el, state.placeholder);
+        state.parentNode.removeChild(state.placeholder);
+        state.placeholder = null;
+      }
+      break;
+    case "disable":
+      if (state.originalDisabled === false) {
+        el.removeAttribute("disabled");
+      } else if (state.originalDisabled) {
+        el.setAttribute("disabled", state.originalDisabled);
+      }
+      el.classList.remove("v-permission--disabled");
+      break;
+    case "hide":
+      el.style.display = state.originalDisplay || "";
+      el.classList.remove("v-permission--hidden");
+      break;
+  }
+}
+function getState(el) {
+  if (!el[STATE_KEY]) {
+    el[STATE_KEY] = {
+      options: { value: "" },
+      originalDisplay: "",
+      originalDisabled: false,
+      parentNode: null,
+      placeholder: null
+    };
+  }
+  return el[STATE_KEY];
+}
+function checkPermission(el, binding) {
+  var _a, _b;
+  const state = getState(el);
+  state.options = normalizeOptions$3(binding.value);
+  const granted = verifyPermission(state.options);
+  (_b = (_a = state.options).onChange) == null ? void 0 : _b.call(_a, granted);
+  const action = state.options.action || "remove";
+  if (granted) {
+    handleGranted(el, action, state);
+  } else {
+    handleDenied(el, action, state);
+  }
+}
+function cleanup(el) {
+  const state = el[STATE_KEY];
+  if ((state == null ? void 0 : state.placeholder) && state.parentNode) {
+    state.parentNode.removeChild(state.placeholder);
+  }
+  delete el[STATE_KEY];
+}
+const vPermission = defineDirective({
+  name: "permission",
+  ssr: true,
+  mounted(el, binding) {
+    checkPermission(el, binding);
+  },
+  updated(el, binding) {
+    checkPermission(el, binding);
+  },
+  unmounted(el) {
+    cleanup(el);
+  }
+});
+const DEFAULT_ALLOWED_TAGS = ["b", "i", "u", "strong", "em", "br", "p", "span", "div"];
+const DEFAULT_ALLOWED_ATTRIBUTES = ["title", "alt", "href", "src"];
+const DANGEROUS_TAGS = ["script", "iframe", "object", "embed", "form", "input", "style", "link", "meta", "base"];
+const DANGEROUS_ATTRIBUTES = ["onclick", "onerror", "onload", "onmouseover", "onfocus", "onblur", "onchange", "onsubmit"];
+function normalizeOptions$2(binding) {
+  if (binding === false) {
+    return { disabled: true };
+  }
+  if (binding === true) {
+    return {
+      allowedTags: DEFAULT_ALLOWED_TAGS,
+      allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES
+    };
+  }
+  return __spreadValues({
+    allowedTags: DEFAULT_ALLOWED_TAGS,
+    allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+    allowDataUrls: false,
+    allowStyles: false,
+    allowClass: false,
+    allowId: false,
+    disabled: false,
+    sanitizeOnUpdate: true
+  }, binding);
+}
+function sanitizeHtml(html, options) {
+  var _a;
+  if (options.handler) {
+    return options.handler(html);
+  }
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+  for (const tag of DANGEROUS_TAGS) {
+    const elements = temp.getElementsByTagName(tag);
+    while (elements.length > 0) {
+      (_a = elements[0].parentNode) == null ? void 0 : _a.removeChild(elements[0]);
+    }
+  }
+  const processElement = (el) => {
+    var _a2;
+    const tagName = el.tagName.toLowerCase();
+    if (options.allowedTags && !options.allowedTags.includes(tagName)) {
+      const text = document.createTextNode(el.textContent || "");
+      (_a2 = el.parentNode) == null ? void 0 : _a2.replaceChild(text, el);
+      return;
+    }
+    for (const attr of DANGEROUS_ATTRIBUTES) {
+      el.removeAttribute(attr);
+    }
+    const href = el.getAttribute("href");
+    if (href && href.toLowerCase().startsWith("javascript:")) {
+      el.removeAttribute("href");
+    }
+    if (!options.allowDataUrls) {
+      const src = el.getAttribute("src");
+      if (src && src.toLowerCase().startsWith("data:")) {
+        el.removeAttribute("src");
+      }
+    }
+    if (options.allowedAttributes) {
+      const attrs = Array.from(el.attributes);
+      for (const attr of attrs) {
+        const isAllowed = options.allowedAttributes.includes(attr.name.toLowerCase());
+        const isClass = attr.name === "class" && options.allowClass;
+        const isId = attr.name === "id" && options.allowId;
+        const isStyle = attr.name === "style" && options.allowStyles;
+        if (!isAllowed && !isClass && !isId && !isStyle) {
+          el.removeAttribute(attr.name);
+        }
+      }
+    }
+    for (const child of Array.from(el.children)) {
+      processElement(child);
+    }
+  };
+  for (const child of Array.from(temp.children)) {
+    processElement(child);
+  }
+  return temp.innerHTML;
+}
+const vSanitize = defineDirective({
+  name: "sanitize",
+  ssr: true,
+  defaults: {
+    allowedTags: DEFAULT_ALLOWED_TAGS,
+    allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+    allowDataUrls: false,
+    allowStyles: false,
+    allowClass: false,
+    allowId: false,
+    disabled: false,
+    sanitizeOnUpdate: true
+  },
+  mounted(el, binding) {
+    if (!isBrowser()) return;
+    const options = normalizeOptions$2(binding.value);
+    if (options.disabled) return;
+    el.__sanitize = { options };
+    const content = el.innerHTML;
+    if (content) {
+      el.innerHTML = sanitizeHtml(content, options);
+    }
+  },
+  updated(el, binding) {
+    const state = el.__sanitize;
+    if (!state) return;
+    state.options = normalizeOptions$2(binding.value);
+    if (state.options.disabled || !state.options.sanitizeOnUpdate) return;
+    const content = el.innerHTML;
+    if (content) {
+      el.innerHTML = sanitizeHtml(content, state.options);
+    }
+  },
+  unmounted(el) {
+    delete el.__sanitize;
+  }
+});
+function getResizeInfo(entry) {
+  return {
+    width: entry.contentRect.width,
+    height: entry.contentRect.height,
+    contentRect: entry.contentRect,
+    borderBoxSize: entry.borderBoxSize,
+    contentBoxSize: entry.contentBoxSize,
+    devicePixelContentBoxSize: entry.devicePixelContentBoxSize
+  };
+}
+function normalizeOptions$1(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding };
+  }
+  if (!binding) {
+    throw new Error("[Directix] v-resize: handler is required");
+  }
+  return __spreadValues({
+    disabled: false,
+    box: "content-box",
+    debounce: 0
+  }, binding);
+}
+function createFallbackResize(el, callback) {
+  const iframe = document.createElement("iframe");
+  iframe.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    pointer-events: none;
+    opacity: 0;
+  `;
+  el.appendChild(iframe);
+  const iWindow = iframe.contentWindow;
+  if (iWindow) {
+    iWindow.addEventListener("resize", callback);
+  }
+  return {
+    iframe,
+    cleanup: () => {
+      if (iWindow) {
+        iWindow.removeEventListener("resize", callback);
+      }
+      iframe.remove();
+    }
+  };
+}
+const vResize = defineDirective({
+  name: "resize",
+  ssr: false,
+  defaults: {
+    disabled: false,
+    box: "content-box",
+    debounce: 0
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions$1(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    const computedStyle = getComputedStyle(el);
+    if (computedStyle.position === "static") {
+      el.style.position = "relative";
+    }
+    const state = {
+      options,
+      observer: null,
+      debounceTimer: null,
+      pendingEntry: null,
+      fallbackIframe: null,
+      handler: (entry) => {
+        if (options.debounce && options.debounce > 0) {
+          state.pendingEntry = entry;
+          if (!state.debounceTimer) {
+            state.debounceTimer = setTimeout(() => {
+              if (state.pendingEntry) {
+                options.handler(state.pendingEntry);
+              }
+              state.debounceTimer = null;
+              state.pendingEntry = null;
+            }, options.debounce);
+          }
+        } else {
+          options.handler(entry);
+        }
+      }
+    };
+    el.__resize = state;
+    if (supportsResizeObserver()) {
+      state.observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          state.handler(entry);
+        }
+      });
+      state.observer.observe(el, { box: options.box });
+    } else {
+      console.warn("[Directix] v-resize: ResizeObserver not supported, using fallback");
+      const { iframe, cleanup: cleanup2 } = createFallbackResize(el, () => {
+        const rect = el.getBoundingClientRect();
+        const entry = {
+          target: el,
+          contentRect: rect,
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: []
+        };
+        state.handler(entry);
+        if (options.onFallback) {
+          options.onFallback(getResizeInfo(entry));
+        }
+      });
+      state.fallbackIframe = iframe;
+      el.__resizeCleanup = cleanup2;
+    }
+  },
+  updated(el, binding) {
+    const state = el.__resize;
+    if (!state) return;
+    state.options = normalizeOptions$1(binding.value);
+  },
+  unmounted(el) {
+    const state = el.__resize;
+    if (!state) return;
+    if (state.debounceTimer) {
+      clearTimeout(state.debounceTimer);
+    }
+    if (state.observer) {
+      state.observer.disconnect();
+    }
+    const cleanup2 = el.__resizeCleanup;
+    if (cleanup2) {
+      cleanup2();
+    }
+    delete el.__resize;
+    delete el.__resizeCleanup;
+  }
+});
+function normalizeOptions(binding) {
+  if (typeof binding === "function") {
+    return { handler: binding, childList: true };
+  }
+  if (!binding || !binding.handler) {
+    throw new Error("[Directix] v-mutation: handler is required");
+  }
+  return __spreadValues({
+    attributes: false,
+    childList: true,
+    subtree: false,
+    characterData: false,
+    attributeOldValue: false,
+    characterDataOldValue: false,
+    disabled: false
+  }, binding);
+}
+const vMutation = defineDirective({
+  name: "mutation",
+  ssr: false,
+  defaults: {
+    attributes: false,
+    childList: true,
+    subtree: false,
+    characterData: false,
+    attributeOldValue: false,
+    characterDataOldValue: false,
+    disabled: false
+  },
+  mounted(el, binding) {
+    const options = normalizeOptions(binding.value);
+    if (options.disabled || !isBrowser()) return;
+    if (!supportsMutationObserver()) {
+      console.warn("[Directix] v-mutation: MutationObserver not supported");
+      return;
+    }
+    const state = {
+      options,
+      observer: null
+    };
+    state.observer = new MutationObserver((mutations, observer) => {
+      options.handler(mutations, observer);
+    });
+    state.observer.observe(el, {
+      attributes: options.attributes,
+      attributeFilter: options.attributeFilter,
+      childList: options.childList,
+      subtree: options.subtree,
+      characterData: options.characterData,
+      attributeOldValue: options.attributeOldValue,
+      characterDataOldValue: options.characterDataOldValue
+    });
+    el.__mutation = state;
+  },
+  updated(el, binding) {
+    const state = el.__mutation;
+    if (!state) return;
+    const newOptions = normalizeOptions(binding.value);
+    if (newOptions.disabled && !state.options.disabled) {
+      if (state.observer) {
+        state.observer.disconnect();
+      }
+    } else if (!newOptions.disabled && state.options.disabled) {
+      if (state.observer) {
+        state.observer.observe(el, {
+          attributes: newOptions.attributes,
+          attributeFilter: newOptions.attributeFilter,
+          childList: newOptions.childList,
+          subtree: newOptions.subtree,
+          characterData: newOptions.characterData,
+          attributeOldValue: newOptions.attributeOldValue,
+          characterDataOldValue: newOptions.characterDataOldValue
+        });
+      }
+    } else if (!newOptions.disabled) {
+      if (newOptions.attributes !== state.options.attributes || newOptions.childList !== state.options.childList || newOptions.subtree !== state.options.subtree || newOptions.characterData !== state.options.characterData) {
+        if (state.observer) {
+          state.observer.disconnect();
+          state.observer.observe(el, {
+            attributes: newOptions.attributes,
+            attributeFilter: newOptions.attributeFilter,
+            childList: newOptions.childList,
+            subtree: newOptions.subtree,
+            characterData: newOptions.characterData,
+            attributeOldValue: newOptions.attributeOldValue,
+            characterDataOldValue: newOptions.characterDataOldValue
+          });
+        }
+      }
+    }
+    state.options = newOptions;
+  },
+  unmounted(el) {
+    const state = el.__mutation;
+    if (!state) return;
+    if (state.observer) {
+      state.observer.disconnect();
+    }
+    delete el.__mutation;
+  }
+});
+const allDirectives = {
+  "click-outside": vClickOutside,
+  copy: vCopy,
+  debounce: vDebounce,
+  throttle: vThrottle,
+  focus: vFocus,
+  lazy: vLazy,
+  intersect: vIntersect,
+  visible: vVisible,
+  loading: vLoading,
+  scroll: vScroll,
+  "infinite-scroll": vInfiniteScroll,
+  sticky: vSticky,
+  "long-press": vLongPress,
+  hover: vHover,
+  ripple: vRipple,
+  mask: vMask,
+  permission: vPermission,
+  sanitize: vSanitize,
+  resize: vResize,
+  mutation: vMutation
+};
+const install = (app, options = {}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  let vueVersion = null;
+  if (typeof app === "function" && ((_a = app.version) == null ? void 0 : _a.startsWith("2"))) {
+    vueVersion = 2;
+  } else if ((app == null ? void 0 : app.config) && ((_b = app == null ? void 0 : app.version) == null ? void 0 : _b.startsWith("3"))) {
+    vueVersion = 3;
+  } else if (typeof (app == null ? void 0 : app.directive) === "function" && typeof (app == null ? void 0 : app.mixin) === "function" && ((_c = app.version) == null ? void 0 : _c.startsWith("2"))) {
+    vueVersion = 2;
+  } else if (typeof window !== "undefined") {
+    const win = window;
+    if ((_e = (_d = win.Vue) == null ? void 0 : _d.version) == null ? void 0 : _e.startsWith("2")) {
+      vueVersion = 2;
+    } else if ((_g = (_f = win.Vue) == null ? void 0 : _f.version) == null ? void 0 : _g.startsWith("3")) {
+      vueVersion = 3;
+    }
+  }
+  if (vueVersion) {
+    setVueVersion(vueVersion);
+  }
   const { directives, all = false } = options;
   if (all || !directives) {
     Object.entries(allDirectives).forEach(([name, directive]) => {
@@ -1052,6 +3113,7 @@ export {
   addCleanup$1 as addCleanupVue2,
   addCleanup as addCleanupVue3,
   vClickOutside as clickOutside,
+  configurePermission,
   vCopy as copy,
   createVue2Directive,
   createVue3Directive,
@@ -1064,7 +3126,11 @@ export {
   vFocus as focus,
   generateId,
   get,
+  getPermissionConfig,
   getVueVersion,
+  vHover as hover,
+  vInfiniteScroll as infiniteScroll,
+  vIntersect as intersect,
   isArray,
   isBoolean,
   isBrowser,
@@ -1076,9 +3142,23 @@ export {
   isSSR,
   isString,
   isVue2,
+  isVue27,
   isVue3,
+  vLazy as lazy,
+  vLoading as loading,
+  vLongPress as longPress,
+  vMask as mask,
+  vMutation as mutation,
   parseTime,
+  vPermission as permission,
+  resetVueVersion,
+  vResize as resize,
+  vRipple as ripple,
+  vSanitize as sanitize,
+  vScroll as scroll,
   set,
+  setVueVersion,
+  vSticky as sticky,
   supportsClipboard,
   supportsIntersectionObserver,
   supportsMutationObserver,
@@ -1090,6 +3170,22 @@ export {
   vCopy,
   vDebounce,
   vFocus,
-  vThrottle
+  vHover,
+  vInfiniteScroll,
+  vIntersect,
+  vLazy,
+  vLoading,
+  vLongPress,
+  vMask,
+  vMutation,
+  vPermission,
+  vResize,
+  vRipple,
+  vSanitize,
+  vScroll,
+  vSticky,
+  vThrottle,
+  vVisible,
+  vVisible as visible
 };
 //# sourceMappingURL=index.mjs.map