@vueuse/components 10.1.0 → 10.2.0

package/index.cjs

@@ -116,10 +116,12 @@ function onClickOutside(target, handler, options = {}) {
         shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
-      var _a;
-      const el = unrefElement(target);
-      if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
-        handler(event);
+      setTimeout(() => {
+        var _a;
+        const el = unrefElement(target);
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
+          handler(event);
+      }, 0);
     })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
@@ -599,7 +601,8 @@ function useColorMode(options = {}) {
       let style;
       if (disableTransition) {
         style = window.document.createElement("style");
-        style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+        const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+        style.appendChild(document.createTextNode(styleString));
         window.document.head.appendChild(style);
       }
       if (attribute2 === "class") {
@@ -770,7 +773,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "pointerTypes",
     "as",
     "handle",
-    "axis"
+    "axis",
+    "onStart",
+    "onMove",
+    "onEnd"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -784,7 +790,9 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
       core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
-    const onEnd = (position) => {
+    const onEnd = (position, event) => {
+      var _a;
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -930,8 +938,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
         const $elem = unrefElement(target);
         if ($elem) {
           const styles = window.getComputedStyle($elem);
-          width.value = parseFloat(styles.width);
-          height.value = parseFloat(styles.height);
+          width.value = Number.parseFloat(styles.width);
+          height.value = Number.parseFloat(styles.height);
         }
       } else {
         if (boxSize) {
@@ -1220,12 +1228,20 @@ var __spreadValues$9 = (a, b) => {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
     img.src = src;
     if (srcset)
       img.srcset = srcset;
     if (sizes)
       img.sizes = sizes;
+    if (clazz)
+      img.className = clazz;
+    if (loading)
+      img.loading = loading;
+    if (crossorigin)
+      img.crossOrigin = crossorigin;
+    if (referrerPolicy)
+      img.referrerPolicy = referrerPolicy;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -1252,7 +1268,12 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "src",
     "srcset",
     "sizes",
-    "as"
+    "as",
+    "alt",
+    "class",
+    "loading",
+    "crossorigin",
+    "referrerPolicy"
   ],
   setup(props, { slots }) {
     const data = vueDemi.reactive(useImage(props));
@@ -1340,14 +1361,14 @@ function useScroll(element, options = {}) {
     onStop(e);
   };
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
-  const onScrollHandler = (e) => {
-    const eventTarget = e.target === document ? e.target.documentElement : e.target;
-    const { display, flexDirection } = getComputedStyle(eventTarget);
-    const scrollLeft = eventTarget.scrollLeft;
+  const setArrivedState = (target) => {
+    const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+    const { display, flexDirection } = getComputedStyle(el);
+    const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
     const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
-    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1356,13 +1377,13 @@ function useScroll(element, options = {}) {
       arrivedState.right = right;
     }
     internalX.value = scrollLeft;
-    let scrollTop = eventTarget.scrollTop;
-    if (e.target === document && !scrollTop)
+    let scrollTop = el.scrollTop;
+    if (target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1371,6 +1392,10 @@ function useScroll(element, options = {}) {
       arrivedState.bottom = bottom;
     }
     internalY.value = scrollTop;
+  };
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
     onScroll(e);
@@ -1392,7 +1417,12 @@ function useScroll(element, options = {}) {
     y,
     isScrolling,
     arrivedState,
-    directions
+    directions,
+    measure() {
+      const _element = shared.toValue(element);
+      if (_element)
+        setArrivedState(_element);
+    }
   };
 }
 
@@ -1432,6 +1462,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const promise = vueDemi.ref();
   const isLoading = vueDemi.computed(() => !!promise.value);
   function checkAndLoad() {
+    state.measure();
     const el = shared.toValue(element);
     if (!el)
       return;
@@ -1856,7 +1887,7 @@ function useCssVar(prop, target, options = {}) {
   }
   if (observe) {
     useMutationObserver(elRef, updateCssVar, {
-      attributes: true,
+      attributeFilter: ["style", "class"],
       window
     });
   }
@@ -2000,7 +2031,7 @@ const vScroll = {
 
 function checkOverflowScroll(ele) {
   const style = window.getComputedStyle(ele);
-  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientHeight < ele.scrollHeight || style.overflowY === "auto" && ele.clientWidth < ele.scrollWidth) {
+  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) {
     return true;
   } else {
     const parent = ele.parentNode;

package/index.d.ts

@@ -46,7 +46,7 @@ type OnClickOutsideHandler<T extends {
 interface OnClickOutsideProps extends RenderableComponent {
     options?: OnClickOutsideOptions;
 }
-declare const OnClickOutside: vue_demi.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnClickOutsideProps>, {}>;
+declare const OnClickOutside: vue_demi.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnClickOutsideProps>, {}, {}>;
 
 declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
 
@@ -87,7 +87,7 @@ interface OnLongPressModifiers {
 interface OnLongPressProps extends RenderableComponent {
     options?: OnLongPressOptions;
 }
-declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
+declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}, {}>;
 
 type BindingValueFunction$6 = (evt: PointerEvent) => void;
 type BindingValueArray$5 = [
@@ -98,15 +98,15 @@ declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$6
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseBattery: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 interface StorageLike {
     getItem(key: string): string | null;
@@ -236,27 +236,27 @@ interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStor
     disableTransition?: boolean;
 }
 
-declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorMode>>, {}>;
+declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorMode>>, {}, {}>;
 
-declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDarkOptions>, {}>;
+declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDarkOptions>, {}, {}>;
 
 declare const UseDeviceMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseDeviceOrientation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseDevicePixelRatio: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDevicesListOptions>, {}>;
+declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDevicesListOptions>, {}, {}>;
 
 declare const UseDocumentVisibility: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
@@ -270,7 +270,7 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
      */
     storageType?: 'local' | 'session';
 }
-declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
+declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}, {}>;
 
 interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
@@ -282,12 +282,12 @@ interface UseResizeObserverOptions extends ConfigurableWindow {
     box?: ResizeObserverBoxOptions;
 }
 
-declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}>;
+declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
 type BindingValueFunction$5 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}>;
+declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
 interface ElementSize {
     width: number;
@@ -312,7 +312,7 @@ type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize
 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, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
 
 interface UseElementVisibilityOptions extends ConfigurableWindow {
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
@@ -328,17 +328,17 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     sRGBHex: StringConstructor;
-}>>, {}>;
+}>>, {}, {}>;
 
-declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
 
-declare const UseGeolocation: vue_demi.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseGeolocationOptions>, {}>;
+declare const UseGeolocation: vue_demi.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseGeolocationOptions>, {}, {}>;
 
 declare const UseIdle: vue_demi.DefineComponent<UseIdleOptions & {
     timeout: number;
 }, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
     timeout: number;
-}>, {}>;
+}>, {}, {}>;
 
 interface UseImageOptions {
     /** Address of the resource */
@@ -347,9 +347,19 @@ interface UseImageOptions {
     srcset?: string;
     /** Image sizes for different page layouts */
     sizes?: string;
+    /** Image alternative information */
+    alt?: string;
+    /** Image classes */
+    class?: string;
+    /** Image loading */
+    loading?: HTMLImageElement['loading'];
+    /** Image CORS settings */
+    crossorigin?: string;
+    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+    referrerPolicy?: HTMLImageElement['referrerPolicy'];
 }
 
-declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseImageOptions & RenderableComponent>, {}>;
+declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseImageOptions & RenderableComponent>, {}, {}>;
 
 interface UseScrollOptions {
     /**
@@ -422,6 +432,7 @@ declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement |
         top: boolean;
         bottom: boolean;
     };
+    measure(): void;
 };
 type UseScrollReturn = ReturnType<typeof useScroll>;
 
@@ -483,22 +494,22 @@ type BindingValueFunction$1 = IntersectionObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
-declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseMouseOptions>, {}>;
+declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseMouseOptions>, {}, {}>;
 
-declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseInElementOptions & RenderableComponent>, {}>;
+declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseInElementOptions & RenderableComponent>, {}, {}>;
 
-declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent>, {}>;
+declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent>, {}, {}>;
 
 declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}>;
+declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}, {}>;
 
 interface UseObjectUrlProps {
     object: Blob | MediaSource | undefined;
 }
-declare const UseObjectUrl: vue_demi.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseObjectUrlProps>, {}>;
+declare const UseObjectUrl: vue_demi.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseObjectUrlProps>, {}, {}>;
 
 interface UseOffsetPaginationOptions {
     /**
@@ -538,43 +549,43 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseOffsetPaginationOptions>, {}>;
+declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseOffsetPaginationOptions>, {}, {}>;
 
 declare const UseOnline: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
     target: 'window' | 'self';
 }, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UsePointerOptions, "target"> & {
     target: 'window' | 'self';
-}>, {}>;
+}>, {}, {}>;
 
-declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
 
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredContrast: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredDark: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredLanguages: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredReducedMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
@@ -593,7 +604,7 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     right: boolean;
     top: boolean;
     bottom: boolean;
-}>;
+}, {}>;
 
 type BindingValueFunction = (state: UseScrollReturn) => void;
 type BindingValueArray = [BindingValueFunction, UseScrollOptions];
@@ -604,9 +615,9 @@ declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
 interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
     time: MaybeRef<Date | number | string>;
 }
-declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}>;
+declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}, {}>;
 
-declare const UseTimestamp: vue_demi.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseTimestampOptions<true>, "controls">>, {}>;
+declare const UseTimestamp: vue_demi.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseTimestampOptions<true>, "controls">>, {}, {}>;
 
 interface UseVirtualListProps {
     /**
@@ -628,12 +639,12 @@ interface UseVirtualListProps {
      */
     height: string;
 }
-declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseVirtualListProps>, {}>;
+declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseVirtualListProps>, {}, {}>;
 
 declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}>;
+declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}, {}>;
 
 export { OnClickOutside, OnClickOutsideProps, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, 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

@@ -19,6 +19,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     VueDemi.Vue2 = Vue
     VueDemi.version = Vue.version
     VueDemi.warn = Vue.util.warn
+    VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
     function createApp(rootComponent, rootProps) {
       var vm
       var provide = {}
@@ -71,6 +72,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       VueDemi.Vue = Vue
       VueDemi.Vue2 = Vue
       VueDemi.version = Vue.version
+      VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
     } else {
       console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
     }
@@ -227,10 +229,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
       }, { passive: true }),
       detectIframe && useEventListener(window, "blur", (event) => {
-        var _a;
-        const el = unrefElement(target);
-        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
-          handler(event);
+        setTimeout(() => {
+          var _a;
+          const el = unrefElement(target);
+          if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
+            handler(event);
+        }, 0);
       })
     ].filter(Boolean);
     const stop = () => cleanup.forEach((fn) => fn());
@@ -710,7 +714,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         let style;
         if (disableTransition) {
           style = window.document.createElement("style");
-          style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+          const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+          style.appendChild(document.createTextNode(styleString));
           window.document.head.appendChild(style);
         }
         if (attribute2 === "class") {
@@ -881,7 +886,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "pointerTypes",
       "as",
       "handle",
-      "axis"
+      "axis",
+      "onStart",
+      "onMove",
+      "onEnd"
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
@@ -895,7 +903,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
       );
       const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
-      const onEnd = (position) => {
+      const onEnd = (position, event) => {
+        var _a;
+        (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
         if (!storageValue)
           return;
         storageValue.value.x = position.x;
@@ -1041,8 +1051,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           const $elem = unrefElement(target);
           if ($elem) {
             const styles = window.getComputedStyle($elem);
-            width.value = parseFloat(styles.width);
-            height.value = parseFloat(styles.height);
+            width.value = Number.parseFloat(styles.width);
+            height.value = Number.parseFloat(styles.height);
           }
         } else {
           if (boxSize) {
@@ -1331,12 +1341,20 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   async function loadImage(options) {
     return new Promise((resolve, reject) => {
       const img = new Image();
-      const { src, srcset, sizes } = options;
+      const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
       img.src = src;
       if (srcset)
         img.srcset = srcset;
       if (sizes)
         img.sizes = sizes;
+      if (clazz)
+        img.className = clazz;
+      if (loading)
+        img.loading = loading;
+      if (crossorigin)
+        img.crossOrigin = crossorigin;
+      if (referrerPolicy)
+        img.referrerPolicy = referrerPolicy;
       img.onload = () => resolve(img);
       img.onerror = reject;
     });
@@ -1363,7 +1381,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "src",
       "srcset",
       "sizes",
-      "as"
+      "as",
+      "alt",
+      "class",
+      "loading",
+      "crossorigin",
+      "referrerPolicy"
     ],
     setup(props, { slots }) {
       const data = vueDemi.reactive(useImage(props));
@@ -1451,14 +1474,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       onStop(e);
     };
     const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
-    const onScrollHandler = (e) => {
-      const eventTarget = e.target === document ? e.target.documentElement : e.target;
-      const { display, flexDirection } = getComputedStyle(eventTarget);
-      const scrollLeft = eventTarget.scrollLeft;
+    const setArrivedState = (target) => {
+      const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+      const { display, flexDirection } = getComputedStyle(el);
+      const scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
       directions.right = scrollLeft > internalX.value;
       const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
-      const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "row-reverse") {
         arrivedState.left = right;
         arrivedState.right = left;
@@ -1467,13 +1490,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         arrivedState.right = right;
       }
       internalX.value = scrollLeft;
-      let scrollTop = eventTarget.scrollTop;
-      if (e.target === document && !scrollTop)
+      let scrollTop = el.scrollTop;
+      if (target === document && !scrollTop)
         scrollTop = document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
       const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
-      const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "column-reverse") {
         arrivedState.top = bottom;
         arrivedState.bottom = top;
@@ -1482,6 +1505,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         arrivedState.bottom = bottom;
       }
       internalY.value = scrollTop;
+    };
+    const onScrollHandler = (e) => {
+      const eventTarget = e.target === document ? e.target.documentElement : e.target;
+      setArrivedState(eventTarget);
       isScrolling.value = true;
       onScrollEndDebounced(e);
       onScroll(e);
@@ -1503,7 +1530,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       y,
       isScrolling,
       arrivedState,
-      directions
+      directions,
+      measure() {
+        const _element = shared.toValue(element);
+        if (_element)
+          setArrivedState(_element);
+      }
     };
   }
 
@@ -1543,6 +1575,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const promise = vueDemi.ref();
     const isLoading = vueDemi.computed(() => !!promise.value);
     function checkAndLoad() {
+      state.measure();
       const el = shared.toValue(element);
       if (!el)
         return;
@@ -1967,7 +2000,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
     if (observe) {
       useMutationObserver(elRef, updateCssVar, {
-        attributes: true,
+        attributeFilter: ["style", "class"],
         window
       });
     }
@@ -2111,7 +2144,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function checkOverflowScroll(ele) {
     const style = window.getComputedStyle(ele);
-    if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientHeight < ele.scrollHeight || style.overflowY === "auto" && ele.clientWidth < ele.scrollWidth) {
+    if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) {
       return true;
     } else {
       const parent = ele.parentNode;

package/index.iife.min.js

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

package/index.mjs

@@ -114,10 +114,12 @@ function onClickOutside(target, handler, options = {}) {
         shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
     }, { passive: true }),
     detectIframe && useEventListener(window, "blur", (event) => {
-      var _a;
-      const el = unrefElement(target);
-      if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
-        handler(event);
+      setTimeout(() => {
+        var _a;
+        const el = unrefElement(target);
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
+          handler(event);
+      }, 0);
     })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
@@ -597,7 +599,8 @@ function useColorMode(options = {}) {
       let style;
       if (disableTransition) {
         style = window.document.createElement("style");
-        style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+        const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+        style.appendChild(document.createTextNode(styleString));
         window.document.head.appendChild(style);
       }
       if (attribute2 === "class") {
@@ -768,7 +771,10 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "pointerTypes",
     "as",
     "handle",
-    "axis"
+    "axis",
+    "onStart",
+    "onMove",
+    "onEnd"
   ],
   setup(props, { slots }) {
     const target = ref();
@@ -782,7 +788,9 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
       isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
-    const onEnd = (position) => {
+    const onEnd = (position, event) => {
+      var _a;
+      (_a = props.onEnd) == null ? void 0 : _a.call(props, position, event);
       if (!storageValue)
         return;
       storageValue.value.x = position.x;
@@ -928,8 +936,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
         const $elem = unrefElement(target);
         if ($elem) {
           const styles = window.getComputedStyle($elem);
-          width.value = parseFloat(styles.width);
-          height.value = parseFloat(styles.height);
+          width.value = Number.parseFloat(styles.width);
+          height.value = Number.parseFloat(styles.height);
         }
       } else {
         if (boxSize) {
@@ -1218,12 +1226,20 @@ var __spreadValues$9 = (a, b) => {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
     img.src = src;
     if (srcset)
       img.srcset = srcset;
     if (sizes)
       img.sizes = sizes;
+    if (clazz)
+      img.className = clazz;
+    if (loading)
+      img.loading = loading;
+    if (crossorigin)
+      img.crossOrigin = crossorigin;
+    if (referrerPolicy)
+      img.referrerPolicy = referrerPolicy;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -1250,7 +1266,12 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "src",
     "srcset",
     "sizes",
-    "as"
+    "as",
+    "alt",
+    "class",
+    "loading",
+    "crossorigin",
+    "referrerPolicy"
   ],
   setup(props, { slots }) {
     const data = reactive(useImage(props));
@@ -1338,14 +1359,14 @@ function useScroll(element, options = {}) {
     onStop(e);
   };
   const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
-  const onScrollHandler = (e) => {
-    const eventTarget = e.target === document ? e.target.documentElement : e.target;
-    const { display, flexDirection } = getComputedStyle(eventTarget);
-    const scrollLeft = eventTarget.scrollLeft;
+  const setArrivedState = (target) => {
+    const el = target === window ? target.document.documentElement : target === document ? target.documentElement : target;
+    const { display, flexDirection } = getComputedStyle(el);
+    const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
     const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
-    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1354,13 +1375,13 @@ function useScroll(element, options = {}) {
       arrivedState.right = right;
     }
     internalX.value = scrollLeft;
-    let scrollTop = eventTarget.scrollTop;
-    if (e.target === document && !scrollTop)
+    let scrollTop = el.scrollTop;
+    if (target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
     const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1369,6 +1390,10 @@ function useScroll(element, options = {}) {
       arrivedState.bottom = bottom;
     }
     internalY.value = scrollTop;
+  };
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    setArrivedState(eventTarget);
     isScrolling.value = true;
     onScrollEndDebounced(e);
     onScroll(e);
@@ -1390,7 +1415,12 @@ function useScroll(element, options = {}) {
     y,
     isScrolling,
     arrivedState,
-    directions
+    directions,
+    measure() {
+      const _element = toValue(element);
+      if (_element)
+        setArrivedState(_element);
+    }
   };
 }
 
@@ -1430,6 +1460,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   const promise = ref();
   const isLoading = computed(() => !!promise.value);
   function checkAndLoad() {
+    state.measure();
     const el = toValue(element);
     if (!el)
       return;
@@ -1854,7 +1885,7 @@ function useCssVar(prop, target, options = {}) {
   }
   if (observe) {
     useMutationObserver(elRef, updateCssVar, {
-      attributes: true,
+      attributeFilter: ["style", "class"],
       window
     });
   }
@@ -1998,7 +2029,7 @@ const vScroll = {
 
 function checkOverflowScroll(ele) {
   const style = window.getComputedStyle(ele);
-  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientHeight < ele.scrollHeight || style.overflowY === "auto" && ele.clientWidth < ele.scrollWidth) {
+  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) {
     return true;
   } else {
     const parent = ele.parentNode;

package/package.json

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