@vueuse/components 12.2.0 → 12.4.0

package/index.iife.js

@@ -17,12 +17,12 @@
     }
   });
 
-  const defaultWindow = shared.isClient ? window : void 0;
+  const defaultWindow = shared.isClient ? window : undefined;
 
   function unrefElement(elRef) {
     var _a;
-    const plain = shared.toValue(elRef);
-    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+    const plain = vue.toValue(elRef);
+    return (_a = plain == null ? undefined : plain.$el) != null ? _a : plain;
   }
 
   function useEventListener(...args) {
@@ -38,10 +38,8 @@
     }
     if (!target)
       return shared.noop;
-    if (!Array.isArray(events))
-      events = [events];
-    if (!Array.isArray(listeners))
-      listeners = [listeners];
+    events = shared.toArray(events);
+    listeners = shared.toArray(listeners);
     const cleanups = [];
     const cleanup = () => {
       cleanups.forEach((fn) => fn());
@@ -52,7 +50,7 @@
       return () => el.removeEventListener(event, listener, options2);
     };
     const stopWatch = vue.watch(
-      () => [unrefElement(target), shared.toValue(options)],
+      () => [unrefElement(target), vue.toValue(options)],
       ([el, options2]) => {
         cleanup();
         if (!el)
@@ -86,7 +84,7 @@
     }
     let shouldListen = true;
     const shouldIgnore = (event) => {
-      return shared.toValue(ignore).some((target2) => {
+      return vue.toValue(ignore).some((target2) => {
         if (typeof target2 === "string") {
           return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
         } else {
@@ -96,11 +94,11 @@
       });
     };
     function hasMultipleRoots(target2) {
-      const vm = shared.toValue(target2);
+      const vm = vue.toValue(target2);
       return vm && vm.$.subTree.shapeFlag === 16;
     }
     function checkMultipleRoots(target2, event) {
-      const vm = shared.toValue(target2);
+      const vm = vue.toValue(target2);
       const children = vm.$.subTree && vm.$.subTree.children;
       if (children == null || !Array.isArray(children))
         return false;
@@ -141,11 +139,11 @@
         setTimeout(() => {
           var _a;
           const el = unrefElement(target);
-          if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement))) {
+          if (((_a = window.document.activeElement) == null ? undefined : _a.tagName) === "IFRAME" && !(el == null ? undefined : el.contains(window.document.activeElement))) {
             handler(event);
           }
         }, 0);
-      })
+      }, { passive: true })
     ].filter(Boolean);
     const stop = () => cleanup.forEach((fn) => fn());
     return stop;
