feat(all): use MaybeComputedRef

packages/contributors.json

@@ -27,6 +27,8 @@
   "LittleSound",
   "ArcherGu",
   "daikiojm",
+  "dfreier",
+  "innocenzi",
   "Demivan",
   "jbaubree",
   "ansidev",
@@ -61,11 +63,13 @@
   "manaust",
   "lpj145",
   "maxma241",
+  "michaelhue",
   "xizher",
   "nhedger",
   "g-plane",
   "coolhome",
   "herrmannplatz",
+  "wobsoriano",
   "seifsay3d",
   "darkxanter",
   "shigma",
@@ -115,13 +119,13 @@
   "damienroche",
   "danmindru",
   "DesselBane",
-  "dfreier",
+  "DevilTea",
+  "w1ndy",
   "eggsy",
   "posva",
   "Maiquu",
   "Danmer",
   "emilsgulbis",
-  "innocenzi",
   "iendeavor",
   "web2033",
   "sp1ker",
@@ -175,7 +179,6 @@
   "mxmvshnvsk",
   "AldeonMoriak",
   "MelihAltintas",
-  "michaelhue",
   "mdbetancourt",
   "edimitchel",
   "michael-harvey",
@@ -195,7 +198,6 @@
   "ramonakira",
   "Redemption198",
   "neelance",
-  "wobsoriano",
   "rromanv",
   "Rolanddoda",
   "romansp",
@@ -232,6 +234,7 @@
   "koheing",
   "kongmoumou",
   "laozei6401",
+  "lavolpecheprogramma",
   "leovoon",
   "likeswinds",
   "lxhyl",

packages/core/onKeyStroke/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/shared'
+import type { MaybeComputedRef } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import { defaultWindow } from '../_configurable'
 
@@ -7,7 +7,7 @@ export type KeyFilter = null | undefined | string | string[] | KeyPredicate
 export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup'
 export interface KeyStrokeOptions {
   eventName?: KeyStrokeEventName
-  target?: MaybeRef<EventTarget>
+  target?: MaybeComputedRef<EventTarget>
   passive?: boolean
 }
 

packages/core/unrefElement/index.ts

@@ -1,9 +1,10 @@
 import type { ComponentPublicInstance } from 'vue-demi'
-import { unref } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
+import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
+import { resolveUnref } 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 MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null
 
 export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
@@ -13,7 +14,7 @@ export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extend
  *
  * @param elRef
  */
