@vueuse/components 8.9.2 → 9.0.0-beta.0

package/index.cjs

@@ -24,7 +24,7 @@ const OnClickOutside = vueDemi.defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = vueDemi.unref(elRef);
+  const plain = shared.resolveUnref(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -339,7 +339,7 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = vueDemi.unref(initialValue);
+  const rawInit = shared.resolveUnref(initialValue);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
@@ -385,13 +385,21 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
 }
 
+function useSupported(callback, sync = false) {
+  const isSupported = vueDemi.ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  shared.tryOnMounted(update, sync);
+  return isSupported;
+}
+
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
-  const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = vueDemi.ref(false);
   const update = () => {
-    if (!isSupported)
+    if (!isSupported.value)
       return;
     if (!mediaQuery)
       mediaQuery = window.matchMedia(query);
@@ -618,7 +626,7 @@ const UseDraggable = vueDemi.defineComponent({
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
-    const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    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), {
       initialValue
     })));
@@ -689,7 +697,7 @@ var __objRest = (source, exclude) => {
 function useResizeObserver(target, callback, options = {}) {
   const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
   let observer;
-  const isSupported = window && "ResizeObserver" in window;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
@@ -698,7 +706,7 @@ function useResizeObserver(target, callback, options = {}) {
   };
   const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
     cleanup();
-    if (isSupported && window && el) {
+    if (isSupported.value && window && el) {
       observer = new ResizeObserver(callback);
       observer.observe(el, observerOptions);
     }
@@ -762,16 +770,18 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    if (!vueDemi.unref(element)) {
+    const el = shared.resolveUnref(element);
+    if (!el) {
       elementIsVisible.value = false;
     } else {
-      const rect = vueDemi.unref(element).getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
   shared.tryOnMounted(testBounding);
-  if (window)
-    shared.tryOnMounted(() => useEventListener(vueDemi.unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  if (window) {
+    shared.tryOnMounted(() => useEventListener(() => shared.resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  }
   return elementIsVisible;
 }
 
@@ -914,10 +924,10 @@ async function loadImage(options) {
   });
 }
 const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(vueDemi.unref(options)), void 0, __spreadValues$9({
+  const state = useAsyncState(() => loadImage(shared.resolveUnref(options)), void 0, __spreadValues$9({
     resetOnExecute: true
   }, asyncStateOptions));
-  vueDemi.watch(() => vueDemi.unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  vueDemi.watch(() => shared.resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
   return state;
 };
 
@@ -975,37 +985,35 @@ function useScroll(element, options = {}) {
     top: false,
     bottom: false
   });
-  if (element) {
-    const onScrollEnd = shared.useDebounceFn((e) => {
-      isScrolling.value = false;
-      directions.left = false;
-      directions.right = false;
-      directions.top = false;
-      directions.bottom = false;
-      onStop(e);
-    }, throttle + idle);
-    const onScrollHandler = (e) => {
-      const eventTarget = e.target === document ? e.target.documentElement : e.target;
-      const scrollLeft = eventTarget.scrollLeft;
-      directions.left = scrollLeft < x.value;
-      directions.right = scrollLeft > x.value;
-      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
-      x.value = scrollLeft;
-      let scrollTop = eventTarget.scrollTop;
-      if (e.target === document && !scrollTop)
-        scrollTop = document.body.scrollTop;
-      directions.top = scrollTop < y.value;
-      directions.bottom = scrollTop > y.value;
-      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
-      y.value = scrollTop;
-      isScrolling.value = true;
-      onScrollEnd(e);
-      onScroll(e);
-    };
-    useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
-  }
+  const onScrollEnd = shared.useDebounceFn((e) => {
+    isScrolling.value = false;
+    directions.left = false;
+    directions.right = false;
+    directions.top = false;
+    directions.bottom = false;
+    onStop(e);
+  }, throttle + idle);
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const scrollLeft = eventTarget.scrollLeft;
+    directions.left = scrollLeft < x.value;
+    directions.right = scrollLeft > x.value;
+    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+    x.value = scrollLeft;
+    let scrollTop = eventTarget.scrollTop;
+    if (e.target === document && !scrollTop)
+      scrollTop = document.body.scrollTop;
+    directions.top = scrollTop < y.value;
+    directions.bottom = scrollTop > y.value;
+    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+    y.value = scrollTop;
+    isScrolling.value = true;
+    onScrollEnd(e);
+    onScroll(e);
+  };
+  useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
   return {
     x,
     y,
@@ -1045,7 +1053,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   vueDemi.watch(() => state.arrivedState[direction], async (v) => {
     var _a2, _b2;
     if (v) {
-      const elem = vueDemi.unref(element);
+      const elem = shared.resolveUnref(element);
       const previous = {
         height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
         width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
@@ -1079,9 +1087,9 @@ function useIntersectionObserver(target, callback, options = {}) {
     threshold = 0.1,
     window = defaultWindow
   } = options;
-  const isSupported = window && "IntersectionObserver" in window;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = shared.noop;
-  const stopWatch = isSupported ? vueDemi.watch(() => ({
+  const stopWatch = isSupported.value ? vueDemi.watch(() => ({
     el: unrefElement(target),
     root: unrefElement(root)
   }), ({ el, root: root2 }) => {
@@ -1401,7 +1409,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
-  vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
+  vueDemi.watch([elRef, () => shared.resolveUnref(prop)], ([el, prop2]) => {
     var _a;
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
@@ -1411,7 +1419,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
   vueDemi.watch(variable, (val) => {
     var _a;
     if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(vueDemi.unref(prop), val);
+      elRef.value.style.setProperty(shared.resolveUnref(prop), val);
   });
   return variable;
 }
@@ -1550,7 +1558,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  vueDemi.watch(() => vueDemi.unref(element), (el) => {
+  vueDemi.watch(shared.resolveRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1561,7 +1569,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = vueDemi.unref(element);
+    const ele = shared.resolveUnref(element);
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
@@ -1571,7 +1579,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = vueDemi.unref(element);
+    const ele = shared.resolveUnref(element);
     if (!ele || !isLocked.value)
       return;
     shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
@@ -1629,8 +1637,7 @@ const UseTimeAgo = vueDemi.defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
   setup(props, { slots }) {
-    const time = vueDemi.toRef(props, "time");
-    const data = vueDemi.reactive(core.useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    const data = vueDemi.reactive(core.useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
     return () => {
       if (slots.default)
         return slots.default(data);

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
 import { FunctionDirective, ObjectDirective, ComponentPublicInstance, Ref, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
-import { MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
+import { MaybeComputedRef, MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -21,18 +21,19 @@ declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {},
 declare const vOnClickOutside: FunctionDirective<any, <E = PointerEvent>(evt: E) => void>;
 
 declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
-interface KeyStrokeOptions {
+interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
-    target?: MaybeRef<EventTarget>;
+    target?: MaybeComputedRef<EventTarget>;
     passive?: boolean;
 }
 
 declare type BindingValueFunction$7 = (event: KeyboardEvent) => void;
-declare type BindingValueArray$6 = [BindingValueFunction$7, KeyStrokeOptions];
+declare type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
 declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 declare type VueInstance = ComponentPublicInstance;
 declare type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+declare type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
 declare type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface OnLongPressOptions {
@@ -86,7 +87,7 @@ interface Serializer<T> {
     read(raw: string): T;
     write(value: T): string;
 }
-interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
+interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
      * Watch for deep changes
      *
@@ -124,7 +125,7 @@ interface StorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow,
 }
 
 declare type BasicColorSchema = 'light' | 'dark' | 'auto';
-interface UseColorModeOptions<T extends string = BasicColorSchema> extends StorageOptions<T | BasicColorSchema> {
+interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseStorageOptions<T | BasicColorSchema> {
     /**
      * CSS Selector for the target element applying to
      *
@@ -215,7 +216,7 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
 
-interface ResizeObserverOptions extends ConfigurableWindow {
+interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
      * are `content-box` (the default), and `border-box`.
@@ -225,12 +226,12 @@ interface ResizeObserverOptions extends ConfigurableWindow {
     box?: 'content-box' | 'border-box';
 }
 
-declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
+declare 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 type BindingValueFunction$5 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & ResizeObserverOptions & RenderableComponent>, {}>;
+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>, {}>;
 
 interface ElementSize {
     width: number;
@@ -244,7 +245,7 @@ interface ElementSize {
  * @param callback
  * @param options
  */
-declare function useElementSize(target: MaybeElementRef, initialSize?: ElementSize, options?: ResizeObserverOptions): {
+declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
     width: vue_demi.Ref<number>;
     height: vue_demi.Ref<number>;
 };
@@ -257,12 +258,12 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-interface VisibilityScrollTargetOptions extends ConfigurableWindow {
-    scrollTarget?: MaybeRef<Element | null | undefined>;
+interface UseElementVisibilityOptions extends ConfigurableWindow {
+    scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
 }
 
 declare type BindingValueFunction$3 = (state: boolean) => void;
-declare type BindingValueArray$3 = [BindingValueFunction$3, VisibilityScrollTargetOptions];
+declare type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
 declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
 declare const UseEyeDropper: vue_demi.DefineComponent<{
@@ -275,11 +276,11 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
 
 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 UseGeolocation: vue_demi.DefineComponent<GeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<GeolocationOptions>, {}>;
+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 UseIdle: vue_demi.DefineComponent<IdleOptions & {
+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<IdleOptions & {
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
     timeout: number;
 }>, {}>;
 
@@ -342,7 +343,7 @@ interface UseScrollOptions {
  * @param element
  * @param options
  */
-declare function useScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
+declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
     x: vue_demi.Ref<number>;
     y: vue_demi.Ref<number>;
     isScrolling: vue_demi.Ref<boolean>;
@@ -373,7 +374,7 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
      *
      * @default 'bottom'
      */
-    direction?: 'top' | 'bottom';
+    direction?: 'top' | 'bottom' | 'left' | 'right';
     /**
      * Whether to preserve the current scroll position when loading more items.
      *
@@ -386,13 +387,13 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface IntersectionObserverOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
     /**
      * The Element or Document whose bounds are used as the bounding box when testing for intersection.
      */
@@ -408,10 +409,10 @@ interface IntersectionObserverOptions extends ConfigurableWindow {
 }
 
 declare type BindingValueFunction$1 = IntersectionObserverCallback;
-declare type BindingValueArray$1 = [BindingValueFunction$1, IntersectionObserverOptions];
+declare type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
-declare const UseMouse: vue_demi.DefineComponent<MouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseOptions>, {}>;
+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 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>, {}>;
 
@@ -524,7 +525,7 @@ interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'cont
 }
 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 UseTimestamp: vue_demi.DefineComponent<Omit<TimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<TimestampOptions<true>, "controls">>, {}>;
+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">>, {}>;
 
 interface UseVirtualListProps {
     /**
@@ -552,6 +553,6 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
     [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<{}>>, {}>;
 
-declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
+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>, {}>;
 
 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, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };

package/index.iife.js

@@ -13,22 +13,6 @@
       VueDemi.Vue = Vue
       VueDemi.Vue2 = Vue
       VueDemi.version = Vue.version
-      VueDemi.set = function(target, key, val) {
-        if (Array.isArray(target)) {
-          target.length = Math.max(target.length, key)
-          target.splice(key, 1, val)
-          return val
-        }
-        Vue.set(target, key, val)
-        return val
-      }
-      VueDemi.del = function(target, key) {
-        if (Array.isArray(target)) {
-          target.splice(key, 1)
-          return
-        }
-        Vue.delete(target, key)
-      }
     }
     else if (Vue.version.slice(0, 2) === '2.') {
       if (VueCompositionAPI) {
@@ -108,7 +92,7 @@
 
   function unrefElement(elRef) {
     var _a;
-    const plain = vueDemi.unref(elRef);
+    const plain = shared.resolveUnref(elRef);
     return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
   }
 
@@ -423,7 +407,7 @@
     }
     if (!storage)
       return data;
-    const rawInit = vueDemi.unref(initialValue);
+    const rawInit = shared.resolveUnref(initialValue);
     const type = guessSerializerType(rawInit);
     const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
     const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
@@ -469,13 +453,21 @@
     }
   }
 
+  function useSupported(callback, sync = false) {
+    const isSupported = vueDemi.ref();
+    const update = () => isSupported.value = Boolean(callback());
+    update();
+    shared.tryOnMounted(update, sync);
+    return isSupported;
+  }
+
   function useMediaQuery(query, options = {}) {
     const { window = defaultWindow } = options;
-    const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
+    const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
     let mediaQuery;
     const matches = vueDemi.ref(false);
     const update = () => {
-      if (!isSupported)
+      if (!isSupported.value)
         return;
       if (!mediaQuery)
         mediaQuery = window.matchMedia(query);
@@ -702,7 +694,7 @@
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
-      const initialValue = props.storageKey ? core.useStorage(props.storageKey, vueDemi.unref(props.initialValue) || { x: 0, y: 0 }, core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+      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), {
         initialValue
       })));
@@ -773,7 +765,7 @@
   function useResizeObserver(target, callback, options = {}) {
     const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
     let observer;
-    const isSupported = window && "ResizeObserver" in window;
+    const isSupported = useSupported(() => window && "ResizeObserver" in window);
     const cleanup = () => {
       if (observer) {
         observer.disconnect();
@@ -782,7 +774,7 @@
     };
     const stopWatch = vueDemi.watch(() => unrefElement(target), (el) => {
       cleanup();
-      if (isSupported && window && el) {
+      if (isSupported.value && window && el) {
         observer = new ResizeObserver(callback);
         observer.observe(el, observerOptions);
       }
@@ -846,16 +838,18 @@
       if (!window)
         return;
       const document = window.document;
-      if (!vueDemi.unref(element)) {
+      const el = shared.resolveUnref(element);
+      if (!el) {
         elementIsVisible.value = false;
       } else {
-        const rect = vueDemi.unref(element).getBoundingClientRect();
+        const rect = el.getBoundingClientRect();
         elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
       }
     };
     shared.tryOnMounted(testBounding);
-    if (window)
-      shared.tryOnMounted(() => useEventListener(vueDemi.unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    if (window) {
+      shared.tryOnMounted(() => useEventListener(() => shared.resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+    }
     return elementIsVisible;
   }
 
@@ -998,10 +992,10 @@
     });
   }
   const useImage = (options, asyncStateOptions = {}) => {
-    const state = useAsyncState(() => loadImage(vueDemi.unref(options)), void 0, __spreadValues$9({
+    const state = useAsyncState(() => loadImage(shared.resolveUnref(options)), void 0, __spreadValues$9({
       resetOnExecute: true
     }, asyncStateOptions));
-    vueDemi.watch(() => vueDemi.unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+    vueDemi.watch(() => shared.resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
     return state;
   };
 
@@ -1059,37 +1053,35 @@
       top: false,
       bottom: false
     });
-    if (element) {
-      const onScrollEnd = shared.useDebounceFn((e) => {
-        isScrolling.value = false;
-        directions.left = false;
-        directions.right = false;
-        directions.top = false;
-        directions.bottom = false;
-        onStop(e);
-      }, throttle + idle);
-      const onScrollHandler = (e) => {
-        const eventTarget = e.target === document ? e.target.documentElement : e.target;
-        const scrollLeft = eventTarget.scrollLeft;
-        directions.left = scrollLeft < x.value;
-        directions.right = scrollLeft > x.value;
-        arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-        arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
-        x.value = scrollLeft;
-        let scrollTop = eventTarget.scrollTop;
-        if (e.target === document && !scrollTop)
-          scrollTop = document.body.scrollTop;
-        directions.top = scrollTop < y.value;
-        directions.bottom = scrollTop > y.value;
-        arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-        arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
-        y.value = scrollTop;
-        isScrolling.value = true;
-        onScrollEnd(e);
-        onScroll(e);
-      };
-      useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
-    }
+    const onScrollEnd = shared.useDebounceFn((e) => {
+      isScrolling.value = false;
+      directions.left = false;
+      directions.right = false;
+      directions.top = false;
+      directions.bottom = false;
+      onStop(e);
+    }, throttle + idle);
+    const onScrollHandler = (e) => {
+      const eventTarget = e.target === document ? e.target.documentElement : e.target;
+      const scrollLeft = eventTarget.scrollLeft;
+      directions.left = scrollLeft < x.value;
+      directions.right = scrollLeft > x.value;
+      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+      x.value = scrollLeft;
+      let scrollTop = eventTarget.scrollTop;
+      if (e.target === document && !scrollTop)
+        scrollTop = document.body.scrollTop;
+      directions.top = scrollTop < y.value;
+      directions.bottom = scrollTop > y.value;
+      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+      y.value = scrollTop;
+      isScrolling.value = true;
+      onScrollEnd(e);
+      onScroll(e);
+    };
+    useEventListener(element, "scroll", throttle ? shared.useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
     return {
       x,
       y,
@@ -1129,7 +1121,7 @@
     vueDemi.watch(() => state.arrivedState[direction], async (v) => {
       var _a2, _b2;
       if (v) {
-        const elem = vueDemi.unref(element);
+        const elem = shared.resolveUnref(element);
         const previous = {
           height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
           width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
@@ -1163,9 +1155,9 @@
       threshold = 0.1,
       window = defaultWindow
     } = options;
-    const isSupported = window && "IntersectionObserver" in window;
+    const isSupported = useSupported(() => window && "IntersectionObserver" in window);
     let cleanup = shared.noop;
-    const stopWatch = isSupported ? vueDemi.watch(() => ({
+    const stopWatch = isSupported.value ? vueDemi.watch(() => ({
       el: unrefElement(target),
       root: unrefElement(root)
     }), ({ el, root: root2 }) => {
@@ -1485,7 +1477,7 @@
       var _a;
       return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
     });
-    vueDemi.watch([elRef, () => vueDemi.unref(prop)], ([el, prop2]) => {
+    vueDemi.watch([elRef, () => shared.resolveUnref(prop)], ([el, prop2]) => {
       var _a;
       if (el && window) {
         const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
@@ -1495,7 +1487,7 @@
     vueDemi.watch(variable, (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(vueDemi.unref(prop), val);
+        elRef.value.style.setProperty(shared.resolveUnref(prop), val);
     });
     return variable;
   }
@@ -1634,7 +1626,7 @@
     const isLocked = vueDemi.ref(initialState);
     let stopTouchMoveListener = null;
     let initialOverflow;
-    vueDemi.watch(() => vueDemi.unref(element), (el) => {
+    vueDemi.watch(shared.resolveRef(element), (el) => {
       if (el) {
         const ele = el;
         initialOverflow = ele.style.overflow;
@@ -1645,7 +1637,7 @@
       immediate: true
     });
     const lock = () => {
-      const ele = vueDemi.unref(element);
+      const ele = shared.resolveUnref(element);
       if (!ele || isLocked.value)
         return;
       if (shared.isIOS) {
@@ -1655,7 +1647,7 @@
       isLocked.value = true;
     };
     const unlock = () => {
-      const ele = vueDemi.unref(element);
+      const ele = shared.resolveUnref(element);
       if (!ele || !isLocked.value)
         return;
       shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
@@ -1713,8 +1705,7 @@
     name: "UseTimeAgo",
     props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
     setup(props, { slots }) {
-      const time = vueDemi.toRef(props, "time");
-      const data = vueDemi.reactive(core.useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+      const data = vueDemi.reactive(core.useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
       return () => {
         if (slots.default)
           return slots.default(data);

package/index.iife.min.js

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

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, unref, watch, computed, reactive, shallowRef, nextTick, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, toRef, toRefs } from 'vue-demi';
 import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useDark, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDocumentVisibility, useStorage as useStorage$1, isClient as isClient$1, useDraggable, useElementBounding, useElementSize as useElementSize$1, useElementVisibility as useElementVisibility$1, useEyeDropper, useFullscreen, useGeolocation, useIdle, useMouse, useMouseInElement, useMousePressed, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, usePointer, usePreferredColorScheme, usePreferredDark as usePreferredDark$1, usePreferredLanguages, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, tryOnBeforeMount, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, isIOS } from '@vueuse/shared';
+import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, directiveHooks, pausableWatch, tryOnMounted, tryOnBeforeMount, useToggle, promiseTimeout, useDebounceFn, useThrottleFn, resolveRef, isIOS } from '@vueuse/shared';
 
 const OnClickOutside = defineComponent({
   name: "OnClickOutside",
@@ -20,7 +20,7 @@ const OnClickOutside = defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = unref(elRef);
+  const plain = resolveUnref(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -335,7 +335,7 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = unref(initialValue);
+  const rawInit = resolveUnref(initialValue);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(data, () => write(data.value), { flush, deep, eventFilter });
@@ -381,13 +381,21 @@ function useStorage(key, initialValue, storage, options = {}) {
   }
 }
 
+function useSupported(callback, sync = false) {
+  const isSupported = ref();
+  const update = () => isSupported.value = Boolean(callback());
+  update();
+  tryOnMounted(update, sync);
+  return isSupported;
+}
+
 function useMediaQuery(query, options = {}) {
   const { window = defaultWindow } = options;
-  const isSupported = Boolean(window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
   let mediaQuery;
   const matches = ref(false);
   const update = () => {
-    if (!isSupported)
+    if (!isSupported.value)
       return;
     if (!mediaQuery)
       mediaQuery = window.matchMedia(query);
@@ -614,7 +622,7 @@ const UseDraggable = defineComponent({
   ],
   setup(props, { slots }) {
     const target = ref();
-    const initialValue = props.storageKey ? useStorage$1(props.storageKey, unref(props.initialValue) || { x: 0, y: 0 }, isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0) : props.initialValue || { x: 0, y: 0 };
+    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), {
       initialValue
     })));
@@ -685,7 +693,7 @@ var __objRest = (source, exclude) => {
 function useResizeObserver(target, callback, options = {}) {
   const _a = options, { window = defaultWindow } = _a, observerOptions = __objRest(_a, ["window"]);
   let observer;
-  const isSupported = window && "ResizeObserver" in window;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
   const cleanup = () => {
     if (observer) {
       observer.disconnect();
@@ -694,7 +702,7 @@ function useResizeObserver(target, callback, options = {}) {
   };
   const stopWatch = watch(() => unrefElement(target), (el) => {
     cleanup();
-    if (isSupported && window && el) {
+    if (isSupported.value && window && el) {
       observer = new ResizeObserver(callback);
       observer.observe(el, observerOptions);
     }
@@ -758,16 +766,18 @@ function useElementVisibility(element, { window = defaultWindow, scrollTarget }
     if (!window)
       return;
     const document = window.document;
-    if (!unref(element)) {
+    const el = resolveUnref(element);
+    if (!el) {
       elementIsVisible.value = false;
     } else {
-      const rect = unref(element).getBoundingClientRect();
+      const rect = el.getBoundingClientRect();
       elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
     }
   };
   tryOnMounted(testBounding);
-  if (window)
-    tryOnMounted(() => useEventListener(unref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  if (window) {
+    tryOnMounted(() => useEventListener(() => resolveUnref(scrollTarget) || window, "scroll", testBounding, { capture: false, passive: true }));
+  }
   return elementIsVisible;
 }
 
@@ -910,10 +920,10 @@ async function loadImage(options) {
   });
 }
 const useImage = (options, asyncStateOptions = {}) => {
-  const state = useAsyncState(() => loadImage(unref(options)), void 0, __spreadValues$9({
+  const state = useAsyncState(() => loadImage(resolveUnref(options)), void 0, __spreadValues$9({
     resetOnExecute: true
   }, asyncStateOptions));
-  watch(() => unref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
+  watch(() => resolveUnref(options), () => state.execute(asyncStateOptions.delay), { deep: true });
   return state;
 };
 
@@ -971,37 +981,35 @@ function useScroll(element, options = {}) {
     top: false,
     bottom: false
   });
-  if (element) {
-    const onScrollEnd = useDebounceFn((e) => {
-      isScrolling.value = false;
-      directions.left = false;
-      directions.right = false;
-      directions.top = false;
-      directions.bottom = false;
-      onStop(e);
-    }, throttle + idle);
-    const onScrollHandler = (e) => {
-      const eventTarget = e.target === document ? e.target.documentElement : e.target;
-      const scrollLeft = eventTarget.scrollLeft;
-      directions.left = scrollLeft < x.value;
-      directions.right = scrollLeft > x.value;
-      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
-      x.value = scrollLeft;
-      let scrollTop = eventTarget.scrollTop;
-      if (e.target === document && !scrollTop)
-        scrollTop = document.body.scrollTop;
-      directions.top = scrollTop < y.value;
-      directions.bottom = scrollTop > y.value;
-      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
-      y.value = scrollTop;
-      isScrolling.value = true;
-      onScrollEnd(e);
-      onScroll(e);
-    };
-    useEventListener(element, "scroll", throttle ? useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
-  }
+  const onScrollEnd = useDebounceFn((e) => {
+    isScrolling.value = false;
+    directions.left = false;
+    directions.right = false;
+    directions.top = false;
+    directions.bottom = false;
+    onStop(e);
+  }, throttle + idle);
+  const onScrollHandler = (e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const scrollLeft = eventTarget.scrollLeft;
+    directions.left = scrollLeft < x.value;
+    directions.right = scrollLeft > x.value;
+    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
+    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0);
+    x.value = scrollLeft;
+    let scrollTop = eventTarget.scrollTop;
+    if (e.target === document && !scrollTop)
+      scrollTop = document.body.scrollTop;
+    directions.top = scrollTop < y.value;
+    directions.bottom = scrollTop > y.value;
+    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
+    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0);
+    y.value = scrollTop;
+    isScrolling.value = true;
+    onScrollEnd(e);
+    onScroll(e);
+  };
+  useEventListener(element, "scroll", throttle ? useThrottleFn(onScrollHandler, throttle) : onScrollHandler, eventListenerOptions);
   return {
     x,
     y,
@@ -1041,7 +1049,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
   watch(() => state.arrivedState[direction], async (v) => {
     var _a2, _b2;
     if (v) {
-      const elem = unref(element);
+      const elem = resolveUnref(element);
       const previous = {
         height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
         width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
@@ -1075,9 +1083,9 @@ function useIntersectionObserver(target, callback, options = {}) {
     threshold = 0.1,
     window = defaultWindow
   } = options;
-  const isSupported = window && "IntersectionObserver" in window;
+  const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = noop;
-  const stopWatch = isSupported ? watch(() => ({
+  const stopWatch = isSupported.value ? watch(() => ({
     el: unrefElement(target),
     root: unrefElement(root)
   }), ({ el, root: root2 }) => {
@@ -1397,7 +1405,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
   });
-  watch([elRef, () => unref(prop)], ([el, prop2]) => {
+  watch([elRef, () => resolveUnref(prop)], ([el, prop2]) => {
     var _a;
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(prop2)) == null ? void 0 : _a.trim();
@@ -1407,7 +1415,7 @@ function useCssVar(prop, target, { window = defaultWindow, initialValue = "" } =
   watch(variable, (val) => {
     var _a;
     if ((_a = elRef.value) == null ? void 0 : _a.style)
-      elRef.value.style.setProperty(unref(prop), val);
+      elRef.value.style.setProperty(resolveUnref(prop), val);
   });
   return variable;
 }
@@ -1546,7 +1554,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  watch(() => unref(element), (el) => {
+  watch(resolveRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1557,7 +1565,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = unref(element);
+    const ele = resolveUnref(element);
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
@@ -1567,7 +1575,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = unref(element);
+    const ele = resolveUnref(element);
     if (!ele || !isLocked.value)
       return;
     isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
@@ -1625,8 +1633,7 @@ const UseTimeAgo = defineComponent({
   name: "UseTimeAgo",
   props: ["time", "updateInterval", "max", "fullDateFormatter", "messages"],
   setup(props, { slots }) {
-    const time = toRef(props, "time");
-    const data = reactive(useTimeAgo(time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
+    const data = reactive(useTimeAgo(() => props.time, __spreadProps$1(__spreadValues$2({}, props), { controls: true })));
     return () => {
       if (slots.default)
         return slots.default(data);

package/package.json

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