directix 1.4.0 → 1.4.1

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * directix v1.4.0
+ * directix v1.4.1
  * 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.
@@ -57,7 +57,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 /*!
- * directix v1.4.0
+ * directix v1.4.1
  * 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.
@@ -2803,15 +2803,15 @@ var __async = (__this, __arguments, generator) => {
       delete el[STATE_KEY$3];
     }
   });
-  let globalObserver = null;
-  function getGlobalObserver(preload) {
-    if (globalObserver) return globalObserver;
-    globalObserver = new IntersectionObserver(
+  let globalObserver$1 = null;
+  function getGlobalObserver$1(preload) {
+    if (globalObserver$1) return globalObserver$1;
+    globalObserver$1 = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             load(entry.target);
-            globalObserver == null ? void 0 : globalObserver.unobserve(entry.target);
+            globalObserver$1 == null ? void 0 : globalObserver$1.unobserve(entry.target);
           }
         });
       },
@@ -2819,9 +2819,9 @@ var __async = (__this, __arguments, generator) => {
         rootMargin: `${preload}px`
       }
     );
-    return globalObserver;
+    return globalObserver$1;
   }
-  function setSrc(el, src) {
+  function setSrc$1(el, src) {
     if (el.tagName === "IMG") {
       el.src = src;
     } else {
@@ -2846,7 +2846,7 @@ var __async = (__this, __arguments, generator) => {
     const img = new Image();
     img.onload = () => {
       var _a, _b;
-      setSrc(el, state.options.src);
+      setSrc$1(el, state.options.src);
       setLazyState(el, "loaded");
       el.classList.remove("v-lazy--loading");
       el.classList.add("v-lazy--loaded");
@@ -2860,7 +2860,7 @@ var __async = (__this, __arguments, generator) => {
         return;
       }
       if (state.options.error) {
-        setSrc(el, state.options.error);
+        setSrc$1(el, state.options.error);
       }
       setLazyState(el, "error");
       el.classList.add("v-lazy--error");
@@ -2879,7 +2879,7 @@ var __async = (__this, __arguments, generator) => {
       state.observer = state.options.observer;
       state.observer.observe(el);
     } else {
-      const observer = getGlobalObserver(state.options.preload || 0);
+      const observer = getGlobalObserver$1(state.options.preload || 0);
       state.observer = observer;
       observer.observe(el);
     }
@@ -2889,8 +2889,8 @@ var __async = (__this, __arguments, generator) => {
     if (!state) return;
     if (state.observer) {
       state.observer.unobserve(el);
-    } else if (globalObserver) {
-      globalObserver.unobserve(el);
+    } else if (globalObserver$1) {
+      globalObserver$1.unobserve(el);
     }
   }
   function normalizeOptions$n(binding) {
@@ -2916,7 +2916,7 @@ var __async = (__this, __arguments, generator) => {
       }
       setLazyState(el, "pending");
       if (options.placeholder) {
-        setSrc(el, options.placeholder);
+        setSrc$1(el, options.placeholder);
       }
       el.classList.add("v-lazy");
       const state = {
@@ -2941,7 +2941,7 @@ var __async = (__this, __arguments, generator) => {
           setLazyState(el, "pending");
           el.classList.remove("v-lazy--loaded", "v-lazy--error");
           if (newOptions.placeholder) {
-            setSrc(el, newOptions.placeholder);
+            setSrc$1(el, newOptions.placeholder);
           }
           observe(el);
         }
@@ -2966,12 +2966,12 @@ var __async = (__this, __arguments, generator) => {
       disabled: false
     }, binding);
   }
-  const DEFAULT_SPINNER = `
+  const DEFAULT_SPINNER$1 = `
 <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) {
+  function createLoadingOverlay$1(options) {
     const overlay = document.createElement("div");
     overlay.className = options.loadingClass || "v-loading";
     overlay.style.cssText = `
@@ -2987,7 +2987,7 @@ var __async = (__this, __arguments, generator) => {
     align-items: center;
     justify-content: center;
   `;
-    const spinnerHtml = options.spinner || DEFAULT_SPINNER;
+    const spinnerHtml = options.spinner || DEFAULT_SPINNER$1;
     const spinnerContainer = document.createElement("div");
     spinnerContainer.className = options.spinnerClass || "v-loading__spinner";
     spinnerContainer.innerHTML = spinnerHtml;
@@ -3066,7 +3066,7 @@ var __async = (__this, __arguments, generator) => {
   });
   function showLoading(el, state) {
     if (state.loadingOverlay) return;
-    state.loadingOverlay = createLoadingOverlay(state.options);
+    state.loadingOverlay = createLoadingOverlay$1(state.options);
     el.appendChild(state.loadingOverlay);
     if (state.options.lock) {
       el.style.overflow = "hidden";
@@ -3290,15 +3290,15 @@ var __async = (__this, __arguments, generator) => {
     }
   });
   const STATE_KEY$2 = "__mask";
-  const TOKEN_PATTERNS = {
+  const TOKEN_PATTERNS$1 = {
     "#": /\d/,
     A: /[A-Za-z]/,
     N: /[A-Za-z0-9]/,
     X: /./
   };
-  function parseMask(mask, placeholder) {
+  function parseMask$1(mask, placeholder) {
     return [...mask].map((char) => {
-      const pattern = TOKEN_PATTERNS[char];
+      const pattern = TOKEN_PATTERNS$1[char];
       return pattern ? { pattern, placeholder, isLiteral: false } : { pattern: new RegExp(`\\${char}`), placeholder: char, isLiteral: true };
     });
   }
@@ -3370,7 +3370,7 @@ var __async = (__this, __arguments, generator) => {
       const options = normalizeOptions$j(binding.value);
       if (options.disabled || !isBrowser()) return;
       const placeholder = options.placeholder || "_";
-      const tokens = parseMask(options.mask, placeholder);
+      const tokens = parseMask$1(options.mask, placeholder);
       const inputHandler = (e) => {
         var _a2, _b, _c;
         const target = e.target;
@@ -3410,7 +3410,7 @@ var __async = (__this, __arguments, generator) => {
       const state = el[STATE_KEY$2];
       if (!state) return;
       state.options = normalizeOptions$j(binding.value);
-      state.tokens = parseMask(state.options.mask, state.placeholder);
+      state.tokens = parseMask$1(state.options.mask, state.placeholder);
     },
     unmounted(el) {
       const state = el[STATE_KEY$2];
@@ -3763,6 +3763,14 @@ var __async = (__this, __arguments, generator) => {
     }
   });
   const STATE_KEY$1 = "__permission";
+  const WILDCARD$1 = "*";
+  let globalConfig = null;
+  function configurePermission(config) {
+    globalConfig = config;
+  }
+  function getPermissionConfig() {
+    return globalConfig;
+  }
   function normalizeOptions$h(binding) {
     if (!binding) {
       throw new Error("[Directix] v-permission: permission value is required");
@@ -3775,14 +3783,39 @@ var __async = (__this, __arguments, generator) => {
     }
     return binding;
   }
+  function hasPermission$1(required, permissions) {
+    return permissions.includes(WILDCARD$1) || 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$1(value, permissions)) {
+        return true;
+      }
+      for (const role of roles) {
+        const rolePermissions = roleMap[role] || [];
+        if (hasPermission$1(value, rolePermissions)) {
+          return true;
+        }
+      }
+      return false;
+    }
+    return mode === "every" ? required.every(checkSingle) : required.some(checkSingle);
   }
   function handleDenied(el, action, state) {
     var _a, _b;
@@ -4492,23 +4525,23 @@ var __async = (__this, __arguments, generator) => {
       delete el.__ripple;
     }
   });
-  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"];
+  const DEFAULT_ALLOWED_TAGS$1 = ["b", "i", "u", "strong", "em", "br", "p", "span", "div"];
+  const DEFAULT_ALLOWED_ATTRIBUTES$1 = ["title", "alt", "href", "src"];
+  const DANGEROUS_TAGS$1 = ["script", "iframe", "object", "embed", "form", "input", "style", "link", "meta", "base"];
+  const DANGEROUS_ATTRIBUTES$1 = ["onclick", "onerror", "onload", "onmouseover", "onfocus", "onblur", "onchange", "onsubmit"];
   function normalizeOptions$c(binding) {
     if (binding === false) {
       return { disabled: true };
     }
     if (binding === true) {
       return {
-        allowedTags: DEFAULT_ALLOWED_TAGS,
-        allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES
+        allowedTags: DEFAULT_ALLOWED_TAGS$1,
+        allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES$1
       };
     }
     return __spreadValues({
-      allowedTags: DEFAULT_ALLOWED_TAGS,
-      allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+      allowedTags: DEFAULT_ALLOWED_TAGS$1,
+      allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES$1,
       allowDataUrls: false,
       allowStyles: false,
       allowClass: false,
@@ -4524,7 +4557,7 @@ var __async = (__this, __arguments, generator) => {
     }
     const temp = document.createElement("div");
     temp.innerHTML = html;
-    for (const tag of DANGEROUS_TAGS) {
+    for (const tag of DANGEROUS_TAGS$1) {
       const elements = temp.getElementsByTagName(tag);
       while (elements.length > 0) {
         (_a = elements[0].parentNode) == null ? void 0 : _a.removeChild(elements[0]);
@@ -4538,7 +4571,7 @@ var __async = (__this, __arguments, generator) => {
         (_a2 = el.parentNode) == null ? void 0 : _a2.replaceChild(text, el);
         return;
       }
-      for (const attr of DANGEROUS_ATTRIBUTES) {
+      for (const attr of DANGEROUS_ATTRIBUTES$1) {
         el.removeAttribute(attr);
       }
       const href = el.getAttribute("href");
@@ -4576,8 +4609,8 @@ var __async = (__this, __arguments, generator) => {
     name: "sanitize",
     ssr: true,
     defaults: {
-      allowedTags: DEFAULT_ALLOWED_TAGS,
-      allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES,
+      allowedTags: DEFAULT_ALLOWED_TAGS$1,
+      allowedAttributes: DEFAULT_ALLOWED_ATTRIBUTES$1,
       allowDataUrls: false,
       allowStyles: false,
       allowClass: false,
@@ -7506,6 +7539,105 @@ var __async = (__this, __arguments, generator) => {
       bind
     };
   }
+  function useInfiniteScroll(options) {
+    const {
+      onLoad,
+      loading: externalLoading,
+      finished: externalFinished,
+      distance = 0,
+      immediate = true,
+      disabled = false
+    } = options;
+    const internalLoading = vue.ref(false);
+    const internalFinished = vue.ref(false);
+    const loading = externalLoading || internalLoading;
+    const finished = externalFinished || internalFinished;
+    let scrollContainer = null, scrollHandler = null, observer = null, sentinel = null;
+    function load2() {
+      return __async(this, null, function* () {
+        if (vue.unref(loading) || vue.unref(finished) || vue.unref(disabled)) return;
+        internalLoading.value = true;
+        try {
+          yield onLoad();
+        } finally {
+          internalLoading.value = false;
+        }
+      });
+    }
+    function checkScroll() {
+      if (!scrollContainer || vue.unref(loading) || vue.unref(finished) || vue.unref(disabled)) return;
+      const currentDistance = vue.unref(distance);
+      let scrollBottom, containerHeight;
+      if (scrollContainer === window) {
+        scrollBottom = document.documentElement.scrollHeight - window.scrollY;
+        containerHeight = window.innerHeight;
+      } else {
+        const el = scrollContainer;
+        scrollBottom = el.scrollHeight - el.scrollTop;
+        containerHeight = el.clientHeight;
+      }
+      if (scrollBottom <= containerHeight + currentDistance) {
+        load2();
+      }
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      stop();
+      if (supportsIntersectionObserver()) {
+        sentinel = document.createElement("div");
+        sentinel.style.cssText = "height: 1px; width: 100%; visibility: hidden;";
+        element.appendChild(sentinel);
+        const parent = getScrollParent(element);
+        const root = parent instanceof Window ? null : parent;
+        observer = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting) {
+              load2();
+            }
+          },
+          {
+            root,
+            rootMargin: `${vue.unref(distance)}px`
+          }
+        );
+        observer.observe(sentinel);
+      } else {
+        scrollContainer = getScrollParent(element);
+        scrollHandler = checkScroll;
+        scrollContainer.addEventListener("scroll", scrollHandler);
+      }
+      if (immediate) {
+        load2();
+      }
+      return stop;
+    }
+    function stop() {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+      if (sentinel) {
+        sentinel.remove();
+        sentinel = null;
+      }
+      if (scrollContainer && scrollHandler) {
+        scrollContainer.removeEventListener("scroll", scrollHandler);
+      }
+      scrollContainer = null;
+      scrollHandler = null;
+    }
+    vue.onUnmounted(() => {
+      stop();
+    });
+    return {
+      loading: vue.readonly(loading),
+      finished: vue.readonly(finished),
+      load: load2,
+      bind,
+      stop
+    };
+  }
   function useIntersect(options = {}) {
     const {
       handler,
@@ -7577,6 +7709,269 @@ var __async = (__this, __arguments, generator) => {
       stop
     };
   }
+  let globalObserver = null;
+  function getGlobalObserver(preload) {
+    if (globalObserver) return globalObserver;
+    globalObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const el = entry.target;
+            const loadFn = el.__lazyLoad;
+            if (loadFn) {
+              loadFn();
+              globalObserver == null ? void 0 : globalObserver.unobserve(el);
+            }
+          }
+        });
+      },
+      {
+        rootMargin: `${preload}px`
+      }
+    );
+    return globalObserver;
+  }
+  function setSrc(el, src) {
+    if (el.tagName === "IMG") {
+      el.src = src;
+    } else {
+      el.style.backgroundImage = `url("${src}")`;
+    }
+  }
+  function useLazy(options = {}) {
+    const {
+      src,
+      placeholder,
+      error,
+      preload = 0,
+      onLoad,
+      onError,
+      attempt = 1
+    } = options;
+    const state = vue.ref("pending");
+    const isLoading = vue.ref(false);
+    const isLoaded = vue.ref(false);
+    const hasError = vue.ref(false);
+    let currentElement = null, attemptCount = 0, observer = null;
+    function loadImage() {
+      const srcValue = vue.unref(src);
+      if (!srcValue || !currentElement) return;
+      if (state.value === "loading") return;
+      state.value = "loading";
+      isLoading.value = true;
+      const img = new Image();
+      img.onload = () => {
+        setSrc(currentElement, srcValue);
+        state.value = "loaded";
+        isLoading.value = false;
+        isLoaded.value = true;
+        hasError.value = false;
+        currentElement == null ? void 0 : currentElement.classList.remove("v-lazy--loading");
+        currentElement == null ? void 0 : currentElement.classList.add("v-lazy--loaded");
+        onLoad == null ? void 0 : onLoad(currentElement);
+      };
+      img.onerror = () => {
+        currentElement == null ? void 0 : currentElement.classList.remove("v-lazy--loading");
+        attemptCount++;
+        if (attemptCount < attempt) {
+          setTimeout(() => loadImage(), 1e3 * attemptCount);
+          return;
+        }
+        if (error && currentElement) {
+          setSrc(currentElement, error);
+        }
+        state.value = "error";
+        isLoading.value = false;
+        hasError.value = true;
+        currentElement == null ? void 0 : currentElement.classList.add("v-lazy--error");
+        onError == null ? void 0 : onError(currentElement, new Error("Failed to load image"));
+      };
+      currentElement.classList.add("v-lazy--loading");
+      img.src = srcValue;
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      unbind();
+      currentElement = element;
+      attemptCount = 0;
+      state.value = "pending";
+      element.classList.add("v-lazy");
+      if (placeholder) {
+        setSrc(element, placeholder);
+      }
+      element.__lazyLoad = loadImage;
+      if (!supportsIntersectionObserver()) {
+        loadImage();
+        return unbind;
+      }
+      observer = getGlobalObserver(preload);
+      observer.observe(element);
+      return unbind;
+    }
+    function unbind() {
+      if (currentElement) {
+        if (observer) {
+          observer.unobserve(currentElement);
+        }
+        delete currentElement.__lazyLoad;
+        currentElement.classList.remove("v-lazy", "v-lazy--loading", "v-lazy--loaded", "v-lazy--error");
+      }
+      currentElement = null;
+    }
+    function reset() {
+      state.value = "pending";
+      isLoading.value = false;
+      isLoaded.value = false;
+      hasError.value = false;
+      attemptCount = 0;
+    }
+    vue.onUnmounted(() => {
+      unbind();
+    });
+    return {
+      state: vue.readonly(state),
+      isLoading: vue.readonly(isLoading),
+      isLoaded: vue.readonly(isLoaded),
+      hasError: vue.readonly(hasError),
+      bind,
+      load: loadImage,
+      reset
+    };
+  }
+  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;
+  }
+  function useLoading(options = {}) {
+    const {
+      initial = false,
+      text,
+      loadingClass = "v-loading",
+      spinnerClass = "v-loading__spinner",
+      textClass = "v-loading__text",
+      spinner,
+      background = "rgba(255, 255, 255, 0.9)",
+      lock = false
+    } = options;
+    const loading = vue.ref(vue.unref(initial));
+    let currentElement = null, loadingOverlay = null, originalPosition = "", originalOverflow = "";
+    function showLoading2() {
+      if (!currentElement || loadingOverlay) return;
+      loadingOverlay = createLoadingOverlay({
+        text: vue.unref(text),
+        loadingClass,
+        spinnerClass,
+        textClass,
+        spinner,
+        background
+      });
+      currentElement.appendChild(loadingOverlay);
+      if (lock) {
+        currentElement.style.overflow = "hidden";
+      }
+      currentElement.classList.add("v-loading--active");
+    }
+    function hideLoading2() {
+      if (!currentElement || !loadingOverlay) return;
+      loadingOverlay.remove();
+      loadingOverlay = null;
+      if (lock) {
+        currentElement.style.overflow = originalOverflow;
+      }
+      currentElement.classList.remove("v-loading--active");
+    }
+    function start() {
+      loading.value = true;
+    }
+    function stop() {
+      loading.value = false;
+    }
+    function toggle() {
+      loading.value = !loading.value;
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      unbind();
+      currentElement = element;
+      originalPosition = element.style.position;
+      originalOverflow = element.style.overflow;
+      const computedStyle = getComputedStyle(element);
+      if (computedStyle.position === "static") {
+        element.style.position = "relative";
+      }
+      if (loading.value) {
+        showLoading2();
+      }
+      return unbind;
+    }
+    function unbind() {
+      hideLoading2();
+      if (currentElement) {
+        currentElement.style.position = originalPosition;
+        currentElement.style.overflow = originalOverflow;
+      }
+      currentElement = null;
+    }
+    vue.watch(loading, (newValue) => {
+      if (newValue) {
+        showLoading2();
+      } else {
+        hideLoading2();
+      }
+    });
+    if (typeof text === "object" && "value" in text) {
+      vue.watch(text, (newText) => {
+        if (loadingOverlay) {
+          const textEl = loadingOverlay.querySelector(`.${textClass}`);
+          if (textEl) {
+            textEl.textContent = newText || "";
+          }
+        }
+      });
+    }
+    vue.onUnmounted(() => {
+      unbind();
+    });
+    return {
+      loading,
+      start,
+      stop,
+      toggle,
+      bind
+    };
+  }
   function getEventPosition(e) {
     if ("touches" in e && e.touches.length > 0) {
       return {
@@ -7720,40 +8115,183 @@ var __async = (__this, __arguments, generator) => {
   function createLowercaser(first = false) {
     return (text) => lowercaseText(text, first);
   }
-  function formatMoney(value, options = {}) {
+  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 useMask(options) {
     const {
-      precision = 2,
-      separator = ",",
-      decimal = ".",
-      symbol = "$",
-      symbolPosition = "before"
+      mask,
+      placeholder = "_",
+      showPlaceholder = true,
+      showMaskOnBlur = false,
+      clearIncomplete = false,
+      disabled: _disabled = false,
+      onChange,
+      onComplete
     } = options;
-    const fixed = value.toFixed(precision);
-    const [intPart, decPart] = fixed.split(".");
-    const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
-    let result = formattedInt;
-    if (precision > 0 && decPart) {
-      result += decimal + decPart;
+    let currentElement = null, inputHandler = null, focusHandler = null, blurHandler = null;
+    function getTokens() {
+      return parseMask(vue.unref(mask), placeholder);
+    }
+    function formatValue2(value, tokens, show) {
+      let result = "", valueIndex = 0;
+      for (const token of tokens) {
+        if (valueIndex >= value.length) {
+          result += token.isLiteral ? token.placeholder : show ? 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 += show ? placeholder : "";
+          valueIndex++;
+        } else {
+          valueIndex++;
+        }
+      }
+      return result;
     }
-    return symbolPosition === "before" ? symbol + result : result + symbol;
-  }
-  function parseMoney(formatted, options = {}) {
-    const { decimal = ".", symbol = "$" } = options;
-    let cleaned = formatted.replace(new RegExp(`[${symbol}\\s]`, "g"), "");
-    if (decimal !== ".") {
-      cleaned = cleaned.replace(/,/g, "");
-      cleaned = cleaned.replace(new RegExp(`\\${decimal}`, "g"), ".");
-    } else {
-      cleaned = cleaned.replace(/,/g, "");
+    function getRawValue2(value, tokens) {
+      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;
     }
-    return parseFloat(cleaned) || 0;
-  }
-  function useMoney(options) {
-    const {
-      value,
-      symbol = "$",
-      symbolPosition = "before",
-      precision = 2,
+    function checkComplete(value, tokens) {
+      for (let i = 0; i < tokens.length; i++) {
+        if (!tokens[i].isLiteral && (i >= value.length || value[i] === placeholder)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    function getCursorPos2(tokens, rawCursorPos) {
+      let pos = rawCursorPos;
+      while (pos < tokens.length && tokens[pos].isLiteral) {
+        pos++;
+      }
+      return Math.min(pos, tokens.length);
+    }
+    function handleInput(e) {
+      const target = e.target;
+      const tokens = getTokens();
+      const rawValue = target.value;
+      const cursorPos = target.selectionStart || 0;
+      const formatted = formatValue2(rawValue, tokens, showPlaceholder);
+      if (formatted !== rawValue) {
+        target.value = formatted;
+        target.setSelectionRange(getCursorPos2(tokens, cursorPos), getCursorPos2(tokens, cursorPos));
+        target.dispatchEvent(new Event("input", { bubbles: true }));
+        return;
+      }
+      onChange == null ? void 0 : onChange(formatted, getRawValue2(formatted, tokens));
+      if (checkComplete(formatted, tokens)) {
+        onComplete == null ? void 0 : onComplete(formatted);
+      }
+    }
+    function handleFocus() {
+      if (!currentElement) return;
+      const tokens = getTokens();
+      if (!currentElement.value && showPlaceholder) {
+        currentElement.value = formatValue2("", tokens, true);
+      }
+    }
+    function handleBlur() {
+      if (!currentElement) return;
+      const tokens = getTokens();
+      if (!showMaskOnBlur && !checkComplete(currentElement.value, tokens) && clearIncomplete) {
+        currentElement.value = "";
+      }
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      unbind();
+      currentElement = element;
+      inputHandler = handleInput;
+      focusHandler = handleFocus;
+      blurHandler = handleBlur;
+      element.addEventListener("input", inputHandler);
+      element.addEventListener("focus", focusHandler);
+      element.addEventListener("blur", blurHandler);
+      if (element.value) {
+        const tokens = getTokens();
+        element.value = formatValue2(element.value, tokens, showPlaceholder);
+      }
+      return unbind;
+    }
+    function unbind() {
+      if (currentElement) {
+        if (inputHandler) currentElement.removeEventListener("input", inputHandler);
+        if (focusHandler) currentElement.removeEventListener("focus", focusHandler);
+        if (blurHandler) currentElement.removeEventListener("blur", blurHandler);
+      }
+      currentElement = null;
+      inputHandler = null;
+      focusHandler = null;
+      blurHandler = null;
+    }
+    vue.onUnmounted(() => {
+      unbind();
+    });
+    return {
+      getFormattedValue: (value) => formatValue2(value, getTokens(), showPlaceholder),
+      getRawValue: (value) => getRawValue2(value, getTokens()),
+      isComplete: (value) => checkComplete(value, getTokens()),
+      bind
+    };
+  }
+  function formatMoney(value, options = {}) {
+    const {
+      precision = 2,
+      separator = ",",
+      decimal = ".",
+      symbol = "$",
+      symbolPosition = "before"
+    } = options;
+    const fixed = value.toFixed(precision);
+    const [intPart, decPart] = fixed.split(".");
+    const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+    let result = formattedInt;
+    if (precision > 0 && decPart) {
+      result += decimal + decPart;
+    }
+    return symbolPosition === "before" ? symbol + result : result + symbol;
+  }
+  function parseMoney(formatted, options = {}) {
+    const { decimal = ".", symbol = "$" } = options;
+    let cleaned = formatted.replace(new RegExp(`[${symbol}\\s]`, "g"), "");
+    if (decimal !== ".") {
+      cleaned = cleaned.replace(/,/g, "");
+      cleaned = cleaned.replace(new RegExp(`\\${decimal}`, "g"), ".");
+    } else {
+      cleaned = cleaned.replace(/,/g, "");
+    }
+    return parseFloat(cleaned) || 0;
+  }
+  function useMoney(options) {
+    const {
+      value,
+      symbol = "$",
+      symbolPosition = "before",
+      precision = 2,
       separator = ",",
       decimal = "."
     } = options;
@@ -7791,6 +8329,68 @@ var __async = (__this, __arguments, generator) => {
   function createMoneyFormatter(options = {}) {
     return (value) => formatMoney(value, options);
   }
+  function useMutation(options) {
+    const {
+      handler,
+      attributes = false,
+      attributeFilter,
+      childList = true,
+      subtree = false,
+      characterData = false,
+      attributeOldValue = false,
+      characterDataOldValue = false,
+      disabled = false
+    } = options;
+    let currentElement = null, observer = null;
+    function createObserver2() {
+      if (!isBrowser() || !supportsMutationObserver()) {
+        console.warn("[Directix] useMutation: MutationObserver not supported");
+        return null;
+      }
+      return new MutationObserver((mutations, obs) => {
+        if (vue.unref(disabled)) return;
+        handler(mutations, obs);
+      });
+    }
+    function start() {
+      if (!currentElement || !observer || vue.unref(disabled)) return;
+      observer.observe(currentElement, {
+        attributes,
+        attributeFilter,
+        childList,
+        subtree,
+        characterData,
+        attributeOldValue,
+        characterDataOldValue
+      });
+    }
+    function stop() {
+      if (observer) {
+        observer.disconnect();
+      }
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      stop();
+      currentElement = element;
+      observer = createObserver2();
+      if (observer && !vue.unref(disabled)) {
+        start();
+      }
+      return stop;
+    }
+    vue.onUnmounted(() => {
+      stop();
+      observer = null;
+      currentElement = null;
+    });
+    return {
+      bind,
+      stop,
+      start
+    };
+  }
   function formatNumber(value, options = {}) {
     const {
       precision = 0,
@@ -8314,6 +8914,206 @@ var __async = (__this, __arguments, generator) => {
       stop
     };
   }
+  function createRippleElement(x, y, el, color, duration, initialScale, finalScale) {
+    const rect = el.getBoundingClientRect();
+    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: ${color};
+    width: ${size}px;
+    height: ${size}px;
+    left: ${x - size / 2}px;
+    top: ${y - size / 2}px;
+    transform: scale(${initialScale});
+    opacity: 0.3;
+    z-index: 0;
+  `;
+    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);
+    }
+    return ripple;
+  }
+  function useRipple(options = {}) {
+    const {
+      color = "currentColor",
+      duration = 600,
+      disabled = false,
+      initialScale = 0,
+      finalScale = 2
+    } = options;
+    let currentElement = null, clickHandler = null;
+    function handleClick(event) {
+      if (vue.unref(disabled)) return;
+      const currentColor = vue.unref(color);
+      const currentDuration = vue.unref(duration);
+      const ripple = createRippleElement(
+        event.clientX - currentElement.getBoundingClientRect().left,
+        event.clientY - currentElement.getBoundingClientRect().top,
+        currentElement,
+        currentColor,
+        currentDuration,
+        initialScale,
+        finalScale
+      );
+      currentElement.appendChild(ripple);
+    }
+    function trigger(event) {
+      var _a, _b;
+      if (!currentElement || vue.unref(disabled)) return;
+      const rect = currentElement.getBoundingClientRect();
+      const x = (_a = event == null ? void 0 : event.x) != null ? _a : rect.width / 2;
+      const y = (_b = event == null ? void 0 : event.y) != null ? _b : rect.height / 2;
+      const ripple = createRippleElement(
+        x,
+        y,
+        currentElement,
+        vue.unref(color),
+        vue.unref(duration),
+        initialScale,
+        finalScale
+      );
+      currentElement.appendChild(ripple);
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      unbind();
+      currentElement = element;
+      const computedStyle = getComputedStyle(element);
+      if (computedStyle.position === "static") {
+        element.style.position = "relative";
+      }
+      if (computedStyle.overflow === "visible") {
+        element.style.overflow = "hidden";
+      }
+      element.classList.add("v-ripple");
+      clickHandler = handleClick;
+      element.addEventListener("click", clickHandler);
+      return unbind;
+    }
+    function unbind() {
+      if (currentElement && clickHandler) {
+        currentElement.removeEventListener("click", clickHandler);
+        currentElement.classList.remove("v-ripple");
+      }
+      currentElement = null;
+      clickHandler = null;
+    }
+    vue.onUnmounted(() => {
+      unbind();
+    });
+    return {
+      bind,
+      trigger
+    };
+  }
+  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 useSanitize(options = {}) {
+    const {
+      allowedTags = DEFAULT_ALLOWED_TAGS,
+      allowedAttributes = DEFAULT_ALLOWED_ATTRIBUTES,
+      allowDataUrls = false,
+      allowStyles = false,
+      allowClass = false,
+      allowId = false,
+      handler
+    } = options;
+    function sanitizeHtml2(html) {
+      var _a;
+      if (handler) {
+        return handler(html);
+      }
+      if (!isBrowser()) return 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 (!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 (!allowDataUrls) {
+          const src = el.getAttribute("src");
+          if (src && src.toLowerCase().startsWith("data:")) {
+            el.removeAttribute("src");
+          }
+        }
+        const attrs = Array.from(el.attributes);
+        for (const attr of attrs) {
+          const isAllowed = allowedAttributes.includes(attr.name.toLowerCase());
+          const isClass = attr.name === "class" && allowClass;
+          const isId = attr.name === "id" && allowId;
+          const isStyle = attr.name === "style" && 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;
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      const content = element.innerHTML;
+      if (content) {
+        element.innerHTML = sanitizeHtml2(content);
+      }
+      return () => {
+      };
+    }
+    vue.onUnmounted(() => {
+    });
+    return {
+      sanitize: sanitizeHtml2,
+      bind
+    };
+  }
   function getScrollInfoFromContainer(container, lastScrollLeft, lastScrollTop) {
     let scrollLeft = 0, scrollTop = 0, scrollLeftMax = 0, scrollTopMax = 0;
     if (container === window) {
@@ -8462,6 +9262,97 @@ var __async = (__this, __arguments, generator) => {
       scrollTo
     };
   }
+  function useSticky(options = {}) {
+    const {
+      offsetTop = 0,
+      onStick,
+      disabled = false
+    } = options;
+    const isSticky = vue.ref(false);
+    let currentElement = null, scrollContainer = null, scrollHandler = null, placeholder = null, originalStyles = null;
+    function checkSticky2() {
+      var _a;
+      if (!currentElement || vue.unref(disabled)) return;
+      const container = scrollContainer === window ? document.documentElement : scrollContainer;
+      const containerRect = container.getBoundingClientRect();
+      const elementRect = currentElement.getBoundingClientRect();
+      const currentOffsetTop = vue.unref(offsetTop);
+      const shouldBeSticky = elementRect.top <= currentOffsetTop && containerRect.top <= currentOffsetTop;
+      if (shouldBeSticky !== isSticky.value) {
+        isSticky.value = shouldBeSticky;
+        if (shouldBeSticky) {
+          if (!placeholder) {
+            placeholder = document.createElement("div");
+            placeholder.style.width = `${elementRect.width}px`;
+            placeholder.style.height = `${elementRect.height}px`;
+            (_a = currentElement.parentNode) == null ? void 0 : _a.insertBefore(placeholder, currentElement);
+          }
+          currentElement.style.position = "fixed";
+          currentElement.style.top = `${currentOffsetTop}px`;
+          currentElement.style.width = `${elementRect.width}px`;
+          currentElement.classList.add("v-sticky--active");
+        } else {
+          if (placeholder) {
+            placeholder.remove();
+            placeholder = null;
+          }
+          if (originalStyles) {
+            currentElement.style.position = originalStyles.position;
+            currentElement.style.top = originalStyles.top;
+            currentElement.style.width = originalStyles.width;
+          }
+          currentElement.classList.remove("v-sticky--active");
+        }
+        onStick == null ? void 0 : onStick(shouldBeSticky);
+      }
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      stop();
+      currentElement = element;
+      originalStyles = {
+        position: element.style.position,
+        top: element.style.top,
+        width: element.style.width
+      };
+      element.classList.add("v-sticky");
+      scrollContainer = getScrollParent(element);
+      scrollHandler = checkSticky2;
+      scrollContainer.addEventListener("scroll", scrollHandler, { passive: true });
+      checkSticky2();
+      return stop;
+    }
+    function stop() {
+      if (scrollContainer && scrollHandler) {
+        scrollContainer.removeEventListener("scroll", scrollHandler);
+      }
+      if (currentElement) {
+        if (originalStyles) {
+          currentElement.style.position = originalStyles.position;
+          currentElement.style.top = originalStyles.top;
+          currentElement.style.width = originalStyles.width;
+        }
+        currentElement.classList.remove("v-sticky", "v-sticky--active");
+      }
+      if (placeholder) {
+        placeholder.remove();
+        placeholder = null;
+      }
+      scrollContainer = null;
+      scrollHandler = null;
+      currentElement = null;
+      isSticky.value = false;
+    }
+    vue.onUnmounted(() => {
+      stop();
+    });
+    return {
+      isSticky: vue.readonly(isSticky),
+      bind,
+      stop
+    };
+  }
   const DEFAULT_DIRECTIONS = ["left", "right", "up", "down"];
   function getSwipeDirection(deltaX, deltaY, allowedDirections) {
     const absX = Math.abs(deltaX);
@@ -8662,6 +9553,167 @@ var __async = (__this, __arguments, generator) => {
   function throttleFn(fn, wait = 300, options) {
     return throttle(fn, wait, options);
   }
+  function useTooltip(options = {}) {
+    const {
+      content,
+      placement = "top",
+      trigger = "hover",
+      delay = 0,
+      hideDelay = 0,
+      arrow = true,
+      class: customClass,
+      onShow,
+      onHide,
+      disabled = false
+    } = options;
+    const isVisible = vue.ref(false);
+    let currentElement = null, tooltipEl = null, showTimeout = null, hideTimeout = null;
+    const eventHandlers = {};
+    function createTooltip2() {
+      const tooltip = document.createElement("div");
+      tooltip.className = `v-tooltip v-tooltip--${placement}${customClass ? ` ${customClass}` : ""}${arrow ? " v-tooltip--arrow" : ""}`;
+      tooltip.style.cssText = `
+      position: absolute;
+      z-index: 9999;
+      opacity: 0;
+      transition: opacity 0.2s;
+      pointer-events: none;
+    `;
+      return tooltip;
+    }
+    function positionTooltip2() {
+      if (!tooltipEl || !currentElement) return;
+      const elementRect = currentElement.getBoundingClientRect();
+      const tooltipRect = tooltipEl.getBoundingClientRect();
+      let top = 0, left = 0;
+      switch (placement) {
+        case "top":
+          top = elementRect.top - tooltipRect.height - 8;
+          left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+          top = elementRect.bottom + 8;
+          left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
+          break;
+        case "left":
+          top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
+          left = elementRect.left - tooltipRect.width - 8;
+          break;
+        case "right":
+          top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
+          left = elementRect.right + 8;
+          break;
+      }
+      if (left < 0) left = 8;
+      if (left + tooltipRect.width > window.innerWidth) left = window.innerWidth - tooltipRect.width - 8;
+      if (top < 0) top = 8;
+      if (top + tooltipRect.height > window.innerHeight) top = window.innerHeight - tooltipRect.height - 8;
+      tooltipEl.style.top = `${top + window.scrollY}px`;
+      tooltipEl.style.left = `${left + window.scrollX}px`;
+    }
+    function show() {
+      if (vue.unref(disabled) || !content) return;
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      if (delay > 0) {
+        showTimeout = setTimeout(doShow, delay);
+      } else {
+        doShow();
+      }
+    }
+    function doShow() {
+      var _a;
+      if (!currentElement) return;
+      if (!tooltipEl) {
+        tooltipEl = createTooltip2();
+        document.body.appendChild(tooltipEl);
+      }
+      tooltipEl.textContent = (_a = vue.unref(content)) != null ? _a : null;
+      positionTooltip2();
+      tooltipEl.style.opacity = "1";
+      isVisible.value = true;
+      onShow == null ? void 0 : onShow();
+    }
+    function hide() {
+      if (showTimeout) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
+      }
+      if (hideDelay > 0) {
+        hideTimeout = setTimeout(doHide, hideDelay);
+      } else {
+        doHide();
+      }
+    }
+    function doHide() {
+      if (tooltipEl) {
+        tooltipEl.style.opacity = "0";
+      }
+      isVisible.value = false;
+      onHide == null ? void 0 : onHide();
+    }
+    function toggle() {
+      if (isVisible.value) {
+        hide();
+      } else {
+        show();
+      }
+    }
+    function bind(element) {
+      if (!isBrowser()) return () => {
+      };
+      unbind();
+      currentElement = element;
+      if (trigger === "hover") {
+        eventHandlers.mouseenter = show;
+        eventHandlers.mouseleave = hide;
+        element.addEventListener("mouseenter", eventHandlers.mouseenter);
+        element.addEventListener("mouseleave", eventHandlers.mouseleave);
+      } else if (trigger === "click") {
+        eventHandlers.click = toggle;
+        element.addEventListener("click", eventHandlers.click);
+      } else if (trigger === "focus") {
+        eventHandlers.focus = show;
+        eventHandlers.blur = hide;
+        element.addEventListener("focus", eventHandlers.focus);
+        element.addEventListener("blur", eventHandlers.blur);
+      }
+      return unbind;
+    }
+    function unbind() {
+      if (currentElement) {
+        Object.entries(eventHandlers).forEach(([event, handler]) => {
+          currentElement.removeEventListener(event, handler);
+        });
+      }
+      if (tooltipEl) {
+        tooltipEl.remove();
+        tooltipEl = null;
+      }
+      if (showTimeout) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
+      }
+      if (hideTimeout) {
+        clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+      currentElement = null;
+      isVisible.value = false;
+    }
+    vue.onUnmounted(() => {
+      unbind();
+    });
+    return {
+      isVisible: vue.readonly(isVisible),
+      show,
+      hide,
+      toggle,
+      bind
+    };
+  }
   function useTouch(options = {}) {
     const {
       onSwipe,
@@ -8841,6 +9893,7 @@ var __async = (__this, __arguments, generator) => {
     return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   }
   function trimText(text, position = "both", chars) {
+    if (!text) return "";
     const charPattern = chars ? `[\\s${escapeRegex(chars)}]` : "\\s";
     switch (position) {
       case "start":
@@ -8883,6 +9936,74 @@ var __async = (__this, __arguments, generator) => {
   function createTrimmer(position = "both", chars) {
     return (text) => trimText(text, position, chars);
   }
+  function truncateEnd(text, length, omission) {
+    if (text.length <= length) return text;
+    return text.slice(0, length - omission.length) + omission;
+  }
+  function truncateStart(text, length, omission) {
+    if (text.length <= length) return text;
+    return omission + text.slice(-(length - omission.length));
+  }
+  function truncateMiddle(text, length, omission) {
+    if (text.length <= length) return text;
+    const availableLength = length - omission.length;
+    const startLength = Math.ceil(availableLength / 2);
+    const endLength = Math.floor(availableLength / 2);
+    return text.slice(0, startLength) + omission + text.slice(-endLength);
+  }
+  function useTruncate(options) {
+    const {
+      text,
+      length = 100,
+      position = "end",
+      omission = "..."
+    } = options;
+    const truncated = vue.ref("");
+    const isTruncated = vue.ref(false);
+    const originalLength = vue.ref(0);
+    function truncate(textValue, lengthValue, positionValue) {
+      const maxLen = lengthValue != null ? lengthValue : vue.unref(length);
+      const pos = positionValue != null ? positionValue : vue.unref(position);
+      if (textValue.length <= maxLen) {
+        return textValue;
+      }
+      switch (pos) {
+        case "start":
+          return truncateStart(textValue, maxLen, omission);
+        case "middle":
+          return truncateMiddle(textValue, maxLen, omission);
+        case "end":
+        default:
+          return truncateEnd(textValue, maxLen, omission);
+      }
+    }
+    function update() {
+      const textValue = vue.unref(text);
+      const lengthValue = vue.unref(length);
+      originalLength.value = textValue.length;
+      isTruncated.value = textValue.length > lengthValue;
+      truncated.value = truncate(textValue);
+    }
+    vue.watch(
+      () => vue.unref(text),
+      update,
+      { immediate: true }
+    );
+    vue.watch(
+      () => vue.unref(length),
+      update
+    );
+    vue.watch(
+      () => vue.unref(position),
+      update
+    );
+    return {
+      truncated: vue.readonly(truncated),
+      isTruncated: vue.readonly(isTruncated),
+      originalLength: vue.readonly(originalLength),
+      truncate
+    };
+  }
   function uppercaseText(text, firstOnly = false) {
     if (!text) return text;
     if (firstOnly) {
@@ -9381,6 +10502,7 @@ var __async = (__this, __arguments, generator) => {
   exports.calculateTime = calculateTime;
   exports.capitalizeText = capitalizeText;
   exports.capitalizeWord = capitalizeWord;
+  exports.configurePermission = configurePermission;
   exports.createCapitalizer = createCapitalizer;
   exports.createDelayedClick = createDelayedClick;
   exports.createLowercaser = createLowercaser;
@@ -9402,6 +10524,7 @@ var __async = (__this, __arguments, generator) => {
   exports.formatTime = formatTime;
   exports.generateId = generateId;
   exports.get = get;
+  exports.getPermissionConfig = getPermissionConfig;
   exports.getVueVersion = getVueVersion;
   exports.isArray = isArray;
   exports.isBoolean = isBoolean;
@@ -9446,20 +10569,30 @@ var __async = (__this, __arguments, generator) => {
   exports.useHotkey = useHotkey;
   exports.useHover = useHover;
   exports.useImagePreview = useImagePreview;
+  exports.useInfiniteScroll = useInfiniteScroll;
   exports.useIntersect = useIntersect;
+  exports.useLazy = useLazy;
+  exports.useLoading = useLoading;
   exports.useLongPress = useLongPress;
   exports.useLowercase = useLowercase;
+  exports.useMask = useMask;
   exports.useMoney = useMoney;
+  exports.useMutation = useMutation;
   exports.useNumber = useNumber;
   exports.usePermission = usePermission;
   exports.usePrint = usePrint;
   exports.usePullRefresh = usePullRefresh;
   exports.useResize = useResize;
+  exports.useRipple = useRipple;
+  exports.useSanitize = useSanitize;
   exports.useScroll = useScroll;
+  exports.useSticky = useSticky;
   exports.useSwipe = useSwipe;
   exports.useThrottle = useThrottle;
+  exports.useTooltip = useTooltip;
   exports.useTouch = useTouch;
   exports.useTrim = useTrim;
+  exports.useTruncate = useTruncate;
   exports.useUppercase = useUppercase;
   exports.useVirtualList = useVirtualList;
   exports.useVisible = useVisible;