@vueuse/components 10.2.1 → 10.4.0

package/index.cjs

@@ -21,9 +21,8 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 });
 
 function unrefElement(elRef) {
-  var _a;
   const plain = shared.toValue(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  return plain?.$el ?? plain;
 }
 
 const defaultWindow = shared.isClient ? window : void 0;
@@ -84,6 +83,7 @@ function onClickOutside(target, handler, options = {}) {
   if (shared.isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true;
     Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", shared.noop));
+    window.document.documentElement.addEventListener("click", shared.noop);
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
@@ -117,9 +117,8 @@ function onClickOutside(target, handler, options = {}) {
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       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 (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
           handler(event);
       }, 0);
     })
@@ -189,42 +188,25 @@ function onKeyStroke(...args) {
   return useEventListener(target, eventName, listener, passive);
 }
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    }
-  return a;
-};
 const vOnKeyStroke = {
   [shared.directiveHooks.mounted](el, binding) {
-    var _a, _b;
-    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
+    const keys = binding.arg?.split(",") ?? true;
     if (typeof binding.value === "function") {
       onKeyStroke(keys, binding.value, {
         target: el
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$e({
-        target: el
-      }, options));
+      onKeyStroke(keys, handler, {
+        target: el,
+        ...options
+      });
     }
   }
 };
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
-  var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
   let timeout;
   function clear() {
@@ -234,26 +216,24 @@ 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 (options?.modifiers?.self && ev.target !== elementRef.value)
       return;
     clear();
-    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
+    if (options?.modifiers?.prevent)
       ev.preventDefault();
-    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
+    if (options?.modifiers?.stop)
       ev.stopPropagation();
     timeout = setTimeout(
       () => handler(ev),
-      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
+      options?.delay ?? DEFAULT_DELAY
     );
   }
   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: options?.modifiers?.capture,
+    once: options?.modifiers?.once
   };
   useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
-  useEventListener(elementRef, "pointerup", clear, listenerOptions);
-  useEventListener(elementRef, "pointerleave", clear, listenerOptions);
+  useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
 }
 
 const OnLongPress = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -336,22 +316,6 @@ function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
 
