@vueuse/components 8.0.0-beta.3 → 8.1.0

package/index.cjs

@@ -44,7 +44,7 @@ function useEventListener(...args) {
   if (!target)
     return shared.noop;
   let cleanup = shared.noop;
-  const stopWatch = vueDemi.watch(() => vueDemi.unref(target), (el) => {
+  const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
     cleanup();
     if (!el)
       return;
@@ -63,7 +63,7 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, ignore } = options;
+  const { window = defaultWindow, ignore, capture = true } = options;
   if (!window)
     return;
   const shouldListen = vueDemi.ref(true);
@@ -82,7 +82,7 @@ function onClickOutside(target, handler, options = {}) {
     handler(event);
   };
   const cleanup = [
-    useEventListener(window, "click", listener, { passive: true, capture: true }),
+    useEventListener(window, "click", listener, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
       shouldListen.value = !!el && !e.composedPath().includes(el);
@@ -143,18 +143,20 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-const vOnKeyStroke = (el, binding) => {
-  var _a, _b;
-  const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
-  if (typeof binding.value === "function") {
-    onKeyStroke(keys, binding.value, {
-      target: el
-    });
-  } else {
-    const [handler, options] = binding.value;
-    onKeyStroke(keys, handler, __spreadValues$b({
-      target: el
-    }, options));
+const vOnKeyStroke = {
+  [shared.directiveHooks.mounted](el, binding) {
+    var _a, _b;
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
+    if (typeof binding.value === "function") {
+      onKeyStroke(keys, binding.value, {
+        target: el
+      });
+    } else {
+      const [handler, options] = binding.value;
+      onKeyStroke(keys, handler, __spreadValues$b({
+        target: el
+      }, options));
+    }
   }
 };
 
@@ -306,10 +308,12 @@ function useStorage(key, initialValue, storage, options = {}) {
       onError(e);
     }
   }
+  let synced = false;
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
     try {
+      synced = true;
       const rawValue = event ? event.newValue : storage.getItem(key);
       if (rawValue == null) {
         data.value = rawInit;
@@ -330,6 +334,10 @@ function useStorage(key, initialValue, storage, options = {}) {
   if (storage) {
     shared.watchWithFilter(data, () => {
       try {
+        if (synced) {
+          synced = false;
+          return;
+        }
         if (data.value == null)
           storage.removeItem(key);
         else
@@ -366,7 +374,7 @@ function useMediaQuery(query, options = {}) {
     else
       mediaQuery.addListener(update);
     shared.tryOnScopeDispose(() => {
-      if ("removeEventListener" in update)
+      if ("removeEventListener" in mediaQuery)
         mediaQuery.removeEventListener("change", update);
       else
         mediaQuery.removeListener(update);
@@ -606,10 +614,12 @@ function useElementHover(el) {
   return isHovered;
 }
 
-const vElementHover = (el, binding) => {
-  if (typeof binding.value === "function") {
-    const isHovered = useElementHover(el);
-    vueDemi.watch(isHovered, (v) => binding.value(v));
+const vElementHover = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const isHovered = useElementHover(el);
+      vueDemi.watch(isHovered, (v) => binding.value(v));
+    }
   }
 };
 
@@ -654,7 +664,7 @@ function useResizeObserver(target, callback, options = {}) {
   const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
     cleanup();
     if (isSupported && window && el) {
-      observer = new window.ResizeObserver(callback);
+      observer = new ResizeObserver(callback);
       observer.observe(el, observerOptions);
     }
   }, { immediate: true, flush: "post" });
@@ -686,12 +696,14 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   };
 }
 
-const vElementSize = (el, binding) => {
-  var _a;
-  const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
-  const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
-  const { width, height } = useElementSize(el, ...options);
-  vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+const vElementSize = {
+  [shared.directiveHooks.mounted](el, binding) {
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+    const { width, height } = useElementSize(el, ...options);
+    vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  }
 };
 
 const UseElementVisibility = vueDemi.defineComponent({
@@ -709,6 +721,39 @@ const UseElementVisibility = vueDemi.defineComponent({
   }
 });
 
+function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+  const elementIsVisible = vueDemi.ref(false);
+  const testBounding = () => {
+    if (!window)
+      return;
+    const document = window.document;
+    if (!vueDemi.unref(element)) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = vueDemi.unref(element).getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  shared.tryOnMounted(testBounding);
+  if (window)
+    shared.tryOnMounted(() => useEventListener(vueDemi.unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  return elementIsVisible;
+}
+
+const vElementVisibility = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const isVisible = useElementVisibility(el);
+      vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+    } else {
+      const [handler, options] = binding.value;
+      const isVisible = useElementVisibility(el, options);
+      vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+    }
+  }
+};
+
 const UseEyeDropper = vueDemi.defineComponent({
   name: "UseEyeDropper",
   props: {
@@ -862,11 +907,13 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   });
 }
 
-const vInfiniteScroll = (el, binding) => {
-  if (typeof binding.value === "function")
-    useInfiniteScroll(el, binding.value);
-  else
-    useInfiniteScroll(el, ...binding.value);
+const vInfiniteScroll = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useInfiniteScroll(el, binding.value);
+    else
+      useInfiniteScroll(el, ...binding.value);
+  }
 };
 
 function useIntersectionObserver(target, callback, options = {}) {
@@ -885,7 +932,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     cleanup();
     if (!el)
       return;
-    const observer = new window.IntersectionObserver(callback, {
+    const observer = new IntersectionObserver(callback, {
       root: root2,
       rootMargin,
       threshold
@@ -907,11 +954,13 @@ function useIntersectionObserver(target, callback, options = {}) {
   };
 }
 
-const vIntersectionObserver = (el, binding) => {
-  if (typeof binding.value === "function")
-    useIntersectionObserver(el, binding.value);
-  else
-    useIntersectionObserver(el, ...binding.value);
+const vIntersectionObserver = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useIntersectionObserver(el, binding.value);
+    else
+      useIntersectionObserver(el, ...binding.value);
+  }
 };
 
 const UseMouse = vueDemi.defineComponent({
@@ -1285,31 +1334,33 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const vScroll = (el, binding) => {
-  if (typeof binding.value === "function") {
-    const handler = binding.value;
-    const state = useScroll(el, {
-      onScroll() {
-        handler(state);
-      },
-      onStop() {
-        handler(state);
-      }
-    });
-  } else {
-    const [handler, options] = binding.value;
-    const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
-      onScroll(e) {
-        var _a;
-        (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
-        handler(state);
-      },
-      onStop(e) {
-        var _a;
-        (_a = options.onStop) == null ? void 0 : _a.call(options, e);
-        handler(state);
-      }
-    }));
+const vScroll = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const state = useScroll(el, {
+        onScroll() {
+          handler(state);
+        },
+        onStop() {
+          handler(state);
+        }
+      });
+    } else {
+      const [handler, options] = binding.value;
+      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+        onScroll(e) {
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        },
+        onStop(e) {
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        }
+      }));
+    }
   }
 };
 
@@ -1545,6 +1596,7 @@ exports.VOnClickOutside = vOnClickOutside;
 exports.VOnLongPress = vOnLongPress;
 exports.vElementHover = vElementHover;
 exports.vElementSize = vElementSize;
+exports.vElementVisibility = vElementVisibility;
 exports.vInfiniteScroll = vInfiniteScroll;
 exports.vIntersectionObserver = vIntersectionObserver;
 exports.vOnClickOutside = vOnClickOutside;

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue_demi from 'vue-demi';
-import { FunctionDirective, Ref, ComponentPublicInstance, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
+import { FunctionDirective, ObjectDirective, Ref, ComponentPublicInstance, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
 import { MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
 import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef as MaybeRef$1, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 
@@ -27,9 +27,9 @@ interface KeyStrokeOptions {
     passive?: boolean;
 }
 
-declare type BindingValueFunction$6 = (event: KeyboardEvent) => void;
-declare type BindingValueArray$5 = [BindingValueFunction$6, KeyStrokeOptions];
-declare const vOnKeyStroke: FunctionDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
+declare type BindingValueFunction$7 = (event: KeyboardEvent) => void;
+declare type BindingValueArray$6 = [BindingValueFunction$7, KeyStrokeOptions];
+declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 interface OnLongPressOptions {
     /**
@@ -45,12 +45,12 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
 
-declare type BindingValueFunction$5 = (evt: PointerEvent) => void;
-declare type BindingValueArray$4 = [
-    BindingValueFunction$5,
+declare type BindingValueFunction$6 = (evt: PointerEvent) => void;
+declare type BindingValueArray$5 = [
+    BindingValueFunction$6,
     OnLongPressOptions
 ];
-declare const vOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$4>;
+declare const vOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -195,7 +195,8 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
 
 declare type VueInstance = ComponentPublicInstance;
-declare type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | VueInstance | undefined | null>;
+declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface ResizeObserverOptions extends ConfigurableWindow {
     /**
@@ -209,8 +210,8 @@ interface ResizeObserverOptions extends ConfigurableWindow {
 
 declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
 
-declare type BindingValueFunction$4 = (state: boolean) => void;
-declare const vElementHover: FunctionDirective<HTMLElement, BindingValueFunction$4>;
+declare type BindingValueFunction$5 = (state: boolean) => void;
+declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
 
 declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & ResizeObserverOptions & RenderableComponent>, {}>;
 
@@ -232,13 +233,21 @@ declare function useElementSize(target: MaybeElementRef, initialSize?: ElementSi
 };
 
 declare type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
-declare type BindingValueFunction$3 = (size: ElementSize) => void;
+declare type BindingValueFunction$4 = (size: ElementSize) => void;
 declare type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
-declare type BindingValueArray$3 = [BindingValueFunction$3, ...VElementSizeOptions];
-declare const vElementSize: FunctionDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+declare type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
+declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
+interface VisibilityScrollTargetOptions extends ConfigurableWindow {
+    scrollTarget?: MaybeRef<Element | null | undefined>;
+}
+
+declare type BindingValueFunction$3 = (state: boolean) => void;
+declare type BindingValueArray$3 = [BindingValueFunction$3, VisibilityScrollTargetOptions];
+declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+
 declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
@@ -341,7 +350,7 @@ declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement |
 
 declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: FunctionDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 interface IntersectionObserverOptions extends ConfigurableWindow {
     /**
@@ -360,7 +369,7 @@ interface IntersectionObserverOptions extends ConfigurableWindow {
 
 declare type BindingValueFunction$1 = IntersectionObserverCallback;
 declare type BindingValueArray$1 = [BindingValueFunction$1, IntersectionObserverOptions];
-declare const vIntersectionObserver: FunctionDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
 declare const UseMouse: vue_demi.DefineComponent<MouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseOptions>, {}>;
 
@@ -461,7 +470,7 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
 
 declare type BindingValueFunction = (state: UseScrollReturn) => void;
 declare type BindingValueArray = [BindingValueFunction, UseScrollOptions];
-declare const vScroll: FunctionDirective<HTMLElement, BindingValueFunction | BindingValueArray>;
+declare const vScroll: ObjectDirective<HTMLElement, BindingValueFunction | BindingValueArray>;
 
 declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
 
@@ -500,4 +509,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/index.iife.js

@@ -100,7 +100,7 @@
     if (!target)
       return shared.noop;
     let cleanup = shared.noop;
-    const stopWatch = vueDemi.watch(() => vueDemi.unref(target), (el) => {
+    const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
       cleanup();
       if (!el)
         return;
@@ -119,7 +119,7 @@
   }
 
   function onClickOutside(target, handler, options = {}) {
-    const { window = defaultWindow, ignore } = options;
+    const { window = defaultWindow, ignore, capture = true } = options;
     if (!window)
       return;
     const shouldListen = vueDemi.ref(true);
@@ -138,7 +138,7 @@
       handler(event);
     };
     const cleanup = [
-      useEventListener(window, "click", listener, { passive: true, capture: true }),
+      useEventListener(window, "click", listener, { passive: true, capture }),
       useEventListener(window, "pointerdown", (e) => {
         const el = unrefElement(target);
         shouldListen.value = !!el && !e.composedPath().includes(el);
@@ -199,18 +199,20 @@
       }
     return a;
   };
-  const vOnKeyStroke = (el, binding) => {
-    var _a, _b;
-    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
-    if (typeof binding.value === "function") {
-      onKeyStroke(keys, binding.value, {
-        target: el
-      });
-    } else {
-      const [handler, options] = binding.value;
-      onKeyStroke(keys, handler, __spreadValues$b({
-        target: el
-      }, options));
+  const vOnKeyStroke = {
+    [shared.directiveHooks.mounted](el, binding) {
+      var _a, _b;
+      const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
+      if (typeof binding.value === "function") {
+        onKeyStroke(keys, binding.value, {
+          target: el
+        });
+      } else {
+        const [handler, options] = binding.value;
+        onKeyStroke(keys, handler, __spreadValues$b({
+          target: el
+        }, options));
+      }
     }
   };
 
@@ -362,10 +364,12 @@
         onError(e);
       }
     }
+    let synced = false;
     function read(event) {
       if (!storage || event && event.key !== key)
         return;
       try {
+        synced = true;
         const rawValue = event ? event.newValue : storage.getItem(key);
         if (rawValue == null) {
           data.value = rawInit;
@@ -386,6 +390,10 @@
     if (storage) {
       shared.watchWithFilter(data, () => {
         try {
+          if (synced) {
+            synced = false;
+            return;
+          }
           if (data.value == null)
             storage.removeItem(key);
           else
@@ -422,7 +430,7 @@
       else
         mediaQuery.addListener(update);
       shared.tryOnScopeDispose(() => {
-        if ("removeEventListener" in update)
+        if ("removeEventListener" in mediaQuery)
           mediaQuery.removeEventListener("change", update);
         else
           mediaQuery.removeListener(update);
@@ -662,10 +670,12 @@
     return isHovered;
   }
 
-  const vElementHover = (el, binding) => {
-    if (typeof binding.value === "function") {
-      const isHovered = useElementHover(el);
-      vueDemi.watch(isHovered, (v) => binding.value(v));
+  const vElementHover = {
+    [shared.directiveHooks.mounted](el, binding) {
+      if (typeof binding.value === "function") {
+        const isHovered = useElementHover(el);
+        vueDemi.watch(isHovered, (v) => binding.value(v));
+      }
     }
   };
 
@@ -710,7 +720,7 @@
     const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
       cleanup();
       if (isSupported && window && el) {
-        observer = new window.ResizeObserver(callback);
+        observer = new ResizeObserver(callback);
         observer.observe(el, observerOptions);
       }
     }, { immediate: true, flush: "post" });
@@ -742,12 +752,14 @@
     };
   }
 
-  const vElementSize = (el, binding) => {
-    var _a;
-    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
-    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
-    const { width, height } = useElementSize(el, ...options);
-    vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  const vElementSize = {
+    [shared.directiveHooks.mounted](el, binding) {
+      var _a;
+      const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+      const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+      const { width, height } = useElementSize(el, ...options);
+      vueDemi.watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+    }
   };
 
   const UseElementVisibility = vueDemi.defineComponent({
@@ -765,6 +777,39 @@
     }
   });
 
+  function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+    const elementIsVisible = vueDemi.ref(false);
+    const testBounding = () => {
+      if (!window)
+        return;
+      const document = window.document;
+      if (!vueDemi.unref(element)) {
+        elementIsVisible.value = false;
+      } else {
+        const rect = vueDemi.unref(element).getBoundingClientRect();
+        elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+      }
+    };
+    shared.tryOnMounted(testBounding);
+    if (window)
+      shared.tryOnMounted(() => useEventListener(vueDemi.unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    return elementIsVisible;
+  }
+
+  const vElementVisibility = {
+    [shared.directiveHooks.mounted](el, binding) {
+      if (typeof binding.value === "function") {
+        const handler = binding.value;
+        const isVisible = useElementVisibility(el);
+        vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+      } else {
+        const [handler, options] = binding.value;
+        const isVisible = useElementVisibility(el, options);
+        vueDemi.watch(isVisible, (v) => handler(v), { immediate: true });
+      }
+    }
+  };
+
   const UseEyeDropper = vueDemi.defineComponent({
     name: "UseEyeDropper",
     props: {
@@ -918,11 +963,13 @@
     });
   }
 
-  const vInfiniteScroll = (el, binding) => {
-    if (typeof binding.value === "function")
-      useInfiniteScroll(el, binding.value);
-    else
-      useInfiniteScroll(el, ...binding.value);
+  const vInfiniteScroll = {
+    [shared.directiveHooks.mounted](el, binding) {
+      if (typeof binding.value === "function")
+        useInfiniteScroll(el, binding.value);
+      else
+        useInfiniteScroll(el, ...binding.value);
+    }
   };
 
   function useIntersectionObserver(target, callback, options = {}) {
@@ -941,7 +988,7 @@
       cleanup();
       if (!el)
         return;
-      const observer = new window.IntersectionObserver(callback, {
+      const observer = new IntersectionObserver(callback, {
         root: root2,
         rootMargin,
         threshold
@@ -963,11 +1010,13 @@
     };
   }
 
-  const vIntersectionObserver = (el, binding) => {
-    if (typeof binding.value === "function")
-      useIntersectionObserver(el, binding.value);
-    else
-      useIntersectionObserver(el, ...binding.value);
+  const vIntersectionObserver = {
+    [shared.directiveHooks.mounted](el, binding) {
+      if (typeof binding.value === "function")
+        useIntersectionObserver(el, binding.value);
+      else
+        useIntersectionObserver(el, ...binding.value);
+    }
   };
 
   const UseMouse = vueDemi.defineComponent({
@@ -1341,31 +1390,33 @@
     return a;
   };
   var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-  const vScroll = (el, binding) => {
-    if (typeof binding.value === "function") {
-      const handler = binding.value;
-      const state = useScroll(el, {
-        onScroll() {
-          handler(state);
-        },
-        onStop() {
-          handler(state);
-        }
-      });
-    } else {
-      const [handler, options] = binding.value;
-      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
-        onScroll(e) {
-          var _a;
-          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
-          handler(state);
-        },
-        onStop(e) {
-          var _a;
-          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
-          handler(state);
-        }
-      }));
+  const vScroll = {
+    [shared.directiveHooks.mounted](el, binding) {
+      if (typeof binding.value === "function") {
+        const handler = binding.value;
+        const state = useScroll(el, {
+          onScroll() {
+            handler(state);
+          },
+          onStop() {
+            handler(state);
+          }
+        });
+      } else {
+        const [handler, options] = binding.value;
+        const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+          onScroll(e) {
+            var _a;
+            (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+            handler(state);
+          },
+          onStop(e) {
+            var _a;
+            (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+            handler(state);
+          }
+        }));
+      }
     }
   };
 
@@ -1601,6 +1652,7 @@
   exports.VOnLongPress = vOnLongPress;
   exports.vElementHover = vElementHover;
   exports.vElementSize = vElementSize;
+  exports.vElementVisibility = vElementVisibility;
   exports.vInfiniteScroll = vInfiniteScroll;
   exports.vIntersectionObserver = vIntersectionObserver;
   exports.vOnClickOutside = vOnClickOutside;

package/index.iife.min.js

@@ -1 +1 @@
-(function(l){if(!l.VueDemi){var n={},i=l.Vue;if(i)if(i.version.slice(0,2)==="2."){var p=l.VueCompositionAPI;if(p){for(var $ in p)n[$]=p[$];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(i.version.slice(0,2)==="3."){for(var $ in i)n[$]=i[$];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=i,n.Vue2=void 0,n.version=i.version,n.set=function(h,y,b){return Array.isArray(h)?(h.length=Math.max(h.length,y),h.splice(y,1,b),b):(h[y]=b,b)},n.del=function(h,y){if(Array.isArray(h)){h.splice(y,1);return}delete h[y]}}else console.error("[vue-demi] Vue version "+i.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");l.VueDemi=n}})(window),function(l,n,i,p){"use strict";const $=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return i.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function h(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const y=p.isClient?window:void 0;function b(...t){let e,r,o,a;if(p.isString(t[0])?([r,o,a]=t,e=y):[e,r,o,a]=t,!e)return p.noop;let s=p.noop;const u=n.watch(()=>n.unref(e),f=>{s(),!!f&&(f.addEventListener(r,o,a),s=()=>{f.removeEventListener(r,o,a),s=p.noop})},{immediate:!0,flush:"post"}),c=()=>{u(),s()};return p.tryOnScopeDispose(c),c}function T(t,e,r={}){const{window:o=y,ignore:a}=r;if(!o)return;const s=n.ref(!0),c=[b(o,"click",v=>{const g=h(t),O=v.composedPath();!g||g===v.target||O.includes(g)||!s.value||a&&a.length>0&&a.some(_=>{const w=h(_);return w&&(v.target===w||O.includes(w))})||e(v)},{passive:!0,capture:!0}),b(o,"pointerdown",v=>{const g=h(t);s.value=!!g&&!v.composedPath().includes(g)},{passive:!0})];return()=>c.forEach(v=>v())}const A=(()=>{let t=null;return(e,r)=>{if(t){t(),t=T(e,r.value);return}t=T(e,r.value)}})(),we=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):t?()=>!0:()=>!1;function z(t,e,r={}){const{target:o=y,eventName:a="keydown",passive:s=!1}=r,u=we(t);return b(o,a,f=>{u(f)&&e(f)},s)}var be=Object.defineProperty,R=Object.getOwnPropertySymbols,Se=Object.prototype.hasOwnProperty,Ue=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?be(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,$e=(t,e)=>{for(var r in e||(e={}))Se.call(e,r)&&B(t,r,e[r]);if(R)for(var r of R(e))Ue.call(e,r)&&B(t,r,e[r]);return t};const Ce=(t,e)=>{var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:[];if(typeof e.value=="function")z(a,e.value,{target:t});else{const[s,u]=e.value;z(a,s,$e({target:t},u))}},Ee=500;function j(t,e,r){const o=n.computed(()=>i.unrefElement(t));let a=null;function s(){a!=null&&(clearTimeout(a),a=null)}function u(c){var f;s(),a=setTimeout(()=>e(c),(f=r==null?void 0:r.delay)!=null?f:Ee)}i.useEventListener(o,"pointerdown",u),i.useEventListener(o,"pointerup",s),i.useEventListener(o,"pointerleave",s)}const Ve=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return j(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),W=(t,e)=>{typeof e.value=="function"?j(t,e.value):j(t,...e.value)},Le=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:i.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),je=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(i.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),Ie=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(i.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),I=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},M="__vueuse_ssr_handlers__";I[M]=I[M]||{};const Me=I[M];function H(t,e){return Me[t]||e}function Ne(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const Te={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function Ae(t,e,r,o={}){var a;const{flush:s="pre",deep:u=!0,listenToStorageChanges:c=!0,writeDefaults:f=!0,shallow:v,window:g=y,eventFilter:O,onError:_=d=>{console.error(d)}}=o,w=n.unref(e),C=Ne(w),m=(v?n.shallowRef:n.ref)(e),P=(a=o.serializer)!=null?a:Te[C];if(!r)try{r=H("getDefaultStorage",()=>{var d;return(d=y)==null?void 0:d.localStorage})()}catch(d){_(d)}function S(d){if(!(!r||d&&d.key!==t))try{const U=d?d.newValue:r.getItem(t);U==null?(m.value=w,f&&w!==null&&r.setItem(t,P.write(w))):typeof U!="string"?m.value=U:m.value=P.read(U)}catch(U){_(U)}}return S(),g&&c&&b(g,"storage",d=>setTimeout(()=>S(d),0)),r&&p.watchWithFilter(m,()=>{try{m.value==null?r.removeItem(t):r.setItem(t,P.write(m.value))}catch(d){_(d)}},{flush:s,deep:u,eventFilter:O}),m}function ze(t,e={}){const{window:r=y}=e;let o;const a=n.ref(!1),s=()=>{!r||(o||(o=r.matchMedia(t)),a.value=o.matches)};return p.tryOnMounted(()=>{s(),!!o&&("addEventListener"in o?o.addEventListener("change",s):o.addListener(s),p.tryOnScopeDispose(()=>{"removeEventListener"in s?o.removeEventListener("change",s):o.removeListener(s)}))}),a}function Re(t){return ze("(prefers-color-scheme: dark)",t)}var Be=Object.defineProperty,F=Object.getOwnPropertySymbols,We=Object.prototype.hasOwnProperty,He=Object.prototype.propertyIsEnumerable,k=(t,e,r)=>e in t?Be(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Fe=(t,e)=>{for(var r in e||(e={}))We.call(e,r)&&k(t,r,e[r]);if(F)for(var r of F(e))He.call(e,r)&&k(t,r,e[r]);return t};function ke(t={}){const{selector:e="html",attribute:r="class",window:o=y,storage:a,storageKey:s="vueuse-color-scheme",listenToStorageChanges:u=!0,storageRef:c}=t,f=Fe({auto:"",light:"light",dark:"dark"},t.modes||{}),v=Re({window:o}),g=n.computed(()=>v.value?"dark":"light"),O=c||(s==null?n.ref("auto"):Ae(s,"auto",a,{window:o,listenToStorageChanges:u})),_=n.computed({get(){return O.value==="auto"?g.value:O.value},set(P){O.value=P}}),w=H("updateHTMLAttrs",(P,S,d)=>{const U=o==null?void 0:o.document.querySelector(P);if(!!U)if(S==="class"){const Yr=d.split(/\s/g);Object.values(f).flatMap(E=>(E||"").split(/\s/g)).filter(Boolean).forEach(E=>{Yr.includes(E)?U.classList.add(E):U.classList.remove(E)})}else U.setAttribute(S,d)});function C(P){var S;w(e,r,(S=f[P])!=null?S:P)}function m(P){t.onChanged?t.onChanged(P,C):C(P)}return n.watch(_,m,{flush:"post",immediate:!0}),p.tryOnMounted(()=>m(_.value)),_}const Ke=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=ke(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),Je=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=i.useDark(t),o=n.reactive({isDark:r,toggleDark:p.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),Ge=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(i.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),qe=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(i.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),Qe=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:i.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Ye=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(i.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),Xe=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:i.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var Ze=Object.defineProperty,xe=Object.defineProperties,De=Object.getOwnPropertyDescriptors,K=Object.getOwnPropertySymbols,et=Object.prototype.hasOwnProperty,tt=Object.prototype.propertyIsEnumerable,J=(t,e,r)=>e in t?Ze(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,rt=(t,e)=>{for(var r in e||(e={}))et.call(e,r)&&J(t,r,e[r]);if(K)for(var r of K(e))tt.call(e,r)&&J(t,r,e[r]);return t},nt=(t,e)=>xe(t,De(e));const ot=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),o=t.storageKey?i.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},i.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},a=n.reactive(i.useDraggable(r,nt(rt({},t),{initialValue:o})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${a.style}`},e.default(a))}}}),at=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function st(t){const e=n.ref(!1);return b(t,"mouseenter",()=>e.value=!0),b(t,"mouseleave",()=>e.value=!1),e}const lt=(t,e)=>{if(typeof e.value=="function"){const r=st(t);n.watch(r,o=>e.value(o))}},it=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var G=Object.getOwnPropertySymbols,ut=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable,ct=(t,e)=>{var r={};for(var o in t)ut.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&G)for(var o of G(t))e.indexOf(o)<0&&ft.call(t,o)&&(r[o]=t[o]);return r};function pt(t,e,r={}){const o=r,{window:a=y}=o,s=ct(o,["window"]);let u;const c=a&&"ResizeObserver"in a,f=()=>{u&&(u.disconnect(),u=void 0)},v=n.watch(()=>h(t),O=>{f(),c&&a&&O&&(u=new a.ResizeObserver(e),u.observe(O,s))},{immediate:!0,flush:"post"}),g=()=>{f(),v()};return p.tryOnScopeDispose(g),{isSupported:c,stop:g}}function dt(t,e={width:0,height:0},r={}){const o=n.ref(e.width),a=n.ref(e.height);return pt(t,([s])=>{o.value=s.contentRect.width,a.value=s.contentRect.height},r),n.watch(()=>h(t),s=>{o.value=s?e.width:0,a.value=s?e.height:0}),{width:o,height:a}}const vt=(t,e)=>{var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:s,height:u}=dt(t,...a);n.watch([s,u],([c,f])=>o({width:c,height:f}))},gt=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:i.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),_t=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(i.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),Ot=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Pt=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(i.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),ht=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(i.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function N(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=p.noop,onScroll:s=p.noop,offset:u={left:0,right:0,top:0,bottom:0},eventListenerOptions:c={capture:!1,passive:!0}}=e,f=n.ref(0),v=n.ref(0),g=n.ref(!1),O=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),_=n.reactive({left:!1,right:!1,top:!1,bottom:!1});if(t){const w=p.useDebounceFn(m=>{g.value=!1,_.left=!1,_.right=!1,_.top=!1,_.bottom=!1,a(m)},r+o),C=m=>{const P=m.target===document?m.target.documentElement:m.target,S=P.scrollLeft;_.left=S<f.value,_.right=S>f.value,O.left=S<=0+(u.left||0),O.right=S+P.clientWidth>=P.scrollWidth-(u.right||0),f.value=S;const d=P.scrollTop;_.top=d<v.value,_.bottom=d>v.value,O.top=d<=0+(u.top||0),O.bottom=d+P.clientHeight>=P.scrollHeight-(u.bottom||0),v.value=d,g.value=!0,w(m),s(m)};b(t,"scroll",r?p.useThrottleFn(C,r):C,c)}return{x:f,y:v,isScrolling:g,arrivedState:O,directions:_}}var yt=Object.defineProperty,mt=Object.defineProperties,wt=Object.getOwnPropertyDescriptors,q=Object.getOwnPropertySymbols,bt=Object.prototype.hasOwnProperty,St=Object.prototype.propertyIsEnumerable,Q=(t,e,r)=>e in t?yt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Y=(t,e)=>{for(var r in e||(e={}))bt.call(e,r)&&Q(t,r,e[r]);if(q)for(var r of q(e))St.call(e,r)&&Q(t,r,e[r]);return t},Ut=(t,e)=>mt(t,wt(e));function X(t,e,r={}){var o;const a=n.reactive(N(t,Ut(Y({},r),{offset:Y({bottom:(o=r.distance)!=null?o:0},r.offset)})));n.watch(()=>a.arrivedState.bottom,s=>{s&&e(a)})}const $t=(t,e)=>{typeof e.value=="function"?X(t,e.value):X(t,...e.value)};function Z(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:s=.1,window:u=y}=r,c=u&&"IntersectionObserver"in u;let f=p.noop;const v=c?n.watch(()=>({el:h(t),root:h(o)}),({el:O,root:_})=>{if(f(),!O)return;const w=new u.IntersectionObserver(e,{root:_,rootMargin:a,threshold:s});w.observe(O),f=()=>{w.disconnect(),f=p.noop}},{immediate:!0,flush:"post"}):p.noop,g=()=>{f(),v()};return p.tryOnScopeDispose(g),{isSupported:c,stop:g}}const Ct=(t,e)=>{typeof e.value=="function"?Z(t,e.value):Z(t,...e.value)},Et=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(i.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),Vt=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var Lt=Object.defineProperty,jt=Object.defineProperties,It=Object.getOwnPropertyDescriptors,x=Object.getOwnPropertySymbols,Mt=Object.prototype.hasOwnProperty,Nt=Object.prototype.propertyIsEnumerable,D=(t,e,r)=>e in t?Lt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Tt=(t,e)=>{for(var r in e||(e={}))Mt.call(e,r)&&D(t,r,e[r]);if(x)for(var r of x(e))Nt.call(e,r)&&D(t,r,e[r]);return t},At=(t,e)=>jt(t,It(e));const zt=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useMousePressed(At(Tt({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Rt=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(i.useNetwork());return()=>{if(e.default)return e.default(r)}}});var Bt=Object.defineProperty,Wt=Object.defineProperties,Ht=Object.getOwnPropertyDescriptors,ee=Object.getOwnPropertySymbols,Ft=Object.prototype.hasOwnProperty,kt=Object.prototype.propertyIsEnumerable,te=(t,e,r)=>e in t?Bt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Kt=(t,e)=>{for(var r in e||(e={}))Ft.call(e,r)&&te(t,r,e[r]);if(ee)for(var r of ee(e))kt.call(e,r)&&te(t,r,e[r]);return t},Jt=(t,e)=>Wt(t,Ht(e));const Gt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(i.useNow(Jt(Kt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var qt=Object.defineProperty,Qt=Object.defineProperties,Yt=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertySymbols,Xt=Object.prototype.hasOwnProperty,Zt=Object.prototype.propertyIsEnumerable,ne=(t,e,r)=>e in t?qt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,xt=(t,e)=>{for(var r in e||(e={}))Xt.call(e,r)&&ne(t,r,e[r]);if(re)for(var r of re(e))Zt.call(e,r)&&ne(t,r,e[r]);return t},Dt=(t,e)=>Qt(t,Yt(e));const er=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(i.useOffsetPagination(Dt(xt({},t),{onPageChange(...a){var s;(s=t.onPageChange)==null||s.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var s;(s=t.onPageSizeChange)==null||s.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var s;(s=t.onPageCountChange)==null||s.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),tr=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:i.useOnline()});return()=>{if(e.default)return e.default(r)}}}),rr=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:i.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var nr=Object.defineProperty,or=Object.defineProperties,ar=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertySymbols,sr=Object.prototype.hasOwnProperty,lr=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?nr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ir=(t,e)=>{for(var r in e||(e={}))sr.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))lr.call(e,r)&&ae(t,r,e[r]);return t},ur=(t,e)=>or(t,ar(e));const fr=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(i.usePointer(ur(ir({},t),{target:t.target==="self"?r:y})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),cr=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:i.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),pr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:i.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),dr=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:i.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function V(t,e,{window:r=y}={}){const o=n.ref(""),a=n.computed(()=>{var s;return h(e)||((s=r==null?void 0:r.document)==null?void 0:s.documentElement)});return n.watch([a,()=>n.unref(t)],([s,u])=>{s&&r&&(o.value=r.getComputedStyle(s).getPropertyValue(u))},{immediate:!0}),n.watch(o,s=>{var u;((u=a.value)==null?void 0:u.style)&&a.value.style.setProperty(n.unref(t),s)}),o}const se="--vueuse-safe-area-top",le="--vueuse-safe-area-right",ie="--vueuse-safe-area-bottom",ue="--vueuse-safe-area-left";function vr(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(p.isClient){const s=V(se),u=V(le),c=V(ie),f=V(ue);s.value="env(safe-area-inset-top, 0px)",u.value="env(safe-area-inset-right, 0px)",c.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),b("resize",p.useDebounceFn(a))}function a(){t.value=L(se),e.value=L(le),r.value=L(ie),o.value=L(ue)}return{top:t,right:e,bottom:r,left:o,update:a}}function L(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const gr=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:s}=vr();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?s.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var _r=Object.defineProperty,Or=Object.defineProperties,Pr=Object.getOwnPropertyDescriptors,fe=Object.getOwnPropertySymbols,hr=Object.prototype.hasOwnProperty,yr=Object.prototype.propertyIsEnumerable,ce=(t,e,r)=>e in t?_r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,mr=(t,e)=>{for(var r in e||(e={}))hr.call(e,r)&&ce(t,r,e[r]);if(fe)for(var r of fe(e))yr.call(e,r)&&ce(t,r,e[r]);return t},wr=(t,e)=>Or(t,Pr(e));const br=(t,e)=>{if(typeof e.value=="function"){const r=e.value,o=N(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=N(t,wr(mr({},o),{onScroll(s){var u;(u=o.onScroll)==null||u.call(o,s),r(a)},onStop(s){var u;(u=o.onStop)==null||u.call(o,s),r(a)}}))}};var pe,de;function Sr(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}const ve=p.isClient&&(window==null?void 0:window.navigator)&&((pe=window==null?void 0:window.navigator)==null?void 0:pe.platform)&&/iP(ad|hone|od)/.test((de=window==null?void 0:window.navigator)==null?void 0:de.platform);function Ur(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(()=>n.unref(t),c=>{if(c){const f=c;a=f.style.overflow,r.value&&(f.style.overflow="hidden")}},{immediate:!0});const s=()=>{const c=n.unref(t);!c||r.value||(ve&&(o=b(document,"touchmove",Sr,{passive:!1})),c.style.overflow="hidden",r.value=!0)},u=()=>{const c=n.unref(t);!c||!r.value||(ve&&(o==null||o()),c.style.overflow=a,r.value=!1)};return n.computed({get(){return r.value},set(c){c?s():u()}})}const $r=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Ur(r,o.value);n.watch(e,s=>a.value=s)}})();var Cr=Object.defineProperty,Er=Object.defineProperties,Vr=Object.getOwnPropertyDescriptors,ge=Object.getOwnPropertySymbols,Lr=Object.prototype.hasOwnProperty,jr=Object.prototype.propertyIsEnumerable,_e=(t,e,r)=>e in t?Cr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ir=(t,e)=>{for(var r in e||(e={}))Lr.call(e,r)&&_e(t,r,e[r]);if(ge)for(var r of ge(e))jr.call(e,r)&&_e(t,r,e[r]);return t},Mr=(t,e)=>Er(t,Vr(e));const Nr=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),o=n.reactive(i.useTimeAgo(r,Mr(Ir({},t),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var Tr=Object.defineProperty,Ar=Object.defineProperties,zr=Object.getOwnPropertyDescriptors,Oe=Object.getOwnPropertySymbols,Rr=Object.prototype.hasOwnProperty,Br=Object.prototype.propertyIsEnumerable,Pe=(t,e,r)=>e in t?Tr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Wr=(t,e)=>{for(var r in e||(e={}))Rr.call(e,r)&&Pe(t,r,e[r]);if(Oe)for(var r of Oe(e))Br.call(e,r)&&Pe(t,r,e[r]);return t},Hr=(t,e)=>Ar(t,zr(e));const Fr=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(i.useTimestamp(Hr(Wr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var kr=Object.defineProperty,he=Object.getOwnPropertySymbols,Kr=Object.prototype.hasOwnProperty,Jr=Object.prototype.propertyIsEnumerable,ye=(t,e,r)=>e in t?kr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,me=(t,e)=>{for(var r in e||(e={}))Kr.call(e,r)&&ye(t,r,e[r]);if(he)for(var r of he(e))Jr.call(e,r)&&ye(t,r,e[r]);return t};const Gr=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:s}=i.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",me({},a),[n.h("div",me({},s.value),o.value.map(u=>n.h("div",{style:{overFlow:"hidden",height:u.height}},e.default?e.default(u):"Please set content!")))])}}),qr=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:i.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Qr=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(i.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});l.OnClickOutside=$,l.OnLongPress=Ve,l.UseActiveElement=Le,l.UseBattery=je,l.UseBrowserLocation=Ie,l.UseColorMode=Ke,l.UseDark=Je,l.UseDeviceMotion=Ge,l.UseDeviceOrientation=qe,l.UseDevicePixelRatio=Qe,l.UseDevicesList=Ye,l.UseDocumentVisibility=Xe,l.UseDraggable=ot,l.UseElementBounding=at,l.UseElementSize=it,l.UseElementVisibility=gt,l.UseEyeDropper=_t,l.UseFullscreen=Ot,l.UseGeolocation=Pt,l.UseIdle=ht,l.UseMouse=Et,l.UseMouseInElement=Vt,l.UseMousePressed=zt,l.UseNetwork=Rt,l.UseNow=Gt,l.UseOffsetPagination=er,l.UseOnline=tr,l.UsePageLeave=rr,l.UsePointer=fr,l.UsePreferredColorScheme=cr,l.UsePreferredDark=pr,l.UsePreferredLanguages=dr,l.UseScreenSafeArea=gr,l.UseTimeAgo=Nr,l.UseTimestamp=Fr,l.UseVirtualList=Gr,l.UseWindowFocus=qr,l.UseWindowSize=Qr,l.VOnClickOutside=A,l.VOnLongPress=W,l.vElementHover=lt,l.vElementSize=vt,l.vInfiniteScroll=$t,l.vIntersectionObserver=Ct,l.vOnClickOutside=A,l.vOnKeyStroke=Ce,l.vOnLongPress=W,l.vScroll=br,l.vScrollLock=$r,Object.defineProperty(l,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);
+(function(l){if(!l.VueDemi){var n={},i=l.Vue;if(i)if(i.version.slice(0,2)==="2."){var c=l.VueCompositionAPI;if(c){for(var E in c)n[E]=c[E];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.")}else if(i.version.slice(0,2)==="3."){for(var E in i)n[E]=i[E];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=i,n.Vue2=void 0,n.version=i.version,n.set=function(m,P,y){return Array.isArray(m)?(m.length=Math.max(m.length,P),m.splice(P,1,y),y):(m[P]=y,y)},n.del=function(m,P){if(Array.isArray(m)){m.splice(P,1);return}delete m[P]}}else console.error("[vue-demi] Vue version "+i.version+" is unsupported.");else console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`.");l.VueDemi=n}})(window),function(l,n,i,c){"use strict";const E=n.defineComponent({name:"OnClickOutside",props:["as"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return i.onClickOutside(o,a=>{r("trigger",a)}),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}});function m(t){var e;const r=n.unref(t);return(e=r==null?void 0:r.$el)!=null?e:r}const P=c.isClient?window:void 0;function y(...t){let e,r,o,a;if(c.isString(t[0])?([r,o,a]=t,e=P):[e,r,o,a]=t,!e)return c.noop;let s=c.noop;const u=n.watch(()=>m(e),f=>{s(),!!f&&(f.addEventListener(r,o,a),s=()=>{f.removeEventListener(r,o,a),s=c.noop})},{immediate:!0,flush:"post"}),p=()=>{u(),s()};return c.tryOnScopeDispose(p),p}function A(t,e,r={}){const{window:o=P,ignore:a,capture:s=!0}=r;if(!o)return;const u=n.ref(!0),f=[y(o,"click",v=>{const d=m(t),g=v.composedPath();!d||d===v.target||g.includes(d)||!u.value||a&&a.length>0&&a.some(S=>{const U=m(S);return U&&(v.target===U||g.includes(U))})||e(v)},{passive:!0,capture:s}),y(o,"pointerdown",v=>{const d=m(t);u.value=!!d&&!v.composedPath().includes(d)},{passive:!0})];return()=>f.forEach(v=>v())}const H=(()=>{let t=null;return(e,r)=>{if(t){t(),t=A(e,r.value);return}t=A(e,r.value)}})(),Se=t=>typeof t=="function"?t:typeof t=="string"?e=>e.key===t:Array.isArray(t)?e=>t.includes(e.key):t?()=>!0:()=>!1;function z(t,e,r={}){const{target:o=P,eventName:a="keydown",passive:s=!1}=r,u=Se(t);return y(o,a,f=>{u(f)&&e(f)},s)}var Ue=Object.defineProperty,R=Object.getOwnPropertySymbols,$e=Object.prototype.hasOwnProperty,Ce=Object.prototype.propertyIsEnumerable,B=(t,e,r)=>e in t?Ue(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ee=(t,e)=>{for(var r in e||(e={}))$e.call(e,r)&&B(t,r,e[r]);if(R)for(var r of R(e))Ce.call(e,r)&&B(t,r,e[r]);return t};const Ve={[c.directiveHooks.mounted](t,e){var r,o;const a=(o=(r=e.arg)==null?void 0:r.split(","))!=null?o:[];if(typeof e.value=="function")z(a,e.value,{target:t});else{const[s,u]=e.value;z(a,s,Ee({target:t},u))}}},Le=500;function I(t,e,r){const o=n.computed(()=>i.unrefElement(t));let a=null;function s(){a!=null&&(clearTimeout(a),a=null)}function u(p){var f;s(),a=setTimeout(()=>e(p),(f=r==null?void 0:r.delay)!=null?f:Le)}i.useEventListener(o,"pointerdown",u),i.useEventListener(o,"pointerup",s),i.useEventListener(o,"pointerleave",s)}const je=n.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(t,{slots:e,emit:r}){const o=n.ref();return I(o,a=>{r("trigger",a)},t.options),()=>{if(e.default)return n.h(t.as||"div",{ref:o},e.default())}}}),W=(t,e)=>{typeof e.value=="function"?I(t,e.value):I(t,...e.value)},Ie=n.defineComponent({name:"UseActiveElement",setup(t,{slots:e}){const r=n.reactive({element:i.useActiveElement()});return()=>{if(e.default)return e.default(r)}}}),Me=n.defineComponent({name:"UseBattery",setup(t,{slots:e}){const r=n.reactive(i.useBattery(t));return()=>{if(e.default)return e.default(r)}}}),Ne=n.defineComponent({name:"UseBrowserLocation",setup(t,{slots:e}){const r=n.reactive(i.useBrowserLocation());return()=>{if(e.default)return e.default(r)}}}),M=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},N="__vueuse_ssr_handlers__";M[N]=M[N]||{};const Te=M[N];function k(t,e){return Te[t]||e}function Ae(t){return t==null?"any":t instanceof Set?"set":t instanceof Map?"map":typeof t=="boolean"?"boolean":typeof t=="string"?"string":typeof t=="object"||Array.isArray(t)?"object":Number.isNaN(t)?"any":"number"}const He={boolean:{read:t=>t==="true",write:t=>String(t)},object:{read:t=>JSON.parse(t),write:t=>JSON.stringify(t)},number:{read:t=>Number.parseFloat(t),write:t=>String(t)},any:{read:t=>t,write:t=>String(t)},string:{read:t=>t,write:t=>String(t)},map:{read:t=>new Map(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))},set:{read:t=>new Set(JSON.parse(t)),write:t=>JSON.stringify(Array.from(t.entries()))}};function ze(t,e,r,o={}){var a;const{flush:s="pre",deep:u=!0,listenToStorageChanges:p=!0,writeDefaults:f=!0,shallow:b,window:v=P,eventFilter:d,onError:g=O=>{console.error(O)}}=o,S=n.unref(e),U=Ae(S),h=(b?n.shallowRef:n.ref)(e),_=(a=o.serializer)!=null?a:He[U];if(!r)try{r=k("getDefaultStorage",()=>{var O;return(O=P)==null?void 0:O.localStorage})()}catch(O){g(O)}let w=!1;function $(O){if(!(!r||O&&O.key!==t))try{w=!0;const C=O?O.newValue:r.getItem(t);C==null?(h.value=S,f&&S!==null&&r.setItem(t,_.write(S))):typeof C!="string"?h.value=C:h.value=_.read(C)}catch(C){g(C)}}return $(),v&&p&&y(v,"storage",O=>setTimeout(()=>$(O),0)),r&&c.watchWithFilter(h,()=>{try{if(w){w=!1;return}h.value==null?r.removeItem(t):r.setItem(t,_.write(h.value))}catch(O){g(O)}},{flush:s,deep:u,eventFilter:d}),h}function Re(t,e={}){const{window:r=P}=e;let o;const a=n.ref(!1),s=()=>{!r||(o||(o=r.matchMedia(t)),a.value=o.matches)};return c.tryOnMounted(()=>{s(),!!o&&("addEventListener"in o?o.addEventListener("change",s):o.addListener(s),c.tryOnScopeDispose(()=>{"removeEventListener"in o?o.removeEventListener("change",s):o.removeListener(s)}))}),a}function Be(t){return Re("(prefers-color-scheme: dark)",t)}var We=Object.defineProperty,F=Object.getOwnPropertySymbols,ke=Object.prototype.hasOwnProperty,Fe=Object.prototype.propertyIsEnumerable,K=(t,e,r)=>e in t?We(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Ke=(t,e)=>{for(var r in e||(e={}))ke.call(e,r)&&K(t,r,e[r]);if(F)for(var r of F(e))Fe.call(e,r)&&K(t,r,e[r]);return t};function Je(t={}){const{selector:e="html",attribute:r="class",window:o=P,storage:a,storageKey:s="vueuse-color-scheme",listenToStorageChanges:u=!0,storageRef:p}=t,f=Ke({auto:"",light:"light",dark:"dark"},t.modes||{}),b=Be({window:o}),v=n.computed(()=>b.value?"dark":"light"),d=p||(s==null?n.ref("auto"):ze(s,"auto",a,{window:o,listenToStorageChanges:u})),g=n.computed({get(){return d.value==="auto"?v.value:d.value},set(_){d.value=_}}),S=k("updateHTMLAttrs",(_,w,$)=>{const O=o==null?void 0:o.document.querySelector(_);if(!!O)if(w==="class"){const C=$.split(/\s/g);Object.values(f).flatMap(V=>(V||"").split(/\s/g)).filter(Boolean).forEach(V=>{C.includes(V)?O.classList.add(V):O.classList.remove(V)})}else O.setAttribute(w,$)});function U(_){var w;S(e,r,(w=f[_])!=null?w:_)}function h(_){t.onChanged?t.onChanged(_,U):U(_)}return n.watch(g,h,{flush:"post",immediate:!0}),c.tryOnMounted(()=>h(g.value)),g}const Ge=n.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=Je(t),o=n.reactive({mode:r});return()=>{if(e.default)return e.default(o)}}}),qe=n.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(t,{slots:e}){const r=i.useDark(t),o=n.reactive({isDark:r,toggleDark:c.useToggle(r)});return()=>{if(e.default)return e.default(o)}}}),Qe=n.defineComponent({name:"UseDeviceMotion",setup(t,{slots:e}){const r=n.reactive(i.useDeviceMotion());return()=>{if(e.default)return e.default(r)}}}),Ye=n.defineComponent({name:"UseDeviceOrientation",setup(t,{slots:e}){const r=n.reactive(i.useDeviceOrientation());return()=>{if(e.default)return e.default(r)}}}),Xe=n.defineComponent({name:"UseDevicePixelRatio",setup(t,{slots:e}){const r=n.reactive({pixelRatio:i.useDevicePixelRatio()});return()=>{if(e.default)return e.default(r)}}}),Ze=n.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(t,{slots:e}){const r=n.reactive(i.useDevicesList(t));return()=>{if(e.default)return e.default(r)}}}),xe=n.defineComponent({name:"UseDocumentVisibility",setup(t,{slots:e}){const r=n.reactive({visibility:i.useDocumentVisibility()});return()=>{if(e.default)return e.default(r)}}});var De=Object.defineProperty,et=Object.defineProperties,tt=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertySymbols,rt=Object.prototype.hasOwnProperty,nt=Object.prototype.propertyIsEnumerable,G=(t,e,r)=>e in t?De(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ot=(t,e)=>{for(var r in e||(e={}))rt.call(e,r)&&G(t,r,e[r]);if(J)for(var r of J(e))nt.call(e,r)&&G(t,r,e[r]);return t},at=(t,e)=>et(t,tt(e));const st=n.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","pointerTypes","as"],setup(t,{slots:e}){const r=n.ref(),o=t.storageKey?i.useStorage(t.storageKey,n.unref(t.initialValue)||{x:0,y:0},i.isClient?t.storageType==="session"?sessionStorage:localStorage:void 0):t.initialValue||{x:0,y:0},a=n.reactive(i.useDraggable(r,at(ot({},t),{initialValue:o})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r,style:`touch-action:none;${a.style}`},e.default(a))}}}),lt=n.defineComponent({name:"UseElementBounding",props:["box","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useElementBounding(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function it(t){const e=n.ref(!1);return y(t,"mouseenter",()=>e.value=!0),y(t,"mouseleave",()=>e.value=!1),e}const ut={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=it(t);n.watch(r,o=>e.value(o))}}},ct=n.defineComponent({name:"UseElementSize",props:["width","height","box"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useElementSize(r,{width:t.width,height:t.height},{box:t.box}));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var q=Object.getOwnPropertySymbols,ft=Object.prototype.hasOwnProperty,pt=Object.prototype.propertyIsEnumerable,dt=(t,e)=>{var r={};for(var o in t)ft.call(t,o)&&e.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&q)for(var o of q(t))e.indexOf(o)<0&&pt.call(t,o)&&(r[o]=t[o]);return r};function vt(t,e,r={}){const o=r,{window:a=P}=o,s=dt(o,["window"]);let u;const p=a&&"ResizeObserver"in a,f=()=>{u&&(u.disconnect(),u=void 0)},b=n.watch(()=>m(t),d=>{f(),p&&a&&d&&(u=new ResizeObserver(e),u.observe(d,s))},{immediate:!0,flush:"post"}),v=()=>{f(),b()};return c.tryOnScopeDispose(v),{isSupported:p,stop:v}}function gt(t,e={width:0,height:0},r={}){const o=n.ref(e.width),a=n.ref(e.height);return vt(t,([s])=>{o.value=s.contentRect.width,a.value=s.contentRect.height},r),n.watch(()=>m(t),s=>{o.value=s?e.width:0,a.value=s?e.height:0}),{width:o,height:a}}const _t={[c.directiveHooks.mounted](t,e){var r;const o=typeof e.value=="function"?e.value:(r=e.value)==null?void 0:r[0],a=typeof e.value=="function"?[]:e.value.slice(1),{width:s,height:u}=gt(t,...a);n.watch([s,u],([p,f])=>o({width:p,height:f}))}},Ot=n.defineComponent({name:"UseElementVisibility",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive({isVisible:i.useElementVisibility(r)});return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});function Q(t,{window:e=P,scrollTarget:r}={}){const o=n.ref(!1),a=()=>{if(!e)return;const s=e.document;if(!n.unref(t))o.value=!1;else{const u=n.unref(t).getBoundingClientRect();o.value=u.top<=(e.innerHeight||s.documentElement.clientHeight)&&u.left<=(e.innerWidth||s.documentElement.clientWidth)&&u.bottom>=0&&u.right>=0}};return c.tryOnMounted(a),e&&c.tryOnMounted(()=>y(n.unref(r)||e,"scroll",a,{capture:!1,passive:!0})),o}const mt={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=Q(t);n.watch(o,a=>r(a),{immediate:!0})}else{const[r,o]=e.value,a=Q(t,o);n.watch(a,s=>r(s),{immediate:!0})}}},Pt=n.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(t,{slots:e}){const r=n.reactive(i.useEyeDropper());return()=>{if(e.default)return e.default(r)}}}),ht=n.defineComponent({name:"UseFullscreen",props:["as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useFullscreen(r));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),yt=n.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(t,{slots:e}){const r=n.reactive(i.useGeolocation(t));return()=>{if(e.default)return e.default(r)}}}),wt=n.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(t,{slots:e}){const r=n.reactive(i.useIdle(t.timeout,t));return()=>{if(e.default)return e.default(r)}}});function T(t,e={}){const{throttle:r=0,idle:o=200,onStop:a=c.noop,onScroll:s=c.noop,offset:u={left:0,right:0,top:0,bottom:0},eventListenerOptions:p={capture:!1,passive:!0}}=e,f=n.ref(0),b=n.ref(0),v=n.ref(!1),d=n.reactive({left:!0,right:!1,top:!0,bottom:!1}),g=n.reactive({left:!1,right:!1,top:!1,bottom:!1});if(t){const S=c.useDebounceFn(h=>{v.value=!1,g.left=!1,g.right=!1,g.top=!1,g.bottom=!1,a(h)},r+o),U=h=>{const _=h.target===document?h.target.documentElement:h.target,w=_.scrollLeft;g.left=w<f.value,g.right=w>f.value,d.left=w<=0+(u.left||0),d.right=w+_.clientWidth>=_.scrollWidth-(u.right||0),f.value=w;const $=_.scrollTop;g.top=$<b.value,g.bottom=$>b.value,d.top=$<=0+(u.top||0),d.bottom=$+_.clientHeight>=_.scrollHeight-(u.bottom||0),b.value=$,v.value=!0,S(h),s(h)};y(t,"scroll",r?c.useThrottleFn(U,r):U,p)}return{x:f,y:b,isScrolling:v,arrivedState:d,directions:g}}var bt=Object.defineProperty,St=Object.defineProperties,Ut=Object.getOwnPropertyDescriptors,Y=Object.getOwnPropertySymbols,$t=Object.prototype.hasOwnProperty,Ct=Object.prototype.propertyIsEnumerable,X=(t,e,r)=>e in t?bt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Z=(t,e)=>{for(var r in e||(e={}))$t.call(e,r)&&X(t,r,e[r]);if(Y)for(var r of Y(e))Ct.call(e,r)&&X(t,r,e[r]);return t},Et=(t,e)=>St(t,Ut(e));function x(t,e,r={}){var o;const a=n.reactive(T(t,Et(Z({},r),{offset:Z({bottom:(o=r.distance)!=null?o:0},r.offset)})));n.watch(()=>a.arrivedState.bottom,s=>{s&&e(a)})}const Vt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?x(t,e.value):x(t,...e.value)}};function D(t,e,r={}){const{root:o,rootMargin:a="0px",threshold:s=.1,window:u=P}=r,p=u&&"IntersectionObserver"in u;let f=c.noop;const b=p?n.watch(()=>({el:m(t),root:m(o)}),({el:d,root:g})=>{if(f(),!d)return;const S=new IntersectionObserver(e,{root:g,rootMargin:a,threshold:s});S.observe(d),f=()=>{S.disconnect(),f=c.noop}},{immediate:!0,flush:"post"}):c.noop,v=()=>{f(),b()};return c.tryOnScopeDispose(v),{isSupported:p,stop:v}}const Lt={[c.directiveHooks.mounted](t,e){typeof e.value=="function"?D(t,e.value):D(t,...e.value)}},jt=n.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(t,{slots:e}){const r=n.reactive(i.useMouse(t));return()=>{if(e.default)return e.default(r)}}}),It=n.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useMouseInElement(r,t));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}});var Mt=Object.defineProperty,Nt=Object.defineProperties,Tt=Object.getOwnPropertyDescriptors,ee=Object.getOwnPropertySymbols,At=Object.prototype.hasOwnProperty,Ht=Object.prototype.propertyIsEnumerable,te=(t,e,r)=>e in t?Mt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,zt=(t,e)=>{for(var r in e||(e={}))At.call(e,r)&&te(t,r,e[r]);if(ee)for(var r of ee(e))Ht.call(e,r)&&te(t,r,e[r]);return t},Rt=(t,e)=>Nt(t,Tt(e));const Bt=n.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(t,{slots:e}){const r=n.ref(),o=n.reactive(i.useMousePressed(Rt(zt({},t),{target:r})));return()=>{if(e.default)return n.h(t.as||"div",{ref:r},e.default(o))}}}),Wt=n.defineComponent({name:"UseNetwork",setup(t,{slots:e}){const r=n.reactive(i.useNetwork());return()=>{if(e.default)return e.default(r)}}});var kt=Object.defineProperty,Ft=Object.defineProperties,Kt=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertySymbols,Jt=Object.prototype.hasOwnProperty,Gt=Object.prototype.propertyIsEnumerable,ne=(t,e,r)=>e in t?kt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,qt=(t,e)=>{for(var r in e||(e={}))Jt.call(e,r)&&ne(t,r,e[r]);if(re)for(var r of re(e))Gt.call(e,r)&&ne(t,r,e[r]);return t},Qt=(t,e)=>Ft(t,Kt(e));const Yt=n.defineComponent({name:"UseNow",props:["interval"],setup(t,{slots:e}){const r=n.reactive(i.useNow(Qt(qt({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Xt=Object.defineProperty,Zt=Object.defineProperties,xt=Object.getOwnPropertyDescriptors,oe=Object.getOwnPropertySymbols,Dt=Object.prototype.hasOwnProperty,er=Object.prototype.propertyIsEnumerable,ae=(t,e,r)=>e in t?Xt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,tr=(t,e)=>{for(var r in e||(e={}))Dt.call(e,r)&&ae(t,r,e[r]);if(oe)for(var r of oe(e))er.call(e,r)&&ae(t,r,e[r]);return t},rr=(t,e)=>Zt(t,xt(e));const nr=n.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(t,{slots:e,emit:r}){const o=n.reactive(i.useOffsetPagination(rr(tr({},t),{onPageChange(...a){var s;(s=t.onPageChange)==null||s.call(t,...a),r("page-change",...a)},onPageSizeChange(...a){var s;(s=t.onPageSizeChange)==null||s.call(t,...a),r("page-size-change",...a)},onPageCountChange(...a){var s;(s=t.onPageCountChange)==null||s.call(t,...a),r("page-count-change",...a)}})));return()=>{if(e.default)return e.default(o)}}}),or=n.defineComponent({name:"UseOnline",setup(t,{slots:e}){const r=n.reactive({isOnline:i.useOnline()});return()=>{if(e.default)return e.default(r)}}}),ar=n.defineComponent({name:"UsePageLeave",setup(t,{slots:e}){const r=n.reactive({isLeft:i.usePageLeave()});return()=>{if(e.default)return e.default(r)}}});var sr=Object.defineProperty,lr=Object.defineProperties,ir=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,ur=Object.prototype.hasOwnProperty,cr=Object.prototype.propertyIsEnumerable,le=(t,e,r)=>e in t?sr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,fr=(t,e)=>{for(var r in e||(e={}))ur.call(e,r)&&le(t,r,e[r]);if(se)for(var r of se(e))cr.call(e,r)&&le(t,r,e[r]);return t},pr=(t,e)=>lr(t,ir(e));const dr=n.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(t,{slots:e}){const r=n.ref(null),o=n.reactive(i.usePointer(pr(fr({},t),{target:t.target==="self"?r:P})));return()=>{if(e.default)return e.default(o,{ref:r})}}}),vr=n.defineComponent({name:"UsePreferredColorScheme",setup(t,{slots:e}){const r=n.reactive({colorScheme:i.usePreferredColorScheme()});return()=>{if(e.default)return e.default(r)}}}),gr=n.defineComponent({name:"UsePreferredDark",setup(t,{slots:e}){const r=n.reactive({prefersDark:i.usePreferredDark()});return()=>{if(e.default)return e.default(r)}}}),_r=n.defineComponent({name:"UsePreferredLanguages",setup(t,{slots:e}){const r=n.reactive({languages:i.usePreferredLanguages()});return()=>{if(e.default)return e.default(r)}}});function L(t,e,{window:r=P}={}){const o=n.ref(""),a=n.computed(()=>{var s;return m(e)||((s=r==null?void 0:r.document)==null?void 0:s.documentElement)});return n.watch([a,()=>n.unref(t)],([s,u])=>{s&&r&&(o.value=r.getComputedStyle(s).getPropertyValue(u))},{immediate:!0}),n.watch(o,s=>{var u;((u=a.value)==null?void 0:u.style)&&a.value.style.setProperty(n.unref(t),s)}),o}const ie="--vueuse-safe-area-top",ue="--vueuse-safe-area-right",ce="--vueuse-safe-area-bottom",fe="--vueuse-safe-area-left";function Or(){const t=n.ref(""),e=n.ref(""),r=n.ref(""),o=n.ref("");if(c.isClient){const s=L(ie),u=L(ue),p=L(ce),f=L(fe);s.value="env(safe-area-inset-top, 0px)",u.value="env(safe-area-inset-right, 0px)",p.value="env(safe-area-inset-bottom, 0px)",f.value="env(safe-area-inset-left, 0px)",a(),y("resize",c.useDebounceFn(a))}function a(){t.value=j(ie),e.value=j(ue),r.value=j(ce),o.value=j(fe)}return{top:t,right:e,bottom:r,left:o,update:a}}function j(t){return getComputedStyle(document.documentElement).getPropertyValue(t)}const mr=n.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(t,{slots:e}){const{top:r,right:o,bottom:a,left:s}=Or();return()=>{if(e.default)return n.h("div",{style:{paddingTop:t.top?r.value:"",paddingRight:t.right?o.value:"",paddingBottom:t.bottom?a.value:"",paddingLeft:t.left?s.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},e.default())}}});var Pr=Object.defineProperty,hr=Object.defineProperties,yr=Object.getOwnPropertyDescriptors,pe=Object.getOwnPropertySymbols,wr=Object.prototype.hasOwnProperty,br=Object.prototype.propertyIsEnumerable,de=(t,e,r)=>e in t?Pr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Sr=(t,e)=>{for(var r in e||(e={}))wr.call(e,r)&&de(t,r,e[r]);if(pe)for(var r of pe(e))br.call(e,r)&&de(t,r,e[r]);return t},Ur=(t,e)=>hr(t,yr(e));const $r={[c.directiveHooks.mounted](t,e){if(typeof e.value=="function"){const r=e.value,o=T(t,{onScroll(){r(o)},onStop(){r(o)}})}else{const[r,o]=e.value,a=T(t,Ur(Sr({},o),{onScroll(s){var u;(u=o.onScroll)==null||u.call(o,s),r(a)},onStop(s){var u;(u=o.onStop)==null||u.call(o,s),r(a)}}))}}};var ve,ge;function Cr(t){const e=t||window.event;return e.touches.length>1?!0:(e.preventDefault&&e.preventDefault(),!1)}const _e=c.isClient&&(window==null?void 0:window.navigator)&&((ve=window==null?void 0:window.navigator)==null?void 0:ve.platform)&&/iP(ad|hone|od)/.test((ge=window==null?void 0:window.navigator)==null?void 0:ge.platform);function Er(t,e=!1){const r=n.ref(e);let o=null,a;n.watch(()=>n.unref(t),p=>{if(p){const f=p;a=f.style.overflow,r.value&&(f.style.overflow="hidden")}},{immediate:!0});const s=()=>{const p=n.unref(t);!p||r.value||(_e&&(o=y(document,"touchmove",Cr,{passive:!1})),p.style.overflow="hidden",r.value=!0)},u=()=>{const p=n.unref(t);!p||!r.value||(_e&&(o==null||o()),p.style.overflow=a,r.value=!1)};return n.computed({get(){return r.value},set(p){p?s():u()}})}const Vr=(()=>{let t=!1;const e=n.ref(!1);return(r,o)=>{if(e.value=o.value,t)return;t=!0;const a=Er(r,o.value);n.watch(e,s=>a.value=s)}})();var Lr=Object.defineProperty,jr=Object.defineProperties,Ir=Object.getOwnPropertyDescriptors,Oe=Object.getOwnPropertySymbols,Mr=Object.prototype.hasOwnProperty,Nr=Object.prototype.propertyIsEnumerable,me=(t,e,r)=>e in t?Lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Tr=(t,e)=>{for(var r in e||(e={}))Mr.call(e,r)&&me(t,r,e[r]);if(Oe)for(var r of Oe(e))Nr.call(e,r)&&me(t,r,e[r]);return t},Ar=(t,e)=>jr(t,Ir(e));const Hr=n.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages"],setup(t,{slots:e}){const r=n.toRef(t,"time"),o=n.reactive(i.useTimeAgo(r,Ar(Tr({},t),{controls:!0})));return()=>{if(e.default)return e.default(o)}}});var zr=Object.defineProperty,Rr=Object.defineProperties,Br=Object.getOwnPropertyDescriptors,Pe=Object.getOwnPropertySymbols,Wr=Object.prototype.hasOwnProperty,kr=Object.prototype.propertyIsEnumerable,he=(t,e,r)=>e in t?zr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,Fr=(t,e)=>{for(var r in e||(e={}))Wr.call(e,r)&&he(t,r,e[r]);if(Pe)for(var r of Pe(e))kr.call(e,r)&&he(t,r,e[r]);return t},Kr=(t,e)=>Rr(t,Br(e));const Jr=n.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(t,{slots:e}){const r=n.reactive(i.useTimestamp(Kr(Fr({},t),{controls:!0})));return()=>{if(e.default)return e.default(r)}}});var Gr=Object.defineProperty,ye=Object.getOwnPropertySymbols,qr=Object.prototype.hasOwnProperty,Qr=Object.prototype.propertyIsEnumerable,we=(t,e,r)=>e in t?Gr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,be=(t,e)=>{for(var r in e||(e={}))qr.call(e,r)&&we(t,r,e[r]);if(ye)for(var r of ye(e))Qr.call(e,r)&&we(t,r,e[r]);return t};const Yr=n.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(t,{slots:e}){const{list:r}=n.toRefs(t),{list:o,containerProps:a,wrapperProps:s}=i.useVirtualList(r,t.options);return a.style.height=t.height||"300px",()=>n.h("div",be({},a),[n.h("div",be({},s.value),o.value.map(u=>n.h("div",{style:{overFlow:"hidden",height:u.height}},e.default?e.default(u):"Please set content!")))])}}),Xr=n.defineComponent({name:"UseWindowFocus",setup(t,{slots:e}){const r=n.reactive({focused:i.useWindowFocus()});return()=>{if(e.default)return e.default(r)}}}),Zr=n.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(t,{slots:e}){const r=n.reactive(i.useWindowSize(t));return()=>{if(e.default)return e.default(r)}}});l.OnClickOutside=E,l.OnLongPress=je,l.UseActiveElement=Ie,l.UseBattery=Me,l.UseBrowserLocation=Ne,l.UseColorMode=Ge,l.UseDark=qe,l.UseDeviceMotion=Qe,l.UseDeviceOrientation=Ye,l.UseDevicePixelRatio=Xe,l.UseDevicesList=Ze,l.UseDocumentVisibility=xe,l.UseDraggable=st,l.UseElementBounding=lt,l.UseElementSize=ct,l.UseElementVisibility=Ot,l.UseEyeDropper=Pt,l.UseFullscreen=ht,l.UseGeolocation=yt,l.UseIdle=wt,l.UseMouse=jt,l.UseMouseInElement=It,l.UseMousePressed=Bt,l.UseNetwork=Wt,l.UseNow=Yt,l.UseOffsetPagination=nr,l.UseOnline=or,l.UsePageLeave=ar,l.UsePointer=dr,l.UsePreferredColorScheme=vr,l.UsePreferredDark=gr,l.UsePreferredLanguages=_r,l.UseScreenSafeArea=mr,l.UseTimeAgo=Hr,l.UseTimestamp=Jr,l.UseVirtualList=Yr,l.UseWindowFocus=Xr,l.UseWindowSize=Zr,l.VOnClickOutside=H,l.VOnLongPress=W,l.vElementHover=ut,l.vElementSize=_t,l.vElementVisibility=mt,l.vInfiniteScroll=Vt,l.vIntersectionObserver=Lt,l.vOnClickOutside=H,l.vOnKeyStroke=Ve,l.vOnLongPress=W,l.vScroll=$r,l.vScrollLock=Vr,Object.defineProperty(l,"__esModule",{value:!0})}(this.VueUse=this.VueUse||{},VueDemi,VueUse,VueUse);

package/index.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, toRef, toRefs } from 'vue-demi';
-import { onClickOutside as onClickOutside$1, unrefElement as unrefElement$1, useEventListener as useEventListener$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnScopeDispose, watchWithFilter, tryOnMounted, useToggle, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { onClickOutside as onClickOutside$1, unrefElement as unrefElement$1, useEventListener as useEventListener$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { isClient, isString, noop, tryOnScopeDispose, directiveHooks, watchWithFilter, tryOnMounted, useToggle, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -40,7 +40,7 @@ function useEventListener(...args) {
   if (!target)
     return noop;
   let cleanup = noop;
-  const stopWatch = watch(() => unref(target), (el) => {
+  const stopWatch = watch(() => unrefElement(target), (el) => {
     cleanup();
     if (!el)
       return;
@@ -59,7 +59,7 @@ function useEventListener(...args) {
 }
 
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, ignore } = options;
+  const { window = defaultWindow, ignore, capture = true } = options;
   if (!window)
     return;
   const shouldListen = ref(true);
@@ -78,7 +78,7 @@ function onClickOutside(target, handler, options = {}) {
     handler(event);
   };
   const cleanup = [
-    useEventListener(window, "click", listener, { passive: true, capture: true }),
+    useEventListener(window, "click", listener, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
       shouldListen.value = !!el && !e.composedPath().includes(el);
@@ -139,18 +139,20 @@ var __spreadValues$b = (a, b) => {
     }
   return a;
 };
-const vOnKeyStroke = (el, binding) => {
-  var _a, _b;
-  const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
-  if (typeof binding.value === "function") {
-    onKeyStroke(keys, binding.value, {
-      target: el
-    });
-  } else {
-    const [handler, options] = binding.value;
-    onKeyStroke(keys, handler, __spreadValues$b({
-      target: el
-    }, options));
+const vOnKeyStroke = {
+  [directiveHooks.mounted](el, binding) {
+    var _a, _b;
+    const keys = (_b = (_a = binding.arg) == null ? void 0 : _a.split(",")) != null ? _b : [];
+    if (typeof binding.value === "function") {
+      onKeyStroke(keys, binding.value, {
+        target: el
+      });
+    } else {
+      const [handler, options] = binding.value;
+      onKeyStroke(keys, handler, __spreadValues$b({
+        target: el
+      }, options));
+    }
   }
 };
 
@@ -302,10 +304,12 @@ function useStorage(key, initialValue, storage, options = {}) {
       onError(e);
     }
   }
+  let synced = false;
   function read(event) {
     if (!storage || event && event.key !== key)
       return;
     try {
+      synced = true;
       const rawValue = event ? event.newValue : storage.getItem(key);
       if (rawValue == null) {
         data.value = rawInit;
@@ -326,6 +330,10 @@ function useStorage(key, initialValue, storage, options = {}) {
   if (storage) {
     watchWithFilter(data, () => {
       try {
+        if (synced) {
+          synced = false;
+          return;
+        }
         if (data.value == null)
           storage.removeItem(key);
         else
@@ -362,7 +370,7 @@ function useMediaQuery(query, options = {}) {
     else
       mediaQuery.addListener(update);
     tryOnScopeDispose(() => {
-      if ("removeEventListener" in update)
+      if ("removeEventListener" in mediaQuery)
         mediaQuery.removeEventListener("change", update);
       else
         mediaQuery.removeListener(update);
@@ -602,10 +610,12 @@ function useElementHover(el) {
   return isHovered;
 }
 
-const vElementHover = (el, binding) => {
-  if (typeof binding.value === "function") {
-    const isHovered = useElementHover(el);
-    watch(isHovered, (v) => binding.value(v));
+const vElementHover = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const isHovered = useElementHover(el);
+      watch(isHovered, (v) => binding.value(v));
+    }
   }
 };
 
@@ -650,7 +660,7 @@ function useResizeObserver(target, callback, options = {}) {
   const stopWatch = watch(() => unrefElement(target), (el) => {
     cleanup();
     if (isSupported && window && el) {
-      observer = new window.ResizeObserver(callback);
+      observer = new ResizeObserver(callback);
       observer.observe(el, observerOptions);
     }
   }, { immediate: true, flush: "post" });
@@ -682,12 +692,14 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
   };
 }
 
-const vElementSize = (el, binding) => {
-  var _a;
-  const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
-  const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
-  const { width, height } = useElementSize(el, ...options);
-  watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+const vElementSize = {
+  [directiveHooks.mounted](el, binding) {
+    var _a;
+    const handler = typeof binding.value === "function" ? binding.value : (_a = binding.value) == null ? void 0 : _a[0];
+    const options = typeof binding.value === "function" ? [] : binding.value.slice(1);
+    const { width, height } = useElementSize(el, ...options);
+    watch([width, height], ([width2, height2]) => handler({ width: width2, height: height2 }));
+  }
 };
 
 const UseElementVisibility = defineComponent({
@@ -696,7 +708,7 @@ const UseElementVisibility = defineComponent({
   setup(props, { slots }) {
     const target = ref();
     const data = reactive({
-      isVisible: useElementVisibility(target)
+      isVisible: useElementVisibility$1(target)
     });
     return () => {
       if (slots.default)
@@ -705,6 +717,39 @@ const UseElementVisibility = defineComponent({
   }
 });
 
+function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+  const elementIsVisible = ref(false);
+  const testBounding = () => {
+    if (!window)
+      return;
+    const document = window.document;
+    if (!unref(element)) {
+      elementIsVisible.value = false;
+    } else {
+      const rect = unref(element).getBoundingClientRect();
+      elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+    }
+  };
+  tryOnMounted(testBounding);
+  if (window)
+    tryOnMounted(() => useEventListener(unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  return elementIsVisible;
+}
+
+const vElementVisibility = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const isVisible = useElementVisibility(el);
+      watch(isVisible, (v) => handler(v), { immediate: true });
+    } else {
+      const [handler, options] = binding.value;
+      const isVisible = useElementVisibility(el, options);
+      watch(isVisible, (v) => handler(v), { immediate: true });
+    }
+  }
+};
+
 const UseEyeDropper = defineComponent({
   name: "UseEyeDropper",
   props: {
@@ -858,11 +903,13 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   });
 }
 
-const vInfiniteScroll = (el, binding) => {
-  if (typeof binding.value === "function")
-    useInfiniteScroll(el, binding.value);
-  else
-    useInfiniteScroll(el, ...binding.value);
+const vInfiniteScroll = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useInfiniteScroll(el, binding.value);
+    else
+      useInfiniteScroll(el, ...binding.value);
+  }
 };
 
 function useIntersectionObserver(target, callback, options = {}) {
@@ -881,7 +928,7 @@ function useIntersectionObserver(target, callback, options = {}) {
     cleanup();
     if (!el)
       return;
-    const observer = new window.IntersectionObserver(callback, {
+    const observer = new IntersectionObserver(callback, {
       root: root2,
       rootMargin,
       threshold
@@ -903,11 +950,13 @@ function useIntersectionObserver(target, callback, options = {}) {
   };
 }
 
-const vIntersectionObserver = (el, binding) => {
-  if (typeof binding.value === "function")
-    useIntersectionObserver(el, binding.value);
-  else
-    useIntersectionObserver(el, ...binding.value);
+const vIntersectionObserver = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useIntersectionObserver(el, binding.value);
+    else
+      useIntersectionObserver(el, ...binding.value);
+  }
 };
 
 const UseMouse = defineComponent({
@@ -1281,31 +1330,33 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const vScroll = (el, binding) => {
-  if (typeof binding.value === "function") {
-    const handler = binding.value;
-    const state = useScroll(el, {
-      onScroll() {
-        handler(state);
-      },
-      onStop() {
-        handler(state);
-      }
-    });
-  } else {
-    const [handler, options] = binding.value;
-    const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
-      onScroll(e) {
-        var _a;
-        (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
-        handler(state);
-      },
-      onStop(e) {
-        var _a;
-        (_a = options.onStop) == null ? void 0 : _a.call(options, e);
-        handler(state);
-      }
-    }));
+const vScroll = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function") {
+      const handler = binding.value;
+      const state = useScroll(el, {
+        onScroll() {
+          handler(state);
+        },
+        onStop() {
+          handler(state);
+        }
+      });
+    } else {
+      const [handler, options] = binding.value;
+      const state = useScroll(el, __spreadProps$2(__spreadValues$3({}, options), {
+        onScroll(e) {
+          var _a;
+          (_a = options.onScroll) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        },
+        onStop(e) {
+          var _a;
+          (_a = options.onStop) == null ? void 0 : _a.call(options, e);
+          handler(state);
+        }
+      }));
+    }
   }
 };
 
@@ -1499,4 +1550,4 @@ const UseWindowSize = defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "8.0.0-beta.3",
+  "version": "8.1.0",
   "description": "Renderless components for VueUse",
   "keywords": [
     "vue",
@@ -8,12 +8,17 @@
     "utils"
   ],
   "license": "MIT",
+  "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vueuse/vueuse.git",
     "directory": "packages/components"
   },
-  "author": "Jacob Clevenger<https://github.com/wheatjs>",
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "types": "./index.d.ts",
+  "unpkg": "./index.iife.min.js",
+  "jsdelivr": "./index.iife.min.js",
   "exports": {
     ".": {
       "import": "./index.mjs",
@@ -22,19 +27,14 @@
     },
     "./*": "./*"
   },
-  "main": "./index.cjs",
-  "types": "./index.d.ts",
-  "module": "./index.mjs",
-  "unpkg": "./index.iife.min.js",
-  "jsdelivr": "./index.iife.min.js",
   "sideEffects": false,
   "bugs": {
     "url": "https://github.com/vueuse/vueuse/issues"
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/components#readme",
   "dependencies": {
-    "@vueuse/core": "8.0.0-beta.3",
-    "@vueuse/shared": "8.0.0-beta.3",
+    "@vueuse/core": "8.1.0",
+    "@vueuse/shared": "8.1.0",
     "vue-demi": "*"
   }
 }