@vueuse/components 10.0.0-beta.3 → 10.0.0-beta.4

package/index.cjs

@@ -22,7 +22,7 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = shared.resolveUnref(elRef);
+  const plain = shared.toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -55,7 +55,7 @@ function useEventListener(...args) {
     return () => el.removeEventListener(event, listener, options2);
   };
   const stopWatch = vueDemi.watch(
-    () => [unrefElement(target), shared.resolveUnref(options)],
+    () => [unrefElement(target), shared.toValue(options)],
     ([el, options2]) => {
       cleanup();
       if (!el)
@@ -179,7 +179,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && shared.resolveUnref(dedupe))
+    if (e.repeat && shared.toValue(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -409,7 +409,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = shared.resolveUnref(defaults);
+  const rawInit = shared.toValue(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
@@ -528,7 +528,7 @@ function useMediaQuery(query, options = {}) {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(shared.resolveRef(query).value);
+    mediaQuery = window.matchMedia(shared.toRef(query).value);
     matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
     if (!mediaQuery)
       return;
@@ -573,8 +573,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
-    // TODO: switch to true in v10
-    disableTransition = false
+    disableTransition = true
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -582,11 +581,11 @@ function useColorMode(options = {}) {
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
-  const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+  const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? vueDemi.ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
   const state = vueDemi.computed({
     get() {
-      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
+      return store.value === "auto" && !emitAuto ? system.value : store.value;
     },
     set(v) {
       store.value = v;
@@ -595,13 +594,12 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = window == null ? void 0 : window.document.querySelector(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
       if (!el)
         return;
       let style;
       if (disableTransition) {
         style = window.document.createElement("style");
-        style.type = "text/css";
         style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
         window.document.head.appendChild(style);
       }
@@ -624,7 +622,7 @@ function useColorMode(options = {}) {
   );
   function defaultOnChanged(mode) {
     var _a;
-    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    const resolvedMode = mode === "auto" ? system.value : mode;
     updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
@@ -635,9 +633,13 @@ function useColorMode(options = {}) {
   }
   vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
   if (emitAuto)
-    vueDemi.watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+    vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
   shared.tryOnMounted(() => onChanged(state.value));
-  return state;
+  try {
+    return Object.assign(state, { store, system });
+  } catch (e) {
+    return state;
+  }
 }
 
 const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -646,7 +648,9 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = vueDemi.reactive({
-      mode
+      mode,
+      system: mode.system,
+      store: mode.store
     });
     return () => {
       if (slots.default)
@@ -772,7 +776,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     });
     const storageValue = props.storageKey && core.useStorage(
       props.storageKey,
-      shared.resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      shared.toValue(props.initialValue) || { x: 0, y: 0 },
       core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
@@ -981,23 +985,24 @@ function useIntersectionObserver(target, callback, options = {}) {
     root,
     rootMargin = "0px",
     threshold = 0.1,
-    window = defaultWindow
+    window = defaultWindow,
+    immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = shared.noop;
+  const isActive = vueDemi.ref(immediate);
   const stopWatch = isSupported.value ? vueDemi.watch(
-    () => ({
-      el: unrefElement(target),
-      root: unrefElement(root)
-    }),
-    ({ el, root: root2 }) => {
+    () => [unrefElement(target), unrefElement(root), isActive.value],
+    ([el, root2]) => {
       cleanup();
+      if (!isActive.value)
+        return;
       if (!el)
         return;
       const observer = new IntersectionObserver(
         callback,
         {
-          root: root2,
+          root: unrefElement(root2),
           rootMargin,
           threshold
         }
@@ -1008,15 +1013,24 @@ function useIntersectionObserver(target, callback, options = {}) {
         cleanup = shared.noop;
       };
     },
-    { immediate: true, flush: "post" }
+    { immediate, flush: "post" }
   ) : shared.noop;
   const stop = () => {
     cleanup();
     stopWatch();
+    isActive.value = false;
   };
   shared.tryOnScopeDispose(stop);
   return {
     isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
     stop
   };
 }
@@ -1181,14 +1195,14 @@ async function loadImage(options) {
 }
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
-    () => loadImage(shared.resolveUnref(options)),
+    () => loadImage(shared.toValue(options)),
     void 0,
     __spreadValues$9({
       resetOnExecute: true
     }, asyncStateOptions)
   );
   vueDemi.watch(
-    () => shared.resolveUnref(options),
+    () => shared.toValue(options),
     () => state.execute(asyncStateOptions.delay),
     { deep: true }
   );
@@ -1256,13 +1270,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = shared.resolveUnref(element);
+    const _element = shared.toValue(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
-      left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
-      behavior: shared.resolveUnref(behavior)
+      top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+      left: (_b = shared.toValue(_x)) != null ? _b : x.value,
+      behavior: shared.toValue(behavior)
     });
   }
   const isScrolling = vueDemi.ref(false);
@@ -1291,19 +1305,34 @@ function useScroll(element, options = {}) {
   const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const { display, flexDirection } = getComputedStyle(eventTarget);
     const scrollLeft = eventTarget.scrollLeft;
     directions.left = scrollLeft < internalX.value;
-    directions.right = scrollLeft > internalY.value;
-    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    directions.right = scrollLeft > internalX.value;
+    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "row-reverse") {
+      arrivedState.left = right;
+      arrivedState.right = left;
+    } else {
+      arrivedState.left = left;
+      arrivedState.right = right;
+    }
     internalX.value = scrollLeft;
     let scrollTop = eventTarget.scrollTop;
     if (e.target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "column-reverse") {
+      arrivedState.top = bottom;
+      arrivedState.bottom = top;
+    } else {
+      arrivedState.top = top;
+      arrivedState.bottom = bottom;
+    }
     internalY.value = scrollTop;
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1365,7 +1394,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     async (v) => {
       var _a2, _b2;
       if (v) {
-        const elem = shared.resolveUnref(element);
+        const elem = shared.toValue(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
@@ -1507,7 +1536,7 @@ const UseObjectUrl = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "object"
   ],
   setup(props, { slots }) {
-    const object = vueDemi.toRef(props, "object");
+    const object = shared.toRef(props, "object");
     const url = core.useObjectUrl(object);
     return () => {
       if (slots.default && url.value)
@@ -1726,8 +1755,8 @@ function useCssVar(prop, target, options = {}) {
   });
   function updateCssVar() {
     var _a;
-    const key = shared.resolveUnref(prop);
-    const el = shared.resolveUnref(elRef);
+    const key = shared.toValue(prop);
+    const el = shared.toValue(elRef);
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
@@ -1740,7 +1769,7 @@ function useCssVar(prop, target, options = {}) {
     });
   }
   vueDemi.watch(
-    [elRef, () => shared.resolveUnref(prop)],
+    [elRef, () => shared.toValue(prop)],
     updateCssVar,
     { immediate: true }
   );
@@ -1749,7 +1778,7 @@ function useCssVar(prop, target, options = {}) {
     (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(shared.resolveUnref(prop), val);
+        elRef.value.style.setProperty(shared.toValue(prop), val);
     }
   );
   return variable;
@@ -1903,7 +1932,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = vueDemi.ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  vueDemi.watch(shared.resolveRef(element), (el) => {
+  vueDemi.watch(shared.toRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1914,7 +1943,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || isLocked.value)
       return;
     if (shared.isIOS) {
@@ -1931,7 +1960,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = shared.resolveUnref(element);
+    const ele = shared.toValue(element);
     if (!ele || !isLocked.value)
       return;
     shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue_demi from 'vue-demi';
 import { ComponentPublicInstance, ObjectDirective, Ref, UnwrapNestedRefs, ComputedRef, FunctionDirective } from 'vue-demi';
-import { MaybeRef, MaybeComputedRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
+import { MaybeRef, MaybeRefOrGetter, 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 {
@@ -18,7 +18,7 @@ interface RenderableComponent {
 
 type VueInstance = ComponentPublicInstance;
 type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
-type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
+type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
 type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
 
 interface OnClickOutsideOptions extends ConfigurableWindow {
@@ -53,14 +53,14 @@ declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandle
 type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
 interface OnKeyStrokeOptions {
     eventName?: KeyStrokeEventName;
-    target?: MaybeComputedRef<EventTarget | null | undefined>;
+    target?: MaybeRefOrGetter<EventTarget | null | undefined>;
     passive?: boolean;
     /**
      * Set to `true` to ignore repeated events when the key is being held down.
      *
      * @default false
      */
-    dedupe?: MaybeComputedRef<boolean>;
+    dedupe?: MaybeRefOrGetter<boolean>;
 }
 
 type BindingValueFunction$7 = (event: KeyboardEvent) => void;
@@ -171,7 +171,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      *
      * @default 'html'
      */
-    selector?: string;
+    selector?: string | MaybeRefOrGetter<HTMLElement | null | undefined>;
     /**
      * HTML attribute applying the target element
      *
@@ -228,7 +228,7 @@ interface UseColorModeOptions<T extends string = BasicColorSchema> extends UseSt
      * Disable transition on switch
      *
      * @see https://paco.me/writing/disable-theme-transitions
-     * @default false
+     * @default true
      */
     disableTransition?: boolean;
 }
@@ -312,7 +312,7 @@ declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
 interface UseElementVisibilityOptions extends ConfigurableWindow {
-    scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>;
+    scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
 type BindingValueFunction$3 = (state: boolean) => void;
@@ -394,7 +394,7 @@ interface UseScrollOptions {
      *
      * @default 'auto'
      */
-    behavior?: MaybeComputedRef<ScrollBehavior>;
+    behavior?: MaybeRefOrGetter<ScrollBehavior>;
 }
 /**
  * Reactive scroll.
@@ -403,7 +403,7 @@ interface UseScrollOptions {
  * @param element
  * @param options
  */
-declare function useScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
+declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
     x: vue_demi.WritableComputedRef<number>;
     y: vue_demi.WritableComputedRef<number>;
     isScrolling: vue_demi.Ref<boolean>;
@@ -447,13 +447,19 @@ interface UseInfiniteScrollOptions extends UseScrollOptions {
  *
  * @see https://vueuse.org/useInfiniteScroll
  */
-declare function useInfiniteScroll(element: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
+declare function useInfiniteScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void | Promise<void>, options?: UseInfiniteScrollOptions): void;
 
 type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
     /**
      * The Element or Document whose bounds are used as the bounding box when testing for intersection.
      */
@@ -493,12 +499,12 @@ interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
      */
-    total?: MaybeRef<number>;
+    total?: MaybeRefOrGetter<number>;
     /**
      * The number of items to display per page.
      * @default 10
      */
-    pageSize?: MaybeRef<number>;
+    pageSize?: MaybeRefOrGetter<number>;
     /**
      * The current page number.
      * @default 1

package/index.iife.js

@@ -133,7 +133,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function unrefElement(elRef) {
     var _a;
-    const plain = shared.resolveUnref(elRef);
+    const plain = shared.toValue(elRef);
     return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
   }
 
@@ -166,7 +166,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       return () => el.removeEventListener(event, listener, options2);
     };
     const stopWatch = vueDemi.watch(
-      () => [unrefElement(target), shared.resolveUnref(options)],
+      () => [unrefElement(target), shared.toValue(options)],
       ([el, options2]) => {
         cleanup();
         if (!el)
@@ -290,7 +290,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     } = options;
     const predicate = createKeyPredicate(key);
     const listener = (e) => {
-      if (e.repeat && shared.resolveUnref(dedupe))
+      if (e.repeat && shared.toValue(dedupe))
         return;
       if (predicate(e))
         handler(e);
@@ -520,7 +520,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
     if (!storage)
       return data;
-    const rawInit = shared.resolveUnref(defaults);
+    const rawInit = shared.toValue(defaults);
     const type = guessSerializerType(rawInit);
     const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
     const { pause: pauseWatch, resume: resumeWatch } = shared.pausableWatch(
@@ -639,7 +639,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       if (!isSupported.value)
         return;
       cleanup();
-      mediaQuery = window.matchMedia(shared.resolveRef(query).value);
+      mediaQuery = window.matchMedia(shared.toRef(query).value);
       matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
       if (!mediaQuery)
         return;
@@ -684,8 +684,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       listenToStorageChanges = true,
       storageRef,
       emitAuto,
-      // TODO: switch to true in v10
-      disableTransition = false
+      disableTransition = true
     } = options;
     const modes = __spreadValues$b({
       auto: "",
@@ -693,11 +692,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       dark: "dark"
     }, options.modes || {});
     const preferredDark = usePreferredDark({ window });
-    const preferredMode = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
+    const system = vueDemi.computed(() => preferredDark.value ? "dark" : "light");
     const store = storageRef || (storageKey == null ? vueDemi.ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
     const state = vueDemi.computed({
       get() {
-        return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
+        return store.value === "auto" && !emitAuto ? system.value : store.value;
       },
       set(v) {
         store.value = v;
@@ -706,13 +705,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const updateHTMLAttrs = getSSRHandler(
       "updateHTMLAttrs",
       (selector2, attribute2, value) => {
-        const el = window == null ? void 0 : window.document.querySelector(selector2);
+        const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : shared.toValue(selector2);
         if (!el)
           return;
         let style;
         if (disableTransition) {
           style = window.document.createElement("style");
-          style.type = "text/css";
           style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
           window.document.head.appendChild(style);
         }
@@ -735,7 +733,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     );
     function defaultOnChanged(mode) {
       var _a;
-      const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+      const resolvedMode = mode === "auto" ? system.value : mode;
       updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
     }
     function onChanged(mode) {
@@ -746,9 +744,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
     vueDemi.watch(state, onChanged, { flush: "post", immediate: true });
     if (emitAuto)
-      vueDemi.watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+      vueDemi.watch(system, () => onChanged(state.value), { flush: "post" });
     shared.tryOnMounted(() => onChanged(state.value));
-    return state;
+    try {
+      return Object.assign(state, { store, system });
+    } catch (e) {
+      return state;
+    }
   }
 
   const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
@@ -757,7 +759,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     setup(props, { slots }) {
       const mode = useColorMode(props);
       const data = vueDemi.reactive({
-        mode
+        mode,
+        system: mode.system,
+        store: mode.store
       });
       return () => {
         if (slots.default)
@@ -883,7 +887,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       });
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
-        shared.resolveUnref(props.initialValue) || { x: 0, y: 0 },
+        shared.toValue(props.initialValue) || { x: 0, y: 0 },
         core.isClient ? props.storageType === "session" ? sessionStorage : localStorage : void 0
       );
       const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
@@ -1092,23 +1096,24 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       root,
       rootMargin = "0px",
       threshold = 0.1,
-      window = defaultWindow
+      window = defaultWindow,
+      immediate = true
     } = options;
     const isSupported = useSupported(() => window && "IntersectionObserver" in window);
     let cleanup = shared.noop;
+    const isActive = vueDemi.ref(immediate);
     const stopWatch = isSupported.value ? vueDemi.watch(
-      () => ({
-        el: unrefElement(target),
-        root: unrefElement(root)
-      }),
-      ({ el, root: root2 }) => {
+      () => [unrefElement(target), unrefElement(root), isActive.value],
+      ([el, root2]) => {
         cleanup();
+        if (!isActive.value)
+          return;
         if (!el)
           return;
         const observer = new IntersectionObserver(
           callback,
           {
-            root: root2,
+            root: unrefElement(root2),
             rootMargin,
             threshold
           }
@@ -1119,15 +1124,24 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
           cleanup = shared.noop;
         };
       },
-      { immediate: true, flush: "post" }
+      { immediate, flush: "post" }
     ) : shared.noop;
     const stop = () => {
       cleanup();
       stopWatch();
+      isActive.value = false;
     };
     shared.tryOnScopeDispose(stop);
     return {
       isSupported,
+      isActive,
+      pause() {
+        cleanup();
+        isActive.value = false;
+      },
+      resume() {
+        isActive.value = true;
+      },
       stop
     };
   }
@@ -1292,14 +1306,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
   function useImage(options, asyncStateOptions = {}) {
     const state = useAsyncState(
-      () => loadImage(shared.resolveUnref(options)),
+      () => loadImage(shared.toValue(options)),
       void 0,
       __spreadValues$9({
         resetOnExecute: true
       }, asyncStateOptions)
     );
     vueDemi.watch(
-      () => shared.resolveUnref(options),
+      () => shared.toValue(options),
       () => state.execute(asyncStateOptions.delay),
       { deep: true }
     );
@@ -1367,13 +1381,13 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     });
     function scrollTo(_x, _y) {
       var _a, _b, _c;
-      const _element = shared.resolveUnref(element);
+      const _element = shared.toValue(element);
       if (!_element)
         return;
       (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-        top: (_a = shared.resolveUnref(_y)) != null ? _a : y.value,
-        left: (_b = shared.resolveUnref(_x)) != null ? _b : x.value,
-        behavior: shared.resolveUnref(behavior)
+        top: (_a = shared.toValue(_y)) != null ? _a : y.value,
+        left: (_b = shared.toValue(_x)) != null ? _b : x.value,
+        behavior: shared.toValue(behavior)
       });
     }
     const isScrolling = vueDemi.ref(false);
@@ -1402,19 +1416,34 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const onScrollEndDebounced = shared.useDebounceFn(onScrollEnd, throttle + idle);
     const onScrollHandler = (e) => {
       const eventTarget = e.target === document ? e.target.documentElement : e.target;
+      const { display, flexDirection } = getComputedStyle(eventTarget);
       const scrollLeft = eventTarget.scrollLeft;
       directions.left = scrollLeft < internalX.value;
-      directions.right = scrollLeft > internalY.value;
-      arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-      arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      directions.right = scrollLeft > internalX.value;
+      const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+      const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      if (display === "flex" && flexDirection === "row-reverse") {
+        arrivedState.left = right;
+        arrivedState.right = left;
+      } else {
+        arrivedState.left = left;
+        arrivedState.right = right;
+      }
       internalX.value = scrollLeft;
       let scrollTop = eventTarget.scrollTop;
       if (e.target === document && !scrollTop)
         scrollTop = document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
-      arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-      arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+      const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      if (display === "flex" && flexDirection === "column-reverse") {
+        arrivedState.top = bottom;
+        arrivedState.bottom = top;
+      } else {
+        arrivedState.top = top;
+        arrivedState.bottom = bottom;
+      }
       internalY.value = scrollTop;
       isScrolling.value = true;
       onScrollEndDebounced(e);
@@ -1476,7 +1505,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       async (v) => {
         var _a2, _b2;
         if (v) {
-          const elem = shared.resolveUnref(element);
+          const elem = shared.toValue(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
@@ -1618,7 +1647,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "object"
     ],
     setup(props, { slots }) {
-      const object = vueDemi.toRef(props, "object");
+      const object = shared.toRef(props, "object");
       const url = core.useObjectUrl(object);
       return () => {
         if (slots.default && url.value)
@@ -1837,8 +1866,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     });
     function updateCssVar() {
       var _a;
-      const key = shared.resolveUnref(prop);
-      const el = shared.resolveUnref(elRef);
+      const key = shared.toValue(prop);
+      const el = shared.toValue(elRef);
       if (el && window) {
         const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
         variable.value = value || initialValue;
@@ -1851,7 +1880,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       });
     }
     vueDemi.watch(
-      [elRef, () => shared.resolveUnref(prop)],
+      [elRef, () => shared.toValue(prop)],
       updateCssVar,
       { immediate: true }
     );
@@ -1860,7 +1889,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       (val) => {
         var _a;
         if ((_a = elRef.value) == null ? void 0 : _a.style)
-          elRef.value.style.setProperty(shared.resolveUnref(prop), val);
+          elRef.value.style.setProperty(shared.toValue(prop), val);
       }
     );
     return variable;
@@ -2014,7 +2043,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const isLocked = vueDemi.ref(initialState);
     let stopTouchMoveListener = null;
     let initialOverflow;
-    vueDemi.watch(shared.resolveRef(element), (el) => {
+    vueDemi.watch(shared.toRef(element), (el) => {
       if (el) {
         const ele = el;
         initialOverflow = ele.style.overflow;
@@ -2025,7 +2054,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       immediate: true
     });
     const lock = () => {
-      const ele = shared.resolveUnref(element);
+      const ele = shared.toValue(element);
       if (!ele || isLocked.value)
         return;
       if (shared.isIOS) {
@@ -2042,7 +2071,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       isLocked.value = true;
     };
     const unlock = () => {
-      const ele = shared.resolveUnref(element);
+      const ele = shared.toValue(element);
       if (!ele || !isLocked.value)
         return;
       shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());

package/index.iife.min.js

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

package/index.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, toRef, toRefs } from 'vue-demi';
+import { defineComponent, ref, h, watch, computed, reactive, shallowRef, nextTick, getCurrentInstance, onMounted, watchEffect, 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, usePointerLock, usePreferredColorScheme, usePreferredContrast, usePreferredDark as usePreferredDark$1, usePreferredLanguages, usePreferredReducedMotion, useMutationObserver, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { resolveUnref, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, resolveRef, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
+import { toValue, isClient, isString, noop, tryOnScopeDispose, isIOS, directiveHooks, pausableWatch, isFunction, toRef, tryOnMounted, useToggle, promiseTimeout, useDebounceFn, useThrottleFn } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -20,7 +20,7 @@ const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 
 function unrefElement(elRef) {
   var _a;
-  const plain = resolveUnref(elRef);
+  const plain = toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
@@ -53,7 +53,7 @@ function useEventListener(...args) {
     return () => el.removeEventListener(event, listener, options2);
   };
   const stopWatch = watch(
-    () => [unrefElement(target), resolveUnref(options)],
+    () => [unrefElement(target), toValue(options)],
     ([el, options2]) => {
       cleanup();
       if (!el)
@@ -177,7 +177,7 @@ function onKeyStroke(...args) {
   } = options;
   const predicate = createKeyPredicate(key);
   const listener = (e) => {
-    if (e.repeat && resolveUnref(dedupe))
+    if (e.repeat && toValue(dedupe))
       return;
     if (predicate(e))
       handler(e);
@@ -407,7 +407,7 @@ function useStorage(key, defaults, storage, options = {}) {
   }
   if (!storage)
     return data;
-  const rawInit = resolveUnref(defaults);
+  const rawInit = toValue(defaults);
   const type = guessSerializerType(rawInit);
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = pausableWatch(
@@ -526,7 +526,7 @@ function useMediaQuery(query, options = {}) {
     if (!isSupported.value)
       return;
     cleanup();
-    mediaQuery = window.matchMedia(resolveRef(query).value);
+    mediaQuery = window.matchMedia(toRef(query).value);
     matches.value = !!(mediaQuery == null ? void 0 : mediaQuery.matches);
     if (!mediaQuery)
       return;
@@ -571,8 +571,7 @@ function useColorMode(options = {}) {
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
-    // TODO: switch to true in v10
-    disableTransition = false
+    disableTransition = true
   } = options;
   const modes = __spreadValues$b({
     auto: "",
@@ -580,11 +579,11 @@ function useColorMode(options = {}) {
     dark: "dark"
   }, options.modes || {});
   const preferredDark = usePreferredDark({ window });
-  const preferredMode = computed(() => preferredDark.value ? "dark" : "light");
+  const system = computed(() => preferredDark.value ? "dark" : "light");
   const store = storageRef || (storageKey == null ? ref(initialValue) : useStorage(storageKey, initialValue, storage, { window, listenToStorageChanges }));
   const state = computed({
     get() {
-      return store.value === "auto" && !emitAuto ? preferredMode.value : store.value;
+      return store.value === "auto" && !emitAuto ? system.value : store.value;
     },
     set(v) {
       store.value = v;
@@ -593,13 +592,12 @@ function useColorMode(options = {}) {
   const updateHTMLAttrs = getSSRHandler(
     "updateHTMLAttrs",
     (selector2, attribute2, value) => {
-      const el = window == null ? void 0 : window.document.querySelector(selector2);
+      const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : toValue(selector2);
       if (!el)
         return;
       let style;
       if (disableTransition) {
         style = window.document.createElement("style");
-        style.type = "text/css";
         style.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
         window.document.head.appendChild(style);
       }
@@ -622,7 +620,7 @@ function useColorMode(options = {}) {
   );
   function defaultOnChanged(mode) {
     var _a;
-    const resolvedMode = mode === "auto" ? preferredMode.value : mode;
+    const resolvedMode = mode === "auto" ? system.value : mode;
     updateHTMLAttrs(selector, attribute, (_a = modes[resolvedMode]) != null ? _a : resolvedMode);
   }
   function onChanged(mode) {
@@ -633,9 +631,13 @@ function useColorMode(options = {}) {
   }
   watch(state, onChanged, { flush: "post", immediate: true });
   if (emitAuto)
-    watch(preferredMode, () => onChanged(state.value), { flush: "post" });
+    watch(system, () => onChanged(state.value), { flush: "post" });
   tryOnMounted(() => onChanged(state.value));
-  return state;
+  try {
+    return Object.assign(state, { store, system });
+  } catch (e) {
+    return state;
+  }
 }
 
 const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
@@ -644,7 +646,9 @@ const UseColorMode = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   setup(props, { slots }) {
     const mode = useColorMode(props);
     const data = reactive({
-      mode
+      mode,
+      system: mode.system,
+      store: mode.store
     });
     return () => {
       if (slots.default)
@@ -770,7 +774,7 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     });
     const storageValue = props.storageKey && useStorage$1(
       props.storageKey,
-      resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      toValue(props.initialValue) || { x: 0, y: 0 },
       isClient$1 ? props.storageType === "session" ? sessionStorage : localStorage : void 0
     );
     const initialValue = storageValue || props.initialValue || { x: 0, y: 0 };
@@ -979,23 +983,24 @@ function useIntersectionObserver(target, callback, options = {}) {
     root,
     rootMargin = "0px",
     threshold = 0.1,
-    window = defaultWindow
+    window = defaultWindow,
+    immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   let cleanup = noop;
+  const isActive = ref(immediate);
   const stopWatch = isSupported.value ? watch(
-    () => ({
-      el: unrefElement(target),
-      root: unrefElement(root)
-    }),
-    ({ el, root: root2 }) => {
+    () => [unrefElement(target), unrefElement(root), isActive.value],
+    ([el, root2]) => {
       cleanup();
+      if (!isActive.value)
+        return;
       if (!el)
         return;
       const observer = new IntersectionObserver(
         callback,
         {
-          root: root2,
+          root: unrefElement(root2),
           rootMargin,
           threshold
         }
@@ -1006,15 +1011,24 @@ function useIntersectionObserver(target, callback, options = {}) {
         cleanup = noop;
       };
     },
-    { immediate: true, flush: "post" }
+    { immediate, flush: "post" }
   ) : noop;
   const stop = () => {
     cleanup();
     stopWatch();
+    isActive.value = false;
   };
   tryOnScopeDispose(stop);
   return {
     isSupported,
+    isActive,
+    pause() {
+      cleanup();
+      isActive.value = false;
+    },
+    resume() {
+      isActive.value = true;
+    },
     stop
   };
 }
@@ -1179,14 +1193,14 @@ async function loadImage(options) {
 }
 function useImage(options, asyncStateOptions = {}) {
   const state = useAsyncState(
-    () => loadImage(resolveUnref(options)),
+    () => loadImage(toValue(options)),
     void 0,
     __spreadValues$9({
       resetOnExecute: true
     }, asyncStateOptions)
   );
   watch(
-    () => resolveUnref(options),
+    () => toValue(options),
     () => state.execute(asyncStateOptions.delay),
     { deep: true }
   );
@@ -1254,13 +1268,13 @@ function useScroll(element, options = {}) {
   });
   function scrollTo(_x, _y) {
     var _a, _b, _c;
-    const _element = resolveUnref(element);
+    const _element = toValue(element);
     if (!_element)
       return;
     (_c = _element instanceof Document ? document.body : _element) == null ? void 0 : _c.scrollTo({
-      top: (_a = resolveUnref(_y)) != null ? _a : y.value,
-      left: (_b = resolveUnref(_x)) != null ? _b : x.value,
-      behavior: resolveUnref(behavior)
+      top: (_a = toValue(_y)) != null ? _a : y.value,
+      left: (_b = toValue(_x)) != null ? _b : x.value,
+      behavior: toValue(behavior)
     });
   }
   const isScrolling = ref(false);
@@ -1289,19 +1303,34 @@ function useScroll(element, options = {}) {
   const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
   const onScrollHandler = (e) => {
     const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const { display, flexDirection } = getComputedStyle(eventTarget);
     const scrollLeft = eventTarget.scrollLeft;
     directions.left = scrollLeft < internalX.value;
-    directions.right = scrollLeft > internalY.value;
-    arrivedState.left = scrollLeft <= 0 + (offset.left || 0);
-    arrivedState.right = scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    directions.right = scrollLeft > internalX.value;
+    const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+    const right = Math.abs(scrollLeft) + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "row-reverse") {
+      arrivedState.left = right;
+      arrivedState.right = left;
+    } else {
+      arrivedState.left = left;
+      arrivedState.right = right;
+    }
     internalX.value = scrollLeft;
     let scrollTop = eventTarget.scrollTop;
     if (e.target === document && !scrollTop)
       scrollTop = document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    arrivedState.top = scrollTop <= 0 + (offset.top || 0);
-    arrivedState.bottom = scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+    const bottom = Math.abs(scrollTop) + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    if (display === "flex" && flexDirection === "column-reverse") {
+      arrivedState.top = bottom;
+      arrivedState.bottom = top;
+    } else {
+      arrivedState.top = top;
+      arrivedState.bottom = bottom;
+    }
     internalY.value = scrollTop;
     isScrolling.value = true;
     onScrollEndDebounced(e);
@@ -1363,7 +1392,7 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     async (v) => {
       var _a2, _b2;
       if (v) {
-        const elem = resolveUnref(element);
+        const elem = toValue(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
@@ -1724,8 +1753,8 @@ function useCssVar(prop, target, options = {}) {
   });
   function updateCssVar() {
     var _a;
-    const key = resolveUnref(prop);
-    const el = resolveUnref(elRef);
+    const key = toValue(prop);
+    const el = toValue(elRef);
     if (el && window) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
@@ -1738,7 +1767,7 @@ function useCssVar(prop, target, options = {}) {
     });
   }
   watch(
-    [elRef, () => resolveUnref(prop)],
+    [elRef, () => toValue(prop)],
     updateCssVar,
     { immediate: true }
   );
@@ -1747,7 +1776,7 @@ function useCssVar(prop, target, options = {}) {
     (val) => {
       var _a;
       if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(resolveUnref(prop), val);
+        elRef.value.style.setProperty(toValue(prop), val);
     }
   );
   return variable;
@@ -1901,7 +1930,7 @@ function useScrollLock(element, initialState = false) {
   const isLocked = ref(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow;
-  watch(resolveRef(element), (el) => {
+  watch(toRef(element), (el) => {
     if (el) {
       const ele = el;
       initialOverflow = ele.style.overflow;
@@ -1912,7 +1941,7 @@ function useScrollLock(element, initialState = false) {
     immediate: true
   });
   const lock = () => {
-    const ele = resolveUnref(element);
+    const ele = toValue(element);
     if (!ele || isLocked.value)
       return;
     if (isIOS) {
@@ -1929,7 +1958,7 @@ function useScrollLock(element, initialState = false) {
     isLocked.value = true;
   };
   const unlock = () => {
-    const ele = resolveUnref(element);
+    const ele = toValue(element);
     if (!ele || !isLocked.value)
       return;
     isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());

package/package.json

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