directix 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -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.
@@ -2802,15 +2802,15 @@ const vIntersect = defineDirective({
     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);
         }
       });
     },
@@ -2818,9 +2818,9 @@ function getGlobalObserver(preload) {
       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 {
@@ -2845,7 +2845,7 @@ function load(el) {
   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");
@@ -2859,7 +2859,7 @@ function load(el) {
       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");
@@ -2878,7 +2878,7 @@ function observe(el) {
     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);
   }
@@ -2888,8 +2888,8 @@ function unobserve(el) {
   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) {
@@ -2915,7 +2915,7 @@ const vLazy = defineDirective({
     }
     setLazyState(el, "pending");
     if (options.placeholder) {
-      setSrc(el, options.placeholder);
+      setSrc$1(el, options.placeholder);
     }
     el.classList.add("v-lazy");
     const state = {
@@ -2940,7 +2940,7 @@ const vLazy = defineDirective({
         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);
       }
@@ -2965,12 +2965,12 @@ function normalizeOptions$m(binding) {
     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 = `
@@ -2986,7 +2986,7 @@ function createLoadingOverlay(options) {
     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;
@@ -3065,7 +3065,7 @@ const vLoading = defineDirective({
 });
 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";
@@ -3289,15 +3289,15 @@ const vLowercase = defineDirective({
   }
 });
 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 };
   });
 }
@@ -3369,7 +3369,7 @@ const vMask = defineDirective({
     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;
@@ -3409,7 +3409,7 @@ const vMask = defineDirective({
     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];
@@ -3762,6 +3762,14 @@ const vNumber = defineDirective({
   }
 });
 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");
@@ -3774,14 +3782,39 @@ function normalizeOptions$h(binding) {
   }
   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;
@@ -4491,23 +4524,23 @@ const vRipple = defineDirective({
     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,
@@ -4523,7 +4556,7 @@ function sanitizeHtml(html, options) {
   }
   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]);
@@ -4537,7 +4570,7 @@ function sanitizeHtml(html, options) {
       (_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");
@@ -4575,8 +4608,8 @@ const vSanitize = defineDirective({
   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,
@@ -7505,6 +7538,105 @@ function useImagePreview(options = {}) {
     bind
   };
 }
+function useInfiniteScroll(options) {
+  const {
+    onLoad,
+    loading: externalLoading,
+    finished: externalFinished,
+    distance = 0,
+    immediate = true,
+    disabled = false
+  } = options;
+  const internalLoading = ref(false);
+  const internalFinished = 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 (unref(loading) || unref(finished) || unref(disabled)) return;
+      internalLoading.value = true;
+      try {
+        yield onLoad();
+      } finally {
+        internalLoading.value = false;
+      }
+    });
+  }
+  function checkScroll() {
+    if (!scrollContainer || unref(loading) || unref(finished) || unref(disabled)) return;
+    const currentDistance = 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: `${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;
+  }
+  onUnmounted(() => {
+    stop();
+  });
+  return {
+    loading: readonly(loading),
+    finished: readonly(finished),
+    load: load2,
+    bind,
+    stop
+  };
+}
 function useIntersect(options = {}) {
   const {
     handler,
@@ -7576,6 +7708,269 @@ function useIntersect(options = {}) {
     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 = ref("pending");
+  const isLoading = ref(false);
+  const isLoaded = ref(false);
+  const hasError = ref(false);
+  let currentElement = null, attemptCount = 0, observer = null;
+  function loadImage() {
+    const srcValue = 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;
+  }
+  onUnmounted(() => {
+    unbind();
+  });
+  return {
+    state: readonly(state),
+    isLoading: readonly(isLoading),
+    isLoaded: readonly(isLoaded),
+    hasError: 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 = ref(unref(initial));
+  let currentElement = null, loadingOverlay = null, originalPosition = "", originalOverflow = "";
+  function showLoading2() {
+    if (!currentElement || loadingOverlay) return;
+    loadingOverlay = createLoadingOverlay({
+      text: 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;
+  }
+  watch(loading, (newValue) => {
+    if (newValue) {
+      showLoading2();
+    } else {
+      hideLoading2();
+    }
+  });
+  if (typeof text === "object" && "value" in text) {
+    watch(text, (newText) => {
+      if (loadingOverlay) {
+        const textEl = loadingOverlay.querySelector(`.${textClass}`);
+        if (textEl) {
+          textEl.textContent = newText || "";
+        }
+      }
+    });
+  }
+  onUnmounted(() => {
+    unbind();
+  });
+  return {
+    loading,
+    start,
+    stop,
+    toggle,
+    bind
+  };
+}
 function getEventPosition(e) {
   if ("touches" in e && e.touches.length > 0) {
     return {
@@ -7719,40 +8114,183 @@ function useLowercase(options) {
 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(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;
+  }
+  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;
@@ -7790,6 +8328,68 @@ function useMoney(options) {
 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 (unref(disabled)) return;
+      handler(mutations, obs);
+    });
+  }
+  function start() {
+    if (!currentElement || !observer || 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 && !unref(disabled)) {
+      start();
+    }
+    return stop;
+  }
+  onUnmounted(() => {
+    stop();
+    observer = null;
+    currentElement = null;
+  });
+  return {
+    bind,
+    stop,
+    start
+  };
+}
 function formatNumber(value, options = {}) {
   const {
     precision = 0,
@@ -8313,6 +8913,206 @@ function useResize(options = {}) {
     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 (unref(disabled)) return;
+    const currentColor = unref(color);
+    const currentDuration = 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 || 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,
+      unref(color),
+      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;
+  }
+  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 () => {
+    };
+  }
+  onUnmounted(() => {
+  });
+  return {
+    sanitize: sanitizeHtml2,
+    bind
+  };
+}
 function getScrollInfoFromContainer(container, lastScrollLeft, lastScrollTop) {
   let scrollLeft = 0, scrollTop = 0, scrollLeftMax = 0, scrollTopMax = 0;
   if (container === window) {
@@ -8461,6 +9261,97 @@ function useScroll(options = {}) {
     scrollTo
   };
 }
+function useSticky(options = {}) {
+  const {
+    offsetTop = 0,
+    onStick,
+    disabled = false
+  } = options;
+  const isSticky = ref(false);
+  let currentElement = null, scrollContainer = null, scrollHandler = null, placeholder = null, originalStyles = null;
+  function checkSticky2() {
+    var _a;
+    if (!currentElement || unref(disabled)) return;
+    const container = scrollContainer === window ? document.documentElement : scrollContainer;
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = currentElement.getBoundingClientRect();
+    const currentOffsetTop = 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;
+  }
+  onUnmounted(() => {
+    stop();
+  });
+  return {
+    isSticky: readonly(isSticky),
+    bind,
+    stop
+  };
+}
 const DEFAULT_DIRECTIONS = ["left", "right", "up", "down"];
 function getSwipeDirection(deltaX, deltaY, allowedDirections) {
   const absX = Math.abs(deltaX);
@@ -8661,6 +9552,167 @@ function useThrottle(options) {
 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 = 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 (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 = 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;
+  }
+  onUnmounted(() => {
+    unbind();
+  });
+  return {
+    isVisible: readonly(isVisible),
+    show,
+    hide,
+    toggle,
+    bind
+  };
+}
 function useTouch(options = {}) {
   const {
     onSwipe,
@@ -8840,6 +9892,7 @@ function escapeRegex(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 function trimText(text, position = "both", chars) {
+  if (!text) return "";
   const charPattern = chars ? `[\\s${escapeRegex(chars)}]` : "\\s";
   switch (position) {
     case "start":
@@ -8882,6 +9935,74 @@ function useTrim(options) {
 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 = ref("");
+  const isTruncated = ref(false);
+  const originalLength = ref(0);
+  function truncate(textValue, lengthValue, positionValue) {
+    const maxLen = lengthValue != null ? lengthValue : unref(length);
+    const pos = positionValue != null ? positionValue : 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 = unref(text);
+    const lengthValue = unref(length);
+    originalLength.value = textValue.length;
+    isTruncated.value = textValue.length > lengthValue;
+    truncated.value = truncate(textValue);
+  }
+  watch(
+    () => unref(text),
+    update,
+    { immediate: true }
+  );
+  watch(
+    () => unref(length),
+    update
+  );
+  watch(
+    () => unref(position),
+    update
+  );
+  return {
+    truncated: readonly(truncated),
+    isTruncated: readonly(isTruncated),
+    originalLength: readonly(originalLength),
+    truncate
+  };
+}
 function uppercaseText(text, firstOnly = false) {
   if (!text) return text;
   if (firstOnly) {
@@ -9381,6 +10502,7 @@ export {
   calculateTime,
   capitalizeText,
   capitalizeWord,
+  configurePermission,
   createCapitalizer,
   createDelayedClick,
   createLowercaser,
@@ -9402,6 +10524,7 @@ export {
   formatTime,
   generateId,
   get,
+  getPermissionConfig,
   getVueVersion,
   isArray,
   isBoolean,
@@ -9446,20 +10569,30 @@ export {
   useHotkey,
   useHover,
   useImagePreview,
+  useInfiniteScroll,
   useIntersect,
+  useLazy,
+  useLoading,
   useLongPress,
   useLowercase,
+  useMask,
   useMoney,
+  useMutation,
   useNumber,
   usePermission,
   usePrint,
   usePullRefresh,
   useResize,
+  useRipple,
+  useSanitize,
   useScroll,
+  useSticky,
   useSwipe,
   useThrottle,
+  useTooltip,
   useTouch,
   useTrim,
+  useTruncate,
   useUppercase,
   useVirtualList,
   useVisible,