@vueuse/components 10.3.0 → 10.4.1

package/index.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { toValue, isClient, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { toValue, isClient, noop, isObject, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, toRef, tryOnMounted, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -58,9 +58,10 @@ function useEventListener(...args) {
       cleanup();
       if (!el)
         return;
+      const optionsClone = isObject(options2) ? { ...options2 } : options2;
       cleanups.push(
         ...events.flatMap((event) => {
-          return listeners.map((listener) => register(el, event, listener, options2));
+          return listeners.map((listener) => register(el, event, listener, optionsClone));
         })
       );
     },
@@ -188,22 +189,6 @@ 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 = {
   [directiveHooks.mounted](el, binding) {
     var _a, _b;
@@ -214,9 +199,10 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$e({
-        target: el
-      }, options));
+      onKeyStroke(keys, handler, {
+        target: el,
+        ...options
+      });
     }
   }
 };
@@ -334,22 +320,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",
@@ -463,7 +433,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;
@@ -485,7 +455,8 @@ function useStorage(key, defaults, storage, options = {}) {
       return;
     pauseWatch();
     try {
-      data.value = read(event);
+      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
+        data.value = read(event);
     } catch (e) {
       onError(e);
     } finally {
@@ -554,22 +525,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",
@@ -583,11 +538,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 = computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
@@ -744,25 +700,6 @@ const UseDocumentVisibility = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   name: "UseDraggable",
   props: [
@@ -800,11 +737,12 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       storageValue.value.x = position.x;
       storageValue.value.y = position.y;
     };
-    const data = reactive(useDraggable(target, __spreadProps$9(__spreadValues$b({}, props), {
+    const data = reactive(useDraggable(target, {
+      ...props,
       handle,
       initialValue,
       onEnd
-    })));
+    }));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target, style: `touch-action:none;${data.style}` }, slots.default(data));
@@ -862,7 +800,7 @@ const vElementHover = {
 
 const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseElementSize",
-  props: ["width", "height", "box"],
+  props: ["width", "height", "box", "as"],
   setup(props, { slots }) {
     const target = ref();
     const data = reactive(useElementSize$1(target, { width: props.width, height: props.height }, { box: props.box }));
@@ -873,23 +811,8 @@ const UseElementSize = /* @__PURE__ */ /* #__PURE__ */ 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 = () => {
@@ -1062,7 +985,8 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     },
     {
       root: scrollTarget,
-      window
+      window,
+      threshold: 0
     }
   );
   return elementIsVisible;
@@ -1133,25 +1057,6 @@ const UseIdle = /* @__PURE__ */ /* #__PURE__ */ 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,
@@ -1204,29 +1109,14 @@ function useAsyncState(promise, initialState, options) {
       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();
@@ -1252,9 +1142,10 @@ function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
     () => loadImage(toValue(options)),
     void 0,
-    __spreadValues$9({
-      resetOnExecute: true
-    }, asyncStateOptions)
+    {
+      resetOnExecute: true,
+      ...asyncStateOptions
+    }
   );
   watch(
     () => toValue(options),
@@ -1367,9 +1258,10 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
   const setArrivedState = (target) => {
+    var _a;
     if (!window)
       return;
-    const el = target === window ? target.document.documentElement : target === window.document ? target.documentElement : target;
+    const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
@@ -1401,9 +1293,10 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
+    var _a;
     if (!window)
       return;
-    const eventTarget = e.target === window.document ? e.target.documentElement : e.target;
+    const eventTarget = (_a = e.target.documentElement) != null ? _a : e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1435,25 +1328,14 @@ function useScroll(element, options = {}) {
   };
 }
 
-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 {
@@ -1462,21 +1344,18 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   } = options;
   const state = reactive(useScroll(
     element,
-    __spreadProps$7(__spreadValues$8({}, options), {
-      offset: __spreadValues$8({
-        [direction]: (_a = options.distance) != null ? _a : 0
-      }, options.offset)
-    })
+    {
+      ...options,
+      offset: {
+        [direction]: (_a = options.distance) != null ? _a : 0,
+        ...options.offset
+      }
+    }
   ));
   const promise = ref();
   const isLoading = computed(() => !!promise.value);
   const observedElement = computed(() => {
-    const el = toValue(element);
-    if (el instanceof Window)
-      return window.document.documentElement;
-    if (el instanceof Document)
-      return document.documentElement;
-    return el;
+    return resolveElement(toValue(element));
   });
   const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
@@ -1550,31 +1429,12 @@ const UseMouseInElement = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   name: "UseMousePressed",
   props: ["touch", "initialValue", "as"],
   setup(props, { slots }) {
     const target = ref();
-    const data = reactive(useMousePressed(__spreadProps$6(__spreadValues$7({}, props), { target })));
+    const data = reactive(useMousePressed({ ...props, target }));
     return () => {
       if (slots.default)
         return h(props.as || "div", { ref: target }, slots.default(data));
@@ -1593,30 +1453,11 @@ const UseNetwork = /* @__PURE__ */ /* #__PURE__ */ 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__ */ defineComponent({
   name: "UseNow",
   props: ["interval"],
   setup(props, { slots }) {
-    const data = reactive(useNow(__spreadProps$5(__spreadValues$6({}, props), { controls: true })));
+    const data = reactive(useNow({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1639,25 +1480,6 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ 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__ */ defineComponent({
   name: "UseOffsetPagination",
   props: [
@@ -1674,7 +1496,8 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "page-count-change"
   ],
   setup(props, { slots, emit }) {
-    const data = reactive(useOffsetPagination(__spreadProps$4(__spreadValues$5({}, props), {
+    const data = reactive(useOffsetPagination({
+      ...props,
       onPageChange(...args) {
         var _a;
         (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
@@ -1690,7 +1513,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
         (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
-    })));
+    }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1724,25 +1547,6 @@ const UsePageLeave = /* @__PURE__ */ /* #__PURE__ */ 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__ */ defineComponent({
   name: "UsePointer",
   props: [
@@ -1752,9 +1556,10 @@ const UsePointer = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   ],
   setup(props, { slots }) {
     const el = ref(null);
-    const data = reactive(usePointer(__spreadProps$3(__spreadValues$4({}, props), {
+    const data = reactive(usePointer({
+      ...props,
       target: props.target === "self" ? el : defaultWindow
-    })));
+    }));
     return () => {
       if (slots.default)
         return slots.default(data, { ref: el });
@@ -1840,23 +1645,8 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponen
   }
 });
 
-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 = () => {
@@ -1998,25 +1788,6 @@ const UseScreenSafeArea = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-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 = {
   [directiveHooks.mounted](el, binding) {
     if (typeof binding.value === "function") {
@@ -2031,7 +1802,8 @@ 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);
@@ -2042,7 +1814,7 @@ const vScroll = {
           (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
-      }));
+      });
     }
   }
 };
@@ -2074,8 +1846,9 @@ function useScrollLock(element, initialState = false) {
   let stopTouchMoveListener = null;
   let initialOverflow;
   watch(toRef(element), (el) => {
-    if (el) {
-      const ele = el;
+    const target = resolveElement(toValue(el));
+    if (target) {
+      const ele = target;
       initialOverflow = ele.style.overflow;
       if (isLocked.value)
         ele.style.overflow = "hidden";
@@ -2084,12 +1857,12 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = toValue(element);
-    if (!ele || isLocked.value)
+    const el = resolveElement(toValue(element));
+    if (!el || isLocked.value)
       return;
     if (isIOS) {
       stopTouchMoveListener = useEventListener(
-        ele,
+        el,
         "touchmove",
         (e) => {
           preventDefault(e);
@@ -2097,15 +1870,15 @@ function useScrollLock(element, initialState = false) {
         { passive: false }
       );
     }
-    ele.style.overflow = "hidden";
+    el.style.overflow = "hidden";
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = toValue(element);
-    if (!ele || !isLocked.value)
+    const el = resolveElement(toValue(element));
+    if (!el || !isLocked.value)
       return;
     isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
-    ele.style.overflow = initialOverflow;
+    el.style.overflow = initialOverflow;
     isLocked.value = false;
   };
   tryOnScopeDispose(unlock);
@@ -2136,30 +1909,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__ */ defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages", "showSecond"],
   setup(props, { slots }) {
-    const data = reactive(useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    const data = reactive(useTimeAgo(() => props.time, { ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2167,30 +1921,11 @@ const UseTimeAgo = /* @__PURE__ */ /* #__PURE__ */ 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__ */ defineComponent({
   name: "UseTimestamp",
   props: ["immediate", "interval", "offset"],
   setup(props, { slots }) {
-    const data = reactive(useTimestamp(__spreadProps(__spreadValues$1({}, props), { controls: true })));
+    const data = reactive(useTimestamp({ ...props, controls: true }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -2198,22 +1933,6 @@ const UseTimestamp = /* @__PURE__ */ /* #__PURE__ */ 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__ */ defineComponent({
   name: "UseVirtualList",
   props: [
@@ -2228,11 +1947,11 @@ const UseVirtualList = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     typeof containerProps.style === "object" && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || "300px");
     return () => h(
       "div",
-      __spreadValues({}, containerProps),
+      { ...containerProps },
       [
         h(
           "div",
-          __spreadValues({}, wrapperProps.value),
+          { ...wrapperProps.value },
           list.value.map((item) => h(
             "div",
             { style: { overFlow: "hidden", height: item.height } },