@vueuse/components 7.7.1 → 8.0.0

package/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
-import { FunctionDirective, Ref, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
-import { ConfigurableEventFilter, ConfigurableFlush, MaybeRef as MaybeRef$1 } from '@vueuse/shared';
-import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
+import { FunctionDirective, Ref, ComponentPublicInstance, UnwrapNestedRefs, ComputedRef } from 'vue-demi';
+import { MaybeRef, ConfigurableEventFilter, ConfigurableFlush } from '@vueuse/shared';
+import { UseDarkOptions, UseDevicesListOptions, UseDraggableOptions, ElementSize as ElementSize$1, GeolocationOptions, IdleOptions, MouseOptions, MouseInElementOptions, MousePressedOptions, UseNowOptions, MaybeRef as MaybeRef$1, UsePointerOptions, UseTimeAgoOptions, TimestampOptions, UseVirtualListOptions, WindowSizeOptions } from '@vueuse/core';
 
 interface ConfigurableWindow {
     window?: Window;
@@ -18,10 +18,18 @@ interface RenderableComponent {
 
 declare const OnClickOutside: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
-/**
- * TODO: Test that this actually works
- */
-declare const VOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
+declare const vOnClickOutside: FunctionDirective<any, (evt: PointerEvent) => void>;
+
+declare type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup';
+interface KeyStrokeOptions {
+    eventName?: KeyStrokeEventName;
+    target?: MaybeRef<EventTarget>;
+    passive?: boolean;
+}
+
+declare type BindingValueFunction$6 = (event: KeyboardEvent) => void;
+declare type BindingValueArray$5 = [BindingValueFunction$6, KeyStrokeOptions];
+declare const vOnKeyStroke: FunctionDirective<HTMLElement, BindingValueFunction$6 | BindingValueArray$5>;
 
 interface OnLongPressOptions {
     /**
@@ -37,12 +45,12 @@ interface OnLongPressProps extends RenderableComponent {
 }
 declare const OnLongPress: vue_demi.DefineComponent<OnLongPressProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<OnLongPressProps>, {}>;
 
-declare type BindingValueFunction = (evt: PointerEvent) => void;
-interface BindingValueObject {
-    handler: BindingValueFunction;
-    options: OnLongPressOptions;
-}
-declare const VOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction | BindingValueObject>;
+declare type BindingValueFunction$5 = (evt: PointerEvent) => void;
+declare type BindingValueArray$4 = [
+    BindingValueFunction$5,
+    OnLongPressOptions
+];
+declare const vOnLongPress: FunctionDirective<HTMLElement, BindingValueFunction$5 | BindingValueArray$4>;
 
 declare const UseActiveElement: vue_demi.DefineComponent<{}, () => vue_demi.VNode<vue_demi.RendererNode, vue_demi.RendererElement, {
     [key: string]: any;
@@ -186,6 +194,9 @@ interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
 }
 declare const UseDraggable: vue_demi.DefineComponent<UseDraggableProps, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseDraggableProps>, {}>;
 
+declare type VueInstance = ComponentPublicInstance;
+declare type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | VueInstance | undefined | null>;
+
 interface ResizeObserverOptions extends ConfigurableWindow {
     /**
      * Sets which box model the observer will observe changes to. Possible values
@@ -198,7 +209,33 @@ interface ResizeObserverOptions extends ConfigurableWindow {
 
 declare const UseElementBounding: vue_demi.DefineComponent<ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ResizeObserverOptions & RenderableComponent>, {}>;
 
-declare const UseElementSize: vue_demi.DefineComponent<ElementSize & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize & ResizeObserverOptions & RenderableComponent>, {}>;
+declare type BindingValueFunction$4 = (state: boolean) => void;
+declare const vElementHover: FunctionDirective<HTMLElement, BindingValueFunction$4>;
+
+declare const UseElementSize: vue_demi.DefineComponent<ElementSize$1 & ResizeObserverOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<ElementSize$1 & ResizeObserverOptions & RenderableComponent>, {}>;
+
+interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * Reactive size of an HTML element.
+ *
+ * @see https://vueuse.org/useElementSize
+ * @param target
+ * @param callback
+ * @param options
+ */
+declare function useElementSize(target: MaybeElementRef, initialSize?: ElementSize, options?: ResizeObserverOptions): {
+    width: vue_demi.Ref<number>;
+    height: vue_demi.Ref<number>;
+};
+
+declare type RemoveFirstFromTuple<T extends any[]> = T['length'] extends 0 ? undefined : (((...b: T) => void) extends (a: any, ...b: infer I) => void ? I : []);
+declare type BindingValueFunction$3 = (size: ElementSize) => void;
+declare type VElementSizeOptions = RemoveFirstFromTuple<Parameters<typeof useElementSize>>;
+declare type BindingValueArray$3 = [BindingValueFunction$3, ...VElementSizeOptions];
+declare const vElementSize: FunctionDirective<HTMLElement, BindingValueFunction$3 | BindingValueArray$3>;
 
 declare const UseElementVisibility: vue_demi.DefineComponent<RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<RenderableComponent>, {}>;
 
@@ -220,6 +257,111 @@ declare const UseIdle: vue_demi.DefineComponent<IdleOptions & {
     timeout: number;
 }>, {}>;
 
+interface UseScrollOptions {
+    /**
+     * 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;
+    };
+    /**
+     * 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;
+}
+/**
+ * Reactive scroll.
+ *
+ * @see https://vueuse.org/useScroll
+ * @param element
+ * @param options
+ */
+declare function useScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): {
+    x: vue_demi.Ref<number>;
+    y: vue_demi.Ref<number>;
+    isScrolling: vue_demi.Ref<boolean>;
+    arrivedState: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+    directions: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+};
+declare type UseScrollReturn = ReturnType<typeof useScroll>;
+
+interface UseInfiniteScrollOptions extends UseScrollOptions {
+    /**
+     * The minimum distance between the bottom of the element and the bottom of the viewport
+     *
+     * @default 0
+     */
+    distance?: number;
+}
+/**
+ * Reactive infinite scroll.
+ *
+ * @see https://vueuse.org/useInfiniteScroll
+ */
+declare function useInfiniteScroll(element: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => void, options?: UseInfiniteScrollOptions): void;
+
+declare type BindingValueFunction$2 = Parameters<typeof useInfiniteScroll>[1];
+declare type BindingValueArray$2 = [BindingValueFunction$2, UseInfiniteScrollOptions];
+declare const vInfiniteScroll: FunctionDirective<HTMLElement, BindingValueFunction$2 | BindingValueArray$2>;
+
+interface IntersectionObserverOptions extends ConfigurableWindow {
+    /**
+     * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+     */
+    root?: MaybeElementRef;
+    /**
+     * 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[];
+}
+
+declare type BindingValueFunction$1 = IntersectionObserverCallback;
+declare type BindingValueArray$1 = [BindingValueFunction$1, IntersectionObserverOptions];
+declare const vIntersectionObserver: FunctionDirective<HTMLElement, BindingValueFunction$1 | BindingValueArray$1>;
+
 declare const UseMouse: vue_demi.DefineComponent<MouseOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseOptions>, {}>;
 
 declare const UseMouseInElement: vue_demi.DefineComponent<MouseInElementOptions & RenderableComponent, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<MouseInElementOptions & RenderableComponent>, {}>;
@@ -236,17 +378,17 @@ interface UseOffsetPaginationOptions {
     /**
      * Total number of items.
      */
-    total?: MaybeRef<number>;
+    total?: MaybeRef$1<number>;
     /**
      * The number of items to display per page.
      * @default 10
      */
-    pageSize?: MaybeRef<number>;
+    pageSize?: MaybeRef$1<number>;
     /**
      * The current page number.
      * @default 1
      */
-    page?: MaybeRef<number>;
+    page?: MaybeRef$1<number>;
     /**
      * Callback when the `page` change.
      */
@@ -317,8 +459,14 @@ declare const UseScreenSafeArea: vue_demi.DefineComponent<{
     bottom: boolean;
 }>;
 
+declare type BindingValueFunction = (state: UseScrollReturn) => void;
+declare type BindingValueArray = [BindingValueFunction, UseScrollOptions];
+declare const vScroll: FunctionDirective<HTMLElement, BindingValueFunction | BindingValueArray>;
+
+declare const vScrollLock: FunctionDirective<HTMLElement, boolean>;
+
 interface UseTimeAgoComponentOptions extends Omit<UseTimeAgoOptions<true>, 'controls'> {
-    time: MaybeRef$1<Date | number | string>;
+    time: MaybeRef<Date | number | string>;
 }
 declare const UseTimeAgo: vue_demi.DefineComponent<UseTimeAgoComponentOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<UseTimeAgoComponentOptions>, {}>;
 
@@ -352,4 +500,4 @@ declare const UseWindowFocus: vue_demi.DefineComponent<{}, () => vue_demi.VNode<
 
 declare const UseWindowSize: vue_demi.DefineComponent<WindowSizeOptions, {}, {}, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, vue_demi.EmitsOptions, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<WindowSizeOptions>, {}>;
 
-export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, VOnClickOutside, VOnLongPress };
+export { OnClickOutside, OnLongPress, OnLongPressProps, UseActiveElement, UseBattery, UseBrowserLocation, UseColorMode, UseDark, UseDeviceMotion, UseDeviceOrientation, UseDevicePixelRatio, UseDevicesList, UseDocumentVisibility, UseDraggable, UseDraggableProps, UseElementBounding, UseElementSize, UseElementVisibility, UseEyeDropper, UseFullscreen, UseGeolocation, UseIdle, UseMouse, UseMouseInElement, UseMousePressed, UseNetwork, UseNow, UseOffsetPagination, UseOnline, UsePageLeave, UsePointer, UsePreferredColorScheme, UsePreferredDark, UsePreferredLanguages, UseScreenSafeArea, UseTimeAgo, UseTimestamp, UseVirtualList, UseVirtualListProps, UseWindowFocus, UseWindowSize, vOnClickOutside as VOnClickOutside, vOnLongPress as VOnLongPress, vElementHover, vElementSize, vInfiniteScroll, vIntersectionObserver, vOnClickOutside, vOnKeyStroke, vOnLongPress, vScroll, vScrollLock };