@vueuse/components 13.9.0 → 14.0.0-alpha.0

package/index.d.mts

@@ -1,112 +1,36 @@
 import * as vue from 'vue';
-import { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter, ObjectDirective, Ref, UnwrapNestedRefs, Reactive, ComputedRef, FunctionDirective } from 'vue';
-import { UseClipboardOptions, UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, UseGeolocationOptions, UseIdleOptions, UseMouseOptions as UseMouseOptions$1, MouseInElementOptions as MouseInElementOptions$1, MousePressedOptions, UseNowOptions, UsePointerOptions, UseTimeAgoOptions, UseTimestampOptions, UseVirtualListOptions, UseWindowSizeOptions } from '@vueuse/core';
-import { ConfigurableEventFilter, ConfigurableFlush, Awaitable } from '@vueuse/shared';
+import { ObjectDirective, SlotsType, Reactive, UnwrapRef, ComputedRef, Ref, FunctionDirective, MaybeRef, ShallowRef } from 'vue';
+import { RenderableComponent as RenderableComponent$1, OnClickOutsideOptions, OnClickOutsideHandler, OnKeyStrokeOptions, OnLongPressOptions, UseOnLongPressReturn, UseActiveElementOptions, UseActiveElementReturn, ConfigurableNavigator, UseBatteryReturn, ConfigurableWindow, UseBrowserLocationReturn, UseClipboardOptions, UseClipboardReturn, UseColorModeOptions, UseColorModeReturn, BasicColorMode, UseDarkOptions, UseDarkReturn, DeviceMotionOptions, UseDeviceMotionReturn, UseDeviceOrientationReturn, UseDevicePixelRatioReturn, UseDevicesListOptions, UseDevicesListReturn, ConfigurableDocument, UseDocumentVisibilityReturn, UseDraggableOptions, UseElementBoundingOptions, UseElementBoundingReturn, UseElementHoverOptions, ElementSize, UseResizeObserverOptions, UseElementSizeReturn, useElementSize, UseElementVisibilityOptions, UseElementVisibilityReturn, UseEyeDropperOptions, UseEyeDropperReturn, UseFullscreenOptions, UseFullscreenReturn, UseGeolocationOptions, UseGeolocationReturn, UseIdleOptions, UseIdleReturn, UseImageOptions, UseImageReturn, useInfiniteScroll, UseInfiniteScrollOptions, UseIntersectionObserverOptions, UseMouseOptions, UseMouseReturn, MouseInElementOptions, UseMouseInElementReturn, MousePressedOptions, UseMousePressedReturn, UseNetworkReturn, UseNowOptions, UseNowReturn, UseOffsetPaginationOptions, UseOffsetPaginationReturn, UsePageLeaveReturn, UsePointerOptions, UsePointerReturn, UsePointerLockOptions, UsePointerLockReturn, ColorSchemeType, ContrastType, ReducedMotionType, ResizeObserverCallback, UseScreenSafeAreaReturn, UseScrollReturn, UseScrollOptions, UseTimeAgoOptions, UseTimeAgoReturn, UseTimestampOptions, UseTimestampReturn, UseVirtualListOptions, UseWindowSizeOptions, UseWindowSizeReturn } from '@vueuse/core';
+import { ToggleFn } from '@vueuse/shared';
 
