@vueuse/components 10.7.2 → 10.8.0

package/index.cjs

@@ -452,23 +452,27 @@ function useStorage(key, defaults, storage, options = {}) {
   return data;
   function write(v) {
     try {
+      const oldValue = storage.getItem(key);
+      const dispatchWriteEvent = (newValue) => {
+        if (window) {
+          window.dispatchEvent(new CustomEvent(customStorageEventName, {
+            detail: {
+              key,
+              oldValue,
+              newValue,
+              storageArea: storage
+            }
+          }));
+        }
+      };
       if (v == null) {
+        dispatchWriteEvent(null);
         storage.removeItem(key);
       } else {
         const serialized = serializer.write(v);
-        const oldValue = storage.getItem(key);
         if (oldValue !== serialized) {
           storage.setItem(key, serialized);
-          if (window) {
-            window.dispatchEvent(new CustomEvent(customStorageEventName, {
-              detail: {
-                key,
-                oldValue,
-                newValue: serialized,
-                storageArea: storage
-              }
-            }));
-          }
+          dispatchWriteEvent(serialized);
         }
       }
     } catch (e) {
@@ -523,10 +527,11 @@ function useStorage(key, defaults, storage, options = {}) {
 
 function useMounted() {
   const isMounted = vueDemi.ref(false);
-  if (vueDemi.getCurrentInstance()) {
+  const instance = vueDemi.getCurrentInstance();
+  if (instance) {
     vueDemi.onMounted(() => {
       isMounted.value = true;
-    });
+    }, instance);
   }
   return isMounted;
 }
@@ -766,7 +771,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "axis",
     "onStart",
     "onMove",
-    "onEnd"
+    "onEnd",
+    "disabled"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -774,6 +780,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
+    const disabled = vueDemi.computed(() => !!props.disabled);
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
       shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -792,7 +799,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       ...props,
       handle,
       initialValue,
-      onEnd
+      onEnd,
+      disabled
     }));
     return () => {
       if (slots.default)
@@ -883,7 +891,7 @@ function useResizeObserver(target, callback, options = {}) {
           _el && observer.observe(_el, observerOptions);
       }
     },
-    { immediate: true, flush: "post", deep: true }
+    { immediate: true, flush: "post" }
   );
   const stop = () => {
     cleanup();
@@ -1038,7 +1046,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget } = options;
+  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
   const elementIsVisible = vueDemi.ref(false);
   useIntersectionObserver(
     element,
@@ -1056,7 +1064,7 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold: 0
+      threshold
     }
   );
   return elementIsVisible;
@@ -1270,7 +1278,10 @@ function useScroll(element, options = {}) {
       passive: true
     },
     behavior = "auto",
-    window = defaultWindow
+    window = defaultWindow,
+    onError = (e) => {
+      console.error(e);
+    }
   } = options;
   const internalX = vueDemi.ref(0);
   const internalY = vueDemi.ref(0);
