@vueuse/components 10.7.1 → 10.8.0

package/index.d.ts

@@ -46,7 +46,7 @@ type OnClickOutsideHandler<T extends {
 interface OnClickOutsideProps extends RenderableComponent {
     options?: OnClickOutsideOptions;
 }
-declare const OnClickOutside: vue_demi.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnClickOutsideProps>, {}, {}>;
+declare const OnClickOutside: vue_demi.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<OnClickOutsideProps>, {}, {}>;
 
 declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, OnClickOutsideOptions]>;
 
@@ -93,7 +93,7 @@ interface OnLongPressModifiers {
 interface OnLongPressProps extends RenderableComponent {
     options?: OnLongPressOptions;
 }
-declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}, {}>;
+declare 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 = [
@@ -104,29 +104,29 @@ declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$6
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseBattery: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseBrowserLocation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {
 }
-declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseClipboardProps<string>>, {}, {}>;
+declare const UseClipboard: vue_demi.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseClipboardProps<string>>, {}, {}>;
 
 interface StorageLike {
-    getItem(key: string): string | null;
-    setItem(key: string, value: string): void;
-    removeItem(key: string): void;
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+    removeItem: (key: string) => void;
 }
 
 interface Serializer<T> {
-    read(raw: string): T;
-    write(value: T): string;
+    read: (raw: string) => T;
+    write: (value: T) => string;
 }
 interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
     /**
@@ -252,27 +252,27 @@ interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStor
     disableTransition?: boolean;
 }
 
-declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseColorModeOptions<BasicColorMode>>, {}, {}>;
+declare const UseColorMode: vue_demi.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseColorModeOptions<BasicColorMode>>, {}, {}>;
 
-declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDarkOptions>, {}, {}>;
+declare const UseDark: vue_demi.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseDarkOptions>, {}, {}>;
 
 declare const UseDeviceMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseDeviceOrientation: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseDevicePixelRatio: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDevicesListOptions>, {}, {}>;
+declare const UseDevicesList: vue_demi.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseDevicesListOptions>, {}, {}>;
 
 declare const UseDocumentVisibility: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
     /**
@@ -286,7 +286,7 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
      */
     storageType?: 'local' | 'session';
 }
-declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}, {}>;
+declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseDraggableProps>, {}, {}>;
 
 interface UseResizeObserverOptions extends ConfigurableWindow {
     /**
@@ -298,12 +298,12 @@ interface UseResizeObserverOptions extends ConfigurableWindow {
     box?: ResizeObserverBoxOptions;
 }
 
-declare const UseElementBounding: vue_demi.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseResizeObserverOptions & RenderableComponent>, {}, {}>;
+declare 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>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & UseResizeObserverOptions & RenderableComponent>, {}, {}>;
+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>, {}, {}>;
 
 interface ElementSize {
     width: number;
@@ -326,9 +326,30 @@ type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize
 type BindingValueArray$4 = [BindingValueFunction$4, ...VElementSizeOptions];
 declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$4 | BindingValueArray$4>;
 
-declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
+declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
-interface UseElementVisibilityOptions extends ConfigurableWindow {
+interface UseIntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * Start the IntersectionObserver immediately on creation
+     *
+     * @default true
+     */
+    immediate?: boolean;
+    /**
+     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+     */
+    root?: MaybeComputedElementRef;
+    /**
+     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
+     */
+    rootMargin?: string;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.
+     */
+    threshold?: number | number[];
+}
+
+interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
     scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
 }
 
@@ -340,17 +361,17 @@ declare const UseEyeDropper: vue_demi.DefineComponent<{
     sRGBHex: StringConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}>[] | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     sRGBHex: StringConstructor;
 }>>, {}, {}>;
 
-declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
+declare const UseFullscreen: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
-declare const UseGeolocation: vue_demi.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseGeolocationOptions>, {}, {}>;
+declare const UseGeolocation: vue_demi.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseGeolocationOptions>, {}, {}>;
 
 declare const UseIdle: vue_demi.DefineComponent<UseIdleOptions & {
     timeout: number;
-}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseIdleOptions & {
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseIdleOptions & {
     timeout: number;
 }>, {}, {}>;
 
@@ -373,7 +394,7 @@ interface UseImageOptions {
     referrerPolicy?: HTMLImageElement['referrerPolicy'];
 }
 
-declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseImageOptions & RenderableComponent>, {}, {}>;
+declare const UseImage: vue_demi.DefineComponent<UseImageOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseImageOptions & RenderableComponent>, {}, {}>;
 
 interface UseScrollOptions extends ConfigurableWindow {
     /**
@@ -422,6 +443,12 @@ interface UseScrollOptions extends ConfigurableWindow {
      * @default 'auto'
      */
     behavior?: MaybeRefOrGetter<ScrollBehavior>;
+    /**
+     * On error callback
+     *
+     * Default log error to `console.error`
+     */
+    onError?: (error: unknown) => void;
 }
 /**
  * Reactive scroll.
@@ -490,47 +517,26 @@ type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
 declare const vInfiniteScroll: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-interface UseIntersectionObserverOptions extends ConfigurableWindow {
-    /**
-     * Start the IntersectionObserver immediately on creation
-     *
-     * @default true
-     */
-    immediate?: boolean;
-    /**
-     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
-     */
-    root?: MaybeComputedElementRef;
-    /**
-     * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
-     */
-    rootMargin?: string;
-    /**
-     * Either a single number or an array of numbers between 0.0 and 1.
-     */
-    threshold?: number | number[];
-}
-
 type BindingValueFunction$1 = IntersectionObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
-declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseMouseOptions>, {}, {}>;
+declare const UseMouse: vue_demi.DefineComponent<UseMouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseMouseOptions>, {}, {}>;
 
-declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseInElementOptions & RenderableComponent>, {}, {}>;
+declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<MouseInElementOptions & RenderableComponent>, {}, {}>;
 
-declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent>, {}, {}>;
+declare const UseMousePressed: vue_demi.DefineComponent<Omit<MousePressedOptions, "target"> & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<MousePressedOptions, "target"> & RenderableComponent>, {}, {}>;
 
 declare const UseNetwork: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}, {}>;
+declare const UseNow: vue_demi.DefineComponent<Omit<UseNowOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<UseNowOptions<true>, "controls">>, {}, {}>;
 
 interface UseObjectUrlProps {
     object: Blob | MediaSource | undefined;
 }
-declare const UseObjectUrl: vue_demi.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseObjectUrlProps>, {}, {}>;
+declare const UseObjectUrl: vue_demi.DefineComponent<UseObjectUrlProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseObjectUrlProps>, {}, {}>;
 
 interface UseOffsetPaginationOptions {
     /**
@@ -570,43 +576,43 @@ interface UseOffsetPaginationReturn {
     next: () => void;
 }
 
-declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseOffsetPaginationOptions>, {}, {}>;
+declare const UseOffsetPagination: vue_demi.DefineComponent<UseOffsetPaginationOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseOffsetPaginationOptions>, {}, {}>;
 
 declare const UseOnline: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePageLeave: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | 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';
-}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UsePointerOptions, "target"> & {
+}, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<UsePointerOptions, "target"> & {
     target: 'window' | 'self';
 }>, {}, {}>;
 
-declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}, {}>;
+declare const UsePointerLock: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<RenderableComponent>, {}, {}>;
 
 declare const UsePreferredColorScheme: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredContrast: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredDark: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredLanguages: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UsePreferredReducedMotion: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
 declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     top: BooleanConstructor;
@@ -615,7 +621,7 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     left: BooleanConstructor;
 }, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
+}> | undefined, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{
     top: BooleanConstructor;
     right: BooleanConstructor;
     bottom: BooleanConstructor;
@@ -636,9 +642,9 @@ declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
 interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
     time: MaybeRef<Date | number | string>;
 }
-declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}, {}>;
+declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseTimeAgoComponentOptions>, {}, {}>;
 
-declare const UseTimestamp: vue_demi.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<Omit<UseTimestampOptions<true>, "controls">>, {}, {}>;
+declare const UseTimestamp: vue_demi.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<Omit<UseTimestampOptions<true>, "controls">>, {}, {}>;
 
 interface UseVirtualListProps {
     /**
@@ -660,12 +666,12 @@ interface UseVirtualListProps {
      */
     height: string;
 }
-declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseVirtualListProps>, {}, {}>;
+declare const UseVirtualList: vue_demi.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<UseVirtualListProps>, {}, {}>;
 
 declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
+}>[] | undefined, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.PublicProps, Readonly<vue_demi.ExtractPropTypes<{}>>, {}, {}>;
 
-declare const UseWindowSize: vue_demi.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseWindowSizeOptions>, {}, {}>;
+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 };

package/index.iife.js

@@ -19,7 +19,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     VueDemi.Vue2 = Vue
     VueDemi.version = Vue.version
     VueDemi.warn = Vue.util.warn
-    VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
+    VueDemi.hasInjectionContext = function() {
+      return !!VueDemi.getCurrentInstance()
+    }
     function createApp(rootComponent, rootProps) {
       var vm
       var provide = {}
@@ -72,7 +74,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       VueDemi.Vue = Vue
       VueDemi.Vue2 = Vue
       VueDemi.version = Vue.version
-      VueDemi.hasInjectionContext = () => !!VueDemi.getCurrentInstance()
+      VueDemi.hasInjectionContext = function() {
+        return !!VueDemi.getCurrentInstance()
+      }
     } else {
       console.error('[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.')
     }