@@ -204,7 +202,7 @@
     } = options;
     const predicate = createKeyPredicate(key);
     const listener = (e) => {
-      if (e.repeat && shared.toValue(dedupe))
+      if (e.repeat && vue.toValue(dedupe))
         return;
       if (predicate(e))
         handler(e);
@@ -215,7 +213,7 @@
   const vOnKeyStroke = {
     mounted(el, binding) {
       var _a, _b;
-      const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
+      const keys = (_b = (_a = binding.arg) == null ? undefined : _a.split(",")) != null ? _b : true;
       if (typeof binding.value === "function") {
         onKeyStroke(keys, binding.value, {
           target: el
@@ -242,23 +240,23 @@
     function clear() {
       if (timeout) {
         clearTimeout(timeout);
-        timeout = void 0;
+        timeout = undefined;
       }
-      posStart = void 0;
-      startTimestamp = void 0;
+      posStart = undefined;
+      startTimestamp = undefined;
       hasLongPressed = false;
     }
     function onRelease(ev) {
       var _a2, _b2, _c;
       const [_startTimestamp, _posStart, _hasLongPressed] = [startTimestamp, posStart, hasLongPressed];
       clear();
-      if (!(options == null ? void 0 : options.onMouseUp) || !_posStart || !_startTimestamp)
+      if (!(options == null ? undefined : options.onMouseUp) || !_posStart || !_startTimestamp)
         return;
-      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
         return;
-      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
         ev.preventDefault();
-      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
         ev.stopPropagation();
       const dx = ev.x - _posStart.x;
       const dy = ev.y - _posStart.y;
@@ -267,12 +265,12 @@
     }
     function onDown(ev) {
       var _a2, _b2, _c, _d;
-      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
         return;
       clear();
-      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
         ev.preventDefault();
-      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
         ev.stopPropagation();
       posStart = {
         x: ev.x,
@@ -284,28 +282,28 @@
           hasLongPressed = true;
           handler(ev);
         },
-        (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+        (_d = options == null ? undefined : options.delay) != null ? _d : DEFAULT_DELAY
       );
     }
     function onMove(ev) {
       var _a2, _b2, _c, _d;
-      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
+      if (((_a2 = options == null ? undefined : options.modifiers) == null ? undefined : _a2.self) && ev.target !== elementRef.value)
         return;
-      if (!posStart || (options == null ? void 0 : options.distanceThreshold) === false)
+      if (!posStart || (options == null ? undefined : options.distanceThreshold) === false)
         return;
-      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+      if ((_b2 = options == null ? undefined : options.modifiers) == null ? undefined : _b2.prevent)
         ev.preventDefault();
-      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+      if ((_c = options == null ? undefined : options.modifiers) == null ? undefined : _c.stop)
         ev.stopPropagation();
       const dx = ev.x - posStart.x;
       const dy = ev.y - posStart.y;
       const distance = Math.sqrt(dx * dx + dy * dy);
-      if (distance >= ((_d = options == null ? void 0 : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
+      if (distance >= ((_d = options == null ? undefined : options.distanceThreshold) != null ? _d : DEFAULT_THRESHOLD))
         clear();
     }
     const listenerOptions = {
-      capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
-      once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
+      capture: (_a = options == null ? undefined : options.modifiers) == null ? undefined : _a.capture,
+      once: (_b = options == null ? undefined : options.modifiers) == null ? undefined : _b.once
     };
     const cleanup = [
       useEventListener(elementRef, "pointerdown", onDown, listenerOptions),
@@ -393,7 +391,7 @@
       const data = vue.reactive(core.useClipboard(props));
       return () => {
         var _a;
-        return (_a = slots.default) == null ? void 0 : _a.call(slots, data);
+        return (_a = slots.default) == null ? undefined : _a.call(slots, data);
       };
     }
   });
@@ -413,7 +411,7 @@
   const ssrWidthSymbol = Symbol("vueuse-ssr-width");
   function useSSRWidth() {
     const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
-    return typeof ssrWidth === "number" ? ssrWidth : void 0;
+    return typeof ssrWidth === "number" ? ssrWidth : undefined;
   }
 
   function useMounted() {
@@ -455,7 +453,7 @@
     const stopWatch = vue.watchEffect(() => {
       if (ssrSupport.value) {
         ssrSupport.value = !isSupported.value;
-        const queryStrings = shared.toValue(query).split(",");
+        const queryStrings = vue.toValue(query).split(",");
         matches.value = queryStrings.some((queryString) => {
           const not = queryString.includes("not all");
           const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
@@ -474,7 +472,7 @@
       if (!isSupported.value)
         return;
       cleanup();
-      mediaQuery = window.matchMedia(shared.toValue(query));
+      mediaQuery = window.matchMedia(vue.toValue(query));
       if ("addEventListener" in mediaQuery)
         mediaQuery.addEventListener("change", handler);
       else
@@ -484,7 +482,7 @@
     shared.tryOnScopeDispose(() => {
       stopWatch();
       cleanup();
-      mediaQuery = void 0;
+      mediaQuery = undefined;
     });
     return vue.computed(() => matches.value);
   }
@@ -549,6 +547,7 @@
       initOnMounted
     } = options;
     const data = (shallow ? vue.shallowRef : vue.ref)(typeof defaults === "function" ? defaults() : defaults);
+    const keyComputed = vue.computed(() => vue.toValue(key));
     if (!storage) {
       try {
         storage = getSSRHandler("getDefaultStorage", () => {
@@ -561,7 +560,7 @@
     }
     if (!storage)
       return data;
-    const rawInit = shared.toValue(defaults);
+    const rawInit = vue.toValue(defaults);
     const type = guessSerializerType(rawInit);
     const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
     const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
@@ -569,10 +568,11 @@
       () => write(data.value),
       { flush, deep, eventFilter }
     );
+    vue.watch(keyComputed, () => update(), { flush });
     if (window && listenToStorageChanges) {
       shared.tryOnMounted(() => {
         if (storage instanceof Storage)
-          useEventListener(window, "storage", update);
+          useEventListener(window, "storage", update, { passive: true });
         else
           useEventListener(window, customStorageEventName, updateFromCustomEvent);
         if (initOnMounted)
@@ -584,7 +584,7 @@
     function dispatchWriteEvent(oldValue, newValue) {
       if (window) {
         const payload = {
-          key,
+          key: keyComputed.value,
           oldValue,
           newValue,
           storageArea: storage
@@ -596,14 +596,14 @@
     }
     function write(v) {
       try {
-        const oldValue = storage.getItem(key);
+        const oldValue = storage.getItem(keyComputed.value);
         if (v == null) {
           dispatchWriteEvent(oldValue, null);
-          storage.removeItem(key);
+          storage.removeItem(keyComputed.value);
         } else {
           const serialized = serializer.write(v);
           if (oldValue !== serialized) {
-            storage.setItem(key, serialized);
+            storage.setItem(keyComputed.value, serialized);
             dispatchWriteEvent(oldValue, serialized);
           }
         }
@@ -612,10 +612,10 @@
       }
     }
     function read(event) {
-      const rawValue = event ? event.newValue : storage.getItem(key);
+      const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
       if (rawValue == null) {
         if (writeDefaults && rawInit != null)
-          storage.setItem(key, serializer.write(rawInit));
+          storage.setItem(keyComputed.value, serializer.write(rawInit));
         return rawInit;
       } else if (!event && mergeDefaults) {
         const value = serializer.read(rawValue);
@@ -637,7 +637,7 @@
         data.value = rawInit;
         return;
       }
-      if (event && event.key !== key)
+      if (event && event.key !== keyComputed.value)
         return;
       pauseWatch();
       try {
@@ -685,7 +685,7 @@
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
-        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
+        const el = typeof selector2 === "string" ? window == null ? undefined : window.document.querySelector(selector2) : unrefElement(selector2);
         if (!el)
           return;
         const classesToAdd = /* @__PURE__ */ new Set();
@@ -869,18 +869,18 @@
       });
       const containerElement = vue.computed(() => {
         var _a;
-        return (_a = props.containerElement) != null ? _a : void 0;
+        return (_a = props.containerElement) != null ? _a : undefined;
       });
       const disabled = vue.computed(() => !!props.disabled);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
-        shared.toValue(props.initialValue) || { x: 0, y: 0 },
-        core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
+        vue.toValue(props.initialValue) || { x: 0, y: 0 },
+        core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : undefined
       );
       const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
       const onEnd = (position, event) => {
         var _a;
-        (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
+        (_a = props.onEnd) == null ? undefined : _a.call(props, position, event);
         if (!storageValue)
           return;
         storageValue.value.x = position.x;
@@ -914,10 +914,222 @@
     }
   });
 
+  function useMutationObserver(target, callback, options = {}) {
+    const { window = defaultWindow, ...mutationOptions } = options;
+    let observer;
+    const isSupported = useSupported(() => window && "MutationObserver" in window);
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = undefined;
+      }
+    };
+    const targets = vue.computed(() => {
+      const value = vue.toValue(target);
+      const items = shared.toArray(value).map(unrefElement).filter(shared.notNullish);
+      return new Set(items);
+    });
+    const stopWatch = vue.watch(
+      () => targets.value,
+      (targets2) => {
+        cleanup();
+        if (isSupported.value && targets2.size) {
+          observer = new MutationObserver(callback);
+          targets2.forEach((el) => observer.observe(el, mutationOptions));
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const takeRecords = () => {
+      return observer == null ? undefined : observer.takeRecords();
+    };
+    const stop = () => {
+      stopWatch();
+      cleanup();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop,
+      takeRecords
+    };
+  }
+
+  function useResizeObserver(target, callback, options = {}) {
+    const { window = defaultWindow, ...observerOptions } = options;
+    let observer;
+    const isSupported = useSupported(() => window && "ResizeObserver" in window);
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = undefined;
+      }
+    };
+    const targets = vue.computed(() => {
+      const _targets = vue.toValue(target);
+      return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+    });
+    const stopWatch = vue.watch(
+      targets,
+      (els) => {
+        cleanup();
+        if (isSupported.value && window) {
+          observer = new ResizeObserver(callback);
+          for (const _el of els) {
+            if (_el)
+              observer.observe(_el, observerOptions);
+          }
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    shared.tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
+
+  function useElementBounding(target, options = {}) {
+    const {
+      reset = true,
+      windowResize = true,
+      windowScroll = true,
+      immediate = true,
+      updateTiming = "sync"
+    } = options;
+    const height = vue.ref(0);
+    const bottom = vue.ref(0);
+    const left = vue.ref(0);
+    const right = vue.ref(0);
+    const top = vue.ref(0);
+    const width = vue.ref(0);
+    const x = vue.ref(0);
+    const y = vue.ref(0);
+    function recalculate() {
+      const el = unrefElement(target);
+      if (!el) {
+        if (reset) {
+          height.value = 0;
+          bottom.value = 0;
+          left.value = 0;
+          right.value = 0;
+          top.value = 0;
+          width.value = 0;
+          x.value = 0;
+          y.value = 0;
+        }
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      height.value = rect.height;
+      bottom.value = rect.bottom;
+      left.value = rect.left;
+      right.value = rect.right;
+      top.value = rect.top;
+      width.value = rect.width;
+      x.value = rect.x;
+      y.value = rect.y;
+    }
+    function update() {
+      if (updateTiming === "sync")
+        recalculate();
+      else if (updateTiming === "next-frame")
+        requestAnimationFrame(() => recalculate());
+    }
+    useResizeObserver(target, update);
+    vue.watch(() => unrefElement(target), (ele) => !ele && update());
+    useMutationObserver(target, update, {
+      attributeFilter: ["style", "class"]
+    });
+    if (windowScroll)
+      useEventListener("scroll", update, { capture: true, passive: true });
+    if (windowResize)
+      useEventListener("resize", update, { passive: true });
+    shared.tryOnMounted(() => {
+      if (immediate)
+        update();
+    });
+    return {
+      height,
+      bottom,
+      left,
+      right,
+      top,
+      width,
+      x,
+      y,
+      update
+    };
+  }
+
+  const vElementBounding = {
+    mounted(el, binding) {
+      const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
+      const {
+        height,
+        bottom,
+        left,
+        right,
+        top,
+        width,
+        x,
+        y
+      } = useElementBounding(el, options);
+      vue.watch([height, bottom, left, right, top, width, x, y], () => handler({ height, bottom, left, right, top, width, x, y }));
+    }
+  };
+
+  function onElementRemoval(target, callback, options = {}) {
+    const {
+      window = defaultWindow,
+      document = window == null ? undefined : window.document,
+      flush = "sync"
+    } = options;
+    if (!window || !document)
+      return shared.noop;
+    let stopFn;
+    const cleanupAndUpdate = (fn) => {
+      stopFn == null ? undefined : stopFn();
+      stopFn = fn;
+    };
+    const stopWatch = vue.watchEffect(() => {
+      const el = unrefElement(target);
+      if (el) {
+        const { stop } = useMutationObserver(
+          document,
+          (mutationsList) => {
+            const targetRemoved = mutationsList.map((mutation) => [...mutation.removedNodes]).flat().some((node) => node === el || node.contains(el));
+            if (targetRemoved) {
+              callback(mutationsList);
+            }
+          },
+          {
+            window,
+            childList: true,
+            subtree: true
+          }
+        );
+        cleanupAndUpdate(stop);
+      }
+    }, { flush });
+    const stopHandle = () => {
+      stopWatch();
+      cleanupAndUpdate();
+    };
+    shared.tryOnScopeDispose(stopHandle);
+    return stopHandle;
+  }
+
   function useElementHover(el, options = {}) {
     const {
       delayEnter = 0,
       delayLeave = 0,
+      triggerOnRemoval = false,
       window = defaultWindow
     } = options;
     const isHovered = vue.ref(false);
@@ -926,7 +1138,7 @@
       const delay = entering ? delayEnter : delayLeave;
       if (timer) {
         clearTimeout(timer);
-        timer = void 0;
+        timer = undefined;
       }
       if (delay)
         timer = setTimeout(() => isHovered.value = entering, delay);
@@ -937,6 +1149,12 @@
       return isHovered;
     useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
     useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
+    if (triggerOnRemoval) {
+      onElementRemoval(
+        vue.computed(() => unrefElement(el)),
+        () => toggle(false)
+      );
+    }
     return isHovered;
   }
 
@@ -967,50 +1185,11 @@
     }
   });
 
-  function useResizeObserver(target, callback, options = {}) {
-    const { window = defaultWindow, ...observerOptions } = options;
-    let observer;
-    const isSupported = useSupported(() => window && "ResizeObserver" in window);
-    const cleanup = () => {
-      if (observer) {
-        observer.disconnect();
-        observer = void 0;
-      }
-    };
-    const targets = vue.computed(() => {
-      const _targets = shared.toValue(target);
-      return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
-    });
-    const stopWatch = vue.watch(
-      targets,
-      (els) => {
-        cleanup();
-        if (isSupported.value && window) {
-          observer = new ResizeObserver(callback);
-          for (const _el of els) {
-            if (_el)
-              observer.observe(_el, observerOptions);
-          }
-        }
-      },
-      { immediate: true, flush: "post" }
-    );
-    const stop = () => {
-      cleanup();
-      stopWatch();
-    };
-    shared.tryOnScopeDispose(stop);
-    return {
-      isSupported,
-      stop
-    };
-  }
-
   function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
     const { window = defaultWindow, box = "content-box" } = options;
     const isSVG = vue.computed(() => {
       var _a, _b;
-      return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+      return (_b = (_a = unrefElement(target)) == null ? undefined : _a.namespaceURI) == null ? undefined : _b.includes("svg");
     });
     const width = vue.ref(initialSize.width);
     const height = vue.ref(initialSize.height);
@@ -1027,7 +1206,7 @@
           }
         } else {
           if (boxSize) {
-            const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+            const formatBoxSize = shared.toArray(boxSize);
             width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
             height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
           } else {
@@ -1066,7 +1245,7 @@
   const vElementSize = {
     mounted(el, binding) {
       var _a;
-      const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+      const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? undefined : _a[0];
       const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
       const { width, height } = useElementSize(el, ...options);
       vue.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1098,8 +1277,8 @@
     } = options;
     const isSupported = useSupported(() => window && "IntersectionObserver" in window);
     const targets = vue.computed(() => {
-      const _target = shared.toValue(target);
-      return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared.notNullish);
+      const _target = vue.toValue(target);
+      return shared.toArray(_target).map(unrefElement).filter(shared.notNullish);
     });
     let cleanup = shared.noop;
     const isActive = vue.ref(immediate);
@@ -1172,7 +1351,7 @@
         root: scrollTarget,
         window,
         threshold,
-        rootMargin: shared.toValue(rootMargin)
+        rootMargin: vue.toValue(rootMargin)
       }
     );
     return elementIsVisible;
@@ -1256,11 +1435,11 @@
     const state = shallow ? vue.shallowRef(initialState) : vue.ref(initialState);
     const isReady = vue.ref(false);
     const isLoading = vue.ref(false);
-    const error = vue.shallowRef(void 0);
+    const error = vue.shallowRef(undefined);
     async function execute(delay2 = 0, ...args) {
       if (resetOnExecute)
         state.value = initialState;
-      error.value = void 0;
+      error.value = undefined;
       isReady.value = false;
       isLoading.value = true;
       if (delay2 > 0)
@@ -1281,8 +1460,9 @@
       }
       return state.value;
     }
-    if (immediate)
+    if (immediate) {
       execute(delay);
+    }
     const shell = {
       state,
       isReady,
@@ -1338,15 +1518,15 @@
   }
   function useImage(options, asyncStateOptions = {}) {
     const state = useAsyncState(
-      () => loadImage(shared.toValue(options)),
-      void 0,
+      () => loadImage(vue.toValue(options)),
+      undefined,
       {
         resetOnExecute: true,
         ...asyncStateOptions
       }
     );
     vue.watch(
-      () => shared.toValue(options),
+      () => vue.toValue(options),
       () => state.execute(asyncStateOptions.delay),
       { deep: true }
     );
@@ -1424,7 +1604,7 @@
         return internalX.value;
       },
       set(x2) {
-        scrollTo(x2, void 0);
+        scrollTo(x2, undefined);
       }
     });
     const y = vue.computed({
@@ -1432,22 +1612,22 @@
         return internalY.value;
       },
       set(y2) {
-        scrollTo(void 0, y2);
+        scrollTo(undefined, y2);
       }
     });
     function scrollTo(_x, _y) {
       var _a, _b, _c, _d;
       if (!window)
         return;
-      const _element = shared.toValue(element);
+      const _element = vue.toValue(element);
       if (!_element)
         return;
-      (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
-        top: (_a = shared.toValue(_y)) != null ? _a : y.value,
-        left: (_b = shared.toValue(_x)) != null ? _b : x.value,
-        behavior: shared.toValue(behavior)
+      (_c = _element instanceof Document ? window.document.body : _element) == null ? undefined : _c.scrollTo({
+        top: (_a = vue.toValue(_y)) != null ? _a : y.value,
+        left: (_b = vue.toValue(_x)) != null ? _b : x.value,
+        behavior: vue.toValue(behavior)
       });
-      const scrollContainer = ((_d = _element == null ? void 0 : _element.document) == null ? void 0 : _d.documentElement) || (_element == null ? void 0 : _element.documentElement) || _element;
+      const scrollContainer = ((_d = _element == null ? undefined : _element.document) == null ? undefined : _d.documentElement) || (_element == null ? undefined : _element.documentElement) || _element;
       if (x != null)
         internalX.value = scrollContainer.scrollLeft;
       if (y != null)
@@ -1481,7 +1661,7 @@
       var _a;
       if (!window)
         return;
-      const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
+      const el = ((_a = target == null ? undefined : target.document) == null ? undefined : _a.documentElement) || (target == null ? undefined : target.documentElement) || unrefElement(target);
       const { display, flexDirection, direction } = getComputedStyle(el);
       const directionMultipler = direction === "rtl" ? -1 : 1;
       const scrollLeft = el.scrollLeft;
@@ -1531,7 +1711,7 @@
     );
     shared.tryOnMounted(() => {
       try {
-        const _element = shared.toValue(element);
+        const _element = vue.toValue(element);
         if (!_element)
           return;
         setArrivedState(_element);
@@ -1552,7 +1732,7 @@
       arrivedState,
       directions,
       measure() {
-        const _element = shared.toValue(element);
+        const _element = vue.toValue(element);
         if (window && _element)
           setArrivedState(_element);
       }
@@ -1579,7 +1759,7 @@
     const promise = vue.ref();
     const isLoading = vue.computed(() => !!promise.value);
     const observedElement = vue.computed(() => {
-      return resolveElement(shared.toValue(element));
+      return resolveElement(vue.toValue(element));
     });
     const isElementVisible = useElementVisibility(observedElement);
     function checkAndLoad() {
@@ -1657,6 +1837,159 @@
     }
   });
 
+  const UseMouseBuiltinExtractors = {
+    page: (event) => [event.pageX, event.pageY],
+    client: (event) => [event.clientX, event.clientY],
+    screen: (event) => [event.screenX, event.screenY],
+    movement: (event) => event instanceof Touch ? null : [event.movementX, event.movementY]
+  };
+  function useMouse(options = {}) {
+    const {
+      type = "page",
+      touch = true,
+      resetOnTouchEnds = false,
+      initialValue = { x: 0, y: 0 },
+      window = defaultWindow,
+      target = window,
+      scroll = true,
+      eventFilter
+    } = options;
+    let _prevMouseEvent = null;
+    let _prevScrollX = 0;
+    let _prevScrollY = 0;
+    const x = vue.ref(initialValue.x);
+    const y = vue.ref(initialValue.y);
+    const sourceType = vue.ref(null);
+    const extractor = typeof type === "function" ? type : UseMouseBuiltinExtractors[type];
+    const mouseHandler = (event) => {
+      const result = extractor(event);
+      _prevMouseEvent = event;
+      if (result) {
+        [x.value, y.value] = result;
+        sourceType.value = "mouse";
+      }
+      if (window) {
+        _prevScrollX = window.scrollX;
+        _prevScrollY = window.scrollY;
+      }
+    };
+    const touchHandler = (event) => {
+      if (event.touches.length > 0) {
+        const result = extractor(event.touches[0]);
+        if (result) {
+          [x.value, y.value] = result;
+          sourceType.value = "touch";
+        }
+      }
+    };
+    const scrollHandler = () => {
+      if (!_prevMouseEvent || !window)
+        return;
+      const pos = extractor(_prevMouseEvent);
+      if (_prevMouseEvent instanceof MouseEvent && pos) {
+        x.value = pos[0] + window.scrollX - _prevScrollX;
+        y.value = pos[1] + window.scrollY - _prevScrollY;
+      }
+    };
+    const reset = () => {
+      x.value = initialValue.x;
+      y.value = initialValue.y;
+    };
+    const mouseHandlerWrapper = eventFilter ? (event) => eventFilter(() => mouseHandler(event), {}) : (event) => mouseHandler(event);
+    const touchHandlerWrapper = eventFilter ? (event) => eventFilter(() => touchHandler(event), {}) : (event) => touchHandler(event);
+    const scrollHandlerWrapper = eventFilter ? () => eventFilter(() => scrollHandler(), {}) : () => scrollHandler();
+    if (target) {
+      const listenerOptions = { passive: true };
+      useEventListener(target, ["mousemove", "dragover"], mouseHandlerWrapper, listenerOptions);
+      if (touch && type !== "movement") {
+        useEventListener(target, ["touchstart", "touchmove"], touchHandlerWrapper, listenerOptions);
+        if (resetOnTouchEnds)
+          useEventListener(target, "touchend", reset, listenerOptions);
+      }
+      if (scroll && type === "page")
+        useEventListener(window, "scroll", scrollHandlerWrapper, listenerOptions);
+    }
+    return {
+      x,
+      y,
+      sourceType
+    };
+  }
+
+  function useMouseInElement(target, options = {}) {
+    const {
+      handleOutside = true,
+      window = defaultWindow
+    } = options;
+    const type = options.type || "page";
+    const { x, y, sourceType } = useMouse(options);
+    const targetRef = vue.ref(target != null ? target : window == null ? undefined : window.document.body);
+    const elementX = vue.ref(0);
+    const elementY = vue.ref(0);
+    const elementPositionX = vue.ref(0);
+    const elementPositionY = vue.ref(0);
+    const elementHeight = vue.ref(0);
+    const elementWidth = vue.ref(0);
+    const isOutside = vue.ref(true);
+    let stop = () => {
+    };
+    if (window) {
+      stop = vue.watch(
+        [targetRef, x, y],
+        () => {
+          const el = unrefElement(targetRef);
+          if (!el || !(el instanceof Element))
+            return;
+          const {
+            left,
+            top,
+            width,
+            height
+          } = el.getBoundingClientRect();
+          elementPositionX.value = left + (type === "page" ? window.pageXOffset : 0);
+          elementPositionY.value = top + (type === "page" ? window.pageYOffset : 0);
+          elementHeight.value = height;
+          elementWidth.value = width;
+          const elX = x.value - elementPositionX.value;
+          const elY = y.value - elementPositionY.value;
+          isOutside.value = width === 0 || height === 0 || elX < 0 || elY < 0 || elX > width || elY > height;
+          if (handleOutside || !isOutside.value) {
+            elementX.value = elX;
+            elementY.value = elY;
+          }
+        },
+        { immediate: true }
+      );
+      useEventListener(
+        document,
+        "mouseleave",
+        () => isOutside.value = true,
+        { passive: true }
+      );
+    }
+    return {
+      x,
+      y,
+      sourceType,
+      elementX,
+      elementY,
+      elementPositionX,
+      elementPositionY,
+      elementHeight,
+      elementWidth,
+      isOutside,
+      stop
+    };
+  }
+
+  const vMouseInElement = {
+    mounted(el, binding) {
+      const [handler, options] = typeof binding.value === "function" ? [binding.value, {}] : binding.value;
+      const state = shared.reactiveOmit(vue.reactive(useMouseInElement(el, options)), "stop");
+      vue.watch(state, (val) => handler(val));
+    }
+  };
+
   const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseMousePressed",
     props: ["touch", "initialValue", "as"],
@@ -1728,17 +2061,17 @@
         ...props,
         onPageChange(...args) {
           var _a;
-          (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
+          (_a = props.onPageChange) == null ? undefined : _a.call(props, ...args);
           emit("page-change", ...args);
         },
         onPageSizeChange(...args) {
           var _a;
-          (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
+          (_a = props.onPageSizeChange) == null ? undefined : _a.call(props, ...args);
           emit("page-size-change", ...args);
         },
         onPageCountChange(...args) {
           var _a;
-          (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
+          (_a = props.onPageCountChange) == null ? undefined : _a.call(props, ...args);
           emit("page-count-change", ...args);
         }
       }));
@@ -1895,60 +2228,19 @@
     }
   };
 
-  function useMutationObserver(target, callback, options = {}) {
-    const { window = defaultWindow, ...mutationOptions } = options;
-    let observer;
-    const isSupported = useSupported(() => window && "MutationObserver" in window);
-    const cleanup = () => {
-      if (observer) {
-        observer.disconnect();
-        observer = void 0;
-      }
-    };
-    const targets = vue.computed(() => {
-      const value = shared.toValue(target);
-      const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
-      return new Set(items);
-    });
-    const stopWatch = vue.watch(
-      () => targets.value,
-      (targets2) => {
-        cleanup();
-        if (isSupported.value && targets2.size) {
-          observer = new MutationObserver(callback);
-          targets2.forEach((el) => observer.observe(el, mutationOptions));
-        }
-      },
-      { immediate: true, flush: "post" }
-    );
-    const takeRecords = () => {
-      return observer == null ? void 0 : observer.takeRecords();
-    };
-    const stop = () => {
-      stopWatch();
-      cleanup();
-    };
-    shared.tryOnScopeDispose(stop);
-    return {
-      isSupported,
-      stop,
-      takeRecords
-    };
-  }
-
   function useCssVar(prop, target, options = {}) {
     const { window = defaultWindow, initialValue, observe = false } = options;
     const variable = vue.ref(initialValue);
     const elRef = vue.computed(() => {
       var _a;
-      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+      return unrefElement(target) || ((_a = window == null ? undefined : window.document) == null ? undefined : _a.documentElement);
     });
     function updateCssVar() {
       var _a;
-      const key = shared.toValue(prop);
-      const el = shared.toValue(elRef);
+      const key = vue.toValue(prop);
+      const el = vue.toValue(elRef);
       if (el && window && key) {
-        const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
+        const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? undefined : _a.trim();
         variable.value = value || initialValue;
       }
     }
@@ -1959,7 +2251,7 @@
       });
     }
     vue.watch(
-      [elRef, () => shared.toValue(prop)],
+      [elRef, () => vue.toValue(prop)],
       (_, old) => {
         if (old[0] && old[1])
           old[0].style.removeProperty(old[1]);
@@ -1971,8 +2263,8 @@
       variable,
       (val) => {
         var _a;
-        const raw_prop = shared.toValue(prop);
-        if (((_a = elRef.value) == null ? void 0 : _a.style) && raw_prop) {
+        const raw_prop = vue.toValue(prop);
+        if (((_a = elRef.value) == null ? undefined : _a.style) && raw_prop) {
           if (val == null)
             elRef.value.style.removeProperty(raw_prop);
           else
@@ -2002,7 +2294,7 @@
       bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
       leftCssVar.value = "env(safe-area-inset-left, 0px)";
       update();
-      useEventListener("resize", shared.useDebounceFn(update));
+      useEventListener("resize", shared.useDebounceFn(update), { passive: true });
     }
     function update() {
       top.value = getValue(topVarName);
@@ -2074,12 +2366,12 @@
           ...options,
           onScroll(e) {
             var _a;
-            (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+            (_a = options.onScroll) == null ? undefined : _a.call(options, e);
             handler(state);
           },
           onStop(e) {
             var _a;
-            (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+            (_a = options.onStop) == null ? undefined : _a.call(options, e);
             handler(state);
           }
         });
@@ -2115,7 +2407,7 @@
     let stopTouchMoveListener = null;
     let initialOverflow = "";
     vue.watch(shared.toRef(element), (el) => {
-      const target = resolveElement(shared.toValue(el));
+      const target = resolveElement(vue.toValue(el));
       if (target) {
         const ele = target;
         if (!elInitialOverflow.get(ele))
@@ -2131,7 +2423,7 @@
       immediate: true
     });
     const lock = () => {
-      const el = resolveElement(shared.toValue(element));
+      const el = resolveElement(vue.toValue(element));
       if (!el || isLocked.value)
         return;
       if (shared.isIOS) {
@@ -2148,11 +2440,11 @@
       isLocked.value = true;
     };
     const unlock = () => {
-      const el = resolveElement(shared.toValue(element));
+      const el = resolveElement(vue.toValue(element));
       if (!el || !isLocked.value)
         return;
       if (shared.isIOS)
-        stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
+        stopTouchMoveListener == null ? undefined : stopTouchMoveListener();
       el.style.overflow = initialOverflow;
       elInitialOverflow.delete(el);
       isLocked.value = false;
@@ -2299,11 +2591,13 @@
   exports.UseWindowSize = UseWindowSize;
   exports.VOnClickOutside = vOnClickOutside;
   exports.VOnLongPress = vOnLongPress;
+  exports.vElementBounding = vElementBounding;
   exports.vElementHover = vElementHover;
   exports.vElementSize = vElementSize;
   exports.vElementVisibility = vElementVisibility;
   exports.vInfiniteScroll = vInfiniteScroll;
   exports.vIntersectionObserver = vIntersectionObserver;
+  exports.vMouseInElement = vMouseInElement;
   exports.vOnClickOutside = vOnClickOutside;
   exports.vOnKeyStroke = vOnKeyStroke;
   exports.vOnLongPress = vOnLongPress;