@@ -1331,12 +1342,12 @@ function useScroll(element, options = {}) {
     var _a;
     if (!window)
       return;
-    const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
+    const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const left = Math.abs(scrollLeft) <= (offset.left || 0);
     const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
@@ -1351,7 +1362,7 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const top = Math.abs(scrollTop) <= (offset.top || 0);
     const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
@@ -1379,10 +1390,14 @@ function useScroll(element, options = {}) {
     eventListenerOptions
   );
   shared.tryOnMounted(() => {
-    const _element = shared.toValue(element);
-    if (!_element)
-      return;
-    setArrivedState(_element);
+    try {
+      const _element = shared.toValue(element);
+      if (!_element)
+        return;
+      setArrivedState(_element);
+    } catch (e) {
+      onError(e);
+    }
   });
   useEventListener(
     element,
@@ -1732,16 +1747,21 @@ function useMutationObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
+  const targets = vueDemi.computed(() => {
+    const value = shared.toValue(target);
+    const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
+    return new Set(items);
+  });
   const stopWatch = vueDemi.watch(
-    () => unrefElement(target),
-    (el) => {
+    () => targets.value,
+    (targets2) => {
       cleanup();
-      if (isSupported.value && window && el) {
+      if (isSupported.value && window && targets2.size) {
         observer = new MutationObserver(callback);
-        observer.observe(el, mutationOptions);
+        targets2.forEach((el) => observer.observe(el, mutationOptions));
       }
     },
-    { immediate: true }
+    { immediate: true, flush: "post" }
   );
   const takeRecords = () => {
     return observer == null ? void 0 : observer.takeRecords();

package/index.d.cts

@@ -119,14 +119,14 @@ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source>
 declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseClipboardProps<string>>, {}, {}>;
 
 interface StorageLike {
-    getItem(key: string): string | null;
-    setItem(key: string, value: string): void;
-    removeItem(key: string): void;
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
 }
 
 interface Serializer<T> {
-    read(raw: string): T;
-    write(value: T): string;
+    read: (raw: string) => T;
+    write: (value: T) => string;
 }
 interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
@@ -328,7 +328,28 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
-interface UseElementVisibilityOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+     */
+    root?: MaybeComputedElementRef;
+    /**
+     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
+     */
+    rootMargin?: string;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.
+     */
+    threshold?: number | number[];
+}
+
+interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -422,6 +443,12 @@ interface UseScrollOptions extends ConfigurableWindow {
      * @default 'auto'
      */
     behavior?: MaybeRefOrGetter<ScrollBehavior>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
 }
 /**
  * Reactive scroll.
@@ -490,27 +517,6 @@ type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface UseIntersectionObserverOptions extends ConfigurableWindow {
-    /**
-     * Start the IntersectionObserver immediately on creation
-     *
-     * @default true
-     */
-    immediate?: boolean;
-    /**
-     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
-     */
-    root?: MaybeComputedElementRef;
-    /**
-     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
-     */
-    rootMargin?: string;
-    /**
-     * Either a single number or an array of numbers between 0.0 and 1.
-     */
-    threshold?: number | number[];
-}
-
 type BindingValueFunction$1 = IntersectionObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;

package/index.d.mts

@@ -119,14 +119,14 @@ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source>
 declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseClipboardProps<string>>, {}, {}>;
 
 interface StorageLike {
-    getItem(key: string): string | null;
-    setItem(key: string, value: string): void;
-    removeItem(key: string): void;
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
 }
 
 interface Serializer<T> {
-    read(raw: string): T;
-    write(value: T): string;
+    read: (raw: string) => T;
+    write: (value: T) => string;
 }
 interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
@@ -328,7 +328,28 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
-interface UseElementVisibilityOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+     */
+    root?: MaybeComputedElementRef;
+    /**
+     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
+     */
+    rootMargin?: string;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.
+     */
+    threshold?: number | number[];
+}
+
+interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -422,6 +443,12 @@ interface UseScrollOptions extends ConfigurableWindow {
      * @default 'auto'
      */
     behavior?: MaybeRefOrGetter<ScrollBehavior>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
 }
 /**
  * Reactive scroll.
@@ -490,27 +517,6 @@ type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface UseIntersectionObserverOptions extends ConfigurableWindow {
-    /**
-     * Start the IntersectionObserver immediately on creation
-     *
-     * @default true
-     */
-    immediate?: boolean;
-    /**
-     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
-     */
-    root?: MaybeComputedElementRef;
-    /**
-     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
-     */
-    rootMargin?: string;
-    /**
-     * Either a single number or an array of numbers between 0.0 and 1.
-     */
-    threshold?: number | number[];
-}
-
 type BindingValueFunction$1 = IntersectionObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;

package/index.d.ts

@@ -119,14 +119,14 @@ interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source>
 declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseClipboardProps<string>>, {}, {}>;
 
 interface StorageLike {
-    getItem(key: string): string | null;
-    setItem(key: string, value: string): void;
-    removeItem(key: string): void;
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
 }
 
 interface Serializer<T> {
-    read(raw: string): T;
-    write(value: T): string;
+    read: (raw: string) => T;
+    write: (value: T) => string;
 }
 interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
@@ -328,7 +328,28 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
-interface UseElementVisibilityOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+     */
+    root?: MaybeComputedElementRef;
+    /**
+     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
+     */
+    rootMargin?: string;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.
+     */
+    threshold?: number | number[];
+}
+
+interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -422,6 +443,12 @@ interface UseScrollOptions extends ConfigurableWindow {
      * @default 'auto'
      */
     behavior?: MaybeRefOrGetter<ScrollBehavior>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
 }
 /**
  * Reactive scroll.
@@ -490,27 +517,6 @@ type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface UseIntersectionObserverOptions extends ConfigurableWindow {
-    /**
-     * Start the IntersectionObserver immediately on creation
-     *
-     * @default true
-     */
-    immediate?: boolean;
-    /**
-     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
-     */
-    root?: MaybeComputedElementRef;
-    /**
-     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
-     */
-    rootMargin?: string;
-    /**
-     * Either a single number or an array of numbers between 0.0 and 1.
-     */
-    threshold?: number | number[];
-}
-
 type BindingValueFunction$1 = IntersectionObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;