-export function unrefElement<T extends MaybeElement>(elRef: MaybeElementRef<T>): UnRefElementReturn<T> {
-  const plain = unref(elRef)
+export function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T> {
+  const plain = resolveUnref(elRef)
   return (plain as VueInstance)?.$el ?? plain
 }

packages/core/useBase64/index.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue-demi'
-import { isRef, ref, unref, watch } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
-import { isClient } from '@vueuse/shared'
+import { isRef, ref, watch } from 'vue-demi'
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { isClient, isFunction, resolveUnref } from '@vueuse/shared'
 import { getDefaultSerialization } from './serialization'
 
 export interface ToDataURLOptions {
@@ -25,15 +25,15 @@ export interface UseBase64Return {
   execute: () => Promise<string>
 }
 
-export function useBase64(target: MaybeRef<string>): UseBase64Return
-export function useBase64(target: MaybeRef<Blob>): UseBase64Return
-export function useBase64(target: MaybeRef<ArrayBuffer>): UseBase64Return
-export function useBase64(target: MaybeRef<HTMLCanvasElement>, options?: ToDataURLOptions): UseBase64Return
-export function useBase64(target: MaybeRef<HTMLImageElement>, options?: ToDataURLOptions): UseBase64Return
-export function useBase64<T extends Record<string, unknown>>(target: MaybeRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T extends Map<string, unknown>>(target: MaybeRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T extends Set<unknown>>(target: MaybeRef<T>, options?: UseBase64ObjectOptions<T>): UseBase64Return
-export function useBase64<T>(target: MaybeRef<T[]>, options?: UseBase64ObjectOptions<T[]>): UseBase64Return
+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: any,
   options?: any,
@@ -47,7 +47,7 @@ export function useBase64(
 
     promise.value = new Promise<string>((resolve, reject) => {
       try {
-        const _target = unref(target)
+        const _target = resolveUnref(target)
         if (_target == null) {
           resolve('')
         }
@@ -94,7 +94,7 @@ export function useBase64(
     return promise.value
   }
 
-  if (isRef(target))
+  if (isRef(target) || isFunction(target))
     watch(target, execute, { immediate: true })
   else
     execute()

packages/core/useClamp/index.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue-demi'
-import { computed, ref, unref } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
-import { clamp } from '@vueuse/shared'
+import { computed, ref } from 'vue-demi'
+import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared'
+import { clamp, resolveUnref } from '@vueuse/shared'
 
 /**
  * Reactively clamp a value between two other values.
@@ -11,14 +11,14 @@ import { clamp } from '@vueuse/shared'
  * @param min
  * @param max
  */
-export function useClamp(value: MaybeRef<number>, min: MaybeRef<number>, max: MaybeRef<number>): Ref<number> {
+export function useClamp(value: MaybeRef<number>, min: MaybeComputedRef<number>, max: MaybeComputedRef<number>): Ref<number> {
   const _value = ref(value)
   return computed<number>({
     get() {
-      return _value.value = clamp(_value.value, unref(min), unref(max))
+      return _value.value = clamp(_value.value, resolveUnref(min), resolveUnref(max))
     },
     set(value) {
-      _value.value = clamp(value, unref(min), unref(max))
+      _value.value = clamp(value, resolveUnref(min), resolveUnref(max))
     },
   })
 }

packages/core/useClipboard/index.ts

@@ -1,9 +1,9 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 
-import type { MaybeRef } from '@vueuse/shared'
-import { useTimeoutFn } from '@vueuse/shared'
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { resolveUnref, useTimeoutFn } from '@vueuse/shared'
 import type { ComputedRef } from 'vue-demi'
-import { ref, unref } from 'vue-demi'
+import { ref } from 'vue-demi'
 import type { WindowEventName } from '../useEventListener'
 import { useEventListener } from '../useEventListener'
 import type { ConfigurableNavigator } from '../_configurable'
@@ -44,8 +44,8 @@ export interface ClipboardReturn<Optional> {
  * @param options
  */
 export function useClipboard(options?: ClipboardOptions<undefined>): ClipboardReturn<false>
-export function useClipboard(options: ClipboardOptions<MaybeRef<string>>): ClipboardReturn<true>
-export function useClipboard(options: ClipboardOptions<MaybeRef<string> | undefined> = {}): ClipboardReturn<boolean> {
+export function useClipboard(options: ClipboardOptions<MaybeComputedRef<string>>): ClipboardReturn<true>
+export function useClipboard(options: ClipboardOptions<MaybeComputedRef<string> | undefined> = {}): ClipboardReturn<boolean> {
   const {
     navigator = defaultNavigator,
     read = false,
@@ -71,7 +71,7 @@ export function useClipboard(options: ClipboardOptions<MaybeRef<string> | undefi
       useEventListener(event as WindowEventName, updateText)
   }
 
-  async function copy(value = unref(source)) {
+  async function copy(value = resolveUnref(source)) {
     if (isSupported && value != null) {
       await navigator!.clipboard.writeText(value)
       text.value = value

packages/core/useCssVar/index.ts

@@ -1,5 +1,6 @@
-import { computed, ref, unref, watch } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
+import { computed, ref, watch } from 'vue-demi'
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { resolveUnref } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
@@ -19,15 +20,15 @@ export interface UseCssVarOptions extends ConfigurableWindow {
  * @param options
  */
 export function useCssVar(
-  prop: MaybeRef<string>,
+  prop: MaybeComputedRef<string>,
   target?: MaybeElementRef,
   { window = defaultWindow, initialValue = '' }: UseCssVarOptions = {},
 ) {
   const variable = ref(initialValue)
   const elRef = computed(() => unrefElement(target) || window?.document?.documentElement)
 
   watch(
-    [elRef, () => unref(prop)],
+    [elRef, () => resolveUnref(prop)],
     ([el, prop]) => {
       if (el && window) {
         const value = window.getComputedStyle(el).getPropertyValue(prop)?.trim()
@@ -41,7 +42,7 @@ export function useCssVar(
     variable,
     (val) => {
       if (elRef.value?.style)
-        elRef.value.style.setProperty(unref(prop), val)
+        elRef.value.style.setProperty(resolveUnref(prop), val)
     },
   )
 

packages/core/useCycleList/index.ts

@@ -1,13 +1,12 @@
 import type { Ref } from 'vue-demi'
 import { computed, shallowRef } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
 
 export interface UseCycleListOptions<T> {
   /**
    * The initial value of the state.
    * A ref can be provided to reuse.
    */
-  initialValue?: MaybeRef<T>
+  initialValue?: T
 
   /**
    * The default index when

packages/core/useDebouncedRefHistory/index.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/shared'
+import type { MaybeComputedRef } 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?: MaybeRef<number> } = {},
+  options: Omit<UseRefHistoryOptions<Raw, Serialized>, 'eventFilter'> & { debounce?: MaybeComputedRef<number> } = {},
 ): UseRefHistoryReturn<Raw, Serialized> {
   const filter = options.debounce ? debounceFilter(options.debounce) : undefined
   const history = useRefHistory(source, { ...options, eventFilter: filter })

packages/core/useDraggable/component.ts

@@ -1,6 +1,7 @@
-import { defineComponent, h, reactive, ref, unref } from 'vue-demi'
+import { defineComponent, h, reactive, ref } from 'vue-demi'
 import type { UseDraggableOptions } from '@vueuse/core'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
+import { resolveUnref } from '@vueuse/shared'
 import type { RenderableComponent } from '../types'
 
 export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
@@ -34,7 +35,7 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
     const initialValue = props.storageKey
       ? useStorage(
         props.storageKey,
-        unref(props.initialValue) || { x: 0, y: 0 },
+        resolveUnref(props.initialValue) || { x: 0, y: 0 },
         isClient
           ? props.storageType === 'session'
             ? sessionStorage

packages/core/useDraggable/index.ts

@@ -1,7 +1,6 @@
-import type { Ref } from 'vue-demi'
-import { computed, ref, unref } from 'vue-demi'
-import type { MaybeRef } from '@vueuse/shared'
-import { isClient, toRefs } from '@vueuse/shared'
+import { computed, ref } from 'vue-demi'
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { isClient, resolveUnref, toRefs } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
 import type { PointerType, Position } from '../types'
 import { defaultWindow } from '../_configurable'
@@ -12,28 +11,28 @@ export interface UseDraggableOptions {
    *
    * @default false
    */
-  exact?: MaybeRef<boolean>
+  exact?: MaybeComputedRef<boolean>
 
   /**
    * Prevent events defaults
    *
    * @default false
    */
-  preventDefault?: MaybeRef<boolean>
+  preventDefault?: MaybeComputedRef<boolean>
 
   /**
    * Prevent events propagation
    *
    * @default false
    */
-  stopPropagation?: MaybeRef<boolean>
+  stopPropagation?: MaybeComputedRef<boolean>
 
   /**
    * Element to attach `pointermove` and `pointerup` events to.
    *
    * @default window
    */
-  draggingElement?: MaybeRef<HTMLElement | SVGElement | Window | Document | null | undefined>
+  draggingElement?: MaybeComputedRef<HTMLElement | SVGElement | Window | Document | null | undefined>
 
   /**
    * Pointer types that listen to.
@@ -47,7 +46,7 @@ export interface UseDraggableOptions {
    *
    * @default { x: 0, y: 0}
    */
-  initialValue?: MaybeRef<Position>
+  initialValue?: MaybeComputedRef<Position>
 
   /**
    * Callback when the dragging starts. Return `false` to prevent dragging.
@@ -72,9 +71,9 @@ export interface UseDraggableOptions {
  * @param target
  * @param options
  */
-export function useDraggable(target: MaybeRef<HTMLElement | SVGElement | null | undefined>, options: UseDraggableOptions = {}) {
+export function useDraggable(target: MaybeComputedRef<HTMLElement | SVGElement | null | undefined>, options: UseDraggableOptions = {}) {
   const draggingElement = options.draggingElement ?? defaultWindow
-  const position: Ref<Position> = ref(options.initialValue ?? { x: 0, y: 0 })
+  const position = ref<Position>(resolveUnref(options.initialValue) ?? { x: 0, y: 0 })
   const pressedDelta = ref<Position>()
 
   const filterEvent = (e: PointerEvent) => {
@@ -84,18 +83,18 @@ export function useDraggable(target: MaybeRef<HTMLElement | SVGElement | null |
   }
 
   const handleEvent = (e: PointerEvent) => {
-    if (unref(options.preventDefault))
+    if (resolveUnref(options.preventDefault))
       e.preventDefault()
-    if (unref(options.stopPropagation))
+    if (resolveUnref(options.stopPropagation))
       e.stopPropagation()
   }
 
   const start = (e: PointerEvent) => {
     if (!filterEvent(e))
       return
-    if (unref(options.exact) && e.target !== unref(target))
+    if (resolveUnref(options.exact) && e.target !== resolveUnref(target))
       return
-    const rect = unref(target)!.getBoundingClientRect()
+    const rect = resolveUnref(target)!.getBoundingClientRect()
     const pos = {
       x: e.pageX - rect.left,
       y: e.pageY - rect.top,