import * as _vueuse_shared from '@vueuse/shared'; import { Fn, MaybeRef, MaybeComputedRef, Awaitable, ConfigurableEventFilter, ConfigurableFlush, RemovableRef, EventHookOn, Arrayable, MaybeReadonlyRef, UseIntervalFnOptions, Pausable, UseTimeoutFnOptions, EventHook } from '@vueuse/shared'; export * from '@vueuse/shared'; import * as vue_demi from 'vue-demi'; import { Ref, InjectionKey, ComputedRef, ComponentPublicInstance, Component, UnwrapRef, WatchOptions, UnwrapNestedRefs, WatchSource, ToRefs, StyleValue, ShallowRef } from 'vue-demi'; import * as vue from 'vue-demi'; /** * Handle overlapping async evaluations. * * @param cancelCallback The provided callback is invoked when a re-evaluation of the computed value is triggered before the previous one finished */ type AsyncComputedOnCancel = (cancelCallback: Fn) => void; interface AsyncComputedOptions { /** * Should value be evaluated lazily * * @default false */ lazy?: boolean; /** * Ref passed to receive the updated of async evaluation */ evaluating?: Ref; /** * Use shallowRef * * The default value will be changed to `true` in the next major version * * @default false */ shallow?: boolean; /** * Callback when error is caught. */ onError?: (e: unknown) => void; } /** * Create an asynchronous computed dependency. * * @see https://vueuse.org/computedAsync * @param evaluationCallback The promise-returning callback which generates the computed value * @param initialState The initial state, used until the first evaluation finishes * @param optionsOrRef Additional options or a ref passed to receive the updates of the async evaluation */ declare function computedAsync(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise, initialState?: T, optionsOrRef?: Ref | AsyncComputedOptions): Ref; type ComputedInjectGetter = (source: T | undefined, ctx?: any) => K; type ComputedInjectGetterWithDefault = (source: T, ctx?: any) => K; type ComputedInjectSetter = (v: T) => void; interface WritableComputedInjectOptions { get: ComputedInjectGetter; set: ComputedInjectSetter; } interface WritableComputedInjectOptionsWithDefault { get: ComputedInjectGetterWithDefault; set: ComputedInjectSetter; } declare function computedInject(key: InjectionKey | string, getter: ComputedInjectGetter): ComputedRef; declare function computedInject(key: InjectionKey | string, options: WritableComputedInjectOptions): ComputedRef; declare function computedInject(key: InjectionKey | string, getter: ComputedInjectGetterWithDefault, defaultSource: T, treatDefaultAsFactory?: false): ComputedRef; declare function computedInject(key: InjectionKey | string, options: WritableComputedInjectOptionsWithDefault, defaultSource: T | (() => T), treatDefaultAsFactory: true): ComputedRef; type UnrefFn = T extends (...args: infer A) => infer R ? (...args: { [K in keyof A]: MaybeRef; }) => R : never; /** * Make a plain function accepting ref and raw values as arguments. * Returns the same value the unconverted function returns, with proper typing. */ declare const createUnrefFn: (fn: T) => UnrefFn; type VueInstance = ComponentPublicInstance; type MaybeElementRef = MaybeRef; type MaybeComputedElementRef = MaybeComputedRef; type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null; type UnRefElementReturn = T extends VueInstance ? Exclude : T | undefined; /** * Get the dom element of a ref of element or Vue component instance * * @param elRef */ declare function unrefElement(elRef: MaybeComputedElementRef): UnRefElementReturn; interface ConfigurableWindow { window?: Window; } interface ConfigurableDocument { document?: Document; } interface ConfigurableDocumentOrShadowRoot { document?: DocumentOrShadowRoot; } interface ConfigurableNavigator { navigator?: Navigator; } interface ConfigurableLocation { location?: Location; } declare const defaultWindow: (Window & typeof globalThis) | undefined; declare const defaultDocument: Document | undefined; declare const defaultNavigator: Navigator | undefined; declare const defaultLocation: Location | undefined; interface OnClickOutsideOptions extends ConfigurableWindow { /** * List of elements that should not trigger the event. */ ignore?: (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; } type OnClickOutsideHandler = (evt: T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) => void; /** * Listen for clicks outside of an element. * * @see https://vueuse.org/onClickOutside * @param target * @param handler * @param options */ declare function onClickOutside(target: MaybeElementRef, handler: OnClickOutsideHandler<{ detectIframe: T['detectIframe']; }>, options?: T): (() => void) | undefined; type KeyPredicate = (event: KeyboardEvent) => boolean; type KeyFilter = true | string | string[] | KeyPredicate; type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup'; interface OnKeyStrokeOptions { eventName?: KeyStrokeEventName; target?: MaybeComputedRef; passive?: boolean; } declare function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void; declare function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void; /** * Listen for keyboard keys being stroked. * * @see https://vueuse.org/onKeyStroke */ declare function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void; declare function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void; /** * Listen to the keydown event of the given key. * * @see https://vueuse.org/onKeyStroke * @param key * @param handler * @param options */ declare function onKeyDown(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit): () => void; /** * Listen to the keypress event of the given key. * * @see https://vueuse.org/onKeyStroke * @param key * @param handler * @param options */ declare function onKeyPressed(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit): () => void; /** * Listen to the keyup event of the given key. * * @see https://vueuse.org/onKeyStroke * @param key * @param handler * @param options */ declare function onKeyUp(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: Omit): () => void; interface OnLongPressOptions { /** * Time in ms till `longpress` gets called * * @default 500 */ delay?: number; modifiers?: OnLongPressModifiers; } interface OnLongPressModifiers { stop?: boolean; once?: boolean; prevent?: boolean; capture?: boolean; self?: boolean; } declare function onLongPress(target: MaybeElementRef, handler: (evt: PointerEvent) => void, options?: OnLongPressOptions): void; /** * Fires when users start typing on non-editable elements. * * @see https://vueuse.org/onStartTyping * @param callback * @param options */ declare function onStartTyping(callback: (event: KeyboardEvent) => void, options?: ConfigurableDocument): void; /** * Shorthand for binding ref to template element. * * @see https://vueuse.org/templateRef * @param key * @param initialValue */ declare function templateRef(key: string, initialValue?: T | null): Readonly>; interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot { } /** * Reactive `document.activeElement` * * @see https://vueuse.org/useActiveElement * @param options */ declare function useActiveElement(options?: UseActiveElementOptions): _vueuse_shared.ComputedRefWithControl; type UseAsyncQueueTask = (...args: any[]) => T | Promise; interface UseAsyncQueueResult { state: 'pending' | 'fulfilled' | 'rejected'; data: T | null; } interface UseAsyncQueueReturn { activeIndex: Ref; result: T; } interface UseAsyncQueueOptions { /** * Interrupt tasks when current task fails. * * @default true */ interrupt?: boolean; /** * Trigger it when the tasks fails. * */ onError?: () => void; /** * Trigger it when the tasks ends. * */ onFinished?: () => void; } /** * Asynchronous queue task controller. * * @see https://vueuse.org/useAsyncQueue * @param tasks * @param options */ declare function useAsyncQueue(tasks: [UseAsyncQueueTask], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult]>; declare function useAsyncQueue(tasks: [UseAsyncQueueTask, UseAsyncQueueTask], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult, UseAsyncQueueResult]>; declare function useAsyncQueue(tasks: [UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult]>; declare function useAsyncQueue(tasks: [UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult]>; declare function useAsyncQueue(tasks: [UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask, UseAsyncQueueTask], options?: UseAsyncQueueOptions): UseAsyncQueueReturn<[UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult, UseAsyncQueueResult]>; declare function useAsyncQueue(tasks: UseAsyncQueueTask[], options?: UseAsyncQueueOptions): UseAsyncQueueReturn[]>; interface UseAsyncStateReturn { state: Shallow extends true ? Ref : Ref>; isReady: Ref; isLoading: Ref; error: Ref; execute: (delay?: number, ...args: Params) => Promise; } interface UseAsyncStateOptions { /** * Delay for executing the promise. In milliseconds. * * @default 0 */ delay?: number; /** * Execute the promise right after the function is invoked. * Will apply the delay if any. * * When set to false, you will need to execute it manually. * * @default true */ immediate?: boolean; /** * Callback when error is caught. */ onError?: (e: unknown) => void; /** * Callback when success is caught. * @param {D} data */ onSuccess?: (data: D) => void; /** * Sets the state to initialState before executing the promise. * * This can be useful when calling the execute function more than once (for * example, to refresh data). When set to false, the current state remains * unchanged until the promise resolves. * * @default true */ resetOnExecute?: boolean; /** * Use shallowRef. * * @default true */ shallow?: Shallow; /** * * An error is thrown when executing the execute function * * @default false */ throwError?: boolean; } /** * Reactive async state. Will not block your setup function and will trigger changes once * the promise is ready. * * @see https://vueuse.org/useAsyncState * @param promise The promise / async function to be resolved * @param initialState The initial state, used until the first evaluation finishes * @param options */ declare function useAsyncState(promise: Promise | ((...args: Params) => Promise), initialState: Data, options?: UseAsyncStateOptions): UseAsyncStateReturn; interface ToDataURLOptions { /** * MIME type */ type?: string | undefined; /** * Image quality of jpeg or webp */ quality?: any; } interface UseBase64ObjectOptions { serializer: (v: T) => string; } interface UseBase64Return { base64: Ref; promise: Ref>; execute: () => Promise; } declare function useBase64(target: MaybeComputedRef): UseBase64Return; declare function useBase64(target: MaybeComputedRef): UseBase64Return; declare function useBase64(target: MaybeComputedRef): UseBase64Return; declare function useBase64(target: MaybeComputedRef, options?: ToDataURLOptions): UseBase64Return; declare function useBase64(target: MaybeComputedRef, options?: ToDataURLOptions): UseBase64Return; declare function useBase64>(target: MaybeComputedRef, options?: UseBase64ObjectOptions): UseBase64Return; declare function useBase64>(target: MaybeComputedRef, options?: UseBase64ObjectOptions): UseBase64Return; declare function useBase64>(target: MaybeComputedRef, options?: UseBase64ObjectOptions): UseBase64Return; declare function useBase64(target: MaybeComputedRef, options?: UseBase64ObjectOptions): UseBase64Return; interface BatteryManager extends EventTarget { charging: boolean; chargingTime: number; dischargingTime: number; level: number; } /** * Reactive Battery Status API. * * @see https://vueuse.org/useBattery * @param options */ declare function useBattery({ navigator }?: ConfigurableNavigator): { isSupported: vue_demi.Ref; charging: vue_demi.Ref; chargingTime: vue_demi.Ref; dischargingTime: vue_demi.Ref; level: vue_demi.Ref; }; type UseBatteryReturn = ReturnType; interface UseBluetoothRequestDeviceOptions { /** * * An array of BluetoothScanFilters. This filter consists of an array * of BluetoothServiceUUIDs, a name parameter, and a namePrefix parameter. * */ filters?: BluetoothLEScanFilter[] | undefined; /** * * An array of BluetoothServiceUUIDs. * * @see https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService/uuid * */ optionalServices?: BluetoothServiceUUID[] | undefined; } interface UseBluetoothOptions extends UseBluetoothRequestDeviceOptions, ConfigurableNavigator { /** * * A boolean value indicating that the requesting script can accept all Bluetooth * devices. The default is false. * * !! This may result in a bunch of unrelated devices being shown * in the chooser and energy being wasted as there are no filters. * * * Use it with caution. * * @default false * */ acceptAllDevices?: boolean; } declare function useBluetooth(options?: UseBluetoothOptions): UseBluetoothReturn; interface UseBluetoothReturn { isSupported: Ref; isConnected: ComputedRef; device: Ref; requestDevice: () => Promise; server: Ref; error: Ref; } /** * Breakpoints from Tailwind V2 * * @see https://tailwindcss.com/docs/breakpoints */ declare const breakpointsTailwind: { sm: number; md: number; lg: number; xl: number; '2xl': number; }; /** * Breakpoints from Bootstrap V5 * * @see https://getbootstrap.com/docs/5.0/layout/breakpoints */ declare const breakpointsBootstrapV5: { sm: number; md: number; lg: number; xl: number; xxl: number; }; /** * Breakpoints from Vuetify V2 * * @see https://vuetifyjs.com/en/features/breakpoints */ declare const breakpointsVuetify: { xs: number; sm: number; md: number; lg: number; }; /** * Breakpoints from Ant Design * * @see https://ant.design/components/layout/#breakpoint-width */ declare const breakpointsAntDesign: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; }; /** * Breakpoints from Quasar V2 * * @see https://quasar.dev/style/breakpoints */ declare const breakpointsQuasar: { xs: number; sm: number; md: number; lg: number; }; /** * Sematic Breakpoints */ declare const breakpointsSematic: { mobileS: number; mobileM: number; mobileL: number; tablet: number; laptop: number; laptopL: number; desktop4K: number; }; /** * Breakpoints from Master CSS * * @see https://docs.master.co/css/breakpoints */ declare const breakpointsMasterCss: { '3xs': number; '2xs': number; xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; '3xl': number; '4xl': number; }; type Breakpoints = Record; /** * Reactively viewport breakpoints * * @see https://vueuse.org/useBreakpoints * @param options */ declare function useBreakpoints(breakpoints: Breakpoints, options?: ConfigurableWindow): { greater(k: K): Ref; greaterOrEqual: (k: K) => Ref; smaller(k: K): Ref; smallerOrEqual(k: K): Ref; between(a: K, b: K): Ref; isGreater(k: K): boolean; isGreaterOrEqual(k: K): boolean; isSmaller(k: K): boolean; isSmallerOrEqual(k: K): boolean; isInBetween(a: K, b: K): boolean; } & Record>; type UseBreakpointsReturn = { greater: (k: K) => Ref; greaterOrEqual: (k: K) => Ref; smaller(k: K): Ref; smallerOrEqual: (k: K) => Ref; between(a: K, b: K): Ref; isGreater(k: K): boolean; isGreaterOrEqual(k: K): boolean; isSmaller(k: K): boolean; isSmallerOrEqual(k: K): boolean; isInBetween(a: K, b: K): boolean; } & Record>; interface UseBroadcastChannelOptions extends ConfigurableWindow { /** * The name of the channel. */ name: string; } /** * Reactive BroadcastChannel * * @see https://vueuse.org/useBroadcastChannel * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel * @param options * */ declare const useBroadcastChannel: (options: UseBroadcastChannelOptions) => UseBroadcastChannelReturn; interface UseBroadcastChannelReturn { isSupported: Ref; channel: Ref; data: Ref; post: (data: P) => void; close: () => void; error: Ref; isClosed: Ref; } interface BrowserLocationState { trigger: string; state?: any; length?: number; hash?: string; host?: string; hostname?: string; href?: string; origin?: string; pathname?: string; port?: string; protocol?: string; search?: string; } /** * Reactive browser location. * * @see https://vueuse.org/useBrowserLocation * @param options */ declare function useBrowserLocation({ window }?: ConfigurableWindow): vue_demi.Ref<{ trigger: string; state?: any; length?: number | undefined; hash?: string | undefined; host?: string | undefined; hostname?: string | undefined; href?: string | undefined; origin?: string | undefined; pathname?: string | undefined; port?: string | undefined; protocol?: string | undefined; search?: string | undefined; }>; type UseBrowserLocationReturn = ReturnType; declare function useCached(refValue: Ref, comparator?: (a: T, b: T) => boolean, watchOptions?: WatchOptions): Ref; interface UseClipboardOptions extends ConfigurableNavigator { /** * Enabled reading for clipboard * * @default false */ read?: boolean; /** * Copy source */ source?: Source; /** * Milliseconds to reset state of `copied` ref * * @default 1500 */ copiedDuring?: number; /** * Whether fallback to document.execCommand('copy') if clipboard is undefined. * * @default false */ legacy?: boolean; } interface UseClipboardReturn { isSupported: Ref; text: ComputedRef; copied: ComputedRef; copy: Optional extends true ? (text?: string) => Promise : (text: string) => Promise; } /** * Reactive Clipboard API. * * @see https://vueuse.org/useClipboard * @param options */ declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn; declare function useClipboard(options: UseClipboardOptions>): UseClipboardReturn; interface UseClonedOptions extends WatchOptions { /** * Custom clone function. * * By default, it use `JSON.parse(JSON.stringify(value))` to clone. */ clone?: (source: T) => T; /** * Manually sync the ref * * @default false */ manual?: boolean; } interface UseClonedReturn { /** * Cloned ref */ cloned: ComputedRef; /** * Sync cloned data with source manually */ sync: () => void; } type CloneFn = (x: F) => T; declare function cloneFnJSON(source: T): T; declare function useCloned(source: MaybeComputedRef, options?: UseClonedOptions): { cloned: vue_demi.Ref>; sync: () => void; }; interface StorageLikeAsync { getItem(key: string): Awaitable; setItem(key: string, value: string): Awaitable; removeItem(key: string): Awaitable; } interface StorageLike { getItem(key: string): string | null; setItem(key: string, value: string): void; removeItem(key: string): void; } /** * @experimental The API is not finalized yet. It might not follow semver. */ interface SSRHandlersMap { getDefaultStorage: () => StorageLike | undefined; getDefaultStorageAsync: () => StorageLikeAsync | undefined; updateHTMLAttrs: (selector: string, attribute: string, value: string) => void; } declare function getSSRHandler(key: T, fallback: SSRHandlersMap[T]): SSRHandlersMap[T]; declare function getSSRHandler(key: T, fallback: SSRHandlersMap[T] | undefined): SSRHandlersMap[T] | undefined; declare function setSSRHandler(key: T, fn: SSRHandlersMap[T]): void; interface Serializer { read(raw: string): T; write(value: T): string; } interface SerializerAsync { read(raw: string): Awaitable; write(value: T): Awaitable; } declare const StorageSerializers: Record<'boolean' | 'object' | 'number' | 'any' | 'string' | 'map' | 'set' | 'date', Serializer>; declare const customStorageEventName = "vueuse-storage"; interface StorageEventLike { storageArea: StorageLike | null; key: StorageEvent['key']; oldValue: StorageEvent['oldValue']; newValue: StorageEvent['newValue']; } interface UseStorageOptions 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; /** * On error callback * * Default log error to `console.error` */ onError?: (error: unknown) => void; /** * Use shallow ref as reference * * @default false */ shallow?: boolean; } declare function useStorage(key: string, defaults: MaybeComputedRef, storage?: StorageLike, options?: UseStorageOptions): RemovableRef; declare function useStorage(key: string, defaults: MaybeComputedRef, storage?: StorageLike, options?: UseStorageOptions): RemovableRef; declare function useStorage(key: string, defaults: MaybeComputedRef, storage?: StorageLike, options?: UseStorageOptions): RemovableRef; declare function useStorage(key: string, defaults: MaybeComputedRef, storage?: StorageLike, options?: UseStorageOptions): RemovableRef; declare function useStorage(key: string, defaults: MaybeComputedRef, storage?: StorageLike, options?: UseStorageOptions): RemovableRef; type BasicColorSchema = 'light' | 'dark' | 'auto'; interface UseColorModeOptions extends UseStorageOptions { /** * CSS Selector for the target element applying to * * @default 'html' */ selector?: string; /** * HTML attribute applying the target element * * @default 'class' */ attribute?: string; /** * The initial color mode * * @default 'auto' */ initialValue?: T | BasicColorSchema; /** * Prefix when adding value to the attribute */ modes?: Partial>; /** * A custom handler for handle the updates. * When specified, the default behavior will be overridden. * * @default undefined */ onChanged?: (mode: T | BasicColorSchema, defaultHandler: ((mode: T | BasicColorSchema) => void)) => void; /** * Custom storage ref * * When provided, `useStorage` will be skipped */ storageRef?: Ref; /** * 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 */ emitAuto?: boolean; } /** * Reactive color mode with auto data persistence. * * @see https://vueuse.org/useColorMode * @param options */ declare function useColorMode(options?: UseColorModeOptions): vue_demi.WritableComputedRef; type UseConfirmDialogRevealResult = { data?: C; isCanceled: false; } | { data?: D; isCanceled: true; }; interface UseConfirmDialogReturn { /** * Revealing state */ isRevealed: ComputedRef; /** * Opens the dialog. * Create promise and return it. Triggers `onReveal` hook. */ reveal: (data?: RevealData) => Promise>; /** * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value. * Can accept any data and to pass it to `onConfirm` hook. */ confirm: (data?: ConfirmData) => void; /** * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook. * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value. * Can accept any data and to pass it to `onCancel` hook. */ cancel: (data?: CancelData) => void; /** * Event Hook to be triggered right before dialog creating. */ onReveal: EventHookOn; /** * Event Hook to be called on `confirm()`. * Gets data object from `confirm` function. */ onConfirm: EventHookOn; /** * Event Hook to be called on `cancel()`. * Gets data object from `cancel` function. */ onCancel: EventHookOn; } /** * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins. * * @see https://vueuse.org/useConfirmDialog/ * @param revealed `boolean` `ref` that handles a modal window */ declare function useConfirmDialog(revealed?: Ref): UseConfirmDialogReturn; interface UseCssVarOptions extends ConfigurableWindow { initialValue?: string; } /** * Manipulate CSS variables. * * @see https://vueuse.org/useCssVar * @param prop * @param target * @param initialValue * @param options */ declare function useCssVar(prop: MaybeComputedRef, target?: MaybeElementRef, { window, initialValue }?: UseCssVarOptions): vue_demi.Ref; declare function useCurrentElement(): _vueuse_shared.ComputedRefWithControl; interface UseCycleListOptions { /** * The initial value of the state. * A ref can be provided to reuse. */ initialValue?: MaybeRef; /** * The default index when */ fallbackIndex?: number; /** * Custom function to get the index of the current value. */ getIndexOf?: (value: T, list: T[]) => number; } /** * Cycle through a list of items * * @see https://vueuse.org/useCycleList */ declare function useCycleList(list: T[], options?: UseCycleListOptions): UseCycleListReturn; interface UseCycleListReturn { state: Ref; index: Ref; next: (n?: number) => T; prev: (n?: number) => T; } interface UseDarkOptions extends Omit, 'modes' | 'onChanged'> { /** * Value applying to the target element when isDark=true * * @default 'dark' */ valueDark?: string; /** * Value applying to the target element when isDark=false * * @default '' */ valueLight?: string; /** * A custom handler for handle the updates. * When specified, the default behavior will be overridden. * * @default undefined */ onChanged?: (isDark: boolean) => void; } /** * Reactive dark mode with auto data persistence. * * @see https://vueuse.org/useDark * @param options */ declare function useDark(options?: UseDarkOptions): vue_demi.WritableComputedRef; interface UseRefHistoryRecord { snapshot: T; timestamp: number; } interface UseManualRefHistoryOptions { /** * Maximum number of history to be kept. Default to unlimited. */ capacity?: number; /** * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)). * Default to false * * @default false */ clone?: boolean | CloneFn; /** * Serialize data into the history */ dump?: (v: Raw) => Serialized; /** * Deserialize data from the history */ parse?: (v: Serialized) => Raw; /** * Deserialize data from the history */ setSource?: (source: Ref, v: Raw) => void; } interface UseManualRefHistoryReturn { /** * Bypassed tracking ref from the argument */ source: Ref; /** * An array of history records for undo, newest comes to first */ history: Ref[]>; /** * Last history point, source can be different if paused */ last: Ref>; /** * Same as {@link UseManualRefHistoryReturn.history | history} */ undoStack: Ref[]>; /** * Records array for redo */ redoStack: Ref[]>; /** * A ref representing if undo is possible (non empty undoStack) */ canUndo: Ref; /** * A ref representing if redo is possible (non empty redoStack) */ canRedo: Ref; /** * Undo changes */ undo: () => void; /** * Redo changes */ redo: () => void; /** * Clear all the history */ clear: () => void; /** * Create new a new history record */ commit: () => void; /** * Reset ref's value with latest history */ reset: () => void; } /** * Track the change history of a ref, also provides undo and redo functionality. * * @see https://vueuse.org/useManualRefHistory * @param source * @param options */ declare function useManualRefHistory(source: Ref, options?: UseManualRefHistoryOptions): UseManualRefHistoryReturn; interface UseRefHistoryOptions extends ConfigurableEventFilter { /** * Watch for deep changes, default to false * * When set to true, it will also create clones for values store in the history * * @default false */ deep?: boolean; /** * The flush option allows for greater control over the timing of a history point, default to 'pre' * * Possible values: 'pre', 'post', 'sync' * It works in the same way as the flush option in watch and watch effect in vue reactivity * * @default 'pre' */ flush?: 'pre' | 'post' | 'sync'; /** * Maximum number of history to be kept. Default to unlimited. */ capacity?: number; /** * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)). * Default to false * * @default false */ clone?: boolean | CloneFn; /** * Serialize data into the history */ dump?: (v: Raw) => Serialized; /** * Deserialize data from the history */ parse?: (v: Serialized) => Raw; } interface UseRefHistoryReturn extends UseManualRefHistoryReturn { /** * A ref representing if the tracking is enabled */ isTracking: Ref; /** * Pause change tracking */ pause(): void; /** * Resume change tracking * * @param [commit] if true, a history record will be create after resuming */ resume(commit?: boolean): void; /** * A sugar for auto pause and auto resuming within a function scope * * @param fn */ batch(fn: (cancel: Fn) => void): void; /** * Clear the data and stop the watch */ dispose(): void; } /** * Track the change history of a ref, also provides undo and redo functionality. * * @see https://vueuse.org/useRefHistory * @param source * @param options */ declare function useRefHistory(source: Ref, options?: UseRefHistoryOptions): UseRefHistoryReturn; /** * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with debounce filter. * * @see https://vueuse.org/useDebouncedRefHistory * @param source * @param options */ declare function useDebouncedRefHistory(source: Ref, options?: Omit, 'eventFilter'> & { debounce?: MaybeComputedRef; }): UseRefHistoryReturn; interface DeviceMotionOptions extends ConfigurableWindow, ConfigurableEventFilter { } /** * Reactive DeviceMotionEvent. * * @see https://vueuse.org/useDeviceMotion * @param options */ declare function useDeviceMotion(options?: DeviceMotionOptions): { acceleration: Ref; accelerationIncludingGravity: Ref; rotationRate: Ref; interval: Ref; }; type UseDeviceMotionReturn = ReturnType; /** * Reactive DeviceOrientationEvent. * * @see https://vueuse.org/useDeviceOrientation * @param options */ declare function useDeviceOrientation(options?: ConfigurableWindow): { isSupported: Ref; isAbsolute: Ref; alpha: Ref; beta: Ref; gamma: Ref; }; type UseDeviceOrientationReturn = ReturnType; /** * Reactively track `window.devicePixelRatio`. * * @see https://vueuse.org/useDevicePixelRatio * @param options */ declare function useDevicePixelRatio({ window, }?: ConfigurableWindow): { pixelRatio: vue_demi.Ref; }; type UseDevicePixelRatioReturn = ReturnType; interface UseDevicesListOptions extends ConfigurableNavigator { onUpdated?: (devices: MediaDeviceInfo[]) => void; /** * Request for permissions immediately if it's not granted, * otherwise label and deviceIds could be empty * * @default false */ requestPermissions?: boolean; /** * Request for types of media permissions * * @default { audio: true, video: true } */ constraints?: MediaStreamConstraints; } interface UseDevicesListReturn { /** * All devices */ devices: Ref; videoInputs: ComputedRef; audioInputs: ComputedRef; audioOutputs: ComputedRef; permissionGranted: Ref; ensurePermissions: () => Promise; isSupported: Ref; } /** * Reactive `enumerateDevices` listing available input/output devices * * @see https://vueuse.org/useDevicesList * @param options */ declare function useDevicesList(options?: UseDevicesListOptions): UseDevicesListReturn; interface UseDisplayMediaOptions extends ConfigurableNavigator { /** * If the stream is enabled * @default false */ enabled?: MaybeRef; /** * If the stream video media constraints */ video?: boolean | MediaTrackConstraints | undefined; /** * If the stream audio media constraints */ audio?: boolean | MediaTrackConstraints | undefined; } /** * Reactive `mediaDevices.getDisplayMedia` streaming * * @see https://vueuse.org/useDisplayMedia * @param options */ declare function useDisplayMedia(options?: UseDisplayMediaOptions): { isSupported: Ref; stream: Ref; start: () => Promise; stop: () => void; enabled: Ref; }; type UseDisplayMediaReturn = ReturnType; /** * Reactively track `document.visibilityState`. * * @see https://vueuse.org/useDocumentVisibility * @param options */ declare function useDocumentVisibility({ document }?: ConfigurableDocument): Ref; interface Position { x: number; y: number; } interface RenderableComponent { /** * The element that the component should be rendered as * * @default 'div' */ as?: Object | string; } type PointerType = 'mouse' | 'touch' | 'pen'; interface UseDraggableOptions { /** * Only start the dragging when click on the element directly * * @default false */ exact?: MaybeComputedRef; /** * Prevent events defaults * * @default false */ preventDefault?: MaybeComputedRef; /** * Prevent events propagation * * @default false */ stopPropagation?: MaybeComputedRef; /** * Element to attach `pointermove` and `pointerup` events to. * * @default window */ draggingElement?: MaybeComputedRef; /** * Handle that triggers the drag event * * @default target */ handle?: MaybeComputedRef; /** * Pointer types that listen to. * * @default ['mouse', 'touch', 'pen'] */ pointerTypes?: PointerType[]; /** * Initial position of the element. * * @default { x: 0, y: 0 } */ initialValue?: MaybeComputedRef; /** * Callback when the dragging starts. Return `false` to prevent dragging. */ onStart?: (position: Position, event: PointerEvent) => void | false; /** * Callback during dragging. */ onMove?: (position: Position, event: PointerEvent) => void; /** * Callback when dragging end. */ onEnd?: (position: Position, event: PointerEvent) => void; } /** * Make elements draggable. * * @see https://vueuse.org/useDraggable * @param target * @param options */ declare function useDraggable(target: MaybeComputedRef, options?: UseDraggableOptions): { position: vue_demi.Ref<{ x: number; y: number; }>; isDragging: vue_demi.ComputedRef; style: vue_demi.ComputedRef; x: vue_demi.Ref; y: vue_demi.Ref; }; type UseDraggableReturn = ReturnType; interface UseDropZoneReturn { isOverDropZone: Ref; } declare function useDropZone(target: MaybeComputedRef, onDrop?: (files: File[] | null) => void): UseDropZoneReturn; 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; } /** * Reactive bounding box of an HTML element. * * @see https://vueuse.org/useElementBounding * @param target */ declare function useElementBounding(target: MaybeComputedElementRef, options?: UseElementBoundingOptions): { height: vue_demi.Ref; bottom: vue_demi.Ref; left: vue_demi.Ref; right: vue_demi.Ref; top: vue_demi.Ref; width: vue_demi.Ref; x: vue_demi.Ref; y: vue_demi.Ref; update: () => void; }; type UseElementBoundingReturn = ReturnType; interface UseElementByPointOptions extends ConfigurableDocument { x: MaybeComputedRef; y: MaybeComputedRef; } /** * Reactive element by point. * * @see https://vueuse.org/useElementByPoint * @param options - UseElementByPointOptions */ declare function useElementByPoint(options: UseElementByPointOptions): { isActive: Readonly>; pause: _vueuse_shared.Fn; resume: _vueuse_shared.Fn; element: vue_demi.Ref; }; type UseElementByPointReturn = ReturnType; interface UseElementHoverOptions extends ConfigurableWindow { delayEnter?: number; delayLeave?: number; } declare function useElementHover(el: MaybeComputedRef, options?: UseElementHoverOptions): Ref; interface ResizeObserverSize { readonly inlineSize: number; readonly blockSize: number; } interface ResizeObserverEntry { readonly target: Element; readonly contentRect: DOMRectReadOnly; readonly borderBoxSize?: ReadonlyArray; readonly contentBoxSize?: ReadonlyArray; readonly devicePixelContentBoxSize?: ReadonlyArray; } type ResizeObserverCallback = (entries: ReadonlyArray, 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; } declare class ResizeObserver { constructor(callback: ResizeObserverCallback); disconnect(): void; observe(target: Element, options?: UseResizeObserverOptions): void; unobserve(target: Element): void; } /** * Reports changes to the dimensions of an Element's content or the border-box * * @see https://vueuse.org/useResizeObserver * @param target * @param callback * @param options */ declare function useResizeObserver(target: MaybeComputedElementRef, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): { isSupported: vue_demi.Ref; stop: () => void; }; type UseResizeObserverReturn = ReturnType; 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: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): { width: vue_demi.Ref; height: vue_demi.Ref; }; type UseElementSizeReturn = ReturnType; interface UseElementVisibilityOptions extends ConfigurableWindow { scrollTarget?: MaybeComputedRef; } /** * Tracks the visibility of an element within the viewport. * * @see https://vueuse.org/useElementVisibility * @param element * @param options */ declare function useElementVisibility(element: MaybeComputedElementRef, { window, scrollTarget }?: UseElementVisibilityOptions): vue_demi.Ref; type EventBusListener = (event: T, payload?: P) => void; type EventBusEvents = EventBusListener[]; interface EventBusKey extends Symbol { } type EventBusIdentifier = EventBusKey | string | number; interface UseEventBusReturn { /** * Subscribe to an event. When calling emit, the listeners will execute. * @param listener watch listener. * @returns a stop function to remove the current callback. */ on: (listener: EventBusListener) => Fn; /** * Similar to `on`, but only fires once * @param listener watch listener. * @returns a stop function to remove the current callback. */ once: (listener: EventBusListener) => Fn; /** * Emit an event, the corresponding event listeners will execute. * @param event data sent. */ emit: (event?: T, payload?: P) => void; /** * Remove the corresponding listener. * @param listener watch listener. */ off: (listener: EventBusListener) => void; /** * Clear all events */ reset: () => void; } declare function useEventBus(key: EventBusIdentifier): UseEventBusReturn; interface InferEventTarget { addEventListener(event: Events, fn?: any, options?: any): any; removeEventListener(event: Events, fn?: any, options?: any): any; } type WindowEventName = keyof WindowEventMap; type DocumentEventName = keyof DocumentEventMap; interface GeneralEventListener { (evt: E): void; } /** * Register using addEventListener on mounted, and removeEventListener automatically on unmounted. * * Overload 1: Omitted Window target * * @see https://vueuse.org/useEventListener * @param event * @param listener * @param options */ declare function useEventListener(event: Arrayable, listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>, options?: MaybeComputedRef): Fn; /** * Register using addEventListener on mounted, and removeEventListener automatically on unmounted. * * Overload 2: Explicitly Window target * * @see https://vueuse.org/useEventListener * @param target * @param event * @param listener * @param options */ declare function useEventListener(target: Window, event: Arrayable, listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>, options?: MaybeComputedRef): Fn; /** * Register using addEventListener on mounted, and removeEventListener automatically on unmounted. * * Overload 3: Explicitly Document target * * @see https://vueuse.org/useEventListener * @param target * @param event * @param listener * @param options */ declare function useEventListener(target: DocumentOrShadowRoot, event: Arrayable, listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>, options?: MaybeComputedRef): Fn; /** * Register using addEventListener on mounted, and removeEventListener automatically on unmounted. * * Overload 4: Custom event target with event type infer * * @see https://vueuse.org/useEventListener * @param target * @param event * @param listener * @param options */ declare function useEventListener(target: InferEventTarget, event: Arrayable, listener: Arrayable>, options?: MaybeComputedRef): Fn; /** * Register using addEventListener on mounted, and removeEventListener automatically on unmounted. * * Overload 5: Custom event target fallback * * @see https://vueuse.org/useEventListener * @param target * @param event * @param listener * @param options */ declare function useEventListener(target: MaybeComputedRef, event: Arrayable, listener: Arrayable>, options?: MaybeComputedRef): Fn; type UseEventSourceOptions = EventSourceInit; /** * Reactive wrapper for EventSource. * * @see https://vueuse.org/useEventSource * @see https://developer.mozilla.org/en-US/docs/Web/API/EventSource/EventSource EventSource * @param url * @param events * @param options */ declare function useEventSource(url: string, events?: Array, options?: UseEventSourceOptions): { eventSource: Ref; event: Ref; data: Ref; status: Ref<"OPEN" | "CONNECTING" | "CLOSED">; error: Ref; close: () => void; }; type UseEventSourceReturn = ReturnType; interface EyeDropperOpenOptions { /** * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal */ signal?: AbortSignal; } interface EyeDropper { new (): EyeDropper; open: (options?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string; }>; [Symbol.toStringTag]: 'EyeDropper'; } interface UseEyeDropperOptions { /** * Initial sRGBHex. * * @default '' */ initialValue?: string; } /** * Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) * * @see https://vueuse.org/useEyeDropper * @param initialValue string */ declare function useEyeDropper(options?: UseEyeDropperOptions): { isSupported: vue_demi.Ref; sRGBHex: vue_demi.Ref; open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string; } | undefined>; }; type UseEyeDropperReturn = ReturnType; interface UseFaviconOptions extends ConfigurableDocument { baseUrl?: string; rel?: string; } /** * Reactive favicon. * * @see https://vueuse.org/useFavicon * @param newIcon * @param options */ declare function useFavicon(newIcon: MaybeReadonlyRef, options?: UseFaviconOptions): ComputedRef; declare function useFavicon(newIcon?: MaybeRef, options?: UseFaviconOptions): Ref; type UseFaviconReturn = ReturnType; interface UseFetchReturn { /** * Indicates if the fetch request has finished */ isFinished: Ref; /** * The statusCode of the HTTP fetch response */ statusCode: Ref; /** * The raw response of the fetch response */ response: Ref; /** * Any fetch errors that may have occurred */ error: Ref; /** * The fetch response body, may either be JSON or text */ data: Ref; /** * Indicates if the request is currently being fetched. */ isFetching: Ref; /** * Indicates if the fetch request is able to be aborted */ canAbort: ComputedRef; /** * Indicates if the fetch request was aborted */ aborted: Ref; /** * Abort the fetch request */ abort: Fn; /** * Manually call the fetch * (default not throwing error) */ execute: (throwOnFailed?: boolean) => Promise; /** * Fires after the fetch request has finished */ onFetchResponse: EventHookOn; /** * Fires after a fetch request error */ onFetchError: EventHookOn; /** * Fires after a fetch has completed */ onFetchFinally: EventHookOn; get(): UseFetchReturn & PromiseLike>; post(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; put(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; delete(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; patch(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; head(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; options(payload?: MaybeComputedRef, type?: string): UseFetchReturn & PromiseLike>; json(): UseFetchReturn & PromiseLike>; text(): UseFetchReturn & PromiseLike>; blob(): UseFetchReturn & PromiseLike>; arrayBuffer(): UseFetchReturn & PromiseLike>; formData(): UseFetchReturn & PromiseLike>; } type Combination = 'overwrite' | 'chain'; interface BeforeFetchContext { /** * The computed url of the current request */ url: string; /** * The request options of the current request */ options: RequestInit; /** * Cancels the current request */ cancel: Fn; } interface AfterFetchContext { response: Response; data: T | null; } interface OnFetchErrorContext { error: E; data: T | null; } interface UseFetchOptions { /** * Fetch function */ fetch?: typeof window.fetch; /** * Will automatically run fetch when `useFetch` is used * * @default true */ immediate?: boolean; /** * Will automatically refetch when: * - the URL is changed if the URL is a ref * - the payload is changed if the payload is a ref * * @default false */ refetch?: MaybeComputedRef; /** * Initial data before the request finished * * @default null */ initialData?: any; /** * Timeout for abort request after number of millisecond * `0` means use browser default * * @default 0 */ timeout?: number; /** * Will run immediately before the fetch request is dispatched */ beforeFetch?: (ctx: BeforeFetchContext) => Promise | void> | Partial | void; /** * Will run immediately after the fetch request is returned. * Runs after any 2xx response */ afterFetch?: (ctx: AfterFetchContext) => Promise> | Partial; /** * Will run immediately after the fetch request is returned. * Runs after any 4xx and 5xx response */ onFetchError?: (ctx: { data: any; response: Response | null; error: any; }) => Promise> | Partial; } interface CreateFetchOptions { /** * The base URL that will be prefixed to all urls unless urls are absolute */ baseUrl?: MaybeComputedRef; /** * Determine the inherit behavior for beforeFetch, afterFetch, onFetchError * @default 'chain' */ combination?: Combination; /** * Default Options for the useFetch function */ options?: UseFetchOptions; /** * Options for the fetch request */ fetchOptions?: RequestInit; } declare function createFetch(config?: CreateFetchOptions): typeof useFetch; declare function useFetch(url: MaybeComputedRef): UseFetchReturn & PromiseLike>; declare function useFetch(url: MaybeComputedRef, useFetchOptions: UseFetchOptions): UseFetchReturn & PromiseLike>; declare function useFetch(url: MaybeComputedRef, options: RequestInit, useFetchOptions?: UseFetchOptions): UseFetchReturn & PromiseLike>; interface UseFileDialogOptions extends ConfigurableDocument { /** * @default true */ multiple?: boolean; /** * @default '*' */ accept?: string; /** * Select the input source for the capture file. * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture) */ capture?: string; } interface UseFileDialogReturn { files: Ref; open: (localOptions?: Partial) => void; reset: () => void; } /** * Open file dialog with ease. * * @see https://vueuse.org/useFileDialog * @param options */ declare function useFileDialog(options?: UseFileDialogOptions): UseFileDialogReturn; /** * window.showOpenFilePicker parameters * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#parameters */ interface FileSystemAccessShowOpenFileOptions { multiple?: boolean; types?: Array<{ description?: string; accept: Record; }>; excludeAcceptAllOption?: boolean; } /** * window.showSaveFilePicker parameters * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showSaveFilePicker#parameters */ interface FileSystemAccessShowSaveFileOptions { suggestedName?: string; types?: Array<{ description?: string; accept: Record; }>; excludeAcceptAllOption?: boolean; } /** * FileHandle * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle */ interface FileSystemFileHandle { getFile: () => Promise; createWritable: () => FileSystemWritableFileStream; } /** * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream */ interface FileSystemWritableFileStream extends WritableStream { /** * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write */ write: FileSystemWritableFileStreamWrite; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/seek */ seek: (position: number) => Promise; /** * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/truncate */ truncate: (size: number) => Promise; } /** * FileStream.write * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write */ interface FileSystemWritableFileStreamWrite { (data: string | BufferSource | Blob): Promise; (options: { type: 'write'; position: number; data: string | BufferSource | Blob; }): Promise; (options: { type: 'seek'; position: number; }): Promise; (options: { type: 'truncate'; size: number; }): Promise; } /** * FileStream.write * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write */ type FileSystemAccessWindow = Window & { showSaveFilePicker: (options: FileSystemAccessShowSaveFileOptions) => Promise; showOpenFilePicker: (options: FileSystemAccessShowOpenFileOptions) => Promise; }; type UseFileSystemAccessCommonOptions = Pick; type UseFileSystemAccessShowSaveFileOptions = Pick; type UseFileSystemAccessOptions = ConfigurableWindow & UseFileSystemAccessCommonOptions & { /** * file data type */ dataType?: MaybeComputedRef<'Text' | 'ArrayBuffer' | 'Blob'>; }; /** * Create and read and write local files. * @see https://vueuse.org/useFileSystemAccess * @param options */ declare function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'Text'; }): UseFileSystemAccessReturn; declare function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'ArrayBuffer'; }): UseFileSystemAccessReturn; declare function useFileSystemAccess(options: UseFileSystemAccessOptions & { dataType: 'Blob'; }): UseFileSystemAccessReturn; declare function useFileSystemAccess(options: UseFileSystemAccessOptions): UseFileSystemAccessReturn; interface UseFileSystemAccessReturn { isSupported: Ref; data: Ref; file: Ref; fileName: Ref; fileMIME: Ref; fileSize: Ref; fileLastModified: Ref; open: (_options?: UseFileSystemAccessCommonOptions) => Awaitable; create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable; save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable; saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable; updateData: () => Awaitable; } interface UseFocusOptions extends ConfigurableWindow { /** * Initial value. If set true, then focus will be set on the target * * @default false */ initialValue?: boolean; } interface UseFocusReturn { /** * If read as true, then the element has focus. If read as false, then the element does not have focus * If set to true, then the element will be focused. If set to false, the element will be blurred. */ focused: Ref; } /** * Track or set the focus state of a DOM element. * * @see https://vueuse.org/useFocus * @param target The target element for the focus and blur events. * @param options */ declare function useFocus(target: MaybeElementRef, options?: UseFocusOptions): UseFocusReturn; interface UseFocusWithinReturn { /** * True if the element or any of its descendants are focused */ focused: ComputedRef; } /** * Track if focus is contained within the target element * * @see https://vueuse.org/useFocusWithin * @param target The target element to track * @param options Focus within options */ declare function useFocusWithin(target: MaybeElementRef, options?: ConfigurableWindow): UseFocusWithinReturn; interface UseFpsOptions { /** * Calculate the FPS on every x frames. * @default 10 */ every?: number; } declare function useFps(options?: UseFpsOptions): Ref; interface UseFullscreenOptions extends ConfigurableDocument { /** * Automatically exit fullscreen when component is unmounted * * @default false */ autoExit?: boolean; } /** * Reactive Fullscreen API. * * @see https://vueuse.org/useFullscreen * @param target * @param options */ declare function useFullscreen(target?: MaybeElementRef, options?: UseFullscreenOptions): { isSupported: vue_demi.Ref; isFullscreen: vue_demi.Ref; enter: () => Promise; exit: () => Promise; toggle: () => Promise; }; type UseFullscreenReturn = ReturnType; interface UseGamepadOptions extends ConfigurableWindow, ConfigurableNavigator { } /** * Maps a standard standard gamepad to an Xbox 360 Controller. */ declare function mapGamepadToXbox360Controller(gamepad: Ref): vue_demi.ComputedRef<{ buttons: { a: GamepadButton; b: GamepadButton; x: GamepadButton; y: GamepadButton; }; bumper: { left: GamepadButton; right: GamepadButton; }; triggers: { left: GamepadButton; right: GamepadButton; }; stick: { left: { horizontal: number; vertical: number; button: GamepadButton; }; right: { horizontal: number; vertical: number; button: GamepadButton; }; }; dpad: { up: GamepadButton; down: GamepadButton; left: GamepadButton; right: GamepadButton; }; back: GamepadButton; start: GamepadButton; } | null>; declare function useGamepad(options?: UseGamepadOptions): { isSupported: Ref; onConnected: _vueuse_shared.EventHookOn; onDisconnected: _vueuse_shared.EventHookOn; gamepads: Ref<{ readonly axes: readonly number[]; readonly buttons: readonly { readonly pressed: boolean; readonly touched: boolean; readonly value: number; }[]; readonly connected: boolean; readonly hapticActuators: readonly { readonly type: "vibration"; }[]; readonly id: string; readonly index: number; readonly mapping: GamepadMappingType; readonly timestamp: number; }[]>; pause: _vueuse_shared.Fn; resume: _vueuse_shared.Fn; isActive: Readonly>; }; type UseGamepadReturn = ReturnType; interface UseGeolocationOptions extends Partial, ConfigurableNavigator { immediate?: boolean; } /** * Reactive Geolocation API. * * @see https://vueuse.org/useGeolocation * @param options */ declare function useGeolocation(options?: UseGeolocationOptions): { isSupported: Ref; coords: Ref; locatedAt: Ref; error: Ref<{ readonly code: number; readonly message: string; readonly PERMISSION_DENIED: number; readonly POSITION_UNAVAILABLE: number; readonly TIMEOUT: number; } | null>; resume: () => void; pause: () => void; }; type UseGeolocationReturn = ReturnType; interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFilter { /** * Event names that listen to for detected user activity * * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'] */ events?: WindowEventName[]; /** * Listen for document visibility change * * @default true */ listenForVisibilityChange?: boolean; /** * Initial state of the ref idle * * @default false */ initialState?: boolean; } interface UseIdleReturn { idle: Ref; lastActive: Ref; } /** * Tracks whether the user is being inactive. * * @see https://vueuse.org/useIdle * @param timeout default to 1 minute * @param options IdleOptions */ declare function useIdle(timeout?: number, options?: UseIdleOptions): UseIdleReturn; 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; } /** * Reactive load an image in the browser, you can wait the result to display it or show a fallback. * * @see https://vueuse.org/useImage * @param options Image attributes, as used in the tag * @param asyncStateOptions */ declare const useImage: (options: MaybeComputedRef, asyncStateOptions?: UseAsyncStateOptions) => UseAsyncStateReturn; type UseImageReturn = ReturnType; 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; /** * 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?: MaybeComputedRef; } /** * Reactive scroll. * * @see https://vueuse.org/useScroll * @param element * @param options */ declare function useScroll(element: MaybeComputedRef, options?: UseScrollOptions): { x: vue_demi.WritableComputedRef; y: vue_demi.WritableComputedRef; isScrolling: vue_demi.Ref; arrivedState: { left: boolean; right: boolean; top: boolean; bottom: boolean; }; directions: { left: boolean; right: boolean; top: boolean; bottom: boolean; }; }; type UseScrollReturn = ReturnType; interface UseInfiniteScrollOptions 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'; /** * Whether to preserve the current scroll position when loading more items. * * @default false */ preserveScrollPosition?: boolean; } /** * Reactive infinite scroll. * * @see https://vueuse.org/useInfiniteScroll */ declare function useInfiniteScroll(element: MaybeComputedRef, onLoadMore: (state: UnwrapNestedRefs>) => void | Promise, options?: UseInfiniteScrollOptions): void; interface UseIntersectionObserverOptions 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[]; } /** * Detects that a target element's visibility. * * @see https://vueuse.org/useIntersectionObserver * @param target * @param callback * @param options */ declare function useIntersectionObserver(target: MaybeElementRef, callback: IntersectionObserverCallback, options?: UseIntersectionObserverOptions): { isSupported: vue_demi.Ref; stop: () => void; }; type UseIntersectionObserverReturn = ReturnType; type KeyModifier = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Symbol' | 'SymbolLock'; interface UseModifierOptions extends ConfigurableDocument { /** * Event names that will prompt update to modifier states * * @default ['mousedown', 'mouseup', 'keydown', 'keyup'] */ events?: WindowEventName[]; /** * Initial value of the returned ref * * @default null */ initial?: Initial; } type UseKeyModifierReturn = Ref; declare function useKeyModifier(modifier: KeyModifier, options?: UseModifierOptions): UseKeyModifierReturn; declare function useLocalStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useLocalStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useLocalStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useLocalStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useLocalStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare const DefaultMagicKeysAliasMap: Readonly>; interface UseMagicKeysOptions { /** * Returns a reactive object instead of an object of refs * * @default false */ reactive?: Reactive; /** * Target for listening events * * @default window */ target?: MaybeComputedRef; /** * Alias map for keys, all the keys should be lowercase * { target: keycode } * * @example { ctrl: "control" } * @default */ aliasMap?: Record; /** * Register passive listener * * @default true */ passive?: boolean; /** * Custom event handler for keydown/keyup event. * Useful when you want to apply custom logic. * * When using `e.preventDefault()`, you will need to pass `passive: false` to useMagicKeys(). */ onEventFired?: (e: KeyboardEvent) => void | boolean; } interface MagicKeysInternal { /** * A Set of currently pressed keys, * Stores raw keyCodes. * * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key */ current: Set; } type UseMagicKeysReturn = Readonly : Record>, keyof MagicKeysInternal> & MagicKeysInternal>; /** * Reactive keys pressed state, with magical keys combination support. * * @see https://vueuse.org/useMagicKeys */ declare function useMagicKeys(options?: UseMagicKeysOptions): UseMagicKeysReturn; declare function useMagicKeys(options: UseMagicKeysOptions): UseMagicKeysReturn; /** * Many of the jsdoc definitions here are modified version of the * documentation from MDN(https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) */ interface UseMediaSource { /** * The source url for the media */ src: string; /** * The media codec type */ type?: string; } interface UseMediaTextTrackSource { /** * Indicates that the track should be enabled unless the user's preferences indicate * that another track is more appropriate */ default?: boolean; /** * How the text track is meant to be used. If omitted the default kind is subtitles. */ kind: TextTrackKind; /** * A user-readable title of the text track which is used by the browser * when listing available text tracks. */ label: string; /** * Address of the track (.vtt file). Must be a valid URL. This attribute * must be specified and its URL value must have the same origin as the document */ src: string; /** * Language of the track text data. It must be a valid BCP 47 language tag. * If the kind attribute is set to subtitles, then srclang must be defined. */ srcLang: string; } interface UseMediaControlsOptions extends ConfigurableDocument { /** * The source for the media, may either be a string, a `UseMediaSource` object, or a list * of `UseMediaSource` objects. */ src?: MaybeComputedRef; /** * A list of text tracks for the media */ tracks?: MaybeComputedRef; } interface UseMediaTextTrack { /** * The index of the text track */ id: number; /** * The text track label */ label: string; /** * Language of the track text data. It must be a valid BCP 47 language tag. * If the kind attribute is set to subtitles, then srclang must be defined. */ language: string; /** * Specifies the display mode of the text track, either `disabled`, * `hidden`, or `showing` */ mode: TextTrackMode; /** * How the text track is meant to be used. If omitted the default kind is subtitles. */ kind: TextTrackKind; /** * Indicates the track's in-band metadata track dispatch type. */ inBandMetadataTrackDispatchType: string; /** * A list of text track cues */ cues: TextTrackCueList | null; /** * A list of active text track cues */ activeCues: TextTrackCueList | null; } declare function useMediaControls(target: MaybeRef, options?: UseMediaControlsOptions): { currentTime: vue_demi.Ref; duration: vue_demi.Ref; waiting: vue_demi.Ref; seeking: vue_demi.Ref; ended: vue_demi.Ref; stalled: vue_demi.Ref; buffered: vue_demi.Ref<[number, number][]>; playing: vue_demi.Ref; rate: vue_demi.Ref; volume: vue_demi.Ref; muted: vue_demi.Ref; tracks: vue_demi.Ref<{ id: number; label: string; language: string; mode: TextTrackMode; kind: TextTrackKind; inBandMetadataTrackDispatchType: string; cues: { [x: number]: { endTime: number; id: string; onenter: ((this: TextTrackCue, ev: Event) => any) | null; onexit: ((this: TextTrackCue, ev: Event) => any) | null; pauseOnExit: boolean; startTime: number; readonly track: { readonly activeCues: any | null; readonly cues: any | null; readonly id: string; readonly inBandMetadataTrackDispatchType: string; readonly kind: TextTrackKind; readonly label: string; readonly language: string; mode: TextTrackMode; oncuechange: ((this: TextTrack, ev: Event) => any) | null; addCue: (cue: TextTrackCue) => void; removeCue: (cue: TextTrackCue) => void; addEventListener: { (type: K, listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; }; removeEventListener: { (type: K_1, listener: (this: TextTrack, ev: TextTrackEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; }; dispatchEvent: (event: Event) => boolean; } | null; addEventListener: { (type: K_2, listener: (this: TextTrackCue, ev: TextTrackCueEventMap[K_2]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; }; removeEventListener: { (type: K_3, listener: (this: TextTrackCue, ev: TextTrackCueEventMap[K_3]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; }; dispatchEvent: (event: Event) => boolean; }; readonly length: number; getCueById: (id: string) => TextTrackCue | null; [Symbol.iterator]: () => IterableIterator; } | null; activeCues: { [x: number]: { endTime: number; id: string; onenter: ((this: TextTrackCue, ev: Event) => any) | null; onexit: ((this: TextTrackCue, ev: Event) => any) | null; pauseOnExit: boolean; startTime: number; readonly track: { readonly activeCues: any | null; readonly cues: any | null; readonly id: string; readonly inBandMetadataTrackDispatchType: string; readonly kind: TextTrackKind; readonly label: string; readonly language: string; mode: TextTrackMode; oncuechange: ((this: TextTrack, ev: Event) => any) | null; addCue: (cue: TextTrackCue) => void; removeCue: (cue: TextTrackCue) => void; addEventListener: { (type: K, listener: (this: TextTrack, ev: TextTrackEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; }; removeEventListener: { (type: K_1, listener: (this: TextTrack, ev: TextTrackEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; }; dispatchEvent: (event: Event) => boolean; } | null; addEventListener: { (type: K_2, listener: (this: TextTrackCue, ev: TextTrackCueEventMap[K_2]) => any, options?: boolean | AddEventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void; }; removeEventListener: { (type: K_3, listener: (this: TextTrackCue, ev: TextTrackCueEventMap[K_3]) => any, options?: boolean | EventListenerOptions | undefined): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void; }; dispatchEvent: (event: Event) => boolean; }; readonly length: number; getCueById: (id: string) => TextTrackCue | null; [Symbol.iterator]: () => IterableIterator; } | null; }[]>; selectedTrack: vue_demi.Ref; enableTrack: (track: number | UseMediaTextTrack, disableTracks?: boolean) => void; disableTrack: (track?: number | UseMediaTextTrack) => void; supportsPictureInPicture: boolean | undefined; togglePictureInPicture: () => Promise; isPictureInPicture: vue_demi.Ref; onSourceError: _vueuse_shared.EventHookOn; }; type UseMediaControlsReturn = ReturnType; /** * Reactive Media Query. * * @see https://vueuse.org/useMediaQuery * @param query * @param options */ declare function useMediaQuery(query: MaybeComputedRef, options?: ConfigurableWindow): vue_demi.Ref; type CacheKey = any; /** * Custom memoize cache handler */ interface UseMemoizeCache { /** * Get value for key */ get(key: Key): Value | undefined; /** * Set value for key */ set(key: Key, value: Value): void; /** * Return flag if key exists */ has(key: Key): boolean; /** * Delete value for key */ delete(key: Key): void; /** * Clear cache */ clear(): void; } /** * Memoized function */ interface UseMemoizeReturn { /** * Get result from cache or call memoized function */ (...args: Args): Result; /** * Call memoized function and update cache */ load(...args: Args): Result; /** * Delete cache of given arguments */ delete(...args: Args): void; /** * Clear cache */ clear(): void; /** * Generate cache key for given arguments */ generateKey(...args: Args): CacheKey; /** * Cache container */ cache: UseMemoizeCache; } interface UseMemoizeOptions { getKey?: (...args: Args) => string | number; cache?: UseMemoizeCache; } /** * Reactive function result cache based on arguments */ declare function useMemoize(resolver: (...args: Args) => Result, options?: UseMemoizeOptions): UseMemoizeReturn; /** * Performance.memory * * @see https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory */ interface MemoryInfo { /** * The maximum size of the heap, in bytes, that is available to the context. */ readonly jsHeapSizeLimit: number; /** * The total allocated heap size, in bytes. */ readonly totalJSHeapSize: number; /** * The currently active segment of JS heap, in bytes. */ readonly usedJSHeapSize: number; [Symbol.toStringTag]: 'MemoryInfo'; } interface UseMemoryOptions extends UseIntervalFnOptions { interval?: number; } /** * Reactive Memory Info. * * @see https://vueuse.org/useMemory * @param options */ declare function useMemory(options?: UseMemoryOptions): { isSupported: vue_demi.Ref; memory: vue_demi.Ref; }; type UseMemoryReturn = ReturnType; /** * Mounted state in ref. * * @see https://vueuse.org/useMounted * @param options */ declare function useMounted(): vue_demi.Ref; interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter { /** * Mouse position based by page, client, or relative to previous position * * @default 'page' */ type?: 'page' | 'client' | 'movement'; /** * Listen to `touchmove` events * * @default true */ touch?: boolean; /** * Reset to initial value when `touchend` event fired * * @default false */ resetOnTouchEnds?: boolean; /** * Initial values */ initialValue?: Position; } type MouseSourceType = 'mouse' | 'touch' | null; /** * Reactive mouse position. * * @see https://vueuse.org/useMouse * @param options */ declare function useMouse(options?: UseMouseOptions): { x: vue_demi.Ref; y: vue_demi.Ref; sourceType: vue_demi.Ref; }; type UseMouseReturn = ReturnType; interface MouseInElementOptions extends UseMouseOptions { handleOutside?: 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_demi.Ref; y: vue_demi.Ref; sourceType: vue_demi.Ref; elementX: vue_demi.Ref; elementY: vue_demi.Ref; elementPositionX: vue_demi.Ref; elementPositionY: vue_demi.Ref; elementHeight: vue_demi.Ref; elementWidth: vue_demi.Ref; isOutside: vue_demi.Ref; stop: () => void; }; type UseMouseInElementReturn = ReturnType; interface MousePressedOptions extends ConfigurableWindow { /** * Listen to `touchstart` `touchend` events * * @default true */ touch?: boolean; /** * Listen to `dragstart` `drop` and `dragend` events * * @default true */ drag?: boolean; /** * Initial values * * @default false */ initialValue?: boolean; /** * Element target to be capture the click */ target?: MaybeElementRef; } /** * Reactive mouse position. * * @see https://vueuse.org/useMousePressed * @param options */ declare function useMousePressed(options?: MousePressedOptions): { pressed: vue_demi.Ref; sourceType: vue_demi.Ref; }; type UseMousePressedReturn = ReturnType; interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow { } /** * Watch for changes being made to the DOM tree. * * @see https://vueuse.org/useMutationObserver * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN * @param target * @param callback * @param options */ declare function useMutationObserver(target: MaybeElementRef, callback: MutationCallback, options?: UseMutationObserverOptions): { isSupported: vue_demi.Ref; stop: () => void; }; type UseMutationObserverReturn = ReturnType; interface NavigatorLanguageState { isSupported: Ref; /** * * ISO 639-1 standard Language Code * * @info The detected user agent language preference as a language tag * (which is sometimes referred to as a "locale identifier"). * This consists of a 2-3 letter base language tag that indicates a * language, optionally followed by additional subtags separated by * '-'. The most common extra information is the country or region * variant (like 'en-US' or 'fr-CA'). * * * @see https://www.iso.org/iso-639-language-codes.html * @see https://www.loc.gov/standards/iso639-2/php/code_list.php * */ language: Ref; } /** * * Reactive useNavigatorLanguage * * Detects the currently selected user language and returns a reactive language * @see https://vueuse.org/useNavigatorLanguage * */ declare const useNavigatorLanguage: (options?: ConfigurableWindow) => Readonly; type UseNavigatorLanguageReturn = ReturnType; type NetworkType = 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown'; type NetworkEffectiveType = 'slow-2g' | '2g' | '3g' | '4g' | undefined; interface NetworkState { isSupported: Ref; /** * If the user is currently connected. */ isOnline: Ref; /** * The time since the user was last connected. */ offlineAt: Ref; /** * At this time, if the user is offline and reconnects */ onlineAt: Ref; /** * The download speed in Mbps. */ downlink: Ref; /** * The max reachable download speed in Mbps. */ downlinkMax: Ref; /** * The detected effective speed type. */ effectiveType: Ref; /** * The estimated effective round-trip time of the current connection. */ rtt: Ref; /** * If the user activated data saver mode. */ saveData: Ref; /** * The detected connection/network type. */ type: Ref; } /** * Reactive Network status. * * @see https://vueuse.org/useNetwork * @param options */ declare function useNetwork(options?: ConfigurableWindow): Readonly; type UseNetworkReturn = ReturnType; interface UseNowOptions { /** * Expose more controls * * @default false */ controls?: Controls; /** * Update interval, or use requestAnimationFrame * * @default requestAnimationFrame */ interval?: 'requestAnimationFrame' | number; } /** * Reactive current Date instance. * * @see https://vueuse.org/useNow * @param options */ declare function useNow(options?: UseNowOptions): Ref; declare function useNow(options: UseNowOptions): { now: Ref; } & Pausable; type UseNowReturn = ReturnType; /** * Reactive URL representing an object. * * @see https://vueuse.org/useObjectUrl * @param object */ declare function useObjectUrl(object: MaybeRef): Readonly>; interface UseOffsetPaginationOptions { /** * Total number of items. */ total?: MaybeRef; /** * The number of items to display per page. * @default 10 */ pageSize?: MaybeRef; /** * The current page number. * @default 1 */ page?: MaybeRef; /** * Callback when the `page` change. */ onPageChange?: (returnValue: UnwrapNestedRefs) => unknown; /** * Callback when the `pageSize` change. */ onPageSizeChange?: (returnValue: UnwrapNestedRefs) => unknown; /** * Callback when the `pageCount` change. */ onPageCountChange?: (returnValue: UnwrapNestedRefs) => unknown; } interface UseOffsetPaginationReturn { currentPage: Ref; currentPageSize: Ref; pageCount: ComputedRef; isFirstPage: ComputedRef; isLastPage: ComputedRef; prev: () => void; next: () => void; } type UseOffsetPaginationInfinityPageReturn = Omit; declare function useOffsetPagination(options: Omit): UseOffsetPaginationInfinityPageReturn; declare function useOffsetPagination(options: UseOffsetPaginationOptions): UseOffsetPaginationReturn; /** * Reactive online state. * * @see https://vueuse.org/useOnline * @param options */ declare function useOnline(options?: ConfigurableWindow): vue.Ref; /** * Reactive state to show whether mouse leaves the page. * * @see https://vueuse.org/usePageLeave * @param options */ declare function usePageLeave(options?: ConfigurableWindow): vue_demi.Ref; interface UseParallaxOptions extends ConfigurableWindow { deviceOrientationTiltAdjust?: (i: number) => number; deviceOrientationRollAdjust?: (i: number) => number; mouseTiltAdjust?: (i: number) => number; mouseRollAdjust?: (i: number) => number; } interface UseParallaxReturn { /** * Roll value. Scaled to `-0.5 ~ 0.5` */ roll: ComputedRef; /** * Tilt value. Scaled to `-0.5 ~ 0.5` */ tilt: ComputedRef; /** * Sensor source, can be `mouse` or `deviceOrientation` */ source: ComputedRef<'deviceOrientation' | 'mouse'>; } /** * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse` * if orientation is not supported. * * @param target * @param options */ declare function useParallax(target: MaybeElementRef, options?: UseParallaxOptions): UseParallaxReturn; type DescriptorNamePolyfill = 'accelerometer' | 'accessibility-events' | 'ambient-light-sensor' | 'background-sync' | 'camera' | 'clipboard-read' | 'clipboard-write' | 'gyroscope' | 'magnetometer' | 'microphone' | 'notifications' | 'payment-handler' | 'persistent-storage' | 'push' | 'speaker'; type GeneralPermissionDescriptor = PermissionDescriptor | { name: DescriptorNamePolyfill; }; interface UsePermissionOptions extends ConfigurableNavigator { /** * Expose more controls * * @default false */ controls?: Controls; } type UsePermissionReturn = Readonly>; interface UsePermissionReturnWithControls { state: UsePermissionReturn; isSupported: Ref; query: () => Promise; } /** * Reactive Permissions API. * * @see https://vueuse.org/usePermission */ declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'], options?: UsePermissionOptions): UsePermissionReturn; declare function usePermission(permissionDesc: GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'], options: UsePermissionOptions): UsePermissionReturnWithControls; interface UsePointerState extends Position { pressure: number; pointerId: number; tiltX: number; tiltY: number; width: number; height: number; twist: number; pointerType: PointerType | null; } interface UsePointerOptions extends ConfigurableWindow { /** * Pointer types that listen to. * * @default ['mouse', 'touch', 'pen'] */ pointerTypes?: PointerType[]; /** * Initial values */ initialValue?: MaybeRef>; /** * @default window */ target?: MaybeRef | Document | Window; } /** * Reactive pointer state. * * @see https://vueuse.org/usePointer * @param options */ declare function usePointer(options?: UsePointerOptions): { isInside: Ref; pressure: Ref; pointerId: Ref; tiltX: Ref; tiltY: Ref; width: Ref; height: Ref; twist: Ref; pointerType: Ref; x: Ref; y: Ref; }; type UsePointerReturn = ReturnType; declare global { interface PointerLockOptions { unadjustedMovement?: boolean; } interface Element { requestPointerLock(options?: PointerLockOptions): Promise | void; } } type MaybeHTMLElement = HTMLElement | undefined | null; interface UsePointerLockOptions extends ConfigurableDocument { pointerLockOptions?: PointerLockOptions; } /** * Reactive pointer lock. * * @see https://vueuse.org/usePointerLock * @param target * @param options */ declare function usePointerLock(target?: MaybeElementRef, options?: UsePointerLockOptions): { isSupported: vue_demi.Ref; element: vue_demi.Ref; triggerElement: vue_demi.Ref; lock: (e: MaybeElementRef | Event, options?: PointerLockOptions) => Promise; unlock: () => Promise; }; type UsePointerLockReturn = ReturnType; declare enum SwipeDirection { UP = "UP", RIGHT = "RIGHT", DOWN = "DOWN", LEFT = "LEFT", NONE = "NONE" } interface UseSwipeOptions extends ConfigurableWindow { /** * Register events as passive * * @default true */ passive?: boolean; /** * @default 50 */ threshold?: number; /** * Callback on swipe start */ onSwipeStart?: (e: TouchEvent) => void; /** * Callback on swipe moves */ onSwipe?: (e: TouchEvent) => void; /** * Callback on swipe ends */ onSwipeEnd?: (e: TouchEvent, direction: SwipeDirection) => void; } interface UseSwipeReturn { isPassiveEventSupported: boolean; isSwiping: Ref; direction: ComputedRef; coordsStart: Readonly; coordsEnd: Readonly; lengthX: ComputedRef; lengthY: ComputedRef; stop: () => void; } /** * Reactive swipe detection. * * @see https://vueuse.org/useSwipe * @param target * @param options */ declare function useSwipe(target: MaybeComputedRef, options?: UseSwipeOptions): UseSwipeReturn; interface UsePointerSwipeOptions { /** * @default 50 */ threshold?: number; /** * Callback on swipe start. */ onSwipeStart?: (e: PointerEvent) => void; /** * Callback on swipe move. */ onSwipe?: (e: PointerEvent) => void; /** * Callback on swipe end. */ onSwipeEnd?: (e: PointerEvent, direction: SwipeDirection) => void; /** * Pointer types to listen to. * * @default ['mouse', 'touch', 'pen'] */ pointerTypes?: PointerType[]; } interface UsePointerSwipeReturn { readonly isSwiping: Ref; direction: Readonly>; readonly posStart: Position; readonly posEnd: Position; distanceX: Readonly>; distanceY: Readonly>; stop: () => void; } /** * Reactive swipe detection based on PointerEvents. * * @see https://vueuse.org/usePointerSwipe * @param target * @param options */ declare function usePointerSwipe(target: MaybeComputedRef, options?: UsePointerSwipeOptions): UsePointerSwipeReturn; type ColorSchemeType = 'dark' | 'light' | 'no-preference'; /** * Reactive prefers-color-scheme media query. * * @see https://vueuse.org/usePreferredColorScheme * @param [options] */ declare function usePreferredColorScheme(options?: ConfigurableWindow): vue_demi.ComputedRef; type ContrastType = 'more' | 'less' | 'custom' | 'no-preference'; /** * Reactive prefers-contrast media query. * * @see https://vueuse.org/usePreferredContrast * @param [options] */ declare function usePreferredContrast(options?: ConfigurableWindow): vue_demi.ComputedRef; /** * Reactive dark theme preference. * * @see https://vueuse.org/usePreferredDark * @param [options] */ declare function usePreferredDark(options?: ConfigurableWindow): vue.Ref; /** * Reactive Navigator Languages. * * @see https://vueuse.org/usePreferredLanguages * @param options */ declare function usePreferredLanguages(options?: ConfigurableWindow): Ref; type ReducedMotionType = 'reduce' | 'no-preference'; /** * Reactive prefers-reduced-motion media query. * * @see https://vueuse.org/usePreferredReducedMotion * @param [options] */ declare function usePreferredReducedMotion(options?: ConfigurableWindow): vue_demi.ComputedRef; /** * Holds the previous value of a ref. * * @see {@link https://vueuse.org/usePrevious} */ declare function usePrevious(value: MaybeComputedRef): Readonly>; declare function usePrevious(value: MaybeComputedRef, initialValue: T): Readonly>; interface UseRafFnCallbackArguments { /** * Time elapsed between this and the last frame. */ delta: number; /** * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}. */ timestamp: DOMHighResTimeStamp; } interface UseRafFnOptions extends ConfigurableWindow { /** * Start the requestAnimationFrame loop immediately on creation * * @default true */ immediate?: boolean; } /** * Call function on every `requestAnimationFrame`. With controls of pausing and resuming. * * @see https://vueuse.org/useRafFn * @param fn * @param options */ declare function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options?: UseRafFnOptions): Pausable; /** * Reactive screen orientation * * @see https://vueuse.org/useScreenOrientation */ declare const useScreenOrientation: (options?: ConfigurableWindow) => { isSupported: vue_demi.Ref; orientation: vue_demi.Ref; angle: vue_demi.Ref; lockOrientation: (type: OrientationLockType) => Promise; unlockOrientation: () => void; }; type UseScreenOrientationReturn = ReturnType; /** * Reactive `env(safe-area-inset-*)` * * @see https://vueuse.org/useScreenSafeArea */ declare function useScreenSafeArea(): { top: vue_demi.Ref; right: vue_demi.Ref; bottom: vue_demi.Ref; left: vue_demi.Ref; update: () => void; }; interface UseScriptTagOptions extends ConfigurableDocument { /** * Load the script immediately * * @default true */ immediate?: boolean; /** * Add `async` attribute to the script tag * * @default true */ async?: boolean; /** * Script type * * @default 'text/javascript' */ type?: string; /** * Manual controls the timing of loading and unloading * * @default false */ manual?: boolean; crossOrigin?: 'anonymous' | 'use-credentials'; referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'; noModule?: boolean; defer?: boolean; /** * Add custom attribute to the script tag * */ attrs?: Record; } /** * Async script tag loading. * * @see https://vueuse.org/useScriptTag * @param src * @param onLoaded * @param options */ declare function useScriptTag(src: MaybeComputedRef, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): { scriptTag: vue_demi.Ref; load: (waitForScriptLoad?: boolean) => Promise; unload: () => void; }; type UseScriptTagReturn = ReturnType; /** * Lock scrolling of the element. * * @see https://vueuse.org/useScrollLock * @param element */ declare function useScrollLock(element: MaybeComputedRef, initialState?: boolean): vue_demi.WritableComputedRef; declare function useSessionStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useSessionStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useSessionStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useSessionStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; declare function useSessionStorage(key: string, initialValue: MaybeComputedRef, options?: UseStorageOptions): RemovableRef; interface UseShareOptions { title?: string; files?: File[]; text?: string; url?: string; } /** * Reactive Web Share API. * * @see https://vueuse.org/useShare * @param shareOptions * @param options */ declare function useShare(shareOptions?: MaybeComputedRef, options?: ConfigurableNavigator): { isSupported: vue.Ref; share: (overrideOptions?: MaybeComputedRef) => Promise; }; type UseShareReturn = ReturnType; type UseSortedCompareFn = (a: T, b: T) => number; type UseSortedFn = (arr: T[], compareFn: UseSortedCompareFn) => T[]; interface UseSortedOptions { /** * sort algorithm */ sortFn?: UseSortedFn; /** * compare function */ compareFn?: UseSortedCompareFn; /** * change the value of the source array * @default false */ dirty?: boolean; } declare function useSorted(source: MaybeRef, compareFn?: UseSortedCompareFn): Ref; declare function useSorted(source: MaybeRef, options?: UseSortedOptions): Ref; declare function useSorted(source: MaybeRef, compareFn?: UseSortedCompareFn, options?: Omit, 'compareFn'>): Ref; type SpeechRecognitionErrorCode = 'aborted' | 'audio-capture' | 'bad-grammar' | 'language-not-supported' | 'network' | 'no-speech' | 'not-allowed' | 'service-not-allowed'; interface SpeechGrammar { src: string; weight: number; } interface SpeechGrammarList { readonly length: number; addFromString(string: string, weight?: number): void; addFromURI(src: string, weight?: number): void; item(index: number): SpeechGrammar; [index: number]: SpeechGrammar; } interface SpeechRecognitionErrorEvent extends Event { readonly error: SpeechRecognitionErrorCode; readonly message: string; } interface SpeechRecognitionEvent extends Event { readonly resultIndex: number; readonly results: SpeechRecognitionResultList; } interface SpeechRecognitionEventMap { 'audioend': Event; 'audiostart': Event; 'end': Event; 'error': SpeechRecognitionErrorEvent; 'nomatch': SpeechRecognitionEvent; 'result': SpeechRecognitionEvent; 'soundend': Event; 'soundstart': Event; 'speechend': Event; 'speechstart': Event; 'start': Event; } interface SpeechRecognition extends EventTarget { continuous: boolean; grammars: SpeechGrammarList; interimResults: boolean; lang: string; maxAlternatives: number; onaudioend: ((this: SpeechRecognition, ev: Event) => any) | null; onaudiostart: ((this: SpeechRecognition, ev: Event) => any) | null; onend: ((this: SpeechRecognition, ev: Event) => any) | null; onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => any) | null; onnomatch: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null; onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => any) | null; onsoundend: ((this: SpeechRecognition, ev: Event) => any) | null; onsoundstart: ((this: SpeechRecognition, ev: Event) => any) | null; onspeechend: ((this: SpeechRecognition, ev: Event) => any) | null; onspeechstart: ((this: SpeechRecognition, ev: Event) => any) | null; onstart: ((this: SpeechRecognition, ev: Event) => any) | null; abort(): void; start(): void; stop(): void; addEventListener(type: K, listener: (this: SpeechRecognition, ev: SpeechRecognitionEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: SpeechRecognition, ev: SpeechRecognitionEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } interface UseSpeechRecognitionOptions extends ConfigurableWindow { /** * Controls whether continuous results are returned for each recognition, or only a single result. * * @default true */ continuous?: boolean; /** * Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final * * @default true */ interimResults?: boolean; /** * Language for SpeechRecognition * * @default 'en-US' */ lang?: MaybeComputedRef; } /** * Reactive SpeechRecognition. * * @see https://vueuse.org/useSpeechRecognition * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition * @param options */ declare function useSpeechRecognition(options?: UseSpeechRecognitionOptions): { isSupported: Ref; isListening: Ref; isFinal: Ref; recognition: SpeechRecognition | undefined; result: Ref; error: Ref; toggle: (value?: boolean) => void; start: () => void; stop: () => void; }; type UseSpeechRecognitionReturn = ReturnType; type UseSpeechSynthesisStatus = 'init' | 'play' | 'pause' | 'end'; interface UseSpeechSynthesisOptions extends ConfigurableWindow { /** * Language for SpeechSynthesis * * @default 'en-US' */ lang?: MaybeComputedRef; /** * Gets and sets the pitch at which the utterance will be spoken at. * * @default 1 */ pitch?: SpeechSynthesisUtterance['pitch']; /** * Gets and sets the speed at which the utterance will be spoken at. * * @default 1 */ rate?: SpeechSynthesisUtterance['rate']; /** * Gets and sets the voice that will be used to speak the utterance. */ voice?: MaybeRef; /** * Gets and sets the volume that the utterance will be spoken at. * * @default 1 */ volume?: SpeechSynthesisUtterance['volume']; } /** * Reactive SpeechSynthesis. * * @see https://vueuse.org/useSpeechSynthesis * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis SpeechSynthesis * @param options */ declare function useSpeechSynthesis(text: MaybeComputedRef, options?: UseSpeechSynthesisOptions): { isSupported: Ref; isPlaying: Ref; status: Ref; utterance: vue_demi.ComputedRef; error: Ref; stop: () => void; toggle: (value?: boolean) => void; speak: () => void; }; type UseSpeechSynthesisReturn = ReturnType; interface UseStepperReturn { /** List of steps. */ steps: Readonly>; /** List of step names. */ stepNames: Readonly>; /** Index of the current step. */ index: Ref; /** Current step. */ current: ComputedRef; /** Next step, or undefined if the current step is the last one. */ next: ComputedRef; /** Previous step, or undefined if the current step is the first one. */ previous: ComputedRef; /** Whether the current step is the first one. */ isFirst: ComputedRef; /** Whether the current step is the last one. */ isLast: ComputedRef; /** Get the step at the specified index. */ at: (index: number) => Step | undefined; /** Get a step by the specified name. */ get: (step: StepName) => Step | undefined; /** Go to the specified step. */ goTo: (step: StepName) => void; /** Go to the next step. Does nothing if the current step is the last one. */ goToNext: () => void; /** Go to the previous step. Does nothing if the current step is the previous one. */ goToPrevious: () => void; /** Go back to the given step, only if the current step is after. */ goBackTo: (step: StepName) => void; /** Checks whether the given step is the next step. */ isNext: (step: StepName) => boolean; /** Checks whether the given step is the previous step. */ isPrevious: (step: StepName) => boolean; /** Checks whether the given step is the current step. */ isCurrent: (step: StepName) => boolean; /** Checks if the current step is before the given step. */ isBefore: (step: StepName) => boolean; /** Checks if the current step is after the given step. */ isAfter: (step: StepName) => boolean; } declare function useStepper(steps: MaybeRef, initialStep?: T): UseStepperReturn; declare function useStepper>(steps: MaybeRef, initialStep?: keyof T): UseStepperReturn, T, T[keyof T]>; interface UseStorageAsyncOptions extends Omit, 'serializer'> { /** * Custom data serialization */ serializer?: SerializerAsync; } declare function useStorageAsync(key: string, initialValue: MaybeComputedRef, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions): RemovableRef; declare function useStorageAsync(key: string, initialValue: MaybeComputedRef, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions): RemovableRef; declare function useStorageAsync(key: string, initialValue: MaybeComputedRef, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions): RemovableRef; declare function useStorageAsync(key: string, initialValue: MaybeComputedRef, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions): RemovableRef; declare function useStorageAsync(key: string, initialValue: MaybeComputedRef, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions): RemovableRef; interface UseStyleTagOptions extends ConfigurableDocument { /** * Media query for styles to apply */ media?: string; /** * Load the style immediately * * @default true */ immediate?: boolean; /** * Manual controls the timing of loading and unloading * * @default false */ manual?: boolean; /** * DOM id of the style tag * * @default auto-incremented */ id?: string; } interface UseStyleTagReturn { id: string; css: Ref; load: () => void; unload: () => void; isLoaded: Readonly>; } /** * Inject