package/index.iife.js

@@ -19,7 +19,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     VueDemi.Vue2 = Vue
     VueDemi.version = Vue.version
     VueDemi.warn = Vue.util.warn
-    VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
+    VueDemi.hasInjectionContext = function() {
+      return !!VueDemi.getCurrentInstance()
+    }
     function createApp(rootComponent, rootProps) {
       var vm
       var provide = {}
@@ -72,7 +74,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       VueDemi.Vue = Vue
       VueDemi.Vue2 = Vue
       VueDemi.version = Vue.version
-      VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
+      VueDemi.hasInjectionContext = function() {
+        return !!VueDemi.getCurrentInstance()
+      }
     } else {
       console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
     }
@@ -565,23 +569,27 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return data;
     function write(v) {
       try {
+        const oldValue = storage.getItem(key);
+        const dispatchWriteEvent = (newValue) => {
+          if (window) {
+            window.dispatchEvent(new CustomEvent(customStorageEventName, {
+              detail: {
+                key,
+                oldValue,
+                newValue,
+                storageArea: storage
+              }
+            }));
+          }
+        };
         if (v == null) {
+          dispatchWriteEvent(null);
           storage.removeItem(key);
         } else {
           const serialized = serializer.write(v);
-          const oldValue = storage.getItem(key);
           if (oldValue !== serialized) {
             storage.setItem(key, serialized);
-            if (window) {
-              window.dispatchEvent(new CustomEvent(customStorageEventName, {
-                detail: {
-                  key,
-                  oldValue,
-                  newValue: serialized,
-                  storageArea: storage
-                }
-              }));
-            }
+            dispatchWriteEvent(serialized);
           }
         }
       } catch (e) {
@@ -636,10 +644,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useMounted() {
     const isMounted = vueDemi.ref(false);
-    if (vueDemi.getCurrentInstance()) {
+    const instance = vueDemi.getCurrentInstance();
+    if (instance) {
       vueDemi.onMounted(() => {
         isMounted.value = true;
-      });
+      }, instance);
     }
     return isMounted;
   }
@@ -879,7 +888,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "axis",
       "onStart",
       "onMove",
-      "onEnd"
+      "onEnd",
+      "disabled"
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
@@ -887,6 +897,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         var _a;
         return (_a = props.handle) != null ? _a : target.value;
       });
+      const disabled = vueDemi.computed(() => !!props.disabled);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -905,7 +916,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         ...props,
         handle,
         initialValue,
