@vueuse/components 9.1.1 → 9.2.0

package/index.cjs

@@ -179,11 +179,11 @@ const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
   var _a, _b;
   const elementRef = vueDemi.computed(() => unrefElement(target));
-  let timeout = null;
+  let timeout;
   function clear() {
-    if (timeout != null) {
+    if (timeout) {
       clearTimeout(timeout);
-      timeout = null;
+      timeout = void 0;
     }
   }
   function onDown(ev) {
@@ -649,12 +649,18 @@ const UseDraggable = vueDemi.defineComponent({
     "preventDefault",
     "stopPropagation",
     "pointerTypes",
-    "as"
+    "as",
+    "handle"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
+    const handle = vueDemi.computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const initialValue = props.storageKey ? core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
     const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+      handle,
       initialValue
     })));
     return () => {
@@ -750,11 +756,18 @@ function useResizeObserver(target, callback, options = {}) {
 }
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const { box = "content-box" } = options;
   const width = vueDemi.ref(initialSize.width);
   const height = vueDemi.ref(initialSize.height);
   useResizeObserver(target, ([entry]) => {
-    width.value = entry.contentRect.width;
-    height.value = entry.contentRect.height;
+    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+    if (boxSize) {
+      width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+      height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+    } else {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
   }, options);
   vueDemi.watch(() => unrefElement(target), (ele) => {
     width.value = ele ? initialSize.width : 0;
@@ -797,7 +810,7 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    const el = shared.resolveUnref(element);
+    const el = unrefElement(element);
     if (!el) {
       elementIsVisible.value = false;
     } else {
@@ -805,9 +818,12 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
-  shared.tryOnMounted(testBounding);
+  vueDemi.watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
   if (window) {
-    shared.tryOnMounted(() => useEventListener(() => shared.resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    useEventListener(scrollTarget || window, "scroll", testBounding, {
+      capture: false,
+      passive: true
+    });
   }
   return elementIsVisible;
 }

package/index.d.ts

@@ -16,7 +16,7 @@ interface RenderableComponent {
     as?: Object | string;
 }
 
-declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
 declare const vOnClickOutside: FunctionDirective<any, <E = PointerEvent>(evt: E) => void>;
 
@@ -56,7 +56,7 @@ interface OnLongPressModifiers {
 interface OnLongPressProps extends RenderableComponent {
     options?: OnLongPressOptions;
 }
-declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
+declare 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 type BindingValueFunction$6 = (evt: PointerEvent) => void;
 declare type BindingValueArray$5 = [
@@ -67,15 +67,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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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;
@@ -195,27 +195,27 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
     emitAuto?: boolean;
 }
 
-declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;
+declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorSchema>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorSchema>>, {}>;
 
-declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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 {
     /**
@@ -229,24 +229,24 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
      */
     storageType?: 'local' | 'session';
 }
-declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
+declare 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 {
     /**
      * Sets which box model the observer will observe changes to. Possible values
-     * are `content-box` (the default), and `border-box`.
+     * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
      *
      * @default 'content-box'
      */
-    box?: 'content-box' | 'border-box';
+    box?: ResizeObserverBoxOptions;
 }
 
-declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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>, {}>;
 
 declare 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, vue_demi.EmitsOptions, 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;
@@ -271,7 +271,7 @@ declare type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useEle
 declare type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
 declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
-declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
+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?: MaybeComputedRef<HTMLElement | undefined | null>;
@@ -285,17 +285,17 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}>[] | 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
     timeout: number;
 }>, {}>;
 
@@ -308,7 +308,7 @@ interface UseImageOptions {
     sizes?: string;
 }
 
-declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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 {
     /**
@@ -427,22 +427,22 @@ declare type BindingValueFunction$1 = IntersectionObserverCallback;
 declare 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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 {
     /**
@@ -482,41 +482,41 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UsePointerOptions, "target"> & {
+}, {}, {}, {}, {}, 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 UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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;
@@ -525,7 +525,7 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     left: BooleanConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     top: BooleanConstructor;
     right: BooleanConstructor;
     bottom: BooleanConstructor;
@@ -546,9 +546,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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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 {
     /**
@@ -570,12 +570,12 @@ interface UseVirtualListProps {
      */
     height: string;
 }
-declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, vue_demi.EmitsOptions, 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, 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, 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

@@ -247,11 +247,11 @@
   function onLongPress(target, handler, options) {
     var _a, _b;
     const elementRef = vueDemi.computed(() => unrefElement(target));
-    let timeout = null;
+    let timeout;
     function clear() {
-      if (timeout != null) {
+      if (timeout) {
         clearTimeout(timeout);
-        timeout = null;
+        timeout = void 0;
       }
     }
     function onDown(ev) {
@@ -717,12 +717,18 @@
       "preventDefault",
       "stopPropagation",
       "pointerTypes",
-      "as"
+      "as",
+      "handle"
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
+      const handle = vueDemi.computed(() => {
+        var _a;
+        return (_a = props.handle) != null ? _a : target.value;
+      });
       const initialValue = props.storageKey ? core.useStorage(props.storageKey, shared.resolveUnref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
       const data = vueDemi.reactive(core.useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+        handle,
         initialValue
       })));
       return () => {
@@ -818,11 +824,18 @@
   }
 
   function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+    const { box = "content-box" } = options;
     const width = vueDemi.ref(initialSize.width);
     const height = vueDemi.ref(initialSize.height);
     useResizeObserver(target, ([entry]) => {
-      width.value = entry.contentRect.width;
-      height.value = entry.contentRect.height;
+      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+      if (boxSize) {
+        width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+        height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+      } else {
+        width.value = entry.contentRect.width;
+        height.value = entry.contentRect.height;
+      }
     }, options);
     vueDemi.watch(() => unrefElement(target), (ele) => {
       width.value = ele ? initialSize.width : 0;
@@ -865,7 +878,7 @@
       if (!window)
         return;
       const document = window.document;
-      const el = shared.resolveUnref(element);
+      const el = unrefElement(element);
       if (!el) {
         elementIsVisible.value = false;
       } else {
@@ -873,9 +886,12 @@
         elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
       }
     };
-    shared.tryOnMounted(testBounding);
+    vueDemi.watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
     if (window) {
-      shared.tryOnMounted(() => useEventListener(() => shared.resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+      useEventListener(scrollTarget || window, "scroll", testBounding, {
+        capture: false,
+        passive: true
+      });
     }
     return elementIsVisible;
   }

package/index.iife.min.js

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

package/index.mjs

@@ -175,11 +175,11 @@ const DEFAULT_DELAY = 500;
 function onLongPress(target, handler, options) {
   var _a, _b;
   const elementRef = computed(() => unrefElement(target));
-  let timeout = null;
+  let timeout;
   function clear() {
-    if (timeout != null) {
+    if (timeout) {
       clearTimeout(timeout);
-      timeout = null;
+      timeout = void 0;
     }
   }
   function onDown(ev) {
@@ -645,12 +645,18 @@ const UseDraggable = defineComponent({
     "preventDefault",
     "stopPropagation",
     "pointerTypes",
-    "as"
+    "as",
+    "handle"
   ],
   setup(props, { slots }) {
     const target = ref();
+    const handle = computed(() => {
+      var _a;
+      return (_a = props.handle) != null ? _a : target.value;
+    });
     const initialValue = props.storageKey ? useStorage$1(props.storageKey, resolveUnref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
     const data = reactive(useDraggable(target, __spreadProps$8(__spreadValues$a({}, props), {
+      handle,
       initialValue
     })));
     return () => {
@@ -746,11 +752,18 @@ function useResizeObserver(target, callback, options = {}) {
 }
 
 function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const { box = "content-box" } = options;
   const width = ref(initialSize.width);
   const height = ref(initialSize.height);
   useResizeObserver(target, ([entry]) => {
-    width.value = entry.contentRect.width;
-    height.value = entry.contentRect.height;
+    const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+    if (boxSize) {
+      width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+      height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+    } else {
+      width.value = entry.contentRect.width;
+      height.value = entry.contentRect.height;
+    }
   }, options);
   watch(() => unrefElement(target), (ele) => {
     width.value = ele ? initialSize.width : 0;
@@ -793,7 +806,7 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    const el = resolveUnref(element);
+    const el = unrefElement(element);
     if (!el) {
       elementIsVisible.value = false;
     } else {
@@ -801,9 +814,12 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
-  tryOnMounted(testBounding);
+  watch(() => unrefElement(element), () => testBounding(), { immediate: true, flush: "post" });
   if (window) {
-    tryOnMounted(() => useEventListener(() => resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    useEventListener(scrollTarget || window, "scroll", testBounding, {
+      capture: false,
+      passive: true
+    });
   }
   return elementIsVisible;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.1.1",
+  "version": "9.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": "9.1.1",
-    "@vueuse/shared": "9.1.1",
+    "@vueuse/core": "9.2.0",
+    "@vueuse/shared": "9.2.0",
     "vue-demi": "*"
   }
 }