@vueuse/components 12.2.0 → 12.4.0

package/index.cjs

@@ -20,12 +20,12 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-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) {
@@ -41,10 +41,8 @@ function useEventListener(...args) {
   }
   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());
@@ -55,7 +53,7 @@ function useEventListener(...args) {
     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)
@@ -89,7 +87,7 @@ function onClickOutside(target, handler, options = {}) {
   }
   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 {
@@ -99,11 +97,11 @@ function onClickOutside(target, handler, options = {}) {
     });
   };
   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;
@@ -144,11 +142,11 @@ function onClickOutside(target, handler, options = {}) {
       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;
@@ -207,7 +205,7 @@ function onKeyStroke(...args) {
   } = 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);
@@ -218,7 +216,7 @@ function onKeyStroke(...args) {
 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
@@ -245,23 +243,23 @@ function onLongPress(target, handler, options) {
   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;
@@ -270,12 +268,12 @@ function onLongPress(target, handler, options) {
   }
   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,
@@ -287,28 +285,28 @@ function onLongPress(target, handler, options) {
         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),
@@ -396,7 +394,7 @@ const UseClipboard = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     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);
     };
   }
 });
@@ -416,7 +414,7 @@ function getSSRHandler(key, fallback) {
 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() {
@@ -458,7 +456,7 @@ function useMediaQuery(query, options = {}) {
   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*)\)/);
@@ -477,7 +475,7 @@ function useMediaQuery(query, options = {}) {
     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
@@ -487,7 +485,7 @@ function useMediaQuery(query, options = {}) {
   shared.tryOnScopeDispose(() => {
     stopWatch();
     cleanup();
-    mediaQuery = void 0;
+    mediaQuery = undefined;
   });
   return vue.computed(() => matches.value);
 }
@@ -552,6 +550,7 @@ function useStorage(key, defaults, storage, options = {}) {
     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", () => {
@@ -564,7 +563,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   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(
@@ -572,10 +571,11 @@ function useStorage(key, defaults, storage, options = {}) {
     () => 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)
@@ -587,7 +587,7 @@ function useStorage(key, defaults, storage, options = {}) {
   function dispatchWriteEvent(oldValue, newValue) {
     if (window) {
       const payload = {
-        key,
+        key: keyComputed.value,
         oldValue,
         newValue,
         storageArea: storage
@@ -599,14 +599,14 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   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);
         }
       }
@@ -615,10 +615,10 @@ function useStorage(key, defaults, storage, options = {}) {
     }
   }
   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);
@@ -640,7 +640,7 @@ function useStorage(key, defaults, storage, options = {}) {
       data.value = rawInit;
       return;
     }
-    if (event && event.key !== key)
+    if (event && event.key !== keyComputed.value)
       return;
     pauseWatch();
     try {
@@ -688,7 +688,7 @@ function useColorMode(options = {}) {
   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();
@@ -872,18 +872,18 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     });
     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;
@@ -917,10 +917,222 @@ const UseElementBounding = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
+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);
@@ -929,7 +1141,7 @@ function useElementHover(el, options = {}) {
     const delay = entering ? delayEnter : delayLeave;
     if (timer) {
       clearTimeout(timer);
-      timer = void 0;
+      timer = undefined;
     }
     if (delay)
       timer = setTimeout(() => isHovered.value = entering, delay);
@@ -940,6 +1152,12 @@ function useElementHover(el, options = {}) {
     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;
 }
 
@@ -970,50 +1188,11 @@ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
-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);
@@ -1030,7 +1209,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
         }
       } 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 {
@@ -1069,7 +1248,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 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 }));
@@ -1101,8 +1280,8 @@ function useIntersectionObserver(target, callback, options = {}) {
   } = 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);
@@ -1175,7 +1354,7 @@ function useElementVisibility(element, options = {}) {
       root: scrollTarget,
       window,
       threshold,
-      rootMargin: shared.toValue(rootMargin)
+      rootMargin: vue.toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -1259,11 +1438,11 @@ function useAsyncState(promise, initialState, options) {
   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)
@@ -1284,8 +1463,9 @@ function useAsyncState(promise, initialState, options) {
     }
     return state.value;
   }
-  if (immediate)
+  if (immediate) {
     execute(delay);
+  }
   const shell = {
     state,
     isReady,
@@ -1341,15 +1521,15 @@ async function loadImage(options) {
 }
 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 }
   );
@@ -1427,7 +1607,7 @@ function useScroll(element, options = {}) {
       return internalX.value;
     },
     set(x2) {
-      scrollTo(x2, void 0);
+      scrollTo(x2, undefined);
     }
   });
   const y = vue.computed({
@@ -1435,22 +1615,22 @@ function useScroll(element, options = {}) {
       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)
@@ -1484,7 +1664,7 @@ function useScroll(element, options = {}) {
     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;
@@ -1534,7 +1714,7 @@ function useScroll(element, options = {}) {
   );
   shared.tryOnMounted(() => {
     try {
-      const _element = shared.toValue(element);
+      const _element = vue.toValue(element);
       if (!_element)
         return;
       setArrivedState(_element);
@@ -1555,7 +1735,7 @@ function useScroll(element, options = {}) {
     arrivedState,
     directions,
     measure() {
-      const _element = shared.toValue(element);
+      const _element = vue.toValue(element);
       if (window && _element)
         setArrivedState(_element);
     }
@@ -1582,7 +1762,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   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() {
@@ -1660,6 +1840,159 @@ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   }
 });
 
+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"],
@@ -1731,17 +2064,17 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent(
       ...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);
       }
     }));
@@ -1898,60 +2231,19 @@ const vResizeObserver = {
   }
 };
 
-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;
     }
   }
@@ -1962,7 +2254,7 @@ function useCssVar(prop, target, options = {}) {
     });
   }
   vue.watch(
-    [elRef, () => shared.toValue(prop)],
+    [elRef, () => vue.toValue(prop)],
     (_, old) => {
       if (old[0] && old[1])
         old[0].style.removeProperty(old[1]);
@@ -1974,8 +2266,8 @@ function useCssVar(prop, target, options = {}) {
     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
@@ -2005,7 +2297,7 @@ function useScreenSafeArea() {
     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);
@@ -2077,12 +2369,12 @@ const vScroll = {
         ...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);
         }
       });
@@ -2118,7 +2410,7 @@ function useScrollLock(element, initialState = false) {
   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))
@@ -2134,7 +2426,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const el = resolveElement(shared.toValue(element));
+    const el = resolveElement(vue.toValue(element));
     if (!el || isLocked.value)
       return;
     if (shared.isIOS) {
@@ -2151,11 +2443,11 @@ function useScrollLock(element, initialState = false) {
     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;
@@ -2302,11 +2594,13 @@ exports.UseWindowFocus = UseWindowFocus;
 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;