feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter

packages/core/onKeyStroke/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import { defaultWindow } from '../_configurable'
@@ -8,14 +8,14 @@ export type KeyFilter = true | string | string[] | KeyPredicate
 export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup'
 export interface OnKeyStrokeOptions {
   eventName?: KeyStrokeEventName
-  target?: MaybeComputedRef<EventTarget | null | undefined>
+  target?: MaybeRefOrGetter<EventTarget | null | undefined>
   passive?: boolean
   /**
    * Set to `true` to ignore repeated events when the key is being held down.
    *
    * @default false
    */
-  dedupe?: MaybeComputedRef<boolean>
+  dedupe?: MaybeRefOrGetter<boolean>
 }
 
 function createKeyPredicate(keyFilter: KeyFilter): KeyPredicate {

packages/core/unrefElement/index.ts

@@ -1,10 +1,10 @@
 import type { ComponentPublicInstance } from 'vue-demi'
-import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
+import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 
 export type VueInstance = ComponentPublicInstance
 export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
-export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>
 export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null
 
 export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined

packages/core/useBase64/index.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue-demi'
 import { isRef, ref, watch } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { isClient, isFunction, toValue } from '@vueuse/shared'
 import { getDefaultSerialization } from './serialization'
 
@@ -25,15 +25,15 @@ export interface UseBase64Return {
   execute: () => Promise<string>
 }
 
-export function useBase64(target: MaybeComputedRef<string>): UseBase64Return
-export function useBase64(target: MaybeComputedRef<Blob>): UseBase64Return
-export function useBase64(target: MaybeComputedRef<ArrayBuffer>): UseBase64Return
-export function useBase64(target: MaybeComputedRef<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return
-export function useBase64(target: MaybeComputedRef<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return
-export function useBase64<T extends Record<string, unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T extends Map<string, unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T extends Set<unknown>>(target: MaybeComputedRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T>(target: MaybeComputedRef<T[]>, options?: UseBase64ObjectOptions<T[]>): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<string>): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<Blob>): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<ArrayBuffer>): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return
+export function useBase64(target: MaybeRefOrGetter<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return
+export function useBase64<T extends Record<string, unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
+export function useBase64<T extends Map<string, unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
+export function useBase64<T extends Set<unknown>>(target: MaybeRefOrGetter<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
+export function useBase64<T>(target: MaybeRefOrGetter<T[]>, options?: UseBase64ObjectOptions<T[]>): UseBase64Return
 export function useBase64(
   target: any,
   options?: any,

packages/core/useClipboard/index.ts

@@ -1,6 +1,6 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue, useTimeoutFn } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
@@ -52,8 +52,8 @@ export interface UseClipboardReturn<Optional> {
  * @param options
  */
 export function useClipboard(options?: UseClipboardOptions<undefined>): UseClipboardReturn<false>
-export function useClipboard(options: UseClipboardOptions<MaybeComputedRef<string>>): UseClipboardReturn<true>
-export function useClipboard(options: UseClipboardOptions<MaybeComputedRef<string> | undefined> = {}): UseClipboardReturn<boolean> {
+export function useClipboard(options: UseClipboardOptions<MaybeRefOrGetter<string>>): UseClipboardReturn<true>
+export function useClipboard(options: UseClipboardOptions<MaybeRefOrGetter<string> | undefined> = {}): UseClipboardReturn<boolean> {
   const {
     navigator = defaultNavigator,
     read = false,

packages/core/useCloned/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { ComputedRef, WatchOptions } from 'vue-demi'
 import { isRef, ref, unref, watch } from 'vue-demi'
 
@@ -36,7 +36,7 @@ export function cloneFnJSON<T>(source: T): T {
 }
 
 export function useCloned<T>(
-  source: MaybeComputedRef<T>,
+  source: MaybeRefOrGetter<T>,
   options: UseClonedOptions = {},
 ) {
   const cloned = ref<T>({} as T)

packages/core/useCssVar/index.ts

@@ -1,6 +1,6 @@
 import { useMutationObserver } from '@vueuse/core'
 import { computed, ref, watch } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
@@ -25,7 +25,7 @@ export interface UseCssVarOptions extends ConfigurableWindow {
  * @param options
  */
 export function useCssVar(
-  prop: MaybeComputedRef<string>,
+  prop: MaybeRefOrGetter<string>,
   target?: MaybeElementRef,
   options: UseCssVarOptions = {},
 ) {

packages/core/useCycleList/index.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue-demi'
 import { computed, shallowRef, watch } from 'vue-demi'
 import { toRef, toValue } from '@vueuse/shared'
-import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
+import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 
 export interface UseCycleListOptions<T> {
   /**
@@ -26,7 +26,7 @@ export interface UseCycleListOptions<T> {
  *
  * @see https://vueuse.org/useCycleList
  */
-export function useCycleList<T>(list: MaybeComputedRef<T[]>, options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
+export function useCycleList<T>(list: MaybeRefOrGetter<T[]>, options?: UseCycleListOptions<T>): UseCycleListReturn<T> {
   const state = shallowRef(getInitialValue()) as Ref<T>
   const listRef = toRef(list)
 

packages/core/useDebouncedRefHistory/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { debounceFilter } from '@vueuse/shared'
 import type { Ref } from 'vue-demi'
 import type { UseRefHistoryOptions, UseRefHistoryReturn } from '../useRefHistory'
@@ -13,7 +13,7 @@ import { useRefHistory } from '../useRefHistory'
  */
 export function useDebouncedRefHistory<Raw, Serialized = Raw>(
   source: Ref<Raw>,
-  options: Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & { debounce?: MaybeComputedRef<number> } = {},
+  options: Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & { debounce?: MaybeRefOrGetter<number> } = {},
 ): UseRefHistoryReturn<Raw, Serialized> {
   const filter = options.debounce ? debounceFilter(options.debounce) : undefined
   const history = useRefHistory(source, { ...options, eventFilter: filter })

packages/core/useDraggable/index.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { isClient, toRefs, toValue } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import type { PointerType, Position } from '../types'
@@ -11,35 +11,35 @@ export interface UseDraggableOptions {
    *
    * @default false
    */
-  exact?: MaybeComputedRef<boolean>
+  exact?: MaybeRefOrGetter<boolean>
 
   /**
    * Prevent events defaults
    *
    * @default false
    */
-  preventDefault?: MaybeComputedRef<boolean>
+  preventDefault?: MaybeRefOrGetter<boolean>
 
   /**
    * Prevent events propagation
    *
    * @default false
    */
-  stopPropagation?: MaybeComputedRef<boolean>
+  stopPropagation?: MaybeRefOrGetter<boolean>
 
   /**
    * Element to attach `pointermove` and `pointerup` events to.
    *
    * @default window
    */
-  draggingElement?: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
+  draggingElement?: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>
 
   /**
    * Handle that triggers the drag event
    *
    * @default target
    */
-  handle?: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>
+  handle?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>
 
   /**
    * Pointer types that listen to.
@@ -53,7 +53,7 @@ export interface UseDraggableOptions {
    *
    * @default { x: 0, y: 0 }
    */
-  initialValue?: MaybeComputedRef<Position>
+  initialValue?: MaybeRefOrGetter<Position>
 
   /**
    * Callback when the dragging starts. Return `false` to prevent dragging.
@@ -86,7 +86,7 @@ export interface UseDraggableOptions {
  * @param options
  */
 export function useDraggable(
-  target: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>,
+  target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>,
   options: UseDraggableOptions = {},
 ) {
   const {

packages/core/useDropZone/index.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue-demi'
 import type { Ref } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { isClient } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 
@@ -9,7 +9,7 @@ export interface UseDropZoneReturn {
 }
 
 export function useDropZone(
-  target: MaybeComputedRef<HTMLElement | null | undefined>,
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
   onDrop?: (files: File[] | null) => void,
 ): UseDropZoneReturn {
   const isOverDropZone = ref(false)

packages/core/useElementByPoint/index.ts

@@ -1,13 +1,13 @@
 import { ref } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { toValue } from '@vueuse/shared'
 import { useRafFn } from '../useRafFn'
 import type { ConfigurableDocument } from '../_configurable'
 import { defaultDocument } from '../_configurable'
 
 export interface UseElementByPointOptions extends ConfigurableDocument {
-  x: MaybeComputedRef<number>
-  y: MaybeComputedRef<number>
+  x: MaybeRefOrGetter<number>
+  y: MaybeRefOrGetter<number>
 }
 
 /**

packages/core/useElementHover/index.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
@@ -10,7 +10,7 @@ export interface UseElementHoverOptions extends ConfigurableWindow {
   delayLeave?: number
 }
 
-export function useElementHover(el: MaybeComputedRef<EventTarget | null | undefined>, options: UseElementHoverOptions = {}): Ref<boolean> {
+export function useElementHover(el: MaybeRefOrGetter<EventTarget | null | undefined>, options: UseElementHoverOptions = {}): Ref<boolean> {
   const {
     delayEnter = 0,
     delayLeave = 0,

packages/core/useElementVisibility/index.ts

@@ -1,12 +1,12 @@
-import type { MaybeComputedRef } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { ref } from 'vue-demi'
 import type { MaybeComputedElementRef } from '../unrefElement'
 import { useIntersectionObserver } from '../useIntersectionObserver'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
 export interface UseElementVisibilityOptions extends ConfigurableWindow {
-  scrollTarget?: MaybeComputedRef<HTMLElement | undefined | null>
+  scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>
 }
 
 /**

packages/core/useEventListener/index.ts

@@ -1,4 +1,4 @@
-import type { Arrayable, Fn, MaybeComputedRef } from '@vueuse/shared'
+import type { Arrayable, Fn, MaybeRefOrGetter } from '@vueuse/shared'
 import { isString, noop, toValue, tryOnScopeDispose } from '@vueuse/shared'
 import { watch } from 'vue-demi'
 import type { MaybeElementRef } from '../unrefElement'
@@ -30,7 +30,7 @@ export interface GeneralEventListener<E = Event> {
 export function useEventListener<E extends keyof WindowEventMap>(
   event: Arrayable<E>,
   listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
-  options?: MaybeComputedRef<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
 ): Fn
 
 /**
@@ -48,7 +48,7 @@ export function useEventListener<E extends keyof WindowEventMap>(
   target: Window,
   event: Arrayable<E>,
   listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => any>,
-  options?: MaybeComputedRef<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
 ): Fn
 
 /**
@@ -66,7 +66,7 @@ export function useEventListener<E extends keyof DocumentEventMap>(
   target: DocumentOrShadowRoot,
   event: Arrayable<E>,
   listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>,
-  options?: MaybeComputedRef<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
 ): Fn
 
 /**
@@ -84,7 +84,7 @@ export function useEventListener<Names extends string, EventType = Event>(
   target: InferEventTarget<Names>,
   event: Arrayable<Names>,
   listener: Arrayable<GeneralEventListener<EventType>>,
-  options?: MaybeComputedRef<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
 ): Fn
 
 /**
@@ -99,17 +99,17 @@ export function useEventListener<Names extends string, EventType = Event>(
  * @param options
  */
 export function useEventListener<EventType = Event>(
-  target: MaybeComputedRef<EventTarget | null | undefined>,
+  target: MaybeRefOrGetter<EventTarget | null | undefined>,
   event: Arrayable<string>,
   listener: Arrayable<GeneralEventListener<EventType>>,
-  options?: MaybeComputedRef<boolean | AddEventListenerOptions>
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>
 ): Fn
 
 export function useEventListener(...args: any[]) {
-  let target: MaybeComputedRef<EventTarget> | undefined
+  let target: MaybeRefOrGetter<EventTarget> | undefined
   let events: Arrayable<string>
   let listeners: Arrayable<Function>
-  let options: MaybeComputedRef<boolean | AddEventListenerOptions> | undefined
+  let options: MaybeRefOrGetter<boolean | AddEventListenerOptions> | undefined
 
   if (isString(args[0]) || Array.isArray(args[0])) {
     [events, listeners, options] = args

packages/core/useFavicon/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeComputedRef, MaybeReadonlyRef, MaybeRef } from '@vueuse/shared'
+import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared'
 import { isString, toRef } from '@vueuse/shared'
 import type { ComputedRef, Ref } from 'vue-demi'
 import { watch } from 'vue-demi'
@@ -18,15 +18,15 @@ export interface UseFaviconOptions extends ConfigurableDocument {
  * @param options
  */
 export function useFavicon(
-  newIcon: MaybeReadonlyRef<string | null | undefined>,
+  newIcon: MaybeRefOrGetter<string | null | undefined>,
   options?: UseFaviconOptions
 ): ComputedRef<string | null | undefined>
 export function useFavicon(
   newIcon?: MaybeRef<string | null | undefined>,
   options?: UseFaviconOptions
 ): Ref<string | null | undefined>
 export function useFavicon(
-  newIcon: MaybeComputedRef<string | null | undefined> = null,
+  newIcon: MaybeRefOrGetter<string | null | undefined> = null,
   options: UseFaviconOptions = {},
 ) {
   const {