-        onEnd
+        onEnd,
+        disabled
       }));
       return () => {
         if (slots.default)
@@ -996,7 +1008,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
             _el && observer.observe(_el, observerOptions);
         }
       },
-      { immediate: true, flush: "post", deep: true }
+      { immediate: true, flush: "post" }
     );
     const stop = () => {
       cleanup();
@@ -1151,7 +1163,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   function useElementVisibility(element, options = {}) {
-    const { window = defaultWindow, scrollTarget } = options;
+    const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
     const elementIsVisible = vueDemi.ref(false);
     useIntersectionObserver(
       element,
@@ -1169,7 +1181,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       {
         root: scrollTarget,
         window,
-        threshold: 0
+        threshold
       }
     );
     return elementIsVisible;
@@ -1383,7 +1395,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         passive: true
       },
       behavior = "auto",
-      window = defaultWindow
+      window = defaultWindow,
+      onError = (e) => {
+        console.error(e);
+      }
     } = options;
     const internalX = vueDemi.ref(0);
     const internalY = vueDemi.ref(0);
@@ -1444,12 +1459,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       var _a;
       if (!window)
         return;
-      const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
+      const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
       const { display, flexDirection } = getComputedStyle(el);
       const scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
       directions.right = scrollLeft > internalX.value;
-      const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+      const left = Math.abs(scrollLeft) <= (offset.left || 0);
       const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "row-reverse") {
         arrivedState.left = right;
@@ -1464,7 +1479,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         scrollTop = window.document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
-      const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+      const top = Math.abs(scrollTop) <= (offset.top || 0);
       const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "column-reverse") {
         arrivedState.top = bottom;
@@ -1492,10 +1507,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       eventListenerOptions
     );
     shared.tryOnMounted(() => {
-      const _element = shared.toValue(element);
-      if (!_element)
-        return;
-      setArrivedState(_element);
+      try {
+        const _element = shared.toValue(element);
+        if (!_element)
+          return;
+        setArrivedState(_element);
+      } catch (e) {
+        onError(e);
+      }
     });
     useEventListener(
       element,
@@ -1845,16 +1864,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         observer = void 0;
       }
     };
+    const targets = vueDemi.computed(() => {
+      const value = shared.toValue(target);
+      const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
+      return new Set(items);
+    });
     const stopWatch = vueDemi.watch(
-      () => unrefElement(target),
-      (el) => {
+      () => targets.value,
+      (targets2) => {
         cleanup();
-        if (isSupported.value && window && el) {
+        if (isSupported.value && window && targets2.size) {
           observer = new MutationObserver(callback);
-          observer.observe(el, mutationOptions);
+          targets2.forEach((el) => observer.observe(el, mutationOptions));
         }
       },
-      { immediate: true }
+      { immediate: true, flush: "post" }
     );
     const takeRecords = () => {
       return observer == null ? void 0 : observer.takeRecords();

package/index.iife.min.js

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

package/index.mjs

@@ -450,23 +450,27 @@ function useStorage(key, defaults, storage, options = {}) {
   return data;
   function write(v) {
     try {
+      const oldValue = storage.getItem(key);
+      const dispatchWriteEvent = (newValue) => {
+        if (window) {
+          window.dispatchEvent(new CustomEvent(customStorageEventName, {
+            detail: {
+              key,
+              oldValue,
+              newValue,
+              storageArea: storage
+            }
+          }));
+        }
+      };
       if (v == null) {
+        dispatchWriteEvent(null);
         storage.removeItem(key);
       } else {
         const serialized = serializer.write(v);
-        const oldValue = storage.getItem(key);
         if (oldValue !== serialized) {
           storage.setItem(key, serialized);
-          if (window) {
-            window.dispatchEvent(new CustomEvent(customStorageEventName, {
-              detail: {
-                key,
-                oldValue,
-                newValue: serialized,
-                storageArea: storage
-              }
-            }));
-          }
+          dispatchWriteEvent(serialized);
         }
       }
     } catch (e) {
@@ -521,10 +525,11 @@ function useStorage(key, defaults, storage, options = {}) {
 
 function useMounted() {
   const isMounted = ref(false);
-  if (getCurrentInstance()) {
+  const instance = getCurrentInstance();
+  if (instance) {
     onMounted(() => {
       isMounted.value = true;
-    });
+    }, instance);
   }
   return isMounted;
 }
@@ -764,7 +769,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "axis",
     "onStart",
     "onMove",
-    "onEnd"
+    "onEnd",
+    "disabled"
   ],
   setup(props, { slots }) {
     const target = ref();
@@ -772,6 +778,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       var _a;
       return (_a = props.handle) != null ? _a : target.value;
     });
+    const disabled = computed(() => !!props.disabled);
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
       toValue(props.initialValue) || { x: 0, y: 0 },
@@ -790,7 +797,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       ...props,
       handle,
       initialValue,
-      onEnd
+      onEnd,
+      disabled
     }));
     return () => {
       if (slots.default)
@@ -881,7 +889,7 @@ function useResizeObserver(target, callback, options = {}) {
           _el && observer.observe(_el, observerOptions);
       }
     },
-    { immediate: true, flush: "post", deep: true }
+    { immediate: true, flush: "post" }
   );
   const stop = () => {
     cleanup();
@@ -1036,7 +1044,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget } = options;
+  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
   const elementIsVisible = ref(false);
   useIntersectionObserver(
     element,
@@ -1054,7 +1062,7 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold: 0
+      threshold
     }
   );
   return elementIsVisible;
