@vueuse/components 10.3.0 → 10.4.1

package/index.iife.js

@@ -173,9 +173,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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));
           })
         );
       },
@@ -303,22 +304,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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;
@@ -329,9 +314,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         });
       } else {
         const [handler, options] = binding.value;
-        onKeyStroke(keys, handler, __spreadValues$e({
-          target: el
-        }, options));
+        onKeyStroke(keys, handler, {
+          target: el,
+          ...options
+        });
       }
     }
   };
@@ -449,22 +435,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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",
@@ -578,7 +548,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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;
@@ -600,7 +570,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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 {
@@ -669,22 +640,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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",
@@ -698,11 +653,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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 }));
@@ -859,25 +815,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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: [
@@ -915,11 +852,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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));
@@ -977,7 +915,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   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 }));
@@ -988,23 +926,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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 = () => {
@@ -1177,7 +1100,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       },
       {
         root: scrollTarget,
-        window
+        window,
+        threshold: 0
       }
     );
     return elementIsVisible;
@@ -1248,25 +1172,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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,
@@ -1319,29 +1224,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         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();
@@ -1367,9 +1257,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const state = useAsyncState(
       () => loadImage(shared.toValue(options)),
       void 0,
-      __spreadValues$9({
-        resetOnExecute: true
-      }, asyncStateOptions)
+      {
+        resetOnExecute: true,
+        ...asyncStateOptions
+      }
     );
     vueDemi.watch(
       () => shared.toValue(options),
@@ -1482,9 +1373,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     };
     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;
@@ -1516,9 +1408,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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);
@@ -1550,25 +1443,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     };
   }
 
-  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 {
@@ -1577,21 +1459,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     } = 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() {
@@ -1665,31 +1544,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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));
@@ -1708,30 +1568,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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);
@@ -1754,25 +1595,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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: [
@@ -1789,7 +1611,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "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);
@@ -1805,7 +1628,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
           emit("page-count-change", ...args);
         }
-      })));
+      }));
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1839,25 +1662,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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: [
@@ -1867,9 +1671,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     ],
     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 });
@@ -1955,23 +1760,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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 = () => {
@@ -2113,25 +1903,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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") {
@@ -2146,7 +1917,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         });
       } 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);
@@ -2157,7 +1929,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
             (_a = options.onStop) == null ? void 0 : _a.call(options, e);
             handler(state);
           }
-        }));
+        });
       }
     }
   };
@@ -2189,8 +1961,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     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";
@@ -2199,12 +1972,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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);
@@ -2212,15 +1985,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           { 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);
@@ -2251,30 +2024,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
   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);
@@ -2282,30 +2036,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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);
@@ -2313,22 +2048,6 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   });
 
-  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: [
@@ -2343,11 +2062,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       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 } },