@vueuse/components 10.11.0 → 11.0.0-beta.2

package/index.cjs

@@ -467,8 +467,10 @@ function useStorage(key, defaults, storage, options = {}) {
   );
   if (window && listenToStorageChanges) {
     shared.tryOnMounted(() => {
-      useEventListener(window, "storage", update);
-      useEventListener(window, customStorageEventName, updateFromCustomEvent);
+      if (storage instanceof Storage)
+        useEventListener(window, "storage", update);
+      else
+        useEventListener(window, customStorageEventName, updateFromCustomEvent);
       if (initOnMounted)
         update();
     });
@@ -476,7 +478,7 @@ function useStorage(key, defaults, storage, options = {}) {
   if (!initOnMounted)
     update();
   function dispatchWriteEvent(oldValue, newValue) {
-    if (window) {
+    if (window && !(storage instanceof Storage)) {
       window.dispatchEvent(new CustomEvent(customStorageEventName, {
         detail: {
           key,
@@ -609,6 +611,7 @@ function usePreferredDark(options) {
   return useMediaQuery("(prefers-color-scheme: dark)", options);
 }
 
+const CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
 function useColorMode(options = {}) {
   const {
     selector = "html",
@@ -638,23 +641,36 @@ function useColorMode(options = {}) {
       const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
-      let style;
-      if (disableTransition) {
-        style = window.document.createElement("style");
-        const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
-        style.appendChild(document.createTextNode(styleString));
-        window.document.head.appendChild(style);
-      }
+      const classesToAdd = /* @__PURE__ */ new Set();
+      const classesToRemove = /* @__PURE__ */ new Set();
+      let attributeToChange = null;
       if (attribute2 === "class") {
         const current = value.split(/\s/g);
         Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
           if (current.includes(v))
-            el.classList.add(v);
+            classesToAdd.add(v);
           else
-            el.classList.remove(v);
+            classesToRemove.add(v);
         });
       } else {
-        el.setAttribute(attribute2, value);
+        attributeToChange = { key: attribute2, value };
+      }
+      if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
+        return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
+        window.document.head.appendChild(style);
+      }
+      for (const c of classesToAdd) {
+        el.classList.add(c);
+      }
+      for (const c of classesToRemove) {
+        el.classList.remove(c);
+      }
+      if (attributeToChange) {
+        el.setAttribute(attributeToChange.key, attributeToChange.value);
       }
       if (disableTransition) {
         window.getComputedStyle(style).opacity;
@@ -798,7 +814,8 @@ const UseDraggable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
     "onStart",
     "onMove",
     "onEnd",
-    "disabled"
+    "disabled",
+    "buttons"
   ],
   setup(props, { slots }) {
     const target = vueDemi.ref();
@@ -876,9 +893,14 @@ function useElementHover(el, options = {}) {
 
 const vElementHover = {
   [shared.directiveHooks.mounted](el, binding) {
-    if (typeof binding.value === "function") {
+    const value = binding.value;
+    if (typeof value === "function") {
       const isHovered = useElementHover(el);
-      vueDemi.watch(isHovered, (v) => binding.value(v));
+      vueDemi.watch(isHovered, (v) => value(v));
+    } else {
+      const [handler, options] = value;
+      const isHovered = useElementHover(el, options);
+      vueDemi.watch(isHovered, (v) => handler(v));
     }
   }
 };
@@ -906,15 +928,20 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = vueDemi.computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const targets = vueDemi.computed(() => {
+    const _targets = shared.toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
   const stopWatch = vueDemi.watch(
     targets,
     (els) => {
       cleanup();
       if (isSupported.value && window) {
         observer = new ResizeObserver(callback);
-        for (const _el of els)
-          _el && observer.observe(_el, observerOptions);
+        for (const _el of els) {
+          if (_el)
+            observer.observe(_el, observerOptions);
+        }
       }
     },
     { immediate: true, flush: "post" }
@@ -1016,7 +1043,7 @@ function useIntersectionObserver(target, callback, options = {}) {
   const {
     root,
     rootMargin = "0px",
-    threshold = 0.1,
+    threshold = 0,
     window = defaultWindow,
     immediate = true
   } = options;
@@ -1505,7 +1532,10 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
     { immediate: true }
   );
   return {
-    isLoading
+    isLoading,
+    reset() {
+      vueDemi.nextTick(() => checkAndLoad());
+    }
   };
 }
 
@@ -1768,6 +1798,15 @@ const UsePreferredReducedMotion = /* @__PURE__ */ /* #__PURE__ */ vueDemi.define
   }
 });
 
+const vResizeObserver = {
+  [shared.directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === "function")
+      useResizeObserver(el, binding.value);
+    else
+      useResizeObserver(el, ...binding.value);
+  }
+};
+
 function useMutationObserver(target, callback, options = {}) {
   const { window = defaultWindow, ...mutationOptions } = options;
   let observer;
@@ -1798,8 +1837,8 @@ function useMutationObserver(target, callback, options = {}) {
     return observer == null ? void 0 : observer.takeRecords();
   };
   const stop = () => {
-    cleanup();
     stopWatch();
+    cleanup();
   };
   shared.tryOnScopeDispose(stop);
   return {
@@ -1810,7 +1849,7 @@ function useMutationObserver(target, callback, options = {}) {
 }
 
 function useCssVar(prop, target, options = {}) {
-  const { window = defaultWindow, initialValue = "", observe = false } = options;
+  const { window = defaultWindow, initialValue, observe = false } = options;
   const variable = vueDemi.ref(initialValue);
   const elRef = vueDemi.computed(() => {
     var _a;
@@ -1820,7 +1859,7 @@ function useCssVar(prop, target, options = {}) {
     var _a;
     const key = shared.toValue(prop);
     const el = shared.toValue(elRef);
-    if (el && window) {
+    if (el && window && key) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
       variable.value = value || initialValue;
     }
@@ -1833,15 +1872,24 @@ function useCssVar(prop, target, options = {}) {
   }
   vueDemi.watch(
     [elRef, () => shared.toValue(prop)],
-    updateCssVar,
+    (_, old) => {
+      if (old[0] && old[1] && window)
+        window.getComputedStyle(old[0]).removeProperty(old[1]);
+      updateCssVar();
+    },
     { immediate: true }
   );
   vueDemi.watch(
     variable,
     (val) => {
       var _a;
-      if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(shared.toValue(prop), val);
+      const raw_prop = shared.toValue(prop);
+      if (((_a = elRef.value) == null ? void 0 : _a.style) && raw_prop) {
+        if (val == null)
+          elRef.value.style.removeProperty(raw_prop);
+        else
+          elRef.value.style.setProperty(raw_prop, val);
+      }
     }
   );
   return variable;
@@ -2015,7 +2063,8 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(shared.toValue(element));
     if (!el || !isLocked.value)
       return;
-    shared.isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    if (shared.isIOS)
+      stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
     el.style.overflow = initialOverflow;
     elInitialOverflow.delete(el);
     isLocked.value = false;
@@ -2028,7 +2077,8 @@ function useScrollLock(element, initialState = false) {
     set(v) {
       if (v)
         lock();
-      else unlock();
+      else
+        unlock();
     }
   });
 }
@@ -2169,5 +2219,6 @@ exports.vIntersectionObserver = vIntersectionObserver;
 exports.vOnClickOutside = vOnClickOutside;
 exports.vOnKeyStroke = vOnKeyStroke;
 exports.vOnLongPress = vOnLongPress;
+exports.vResizeObserver = vResizeObserver;
 exports.vScroll = vScroll;
 exports.vScrollLock = vScrollLock;

package/index.d.cts

@@ -13,7 +13,7 @@ interface RenderableComponent {
      *
      * @default 'div'
      */
-    as?: Object | string;
+    as?: object | string;
 }
 
 type VueInstance = ComponentPublicInstance;
@@ -63,9 +63,9 @@ interface OnKeyStrokeOptions {
     dedupe?: MaybeRefOrGetter<boolean>;
 }
 
-type BindingValueFunction$7 = (event: KeyboardEvent) => void;
-type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
-declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
+type BindingValueFunction$8 = (event: KeyboardEvent) => void;
+type BindingValueArray$7 = [BindingValueFunction$8, OnKeyStrokeOptions];
+declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$8 | BindingValueArray$7>;
 
 interface OnLongPressOptions {
     /**
@@ -102,12 +102,12 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<OnLongPressProps>, {}, {}>;
 
-type BindingValueFunction$6 = (evt: PointerEvent) => void;
-type BindingValueArray$5 = [
-    BindingValueFunction$6,
+type BindingValueFunction$7 = (evt: PointerEvent) => void;
+type BindingValueArray$6 = [
+    BindingValueFunction$7,
     OnLongPressOptions
 ];
-declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
+declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -295,6 +295,18 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseDraggableProps>, {}, {}>;
 
+interface ResizeObserverSize {
+    readonly inlineSize: number;
+    readonly blockSize: number;
+}
+interface ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: DOMRectReadOnly;
+    readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
+    readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+    readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+}
+type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
 interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
@@ -304,11 +316,22 @@ interface UseResizeObserverOptions extends ConfigurableWindow {
      */
     box?: ResizeObserverBoxOptions;
 }
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    disconnect(): void;
+    observe(target: Element, options?: UseResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
 
 declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
-type BindingValueFunction$5 = (state: boolean) => void;
-declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
+interface UseElementHoverOptions extends ConfigurableWindow {
+    delayEnter?: number;
+    delayLeave?: number;
+}
+
+type BindingValueFunction$6 = (state: boolean) => void;
+declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$6 | [handler: BindingValueFunction$6, options: UseElementHoverOptions]>;
 
 declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
@@ -328,10 +351,10 @@ declare function useElementSize(target: MaybeComputedElementRef, initialSize?: E
 };
 
 type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
-type BindingValueFunction$4 = (size: ElementSize) => void;
+type BindingValueFunction$5 = (size: ElementSize) => void;
 type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
-type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
-declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
+type BindingValueArray$5 = [BindingValueFunction$5, ...VElementSizeOptions];
+declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$5>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
@@ -352,6 +375,7 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
     rootMargin?: string;
     /**
      * Either a single number or an array of numbers between 0.0 and 1.
+     * @default 0
      */
     threshold?: number | number[];
 }
@@ -360,9 +384,9 @@ interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseInters
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
-type BindingValueFunction$3 = (state: boolean) => void;
-type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
-declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+type BindingValueFunction$4 = (state: boolean) => void;
+type BindingValueArray$4 = [BindingValueFunction$4, UseElementVisibilityOptions];
+declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
 declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
@@ -518,15 +542,16 @@ interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScr
  */
 declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
     isLoading: vue_demi.ComputedRef<boolean>;
+    reset(): void;
 };
 
-type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
-type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
-type BindingValueFunction$1 = IntersectionObserverCallback;
-type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
-declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+type BindingValueFunction$2 = IntersectionObserverCallback;
+type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseMouseOptions>, {}, {}>;
 
@@ -594,9 +619,9 @@ declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vu
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
-    target: 'window' | 'self';
+    target: "window" | "self";
 }, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<UsePointerOptions, "target"> & {
-    target: 'window' | 'self';
+    target: "window" | "self";
 }>, {}, {}>;
 
 declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
@@ -621,6 +646,10 @@ declare const UsePreferredReducedMotion: vue_demi.DefineComponent<{}, () => vue_
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
+type BindingValueFunction$1 = ResizeObserverCallback;
+type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
+declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
     right: BooleanConstructor;
@@ -681,4 +710,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseWindowSizeOptions>, {}, {}>;
 
-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, 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, 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

@@ -13,7 +13,7 @@ interface RenderableComponent {
      *
      * @default 'div'
      */
-    as?: Object | string;
+    as?: object | string;
 }
 
 type VueInstance = ComponentPublicInstance;
@@ -63,9 +63,9 @@ interface OnKeyStrokeOptions {
     dedupe?: MaybeRefOrGetter<boolean>;
 }
 
-type BindingValueFunction$7 = (event: KeyboardEvent) => void;
-type BindingValueArray$6 = [BindingValueFunction$7, OnKeyStrokeOptions];
-declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
+type BindingValueFunction$8 = (event: KeyboardEvent) => void;
+type BindingValueArray$7 = [BindingValueFunction$8, OnKeyStrokeOptions];
+declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$8 | BindingValueArray$7>;
 
 interface OnLongPressOptions {
     /**
@@ -102,12 +102,12 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<OnLongPressProps>, {}, {}>;
 
-type BindingValueFunction$6 = (evt: PointerEvent) => void;
-type BindingValueArray$5 = [
-    BindingValueFunction$6,
+type BindingValueFunction$7 = (evt: PointerEvent) => void;
+type BindingValueArray$6 = [
+    BindingValueFunction$7,
     OnLongPressOptions
 ];
-declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
+declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$7 | BindingValueArray$6>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -295,6 +295,18 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseDraggableProps>, {}, {}>;
 
+interface ResizeObserverSize {
+    readonly inlineSize: number;
+    readonly blockSize: number;
+}
+interface ResizeObserverEntry {
+    readonly target: Element;
+    readonly contentRect: DOMRectReadOnly;
+    readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
+    readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+    readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+}
+type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
 interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
@@ -304,11 +316,22 @@ interface UseResizeObserverOptions extends ConfigurableWindow {
      */
     box?: ResizeObserverBoxOptions;
 }
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    disconnect(): void;
+    observe(target: Element, options?: UseResizeObserverOptions): void;
+    unobserve(target: Element): void;
+}
 
 declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
-type BindingValueFunction$5 = (state: boolean) => void;
-declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$5>;
+interface UseElementHoverOptions extends ConfigurableWindow {
+    delayEnter?: number;
+    delayLeave?: number;
+}
+
+type BindingValueFunction$6 = (state: boolean) => void;
+declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$6 | [handler: BindingValueFunction$6, options: UseElementHoverOptions]>;
 
 declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}, {}>;
 
@@ -328,10 +351,10 @@ declare function useElementSize(target: MaybeComputedElementRef, initialSize?: E
 };
 
 type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
-type BindingValueFunction$4 = (size: ElementSize) => void;
+type BindingValueFunction$5 = (size: ElementSize) => void;
 type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
-type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
-declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
+type BindingValueArray$5 = [BindingValueFunction$5, ...VElementSizeOptions];
+declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$5>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
@@ -352,6 +375,7 @@ interface UseIntersectionObserverOptions extends ConfigurableWindow {
     rootMargin?: string;
     /**
      * Either a single number or an array of numbers between 0.0 and 1.
+     * @default 0
      */
     threshold?: number | number[];
 }
@@ -360,9 +384,9 @@ interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseInters
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
-type BindingValueFunction$3 = (state: boolean) => void;
-type BindingValueArray$3 = [BindingValueFunction$3, UseElementVisibilityOptions];
-declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
+type BindingValueFunction$4 = (state: boolean) => void;
+type BindingValueArray$4 = [BindingValueFunction$4, UseElementVisibilityOptions];
+declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
 declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
@@ -518,15 +542,16 @@ interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScr
  */
 declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
     isLoading: vue_demi.ComputedRef<boolean>;
+    reset(): void;
 };
 
-type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
-type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
-declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+type BindingValueFunction$3 = Parameters<typeof useInfiniteScroll>[1];
+type BindingValueArray$3 = [BindingValueFunction$3, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
-type BindingValueFunction$1 = IntersectionObserverCallback;
-type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
-declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+type BindingValueFunction$2 = IntersectionObserverCallback;
+type BindingValueArray$2 = [BindingValueFunction$2, UseIntersectionObserverOptions];
+declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
 declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseMouseOptions>, {}, {}>;
 
@@ -594,9 +619,9 @@ declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vu
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePointer: vue_demi.DefineComponent<Omit<UsePointerOptions, "target"> & {
-    target: 'window' | 'self';
+    target: "window" | "self";
 }, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<UsePointerOptions, "target"> & {
-    target: 'window' | 'self';
+    target: "window" | "self";
 }>, {}, {}>;
 
 declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
@@ -621,6 +646,10 @@ declare const UsePreferredReducedMotion: vue_demi.DefineComponent<{}, () => vue_
     [key: string]: any;
 }>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
+type BindingValueFunction$1 = ResizeObserverCallback;
+type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
+declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
     right: BooleanConstructor;
@@ -681,4 +710,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseWindowSizeOptions>, {}, {}>;
 
-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, 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, 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 };