@@ -1268,7 +1276,10 @@ function useScroll(element, options = {}) {
       passive: true
     },
     behavior = "auto",
-    window = defaultWindow
+    window = defaultWindow,
+    onError = (e) => {
+      console.error(e);
+    }
   } = options;
   const internalX = ref(0);
   const internalY = ref(0);
@@ -1329,12 +1340,12 @@ function useScroll(element, options = {}) {
     var _a;
     if (!window)
       return;
-    const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
+    const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
     const { display, flexDirection } = getComputedStyle(el);
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const left = Math.abs(scrollLeft) <= (offset.left || 0);
     const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
@@ -1349,7 +1360,7 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const top = Math.abs(scrollTop) <= (offset.top || 0);
     const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
@@ -1377,10 +1388,14 @@ function useScroll(element, options = {}) {
     eventListenerOptions
   );
   tryOnMounted(() => {
-    const _element = toValue(element);
-    if (!_element)
-      return;
-    setArrivedState(_element);
+    try {
+      const _element = toValue(element);
+      if (!_element)
+        return;
+      setArrivedState(_element);
+    } catch (e) {
+      onError(e);
+    }
   });
   useEventListener(
     element,
@@ -1730,16 +1745,21 @@ function useMutationObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
+  const targets = computed(() => {
+    const value = toValue(target);
+    const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(notNullish);
+    return new Set(items);
+  });
   const stopWatch = watch(
-    () => unrefElement(target),
-    (el) => {
+    () => targets.value,
+    (targets2) => {
       cleanup();
-      if (isSupported.value && window && el) {
+      if (isSupported.value && window && targets2.size) {
         observer = new MutationObserver(callback);
-        observer.observe(el, mutationOptions);
+        targets2.forEach((el) => observer.observe(el, mutationOptions));
       }
     },
-    { immediate: true }
+    { immediate: true, flush: "post" }
   );
   const takeRecords = () => {
     return observer == null ? void 0 : observer.takeRecords();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "10.7.2",
+  "version": "10.8.0",
   "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.7.2",
-    "@vueuse/shared": "10.7.2",
-    "vue-demi": ">=0.14.6"
+    "@vueuse/core": "10.8.0",
+    "@vueuse/shared": "10.8.0",
+    "vue-demi": ">=0.14.7"
   }
 }