-var __defProp$d = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
 const StorageSerializers = {
   boolean: {
     read: (v) => v === "true",
@@ -388,7 +352,6 @@ const StorageSerializers = {
 };
 const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
-  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -405,10 +368,7 @@ function useStorage(key, defaults, storage, options = {}) {
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
   if (!storage) {
     try {
-      storage = getSSRHandler("getDefaultStorage", () => {
-        var _a2;
-        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
-      })();
+      storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
     } catch (e) {
       onError(e);
     }
@@ -417,7 +377,7 @@ function useStorage(key, defaults, storage, options = {}) {
     return data;
   const rawInit = shared.toValue(defaults);
   const type = guessSerializerType(rawInit);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  const serializer = options.serializer ?? StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
     data,
     () => write(data.value),
@@ -465,7 +425,7 @@ function useStorage(key, defaults, storage, options = {}) {
       if (typeof mergeDefaults === "function")
         return mergeDefaults(value, rawInit);
       else if (type === "object" && !Array.isArray(value))
-        return __spreadValues$d(__spreadValues$d({}, rawInit), value);
+        return { ...rawInit, ...value };
       return value;
     } else if (typeof rawValue !== "string") {
       return rawValue;
@@ -487,7 +447,8 @@ function useStorage(key, defaults, storage, options = {}) {
       return;
     pauseWatch();
     try {
-      data.value = read(event);
+      if (event?.newValue !== serializer.write(data.value))
+        data.value = read(event);
     } catch (e) {
       onError(e);
     } finally {
@@ -522,29 +483,33 @@ function useMediaQuery(query, options = {}) {
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = vueDemi.ref(false);
+  const handler = (event) => {
+    matches.value = event.matches;
+  };
   const cleanup = () => {
     if (!mediaQuery)
       return;
     if ("removeEventListener" in mediaQuery)
-      mediaQuery.removeEventListener("change", update);
+      mediaQuery.removeEventListener("change", handler);
     else
-      mediaQuery.removeListener(update);
+      mediaQuery.removeListener(handler);
   };
-  const update = () => {
+  const stopWatch = vueDemi.watchEffect(() => {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(shared.toRef(query).value);
-    matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
-    if (!mediaQuery)
-      return;
+    mediaQuery = window.matchMedia(shared.toValue(query));
     if ("addEventListener" in mediaQuery)
-      mediaQuery.addEventListener("change", update);
+      mediaQuery.addEventListener("change", handler);
     else
-      mediaQuery.addListener(update);
-  };
-  vueDemi.watchEffect(update);
-  shared.tryOnScopeDispose(() => cleanup());
+      mediaQuery.addListener(handler);
+    matches.value = mediaQuery.matches;
+  });
+  shared.tryOnScopeDispose(() => {
+    stopWatch();
+    cleanup();
+    mediaQuery = void 0;
+  });
   return matches;
 }
 
@@ -552,22 +517,6 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
-var __defProp$c = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    }
-  return a;
-};
 function useColorMode(options = {}) {
   const {
     selector = "html",
@@ -581,11 +530,12 @@ function useColorMode(options = {}) {
     emitAuto,
     disableTransition = true
   } = options;
-  const modes = __spreadValues$c({
+  const modes = {
     auto: "",
     light: "light",
-    dark: "dark"
-  }, options.modes || {});
+    dark: "dark",
+    ...options.modes || {}
+  };
   const preferredDark = usePreferredDark({ window });
   const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? shared.toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
@@ -595,7 +545,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?.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       let style;
@@ -623,8 +573,7 @@ function useColorMode(options = {}) {
     }
   );
   function defaultOnChanged(mode) {
-    var _a;
-    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
+    updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -742,25 +691,6 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComp
   }
 });
 
-var __defProp$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseDraggable",
   props: [
@@ -780,10 +710,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const handle = vueDemi.computed(() => {
-      var _a;
-      return (_a = props.handle) != null ? _a : target.value;
-    });
+    const handle = vueDemi.computed(() => props.handle ?? target.value);
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
       shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -791,18 +718,18 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     );
     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);
+      props.onEnd?.(position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
       storageValue.value.y = position.y;
     };
-    const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$9(__spreadValues$b({}, props), {
+    const data = vueDemi.reactive(core.useDraggable(target, {
+      ...props,
       handle,
       initialValue,
       onEnd
-    })));
+    }));
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
@@ -860,7 +787,7 @@ const vElementHover = {
 
 const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseElementSize",
-  props: ["width", "height", "box"],
+  props: ["width", "height", "box", "as"],
   setup(props, { slots }) {
     const target = vueDemi.ref();
     const data = vueDemi.reactive(core.useElementSize(target, { width: props.width, height: props.height }, { box: props.box }));
@@ -871,23 +798,8 @@ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$c.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function useResizeObserver(target, callback, options = {}) {
-  const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest$1(_a, ["window"]);
+  const { window = defaultWindow, ...observerOptions } = options;
   let observer;
   const isSupported = useSupported(() => window && "ResizeObserver" in window);
   const cleanup = () => {
@@ -924,10 +836,7 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = vueDemi.computed(() => {
-    var _a, _b;
-    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
-  });
+  const isSVG = vueDemi.computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
   useResizeObserver(
@@ -969,8 +878,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 
 const vElementSize = {
   [shared.directiveHooks.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 : binding.value?.[0];
     const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
     const { width, height } = useElementSize(el, ...options);
     vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1060,7 +968,8 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     },
     {
       root: scrollTarget,
-      window
+      window,
+      threshold: 0
     }
   );
   return elementIsVisible;
@@ -1131,25 +1040,6 @@ const UseIdle = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 function useAsyncState(promise, initialState, options) {
   const {
     immediate = true,
@@ -1159,7 +1049,7 @@ function useAsyncState(promise, initialState, options) {
     resetOnExecute = true,
     shallow = true,
     throwError
-  } = options != null ? options : {};
+  } = options ?? {};
   const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
   const isReady = vueDemi.ref(false);
   const isLoading = vueDemi.ref(false);
@@ -1202,29 +1092,14 @@ function useAsyncState(promise, initialState, options) {
       shared.until(isLoading).toBe(false).then(() => resolve(shell)).catch(reject);
     });
   }
-  return __spreadProps$8(__spreadValues$a({}, shell), {
+  return {
+    ...shell,
     then(onFulfilled, onRejected) {
       return waitUntilIsLoaded().then(onFulfilled, onRejected);
     }
-  });
+  };
 }
 
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -1250,9 +1125,10 @@ function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
     () => loadImage(shared.toValue(options)),
     void 0,
-    __spreadValues$9({
-      resetOnExecute: true
-    }, asyncStateOptions)
+    {
+      resetOnExecute: true,
+      ...asyncStateOptions
+    }
   );
   vueDemi.watch(
     () => shared.toValue(options),
@@ -1306,7 +1182,8 @@ function useScroll(element, options = {}) {
       capture: false,
       passive: true
     },
-    behavior = "auto"
+    behavior = "auto",
+    window = defaultWindow
   } = options;
   const internalX = vueDemi.ref(0);
   const internalY = vueDemi.ref(0);
@@ -1327,13 +1204,14 @@ function useScroll(element, options = {}) {
     }
   });
   function scrollTo(_x, _y) {
-    var _a, _b, _c;
+    if (!window)
+      return;
     const _element = shared.toValue(element);
     if (!_element)
       return;
-    (_c = _element instanceof Document ? 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,
+    (_element instanceof Document ? window.document.body : _element)?.scrollTo({
+      top: shared.toValue(_y) ?? y.value,
+      left: shared.toValue(_x) ?? x.value,
       behavior: shared.toValue(behavior)
     });
   }
@@ -1362,7 +1240,9 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const setArrivedState = (target) => {
-    const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+    if (!window)
+      return;
+    const el = target.document ? target.document.documentElement : target.documentElement ?? target;
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
@@ -1378,8 +1258,8 @@ function useScroll(element, options = {}) {
     }
     internalX.value = scrollLeft;
     let scrollTop = el.scrollTop;
-    if (target === document && !scrollTop)
-      scrollTop = document.body.scrollTop;
+    if (target === window.document && !scrollTop)
+      scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
@@ -1394,7 +1274,9 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
-    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    if (!window)
+      return;
+    const eventTarget = e.target.documentElement ?? e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1420,53 +1302,47 @@ function useScroll(element, options = {}) {
     directions,
     measure() {
       const _element = shared.toValue(element);
-      if (_element)
+      if (window && _element)
         setArrivedState(_element);
     }
   };
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+function resolveElement(el) {
+  if (typeof Window !== "undefined" && el instanceof Window)
+    return el.document.documentElement;
+  if (typeof Document !== "undefined" && el instanceof Document)
+    return el.documentElement;
+  return el;
+}
+
 function useInfiniteScroll(element, onLoadMore, options = {}) {
-  var _a;
   const {
     direction = "bottom",
     interval = 100
   } = options;
   const state = vueDemi.reactive(useScroll(
     element,
-    __spreadProps$7(__spreadValues$8({}, options), {
-      offset: __spreadValues$8({
-        [direction]: (_a = options.distance) != null ? _a : 0
-      }, options.offset)
-    })
+    {
+      ...options,
+      offset: {
+        [direction]: options.distance ?? 0,
+        ...options.offset
+      }
+    }
   ));
   const promise = vueDemi.ref();
   const isLoading = vueDemi.computed(() => !!promise.value);
+  const observedElement = vueDemi.computed(() => {
+    return resolveElement(shared.toValue(element));
+  });
+  const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
     state.measure();
-    const el = shared.toValue(element);
-    if (!el || !el.offsetParent)
+    if (!observedElement.value || !isElementVisible.value)
       return;
-    const isNarrower = direction === "bottom" || direction === "top" ? el.scrollHeight <= el.clientHeight : el.scrollWidth <= el.clientWidth;
+    const { scrollHeight, clientHeight, scrollWidth, clientWidth } = observedElement.value;
+    const isNarrower = direction === "bottom" || direction === "top" ? scrollHeight <= clientHeight : scrollWidth <= clientWidth;
     if (state.arrivedState[direction] || isNarrower) {
       if (!promise.value) {
         promise.value = Promise.all([
@@ -1480,7 +1356,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     }
   }
   vueDemi.watch(
-    () => [state.arrivedState[direction], shared.toValue(element)],
+    () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
   );
@@ -1532,31 +1408,12 @@ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
   }
 });
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const UseMousePressed = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const data = vueDemi.reactive(core.useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
+    const data = vueDemi.reactive(core.useMousePressed({ ...props, target }));
     return () => {
       if (slots.default)
         return vueDemi.h(props.as || "div", { ref: target }, slots.default(data));
@@ -1575,30 +1432,11 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const UseNow = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
+    const data = vueDemi.reactive(core.useNow({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1621,25 +1459,6 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseOffsetPagination",
   props: [
@@ -1656,23 +1475,21 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
     "page-count-change"
   ],
   setup(props, { slots, emit }) {
-    const data = vueDemi.reactive(core.useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
+    const data = vueDemi.reactive(core.useOffsetPagination({
+      ...props,
       onPageChange(...args) {
-        var _a;
-        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
+        props.onPageChange?.(...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
-        var _a;
-        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
+        props.onPageSizeChange?.(...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
-        var _a;
-        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
+        props.onPageCountChange?.(...args);
         emit("page-count-change", ...args);
       }
-    })));
+    }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1706,25 +1523,6 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UsePointer",
   props: [
@@ -1734,9 +1532,10 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const el = vueDemi.ref(null);
-    const data = vueDemi.reactive(core.usePointer(__spreadProps$3(__spreadValues$4({}, props), {
+    const data = vueDemi.reactive(core.usePointer({
+      ...props,
       target: props.target === "self" ? el : defaultWindow
-    })));
+    }));
     return () => {
       if (slots.default)
         return slots.default(data, { ref: el });
@@ -1822,23 +1621,8 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.define
   }
 });
 
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function useMutationObserver(target, callback, options = {}) {
-  const _a = options, { window = defaultWindow } = _a, mutationOptions = __objRest(_a, ["window"]);
+  const { window = defaultWindow, ...mutationOptions } = options;
   let observer;
   const isSupported = useSupported(() => window && "MutationObserver" in window);
   const cleanup = () => {
@@ -1872,16 +1656,12 @@ function useMutationObserver(target, callback, options = {}) {
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue = "", observe = false } = options;
   const variable = vueDemi.ref(initialValue);
-  const elRef = vueDemi.computed(() => {
-    var _a;
-    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
-  });
+  const elRef = vueDemi.computed(() => unrefElement(target) || window?.document?.documentElement);
   function updateCssVar() {
-    var _a;
     const key = shared.toValue(prop);
     const el = shared.toValue(elRef);
     if (el && window) {
-      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
+      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
       variable.value = value || initialValue;
     }
   }
@@ -1899,8 +1679,7 @@ function useCssVar(prop, target, options = {}) {
   vueDemi.watch(
     variable,
     (val) => {
-      var _a;
-      if ((_a = elRef.value) == null ? void 0 : _a.style)
+      if (elRef.value?.style)
         elRef.value.style.setProperty(shared.toValue(prop), val);
     }
   );
@@ -1980,25 +1759,6 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponen
   }
 });
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 const vScroll = {
   [shared.directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function") {
@@ -2013,18 +1773,17 @@ const vScroll = {
       });
     } else {
       const [handler, options] = binding.value;
-      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+      const state = useScroll(el, {
+        ...options,
         onScroll(e) {
-          var _a;
-          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+          options.onScroll?.(e);
           handler(state);
         },
         onStop(e) {
-          var _a;
-          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+          options.onStop?.(e);
           handler(state);
         }
-      }));
+      });
     }
   }
 };
@@ -2056,8 +1815,9 @@ function useScrollLock(element, initialState = false) {
   let stopTouchMoveListener = null;
   let initialOverflow;
   vueDemi.watch(shared.toRef(element), (el) => {
-    if (el) {
-      const ele = el;
+    const target = resolveElement(shared.toValue(el));
+    if (target) {
+      const ele = target;
       initialOverflow = ele.style.overflow;
       if (isLocked.value)
         ele.style.overflow = "hidden";
@@ -2066,12 +1826,12 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = shared.toValue(element);
-    if (!ele || isLocked.value)
+    const el = resolveElement(shared.toValue(element));
+    if (!el || isLocked.value)
       return;
     if (shared.isIOS) {
       stopTouchMoveListener = useEventListener(
-        ele,
+        el,
         "touchmove",
         (e) => {
           preventDefault(e);
@@ -2079,15 +1839,15 @@ function useScrollLock(element, initialState = false) {
         { passive: false }
       );
     }
-    ele.style.overflow = "hidden";
+    el.style.overflow = "hidden";
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = shared.toValue(element);
-    if (!ele || !isLocked.value)
+    const el = resolveElement(shared.toValue(element));
+    if (!el || !isLocked.value)
       return;
-    shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
-    ele.style.overflow = initialOverflow;
+    shared.isIOS && stopTouchMoveListener?.();
+    el.style.overflow = initialOverflow;
     isLocked.value = false;
   };
   shared.tryOnScopeDispose(unlock);
@@ -2118,30 +1878,11 @@ function onScrollLock() {
 }
 const vScrollLock = onScrollLock();
 
-var __defProp$2 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    const data = vueDemi.reactive(core.useTimeAgo(() => props.time, { ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2149,30 +1890,11 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp$1 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
-    const data = vueDemi.reactive(core.useTimestamp(__spreadProps(__spreadValues$1({}, props), { controls: true })));
+    const data = vueDemi.reactive(core.useTimestamp({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2180,22 +1902,6 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   }
 });
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseVirtualList",
   props: [
@@ -2210,11 +1916,11 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
     return () => vueDemi.h(
       "div",
-      __spreadValues({}, containerProps),
+      { ...containerProps },
       [
         vueDemi.h(
           "div",
-          __spreadValues({}, wrapperProps.value),
+          { ...wrapperProps.value },
           list.value.map((item) => vueDemi.h(
             "div",
             { style: { overFlow: "hidden", height: item.height } },