@vueuse/components 12.0.0 → 12.2.0-beta.3

package/index.cjs

@@ -413,6 +413,12 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+function useSSRWidth() {
+  const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+
 function useMounted() {
   const isMounted = vue.ref(false);
   const instance = vue.getCurrentInstance();
@@ -433,8 +439,9 @@ function useSupported(callback) {
 }
 
 function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const ssrSupport = vue.ref(typeof ssrWidth === "number");
   let mediaQuery;
   const matches = vue.ref(false);
   const handler = (event) => {
@@ -449,6 +456,24 @@ function useMediaQuery(query, options = {}) {
       mediaQuery.removeListener(handler);
   };
   const stopWatch = vue.watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      const queryStrings = shared.toValue(query).split(",");
+      matches.value = queryStrings.some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) {
+          res = ssrWidth >= shared.pxValue(minWidth[1]);
+        }
+        if (maxWidth && res) {
+          res = ssrWidth <= shared.pxValue(maxWidth[1]);
+        }
+        return not ? !res : res;
+      });
+      return;
+    }
     if (!isSupported.value)
       return;
     cleanup();
@@ -464,7 +489,7 @@ function useMediaQuery(query, options = {}) {
     cleanup();
     mediaQuery = void 0;
   });
-  return matches;
+  return vue.computed(() => matches.value);
 }
 
 function usePreferredDark(options) {
@@ -762,7 +787,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
 const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
-    const data = vue.reactive(core.useDeviceMotion());
+    const data = core.useDeviceMotion();
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1126,7 +1151,12 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin
+  } = options;
   const elementIsVisible = vue.ref(false);
   useIntersectionObserver(
     element,
@@ -1144,7 +1174,8 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold
+      threshold,
+      rootMargin: shared.toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -1278,20 +1309,32 @@ function useAsyncState(promise, initialState, options) {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy, width, height, decoding, fetchPriority, ismap, usemap } = options;
     img.src = src;
-    if (srcset)
+    if (srcset != null)
       img.srcset = srcset;
-    if (sizes)
+    if (sizes != null)
       img.sizes = sizes;
-    if (clazz)
+    if (clazz != null)
       img.className = clazz;
-    if (loading)
+    if (loading != null)
       img.loading = loading;
-    if (crossorigin)
+    if (crossorigin != null)
       img.crossOrigin = crossorigin;
-    if (referrerPolicy)
+    if (referrerPolicy != null)
       img.referrerPolicy = referrerPolicy;
+    if (width != null)
+      img.width = width;
+    if (height != null)
+      img.height = height;
+    if (decoding != null)
+      img.decoding = decoding;
+    if (fetchPriority != null)
+      img.fetchPriority = fetchPriority;
+    if (ismap != null)
+      img.isMap = ismap;
+    if (usemap != null)
+      img.useMap = usemap;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -1324,7 +1367,13 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     "class",
     "loading",
     "crossorigin",
-    "referrerPolicy"
+    "referrerPolicy",
+    "width",
+    "height",
+    "decoding",
+    "fetchPriority",
+    "ismap",
+    "usemap"
   ],
   setup(props, { slots }) {
     const data = vue.reactive(useImage(props));
@@ -1436,12 +1485,13 @@ function useScroll(element, options = {}) {
     if (!window)
       return;
     const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-    const { display, flexDirection } = getComputedStyle(el);
+    const { display, flexDirection, direction } = getComputedStyle(el);
+    const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= (offset.left || 0);
-    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = scrollLeft * directionMultipler <= (offset.left || 0);
+    const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1455,8 +1505,8 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = scrollTop <= (offset.top || 0);
+    const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1826,6 +1876,19 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComp
   }
 });
 