@@ -565,23 +569,27 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return data;
     function write(v) {
       try {
+        const oldValue = storage.getItem(key);
+        const dispatchWriteEvent = (newValue) => {
+          if (window) {
+            window.dispatchEvent(new CustomEvent(customStorageEventName, {
+              detail: {
+                key,
+                oldValue,
+                newValue,
+                storageArea: storage
+              }
+            }));
+          }
+        };
         if (v == null) {
+          dispatchWriteEvent(null);
           storage.removeItem(key);
         } else {
           const serialized = serializer.write(v);
-          const oldValue = storage.getItem(key);
           if (oldValue !== serialized) {
             storage.setItem(key, serialized);
-            if (window) {
-              window.dispatchEvent(new CustomEvent(customStorageEventName, {
-                detail: {
-                  key,
-                  oldValue,
-                  newValue: serialized,
-                  storageArea: storage
-                }
-              }));
-            }
+            dispatchWriteEvent(serialized);
           }
         }
       } catch (e) {
@@ -636,10 +644,11 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
 
   function useMounted() {
     const isMounted = vueDemi.ref(false);
-    if (vueDemi.getCurrentInstance()) {
+    const instance = vueDemi.getCurrentInstance();
+    if (instance) {
       vueDemi.onMounted(() => {
         isMounted.value = true;
-      });
+      }, instance);
     }
     return isMounted;
   }
@@ -879,7 +888,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       "axis",
       "onStart",
       "onMove",
-      "onEnd"
+      "onEnd",
+      "disabled"
     ],
     setup(props, { slots }) {
       const target = vueDemi.ref();
@@ -887,6 +897,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         var _a;
         return (_a = props.handle) != null ? _a : target.value;
       });
+      const disabled = vueDemi.computed(() => !!props.disabled);
       const storageValue = props.storageKey && core.useStorage(
         props.storageKey,
         shared.toValue(props.initialValue) || { x: 0, y: 0 },
@@ -905,7 +916,8 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         ...props,
         handle,
         initialValue,
-        onEnd
+        onEnd,
+        disabled
       }));
       return () => {
         if (slots.default)
@@ -996,7 +1008,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
             _el && observer.observe(_el, observerOptions);
         }
       },
-      { immediate: true, flush: "post", deep: true }
+      { immediate: true, flush: "post" }
     );
     const stop = () => {
       cleanup();
@@ -1151,7 +1163,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   function useElementVisibility(element, options = {}) {
-    const { window = defaultWindow, scrollTarget } = options;
+    const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
     const elementIsVisible = vueDemi.ref(false);
     useIntersectionObserver(
       element,
@@ -1169,7 +1181,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       {
         root: scrollTarget,
         window,
-        threshold: 0
+        threshold
       }
     );
     return elementIsVisible;
@@ -1383,7 +1395,10 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         passive: true
       },
       behavior = "auto",
-      window = defaultWindow
+      window = defaultWindow,
+      onError = (e) => {
+        console.error(e);
+      }
     } = options;
     const internalX = vueDemi.ref(0);
     const internalY = vueDemi.ref(0);
@@ -1444,12 +1459,12 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       var _a;
       if (!window)
         return;
-      const el = target.document ? target.document.documentElement : (_a = target.documentElement) != null ? _a : target;
+      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 scrollLeft = el.scrollLeft;
       directions.left = scrollLeft < internalX.value;
       directions.right = scrollLeft > internalX.value;
-      const left = Math.abs(scrollLeft) <= 0 + (offset.left || 0);
+      const left = Math.abs(scrollLeft) <= (offset.left || 0);
       const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "row-reverse") {
         arrivedState.left = right;
@@ -1464,7 +1479,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         scrollTop = window.document.body.scrollTop;
       directions.top = scrollTop < internalY.value;
       directions.bottom = scrollTop > internalY.value;
-      const top = Math.abs(scrollTop) <= 0 + (offset.top || 0);
+      const top = Math.abs(scrollTop) <= (offset.top || 0);
       const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
       if (display === "flex" && flexDirection === "column-reverse") {
         arrivedState.top = bottom;
@@ -1492,10 +1507,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       eventListenerOptions
     );
     shared.tryOnMounted(() => {
-      const _element = shared.toValue(element);
-      if (!_element)
-        return;
-      setArrivedState(_element);
+      try {
+        const _element = shared.toValue(element);
+        if (!_element)
+          return;
+        setArrivedState(_element);
+      } catch (e) {
+        onError(e);
+      }
     });
     useEventListener(
       element,
@@ -1845,16 +1864,21 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
         observer = void 0;
       }
     };
+    const targets = vueDemi.computed(() => {
+      const value = shared.toValue(target);
+      const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(shared.notNullish);
+      return new Set(items);
+    });
     const stopWatch = vueDemi.watch(
-      () => unrefElement(target),
-      (el) => {
+      () => targets.value,
+      (targets2) => {
         cleanup();
-        if (isSupported.value && window && el) {
+        if (isSupported.value && window && targets2.size) {
           observer = new MutationObserver(callback);
-          observer.observe(el, mutationOptions);
+          targets2.forEach((el) => observer.observe(el, mutationOptions));
         }
       },
-      { immediate: true }
+      { immediate: true, flush: "post" }
     );
     const takeRecords = () => {
       return observer == null ? void 0 : observer.takeRecords();