@vueuse/components 10.4.0 → 10.4.1

package/index.cjs

@@ -21,8 +21,9 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 });
 
 function unrefElement(elRef) {
+  var _a;
   const plain = shared.toValue(elRef);
-  return plain?.$el ?? plain;
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
 const defaultWindow = shared.isClient ? window : void 0;
@@ -59,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));
         })
       );
     },
@@ -117,8 +119,9 @@ function onClickOutside(target, handler, options = {}) {
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       setTimeout(() => {
+        var _a;
         const el = unrefElement(target);
-        if (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
           handler(event);
       }, 0);
     })
@@ -190,7 +193,8 @@ function onKeyStroke(...args) {
 
 const vOnKeyStroke = {
   [shared.directiveHooks.mounted](el, binding) {
-    const keys = binding.arg?.split(",") ?? true;
+    var _a, _b;
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
     if (typeof binding.value === "function") {
       onKeyStroke(keys, binding.value, {
         target: el
@@ -207,6 +211,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
   let timeout;
   function clear() {
@@ -216,21 +221,22 @@ function onLongPress(target, handler, options) {
     }
   }
   function onDown(ev) {
-    if (options?.modifiers?.self && ev.target !== elementRef.value)
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
     clear();
-    if (options?.modifiers?.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if (options?.modifiers?.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
     timeout = setTimeout(
       () => handler(ev),
-      options?.delay ?? DEFAULT_DELAY
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
   const listenerOptions = {
-    capture: options?.modifiers?.capture,
-    once: options?.modifiers?.once
+    capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
+    once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
   useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
@@ -352,6 +358,7 @@ const StorageSerializers = {
 };
 const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -368,7 +375,10 @@ function useStorage(key, defaults, storage, options = {}) {
   const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
   if (!storage) {
     try {
-      storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
     } catch (e) {
       onError(e);
     }
@@ -377,7 +387,7 @@ function useStorage(key, defaults, storage, options = {}) {
     return data;
   const rawInit = shared.toValue(defaults);
   const type = guessSerializerType(rawInit);
-  const serializer = options.serializer ?? StorageSerializers[type];
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
     data,
     () => write(data.value),
@@ -447,7 +457,7 @@ function useStorage(key, defaults, storage, options = {}) {
       return;
     pauseWatch();
     try {
-      if (event?.newValue !== serializer.write(data.value))
+      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
         data.value = read(event);
     } catch (e) {
       onError(e);
@@ -545,7 +555,7 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window?.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       let style;
@@ -573,7 +583,8 @@ function useColorMode(options = {}) {
     }
   );
   function defaultOnChanged(mode) {
-    updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
+    var _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -710,7 +721,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const handle = vueDemi.computed(() => props.handle ?? target.value);
+    const handle = vueDemi.computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
       shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -718,7 +732,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position, event) => {
-      props.onEnd?.(position, event);
+      var _a;
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -836,7 +851,10 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = vueDemi.computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
+  const isSVG = vueDemi.computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
   useResizeObserver(
@@ -878,7 +896,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 
 const vElementSize = {
   [shared.directiveHooks.mounted](el, binding) {
-    const handler = typeof binding.value === "function" ? binding.value : binding.value?.[0];
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
     const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
     const { width, height } = useElementSize(el, ...options);
     vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1049,7 +1068,7 @@ function useAsyncState(promise, initialState, options) {
     resetOnExecute = true,
     shallow = true,
     throwError
-  } = options ?? {};
+  } = options != null ? options : {};
   const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
   const isReady = vueDemi.ref(false);
   const isLoading = vueDemi.ref(false);
@@ -1204,14 +1223,15 @@ function useScroll(element, options = {}) {
     }
   });
   function scrollTo(_x, _y) {
+    var _a, _b, _c;
     if (!window)
       return;
     const _element = shared.toValue(element);
     if (!_element)
       return;
-    (_element instanceof Document ? window.document.body : _element)?.scrollTo({
-      top: shared.toValue(_y) ?? y.value,
-      left: shared.toValue(_x) ?? x.value,
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+      top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+      left: (_b = shared.toValue(_x)) != null ? _b : x.value,
       behavior: shared.toValue(behavior)
     });
   }
@@ -1240,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.document ? target.document.documentElement : 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;
@@ -1274,9 +1295,10 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
+    var _a;
     if (!window)
       return;
-    const eventTarget = e.target.documentElement ?? e.target;
+    const eventTarget = (_a = e.target.documentElement) != null ? _a : e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1317,6 +1339,7 @@ function resolveElement(el) {
 }
 
 function useInfiniteScroll(element, onLoadMore, options = {}) {
+  var _a;
   const {
     direction = "bottom",
     interval = 100
@@ -1326,7 +1349,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     {
       ...options,
       offset: {
-        [direction]: options.distance ?? 0,
+        [direction]: (_a = options.distance) != null ? _a : 0,
         ...options.offset
       }
     }
@@ -1478,15 +1501,18 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineCompon
     const data = vueDemi.reactive(core.useOffsetPagination({
       ...props,
       onPageChange(...args) {
-        props.onPageChange?.(...args);
+        var _a;
+        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
-        props.onPageSizeChange?.(...args);
+        var _a;
+        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
-        props.onPageCountChange?.(...args);
+        var _a;
+        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
     }));
@@ -1656,12 +1682,16 @@ function useMutationObserver(target, callback, options = {}) {
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue = "", observe = false } = options;
   const variable = vueDemi.ref(initialValue);
-  const elRef = vueDemi.computed(() => unrefElement(target) || window?.document?.documentElement);
+  const elRef = vueDemi.computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
   function updateCssVar() {
+    var _a;
     const key = shared.toValue(prop);
     const el = shared.toValue(elRef);
     if (el && window) {
-      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
   }
@@ -1679,7 +1709,8 @@ function useCssVar(prop, target, options = {}) {
   vueDemi.watch(
     variable,
     (val) => {
-      if (elRef.value?.style)
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
         elRef.value.style.setProperty(shared.toValue(prop), val);
     }
   );
@@ -1776,11 +1807,13 @@ const vScroll = {
       const state = useScroll(el, {
         ...options,
         onScroll(e) {
-          options.onScroll?.(e);
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
           handler(state);
         },
         onStop(e) {
-          options.onStop?.(e);
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
       });
@@ -1846,7 +1879,7 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(shared.toValue(element));
     if (!el || !isLocked.value)
       return;
-    shared.isIOS && stopTouchMoveListener?.();
+    shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     el.style.overflow = initialOverflow;
     isLocked.value = false;
   };

package/index.iife.js

@@ -134,8 +134,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   });
 
   function unrefElement(elRef) {
+    var _a;
     const plain = shared.toValue(elRef);
-    return plain?.$el ?? plain;
+    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
   }
 
   const defaultWindow = shared.isClient ? window : void 0;
@@ -172,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));
           })
         );
       },
@@ -230,8 +232,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }, { passive: true }),
       detectIframe && useEventListener(window, "blur", (event) => {
         setTimeout(() => {
+          var _a;
           const el = unrefElement(target);
-          if (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
+          if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
             handler(event);
         }, 0);
       })
@@ -303,7 +306,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   const vOnKeyStroke = {
     [shared.directiveHooks.mounted](el, binding) {
-      const keys = binding.arg?.split(",") ?? true;
+      var _a, _b;
+      const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
       if (typeof binding.value === "function") {
         onKeyStroke(keys, binding.value, {
           target: el
@@ -320,6 +324,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   const DEFAULT_DELAY = 500;
   function onLongPress(target, handler, options) {
+    var _a, _b;
     const elementRef = vueDemi.computed(() => unrefElement(target));
     let timeout;
     function clear() {
@@ -329,21 +334,22 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     }
     function onDown(ev) {
-      if (options?.modifiers?.self && ev.target !== elementRef.value)
+      var _a2, _b2, _c, _d;
+      if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
         return;
       clear();
-      if (options?.modifiers?.prevent)
+      if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
         ev.preventDefault();
-      if (options?.modifiers?.stop)
+      if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
         ev.stopPropagation();
       timeout = setTimeout(
         () => handler(ev),
-        options?.delay ?? DEFAULT_DELAY
+        (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
       );
     }
     const listenerOptions = {
-      capture: options?.modifiers?.capture,
-      once: options?.modifiers?.once
+      capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
+      once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
     };
     useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
     useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
@@ -465,6 +471,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   };
   const customStorageEventName = "vueuse-storage";
   function useStorage(key, defaults, storage, options = {}) {
+    var _a;
     const {
       flush = "pre",
       deep = true,
@@ -481,7 +488,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const data = (shallow ? vueDemi.shallowRef : vueDemi.ref)(defaults);
     if (!storage) {
       try {
-        storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
+        storage = getSSRHandler("getDefaultStorage", () => {
+          var _a2;
+          return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+        })();
       } catch (e) {
         onError(e);
       }
@@ -490,7 +500,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       return data;
     const rawInit = shared.toValue(defaults);
     const type = guessSerializerType(rawInit);
-    const serializer = options.serializer ?? StorageSerializers[type];
+    const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
     const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
       data,
       () => write(data.value),
@@ -560,7 +570,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         return;
       pauseWatch();
       try {
-        if (event?.newValue !== serializer.write(data.value))
+        if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
           data.value = read(event);
       } catch (e) {
         onError(e);
@@ -658,7 +668,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
-        const el = typeof selector2 === "string" ? window?.document.querySelector(selector2) : unrefElement(selector2);
+        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
         if (!el)
           return;
         let style;
@@ -686,7 +696,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     );
     function defaultOnChanged(mode) {
-      updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
+      var _a;
+      updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
     }
     function onChanged(mode) {
       if (options.onChanged)
@@ -823,7 +834,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const handle = vueDemi.computed(() => props.handle ?? target.value);
+      const handle = vueDemi.computed(() => {
+        var _a;
+        return (_a = props.handle) != null ? _a : target.value;
+      });
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -831,7 +845,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       );
       const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
       const onEnd = (position, event) => {
-        props.onEnd?.(position, event);
+        var _a;
+        (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
         if (!storageValue)
           return;
         storageValue.value.x = position.x;
@@ -949,7 +964,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
     const { window = defaultWindow, box = "content-box" } = options;
-    const isSVG = vueDemi.computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
+    const isSVG = vueDemi.computed(() => {
+      var _a, _b;
+      return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+    });
     const width = vueDemi.ref(initialSize.width);
     const height = vueDemi.ref(initialSize.height);
     useResizeObserver(
@@ -991,7 +1009,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   const vElementSize = {
     [shared.directiveHooks.mounted](el, binding) {
-      const handler = typeof binding.value === "function" ? binding.value : binding.value?.[0];
+      var _a;
+      const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
       const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
       const { width, height } = useElementSize(el, ...options);
       vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1162,7 +1181,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       resetOnExecute = true,
       shallow = true,
       throwError
-    } = options ?? {};
+    } = options != null ? options : {};
     const state = shallow ? vueDemi.shallowRef(initialState) : vueDemi.ref(initialState);
     const isReady = vueDemi.ref(false);
     const isLoading = vueDemi.ref(false);
@@ -1317,14 +1336,15 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       }
     });
     function scrollTo(_x, _y) {
+      var _a, _b, _c;
       if (!window)
         return;
       const _element = shared.toValue(element);
       if (!_element)
         return;
-      (_element instanceof Document ? window.document.body : _element)?.scrollTo({
-        top: shared.toValue(_y) ?? y.value,
-        left: shared.toValue(_x) ?? x.value,
+      (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+        top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+        left: (_b = shared.toValue(_x)) != null ? _b : x.value,
         behavior: shared.toValue(behavior)
       });
     }
@@ -1353,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.document ? target.document.documentElement : 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;
@@ -1387,9 +1408,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       internalY.value = scrollTop;
     };
     const onScrollHandler = (e) => {
+      var _a;
       if (!window)
         return;
-      const eventTarget = e.target.documentElement ?? e.target;
+      const eventTarget = (_a = e.target.documentElement) != null ? _a : e.target;
       setArrivedState(eventTarget);
       isScrolling.value = true;
       onScrollEndDebounced(e);
@@ -1430,6 +1452,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   function useInfiniteScroll(element, onLoadMore, options = {}) {
+    var _a;
     const {
       direction = "bottom",
       interval = 100
@@ -1439,7 +1462,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       {
         ...options,
         offset: {
-          [direction]: options.distance ?? 0,
+          [direction]: (_a = options.distance) != null ? _a : 0,
           ...options.offset
         }
       }
@@ -1591,15 +1614,18 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       const data = vueDemi.reactive(core.useOffsetPagination({
         ...props,
         onPageChange(...args) {
-          props.onPageChange?.(...args);
+          var _a;
+          (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
           emit("page-change", ...args);
         },
         onPageSizeChange(...args) {
-          props.onPageSizeChange?.(...args);
+          var _a;
+          (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
           emit("page-size-change", ...args);
         },
         onPageCountChange(...args) {
-          props.onPageCountChange?.(...args);
+          var _a;
+          (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
           emit("page-count-change", ...args);
         }
       }));
@@ -1769,12 +1795,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   function useCssVar(prop, target, options = {}) {
     const { window = defaultWindow, initialValue = "", observe = false } = options;
     const variable = vueDemi.ref(initialValue);
-    const elRef = vueDemi.computed(() => unrefElement(target) || window?.document?.documentElement);
+    const elRef = vueDemi.computed(() => {
+      var _a;
+      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+    });
     function updateCssVar() {
+      var _a;
       const key = shared.toValue(prop);
       const el = shared.toValue(elRef);
       if (el && window) {
-        const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
+        const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
         variable.value = value || initialValue;
       }
     }
@@ -1792,7 +1822,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     vueDemi.watch(
       variable,
       (val) => {
-        if (elRef.value?.style)
+        var _a;
+        if ((_a = elRef.value) == null ? void 0 : _a.style)
           elRef.value.style.setProperty(shared.toValue(prop), val);
       }
     );
@@ -1889,11 +1920,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         const state = useScroll(el, {
           ...options,
           onScroll(e) {
-            options.onScroll?.(e);
+            var _a;
+            (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
             handler(state);
           },
           onStop(e) {
-            options.onStop?.(e);
+            var _a;
+            (_a = options.onStop) == null ? void 0 : _a.call(options, e);
             handler(state);
           }
         });
@@ -1959,7 +1992,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       const el = resolveElement(shared.toValue(element));
       if (!el || !isLocked.value)
         return;
-      shared.isIOS && stopTouchMoveListener?.();
+      shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
       el.style.overflow = initialOverflow;
       isLocked.value = false;
     };

package/index.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(a,o,v){if(a.install)return a;if(!o)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),a;if(o.version.slice(0,4)==="2.7."){let U=function(b,L){var T,W={},B={config:o.config,use:o.use.bind(o),mixin:o.mixin.bind(o),component:o.component.bind(o),provide:function(z,I){return W[z]=I,this},directive:function(z,I){return I?(o.directive(z,I),B):o.directive(z)},mount:function(z,I){return T||(T=new o(Object.assign({propsData:L},b,{provide:Object.assign(W,b.provide)})),T.$mount(z,I),T)},unmount:function(){T&&(T.$destroy(),T=void 0)}};return B};var Q=U;for(var l in o)a[l]=o[l];a.isVue2=!0,a.isVue3=!1,a.install=function(){},a.Vue=o,a.Vue2=o,a.version=o.version,a.warn=o.util.warn,a.hasInjectionContext=()=>!!a.getCurrentInstance(),a.createApp=U}else if(o.version.slice(0,2)==="2.")if(v){for(var l in v)a[l]=v[l];a.isVue2=!0,a.isVue3=!1,a.install=function(){},a.Vue=o,a.Vue2=o,a.version=o.version,a.hasInjectionContext=()=>!!a.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(o.version.slice(0,2)==="3."){for(var l in o)a[l]=o[l];a.isVue2=!1,a.isVue3=!0,a.install=function(){},a.Vue=o,a.Vue2=void 0,a.version=o.version,a.set=function(U,b,L){return Array.isArray(U)?(U.length=Math.max(U.length,b),U.splice(b,1,L),L):(U[b]=L,L)},a.del=function(U,b){if(Array.isArray(U)){U.splice(b,1);return}delete U[b]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");return a}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(a,o,v,l){"use strict";const Q=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return v.onClickOutside(r,s=>{n("trigger",s)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}});function U(e){const t=l.toValue(e);return t?.$el??t}const b=l.isClient?window:void 0;function L(...e){let t,n,r,s;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,s]=e,t=b):[t,n,r,s]=e,!t)return l.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],u=()=>{i.forEach(d=>d()),i.length=0},c=(d,m,g,h)=>(d.addEventListener(m,g,h),()=>d.removeEventListener(m,g,h)),f=o.watch(()=>[U(t),l.toValue(s)],([d,m])=>{u(),d&&i.push(...n.flatMap(g=>r.map(h=>c(d,g,h,m))))},{immediate:!0,flush:"post"}),p=()=>{f(),u()};return l.tryOnScopeDispose(p),p}let T=!1;function W(e,t,n={}){const{window:r=b,ignore:s=[],capture:i=!0,detectIframe:u=!1}=n;if(!r)return;l.isIOS&&!T&&(T=!0,Array.from(r.document.body.children).forEach(g=>g.addEventListener("click",l.noop)),r.document.documentElement.addEventListener("click",l.noop));let c=!0;const f=g=>s.some(h=>{if(typeof h=="string")return Array.from(r.document.querySelectorAll(h)).some(w=>w===g.target||g.composedPath().includes(w));{const w=U(h);return w&&(g.target===w||g.composedPath().includes(w))}}),d=[L(r,"click",g=>{const h=U(e);if(!(!h||h===g.target||g.composedPath().includes(h))){if(g.detail===0&&(c=!f(g)),!c){c=!0;return}t(g)}},{passive:!0,capture:i}),L(r,"pointerdown",g=>{const h=U(e);h&&(c=!g.composedPath().includes(h)&&!f(g))},{passive:!0}),u&&L(r,"blur",g=>{setTimeout(()=>{const h=U(e);r.document.activeElement?.tagName==="IFRAME"&&!h?.contains(r.document.activeElement)&&t(g)},0)})].filter(Boolean);return()=>d.forEach(g=>g())}const B={[l.directiveHooks.mounted](e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=W(e,t.value,{capture:n});else{const[r,s]=t.value;e.__onClickOutside_stop=W(e,r,Object.assign({capture:n},s))}},[l.directiveHooks.unmounted](e){e.__onClickOutside_stop()}};function z(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function I(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:s=b,eventName:i="keydown",passive:u=!1,dedupe:c=!1}=r,f=z(t);return L(s,i,d=>{d.repeat&&l.toValue(c)||f(d)&&n(d)},u)}const fe={[l.directiveHooks.mounted](e,t){const n=t.arg?.split(",")??!0;if(typeof t.value=="function")I(n,t.value,{target:e});else{const[r,s]=t.value;I(n,r,{target:e,...s})}}},de=500;function Y(e,t,n){const r=o.computed(()=>U(e));let s;function i(){s&&(clearTimeout(s),s=void 0)}function u(f){n?.modifiers?.self&&f.target!==r.value||(i(),n?.modifiers?.prevent&&f.preventDefault(),n?.modifiers?.stop&&f.stopPropagation(),s=setTimeout(()=>t(f),n?.delay??de))}const c={capture:n?.modifiers?.capture,once:n?.modifiers?.once};L(r,"pointerdown",u,c),L(r,["pointerup","pointerleave"],i,c)}const pe=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return Y(r,s=>{n("trigger",s)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),x={[l.directiveHooks.mounted](e,t){typeof t.value=="function"?Y(e,t.value,{modifiers:t.modifiers}):Y(e,...t.value)}},ge=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:v.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),ve=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(v.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),me=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(v.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),_=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},j="__vueuse_ssr_handlers__",he=ye();function ye(){return j in _||(_[j]=_[j]||{}),_[j]}function Z(e,t){return he[e]||t}function we(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ue={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},D="vueuse-storage";function Se(e,t,n,r={}){const{flush:s="pre",deep:i=!0,listenToStorageChanges:u=!0,writeDefaults:c=!0,mergeDefaults:f=!1,shallow:p,window:d=b,eventFilter:m,onError:g=y=>{console.error(y)}}=r,h=(p?o.shallowRef:o.ref)(t);if(!n)try{n=Z("getDefaultStorage",()=>b?.localStorage)()}catch(y){g(y)}if(!n)return h;const w=l.toValue(t),k=we(w),O=r.serializer??Ue[k],{pause:E,resume:A}=l.pausableWatch(h,()=>R(h.value),{flush:s,deep:i,eventFilter:m});return d&&u&&(L(d,"storage",S),L(d,D,N)),S(),h;function R(y){try{if(y==null)n.removeItem(e);else{const C=O.write(y),M=n.getItem(e);M!==C&&(n.setItem(e,C),d&&d.dispatchEvent(new CustomEvent(D,{detail:{key:e,oldValue:M,newValue:C,storageArea:n}})))}}catch(C){g(C)}}function P(y){const C=y?y.newValue:n.getItem(e);if(C==null)return c&&w!==null&&n.setItem(e,O.write(w)),w;if(!y&&f){const M=O.read(C);return typeof f=="function"?f(M,w):k==="object"&&!Array.isArray(M)?{...w,...M}:M}else return typeof C!="string"?C:O.read(C)}function N(y){S(y.detail)}function S(y){if(!(y&&y.storageArea!==n)){if(y&&y.key==null){h.value=w;return}if(!(y&&y.key!==e)){E();try{y?.newValue!==O.write(h.value)&&(h.value=P(y))}catch(C){g(C)}finally{y?o.nextTick(A):A()}}}}}function be(){const e=o.ref(!1);return o.getCurrentInstance()&&o.onMounted(()=>{e.value=!0}),e}function F(e){const t=be();return o.computed(()=>(t.value,!!e()))}function Ce(e,t={}){const{window:n=b}=t,r=F(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let s;const i=o.ref(!1),u=p=>{i.value=p.matches},c=()=>{s&&("removeEventListener"in s?s.removeEventListener("change",u):s.removeListener(u))},f=o.watchEffect(()=>{r.value&&(c(),s=n.matchMedia(l.toValue(e)),"addEventListener"in s?s.addEventListener("change",u):s.addListener(u),i.value=s.matches)});return l.tryOnScopeDispose(()=>{f(),c(),s=void 0}),i}function Oe(e){return Ce("(prefers-color-scheme: dark)",e)}function Ee(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:s=b,storage:i,storageKey:u="vueuse-color-scheme",listenToStorageChanges:c=!0,storageRef:f,emitAuto:p,disableTransition:d=!0}=e,m={auto:"",light:"light",dark:"dark",...e.modes||{}},g=Oe({window:s}),h=o.computed(()=>g.value?"dark":"light"),w=f||(u==null?l.toRef(r):Se(u,r,i,{window:s,listenToStorageChanges:c})),k=o.computed(()=>w.value==="auto"?h.value:w.value),O=Z("updateHTMLAttrs",(P,N,S)=>{const y=typeof P=="string"?s?.document.querySelector(P):U(P);if(!y)return;let C;if(d){C=s.document.createElement("style");const M="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";C.appendChild(document.createTextNode(M)),s.document.head.appendChild(C)}if(N==="class"){const M=S.split(/\s/g);Object.values(m).flatMap(V=>(V||"").split(/\s/g)).filter(Boolean).forEach(V=>{M.includes(V)?y.classList.add(V):y.classList.remove(V)})}else y.setAttribute(N,S);d&&(s.getComputedStyle(C).opacity,document.head.removeChild(C))});function E(P){O(t,n,m[P]??P)}function A(P){e.onChanged?e.onChanged(P,E):E(P)}o.watch(k,A,{flush:"post",immediate:!0}),l.tryOnMounted(()=>A(k.value));const R=o.computed({get(){return p?w.value:k.value},set(P){w.value=P}});try{return Object.assign(R,{store:w,system:h,state:k})}catch{return R}}const Pe=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=Ee(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),Le=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=v.useDark(e),r=o.reactive({isDark:n,toggleDark:l.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),ke=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=o.reactive(v.useDeviceMotion());return()=>{if(t.default)return t.default(n)}}}),Ae=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(v.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Me=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:v.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Te=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(v.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Ve=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:v.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),Ie=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>e.handle??n.value),s=e.storageKey&&v.useStorage(e.storageKey,l.toValue(e.initialValue)||{x:0,y:0},v.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),i=s||e.initialValue||{x:0,y:0},u=(f,p)=>{e.onEnd?.(f,p),s&&(s.value.x=f.x,s.value.y=f.y)},c=o.reactive(v.useDraggable(n,{...e,handle:r,initialValue:i,onEnd:u}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${c.style}`},t.default(c))}}}),ze=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function Re(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:s=b}=t,i=o.ref(!1);let u;const c=f=>{const p=f?n:r;u&&(clearTimeout(u),u=void 0),p?u=setTimeout(()=>i.value=f,p):i.value=f};return s&&(L(e,"mouseenter",()=>c(!0),{passive:!0}),L(e,"mouseleave",()=>c(!1),{passive:!0})),i}const Ne={[l.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=Re(e);o.watch(n,r=>t.value(r))}}},He=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function We(e,t,n={}){const{window:r=b,...s}=n;let i;const u=F(()=>r&&"ResizeObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.computed(()=>Array.isArray(e)?e.map(m=>U(m)):[U(e)]),p=o.watch(f,m=>{if(c(),u.value&&r){i=new ResizeObserver(t);for(const g of m)g&&i.observe(g,s)}},{immediate:!0,flush:"post",deep:!0}),d=()=>{c(),p()};return l.tryOnScopeDispose(d),{isSupported:u,stop:d}}function Be(e,t={width:0,height:0},n={}){const{window:r=b,box:s="content-box"}=n,i=o.computed(()=>U(e)?.namespaceURI?.includes("svg")),u=o.ref(t.width),c=o.ref(t.height);return We(e,([f])=>{const p=s==="border-box"?f.borderBoxSize:s==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(r&&i.value){const d=U(e);if(d){const m=r.getComputedStyle(d);u.value=Number.parseFloat(m.width),c.value=Number.parseFloat(m.height)}}else if(p){const d=Array.isArray(p)?p:[p];u.value=d.reduce((m,{inlineSize:g})=>m+g,0),c.value=d.reduce((m,{blockSize:g})=>m+g,0)}else u.value=f.contentRect.width,c.value=f.contentRect.height},n),o.watch(()=>U(e),f=>{u.value=f?t.width:0,c.value=f?t.height:0}),{width:u,height:c}}const _e={[l.directiveHooks.mounted](e,t){const n=typeof t.value=="function"?t.value:t.value?.[0],r=typeof t.value=="function"?[]:t.value.slice(1),{width:s,height:i}=Be(e,...r);o.watch([s,i],([u,c])=>n({width:u,height:c}))}},je=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:v.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function $(e,t,n={}){const{root:r,rootMargin:s="0px",threshold:i=.1,window:u=b,immediate:c=!0}=n,f=F(()=>u&&"IntersectionObserver"in u),p=o.computed(()=>{const w=l.toValue(e);return(Array.isArray(w)?w:[w]).map(U).filter(l.notNullish)});let d=l.noop;const m=o.ref(c),g=f.value?o.watch(()=>[p.value,U(r),m.value],([w,k])=>{if(d(),!m.value||!w.length)return;const O=new IntersectionObserver(t,{root:U(k),rootMargin:s,threshold:i});w.forEach(E=>E&&O.observe(E)),d=()=>{O.disconnect(),d=l.noop}},{immediate:c,flush:"post"}):l.noop,h=()=>{d(),g(),m.value=!1};return l.tryOnScopeDispose(h),{isSupported:f,isActive:m,pause(){d(),m.value=!1},resume(){m.value=!0},stop:h}}function X(e,{window:t=b,scrollTarget:n}={}){const r=o.ref(!1);return $(e,([{isIntersecting:s}])=>{r.value=s},{root:n,window:t,threshold:0}),r}const Fe={[l.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=X(e);o.watch(r,s=>n(s),{immediate:!0})}else{const[n,r]=t.value,s=X(e,r);o.watch(s,i=>n(i),{immediate:!0})}}},Ke=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(v.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),Ge=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),Je=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(v.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),Ye=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(v.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function $e(e,t,n){const{immediate:r=!0,delay:s=0,onError:i=l.noop,onSuccess:u=l.noop,resetOnExecute:c=!0,shallow:f=!0,throwError:p}=n??{},d=f?o.shallowRef(t):o.ref(t),m=o.ref(!1),g=o.ref(!1),h=o.shallowRef(void 0);async function w(E=0,...A){c&&(d.value=t),h.value=void 0,m.value=!1,g.value=!0,E>0&&await l.promiseTimeout(E);const R=typeof e=="function"?e(...A):e;try{const P=await R;d.value=P,m.value=!0,u(P)}catch(P){if(h.value=P,i(P),p)throw P}finally{g.value=!1}return d.value}r&&w(s);const k={state:d,isReady:m,isLoading:g,error:h,execute:w};function O(){return new Promise((E,A)=>{l.until(g).toBe(!1).then(()=>E(k)).catch(A)})}return{...k,then(E,A){return O().then(E,A)}}}async function Xe(e){return new Promise((t,n)=>{const r=new Image,{src:s,srcset:i,sizes:u,class:c,loading:f,crossorigin:p,referrerPolicy:d}=e;r.src=s,i&&(r.srcset=i),u&&(r.sizes=u),c&&(r.className=c),f&&(r.loading=f),p&&(r.crossOrigin=p),d&&(r.referrerPolicy=d),r.onload=()=>t(r),r.onerror=n})}function qe(e,t={}){const n=$e(()=>Xe(l.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>l.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const Qe=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy"],setup(e,{slots:t}){const n=o.reactive(qe(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}}),ee=1;function q(e,t={}){const{throttle:n=0,idle:r=200,onStop:s=l.noop,onScroll:i=l.noop,offset:u={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0},behavior:f="auto",window:p=b}=t,d=o.ref(0),m=o.ref(0),g=o.computed({get(){return d.value},set(S){w(S,void 0)}}),h=o.computed({get(){return m.value},set(S){w(void 0,S)}});function w(S,y){if(!p)return;const C=l.toValue(e);C&&(C instanceof Document?p.document.body:C)?.scrollTo({top:l.toValue(y)??h.value,left:l.toValue(S)??g.value,behavior:l.toValue(f)})}const k=o.ref(!1),O=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),E=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),A=S=>{k.value&&(k.value=!1,E.left=!1,E.right=!1,E.top=!1,E.bottom=!1,s(S))},R=l.useDebounceFn(A,n+r),P=S=>{if(!p)return;const y=S.document?S.document.documentElement:S.documentElement??S,{display:C,flexDirection:M}=getComputedStyle(y),V=y.scrollLeft;E.left=V<d.value,E.right=V>d.value;const ie=Math.abs(V)<=0+(u.left||0),le=Math.abs(V)+y.clientWidth>=y.scrollWidth-(u.right||0)-ee;C==="flex"&&M==="row-reverse"?(O.left=le,O.right=ie):(O.left=ie,O.right=le),d.value=V;let H=y.scrollTop;S===p.document&&!H&&(H=p.document.body.scrollTop),E.top=H<m.value,E.bottom=H>m.value;const ce=Math.abs(H)<=0+(u.top||0),ue=Math.abs(H)+y.clientHeight>=y.scrollHeight-(u.bottom||0)-ee;C==="flex"&&M==="column-reverse"?(O.top=ue,O.bottom=ce):(O.top=ce,O.bottom=ue),m.value=H},N=S=>{if(!p)return;const y=S.target.documentElement??S.target;P(y),k.value=!0,R(S),i(S)};return L(e,"scroll",n?l.useThrottleFn(N,n,!0,!1):N,c),L(e,"scrollend",A,c),{x:g,y:h,isScrolling:k,arrivedState:O,directions:E,measure(){const S=l.toValue(e);p&&S&&P(S)}}}function K(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function te(e,t,n={}){const{direction:r="bottom",interval:s=100}=n,i=o.reactive(q(e,{...n,offset:{[r]:n.distance??0,...n.offset}})),u=o.ref(),c=o.computed(()=>!!u.value),f=o.computed(()=>K(l.toValue(e))),p=X(f);function d(){if(i.measure(),!f.value||!p.value)return;const{scrollHeight:m,clientHeight:g,scrollWidth:h,clientWidth:w}=f.value,k=r==="bottom"||r==="top"?m<=g:h<=w;(i.arrivedState[r]||k)&&(u.value||(u.value=Promise.all([t(i),new Promise(O=>setTimeout(O,s))]).finally(()=>{u.value=null,o.nextTick(()=>d())})))}return o.watch(()=>[i.arrivedState[r],p.value],d,{immediate:!0}),{isLoading:c}}const xe={[l.directiveHooks.mounted](e,t){typeof t.value=="function"?te(e,t.value):te(e,...t.value)}},Ze={[l.directiveHooks.mounted](e,t){typeof t.value=="function"?$(e,t.value):$(e,...t.value)}},De=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(v.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),et=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),tt=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),nt=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(v.useNetwork());return()=>{if(t.default)return t.default(n)}}}),ot=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(v.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),rt=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=l.toRef(e,"object"),r=v.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),st=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(v.useOffsetPagination({...e,onPageChange(...s){e.onPageChange?.(...s),n("page-change",...s)},onPageSizeChange(...s){e.onPageSizeChange?.(...s),n("page-size-change",...s)},onPageCountChange(...s){e.onPageCountChange?.(...s),n("page-count-change",...s)}}));return()=>{if(t.default)return t.default(r)}}}),at=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:v.useOnline()});return()=>{if(t.default)return t.default(n)}}}),it=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:v.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),lt=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(v.usePointer({...e,target:e.target==="self"?n:b}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),ct=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(v.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ut=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:v.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),ft=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:v.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),dt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:v.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:v.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),gt=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:v.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}});function vt(e,t,n={}){const{window:r=b,...s}=n;let i;const u=F(()=>r&&"MutationObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.watch(()=>U(e),d=>{c(),u.value&&r&&d&&(i=new MutationObserver(t),i.observe(d,s))},{immediate:!0}),p=()=>{c(),f()};return l.tryOnScopeDispose(p),{isSupported:u,stop:p}}function G(e,t,n={}){const{window:r=b,initialValue:s="",observe:i=!1}=n,u=o.ref(s),c=o.computed(()=>U(t)||r?.document?.documentElement);function f(){const p=l.toValue(e),d=l.toValue(c);if(d&&r){const m=r.getComputedStyle(d).getPropertyValue(p)?.trim();u.value=m||s}}return i&&vt(c,f,{attributeFilter:["style","class"],window:r}),o.watch([c,()=>l.toValue(e)],f,{immediate:!0}),o.watch(u,p=>{c.value?.style&&c.value.style.setProperty(l.toValue(e),p)}),u}const ne="--vueuse-safe-area-top",oe="--vueuse-safe-area-right",re="--vueuse-safe-area-bottom",se="--vueuse-safe-area-left";function mt(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(l.isClient){const i=G(ne),u=G(oe),c=G(re),f=G(se);i.value="env(safe-area-inset-top, 0px)",u.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",s(),L("resize",l.useDebounceFn(s))}function s(){e.value=J(ne),t.value=J(oe),n.value=J(re),r.value=J(se)}return{top:e,right:t,bottom:n,left:r,update:s}}function J(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const ht=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:s,left:i}=mt();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?s.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),yt={[l.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=q(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,s=q(e,{...r,onScroll(i){r.onScroll?.(i),n(s)},onStop(i){r.onStop?.(i),n(s)}})}}};function ae(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:ae(n)}}function wt(e){const t=e||window.event,n=t.target;return ae(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}function Ut(e,t=!1){const n=o.ref(t);let r=null,s;o.watch(l.toRef(e),c=>{const f=K(l.toValue(c));if(f){const p=f;s=p.style.overflow,n.value&&(p.style.overflow="hidden")}},{immediate:!0});const i=()=>{const c=K(l.toValue(e));!c||n.value||(l.isIOS&&(r=L(c,"touchmove",f=>{wt(f)},{passive:!1})),c.style.overflow="hidden",n.value=!0)},u=()=>{const c=K(l.toValue(e));!c||!n.value||(l.isIOS&&r?.(),c.style.overflow=s,n.value=!1)};return l.tryOnScopeDispose(u),o.computed({get(){return n.value},set(c){c?i():u()}})}function St(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const s=Ut(n,r.value);o.watch(t,i=>s.value=i)}}const bt=St(),Ct=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(v.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Ot=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(v.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Et=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:s,containerProps:i,wrapperProps:u,scrollTo:c}=v.useVirtualList(r,e.options);return n({scrollTo:c}),typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...u.value},s.value.map(f=>o.h("div",{style:{overFlow:"hidden",height:f.height}},t.default?t.default(f):"Please set content!")))])}}),Pt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:v.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),Lt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(v.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});a.OnClickOutside=Q,a.OnLongPress=pe,a.UseActiveElement=ge,a.UseBattery=ve,a.UseBrowserLocation=me,a.UseColorMode=Pe,a.UseDark=Le,a.UseDeviceMotion=ke,a.UseDeviceOrientation=Ae,a.UseDevicePixelRatio=Me,a.UseDevicesList=Te,a.UseDocumentVisibility=Ve,a.UseDraggable=Ie,a.UseElementBounding=ze,a.UseElementSize=He,a.UseElementVisibility=je,a.UseEyeDropper=Ke,a.UseFullscreen=Ge,a.UseGeolocation=Je,a.UseIdle=Ye,a.UseImage=Qe,a.UseMouse=De,a.UseMouseInElement=et,a.UseMousePressed=tt,a.UseNetwork=nt,a.UseNow=ot,a.UseObjectUrl=rt,a.UseOffsetPagination=st,a.UseOnline=at,a.UsePageLeave=it,a.UsePointer=lt,a.UsePointerLock=ct,a.UsePreferredColorScheme=ut,a.UsePreferredContrast=ft,a.UsePreferredDark=dt,a.UsePreferredLanguages=pt,a.UsePreferredReducedMotion=gt,a.UseScreenSafeArea=ht,a.UseTimeAgo=Ct,a.UseTimestamp=Ot,a.UseVirtualList=Et,a.UseWindowFocus=Pt,a.UseWindowSize=Lt,a.VOnClickOutside=B,a.VOnLongPress=x,a.vElementHover=Ne,a.vElementSize=_e,a.vElementVisibility=Fe,a.vInfiniteScroll=xe,a.vIntersectionObserver=Ze,a.vOnClickOutside=B,a.vOnKeyStroke=fe,a.vOnLongPress=x,a.vScroll=yt,a.vScrollLock=bt})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+var VueDemi=function(s,o,m){if(s.install)return s;if(!o)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),s;if(o.version.slice(0,4)==="2.7."){let U=function(S,L){var T,W={},B={config:o.config,use:o.use.bind(o),mixin:o.mixin.bind(o),component:o.component.bind(o),provide:function(N,I){return W[N]=I,this},directive:function(N,I){return I?(o.directive(N,I),B):o.directive(N)},mount:function(N,I){return T||(T=new o(Object.assign({propsData:L},S,{provide:Object.assign(W,S.provide)})),T.$mount(N,I),T)},unmount:function(){T&&(T.$destroy(),T=void 0)}};return B};var x=U;for(var u in o)s[u]=o[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.warn=o.util.warn,s.hasInjectionContext=()=>!!s.getCurrentInstance(),s.createApp=U}else if(o.version.slice(0,2)==="2.")if(m){for(var u in m)s[u]=m[u];s.isVue2=!0,s.isVue3=!1,s.install=function(){},s.Vue=o,s.Vue2=o,s.version=o.version,s.hasInjectionContext=()=>!!s.getCurrentInstance()}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(o.version.slice(0,2)==="3."){for(var u in o)s[u]=o[u];s.isVue2=!1,s.isVue3=!0,s.install=function(){},s.Vue=o,s.Vue2=void 0,s.version=o.version,s.set=function(U,S,L){return Array.isArray(U)?(U.length=Math.max(U.length,S),U.splice(S,1,L),L):(U[S]=L,L)},s.del=function(U,S){if(Array.isArray(U)){U.splice(S,1);return}delete U[S]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");return s}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(s,o,m,u){"use strict";const x=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return m.onClickOutside(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}});function U(e){var t;const n=u.toValue(e);return(t=n?.$el)!=null?t:n}const S=u.isClient?window:void 0;function L(...e){let t,n,r,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,a]=e,t=S):[t,n,r,a]=e,!t)return u.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],l=()=>{i.forEach(d=>d()),i.length=0},c=(d,v,g,w)=>(d.addEventListener(v,g,w),()=>d.removeEventListener(v,g,w)),f=o.watch(()=>[U(t),u.toValue(a)],([d,v])=>{if(l(),!d)return;const g=u.isObject(v)?{...v}:v;i.push(...n.flatMap(w=>r.map(y=>c(d,w,y,g))))},{immediate:!0,flush:"post"}),p=()=>{f(),l()};return u.tryOnScopeDispose(p),p}let T=!1;function W(e,t,n={}){const{window:r=S,ignore:a=[],capture:i=!0,detectIframe:l=!1}=n;if(!r)return;u.isIOS&&!T&&(T=!0,Array.from(r.document.body.children).forEach(g=>g.addEventListener("click",u.noop)),r.document.documentElement.addEventListener("click",u.noop));let c=!0;const f=g=>a.some(w=>{if(typeof w=="string")return Array.from(r.document.querySelectorAll(w)).some(y=>y===g.target||g.composedPath().includes(y));{const y=U(w);return y&&(g.target===y||g.composedPath().includes(y))}}),d=[L(r,"click",g=>{const w=U(e);if(!(!w||w===g.target||g.composedPath().includes(w))){if(g.detail===0&&(c=!f(g)),!c){c=!0;return}t(g)}},{passive:!0,capture:i}),L(r,"pointerdown",g=>{const w=U(e);w&&(c=!g.composedPath().includes(w)&&!f(g))},{passive:!0}),l&&L(r,"blur",g=>{setTimeout(()=>{var w;const y=U(e);((w=r.document.activeElement)==null?void 0:w.tagName)==="IFRAME"&&!y?.contains(r.document.activeElement)&&t(g)},0)})].filter(Boolean);return()=>d.forEach(g=>g())}const B={[u.directiveHooks.mounted](e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=W(e,t.value,{capture:n});else{const[r,a]=t.value;e.__onClickOutside_stop=W(e,r,Object.assign({capture:n},a))}},[u.directiveHooks.unmounted](e){e.__onClickOutside_stop()}};function N(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function I(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:a=S,eventName:i="keydown",passive:l=!1,dedupe:c=!1}=r,f=N(t);return L(a,i,d=>{d.repeat&&u.toValue(c)||f(d)&&n(d)},l)}const de={[u.directiveHooks.mounted](e,t){var n,r;const a=(r=(n=t.arg)==null?void 0:n.split(","))!=null?r:!0;if(typeof t.value=="function")I(a,t.value,{target:e});else{const[i,l]=t.value;I(a,i,{target:e,...l})}}},pe=500;function $(e,t,n){var r,a;const i=o.computed(()=>U(e));let l;function c(){l&&(clearTimeout(l),l=void 0)}function f(d){var v,g,w,y;(v=n?.modifiers)!=null&&v.self&&d.target!==i.value||(c(),(g=n?.modifiers)!=null&&g.prevent&&d.preventDefault(),(w=n?.modifiers)!=null&&w.stop&&d.stopPropagation(),l=setTimeout(()=>t(d),(y=n?.delay)!=null?y:pe))}const p={capture:(r=n?.modifiers)==null?void 0:r.capture,once:(a=n?.modifiers)==null?void 0:a.once};L(i,"pointerdown",f,p),L(i,["pointerup","pointerleave"],c,p)}const ve=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return $(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),Z={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?$(e,t.value,{modifiers:t.modifiers}):$(e,...t.value)}},ge=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:m.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),me=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(m.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),he=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(m.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),j=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},F="__vueuse_ssr_handlers__",ye=we();function we(){return F in j||(j[F]=j[F]||{}),j[F]}function D(e,t){return ye[e]||t}function Ue(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const be={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},ee="vueuse-storage";function Se(e,t,n,r={}){var a;const{flush:i="pre",deep:l=!0,listenToStorageChanges:c=!0,writeDefaults:f=!0,mergeDefaults:p=!1,shallow:d,window:v=S,eventFilter:g,onError:w=h=>{console.error(h)}}=r,y=(d?o.shallowRef:o.ref)(t);if(!n)try{n=D("getDefaultStorage",()=>{var h;return(h=S)==null?void 0:h.localStorage})()}catch(h){w(h)}if(!n)return y;const O=u.toValue(t),k=Ue(O),b=(a=r.serializer)!=null?a:be[k],{pause:M,resume:z}=u.pausableWatch(y,()=>E(y.value),{flush:i,deep:l,eventFilter:g});return v&&c&&(L(v,"storage",_),L(v,ee,C)),_(),y;function E(h){try{if(h==null)n.removeItem(e);else{const P=b.write(h),A=n.getItem(e);A!==P&&(n.setItem(e,P),v&&v.dispatchEvent(new CustomEvent(ee,{detail:{key:e,oldValue:A,newValue:P,storageArea:n}})))}}catch(P){w(P)}}function V(h){const P=h?h.newValue:n.getItem(e);if(P==null)return f&&O!==null&&n.setItem(e,b.write(O)),O;if(!h&&p){const A=b.read(P);return typeof p=="function"?p(A,O):k==="object"&&!Array.isArray(A)?{...O,...A}:A}else return typeof P!="string"?P:b.read(P)}function C(h){_(h.detail)}function _(h){if(!(h&&h.storageArea!==n)){if(h&&h.key==null){y.value=O;return}if(!(h&&h.key!==e)){M();try{h?.newValue!==b.write(y.value)&&(y.value=V(h))}catch(P){w(P)}finally{h?o.nextTick(z):z()}}}}}function Ce(){const e=o.ref(!1);return o.getCurrentInstance()&&o.onMounted(()=>{e.value=!0}),e}function K(e){const t=Ce();return o.computed(()=>(t.value,!!e()))}function Oe(e,t={}){const{window:n=S}=t,r=K(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let a;const i=o.ref(!1),l=p=>{i.value=p.matches},c=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",l):a.removeListener(l))},f=o.watchEffect(()=>{r.value&&(c(),a=n.matchMedia(u.toValue(e)),"addEventListener"in a?a.addEventListener("change",l):a.addListener(l),i.value=a.matches)});return u.tryOnScopeDispose(()=>{f(),c(),a=void 0}),i}function Ee(e){return Oe("(prefers-color-scheme: dark)",e)}function Pe(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:a=S,storage:i,storageKey:l="vueuse-color-scheme",listenToStorageChanges:c=!0,storageRef:f,emitAuto:p,disableTransition:d=!0}=e,v={auto:"",light:"light",dark:"dark",...e.modes||{}},g=Ee({window:a}),w=o.computed(()=>g.value?"dark":"light"),y=f||(l==null?u.toRef(r):Se(l,r,i,{window:a,listenToStorageChanges:c})),O=o.computed(()=>y.value==="auto"?w.value:y.value),k=D("updateHTMLAttrs",(E,V,C)=>{const _=typeof E=="string"?a?.document.querySelector(E):U(E);if(!_)return;let h;if(d){h=a.document.createElement("style");const P="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";h.appendChild(document.createTextNode(P)),a.document.head.appendChild(h)}if(V==="class"){const P=C.split(/\s/g);Object.values(v).flatMap(A=>(A||"").split(/\s/g)).filter(Boolean).forEach(A=>{P.includes(A)?_.classList.add(A):_.classList.remove(A)})}else _.setAttribute(V,C);d&&(a.getComputedStyle(h).opacity,document.head.removeChild(h))});function b(E){var V;k(t,n,(V=v[E])!=null?V:E)}function M(E){e.onChanged?e.onChanged(E,b):b(E)}o.watch(O,M,{flush:"post",immediate:!0}),u.tryOnMounted(()=>M(O.value));const z=o.computed({get(){return p?y.value:O.value},set(E){y.value=E}});try{return Object.assign(z,{store:y,system:w,state:O})}catch{return z}}const Le=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=Pe(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),ke=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=m.useDark(e),r=o.reactive({isDark:n,toggleDark:u.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),Ae=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=o.reactive(m.useDeviceMotion());return()=>{if(t.default)return t.default(n)}}}),_e=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(m.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Me=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:m.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Te=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(m.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Ve=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:m.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),Ie=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>{var f;return(f=e.handle)!=null?f:n.value}),a=e.storageKey&&m.useStorage(e.storageKey,u.toValue(e.initialValue)||{x:0,y:0},m.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),i=a||e.initialValue||{x:0,y:0},l=(f,p)=>{var d;(d=e.onEnd)==null||d.call(e,f,p),a&&(a.value.x=f.x,a.value.y=f.y)},c=o.reactive(m.useDraggable(n,{...e,handle:r,initialValue:i,onEnd:l}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${c.style}`},t.default(c))}}}),ze=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function Re(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:a=S}=t,i=o.ref(!1);let l;const c=f=>{const p=f?n:r;l&&(clearTimeout(l),l=void 0),p?l=setTimeout(()=>i.value=f,p):i.value=f};return a&&(L(e,"mouseenter",()=>c(!0),{passive:!0}),L(e,"mouseleave",()=>c(!1),{passive:!0})),i}const Ne={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=Re(e);o.watch(n,r=>t.value(r))}}},He=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function We(e,t,n={}){const{window:r=S,...a}=n;let i;const l=K(()=>r&&"ResizeObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.computed(()=>Array.isArray(e)?e.map(v=>U(v)):[U(e)]),p=o.watch(f,v=>{if(c(),l.value&&r){i=new ResizeObserver(t);for(const g of v)g&&i.observe(g,a)}},{immediate:!0,flush:"post",deep:!0}),d=()=>{c(),p()};return u.tryOnScopeDispose(d),{isSupported:l,stop:d}}function Be(e,t={width:0,height:0},n={}){const{window:r=S,box:a="content-box"}=n,i=o.computed(()=>{var f,p;return(p=(f=U(e))==null?void 0:f.namespaceURI)==null?void 0:p.includes("svg")}),l=o.ref(t.width),c=o.ref(t.height);return We(e,([f])=>{const p=a==="border-box"?f.borderBoxSize:a==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(r&&i.value){const d=U(e);if(d){const v=r.getComputedStyle(d);l.value=Number.parseFloat(v.width),c.value=Number.parseFloat(v.height)}}else if(p){const d=Array.isArray(p)?p:[p];l.value=d.reduce((v,{inlineSize:g})=>v+g,0),c.value=d.reduce((v,{blockSize:g})=>v+g,0)}else l.value=f.contentRect.width,c.value=f.contentRect.height},n),o.watch(()=>U(e),f=>{l.value=f?t.width:0,c.value=f?t.height:0}),{width:l,height:c}}const je={[u.directiveHooks.mounted](e,t){var n;const r=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],a=typeof t.value=="function"?[]:t.value.slice(1),{width:i,height:l}=Be(e,...a);o.watch([i,l],([c,f])=>r({width:c,height:f}))}},Fe=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:m.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function X(e,t,n={}){const{root:r,rootMargin:a="0px",threshold:i=.1,window:l=S,immediate:c=!0}=n,f=K(()=>l&&"IntersectionObserver"in l),p=o.computed(()=>{const y=u.toValue(e);return(Array.isArray(y)?y:[y]).map(U).filter(u.notNullish)});let d=u.noop;const v=o.ref(c),g=f.value?o.watch(()=>[p.value,U(r),v.value],([y,O])=>{if(d(),!v.value||!y.length)return;const k=new IntersectionObserver(t,{root:U(O),rootMargin:a,threshold:i});y.forEach(b=>b&&k.observe(b)),d=()=>{k.disconnect(),d=u.noop}},{immediate:c,flush:"post"}):u.noop,w=()=>{d(),g(),v.value=!1};return u.tryOnScopeDispose(w),{isSupported:f,isActive:v,pause(){d(),v.value=!1},resume(){v.value=!0},stop:w}}function q(e,{window:t=S,scrollTarget:n}={}){const r=o.ref(!1);return X(e,([{isIntersecting:a}])=>{r.value=a},{root:n,window:t,threshold:0}),r}const Ke={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=q(e);o.watch(r,a=>n(a),{immediate:!0})}else{const[n,r]=t.value,a=q(e,r);o.watch(a,i=>n(i),{immediate:!0})}}},Ge=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(m.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),Je=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),Ye=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(m.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),$e=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(m.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function Xe(e,t,n){const{immediate:r=!0,delay:a=0,onError:i=u.noop,onSuccess:l=u.noop,resetOnExecute:c=!0,shallow:f=!0,throwError:p}=n??{},d=f?o.shallowRef(t):o.ref(t),v=o.ref(!1),g=o.ref(!1),w=o.shallowRef(void 0);async function y(b=0,...M){c&&(d.value=t),w.value=void 0,v.value=!1,g.value=!0,b>0&&await u.promiseTimeout(b);const z=typeof e=="function"?e(...M):e;try{const E=await z;d.value=E,v.value=!0,l(E)}catch(E){if(w.value=E,i(E),p)throw E}finally{g.value=!1}return d.value}r&&y(a);const O={state:d,isReady:v,isLoading:g,error:w,execute:y};function k(){return new Promise((b,M)=>{u.until(g).toBe(!1).then(()=>b(O)).catch(M)})}return{...O,then(b,M){return k().then(b,M)}}}async function qe(e){return new Promise((t,n)=>{const r=new Image,{src:a,srcset:i,sizes:l,class:c,loading:f,crossorigin:p,referrerPolicy:d}=e;r.src=a,i&&(r.srcset=i),l&&(r.sizes=l),c&&(r.className=c),f&&(r.loading=f),p&&(r.crossOrigin=p),d&&(r.referrerPolicy=d),r.onload=()=>t(r),r.onerror=n})}function Qe(e,t={}){const n=Xe(()=>qe(u.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>u.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const xe=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy"],setup(e,{slots:t}){const n=o.reactive(Qe(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}}),te=1;function Q(e,t={}){const{throttle:n=0,idle:r=200,onStop:a=u.noop,onScroll:i=u.noop,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0},behavior:f="auto",window:p=S}=t,d=o.ref(0),v=o.ref(0),g=o.computed({get(){return d.value},set(C){y(C,void 0)}}),w=o.computed({get(){return v.value},set(C){y(void 0,C)}});function y(C,_){var h,P,A;if(!p)return;const R=u.toValue(e);R&&((A=R instanceof Document?p.document.body:R)==null||A.scrollTo({top:(h=u.toValue(_))!=null?h:w.value,left:(P=u.toValue(C))!=null?P:g.value,behavior:u.toValue(f)}))}const O=o.ref(!1),k=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),b=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),M=C=>{O.value&&(O.value=!1,b.left=!1,b.right=!1,b.top=!1,b.bottom=!1,a(C))},z=u.useDebounceFn(M,n+r),E=C=>{var _;if(!p)return;const h=C.document?C.document.documentElement:(_=C.documentElement)!=null?_:C,{display:P,flexDirection:A}=getComputedStyle(h),R=h.scrollLeft;b.left=R<d.value,b.right=R>d.value;const le=Math.abs(R)<=0+(l.left||0),ue=Math.abs(R)+h.clientWidth>=h.scrollWidth-(l.right||0)-te;P==="flex"&&A==="row-reverse"?(k.left=ue,k.right=le):(k.left=le,k.right=ue),d.value=R;let H=h.scrollTop;C===p.document&&!H&&(H=p.document.body.scrollTop),b.top=H<v.value,b.bottom=H>v.value;const ce=Math.abs(H)<=0+(l.top||0),fe=Math.abs(H)+h.clientHeight>=h.scrollHeight-(l.bottom||0)-te;P==="flex"&&A==="column-reverse"?(k.top=fe,k.bottom=ce):(k.top=ce,k.bottom=fe),v.value=H},V=C=>{var _;if(!p)return;const h=(_=C.target.documentElement)!=null?_:C.target;E(h),O.value=!0,z(C),i(C)};return L(e,"scroll",n?u.useThrottleFn(V,n,!0,!1):V,c),L(e,"scrollend",M,c),{x:g,y:w,isScrolling:O,arrivedState:k,directions:b,measure(){const C=u.toValue(e);p&&C&&E(C)}}}function G(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function ne(e,t,n={}){var r;const{direction:a="bottom",interval:i=100}=n,l=o.reactive(Q(e,{...n,offset:{[a]:(r=n.distance)!=null?r:0,...n.offset}})),c=o.ref(),f=o.computed(()=>!!c.value),p=o.computed(()=>G(u.toValue(e))),d=q(p);function v(){if(l.measure(),!p.value||!d.value)return;const{scrollHeight:g,clientHeight:w,scrollWidth:y,clientWidth:O}=p.value,k=a==="bottom"||a==="top"?g<=w:y<=O;(l.arrivedState[a]||k)&&(c.value||(c.value=Promise.all([t(l),new Promise(b=>setTimeout(b,i))]).finally(()=>{c.value=null,o.nextTick(()=>v())})))}return o.watch(()=>[l.arrivedState[a],d.value],v,{immediate:!0}),{isLoading:f}}const Ze={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?ne(e,t.value):ne(e,...t.value)}},De={[u.directiveHooks.mounted](e,t){typeof t.value=="function"?X(e,t.value):X(e,...t.value)}},et=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(m.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),tt=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),nt=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ot=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(m.useNetwork());return()=>{if(t.default)return t.default(n)}}}),rt=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(m.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),at=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=u.toRef(e,"object"),r=m.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),st=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(m.useOffsetPagination({...e,onPageChange(...a){var i;(i=e.onPageChange)==null||i.call(e,...a),n("page-change",...a)},onPageSizeChange(...a){var i;(i=e.onPageSizeChange)==null||i.call(e,...a),n("page-size-change",...a)},onPageCountChange(...a){var i;(i=e.onPageCountChange)==null||i.call(e,...a),n("page-count-change",...a)}}));return()=>{if(t.default)return t.default(r)}}}),it=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:m.useOnline()});return()=>{if(t.default)return t.default(n)}}}),lt=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:m.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),ut=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(m.usePointer({...e,target:e.target==="self"?n:S}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),ct=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(m.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ft=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:m.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),dt=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:m.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:m.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),vt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:m.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),gt=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:m.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}});function mt(e,t,n={}){const{window:r=S,...a}=n;let i;const l=K(()=>r&&"MutationObserver"in r),c=()=>{i&&(i.disconnect(),i=void 0)},f=o.watch(()=>U(e),d=>{c(),l.value&&r&&d&&(i=new MutationObserver(t),i.observe(d,a))},{immediate:!0}),p=()=>{c(),f()};return u.tryOnScopeDispose(p),{isSupported:l,stop:p}}function J(e,t,n={}){const{window:r=S,initialValue:a="",observe:i=!1}=n,l=o.ref(a),c=o.computed(()=>{var p;return U(t)||((p=r?.document)==null?void 0:p.documentElement)});function f(){var p;const d=u.toValue(e),v=u.toValue(c);if(v&&r){const g=(p=r.getComputedStyle(v).getPropertyValue(d))==null?void 0:p.trim();l.value=g||a}}return i&&mt(c,f,{attributeFilter:["style","class"],window:r}),o.watch([c,()=>u.toValue(e)],f,{immediate:!0}),o.watch(l,p=>{var d;(d=c.value)!=null&&d.style&&c.value.style.setProperty(u.toValue(e),p)}),l}const oe="--vueuse-safe-area-top",re="--vueuse-safe-area-right",ae="--vueuse-safe-area-bottom",se="--vueuse-safe-area-left";function ht(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(u.isClient){const i=J(oe),l=J(re),c=J(ae),f=J(se);i.value="env(safe-area-inset-top, 0px)",l.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),L("resize",u.useDebounceFn(a))}function a(){e.value=Y(oe),t.value=Y(re),n.value=Y(ae),r.value=Y(se)}return{top:e,right:t,bottom:n,left:r,update:a}}function Y(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const yt=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:a,left:i}=ht();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?a.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),wt={[u.directiveHooks.mounted](e,t){if(typeof t.value=="function"){const n=t.value,r=Q(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,a=Q(e,{...r,onScroll(i){var l;(l=r.onScroll)==null||l.call(r,i),n(a)},onStop(i){var l;(l=r.onStop)==null||l.call(r,i),n(a)}})}}};function ie(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:ie(n)}}function Ut(e){const t=e||window.event,n=t.target;return ie(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}function bt(e,t=!1){const n=o.ref(t);let r=null,a;o.watch(u.toRef(e),c=>{const f=G(u.toValue(c));if(f){const p=f;a=p.style.overflow,n.value&&(p.style.overflow="hidden")}},{immediate:!0});const i=()=>{const c=G(u.toValue(e));!c||n.value||(u.isIOS&&(r=L(c,"touchmove",f=>{Ut(f)},{passive:!1})),c.style.overflow="hidden",n.value=!0)},l=()=>{const c=G(u.toValue(e));!c||!n.value||(u.isIOS&&r?.(),c.style.overflow=a,n.value=!1)};return u.tryOnScopeDispose(l),o.computed({get(){return n.value},set(c){c?i():l()}})}function St(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const a=bt(n,r.value);o.watch(t,i=>a.value=i)}}const Ct=St(),Ot=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(m.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Et=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(m.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Pt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:a,containerProps:i,wrapperProps:l,scrollTo:c}=m.useVirtualList(r,e.options);return n({scrollTo:c}),typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...l.value},a.value.map(f=>o.h("div",{style:{overFlow:"hidden",height:f.height}},t.default?t.default(f):"Please set content!")))])}}),Lt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:m.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),kt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(m.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});s.OnClickOutside=x,s.OnLongPress=ve,s.UseActiveElement=ge,s.UseBattery=me,s.UseBrowserLocation=he,s.UseColorMode=Le,s.UseDark=ke,s.UseDeviceMotion=Ae,s.UseDeviceOrientation=_e,s.UseDevicePixelRatio=Me,s.UseDevicesList=Te,s.UseDocumentVisibility=Ve,s.UseDraggable=Ie,s.UseElementBounding=ze,s.UseElementSize=He,s.UseElementVisibility=Fe,s.UseEyeDropper=Ge,s.UseFullscreen=Je,s.UseGeolocation=Ye,s.UseIdle=$e,s.UseImage=xe,s.UseMouse=et,s.UseMouseInElement=tt,s.UseMousePressed=nt,s.UseNetwork=ot,s.UseNow=rt,s.UseObjectUrl=at,s.UseOffsetPagination=st,s.UseOnline=it,s.UsePageLeave=lt,s.UsePointer=ut,s.UsePointerLock=ct,s.UsePreferredColorScheme=ft,s.UsePreferredContrast=dt,s.UsePreferredDark=pt,s.UsePreferredLanguages=vt,s.UsePreferredReducedMotion=gt,s.UseScreenSafeArea=yt,s.UseTimeAgo=Ot,s.UseTimestamp=Et,s.UseVirtualList=Pt,s.UseWindowFocus=Lt,s.UseWindowSize=kt,s.VOnClickOutside=B,s.VOnLongPress=Z,s.vElementHover=Ne,s.vElementSize=je,s.vElementVisibility=Ke,s.vInfiniteScroll=Ze,s.vIntersectionObserver=De,s.vOnClickOutside=B,s.vOnKeyStroke=de,s.vOnLongPress=Z,s.vScroll=wt,s.vScrollLock=Ct})(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

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",
@@ -19,8 +19,9 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 });
 
 function unrefElement(elRef) {
+  var _a;
   const plain = toValue(elRef);
-  return plain?.$el ?? plain;
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
 const defaultWindow = isClient ? window : void 0;
@@ -57,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));
         })
       );
     },
@@ -115,8 +117,9 @@ function onClickOutside(target, handler, options = {}) {
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
       setTimeout(() => {
+        var _a;
         const el = unrefElement(target);
-        if (window.document.activeElement?.tagName === "IFRAME" && !el?.contains(window.document.activeElement))
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
           handler(event);
       }, 0);
     })
@@ -188,7 +191,8 @@ function onKeyStroke(...args) {
 
 const vOnKeyStroke = {
   [directiveHooks.mounted](el, binding) {
-    const keys = binding.arg?.split(",") ?? true;
+    var _a, _b;
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : true;
     if (typeof binding.value === "function") {
       onKeyStroke(keys, binding.value, {
         target: el
@@ -205,6 +209,7 @@ const vOnKeyStroke = {
 
 const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
+  var _a, _b;
   const elementRef = computed(() => unrefElement(target));
   let timeout;
   function clear() {
@@ -214,21 +219,22 @@ function onLongPress(target, handler, options) {
     }
   }
   function onDown(ev) {
-    if (options?.modifiers?.self && ev.target !== elementRef.value)
+    var _a2, _b2, _c, _d;
+    if (((_a2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _a2.self) && ev.target !== elementRef.value)
       return;
     clear();
-    if (options?.modifiers?.prevent)
+    if ((_b2 = options == null ? void 0 : options.modifiers) == null ? void 0 : _b2.prevent)
       ev.preventDefault();
-    if (options?.modifiers?.stop)
+    if ((_c = options == null ? void 0 : options.modifiers) == null ? void 0 : _c.stop)
       ev.stopPropagation();
     timeout = setTimeout(
       () => handler(ev),
-      options?.delay ?? DEFAULT_DELAY
+      (_d = options == null ? void 0 : options.delay) != null ? _d : DEFAULT_DELAY
     );
   }
   const listenerOptions = {
-    capture: options?.modifiers?.capture,
-    once: options?.modifiers?.once
+    capture: (_a = options == null ? void 0 : options.modifiers) == null ? void 0 : _a.capture,
+    once: (_b = options == null ? void 0 : options.modifiers) == null ? void 0 : _b.once
   };
   useEventListener(elementRef, "pointerdown", onDown, listenerOptions);
   useEventListener(elementRef, ["pointerup", "pointerleave"], clear, listenerOptions);
@@ -350,6 +356,7 @@ const StorageSerializers = {
 };
 const customStorageEventName = "vueuse-storage";
 function useStorage(key, defaults, storage, options = {}) {
+  var _a;
   const {
     flush = "pre",
     deep = true,
@@ -366,7 +373,10 @@ function useStorage(key, defaults, storage, options = {}) {
   const data = (shallow ? shallowRef : ref)(defaults);
   if (!storage) {
     try {
-      storage = getSSRHandler("getDefaultStorage", () => defaultWindow?.localStorage)();
+      storage = getSSRHandler("getDefaultStorage", () => {
+        var _a2;
+        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
+      })();
     } catch (e) {
       onError(e);
     }
@@ -375,7 +385,7 @@ function useStorage(key, defaults, storage, options = {}) {
     return data;
   const rawInit = toValue(defaults);
   const type = guessSerializerType(rawInit);
-  const serializer = options.serializer ?? StorageSerializers[type];
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(
     data,
     () => write(data.value),
@@ -445,7 +455,7 @@ function useStorage(key, defaults, storage, options = {}) {
       return;
     pauseWatch();
     try {
-      if (event?.newValue !== serializer.write(data.value))
+      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
         data.value = read(event);
     } catch (e) {
       onError(e);
@@ -543,7 +553,7 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window?.document.querySelector(selector2) : unrefElement(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
       let style;
@@ -571,7 +581,8 @@ function useColorMode(options = {}) {
     }
   );
   function defaultOnChanged(mode) {
-    updateHTMLAttrs(selector, attribute, modes[mode] ?? mode);
+    var _a;
+    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
   }
   function onChanged(mode) {
     if (options.onChanged)
@@ -708,7 +719,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   ],
   setup(props, { slots }) {
     const target = ref();
-    const handle = computed(() => props.handle ?? target.value);
+    const handle = computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
       toValue(props.initialValue) || { x: 0, y: 0 },
@@ -716,7 +730,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
     const onEnd = (position, event) => {
-      props.onEnd?.(position, event);
+      var _a;
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -834,7 +849,10 @@ function useResizeObserver(target, callback, options = {}) {
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
   const { window = defaultWindow, box = "content-box" } = options;
-  const isSVG = computed(() => unrefElement(target)?.namespaceURI?.includes("svg"));
+  const isSVG = computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
   useResizeObserver(
@@ -876,7 +894,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
 
 const vElementSize = {
   [directiveHooks.mounted](el, binding) {
-    const handler = typeof binding.value === "function" ? binding.value : binding.value?.[0];
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
     const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
     const { width, height } = useElementSize(el, ...options);
     watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
@@ -1047,7 +1066,7 @@ function useAsyncState(promise, initialState, options) {
     resetOnExecute = true,
     shallow = true,
     throwError
-  } = options ?? {};
+  } = options != null ? options : {};
   const state = shallow ? shallowRef(initialState) : ref(initialState);
   const isReady = ref(false);
   const isLoading = ref(false);
@@ -1202,14 +1221,15 @@ function useScroll(element, options = {}) {
     }
   });
   function scrollTo(_x, _y) {
+    var _a, _b, _c;
     if (!window)
       return;
     const _element = toValue(element);
     if (!_element)
       return;
-    (_element instanceof Document ? window.document.body : _element)?.scrollTo({
-      top: toValue(_y) ?? y.value,
-      left: toValue(_x) ?? x.value,
+    (_c = _element instanceof Document ? window.document.body : _element) == null ? void 0 : _c.scrollTo({
+      top: (_a = toValue(_y)) != null ? _a : y.value,
+      left: (_b = toValue(_x)) != null ? _b : x.value,
       behavior: toValue(behavior)
     });
   }
@@ -1238,9 +1258,10 @@ function useScroll(element, options = {}) {
   };
   const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
   const setArrivedState = (target) => {
+    var _a;
     if (!window)
       return;
-    const el = target.document ? target.document.documentElement : 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;
@@ -1272,9 +1293,10 @@ function useScroll(element, options = {}) {
     internalY.value = scrollTop;
   };
   const onScrollHandler = (e) => {
+    var _a;
     if (!window)
       return;
-    const eventTarget = e.target.documentElement ?? e.target;
+    const eventTarget = (_a = e.target.documentElement) != null ? _a : e.target;
     setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1315,6 +1337,7 @@ function resolveElement(el) {
 }
 
 function useInfiniteScroll(element, onLoadMore, options = {}) {
+  var _a;
   const {
     direction = "bottom",
     interval = 100
@@ -1324,7 +1347,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     {
       ...options,
       offset: {
-        [direction]: options.distance ?? 0,
+        [direction]: (_a = options.distance) != null ? _a : 0,
         ...options.offset
       }
     }
@@ -1476,15 +1499,18 @@ const UseOffsetPagination = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     const data = reactive(useOffsetPagination({
       ...props,
       onPageChange(...args) {
-        props.onPageChange?.(...args);
+        var _a;
+        (_a = props.onPageChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-change", ...args);
       },
       onPageSizeChange(...args) {
-        props.onPageSizeChange?.(...args);
+        var _a;
+        (_a = props.onPageSizeChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-size-change", ...args);
       },
       onPageCountChange(...args) {
-        props.onPageCountChange?.(...args);
+        var _a;
+        (_a = props.onPageCountChange) == null ? void 0 : _a.call(props, ...args);
         emit("page-count-change", ...args);
       }
     }));
@@ -1654,12 +1680,16 @@ function useMutationObserver(target, callback, options = {}) {
 function useCssVar(prop, target, options = {}) {
   const { window = defaultWindow, initialValue = "", observe = false } = options;
   const variable = ref(initialValue);
-  const elRef = computed(() => unrefElement(target) || window?.document?.documentElement);
+  const elRef = computed(() => {
+    var _a;
+    return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+  });
   function updateCssVar() {
+    var _a;
     const key = toValue(prop);
     const el = toValue(elRef);
     if (el && window) {
-      const value = window.getComputedStyle(el).getPropertyValue(key)?.trim();
+      const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
   }
@@ -1677,7 +1707,8 @@ function useCssVar(prop, target, options = {}) {
   watch(
     variable,
     (val) => {
-      if (elRef.value?.style)
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
         elRef.value.style.setProperty(toValue(prop), val);
     }
   );
@@ -1774,11 +1805,13 @@ const vScroll = {
       const state = useScroll(el, {
         ...options,
         onScroll(e) {
-          options.onScroll?.(e);
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
           handler(state);
         },
         onStop(e) {
-          options.onStop?.(e);
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
           handler(state);
         }
       });
@@ -1844,7 +1877,7 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(toValue(element));
     if (!el || !isLocked.value)
       return;
-    isIOS && stopTouchMoveListener?.();
+    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
     el.style.overflow = initialOverflow;
     isLocked.value = false;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.4.0",
+  "version": "10.4.1",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -32,8 +32,8 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@vueuse/core": "10.4.0",
-    "@vueuse/shared": "10.4.0",
+    "@vueuse/core": "10.4.1",
+    "@vueuse/shared": "10.4.1",
     "vue-demi": ">=0.14.5"
   }
 }