+const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+  name: "UsePreferredReducedTransparency",
+  setup(props, { slots }) {
+    const data = vue.reactive({
+      transparency: core.usePreferredReducedTransparency()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const vResizeObserver = {
   mounted(el, binding) {
     if (typeof binding.value === "function")
@@ -2230,6 +2293,7 @@ exports.UsePreferredContrast = UsePreferredContrast;
 exports.UsePreferredDark = UsePreferredDark;
 exports.UsePreferredLanguages = UsePreferredLanguages;
 exports.UsePreferredReducedMotion = UsePreferredReducedMotion;
+exports.UsePreferredReducedTransparency = UsePreferredReducedTransparency;
 exports.UseScreenSafeArea = UseScreenSafeArea;
 exports.UseTimeAgo = UseTimeAgo;
 exports.UseTimestamp = UseTimestamp;

package/index.d.cts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -406,6 +413,39 @@ declare const UseIdle: vue.DefineComponent<UseIdleOptions & {
     timeout: number;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
+interface UseImageOptions {
+    /** Address of the resource */
+    src: string;
+    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
+    srcset?: string;
+    /** Image sizes for different page layouts */
+    sizes?: string;
+    /** Image alternative information */
+    alt?: string;
+    /** Image classes */
+    class?: string;
+    /** Image loading */
+    loading?: HTMLImageElement['loading'];
+    /** Image CORS settings */
+    crossorigin?: string;
+    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+    referrerPolicy?: HTMLImageElement['referrerPolicy'];
+    /** Image width */
+    width?: HTMLImageElement['width'];
+    /** Image height */
+    height?: HTMLImageElement['height'];
+    /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
+    decoding?: HTMLImageElement['decoding'];
+    /** Provides a hint of the relative priority to use when fetching the image */
+    fetchPriority?: HTMLImageElement['fetchPriority'];
+    /** Provides a hint of the importance of the image */
+    ismap?: HTMLImageElement['isMap'];
+    /** The partial URL (starting with #) of an image map associated with the element */
+    usemap?: HTMLImageElement['useMap'];
+}
+
+declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseScrollOptions extends ConfigurableWindow {
     /**
      * Throttle time for scroll event, it’s disabled by default.
@@ -524,6 +564,31 @@ declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: May
     reset(): void;
 };
 
+type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+
+type BindingValueFunction$2 = IntersectionObserverCallback;
+type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+
+declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+interface UseObjectUrlProps {
+    object: Blob | MediaSource | undefined;
+}
+declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
@@ -562,52 +627,6 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-interface UseImageOptions {
-    /** Address of the resource */
-    src: string;
-    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
-    srcset?: string;
-    /** Image sizes for different page layouts */
-    sizes?: string;
-    /** Image alternative information */
-    alt?: string;
-    /** Image classes */
-    class?: string;
-    /** Image loading */
-    loading?: HTMLImageElement['loading'];
-    /** Image CORS settings */
-    crossorigin?: string;
-    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
-    referrerPolicy?: HTMLImageElement['referrerPolicy'];
-}
-
-declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
-type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
-
-type BindingValueFunction$2 = IntersectionObserverCallback;
-type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
-declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
-
-declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface UseObjectUrlProps {
-    object: Blob | MediaSource | undefined;
-}
-declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
 declare const UseOffsetPagination: vue.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseOffsetPaginationOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
 declare const UseOnline: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -646,6 +665,10 @@ declare const UsePreferredReducedMotion: vue.DefineComponent<{}, () => vue.VNode
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+declare const UsePreferredReducedTransparency: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 type BindingValueFunction$1 = ResizeObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
 declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
@@ -710,4 +733,4 @@ declare const UseWindowFocus: vue.DefineComponent<{}, () => vue.VNode<vue.Render
 
 declare const UseWindowSize: vue.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseWindowSizeOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
-export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
+export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/index.d.mts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -406,6 +413,39 @@ declare const UseIdle: vue.DefineComponent<UseIdleOptions & {
     timeout: number;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
+interface UseImageOptions {
+    /** Address of the resource */
+    src: string;
+    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
+    srcset?: string;
+    /** Image sizes for different page layouts */
+    sizes?: string;
+    /** Image alternative information */
+    alt?: string;
+    /** Image classes */
+    class?: string;
+    /** Image loading */
+    loading?: HTMLImageElement['loading'];
+    /** Image CORS settings */
+    crossorigin?: string;
+    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+    referrerPolicy?: HTMLImageElement['referrerPolicy'];
+    /** Image width */
+    width?: HTMLImageElement['width'];
+    /** Image height */
+    height?: HTMLImageElement['height'];
+    /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
+    decoding?: HTMLImageElement['decoding'];
+    /** Provides a hint of the relative priority to use when fetching the image */
+    fetchPriority?: HTMLImageElement['fetchPriority'];
+    /** Provides a hint of the importance of the image */
+    ismap?: HTMLImageElement['isMap'];
+    /** The partial URL (starting with #) of an image map associated with the element */
+    usemap?: HTMLImageElement['useMap'];
+}
+
+declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseScrollOptions extends ConfigurableWindow {
     /**
      * Throttle time for scroll event, it’s disabled by default.
@@ -524,6 +564,31 @@ declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: May
     reset(): void;
 };
 
+type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+
+type BindingValueFunction$2 = IntersectionObserverCallback;
+type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+
+declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+interface UseObjectUrlProps {
+    object: Blob | MediaSource | undefined;
+}
+declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
@@ -562,52 +627,6 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-interface UseImageOptions {
-    /** Address of the resource */
-    src: string;
-    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
-    srcset?: string;
-    /** Image sizes for different page layouts */
-    sizes?: string;
-    /** Image alternative information */
-    alt?: string;
-    /** Image classes */
-    class?: string;
-    /** Image loading */
-    loading?: HTMLImageElement['loading'];
-    /** Image CORS settings */
-    crossorigin?: string;
-    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
-    referrerPolicy?: HTMLImageElement['referrerPolicy'];
-}
-
-declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
-type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
-
-type BindingValueFunction$2 = IntersectionObserverCallback;
-type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
-declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
-
-declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface UseObjectUrlProps {
-    object: Blob | MediaSource | undefined;
-}
-declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
 declare const UseOffsetPagination: vue.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseOffsetPaginationOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
 declare const UseOnline: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -646,6 +665,10 @@ declare const UsePreferredReducedMotion: vue.DefineComponent<{}, () => vue.VNode
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+declare const UsePreferredReducedTransparency: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 type BindingValueFunction$1 = ResizeObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
 declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
@@ -710,4 +733,4 @@ declare const UseWindowFocus: vue.DefineComponent<{}, () => vue.VNode<vue.Render
 
 declare const UseWindowSize: vue.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseWindowSizeOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
-export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
+export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/index.d.ts

@@ -381,6 +381,13 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
 }
 
 interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
+     */
+    rootMargin?: MaybeRefOrGetter<string>;
+    /**
+     * The element that is used as the viewport for checking visibility of the target.
+     */
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -406,6 +413,39 @@ declare const UseIdle: vue.DefineComponent<UseIdleOptions & {
     timeout: number;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
+interface UseImageOptions {
+    /** Address of the resource */
+    src: string;
+    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
+    srcset?: string;
+    /** Image sizes for different page layouts */
+    sizes?: string;
+    /** Image alternative information */
+    alt?: string;
+    /** Image classes */
+    class?: string;
+    /** Image loading */
+    loading?: HTMLImageElement['loading'];
+    /** Image CORS settings */
+    crossorigin?: string;
+    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+    referrerPolicy?: HTMLImageElement['referrerPolicy'];
+    /** Image width */
+    width?: HTMLImageElement['width'];
+    /** Image height */
+    height?: HTMLImageElement['height'];
+    /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
+    decoding?: HTMLImageElement['decoding'];
+    /** Provides a hint of the relative priority to use when fetching the image */
+    fetchPriority?: HTMLImageElement['fetchPriority'];
+    /** Provides a hint of the importance of the image */
+    ismap?: HTMLImageElement['isMap'];
+    /** The partial URL (starting with #) of an image map associated with the element */
+    usemap?: HTMLImageElement['useMap'];
+}
+
+declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseScrollOptions extends ConfigurableWindow {
     /**
      * Throttle time for scroll event, it’s disabled by default.
@@ -524,6 +564,31 @@ declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: May
     reset(): void;
 };
 
+type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+
+type BindingValueFunction$2 = IntersectionObserverCallback;
+type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+
+declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+interface UseObjectUrlProps {
+    object: Blob | MediaSource | undefined;
+}
+declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
 interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
@@ -562,52 +627,6 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-interface UseImageOptions {
-    /** Address of the resource */
-    src: string;
-    /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
-    srcset?: string;
-    /** Image sizes for different page layouts */
-    sizes?: string;
-    /** Image alternative information */
-    alt?: string;
-    /** Image classes */
-    class?: string;
-    /** Image loading */
-    loading?: HTMLImageElement['loading'];
-    /** Image CORS settings */
-    crossorigin?: string;
-    /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
-    referrerPolicy?: HTMLImageElement['referrerPolicy'];
-}
-
-declare const UseImage: vue.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseImageOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
-type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
-
-type BindingValueFunction$2 = IntersectionObserverCallback;
-type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
-declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
-
-declare const UseMouse: vue.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMousePressed: vue.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseNetwork: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-declare const UseNow: vue.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface UseObjectUrlProps {
-    object: Blob | MediaSource | undefined;
-}
-declare const UseObjectUrl: vue.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseObjectUrlProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
 declare const UseOffsetPagination: vue.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseOffsetPaginationOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
 declare const UseOnline: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -646,6 +665,10 @@ declare const UsePreferredReducedMotion: vue.DefineComponent<{}, () => vue.VNode
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+declare const UsePreferredReducedTransparency: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 type BindingValueFunction$1 = ResizeObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
 declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
@@ -710,4 +733,4 @@ declare const UseWindowFocus: vue.DefineComponent<{}, () => vue.VNode<vue.Render
 
 declare const UseWindowSize: vue.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseWindowSizeOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 
-export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
+export { OnClickOutside, type OnClickOutsideProps, OnLongPress, type OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, type UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, type UseObjectUrlProps, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, type UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/index.iife.js

@@ -410,6 +410,12 @@
     return handlers[key] || fallback;
   }
 
+  const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+  function useSSRWidth() {
+    const ssrWidth = vue.hasInjectionContext() ? shared.injectLocal(ssrWidthSymbol, null) : null;
+    return typeof ssrWidth === "number" ? ssrWidth : void 0;
+  }
+
   function useMounted() {
     const isMounted = vue.ref(false);
     const instance = vue.getCurrentInstance();
@@ -430,8 +436,9 @@
   }
 
   function useMediaQuery(query, options = {}) {
-    const { window = defaultWindow } = options;
+    const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
     const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+    const ssrSupport = vue.ref(typeof ssrWidth === "number");
     let mediaQuery;
     const matches = vue.ref(false);
     const handler = (event) => {
@@ -446,6 +453,24 @@
         mediaQuery.removeListener(handler);
     };
     const stopWatch = vue.watchEffect(() => {
+      if (ssrSupport.value) {
+        ssrSupport.value = !isSupported.value;
+        const queryStrings = shared.toValue(query).split(",");
+        matches.value = queryStrings.some((queryString) => {
+          const not = queryString.includes("not all");
+          const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+          const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+          let res = Boolean(minWidth || maxWidth);
+          if (minWidth && res) {
+            res = ssrWidth >= shared.pxValue(minWidth[1]);
+          }
+          if (maxWidth && res) {
+            res = ssrWidth <= shared.pxValue(maxWidth[1]);
+          }
+          return not ? !res : res;
+        });
+        return;
+      }
       if (!isSupported.value)
         return;
       cleanup();
@@ -461,7 +486,7 @@
       cleanup();
       mediaQuery = void 0;
     });
-    return matches;
+    return vue.computed(() => matches.value);
   }
 
   function usePreferredDark(options) {
@@ -759,7 +784,7 @@
   const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
     name: "UseDeviceMotion",
     setup(props, { slots }) {
-      const data = vue.reactive(core.useDeviceMotion());
+      const data = core.useDeviceMotion();
       return () => {
         if (slots.default)
           return slots.default(data);
@@ -1123,7 +1148,12 @@
   }
 
   function useElementVisibility(element, options = {}) {
-    const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+    const {
+      window = defaultWindow,
+      scrollTarget,
+      threshold = 0,
+      rootMargin
+    } = options;
     const elementIsVisible = vue.ref(false);
     useIntersectionObserver(
       element,
@@ -1141,7 +1171,8 @@
       {
         root: scrollTarget,
         window,
-        threshold
+        threshold,
+        rootMargin: shared.toValue(rootMargin)
       }
     );
     return elementIsVisible;
@@ -1275,20 +1306,32 @@
   async function loadImage(options) {
     return new Promise((resolve, reject) => {
       const img = new Image();
-      const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
+      const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy, width, height, decoding, fetchPriority, ismap, usemap } = options;
       img.src = src;
-      if (srcset)
+      if (srcset != null)
         img.srcset = srcset;
-      if (sizes)
+      if (sizes != null)
         img.sizes = sizes;
-      if (clazz)
+      if (clazz != null)
         img.className = clazz;
-      if (loading)
+      if (loading != null)
         img.loading = loading;
-      if (crossorigin)
+      if (crossorigin != null)
         img.crossOrigin = crossorigin;
-      if (referrerPolicy)
+      if (referrerPolicy != null)
         img.referrerPolicy = referrerPolicy;
+      if (width != null)
+        img.width = width;
+      if (height != null)
+        img.height = height;
+      if (decoding != null)
+        img.decoding = decoding;
+      if (fetchPriority != null)
+        img.fetchPriority = fetchPriority;
+      if (ismap != null)
+        img.isMap = ismap;
+      if (usemap != null)
+        img.useMap = usemap;
       img.onload = () => resolve(img);
       img.onerror = reject;
     });
@@ -1321,7 +1364,13 @@
       "class",
       "loading",
       "crossorigin",
-      "referrerPolicy"
+      "referrerPolicy",
+      "width",
+      "height",
+      "decoding",
+      "fetchPriority",
+      "ismap",
+      "usemap"
     ],
     setup(props, { slots }) {
       const data = vue.reactive(useImage(props));
@@ -1433,12 +1482,13 @@
       if (!window)
         return;
       const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-      const { display, flexDirection } = getComputedStyle(el);
+      const { display, flexDirection, direction } = getComputedStyle(el);
+      const directionMultipler = direction === "rtl" ? -1 : 1;
       const scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
       directions.right = scrollLeft > internalX.value;
-      const left = Math.abs(scrollLeft) <= (offset.left || 0);
-      const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const left = scrollLeft * directionMultipler <= (offset.left || 0);
+      const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "row-reverse") {
         arrivedState.left = right;
         arrivedState.right = left;
@@ -1452,8 +1502,8 @@
         scrollTop = window.document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
-      const top = Math.abs(scrollTop) <= (offset.top || 0);
-      const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+      const top = scrollTop <= (offset.top || 0);
+      const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "column-reverse") {
         arrivedState.top = bottom;
         arrivedState.bottom = top;
@@ -1823,6 +1873,19 @@
     }
   });
 
+  const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ vue.defineComponent({
+    name: "UsePreferredReducedTransparency",
+    setup(props, { slots }) {
+      const data = vue.reactive({
+        transparency: core.usePreferredReducedTransparency()
+      });
+      return () => {
+        if (slots.default)
+          return slots.default(data);
+      };
+    }
+  });
+
   const vResizeObserver = {
     mounted(el, binding) {
       if (typeof binding.value === "function")
@@ -2227,6 +2290,7 @@
   exports.UsePreferredDark = UsePreferredDark;
   exports.UsePreferredLanguages = UsePreferredLanguages;
   exports.UsePreferredReducedMotion = UsePreferredReducedMotion;
+  exports.UsePreferredReducedTransparency = UsePreferredReducedTransparency;
   exports.UseScreenSafeArea = UseScreenSafeArea;
   exports.UseTimeAgo = UseTimeAgo;
   exports.UseTimestamp = UseTimestamp;

package/index.iife.min.js

@@ -1 +1 @@
-(function(v,w,o,f){"use strict";const pe=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return w.onClickOutside(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),A=f.isClient?window:void 0;function T(e){var t;const n=f.toValue(e);return(t=n?.$el)!=null?t:n}function R(...e){let t,n,r,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,a]=e,t=A):[t,n,r,a]=e,!t)return f.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],s=()=>{i.forEach(c=>c()),i.length=0},l=(c,u,g,C)=>(c.addEventListener(u,g,C),()=>c.removeEventListener(u,g,C)),p=o.watch(()=>[T(t),f.toValue(a)],([c,u])=>{if(s(),!c)return;const g=f.isObject(u)?{...u}:u;i.push(...n.flatMap(C=>r.map(E=>l(c,C,E,g))))},{immediate:!0,flush:"post"}),d=()=>{p(),s()};return f.tryOnScopeDispose(d),d}let x=!1;function Q(e,t,n={}){const{window:r=A,ignore:a=[],capture:i=!0,detectIframe:s=!1}=n;if(!r)return f.noop;f.isIOS&&!x&&(x=!0,Array.from(r.document.body.children).forEach(h=>h.addEventListener("click",f.noop)),r.document.documentElement.addEventListener("click",f.noop));let l=!0;const p=h=>f.toValue(a).some(y=>{if(typeof y=="string")return Array.from(r.document.querySelectorAll(y)).some(m=>m===h.target||h.composedPath().includes(m));{const m=T(y);return m&&(h.target===m||h.composedPath().includes(m))}});function d(h){const y=f.toValue(h);return y&&y.$.subTree.shapeFlag===16}function c(h,y){const m=f.toValue(h),b=m.$.subTree&&m.$.subTree.children;return b==null||!Array.isArray(b)?!1:b.some(_=>_.el===y.target||y.composedPath().includes(_.el))}const u=h=>{const y=T(e);if(h.target!=null&&!(!(y instanceof Element)&&d(e)&&c(e,h))&&!(!y||y===h.target||h.composedPath().includes(y))){if(h.detail===0&&(l=!p(h)),!l){l=!0;return}t(h)}};let g=!1;const C=[R(r,"click",h=>{g||(g=!0,setTimeout(()=>{g=!1},0),u(h))},{passive:!0,capture:i}),R(r,"pointerdown",h=>{const y=T(e);l=!p(h)&&!!(y&&!h.composedPath().includes(y))},{passive:!0}),s&&R(r,"blur",h=>{setTimeout(()=>{var y;const m=T(e);((y=r.document.activeElement)==null?void 0:y.tagName)==="IFRAME"&&!m?.contains(r.document.activeElement)&&t(h)},0)})].filter(Boolean);return()=>C.forEach(h=>h())}const Z={mounted(e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=Q(e,t.value,{capture:n});else{const[r,a]=t.value;e.__onClickOutside_stop=Q(e,r,Object.assign({capture:n},a))}},unmounted(e){e.__onClickOutside_stop()}};function ve(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function ee(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:a=A,eventName:i="keydown",passive:s=!1,dedupe:l=!1}=r,p=ve(t);return R(a,i,c=>{c.repeat&&f.toValue(l)||p(c)&&n(c)},s)}const ge={mounted(e,t){var n,r;const a=(r=(n=t.arg)==null?void 0:n.split(","))!=null?r:!0;if(typeof t.value=="function")ee(a,t.value,{target:e});else{const[i,s]=t.value;ee(a,i,{target:e,...s})}}},he=500,ye=10;function G(e,t,n){var r,a;const i=o.computed(()=>T(e));let s,l,p,d=!1;function c(){s&&(clearTimeout(s),s=void 0),l=void 0,p=void 0,d=!1}function u(m){var b,_,O;const[D,z,S]=[p,l,d];if(c(),!n?.onMouseUp||!z||!D||(b=n?.modifiers)!=null&&b.self&&m.target!==i.value)return;(_=n?.modifiers)!=null&&_.prevent&&m.preventDefault(),(O=n?.modifiers)!=null&&O.stop&&m.stopPropagation();const M=m.x-z.x,L=m.y-z.y,U=Math.sqrt(M*M+L*L);n.onMouseUp(m.timeStamp-D,U,S)}function g(m){var b,_,O,D;(b=n?.modifiers)!=null&&b.self&&m.target!==i.value||(c(),(_=n?.modifiers)!=null&&_.prevent&&m.preventDefault(),(O=n?.modifiers)!=null&&O.stop&&m.stopPropagation(),l={x:m.x,y:m.y},p=m.timeStamp,s=setTimeout(()=>{d=!0,t(m)},(D=n?.delay)!=null?D:he))}function C(m){var b,_,O,D;if((b=n?.modifiers)!=null&&b.self&&m.target!==i.value||!l||n?.distanceThreshold===!1)return;(_=n?.modifiers)!=null&&_.prevent&&m.preventDefault(),(O=n?.modifiers)!=null&&O.stop&&m.stopPropagation();const z=m.x-l.x,S=m.y-l.y;Math.sqrt(z*z+S*S)>=((D=n?.distanceThreshold)!=null?D:ye)&&c()}const E={capture:(r=n?.modifiers)==null?void 0:r.capture,once:(a=n?.modifiers)==null?void 0:a.once},h=[R(i,"pointerdown",g,E),R(i,"pointermove",C,E),R(i,["pointerup","pointerleave"],u,E)];return()=>h.forEach(m=>m())}const we=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return G(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),te={mounted(e,t){typeof t.value=="function"?G(e,t.value,{modifiers:t.modifiers}):G(e,...t.value)}},Ue=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:w.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),Se=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(w.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),be=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(w.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),Ce=o.defineComponent({name:"UseClipboard",props:["source","read","navigator","copiedDuring","legacy"],setup(e,{slots:t}){const n=o.reactive(w.useClipboard(e));return()=>{var r;return(r=t.default)==null?void 0:r.call(t,n)}}}),W=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},B="__vueuse_ssr_handlers__",Ee=Oe();function Oe(){return B in W||(W[B]=W[B]||{}),W[B]}function ne(e,t){return Ee[e]||t}function Pe(){const e=o.ref(!1),t=o.getCurrentInstance();return t&&o.onMounted(()=>{e.value=!0},t),e}function H(e){const t=Pe();return o.computed(()=>(t.value,!!e()))}function Ve(e,t={}){const{window:n=A}=t,r=H(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let a;const i=o.ref(!1),s=d=>{i.value=d.matches},l=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",s):a.removeListener(s))},p=o.watchEffect(()=>{r.value&&(l(),a=n.matchMedia(f.toValue(e)),"addEventListener"in a?a.addEventListener("change",s):a.addListener(s),i.value=a.matches)});return f.tryOnScopeDispose(()=>{p(),l(),a=void 0}),i}function _e(e){return Ve("(prefers-color-scheme: dark)",e)}function De(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Le={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},oe="vueuse-storage";function Me(e,t,n,r={}){var a;const{flush:i="pre",deep:s=!0,listenToStorageChanges:l=!0,writeDefaults:p=!0,mergeDefaults:d=!1,shallow:c,window:u=A,eventFilter:g,onError:C=U=>{console.error(U)},initOnMounted:E}=r,h=(c?o.shallowRef:o.ref)(typeof t=="function"?t():t);if(!n)try{n=ne("getDefaultStorage",()=>{var U;return(U=A)==null?void 0:U.localStorage})()}catch(U){C(U)}if(!n)return h;const y=f.toValue(t),m=De(y),b=(a=r.serializer)!=null?a:Le[m],{pause:_,resume:O}=f.pausableWatch(h,()=>z(h.value),{flush:i,deep:s,eventFilter:g});u&&l&&f.tryOnMounted(()=>{n instanceof Storage?R(u,"storage",M):R(u,oe,L),E&&M()}),E||M();function D(U,P){if(u){const V={key:e,oldValue:U,newValue:P,storageArea:n};u.dispatchEvent(n instanceof Storage?new StorageEvent("storage",V):new CustomEvent(oe,{detail:V}))}}function z(U){try{const P=n.getItem(e);if(U==null)D(P,null),n.removeItem(e);else{const V=b.write(U);P!==V&&(n.setItem(e,V),D(P,V))}}catch(P){C(P)}}function S(U){const P=U?U.newValue:n.getItem(e);if(P==null)return p&&y!=null&&n.setItem(e,b.write(y)),y;if(!U&&d){const V=b.read(P);return typeof d=="function"?d(V,y):m==="object"&&!Array.isArray(V)?{...y,...V}:V}else return typeof P!="string"?P:b.read(P)}function M(U){if(!(U&&U.storageArea!==n)){if(U&&U.key==null){h.value=y;return}if(!(U&&U.key!==e)){_();try{U?.newValue!==b.write(h.value)&&(h.value=S(U))}catch(P){C(P)}finally{U?o.nextTick(O):O()}}}}function L(U){M(U.detail)}return h}const Te="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function ke(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:a=A,storage:i,storageKey:s="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:p,emitAuto:d,disableTransition:c=!0}=e,u={auto:"",light:"light",dark:"dark",...e.modes||{}},g=_e({window:a}),C=o.computed(()=>g.value?"dark":"light"),E=p||(s==null?f.toRef(r):Me(s,r,i,{window:a,listenToStorageChanges:l})),h=o.computed(()=>E.value==="auto"?C.value:E.value),y=ne("updateHTMLAttrs",(O,D,z)=>{const S=typeof O=="string"?a?.document.querySelector(O):T(O);if(!S)return;const M=new Set,L=new Set;let U=null;if(D==="class"){const V=z.split(/\s/g);Object.values(u).flatMap(k=>(k||"").split(/\s/g)).filter(Boolean).forEach(k=>{V.includes(k)?M.add(k):L.add(k)})}else U={key:D,value:z};if(M.size===0&&L.size===0&&U===null)return;let P;c&&(P=a.document.createElement("style"),P.appendChild(document.createTextNode(Te)),a.document.head.appendChild(P));for(const V of M)S.classList.add(V);for(const V of L)S.classList.remove(V);U&&S.setAttribute(U.key,U.value),c&&(a.getComputedStyle(P).opacity,document.head.removeChild(P))});function m(O){var D;y(t,n,(D=u[O])!=null?D:O)}function b(O){e.onChanged?e.onChanged(O,m):m(O)}o.watch(h,b,{flush:"post",immediate:!0}),f.tryOnMounted(()=>b(h.value));const _=o.computed({get(){return d?E.value:h.value},set(O){E.value=O}});return Object.assign(_,{store:E,system:C,state:h})}const Ae=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=ke(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),Re=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=w.useDark(e),r=o.reactive({isDark:n,toggleDark:f.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),ze=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=o.reactive(w.useDeviceMotion());return()=>{if(t.default)return t.default(n)}}}),Ie=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(w.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),Ne=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:w.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),We=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(w.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Be=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:w.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),He=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd","disabled","buttons","containerElement"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>{var c;return(c=e.handle)!=null?c:n.value}),a=o.computed(()=>{var c;return(c=e.containerElement)!=null?c:void 0}),i=o.computed(()=>!!e.disabled),s=e.storageKey&&w.useStorage(e.storageKey,f.toValue(e.initialValue)||{x:0,y:0},w.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),l=s||e.initialValue||{x:0,y:0},p=(c,u)=>{var g;(g=e.onEnd)==null||g.call(e,c,u),s&&(s.value.x=c.x,s.value.y=c.y)},d=o.reactive(w.useDraggable(n,{...e,handle:r,initialValue:l,onEnd:p,disabled:i,containerElement:a}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${d.style}`},t.default(d))}}}),je=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function re(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:a=A}=t,i=o.ref(!1);let s;const l=p=>{const d=p?n:r;s&&(clearTimeout(s),s=void 0),d?s=setTimeout(()=>i.value=p,d):i.value=p};return a&&(R(e,"mouseenter",()=>l(!0),{passive:!0}),R(e,"mouseleave",()=>l(!1),{passive:!0})),i}const Fe={mounted(e,t){const n=t.value;if(typeof n=="function"){const r=re(e);o.watch(r,a=>n(a))}else{const[r,a]=n,i=re(e,a);o.watch(i,s=>r(s))}}},Ke=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function J(e,t,n={}){const{window:r=A,...a}=n;let i;const s=H(()=>r&&"ResizeObserver"in r),l=()=>{i&&(i.disconnect(),i=void 0)},p=o.computed(()=>{const u=f.toValue(e);return Array.isArray(u)?u.map(g=>T(g)):[T(u)]}),d=o.watch(p,u=>{if(l(),s.value&&r){i=new ResizeObserver(t);for(const g of u)g&&i.observe(g,a)}},{immediate:!0,flush:"post"}),c=()=>{l(),d()};return f.tryOnScopeDispose(c),{isSupported:s,stop:c}}function Ge(e,t={width:0,height:0},n={}){const{window:r=A,box:a="content-box"}=n,i=o.computed(()=>{var u,g;return(g=(u=T(e))==null?void 0:u.namespaceURI)==null?void 0:g.includes("svg")}),s=o.ref(t.width),l=o.ref(t.height),{stop:p}=J(e,([u])=>{const g=a==="border-box"?u.borderBoxSize:a==="content-box"?u.contentBoxSize:u.devicePixelContentBoxSize;if(r&&i.value){const C=T(e);if(C){const E=C.getBoundingClientRect();s.value=E.width,l.value=E.height}}else if(g){const C=Array.isArray(g)?g:[g];s.value=C.reduce((E,{inlineSize:h})=>E+h,0),l.value=C.reduce((E,{blockSize:h})=>E+h,0)}else s.value=u.contentRect.width,l.value=u.contentRect.height},n);f.tryOnMounted(()=>{const u=T(e);u&&(s.value="offsetWidth"in u?u.offsetWidth:t.width,l.value="offsetHeight"in u?u.offsetHeight:t.height)});const d=o.watch(()=>T(e),u=>{s.value=u?t.width:0,l.value=u?t.height:0});function c(){p(),d()}return{width:s,height:l,stop:c}}const Je={mounted(e,t){var n;const r=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],a=typeof t.value=="function"?[]:t.value.slice(1),{width:i,height:s}=Ge(e,...a);o.watch([i,s],([l,p])=>r({width:l,height:p}))}},$e=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:w.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function $(e,t,n={}){const{root:r,rootMargin:a="0px",threshold:i=0,window:s=A,immediate:l=!0}=n,p=H(()=>s&&"IntersectionObserver"in s),d=o.computed(()=>{const E=f.toValue(e);return(Array.isArray(E)?E:[E]).map(T).filter(f.notNullish)});let c=f.noop;const u=o.ref(l),g=p.value?o.watch(()=>[d.value,T(r),u.value],([E,h])=>{if(c(),!u.value||!E.length)return;const y=new IntersectionObserver(t,{root:T(h),rootMargin:a,threshold:i});E.forEach(m=>m&&y.observe(m)),c=()=>{y.disconnect(),c=f.noop}},{immediate:l,flush:"post"}):f.noop,C=()=>{c(),g(),u.value=!1};return f.tryOnScopeDispose(C),{isSupported:p,isActive:u,pause(){c(),u.value=!1},resume(){u.value=!0},stop:C}}function q(e,t={}){const{window:n=A,scrollTarget:r,threshold:a=0}=t,i=o.ref(!1);return $(e,s=>{let l=i.value,p=0;for(const d of s)d.time>=p&&(p=d.time,l=d.isIntersecting);i.value=l},{root:r,window:n,threshold:a}),i}const qe={mounted(e,t){if(typeof t.value=="function"){const n=t.value,r=q(e);o.watch(r,a=>n(a),{immediate:!0})}else{const[n,r]=t.value,a=q(e,r);o.watch(a,i=>n(i),{immediate:!0})}}},Ye=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(w.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),Xe=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),xe=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(w.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),Qe=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(w.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function Ze(e,t,n){const{immediate:r=!0,delay:a=0,onError:i=f.noop,onSuccess:s=f.noop,resetOnExecute:l=!0,shallow:p=!0,throwError:d}=n??{},c=p?o.shallowRef(t):o.ref(t),u=o.ref(!1),g=o.ref(!1),C=o.shallowRef(void 0);async function E(m=0,...b){l&&(c.value=t),C.value=void 0,u.value=!1,g.value=!0,m>0&&await f.promiseTimeout(m);const _=typeof e=="function"?e(...b):e;try{const O=await _;c.value=O,u.value=!0,s(O)}catch(O){if(C.value=O,i(O),d)throw O}finally{g.value=!1}return c.value}r&&E(a);const h={state:c,isReady:u,isLoading:g,error:C,execute:E};function y(){return new Promise((m,b)=>{f.until(g).toBe(!1).then(()=>m(h)).catch(b)})}return{...h,then(m,b){return y().then(m,b)}}}async function et(e){return new Promise((t,n)=>{const r=new Image,{src:a,srcset:i,sizes:s,class:l,loading:p,crossorigin:d,referrerPolicy:c}=e;r.src=a,i&&(r.srcset=i),s&&(r.sizes=s),l&&(r.className=l),p&&(r.loading=p),d&&(r.crossOrigin=d),c&&(r.referrerPolicy=c),r.onload=()=>t(r),r.onerror=n})}function tt(e,t={}){const n=Ze(()=>et(f.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>f.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const nt=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy"],setup(e,{slots:t}){const n=o.reactive(tt(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}});function j(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}const ae=1;function Y(e,t={}){const{throttle:n=0,idle:r=200,onStop:a=f.noop,onScroll:i=f.noop,offset:s={left:0,right:0,top:0,bottom:0},eventListenerOptions:l={capture:!1,passive:!0},behavior:p="auto",window:d=A,onError:c=S=>{console.error(S)}}=t,u=o.ref(0),g=o.ref(0),C=o.computed({get(){return u.value},set(S){h(S,void 0)}}),E=o.computed({get(){return g.value},set(S){h(void 0,S)}});function h(S,M){var L,U,P,V;if(!d)return;const k=f.toValue(e);if(!k)return;(P=k instanceof Document?d.document.body:k)==null||P.scrollTo({top:(L=f.toValue(M))!=null?L:E.value,left:(U=f.toValue(S))!=null?U:C.value,behavior:f.toValue(p)});const N=((V=k?.document)==null?void 0:V.documentElement)||k?.documentElement||k;C!=null&&(u.value=N.scrollLeft),E!=null&&(g.value=N.scrollTop)}const y=o.ref(!1),m=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),b=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),_=S=>{y.value&&(y.value=!1,b.left=!1,b.right=!1,b.top=!1,b.bottom=!1,a(S))},O=f.useDebounceFn(_,n+r),D=S=>{var M;if(!d)return;const L=((M=S?.document)==null?void 0:M.documentElement)||S?.documentElement||T(S),{display:U,flexDirection:P}=getComputedStyle(L),V=L.scrollLeft;b.left=V<u.value,b.right=V>u.value;const k=Math.abs(V)<=(s.left||0),N=Math.abs(V)+L.clientWidth>=L.scrollWidth-(s.right||0)-ae;U==="flex"&&P==="row-reverse"?(m.left=N,m.right=k):(m.left=k,m.right=N),u.value=V;let I=L.scrollTop;S===d.document&&!I&&(I=d.document.body.scrollTop),b.top=I<g.value,b.bottom=I>g.value;const de=Math.abs(I)<=(s.top||0),me=Math.abs(I)+L.clientHeight>=L.scrollHeight-(s.bottom||0)-ae;U==="flex"&&P==="column-reverse"?(m.top=me,m.bottom=de):(m.top=de,m.bottom=me),g.value=I},z=S=>{var M;if(!d)return;const L=(M=S.target.documentElement)!=null?M:S.target;D(L),y.value=!0,O(S),i(S)};return R(e,"scroll",n?f.useThrottleFn(z,n,!0,!1):z,l),f.tryOnMounted(()=>{try{const S=f.toValue(e);if(!S)return;D(S)}catch(S){c(S)}}),R(e,"scrollend",_,l),{x:C,y:E,isScrolling:y,arrivedState:m,directions:b,measure(){const S=f.toValue(e);d&&S&&D(S)}}}function ie(e,t,n={}){var r;const{direction:a="bottom",interval:i=100,canLoadMore:s=()=>!0}=n,l=o.reactive(Y(e,{...n,offset:{[a]:(r=n.distance)!=null?r:0,...n.offset}})),p=o.ref(),d=o.computed(()=>!!p.value),c=o.computed(()=>j(f.toValue(e))),u=q(c);function g(){if(l.measure(),!c.value||!u.value||!s(c.value))return;const{scrollHeight:E,clientHeight:h,scrollWidth:y,clientWidth:m}=c.value,b=a==="bottom"||a==="top"?E<=h:y<=m;(l.arrivedState[a]||b)&&(p.value||(p.value=Promise.all([t(l),new Promise(_=>setTimeout(_,i))]).finally(()=>{p.value=null,o.nextTick(()=>g())})))}const C=o.watch(()=>[l.arrivedState[a],u.value],g,{immediate:!0});return f.tryOnUnmounted(C),{isLoading:d,reset(){o.nextTick(()=>g())}}}const ot={mounted(e,t){typeof t.value=="function"?ie(e,t.value):ie(e,...t.value)}},rt={mounted(e,t){typeof t.value=="function"?$(e,t.value):$(e,...t.value)}},at=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(w.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),it=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),st=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),lt=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(w.useNetwork());return()=>{if(t.default)return t.default(n)}}}),ut=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(w.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),ct=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=f.toRef(e,"object"),r=w.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),ft=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(w.useOffsetPagination({...e,onPageChange(...a){var i;(i=e.onPageChange)==null||i.call(e,...a),n("page-change",...a)},onPageSizeChange(...a){var i;(i=e.onPageSizeChange)==null||i.call(e,...a),n("page-size-change",...a)},onPageCountChange(...a){var i;(i=e.onPageCountChange)==null||i.call(e,...a),n("page-count-change",...a)}}));return()=>{if(t.default)return t.default(r)}}}),dt=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:w.useOnline()});return()=>{if(t.default)return t.default(n)}}}),mt=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:w.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(w.usePointer({...e,target:e.target==="self"?n:A}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),vt=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(w.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),gt=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:w.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),ht=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:w.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),yt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:w.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),wt=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:w.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),Ut=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:w.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}}),St={mounted(e,t){typeof t.value=="function"?J(e,t.value):J(e,...t.value)}};function bt(e,t,n={}){const{window:r=A,...a}=n;let i;const s=H(()=>r&&"MutationObserver"in r),l=()=>{i&&(i.disconnect(),i=void 0)},p=o.computed(()=>{const g=f.toValue(e),C=(Array.isArray(g)?g:[g]).map(T).filter(f.notNullish);return new Set(C)}),d=o.watch(()=>p.value,g=>{l(),s.value&&g.size&&(i=new MutationObserver(t),g.forEach(C=>i.observe(C,a)))},{immediate:!0,flush:"post"}),c=()=>i?.takeRecords(),u=()=>{d(),l()};return f.tryOnScopeDispose(u),{isSupported:s,stop:u,takeRecords:c}}function F(e,t,n={}){const{window:r=A,initialValue:a,observe:i=!1}=n,s=o.ref(a),l=o.computed(()=>{var d;return T(t)||((d=r?.document)==null?void 0:d.documentElement)});function p(){var d;const c=f.toValue(e),u=f.toValue(l);if(u&&r&&c){const g=(d=r.getComputedStyle(u).getPropertyValue(c))==null?void 0:d.trim();s.value=g||a}}return i&&bt(l,p,{attributeFilter:["style","class"],window:r}),o.watch([l,()=>f.toValue(e)],(d,c)=>{c[0]&&c[1]&&c[0].style.removeProperty(c[1]),p()},{immediate:!0}),o.watch(s,d=>{var c;const u=f.toValue(e);(c=l.value)!=null&&c.style&&u&&(d==null?l.value.style.removeProperty(u):l.value.style.setProperty(u,d))}),s}const se="--vueuse-safe-area-top",le="--vueuse-safe-area-right",ue="--vueuse-safe-area-bottom",ce="--vueuse-safe-area-left";function Ct(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(f.isClient){const i=F(se),s=F(le),l=F(ue),p=F(ce);i.value="env(safe-area-inset-top, 0px)",s.value="env(safe-area-inset-right, 0px)",l.value="env(safe-area-inset-bottom, 0px)",p.value="env(safe-area-inset-left, 0px)",a(),R("resize",f.useDebounceFn(a))}function a(){e.value=K(se),t.value=K(le),n.value=K(ue),r.value=K(ce)}return{top:e,right:t,bottom:n,left:r,update:a}}function K(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const Et=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:a,left:i}=Ct();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?a.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),Ot={mounted(e,t){if(typeof t.value=="function"){const n=t.value,r=Y(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,a=Y(e,{...r,onScroll(i){var s;(s=r.onScroll)==null||s.call(r,i),n(a)},onStop(i){var s;(s=r.onStop)==null||s.call(r,i),n(a)}})}}};function fe(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:fe(n)}}function Pt(e){const t=e||window.event,n=t.target;return fe(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const X=new WeakMap;function Vt(e,t=!1){const n=o.ref(t);let r=null,a="";o.watch(f.toRef(e),l=>{const p=j(f.toValue(l));if(p){const d=p;if(X.get(d)||X.set(d,d.style.overflow),d.style.overflow!=="hidden"&&(a=d.style.overflow),d.style.overflow==="hidden")return n.value=!0;if(n.value)return d.style.overflow="hidden"}},{immediate:!0});const i=()=>{const l=j(f.toValue(e));!l||n.value||(f.isIOS&&(r=R(l,"touchmove",p=>{Pt(p)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},s=()=>{const l=j(f.toValue(e));!l||!n.value||(f.isIOS&&r?.(),l.style.overflow=a,X.delete(l),n.value=!1)};return f.tryOnScopeDispose(s),o.computed({get(){return n.value},set(l){l?i():s()}})}function _t(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const a=Vt(n,r.value);o.watch(t,i=>a.value=i)}}const Dt=_t(),Lt=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(w.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Mt=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(w.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),Tt=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:a,containerProps:i,wrapperProps:s,scrollTo:l}=w.useVirtualList(r,e.options);return n({scrollTo:l}),i.style&&typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...s.value},a.value.map(p=>o.h("div",{style:{overflow:"hidden",height:p.height}},t.default?t.default(p):"Please set content!")))])}}),kt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:w.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),At=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(w.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});v.OnClickOutside=pe,v.OnLongPress=we,v.UseActiveElement=Ue,v.UseBattery=Se,v.UseBrowserLocation=be,v.UseClipboard=Ce,v.UseColorMode=Ae,v.UseDark=Re,v.UseDeviceMotion=ze,v.UseDeviceOrientation=Ie,v.UseDevicePixelRatio=Ne,v.UseDevicesList=We,v.UseDocumentVisibility=Be,v.UseDraggable=He,v.UseElementBounding=je,v.UseElementSize=Ke,v.UseElementVisibility=$e,v.UseEyeDropper=Ye,v.UseFullscreen=Xe,v.UseGeolocation=xe,v.UseIdle=Qe,v.UseImage=nt,v.UseMouse=at,v.UseMouseInElement=it,v.UseMousePressed=st,v.UseNetwork=lt,v.UseNow=ut,v.UseObjectUrl=ct,v.UseOffsetPagination=ft,v.UseOnline=dt,v.UsePageLeave=mt,v.UsePointer=pt,v.UsePointerLock=vt,v.UsePreferredColorScheme=gt,v.UsePreferredContrast=ht,v.UsePreferredDark=yt,v.UsePreferredLanguages=wt,v.UsePreferredReducedMotion=Ut,v.UseScreenSafeArea=Et,v.UseTimeAgo=Lt,v.UseTimestamp=Mt,v.UseVirtualList=Tt,v.UseWindowFocus=kt,v.UseWindowSize=At,v.VOnClickOutside=Z,v.VOnLongPress=te,v.vElementHover=Fe,v.vElementSize=Je,v.vElementVisibility=qe,v.vInfiniteScroll=ot,v.vIntersectionObserver=rt,v.vOnClickOutside=Z,v.vOnKeyStroke=ge,v.vOnLongPress=te,v.vResizeObserver=St,v.vScroll=Ot,v.vScrollLock=Dt})(this.VueUse=this.VueUse||{},VueUse,Vue,VueUse);
+(function(h,U,o,f){"use strict";const ge=o.defineComponent({name:"OnClickOutside",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return U.onClickOutside(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),A=f.isClient?window:void 0;function M(e){var t;const n=f.toValue(e);return(t=n?.$el)!=null?t:n}function R(...e){let t,n,r,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,r,a]=e,t=A):[t,n,r,a]=e,!t)return f.noop;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],s=()=>{i.forEach(c=>c()),i.length=0},l=(c,u,p,S)=>(c.addEventListener(u,p,S),()=>c.removeEventListener(u,p,S)),m=o.watch(()=>[M(t),f.toValue(a)],([c,u])=>{if(s(),!c)return;const p=f.isObject(u)?{...u}:u;i.push(...n.flatMap(S=>r.map(w=>l(c,S,w,p))))},{immediate:!0,flush:"post"}),d=()=>{m(),s()};return f.tryOnScopeDispose(d),d}let q=!1;function Q(e,t,n={}){const{window:r=A,ignore:a=[],capture:i=!0,detectIframe:s=!1}=n;if(!r)return f.noop;f.isIOS&&!q&&(q=!0,Array.from(r.document.body.children).forEach(v=>v.addEventListener("click",f.noop)),r.document.documentElement.addEventListener("click",f.noop));let l=!0;const m=v=>f.toValue(a).some(y=>{if(typeof y=="string")return Array.from(r.document.querySelectorAll(y)).some(g=>g===v.target||v.composedPath().includes(g));{const g=M(y);return g&&(v.target===g||v.composedPath().includes(g))}});function d(v){const y=f.toValue(v);return y&&y.$.subTree.shapeFlag===16}function c(v,y){const g=f.toValue(v),E=g.$.subTree&&g.$.subTree.children;return E==null||!Array.isArray(E)?!1:E.some(V=>V.el===y.target||y.composedPath().includes(V.el))}const u=v=>{const y=M(e);if(v.target!=null&&!(!(y instanceof Element)&&d(e)&&c(e,v))&&!(!y||y===v.target||v.composedPath().includes(y))){if(v.detail===0&&(l=!m(v)),!l){l=!0;return}t(v)}};let p=!1;const S=[R(r,"click",v=>{p||(p=!0,setTimeout(()=>{p=!1},0),u(v))},{passive:!0,capture:i}),R(r,"pointerdown",v=>{const y=M(e);l=!m(v)&&!!(y&&!v.composedPath().includes(y))},{passive:!0}),s&&R(r,"blur",v=>{setTimeout(()=>{var y;const g=M(e);((y=r.document.activeElement)==null?void 0:y.tagName)==="IFRAME"&&!g?.contains(r.document.activeElement)&&t(v)},0)})].filter(Boolean);return()=>S.forEach(v=>v())}const Z={mounted(e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=Q(e,t.value,{capture:n});else{const[r,a]=t.value;e.__onClickOutside_stop=Q(e,r,Object.assign({capture:n},a))}},unmounted(e){e.__onClickOutside_stop()}};function he(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function ee(...e){let t,n,r={};e.length===3?(t=e[0],n=e[1],r=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],r=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:a=A,eventName:i="keydown",passive:s=!1,dedupe:l=!1}=r,m=he(t);return R(a,i,c=>{c.repeat&&f.toValue(l)||m(c)&&n(c)},s)}const ye={mounted(e,t){var n,r;const a=(r=(n=t.arg)==null?void 0:n.split(","))!=null?r:!0;if(typeof t.value=="function")ee(a,t.value,{target:e});else{const[i,s]=t.value;ee(a,i,{target:e,...s})}}},we=500,Ue=10;function x(e,t,n){var r,a;const i=o.computed(()=>M(e));let s,l,m,d=!1;function c(){s&&(clearTimeout(s),s=void 0),l=void 0,m=void 0,d=!1}function u(g){var E,V,P;const[D,z,C]=[m,l,d];if(c(),!n?.onMouseUp||!z||!D||(E=n?.modifiers)!=null&&E.self&&g.target!==i.value)return;(V=n?.modifiers)!=null&&V.prevent&&g.preventDefault(),(P=n?.modifiers)!=null&&P.stop&&g.stopPropagation();const T=g.x-z.x,L=g.y-z.y,b=Math.sqrt(T*T+L*L);n.onMouseUp(g.timeStamp-D,b,C)}function p(g){var E,V,P,D;(E=n?.modifiers)!=null&&E.self&&g.target!==i.value||(c(),(V=n?.modifiers)!=null&&V.prevent&&g.preventDefault(),(P=n?.modifiers)!=null&&P.stop&&g.stopPropagation(),l={x:g.x,y:g.y},m=g.timeStamp,s=setTimeout(()=>{d=!0,t(g)},(D=n?.delay)!=null?D:we))}function S(g){var E,V,P,D;if((E=n?.modifiers)!=null&&E.self&&g.target!==i.value||!l||n?.distanceThreshold===!1)return;(V=n?.modifiers)!=null&&V.prevent&&g.preventDefault(),(P=n?.modifiers)!=null&&P.stop&&g.stopPropagation();const z=g.x-l.x,C=g.y-l.y;Math.sqrt(z*z+C*C)>=((D=n?.distanceThreshold)!=null?D:Ue)&&c()}const w={capture:(r=n?.modifiers)==null?void 0:r.capture,once:(a=n?.modifiers)==null?void 0:a.once},v=[R(i,"pointerdown",p,w),R(i,"pointermove",S,w),R(i,["pointerup","pointerleave"],u,w)];return()=>v.forEach(g=>g())}const Se=o.defineComponent({name:"OnLongPress",props:["as","options"],emits:["trigger"],setup(e,{slots:t,emit:n}){const r=o.ref();return x(r,a=>{n("trigger",a)},e.options),()=>{if(t.default)return o.h(e.as||"div",{ref:r},t.default())}}}),te={mounted(e,t){typeof t.value=="function"?x(e,t.value,{modifiers:t.modifiers}):x(e,...t.value)}},be=o.defineComponent({name:"UseActiveElement",setup(e,{slots:t}){const n=o.reactive({element:U.useActiveElement()});return()=>{if(t.default)return t.default(n)}}}),Ce=o.defineComponent({name:"UseBattery",setup(e,{slots:t}){const n=o.reactive(U.useBattery(e));return()=>{if(t.default)return t.default(n)}}}),Ee=o.defineComponent({name:"UseBrowserLocation",setup(e,{slots:t}){const n=o.reactive(U.useBrowserLocation());return()=>{if(t.default)return t.default(n)}}}),Pe=o.defineComponent({name:"UseClipboard",props:["source","read","navigator","copiedDuring","legacy"],setup(e,{slots:t}){const n=o.reactive(U.useClipboard(e));return()=>{var r;return(r=t.default)==null?void 0:r.call(t,n)}}}),N=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},B="__vueuse_ssr_handlers__",Oe=Ve();function Ve(){return B in N||(N[B]=N[B]||{}),N[B]}function ne(e,t){return Oe[e]||t}const _e=Symbol("vueuse-ssr-width");function De(){const e=o.hasInjectionContext()?f.injectLocal(_e,null):null;return typeof e=="number"?e:void 0}function Le(){const e=o.ref(!1),t=o.getCurrentInstance();return t&&o.onMounted(()=>{e.value=!0},t),e}function H(e){const t=Le();return o.computed(()=>(t.value,!!e()))}function Te(e,t={}){const{window:n=A,ssrWidth:r=De()}=t,a=H(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function"),i=o.ref(typeof r=="number");let s;const l=o.ref(!1),m=u=>{l.value=u.matches},d=()=>{s&&("removeEventListener"in s?s.removeEventListener("change",m):s.removeListener(m))},c=o.watchEffect(()=>{if(i.value){i.value=!a.value;const u=f.toValue(e).split(",");l.value=u.some(p=>{const S=p.includes("not all"),w=p.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),v=p.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);let y=!!(w||v);return w&&y&&(y=r>=f.pxValue(w[1])),v&&y&&(y=r<=f.pxValue(v[1])),S?!y:y});return}a.value&&(d(),s=n.matchMedia(f.toValue(e)),"addEventListener"in s?s.addEventListener("change",m):s.addListener(m),l.value=s.matches)});return f.tryOnScopeDispose(()=>{c(),d(),s=void 0}),o.computed(()=>l.value)}function Me(e){return Te("(prefers-color-scheme: dark)",e)}function ke(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ae={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},oe="vueuse-storage";function Re(e,t,n,r={}){var a;const{flush:i="pre",deep:s=!0,listenToStorageChanges:l=!0,writeDefaults:m=!0,mergeDefaults:d=!1,shallow:c,window:u=A,eventFilter:p,onError:S=b=>{console.error(b)},initOnMounted:w}=r,v=(c?o.shallowRef:o.ref)(typeof t=="function"?t():t);if(!n)try{n=ne("getDefaultStorage",()=>{var b;return(b=A)==null?void 0:b.localStorage})()}catch(b){S(b)}if(!n)return v;const y=f.toValue(t),g=ke(y),E=(a=r.serializer)!=null?a:Ae[g],{pause:V,resume:P}=f.pausableWatch(v,()=>z(v.value),{flush:i,deep:s,eventFilter:p});u&&l&&f.tryOnMounted(()=>{n instanceof Storage?R(u,"storage",T):R(u,oe,L),w&&T()}),w||T();function D(b,O){if(u){const _={key:e,oldValue:b,newValue:O,storageArea:n};u.dispatchEvent(n instanceof Storage?new StorageEvent("storage",_):new CustomEvent(oe,{detail:_}))}}function z(b){try{const O=n.getItem(e);if(b==null)D(O,null),n.removeItem(e);else{const _=E.write(b);O!==_&&(n.setItem(e,_),D(O,_))}}catch(O){S(O)}}function C(b){const O=b?b.newValue:n.getItem(e);if(O==null)return m&&y!=null&&n.setItem(e,E.write(y)),y;if(!b&&d){const _=E.read(O);return typeof d=="function"?d(_,y):g==="object"&&!Array.isArray(_)?{...y,..._}:_}else return typeof O!="string"?O:E.read(O)}function T(b){if(!(b&&b.storageArea!==n)){if(b&&b.key==null){v.value=y;return}if(!(b&&b.key!==e)){V();try{b?.newValue!==E.write(v.value)&&(v.value=C(b))}catch(O){S(O)}finally{b?o.nextTick(P):P()}}}}function L(b){T(b.detail)}return v}const ze="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";function Ie(e={}){const{selector:t="html",attribute:n="class",initialValue:r="auto",window:a=A,storage:i,storageKey:s="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:m,emitAuto:d,disableTransition:c=!0}=e,u={auto:"",light:"light",dark:"dark",...e.modes||{}},p=Me({window:a}),S=o.computed(()=>p.value?"dark":"light"),w=m||(s==null?f.toRef(r):Re(s,r,i,{window:a,listenToStorageChanges:l})),v=o.computed(()=>w.value==="auto"?S.value:w.value),y=ne("updateHTMLAttrs",(P,D,z)=>{const C=typeof P=="string"?a?.document.querySelector(P):M(P);if(!C)return;const T=new Set,L=new Set;let b=null;if(D==="class"){const _=z.split(/\s/g);Object.values(u).flatMap(k=>(k||"").split(/\s/g)).filter(Boolean).forEach(k=>{_.includes(k)?T.add(k):L.add(k)})}else b={key:D,value:z};if(T.size===0&&L.size===0&&b===null)return;let O;c&&(O=a.document.createElement("style"),O.appendChild(document.createTextNode(ze)),a.document.head.appendChild(O));for(const _ of T)C.classList.add(_);for(const _ of L)C.classList.remove(_);b&&C.setAttribute(b.key,b.value),c&&(a.getComputedStyle(O).opacity,document.head.removeChild(O))});function g(P){var D;y(t,n,(D=u[P])!=null?D:P)}function E(P){e.onChanged?e.onChanged(P,g):g(P)}o.watch(v,E,{flush:"post",immediate:!0}),f.tryOnMounted(()=>E(v.value));const V=o.computed({get(){return d?w.value:v.value},set(P){w.value=P}});return Object.assign(V,{store:w,system:S,state:v})}const We=o.defineComponent({name:"UseColorMode",props:["selector","attribute","modes","onChanged","storageKey","storage","emitAuto"],setup(e,{slots:t}){const n=Ie(e),r=o.reactive({mode:n,system:n.system,store:n.store});return()=>{if(t.default)return t.default(r)}}}),Ne=o.defineComponent({name:"UseDark",props:["selector","attribute","valueDark","valueLight","onChanged","storageKey","storage"],setup(e,{slots:t}){const n=U.useDark(e),r=o.reactive({isDark:n,toggleDark:f.useToggle(n)});return()=>{if(t.default)return t.default(r)}}}),Be=o.defineComponent({name:"UseDeviceMotion",setup(e,{slots:t}){const n=U.useDeviceMotion();return()=>{if(t.default)return t.default(n)}}}),He=o.defineComponent({name:"UseDeviceOrientation",setup(e,{slots:t}){const n=o.reactive(U.useDeviceOrientation());return()=>{if(t.default)return t.default(n)}}}),je=o.defineComponent({name:"UseDevicePixelRatio",setup(e,{slots:t}){const n=o.reactive({pixelRatio:U.useDevicePixelRatio()});return()=>{if(t.default)return t.default(n)}}}),Fe=o.defineComponent({name:"UseDevicesList",props:["onUpdated","requestPermissions","constraints"],setup(e,{slots:t}){const n=o.reactive(U.useDevicesList(e));return()=>{if(t.default)return t.default(n)}}}),Ke=o.defineComponent({name:"UseDocumentVisibility",setup(e,{slots:t}){const n=o.reactive({visibility:U.useDocumentVisibility()});return()=>{if(t.default)return t.default(n)}}}),xe=o.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd","disabled","buttons","containerElement"],setup(e,{slots:t}){const n=o.ref(),r=o.computed(()=>{var c;return(c=e.handle)!=null?c:n.value}),a=o.computed(()=>{var c;return(c=e.containerElement)!=null?c:void 0}),i=o.computed(()=>!!e.disabled),s=e.storageKey&&U.useStorage(e.storageKey,f.toValue(e.initialValue)||{x:0,y:0},U.isClient?e.storageType==="session"?sessionStorage:localStorage:void 0),l=s||e.initialValue||{x:0,y:0},m=(c,u)=>{var p;(p=e.onEnd)==null||p.call(e,c,u),s&&(s.value.x=c.x,s.value.y=c.y)},d=o.reactive(U.useDraggable(n,{...e,handle:r,initialValue:l,onEnd:m,disabled:i,containerElement:a}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n,style:`touch-action:none;${d.style}`},t.default(d))}}}),Ge=o.defineComponent({name:"UseElementBounding",props:["box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.useElementBounding(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function re(e,t={}){const{delayEnter:n=0,delayLeave:r=0,window:a=A}=t,i=o.ref(!1);let s;const l=m=>{const d=m?n:r;s&&(clearTimeout(s),s=void 0),d?s=setTimeout(()=>i.value=m,d):i.value=m};return a&&(R(e,"mouseenter",()=>l(!0),{passive:!0}),R(e,"mouseleave",()=>l(!1),{passive:!0})),i}const Je={mounted(e,t){const n=t.value;if(typeof n=="function"){const r=re(e);o.watch(r,a=>n(a))}else{const[r,a]=n,i=re(e,a);o.watch(i,s=>r(s))}}},$e=o.defineComponent({name:"UseElementSize",props:["width","height","box","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.useElementSize(n,{width:e.width,height:e.height},{box:e.box}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function G(e,t,n={}){const{window:r=A,...a}=n;let i;const s=H(()=>r&&"ResizeObserver"in r),l=()=>{i&&(i.disconnect(),i=void 0)},m=o.computed(()=>{const u=f.toValue(e);return Array.isArray(u)?u.map(p=>M(p)):[M(u)]}),d=o.watch(m,u=>{if(l(),s.value&&r){i=new ResizeObserver(t);for(const p of u)p&&i.observe(p,a)}},{immediate:!0,flush:"post"}),c=()=>{l(),d()};return f.tryOnScopeDispose(c),{isSupported:s,stop:c}}function Ye(e,t={width:0,height:0},n={}){const{window:r=A,box:a="content-box"}=n,i=o.computed(()=>{var u,p;return(p=(u=M(e))==null?void 0:u.namespaceURI)==null?void 0:p.includes("svg")}),s=o.ref(t.width),l=o.ref(t.height),{stop:m}=G(e,([u])=>{const p=a==="border-box"?u.borderBoxSize:a==="content-box"?u.contentBoxSize:u.devicePixelContentBoxSize;if(r&&i.value){const S=M(e);if(S){const w=S.getBoundingClientRect();s.value=w.width,l.value=w.height}}else if(p){const S=Array.isArray(p)?p:[p];s.value=S.reduce((w,{inlineSize:v})=>w+v,0),l.value=S.reduce((w,{blockSize:v})=>w+v,0)}else s.value=u.contentRect.width,l.value=u.contentRect.height},n);f.tryOnMounted(()=>{const u=M(e);u&&(s.value="offsetWidth"in u?u.offsetWidth:t.width,l.value="offsetHeight"in u?u.offsetHeight:t.height)});const d=o.watch(()=>M(e),u=>{s.value=u?t.width:0,l.value=u?t.height:0});function c(){m(),d()}return{width:s,height:l,stop:c}}const Xe={mounted(e,t){var n;const r=typeof t.value=="function"?t.value:(n=t.value)==null?void 0:n[0],a=typeof t.value=="function"?[]:t.value.slice(1),{width:i,height:s}=Ye(e,...a);o.watch([i,s],([l,m])=>r({width:l,height:m}))}},qe=o.defineComponent({name:"UseElementVisibility",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive({isVisible:U.useElementVisibility(n)});return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}});function J(e,t,n={}){const{root:r,rootMargin:a="0px",threshold:i=0,window:s=A,immediate:l=!0}=n,m=H(()=>s&&"IntersectionObserver"in s),d=o.computed(()=>{const w=f.toValue(e);return(Array.isArray(w)?w:[w]).map(M).filter(f.notNullish)});let c=f.noop;const u=o.ref(l),p=m.value?o.watch(()=>[d.value,M(r),u.value],([w,v])=>{if(c(),!u.value||!w.length)return;const y=new IntersectionObserver(t,{root:M(v),rootMargin:a,threshold:i});w.forEach(g=>g&&y.observe(g)),c=()=>{y.disconnect(),c=f.noop}},{immediate:l,flush:"post"}):f.noop,S=()=>{c(),p(),u.value=!1};return f.tryOnScopeDispose(S),{isSupported:m,isActive:u,pause(){c(),u.value=!1},resume(){u.value=!0},stop:S}}function $(e,t={}){const{window:n=A,scrollTarget:r,threshold:a=0,rootMargin:i}=t,s=o.ref(!1);return J(e,l=>{let m=s.value,d=0;for(const c of l)c.time>=d&&(d=c.time,m=c.isIntersecting);s.value=m},{root:r,window:n,threshold:a,rootMargin:f.toValue(i)}),s}const Qe={mounted(e,t){if(typeof t.value=="function"){const n=t.value,r=$(e);o.watch(r,a=>n(a),{immediate:!0})}else{const[n,r]=t.value,a=$(e,r);o.watch(a,i=>n(i),{immediate:!0})}}},Ze=o.defineComponent({name:"UseEyeDropper",props:{sRGBHex:String},setup(e,{slots:t}){const n=o.reactive(U.useEyeDropper());return()=>{if(t.default)return t.default(n)}}}),et=o.defineComponent({name:"UseFullscreen",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.useFullscreen(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),tt=o.defineComponent({name:"UseGeolocation",props:["enableHighAccuracy","maximumAge","timeout","navigator"],setup(e,{slots:t}){const n=o.reactive(U.useGeolocation(e));return()=>{if(t.default)return t.default(n)}}}),nt=o.defineComponent({name:"UseIdle",props:["timeout","events","listenForVisibilityChange","initialState"],setup(e,{slots:t}){const n=o.reactive(U.useIdle(e.timeout,e));return()=>{if(t.default)return t.default(n)}}});function ot(e,t,n){const{immediate:r=!0,delay:a=0,onError:i=f.noop,onSuccess:s=f.noop,resetOnExecute:l=!0,shallow:m=!0,throwError:d}=n??{},c=m?o.shallowRef(t):o.ref(t),u=o.ref(!1),p=o.ref(!1),S=o.shallowRef(void 0);async function w(g=0,...E){l&&(c.value=t),S.value=void 0,u.value=!1,p.value=!0,g>0&&await f.promiseTimeout(g);const V=typeof e=="function"?e(...E):e;try{const P=await V;c.value=P,u.value=!0,s(P)}catch(P){if(S.value=P,i(P),d)throw P}finally{p.value=!1}return c.value}r&&w(a);const v={state:c,isReady:u,isLoading:p,error:S,execute:w};function y(){return new Promise((g,E)=>{f.until(p).toBe(!1).then(()=>g(v)).catch(E)})}return{...v,then(g,E){return y().then(g,E)}}}async function rt(e){return new Promise((t,n)=>{const r=new Image,{src:a,srcset:i,sizes:s,class:l,loading:m,crossorigin:d,referrerPolicy:c,width:u,height:p,decoding:S,fetchPriority:w,ismap:v,usemap:y}=e;r.src=a,i!=null&&(r.srcset=i),s!=null&&(r.sizes=s),l!=null&&(r.className=l),m!=null&&(r.loading=m),d!=null&&(r.crossOrigin=d),c!=null&&(r.referrerPolicy=c),u!=null&&(r.width=u),p!=null&&(r.height=p),S!=null&&(r.decoding=S),w!=null&&(r.fetchPriority=w),v!=null&&(r.isMap=v),y!=null&&(r.useMap=y),r.onload=()=>t(r),r.onerror=n})}function at(e,t={}){const n=ot(()=>rt(f.toValue(e)),void 0,{resetOnExecute:!0,...t});return o.watch(()=>f.toValue(e),()=>n.execute(t.delay),{deep:!0}),n}const it=o.defineComponent({name:"UseImage",props:["src","srcset","sizes","as","alt","class","loading","crossorigin","referrerPolicy","width","height","decoding","fetchPriority","ismap","usemap"],setup(e,{slots:t}){const n=o.reactive(at(e));return()=>n.isLoading&&t.loading?t.loading(n):n.error&&t.error?t.error(n.error):t.default?t.default(n):o.h(e.as||"img",e)}});function j(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}const ae=1;function Y(e,t={}){const{throttle:n=0,idle:r=200,onStop:a=f.noop,onScroll:i=f.noop,offset:s={left:0,right:0,top:0,bottom:0},eventListenerOptions:l={capture:!1,passive:!0},behavior:m="auto",window:d=A,onError:c=C=>{console.error(C)}}=t,u=o.ref(0),p=o.ref(0),S=o.computed({get(){return u.value},set(C){v(C,void 0)}}),w=o.computed({get(){return p.value},set(C){v(void 0,C)}});function v(C,T){var L,b,O,_;if(!d)return;const k=f.toValue(e);if(!k)return;(O=k instanceof Document?d.document.body:k)==null||O.scrollTo({top:(L=f.toValue(T))!=null?L:w.value,left:(b=f.toValue(C))!=null?b:S.value,behavior:f.toValue(m)});const I=((_=k?.document)==null?void 0:_.documentElement)||k?.documentElement||k;S!=null&&(u.value=I.scrollLeft),w!=null&&(p.value=I.scrollTop)}const y=o.ref(!1),g=o.reactive({left:!0,right:!1,top:!0,bottom:!1}),E=o.reactive({left:!1,right:!1,top:!1,bottom:!1}),V=C=>{y.value&&(y.value=!1,E.left=!1,E.right=!1,E.top=!1,E.bottom=!1,a(C))},P=f.useDebounceFn(V,n+r),D=C=>{var T;if(!d)return;const L=((T=C?.document)==null?void 0:T.documentElement)||C?.documentElement||M(C),{display:b,flexDirection:O,direction:_}=getComputedStyle(L),k=_==="rtl"?-1:1,I=L.scrollLeft;E.left=I<u.value,E.right=I>u.value;const de=I*k<=(s.left||0),me=I*k+L.clientWidth>=L.scrollWidth-(s.right||0)-ae;b==="flex"&&O==="row-reverse"?(g.left=me,g.right=de):(g.left=de,g.right=me),u.value=I;let W=L.scrollTop;C===d.document&&!W&&(W=d.document.body.scrollTop),E.top=W<p.value,E.bottom=W>p.value;const pe=W<=(s.top||0),ve=W+L.clientHeight>=L.scrollHeight-(s.bottom||0)-ae;b==="flex"&&O==="column-reverse"?(g.top=ve,g.bottom=pe):(g.top=pe,g.bottom=ve),p.value=W},z=C=>{var T;if(!d)return;const L=(T=C.target.documentElement)!=null?T:C.target;D(L),y.value=!0,P(C),i(C)};return R(e,"scroll",n?f.useThrottleFn(z,n,!0,!1):z,l),f.tryOnMounted(()=>{try{const C=f.toValue(e);if(!C)return;D(C)}catch(C){c(C)}}),R(e,"scrollend",V,l),{x:S,y:w,isScrolling:y,arrivedState:g,directions:E,measure(){const C=f.toValue(e);d&&C&&D(C)}}}function ie(e,t,n={}){var r;const{direction:a="bottom",interval:i=100,canLoadMore:s=()=>!0}=n,l=o.reactive(Y(e,{...n,offset:{[a]:(r=n.distance)!=null?r:0,...n.offset}})),m=o.ref(),d=o.computed(()=>!!m.value),c=o.computed(()=>j(f.toValue(e))),u=$(c);function p(){if(l.measure(),!c.value||!u.value||!s(c.value))return;const{scrollHeight:w,clientHeight:v,scrollWidth:y,clientWidth:g}=c.value,E=a==="bottom"||a==="top"?w<=v:y<=g;(l.arrivedState[a]||E)&&(m.value||(m.value=Promise.all([t(l),new Promise(V=>setTimeout(V,i))]).finally(()=>{m.value=null,o.nextTick(()=>p())})))}const S=o.watch(()=>[l.arrivedState[a],u.value],p,{immediate:!0});return f.tryOnUnmounted(S),{isLoading:d,reset(){o.nextTick(()=>p())}}}const st={mounted(e,t){typeof t.value=="function"?ie(e,t.value):ie(e,...t.value)}},lt={mounted(e,t){typeof t.value=="function"?J(e,t.value):J(e,...t.value)}},ut=o.defineComponent({name:"UseMouse",props:["touch","resetOnTouchEnds","initialValue"],setup(e,{slots:t}){const n=o.reactive(U.useMouse(e));return()=>{if(t.default)return t.default(n)}}}),ct=o.defineComponent({name:"UseMouseElement",props:["handleOutside","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.useMouseInElement(n,e));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),ft=o.defineComponent({name:"UseMousePressed",props:["touch","initialValue","as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.useMousePressed({...e,target:n}));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),dt=o.defineComponent({name:"UseNetwork",setup(e,{slots:t}){const n=o.reactive(U.useNetwork());return()=>{if(t.default)return t.default(n)}}}),mt=o.defineComponent({name:"UseNow",props:["interval"],setup(e,{slots:t}){const n=o.reactive(U.useNow({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),pt=o.defineComponent({name:"UseObjectUrl",props:["object"],setup(e,{slots:t}){const n=f.toRef(e,"object"),r=U.useObjectUrl(n);return()=>{if(t.default&&r.value)return t.default(r)}}}),vt=o.defineComponent({name:"UseOffsetPagination",props:["total","page","pageSize","onPageChange","onPageSizeChange","onPageCountChange"],emits:["page-change","page-size-change","page-count-change"],setup(e,{slots:t,emit:n}){const r=o.reactive(U.useOffsetPagination({...e,onPageChange(...a){var i;(i=e.onPageChange)==null||i.call(e,...a),n("page-change",...a)},onPageSizeChange(...a){var i;(i=e.onPageSizeChange)==null||i.call(e,...a),n("page-size-change",...a)},onPageCountChange(...a){var i;(i=e.onPageCountChange)==null||i.call(e,...a),n("page-count-change",...a)}}));return()=>{if(t.default)return t.default(r)}}}),gt=o.defineComponent({name:"UseOnline",setup(e,{slots:t}){const n=o.reactive({isOnline:U.useOnline()});return()=>{if(t.default)return t.default(n)}}}),ht=o.defineComponent({name:"UsePageLeave",setup(e,{slots:t}){const n=o.reactive({isLeft:U.usePageLeave()});return()=>{if(t.default)return t.default(n)}}}),yt=o.defineComponent({name:"UsePointer",props:["pointerTypes","initialValue","target"],setup(e,{slots:t}){const n=o.ref(null),r=o.reactive(U.usePointer({...e,target:e.target==="self"?n:A}));return()=>{if(t.default)return t.default(r,{ref:n})}}}),wt=o.defineComponent({name:"UsePointerLock",props:["as"],setup(e,{slots:t}){const n=o.ref(),r=o.reactive(U.usePointerLock(n));return()=>{if(t.default)return o.h(e.as||"div",{ref:n},t.default(r))}}}),Ut=o.defineComponent({name:"UsePreferredColorScheme",setup(e,{slots:t}){const n=o.reactive({colorScheme:U.usePreferredColorScheme()});return()=>{if(t.default)return t.default(n)}}}),St=o.defineComponent({name:"UsePreferredContrast",setup(e,{slots:t}){const n=o.reactive({contrast:U.usePreferredContrast()});return()=>{if(t.default)return t.default(n)}}}),bt=o.defineComponent({name:"UsePreferredDark",setup(e,{slots:t}){const n=o.reactive({prefersDark:U.usePreferredDark()});return()=>{if(t.default)return t.default(n)}}}),Ct=o.defineComponent({name:"UsePreferredLanguages",setup(e,{slots:t}){const n=o.reactive({languages:U.usePreferredLanguages()});return()=>{if(t.default)return t.default(n)}}}),Et=o.defineComponent({name:"UsePreferredReducedMotion",setup(e,{slots:t}){const n=o.reactive({motion:U.usePreferredReducedMotion()});return()=>{if(t.default)return t.default(n)}}}),Pt=o.defineComponent({name:"UsePreferredReducedTransparency",setup(e,{slots:t}){const n=o.reactive({transparency:U.usePreferredReducedTransparency()});return()=>{if(t.default)return t.default(n)}}}),Ot={mounted(e,t){typeof t.value=="function"?G(e,t.value):G(e,...t.value)}};function Vt(e,t,n={}){const{window:r=A,...a}=n;let i;const s=H(()=>r&&"MutationObserver"in r),l=()=>{i&&(i.disconnect(),i=void 0)},m=o.computed(()=>{const p=f.toValue(e),S=(Array.isArray(p)?p:[p]).map(M).filter(f.notNullish);return new Set(S)}),d=o.watch(()=>m.value,p=>{l(),s.value&&p.size&&(i=new MutationObserver(t),p.forEach(S=>i.observe(S,a)))},{immediate:!0,flush:"post"}),c=()=>i?.takeRecords(),u=()=>{d(),l()};return f.tryOnScopeDispose(u),{isSupported:s,stop:u,takeRecords:c}}function F(e,t,n={}){const{window:r=A,initialValue:a,observe:i=!1}=n,s=o.ref(a),l=o.computed(()=>{var d;return M(t)||((d=r?.document)==null?void 0:d.documentElement)});function m(){var d;const c=f.toValue(e),u=f.toValue(l);if(u&&r&&c){const p=(d=r.getComputedStyle(u).getPropertyValue(c))==null?void 0:d.trim();s.value=p||a}}return i&&Vt(l,m,{attributeFilter:["style","class"],window:r}),o.watch([l,()=>f.toValue(e)],(d,c)=>{c[0]&&c[1]&&c[0].style.removeProperty(c[1]),m()},{immediate:!0}),o.watch(s,d=>{var c;const u=f.toValue(e);(c=l.value)!=null&&c.style&&u&&(d==null?l.value.style.removeProperty(u):l.value.style.setProperty(u,d))}),s}const se="--vueuse-safe-area-top",le="--vueuse-safe-area-right",ue="--vueuse-safe-area-bottom",ce="--vueuse-safe-area-left";function _t(){const e=o.ref(""),t=o.ref(""),n=o.ref(""),r=o.ref("");if(f.isClient){const i=F(se),s=F(le),l=F(ue),m=F(ce);i.value="env(safe-area-inset-top, 0px)",s.value="env(safe-area-inset-right, 0px)",l.value="env(safe-area-inset-bottom, 0px)",m.value="env(safe-area-inset-left, 0px)",a(),R("resize",f.useDebounceFn(a))}function a(){e.value=K(se),t.value=K(le),n.value=K(ue),r.value=K(ce)}return{top:e,right:t,bottom:n,left:r,update:a}}function K(e){return getComputedStyle(document.documentElement).getPropertyValue(e)}const Dt=o.defineComponent({name:"UseScreenSafeArea",props:{top:Boolean,right:Boolean,bottom:Boolean,left:Boolean},setup(e,{slots:t}){const{top:n,right:r,bottom:a,left:i}=_t();return()=>{if(t.default)return o.h("div",{style:{paddingTop:e.top?n.value:"",paddingRight:e.right?r.value:"",paddingBottom:e.bottom?a.value:"",paddingLeft:e.left?i.value:"",boxSizing:"border-box",maxHeight:"100vh",maxWidth:"100vw",overflow:"auto"}},t.default())}}}),Lt={mounted(e,t){if(typeof t.value=="function"){const n=t.value,r=Y(e,{onScroll(){n(r)},onStop(){n(r)}})}else{const[n,r]=t.value,a=Y(e,{...r,onScroll(i){var s;(s=r.onScroll)==null||s.call(r,i),n(a)},onStop(i){var s;(s=r.onStop)==null||s.call(r,i),n(a)}})}}};function fe(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:fe(n)}}function Tt(e){const t=e||window.event,n=t.target;return fe(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const X=new WeakMap;function Mt(e,t=!1){const n=o.ref(t);let r=null,a="";o.watch(f.toRef(e),l=>{const m=j(f.toValue(l));if(m){const d=m;if(X.get(d)||X.set(d,d.style.overflow),d.style.overflow!=="hidden"&&(a=d.style.overflow),d.style.overflow==="hidden")return n.value=!0;if(n.value)return d.style.overflow="hidden"}},{immediate:!0});const i=()=>{const l=j(f.toValue(e));!l||n.value||(f.isIOS&&(r=R(l,"touchmove",m=>{Tt(m)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},s=()=>{const l=j(f.toValue(e));!l||!n.value||(f.isIOS&&r?.(),l.style.overflow=a,X.delete(l),n.value=!1)};return f.tryOnScopeDispose(s),o.computed({get(){return n.value},set(l){l?i():s()}})}function kt(){let e=!1;const t=o.ref(!1);return(n,r)=>{if(t.value=r.value,e)return;e=!0;const a=Mt(n,r.value);o.watch(t,i=>a.value=i)}}const At=kt(),Rt=o.defineComponent({name:"UseTimeAgo",props:["time","updateInterval","max","fullDateFormatter","messages","showSecond"],setup(e,{slots:t}){const n=o.reactive(U.useTimeAgo(()=>e.time,{...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),zt=o.defineComponent({name:"UseTimestamp",props:["immediate","interval","offset"],setup(e,{slots:t}){const n=o.reactive(U.useTimestamp({...e,controls:!0}));return()=>{if(t.default)return t.default(n)}}}),It=o.defineComponent({name:"UseVirtualList",props:["list","options","height"],setup(e,{slots:t,expose:n}){const{list:r}=o.toRefs(e),{list:a,containerProps:i,wrapperProps:s,scrollTo:l}=U.useVirtualList(r,e.options);return n({scrollTo:l}),i.style&&typeof i.style=="object"&&!Array.isArray(i.style)&&(i.style.height=e.height||"300px"),()=>o.h("div",{...i},[o.h("div",{...s.value},a.value.map(m=>o.h("div",{style:{overflow:"hidden",height:m.height}},t.default?t.default(m):"Please set content!")))])}}),Wt=o.defineComponent({name:"UseWindowFocus",setup(e,{slots:t}){const n=o.reactive({focused:U.useWindowFocus()});return()=>{if(t.default)return t.default(n)}}}),Nt=o.defineComponent({name:"UseWindowSize",props:["initialWidth","initialHeight"],setup(e,{slots:t}){const n=o.reactive(U.useWindowSize(e));return()=>{if(t.default)return t.default(n)}}});h.OnClickOutside=ge,h.OnLongPress=Se,h.UseActiveElement=be,h.UseBattery=Ce,h.UseBrowserLocation=Ee,h.UseClipboard=Pe,h.UseColorMode=We,h.UseDark=Ne,h.UseDeviceMotion=Be,h.UseDeviceOrientation=He,h.UseDevicePixelRatio=je,h.UseDevicesList=Fe,h.UseDocumentVisibility=Ke,h.UseDraggable=xe,h.UseElementBounding=Ge,h.UseElementSize=$e,h.UseElementVisibility=qe,h.UseEyeDropper=Ze,h.UseFullscreen=et,h.UseGeolocation=tt,h.UseIdle=nt,h.UseImage=it,h.UseMouse=ut,h.UseMouseInElement=ct,h.UseMousePressed=ft,h.UseNetwork=dt,h.UseNow=mt,h.UseObjectUrl=pt,h.UseOffsetPagination=vt,h.UseOnline=gt,h.UsePageLeave=ht,h.UsePointer=yt,h.UsePointerLock=wt,h.UsePreferredColorScheme=Ut,h.UsePreferredContrast=St,h.UsePreferredDark=bt,h.UsePreferredLanguages=Ct,h.UsePreferredReducedMotion=Et,h.UsePreferredReducedTransparency=Pt,h.UseScreenSafeArea=Dt,h.UseTimeAgo=Rt,h.UseTimestamp=zt,h.UseVirtualList=It,h.UseWindowFocus=Wt,h.UseWindowSize=Nt,h.VOnClickOutside=Z,h.VOnLongPress=te,h.vElementHover=Je,h.vElementSize=Xe,h.vElementVisibility=Qe,h.vInfiniteScroll=st,h.vIntersectionObserver=lt,h.vOnClickOutside=Z,h.vOnKeyStroke=ye,h.vOnLongPress=te,h.vResizeObserver=Ot,h.vScroll=Lt,h.vScrollLock=At})(this.VueUse=this.VueUse||{},VueUse,Vue,VueUse);

package/index.mjs

@@ -1,6 +1,6 @@
-import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, 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, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
-import { defineComponent, ref, h, watch, computed, reactive, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
-import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
+import { onClickOutside as onClickOutside$1, useActiveElement, useBattery, useBrowserLocation, useClipboard, 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, usePreferredReducedTransparency, useTimeAgo, useTimestamp, useVirtualList, useWindowFocus, useWindowSize } from '@vueuse/core';
+import { defineComponent, ref, h, watch, computed, reactive, hasInjectionContext, getCurrentInstance, onMounted, watchEffect, shallowRef, nextTick, toRefs } from 'vue';
+import { isClient, toValue, noop, isObject, tryOnScopeDispose, isIOS, injectLocal, pxValue, pausableWatch, tryOnMounted, toRef, useToggle, notNullish, promiseTimeout, until, useDebounceFn, useThrottleFn, tryOnUnmounted } from '@vueuse/shared';
 
 const OnClickOutside = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "OnClickOutside",
@@ -411,6 +411,12 @@ function getSSRHandler(key, fallback) {
   return handlers[key] || fallback;
 }
 
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+function useSSRWidth() {
+  const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+
 function useMounted() {
   const isMounted = ref(false);
   const instance = getCurrentInstance();
@@ -431,8 +437,9 @@ function useSupported(callback) {
 }
 
 function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  const ssrSupport = ref(typeof ssrWidth === "number");
   let mediaQuery;
   const matches = ref(false);
   const handler = (event) => {
@@ -447,6 +454,24 @@ function useMediaQuery(query, options = {}) {
       mediaQuery.removeListener(handler);
   };
   const stopWatch = watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      const queryStrings = toValue(query).split(",");
+      matches.value = queryStrings.some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) {
+          res = ssrWidth >= pxValue(minWidth[1]);
+        }
+        if (maxWidth && res) {
+          res = ssrWidth <= pxValue(maxWidth[1]);
+        }
+        return not ? !res : res;
+      });
+      return;
+    }
     if (!isSupported.value)
       return;
     cleanup();
@@ -462,7 +487,7 @@ function useMediaQuery(query, options = {}) {
     cleanup();
     mediaQuery = void 0;
   });
-  return matches;
+  return computed(() => matches.value);
 }
 
 function usePreferredDark(options) {
@@ -760,7 +785,7 @@ const UseDark = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
 const UseDeviceMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseDeviceMotion",
   setup(props, { slots }) {
-    const data = reactive(useDeviceMotion());
+    const data = useDeviceMotion();
     return () => {
       if (slots.default)
         return slots.default(data);
@@ -1124,7 +1149,12 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin
+  } = options;
   const elementIsVisible = ref(false);
   useIntersectionObserver(
     element,
@@ -1142,7 +1172,8 @@ function useElementVisibility(element, options = {}) {
     {
       root: scrollTarget,
       window,
-      threshold
+      threshold,
+      rootMargin: toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -1276,20 +1307,32 @@ function useAsyncState(promise, initialState, options) {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy, width, height, decoding, fetchPriority, ismap, usemap } = options;
     img.src = src;
-    if (srcset)
+    if (srcset != null)
       img.srcset = srcset;
-    if (sizes)
+    if (sizes != null)
       img.sizes = sizes;
-    if (clazz)
+    if (clazz != null)
       img.className = clazz;
-    if (loading)
+    if (loading != null)
       img.loading = loading;
-    if (crossorigin)
+    if (crossorigin != null)
       img.crossOrigin = crossorigin;
-    if (referrerPolicy)
+    if (referrerPolicy != null)
       img.referrerPolicy = referrerPolicy;
+    if (width != null)
+      img.width = width;
+    if (height != null)
+      img.height = height;
+    if (decoding != null)
+      img.decoding = decoding;
+    if (fetchPriority != null)
+      img.fetchPriority = fetchPriority;
+    if (ismap != null)
+      img.isMap = ismap;
+    if (usemap != null)
+      img.useMap = usemap;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -1322,7 +1365,13 @@ const UseImage = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
     "class",
     "loading",
     "crossorigin",
-    "referrerPolicy"
+    "referrerPolicy",
+    "width",
+    "height",
+    "decoding",
+    "fetchPriority",
+    "ismap",
+    "usemap"
   ],
   setup(props, { slots }) {
     const data = reactive(useImage(props));
@@ -1434,12 +1483,13 @@ function useScroll(element, options = {}) {
     if (!window)
       return;
     const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-    const { display, flexDirection } = getComputedStyle(el);
+    const { display, flexDirection, direction } = getComputedStyle(el);
+    const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= (offset.left || 0);
-    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = scrollLeft * directionMultipler <= (offset.left || 0);
+    const right = scrollLeft * directionMultipler + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -1453,8 +1503,8 @@ function useScroll(element, options = {}) {
       scrollTop = window.document.body.scrollTop;
     directions.top = scrollTop < internalY.value;
     directions.bottom = scrollTop > internalY.value;
-    const top = Math.abs(scrollTop) <= (offset.top || 0);
-    const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const top = scrollTop <= (offset.top || 0);
+    const bottom = scrollTop + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "column-reverse") {
       arrivedState.top = bottom;
       arrivedState.bottom = top;
@@ -1824,6 +1874,19 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ defineComponen
   }
 });
 
+const UsePreferredReducedTransparency = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
+  name: "UsePreferredReducedTransparency",
+  setup(props, { slots }) {
+    const data = reactive({
+      transparency: usePreferredReducedTransparency()
+    });
+    return () => {
+      if (slots.default)
+        return slots.default(data);
+    };
+  }
+});
+
 const vResizeObserver = {
   mounted(el, binding) {
     if (typeof binding.value === "function")
@@ -2190,4 +2253,4 @@ const UseWindowSize = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   }
 });
 
-export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
+export { OnClickOutside, OnLongPress, UseActiveElement, UseBattery, UseBrowserLocation, UseClipboard, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseImage, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseObjectUrl, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePointerLock, UsePreferredColorScheme, UsePreferredContrast, UsePreferredDark, UsePreferredLanguages, UsePreferredReducedMotion, UsePreferredReducedTransparency, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@vueuse/components",
-  "version": "12.0.0",
+  "type": "module",
+  "version": "12.2.0-beta.3",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",
@@ -30,10 +31,22 @@
   "module": "./index.mjs",
   "unpkg": "./index.iife.min.js",
   "jsdelivr": "./index.iife.min.js",
-  "types": "./index.d.cts",
+  "types": "./index.d.ts",
+  "files": [
+    "*.cjs",
+    "*.d.cts",
+    "*.d.mts",
+    "*.d.ts",
+    "*.js",
+    "*.mjs",
+    "index.json"
+  ],
   "dependencies": {
-    "@vueuse/core": "12.0.0",
-    "@vueuse/shared": "12.0.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "@vueuse/core": "12.2.0-beta.3",
+    "@vueuse/shared": "12.2.0-beta.3"
+  },
+  "scripts": {
+    "build": "rollup --config=rollup.config.ts --configPlugin=rollup-plugin-esbuild"
   }
-}
+}