-interface ConfigurableWindow {
-    window?: Window;
-}
-
-interface Position {
-    x: number;
-    y: number;
-}
-interface RenderableComponent {
-    /**
-     * The element that the component should be rendered as
-     *
-     * @default 'div'
-     */
-    as?: object | string;
-}
-
-type VueInstance = ComponentPublicInstance;
-type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
-type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
-type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
-
-interface OnClickOutsideOptions<Controls extends boolean = false> extends ConfigurableWindow {
-    /**
-     * List of elements that should not trigger the event,
-     * provided as Refs or CSS Selectors.
-     */
-    ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>;
-    /**
-     * Use capturing phase for internal event listener.
-     * @default true
-     */
-    capture?: boolean;
-    /**
-     * Run handler function if focus moves to an iframe.
-     * @default false
-     */
-    detectIframe?: boolean;
-    /**
-     * Use controls to cancel/trigger listener.
-     * @default false
-     */
-    controls?: Controls;
-}
-type OnClickOutsideHandler<T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions> = (event: (T['detectIframe'] extends true ? FocusEvent : never) | (T['controls'] extends true ? Event : never) | PointerEvent) => void;
-
-interface OnClickOutsideProps extends RenderableComponent {
+interface OnClickOutsideProps extends RenderableComponent$1 {
     options?: Omit<OnClickOutsideOptions, 'controls'>;
 }
-declare const OnClickOutside: vue.DefineComponent<OnClickOutsideProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<OnClickOutsideProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+type OnClickOutsideEmits = {
+    trigger: (event: Event) => void;
+};
+declare const OnClickOutside: vue.DefineSetupFnComponent<OnClickOutsideProps, OnClickOutsideEmits, {}, OnClickOutsideProps & {
+    onTrigger?: ((event: Event) => any) | undefined;
+}, vue.PublicProps>;
 
 declare const vOnClickOutside: ObjectDirective<HTMLElement, OnClickOutsideHandler | [(evt: any) => void, Omit<OnClickOutsideOptions, 'controls'>]>;
 
-type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
-interface OnKeyStrokeOptions {
-    eventName?: KeyStrokeEventName;
-    target?: MaybeRefOrGetter<EventTarget | null | undefined>;
-    passive?: boolean;
-    /**
-     * Set to `true` to ignore repeated events when the key is being held down.
-     *
-     * @default false
-     */
-    dedupe?: MaybeRefOrGetter<boolean>;
-}
-
 type BindingValueFunction$a = (event: KeyboardEvent) => void;
 type BindingValueArray$9 = [BindingValueFunction$a, OnKeyStrokeOptions];
 declare const vOnKeyStroke: ObjectDirective<HTMLElement, BindingValueFunction$a | BindingValueArray$9>;
 
-interface OnLongPressOptions {
-    /**
-     * Time in ms till `longpress` gets called
-     *
-     * @default 500
-     */
-    delay?: number | ((ev: PointerEvent) => number);
-    modifiers?: OnLongPressModifiers;
-    /**
-     * Allowance of moving distance in pixels,
-     * The action will get canceled When moving too far from the pointerdown position.
-     * @default 10
-     */
-    distanceThreshold?: number | false;
-    /**
-     * Function called when the ref element is released.
-     * @param duration how long the element was pressed in ms
-     * @param distance distance from the pointerdown position
-     * @param isLongPress whether the action was a long press or not
-     */
-    onMouseUp?: (duration: number, distance: number, isLongPress: boolean) => void;
-}
-interface OnLongPressModifiers {
-    stop?: boolean;
-    once?: boolean;
-    prevent?: boolean;
-    capture?: boolean;
-    self?: boolean;
-}
-
-interface OnLongPressProps extends RenderableComponent {
+interface OnLongPressProps extends RenderableComponent$1 {
     options?: OnLongPressOptions;
 }
-declare const OnLongPress: vue.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<OnLongPressProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+type OnLongPressEmits = {
+    trigger: (event: PointerEvent) => void;
+};
+interface OnLongPressSlots {
+    default: (data: UseOnLongPressReturn) => any;
+}
+declare const OnLongPress: vue.DefineSetupFnComponent<OnLongPressProps, OnLongPressEmits, SlotsType<OnLongPressSlots>, OnLongPressProps & {
+    onTrigger?: ((event: PointerEvent) => any) | undefined;
+}, vue.PublicProps>;
 
 type BindingValueFunction$9 = (evt: PointerEvent) => void;
 type BindingValueArray$8 = [
@@ -115,179 +39,117 @@ type BindingValueArray$8 = [
 ];
 declare const vOnLongPress: ObjectDirective<HTMLElement, BindingValueFunction$9 | BindingValueArray$8>;
 
-declare const UseActiveElement: 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>;
+interface UseActiveElementProps extends UseActiveElementOptions {
+}
+interface UseActiveElementSlots {
+    default: (data: Reactive<{
+        element: UseActiveElementReturn;
+    }>) => any;
+}
+declare const UseActiveElement: vue.DefineSetupFnComponent<UseActiveElementProps, Record<string, never>, SlotsType<UseActiveElementSlots>, UseActiveElementProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseBattery: 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>;
+interface UseBatteryProps extends ConfigurableNavigator {
+}
+interface UseBatterySlots {
+    default: (data: Reactive<UseBatteryReturn>) => any;
+}
+declare const UseBattery: vue.DefineSetupFnComponent<UseBatteryProps, Record<string, never>, SlotsType<UseBatterySlots>, UseBatteryProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseBrowserLocation: 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>;
+interface UseBrowserLocationProps extends ConfigurableWindow {
+}
+interface UseBrowserLocationSlots {
+    default: (data: Reactive<UseBrowserLocationReturn>) => any;
+}
+declare const UseBrowserLocation: vue.DefineSetupFnComponent<UseBrowserLocationProps, Record<string, never>, SlotsType<UseBrowserLocationSlots>, UseBrowserLocationProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 interface UseClipboardProps<Source = string> extends UseClipboardOptions<Source> {
 }
-declare const UseClipboard: vue.DefineComponent<UseClipboardProps<string>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseClipboardProps<string>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface StorageLike {
-    getItem: (key: string) => string | null;
-    setItem: (key: string, value: string) => void;
-    removeItem: (key: string) => void;
+interface UseClipboardSlots {
+    default: (data: Reactive<UseClipboardReturn<true>>) => any;
 }
+declare const UseClipboard: vue.DefineSetupFnComponent<UseClipboardProps<string>, Record<string, never>, SlotsType<UseClipboardSlots>, UseClipboardProps<string> & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-interface Serializer<T> {
-    read: (raw: string) => T;
-    write: (value: T) => string;
+interface UseColorModeProps extends UseColorModeOptions {
 }
-interface UseStorageOptions<T> extends ConfigurableEventFilter, ConfigurableWindow, ConfigurableFlush {
-    /**
-     * Watch for deep changes
-     *
-     * @default true
-     */
-    deep?: boolean;
-    /**
-     * Listen to storage changes, useful for multiple tabs application
-     *
-     * @default true
-     */
-    listenToStorageChanges?: boolean;
-    /**
-     * Write the default value to the storage when it does not exist
-     *
-     * @default true
-     */
-    writeDefaults?: boolean;
-    /**
-     * Merge the default value with the value read from the storage.
-     *
-     * When setting it to true, it will perform a **shallow merge** for objects.
-     * You can pass a function to perform custom merge (e.g. deep merge), for example:
-     *
-     * @default false
-     */
-    mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
-    /**
-     * Custom data serialization
-     */
-    serializer?: Serializer<T>;
-    /**
-     * On error callback
-     *
-     * Default log error to `console.error`
-     */
-    onError?: (error: unknown) => void;
-    /**
-     * Use shallow ref as reference
-     *
-     * @default false
-     */
-    shallow?: boolean;
-    /**
-     * Wait for the component to be mounted before reading the storage.
-     *
-     * @default false
-     */
-    initOnMounted?: boolean;
+interface UseColorModeSlots {
+    default: (data: Reactive<{
+        mode: UseColorModeReturn<BasicColorMode>;
+        system: UseColorModeReturn['system'];
+        store: UseColorModeReturn['store'];
+    }>) => any;
 }
+declare const UseColorMode: vue.DefineSetupFnComponent<UseColorModeProps, Record<string, never>, SlotsType<UseColorModeSlots>, UseColorModeProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-type BasicColorMode = 'light' | 'dark';
-type BasicColorSchema = BasicColorMode | 'auto';
-interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStorageOptions<T | BasicColorMode> {
-    /**
-     * CSS Selector for the target element applying to
-     *
-     * @default 'html'
-     */
-    selector?: string | MaybeElementRef;
-    /**
-     * HTML attribute applying the target element
-     *
-     * @default 'class'
-     */
-    attribute?: string;
-    /**
-     * The initial color mode
-     *
-     * @default 'auto'
-     */
-    initialValue?: MaybeRefOrGetter<T | BasicColorSchema>;
-    /**
-     * Prefix when adding value to the attribute
-     */
-    modes?: Partial<Record<T | BasicColorSchema, string>>;
-    /**
-     * A custom handler for handle the updates.
-     * When specified, the default behavior will be overridden.
-     *
-     * @default undefined
-     */
-    onChanged?: (mode: T | BasicColorMode, defaultHandler: ((mode: T | BasicColorMode) => void)) => void;
-    /**
-     * Custom storage ref
-     *
-     * When provided, `useStorage` will be skipped
-     */
-    storageRef?: Ref<T | BasicColorSchema>;
-    /**
-     * Key to persist the data into localStorage/sessionStorage.
-     *
-     * Pass `null` to disable persistence
-     *
-     * @default 'vueuse-color-scheme'
-     */
-    storageKey?: string | null;
-    /**
-     * Storage object, can be localStorage or sessionStorage
-     *
-     * @default localStorage
-     */
-    storage?: StorageLike;
-    /**
-     * Emit `auto` mode from state
-     *
-     * When set to `true`, preferred mode won't be translated into `light` or `dark`.
-     * This is useful when the fact that `auto` mode was selected needs to be known.
-     *
-     * @default undefined
-     * @deprecated use `store.value` when `auto` mode needs to be known
-     * @see https://vueuse.org/core/useColorMode/#advanced-usage
-     */
-    emitAuto?: boolean;
-    /**
-     * Disable transition on switch
-     *
-     * @see https://paco.me/writing/disable-theme-transitions
-     * @default true
-     */
-    disableTransition?: boolean;
+interface UseDarkProps extends UseDarkOptions {
 }
+interface UseDarkSlots {
+    default: (data: Reactive<{
+        isDark: UseDarkReturn;
+        toggleDark: ToggleFn;
+    }>) => any;
+}
+declare const UseDark: vue.DefineSetupFnComponent<UseDarkProps, Record<string, never>, SlotsType<UseDarkSlots>, UseDarkProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseColorMode: vue.DefineComponent<UseColorModeOptions<BasicColorMode>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseColorModeOptions<BasicColorMode>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseDark: vue.DefineComponent<UseDarkOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseDarkOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseDeviceMotion: 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>;
+interface UseDeviceMotionProps extends DeviceMotionOptions {
+}
+interface UseDeviceMotionSlots {
+    default: (data: UseDeviceMotionReturn) => any;
+}
+declare const UseDeviceMotion: vue.DefineSetupFnComponent<UseDeviceMotionProps, Record<string, never>, SlotsType<UseDeviceMotionSlots>, UseDeviceMotionProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseDeviceOrientation: 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>;
+interface UseDeviceOrientationProps extends ConfigurableWindow {
+}
+interface UseDeviceOrientationSlots {
+    default: (data: Reactive<UseDeviceOrientationReturn>) => any;
+}
+declare const UseDeviceOrientation: vue.DefineSetupFnComponent<UseDeviceOrientationProps, Record<string, never>, SlotsType<UseDeviceOrientationSlots>, UseDeviceOrientationProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseDevicePixelRatio: 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>;
+interface UseDevicePixelRatioProps extends ConfigurableWindow {
+}
+interface UseDevicePixelRatioSlots {
+    default: (data: Reactive<UseDevicePixelRatioReturn>) => any;
+}
+declare const UseDevicePixelRatio: vue.DefineSetupFnComponent<UseDevicePixelRatioProps, Record<string, never>, SlotsType<UseDevicePixelRatioSlots>, UseDevicePixelRatioProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseDevicesList: vue.DefineComponent<UseDevicesListOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseDevicesListOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseDevicesListProps extends UseDevicesListOptions {
+}
+interface UseDevicesListSlots {
+    default: (data: Reactive<UseDevicesListReturn>) => any;
+}
+declare const UseDevicesList: vue.DefineSetupFnComponent<UseDevicesListProps, Record<string, never>, SlotsType<UseDevicesListSlots>, UseDevicesListProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseDocumentVisibility: 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>;
+interface UseDocumentVisibilityProps extends ConfigurableDocument {
+}
+interface UseDocumentVisibilitySlots {
+    default: (data: Reactive<{
+        visibility: UseDocumentVisibilityReturn;
+    }>) => any;
+}
+declare const UseDocumentVisibility: vue.DefineSetupFnComponent<UseDocumentVisibilityProps, Record<string, never>, SlotsType<UseDocumentVisibilitySlots>, UseDocumentVisibilityProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
+interface UseDraggableProps extends UseDraggableOptions, RenderableComponent$1 {
     /**
      * When provided, use `useStorage` to preserve element's position
      */
@@ -299,122 +161,35 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
      */
     storageType?: 'local' | 'session';
 }
-declare const UseDraggable: vue.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseDraggableProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const UseDraggable: vue.DefineSetupFnComponent<UseDraggableProps, Record<string, never>, SlotsType<any>, UseDraggableProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-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
-     * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
-     *
-     * @default 'content-box'
-     */
-    box?: ResizeObserverBoxOptions;
+interface UseElementBoundingProps extends UseElementBoundingOptions, RenderableComponent$1 {
 }
-declare class ResizeObserver {
-    constructor(callback: ResizeObserverCallback);
-    disconnect(): void;
-    observe(target: Element, options?: UseResizeObserverOptions): void;
-    unobserve(target: Element): void;
+interface UseElementBoundingSlots {
+    default: (data: Reactive<UseElementBoundingReturn>) => any;
 }
-
-declare const UseElementBounding: vue.DefineComponent<UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseResizeObserverOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface UseElementBoundingOptions {
-    /**
-     * Reset values to 0 on component unmounted
-     *
-     * @default true
-     */
-    reset?: boolean;
-    /**
-     * Listen to window resize event
-     *
-     * @default true
-     */
-    windowResize?: boolean;
-    /**
-     * Listen to window scroll event
-     *
-     * @default true
-     */
-    windowScroll?: boolean;
-    /**
-     * Immediately call update on component mounted
-     *
-     * @default true
-     */
-    immediate?: boolean;
-    /**
-     * Timing to recalculate the bounding box
-     *
-     * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
-     * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
-     *
-     * @default 'sync'
-     */
-    updateTiming?: 'sync' | 'next-frame';
-}
-/**
- * Reactive bounding box of an HTML element.
- *
- * @see https://vueuse.org/useElementBounding
- * @param target
- */
-declare function useElementBounding(target: MaybeComputedElementRef, options?: UseElementBoundingOptions): {
-    height: vue.ShallowRef<number, number>;
-    bottom: vue.ShallowRef<number, number>;
-    left: vue.ShallowRef<number, number>;
-    right: vue.ShallowRef<number, number>;
-    top: vue.ShallowRef<number, number>;
-    width: vue.ShallowRef<number, number>;
-    x: vue.ShallowRef<number, number>;
-    y: vue.ShallowRef<number, number>;
-    update: () => void;
-};
-type UseElementBoundingReturn = ReturnType<typeof useElementBounding>;
+declare const UseElementBounding: vue.DefineSetupFnComponent<UseElementBoundingProps, Record<string, never>, SlotsType<UseElementBoundingSlots>, UseElementBoundingProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type ElementBounding = Omit<UseElementBoundingReturn, 'update'>;
 type BindingValueFunction$8 = (bounding: ElementBounding) => void;
 type BindingValueArray$7 = [BindingValueFunction$8, UseElementBoundingOptions];
 declare const vElementBounding: ObjectDirective<HTMLElement, BindingValueFunction$8 | BindingValueArray$7>;
 
-interface UseElementHoverOptions extends ConfigurableWindow {
-    delayEnter?: number;
-    delayLeave?: number;
-    triggerOnRemoval?: boolean;
-}
-
 type BindingValueFunction$7 = (state: boolean) => void;
 declare const vElementHover: ObjectDirective<HTMLElement, BindingValueFunction$7 | [handler: BindingValueFunction$7, options: UseElementHoverOptions]>;
 
-declare const UseElementSize: vue.DefineComponent<Partial<ElementSize$1> & UseResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Partial<ElementSize$1> & UseResizeObserverOptions & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-interface ElementSize {
-    width: number;
-    height: number;
-}
-/**
- * Reactive size of an HTML element.
- *
- * @see https://vueuse.org/useElementSize
- */
-declare function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): {
-    width: vue.ShallowRef<number, number>;
-    height: vue.ShallowRef<number, number>;
-    stop: () => void;
-};
+interface UseElementSizeProps extends Partial<ElementSize>, UseResizeObserverOptions, RenderableComponent$1 {
+}
+interface UseElementSizeSlots {
+    default: (data: Reactive<UseElementSizeReturn>) => any;
+}
+declare const UseElementSize: vue.DefineSetupFnComponent<UseElementSizeProps, Record<string, never>, SlotsType<UseElementSizeSlots>, UseElementSizeProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
 type BindingValueFunction$6 = (size: ElementSize) => void;
@@ -422,229 +197,77 @@ type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize
 type BindingValueArray$6 = [BindingValueFunction$6, ...VElementSizeOptions];
 declare const vElementSize: ObjectDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$6>;
 
-declare const UseElementVisibility: vue.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-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 | Document;
-    /**
-     * 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.
-     * @default 0
-     */
-    threshold?: number | number[];
+interface UseElementVisibilityProps extends UseElementVisibilityOptions, RenderableComponent$1 {
 }
-
-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>;
-    /**
-     * Stop tracking when element visibility changes for the first time
-     *
-     * @default false
-     */
-    once?: boolean;
+interface UseElementVisibilitySlots {
+    default: (data: Reactive<{
+        isVisible: UseElementVisibilityReturn;
+    }>) => any;
 }
+declare const UseElementVisibility: vue.DefineSetupFnComponent<UseElementVisibilityProps, Record<string, never>, SlotsType<UseElementVisibilitySlots>, UseElementVisibilityProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type BindingValueFunction$5 = (state: boolean) => void;
 type BindingValueArray$5 = [BindingValueFunction$5, UseElementVisibilityOptions];
 declare const vElementVisibility: ObjectDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$5>;
 
-declare const UseEyeDropper: vue.DefineComponent<vue.ExtractPropTypes<{
-    sRGBHex: StringConstructor;
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    sRGBHex: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface UseEyeDropperProps extends UseEyeDropperOptions {
+}
+interface UseEyeDropperSlots {
+    default: (data: Reactive<UseEyeDropperReturn>) => any;
+}
+declare const UseEyeDropper: vue.DefineSetupFnComponent<UseEyeDropperProps, Record<string, never>, SlotsType<UseEyeDropperSlots>, UseEyeDropperProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseFullscreen: vue.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseFullscreenProps extends UseFullscreenOptions, RenderableComponent$1 {
+}
+interface UseFullscreenSlots {
+    default: (data: Reactive<UseFullscreenReturn>) => any;
+}
+declare const UseFullscreen: vue.DefineSetupFnComponent<UseFullscreenProps, Record<string, never>, SlotsType<UseFullscreenSlots>, UseFullscreenProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseGeolocation: vue.DefineComponent<UseGeolocationOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseGeolocationOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseGeolocationProps extends UseGeolocationOptions {
+}
+interface UseGeolocationSlots {
+    default: (data: Reactive<UseGeolocationReturn>) => any;
+}
+declare const UseGeolocation: vue.DefineSetupFnComponent<UseGeolocationProps, Record<string, never>, SlotsType<UseGeolocationSlots>, UseGeolocationProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseIdle: vue.DefineComponent<UseIdleOptions & {
-    timeout: number;
-}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseIdleOptions & {
+interface UseIdleProps extends UseIdleOptions {
     timeout: number;
-}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-type UseMouseSourceType = 'mouse' | 'touch' | null;
-
-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.
-     *
-     * @default 0
-     */
-    throttle?: number;
-    /**
-     * The check time when scrolling ends.
-     * This configuration will be setting to (throttle + idle) when the `throttle` is configured.
-     *
-     * @default 200
-     */
-    idle?: number;
-    /**
-     * Offset arrived states by x pixels
-     *
-     */
-    offset?: {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-    /**
-     * Use MutationObserver to monitor specific DOM changes,
-     * such as attribute modifications, child node additions or removals, or subtree changes.
-     * @default { mutation: boolean }
-     */
-    observe?: boolean | {
-        mutation?: boolean;
-    };
-    /**
-     * Trigger it when scrolling.
-     *
-     */
-    onScroll?: (e: Event) => void;
-    /**
-     * Trigger it when scrolling ends.
-     *
-     */
-    onStop?: (e: Event) => void;
-    /**
-     * Listener options for scroll event.
-     *
-     * @default {capture: false, passive: true}
-     */
-    eventListenerOptions?: boolean | AddEventListenerOptions;
-    /**
-     * Optionally specify a scroll behavior of `auto` (default, not smooth scrolling) or
-     * `smooth` (for smooth scrolling) which takes effect when changing the `x` or `y` refs.
-     *
-     * @default 'auto'
-     */
-    behavior?: MaybeRefOrGetter<ScrollBehavior>;
-    /**
-     * On error callback
-     *
-     * Default log error to `console.error`
-     */
-    onError?: (error: unknown) => void;
-}
-/**
- * Reactive scroll.
- *
- * @see https://vueuse.org/useScroll
- * @param element
- * @param options
- */
-declare function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
-    x: vue.WritableComputedRef<number, number>;
-    y: vue.WritableComputedRef<number, number>;
-    isScrolling: vue.ShallowRef<boolean, boolean>;
-    arrivedState: {
-        left: boolean;
-        right: boolean;
-        top: boolean;
-        bottom: boolean;
-    };
-    directions: {
-        left: boolean;
-        right: boolean;
-        top: boolean;
-        bottom: boolean;
-    };
-    measure(): void;
-};
-type UseScrollReturn = ReturnType<typeof useScroll>;
+}
+interface UseIdleSlots {
+    default: (data: Reactive<UseIdleReturn>) => any;
+}
+declare const UseIdle: vue.DefineSetupFnComponent<UseIdleProps, Record<string, never>, SlotsType<UseIdleSlots>, UseIdleProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-type InfiniteScrollElement = HTMLElement | SVGElement | Window | Document | null | undefined;
-interface UseInfiniteScrollOptions<T extends InfiniteScrollElement = InfiniteScrollElement> extends UseScrollOptions {
-    /**
-     * The minimum distance between the bottom of the element and the bottom of the viewport
-     *
-     * @default 0
-     */
-    distance?: number;
-    /**
-     * The direction in which to listen the scroll.
-     *
-     * @default 'bottom'
-     */
-    direction?: 'top' | 'bottom' | 'left' | 'right';
+interface RenderableComponent {
     /**
-     * The interval time between two load more (to avoid too many invokes).
+     * The element that the component should be rendered as
      *
-     * @default 100
-     */
-    interval?: number;
-    /**
-     * A function that determines whether more content can be loaded for a specific element.
-     * Should return `true` if loading more content is allowed for the given element,
-     * and `false` otherwise.
+     * @default 'div'
      */
-    canLoadMore?: (el: T) => boolean;
-}
-/**
- * Reactive infinite scroll.
- *
- * @see https://vueuse.org/useInfiniteScroll
- */
-declare function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): {
-    isLoading: vue.ComputedRef<boolean>;
-    reset(): void;
-};
+    as?: object | string;
+}
+
+interface UseImageProps extends UseImageOptions, RenderableComponent {
+}
+interface UseImageSlots {
+    default: (data: Reactive<UseImageReturn>) => any;
+    loading: (data: Reactive<UseImageReturn>) => any;
+    error: (data: UnwrapRef<UseImageReturn['error']>) => any;
+}
+declare const UseImage: vue.DefineSetupFnComponent<UseImageProps, Record<string, never>, SlotsType<UseImageSlots>, UseImageProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type BindingValueFunction$4 = Parameters<typeof useInfiniteScroll>[1];
 type BindingValueArray$4 = [BindingValueFunction$4, UseInfiniteScrollOptions];
@@ -654,185 +277,201 @@ type BindingValueFunction$3 = IntersectionObserverCallback;
 type BindingValueArray$3 = [BindingValueFunction$3, UseIntersectionObserverOptions];
 declare const vIntersectionObserver: ObjectDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
-declare const UseMouse: vue.DefineComponent<UseMouseOptions$1, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseMouseOptions$1> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UseMouseInElement: vue.DefineComponent<MouseInElementOptions$1 & RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<MouseInElementOptions$1 & RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-type UseMouseCoordType = 'page' | 'client' | 'screen' | 'movement';
-type UseMouseEventExtractor = (event: MouseEvent | Touch) => [x: number, y: number] | null | undefined;
-interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter {
-    /**
-     * Mouse position based by page, client, screen, or relative to previous position
-     *
-     * @default 'page'
-     */
-    type?: UseMouseCoordType | UseMouseEventExtractor;
-    /**
-     * Listen events on `target` element
-     *
-     * @default 'Window'
-     */
-    target?: MaybeRefOrGetter<Window | EventTarget | null | undefined>;
-    /**
-     * Listen to `touchmove` events
-     *
-     * @default true
-     */
-    touch?: boolean;
-    /**
-     * Listen to `scroll` events on window, only effective on type `page`
-     *
-     * @default true
-     */
-    scroll?: boolean;
-    /**
-     * Reset to initial value when `touchend` event fired
-     *
-     * @default false
-     */
-    resetOnTouchEnds?: boolean;
-    /**
-     * Initial values
-     */
-    initialValue?: Position;
+interface UseMouseProps extends UseMouseOptions {
+}
+interface UseMouseSlots {
+    default: (data: Reactive<UseMouseReturn>) => any;
 }
+declare const UseMouse: vue.DefineSetupFnComponent<UseMouseProps, Record<string, never>, SlotsType<UseMouseSlots>, UseMouseProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-interface MouseInElementOptions extends UseMouseOptions {
-    /**
-     * Whether to handle mouse events when the cursor is outside the target element.
-     * When enabled, mouse position will continue to be tracked even when outside the element bounds.
-     *
-     * @default true
-     */
-    handleOutside?: boolean;
-    /**
-     * Listen to window resize event
-     *
-     * @default true
-     */
-    windowScroll?: boolean;
-    /**
-     * Listen to window scroll event
-     *
-     * @default true
-     */
-    windowResize?: boolean;
-}
-/**
- * Reactive mouse position related to an element.
- *
- * @see https://vueuse.org/useMouseInElement
- * @param target
- * @param options
- */
-declare function useMouseInElement(target?: MaybeElementRef, options?: MouseInElementOptions): {
-    x: vue.ShallowRef<number, number>;
-    y: vue.ShallowRef<number, number>;
-    sourceType: vue.ShallowRef<UseMouseSourceType, UseMouseSourceType>;
-    elementX: vue.ShallowRef<number, number>;
-    elementY: vue.ShallowRef<number, number>;
-    elementPositionX: vue.ShallowRef<number, number>;
-    elementPositionY: vue.ShallowRef<number, number>;
-    elementHeight: vue.ShallowRef<number, number>;
-    elementWidth: vue.ShallowRef<number, number>;
-    isOutside: vue.ShallowRef<boolean, boolean>;
-    stop: () => void;
-};
-type UseMouseInElementReturn = ReturnType<typeof useMouseInElement>;
+interface UseMouseInElementProps extends MouseInElementOptions, RenderableComponent$1 {
+}
+interface UseMouseInElementSlots {
+    default: (data: Reactive<UseMouseInElementReturn>) => any;
+}
+declare const UseMouseInElement: vue.DefineSetupFnComponent<UseMouseInElementProps, Record<string, never>, SlotsType<UseMouseInElementSlots>, UseMouseInElementProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type MouseInElement = Omit<UseMouseInElementReturn, 'stop'>;
 type BindingValueFunction$2 = (mouse: Reactive<MouseInElement>) => void;
 type BindingValueArray$2 = [BindingValueFunction$2, MouseInElementOptions];
 declare const vMouseInElement: ObjectDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
 
-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>;
+interface UseMousePressedProps extends Omit<MousePressedOptions, 'target'>, RenderableComponent$1 {
+}
+interface UseMousePressedSlots {
+    default: (data: Reactive<UseMousePressedReturn>) => any;
+}
+declare const UseMousePressed: vue.DefineSetupFnComponent<UseMousePressedProps, Record<string, never>, SlotsType<UseMousePressedSlots>, UseMousePressedProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-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>;
+interface UseNetworkProps extends ConfigurableWindow {
+}
+interface UseNetworkSlots {
+    default: (data: Reactive<UseNetworkReturn>) => any;
+}
+declare const UseNetwork: vue.DefineSetupFnComponent<UseNetworkProps, Record<string, never>, SlotsType<UseNetworkSlots>, UseNetworkProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-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 UseNowProps extends Omit<UseNowOptions<true>, 'controls'> {
+}
+interface UseNowSlots {
+    default: (data: Reactive<UseNowReturn>) => any;
+}
+declare const UseNow: vue.DefineSetupFnComponent<UseNowProps, Record<string, never>, SlotsType<UseNowSlots>, UseNowProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 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.
-     */
-    total?: MaybeRefOrGetter<number>;
-    /**
-     * The number of items to display per page.
-     * @default 10
-     */
-    pageSize?: MaybeRefOrGetter<number>;
-    /**
-     * The current page number.
-     * @default 1
-     */
-    page?: MaybeRef<number>;
-    /**
-     * Callback when the `page` change.
-     */
-    onPageChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
-    /**
-     * Callback when the `pageSize` change.
-     */
-    onPageSizeChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
-    /**
-     * Callback when the `pageCount` change.
-     */
-    onPageCountChange?: (returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>) => unknown;
-}
-interface UseOffsetPaginationReturn {
-    currentPage: Ref<number>;
-    currentPageSize: Ref<number>;
-    pageCount: ComputedRef<number>;
-    isFirstPage: ComputedRef<boolean>;
-    isLastPage: ComputedRef<boolean>;
-    prev: () => void;
-    next: () => void;
+interface UseObjectUrlSlots {
+    default: (data: Readonly<string | undefined>) => any;
 }
+declare const UseObjectUrl: vue.DefineSetupFnComponent<UseObjectUrlProps, Record<string, never>, SlotsType<UseObjectUrlSlots>, UseObjectUrlProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-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, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-
-declare const UsePageLeave: 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 UsePointer: vue.DefineComponent<Omit<UsePointerOptions, "target"> & {
-    target: "window" | "self";
-}, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UsePointerOptions, "target"> & {
-    target: "window" | "self";
-}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UsePointerLock: vue.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<RenderableComponent> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-
-declare const UsePreferredColorScheme: 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 UsePreferredContrast: 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 UsePreferredDark: 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 UsePreferredLanguages: 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>;
+interface UseOffsetPaginationProps extends UseOffsetPaginationOptions {
+}
+type UseOffsetPaginationEmits = {
+    'page-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageChange']>>) => void;
+    'page-size-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageSizeChange']>>) => void;
+    'page-count-change': (...args: Parameters<NonNullable<UseOffsetPaginationOptions['onPageCountChange']>>) => void;
+};
+interface UseOffsetPaginationSlots {
+    default: (data: Reactive<UseOffsetPaginationReturn>) => any;
+}
+declare const UseOffsetPagination: vue.DefineSetupFnComponent<UseOffsetPaginationProps, UseOffsetPaginationEmits, SlotsType<UseOffsetPaginationSlots>, UseOffsetPaginationProps & {
+    "onPage-change"?: ((returnValue: {
+        currentPage: number;
+        currentPageSize: number;
+        pageCount: number;
+        isFirstPage: boolean;
+        isLastPage: boolean;
+        prev: () => void;
+        next: () => void;
+    }) => any) | undefined;
+    "onPage-size-change"?: ((returnValue: {
+        currentPage: number;
+        currentPageSize: number;
+        pageCount: number;
+        isFirstPage: boolean;
+        isLastPage: boolean;
+        prev: () => void;
+        next: () => void;
+    }) => any) | undefined;
+    "onPage-count-change"?: ((returnValue: {
+        currentPage: number;
+        currentPageSize: number;
+        pageCount: number;
+        isFirstPage: boolean;
+        isLastPage: boolean;
+        prev: () => void;
+        next: () => void;
+    }) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UseOnlineProps extends ConfigurableWindow {
+}
+interface UseOnlineSlots {
+    default: (data: Reactive<{
+        isOnline: UseNetworkReturn['isOnline'];
+    }>) => any;
+}
+declare const UseOnline: vue.DefineSetupFnComponent<UseOnlineProps, Record<string, never>, SlotsType<UseOnlineSlots>, UseOnlineProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePageLeaveProps extends ConfigurableWindow {
+}
+interface UsePageLeaveSlots {
+    default: (data: Reactive<{
+        isLeft: UsePageLeaveReturn;
+    }>) => any;
+}
+declare const UsePageLeave: vue.DefineSetupFnComponent<UsePageLeaveProps, Record<string, never>, SlotsType<UsePageLeaveSlots>, UsePageLeaveProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePointerProps extends Omit<UsePointerOptions, 'target'> {
+    target?: 'window' | 'self';
+}
+interface UsePointerSlots {
+    default: (data: Reactive<UsePointerReturn>) => any;
+}
+declare const UsePointer: vue.DefineSetupFnComponent<UsePointerProps, Record<string, never>, SlotsType<UsePointerSlots>, UsePointerProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePointerLockProps extends RenderableComponent$1, UsePointerLockOptions {
+}
+interface UsePointerLockSlots {
+    default: (data: Reactive<UsePointerLockReturn>) => any;
+}
+declare const UsePointerLock: vue.DefineSetupFnComponent<UsePointerLockProps, Record<string, never>, SlotsType<UsePointerLockSlots>, UsePointerLockProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePreferredColorSchemeProps extends ConfigurableWindow {
+}
+interface UsePreferredColorSchemeSlots {
+    default: (data: Reactive<{
+        colorScheme: ComputedRef<ColorSchemeType>;
+    }>) => any;
+}
+declare const UsePreferredColorScheme: vue.DefineSetupFnComponent<UsePreferredColorSchemeProps, Record<string, never>, SlotsType<UsePreferredColorSchemeSlots>, UsePreferredColorSchemeProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePreferredContrastProps extends ConfigurableWindow {
+}
+interface UsePreferredContrastSlots {
+    default: (data: Reactive<{
+        contrast: ComputedRef<ContrastType>;
+    }>) => any;
+}
+declare const UsePreferredContrast: vue.DefineSetupFnComponent<UsePreferredContrastProps, Record<string, never>, SlotsType<UsePreferredContrastSlots>, UsePreferredContrastProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePreferredDarkProps extends ConfigurableWindow {
+}
+interface UsePreferredDarkSlots {
+    default: (data: Reactive<{
+        prefersDark: ComputedRef<boolean>;
+    }>) => any;
+}
+declare const UsePreferredDark: vue.DefineSetupFnComponent<UsePreferredDarkProps, Record<string, never>, SlotsType<UsePreferredDarkSlots>, UsePreferredDarkProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
+
+interface UsePreferredLanguagesProps extends ConfigurableWindow {
+}
+interface UsePreferredLanguagesSlots {
+    default: (data: Reactive<{
+        languages: Ref<readonly string[]>;
+    }>) => any;
+}
+declare const UsePreferredLanguages: vue.DefineSetupFnComponent<UsePreferredLanguagesProps, Record<string, never>, SlotsType<UsePreferredLanguagesSlots>, UsePreferredLanguagesProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UsePreferredReducedMotion: 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>;
+interface UsePreferredReducedMotionProps extends ConfigurableWindow {
+}
+interface UsePreferredReducedMotionSlots {
+    default: (data: Reactive<{
+        motion: ComputedRef<ReducedMotionType>;
+    }>) => any;
+}
+declare const UsePreferredReducedMotion: vue.DefineSetupFnComponent<UsePreferredReducedMotionProps, Record<string, never>, SlotsType<UsePreferredReducedMotionSlots>, UsePreferredReducedMotionProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 declare const UsePreferredReducedTransparency: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -842,24 +481,18 @@ type BindingValueFunction$1 = ResizeObserverCallback;
 type BindingValueArray$1 = [BindingValueFunction$1, UseResizeObserverOptions];
 declare const vResizeObserver: ObjectDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
 
-declare const UseScreenSafeArea: vue.DefineComponent<vue.ExtractPropTypes<{
-    top: BooleanConstructor;
-    right: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}> | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    top: BooleanConstructor;
-    right: BooleanConstructor;
-    bottom: BooleanConstructor;
-    left: BooleanConstructor;
-}>> & Readonly<{}>, {
-    bottom: boolean;
-    left: boolean;
-    right: boolean;
-    top: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface UseScreenSafeAreaProps extends RenderableComponent$1 {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+}
+interface UseScreenSafeAreaSlots {
+    default: (data: Reactive<UseScreenSafeAreaReturn>) => any;
+}
+declare const UseScreenSafeArea: vue.DefineSetupFnComponent<UseScreenSafeAreaProps, Record<string, never>, SlotsType<UseScreenSafeAreaSlots>, UseScreenSafeAreaProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 type BindingValueFunction = (state: UseScrollReturn) => void;
 type BindingValueArray = [BindingValueFunction, UseScrollOptions];
@@ -867,12 +500,24 @@ declare const vScroll: ObjectDirective<HTMLElement, BindingValueFunction | Bindi
 
 declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
 
-interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
+interface UseTimeAgoProps extends Omit<UseTimeAgoOptions<true>, 'controls'> {
     time: MaybeRef<Date | number | string>;
 }
-declare const UseTimeAgo: vue.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseTimeAgoComponentOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseTimeAgoSlots {
+    default: (data: Reactive<UseTimeAgoReturn<true>>) => any;
+}
+declare const UseTimeAgo: vue.DefineSetupFnComponent<UseTimeAgoProps, Record<string, never>, SlotsType<UseTimeAgoSlots>, UseTimeAgoProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseTimestamp: vue.DefineComponent<Omit<UseTimestampOptions<true>, "controls">, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<Omit<UseTimestampOptions<true>, "controls">> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseTimestampProps extends Omit<UseTimestampOptions<true>, 'controls'> {
+}
+interface UseTimestampSlots {
+    default: (data: Reactive<UseTimestampReturn>) => any;
+}
+declare const UseTimestamp: vue.DefineSetupFnComponent<UseTimestampProps, Record<string, never>, SlotsType<UseTimestampSlots>, UseTimestampProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 interface UseVirtualListProps {
     /**
@@ -894,13 +539,27 @@ interface UseVirtualListProps {
      */
     height: string;
 }
-declare const UseVirtualList: vue.DefineComponent<UseVirtualListProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseVirtualListProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const UseVirtualList: vue.DefineSetupFnComponent<UseVirtualListProps, {}, {}, UseVirtualListProps & {}, vue.PublicProps>;
 
-declare const UseWindowFocus: 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>;
+interface UseWindowFocusProps extends ConfigurableWindow {
+}
+interface UseWindowFocusSlots {
+    default: (data: Reactive<{
+        focused: ShallowRef<boolean>;
+    }>) => any;
+}
+declare const UseWindowFocus: vue.DefineSetupFnComponent<UseWindowFocusProps, Record<string, never>, SlotsType<UseWindowFocusSlots>, UseWindowFocusProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
-declare const UseWindowSize: vue.DefineComponent<UseWindowSizeOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<UseWindowSizeOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+interface UseWindowSizeProps extends UseWindowSizeOptions {
+}
+interface UseWindowSizeSlots {
+    default: (data: Reactive<UseWindowSizeReturn>) => any;
+}
+declare const UseWindowSize: vue.DefineSetupFnComponent<UseWindowSizeProps, Record<string, never>, SlotsType<UseWindowSizeSlots>, UseWindowSizeProps & {
+    [x: `on${Capitalize<string>}`]: ((...args: unknown[]) => any) | undefined;
+}, vue.PublicProps>;
 
 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, vElementBounding, vElementHover, vElementSize, vElementVisibility, vInfiniteScroll, vIntersectionObserver, vMouseInElement, vOnClickOutside, vOnKeyStroke, vOnLongPress, vResizeObserver, vScroll, vScrollLock };
-export type { OnClickOutsideProps, OnLongPressProps, UseDraggableProps, UseObjectUrlProps, UseVirtualListProps };
+export type { OnClickOutsideEmits, OnClickOutsideProps, OnLongPressEmits, OnLongPressProps, UseActiveElementProps, UseBatteryProps, UseClipboardProps, UseColorModeProps, UseDarkProps, UseDeviceMotionProps, UseDeviceOrientationProps, UseDevicePixelRatioProps, UseDevicesListProps, UseDocumentVisibilityProps, UseDraggableProps, UseElementBoundingProps, UseElementSizeProps, UseElementVisibilityProps, UseEyeDropperProps, UseFullscreenProps, UseGeolocationProps, UseIdleProps, UseImageProps, UseMouseInElementProps, UseMousePressedProps, UseMouseProps, UseNetworkProps, UseNowProps, UseObjectUrlProps, UseOffsetPaginationEmits, UseOffsetPaginationProps, UseOnlineProps, UsePageLeaveProps, UsePointerLockProps, UsePointerProps, UsePreferredColorSchemeProps, UsePreferredContrastProps, UsePreferredDarkProps, UsePreferredLanguagesProps, UsePreferredReducedMotionProps, UseScreenSafeAreaProps, UseTimeAgoProps, UseTimestampProps, UseVirtualListProps, UseWindowFocusProps, UseWindowSizeProps };