@vueuse/components 10.3.0 → 10.4.1

package/index.cjs

@@ -60,9 +60,10 @@ function useEventListener(...args) {
       cleanup();
       if (!el)
         return;
+      const optionsClone = shared.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));
         })
       );
     },
@@ -190,22 +191,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 = {
   [shared.directiveHooks.mounted](el, binding) {
     var _a, _b;
@@ -216,9 +201,10 @@ const vOnKeyStroke = {
       });
     } else {
       const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$e({
-        target: el
-      }, options));
+      onKeyStroke(keys, handler, {
+        target: el,
+        ...options
+      });
     }
   }
 };
@@ -336,22 +322,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",
@@ -465,7 +435,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 +457,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 {
@@ -556,22 +527,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",
@@ -585,11 +540,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 }));
@@ -746,25 +702,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: [
@@ -802,11 +739,12 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       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));
@@ -864,7 +802,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 }));
@@ -875,23 +813,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 = () => {
@@ -1064,7 +987,8 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     },
     {
       root: scrollTarget,
-      window
+      window,
+      threshold: 0
     }
   );
   return elementIsVisible;
@@ -1135,25 +1059,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,
@@ -1206,29 +1111,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();
@@ -1254,9 +1144,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),
@@ -1369,9 +1260,10 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = shared.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;
@@ -1403,9 +1295,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);
@@ -1437,25 +1330,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 {
@@ -1464,21 +1346,18 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   } = 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]: (_a = options.distance) != null ? _a : 0,
+        ...options.offset
+      }
+    }
   ));
   const promise = vueDemi.ref();
   const isLoading = vueDemi.computed(() => !!promise.value);
   const observedElement = vueDemi.computed(() => {
-    const el = shared.toValue(element);
-    if (el instanceof Window)
-      return window.document.documentElement;
-    if (el instanceof Document)
-      return document.documentElement;
-    return el;
+    return resolveElement(shared.toValue(element));
   });
   const isElementVisible = useElementVisibility(observedElement);
   function checkAndLoad() {
@@ -1552,31 +1431,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));
@@ -1595,30 +1455,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);
@@ -1641,25 +1482,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: [
@@ -1676,7 +1498,8 @@ 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);
@@ -1692,7 +1515,7 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
         (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
-    })));
+    }));
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1726,25 +1549,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: [
@@ -1754,9 +1558,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 });
@@ -1842,23 +1647,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 = () => {
@@ -2000,25 +1790,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") {
@@ -2033,7 +1804,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);
@@ -2044,7 +1816,7 @@ const vScroll = {
           (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
-      }));
+      });
     }
   }
 };
@@ -2076,8 +1848,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";
@@ -2086,12 +1859,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);
@@ -2099,15 +1872,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;
+    el.style.overflow = initialOverflow;
     isLocked.value = false;
   };
   shared.tryOnScopeDispose(unlock);
@@ -2138,30 +1911,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);
@@ -2169,30 +1923,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);
@@ -2200,22 +1935,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: [
@@ -2230,11 +1949,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 } },