feat(useTimeout): target support reactivity (#3923)

Co-authored-by: banruo <[email protected]>
vueuse · May 27, 2024 · 4eede0e · 4eede0e
1 parent 4a88231
commit 4eede0e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/shared/useTimeout/index.test.ts b/packages/shared/useTimeout/index.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest'
+import { ref } from 'vue-demi'
 import { useTimeout } from '.'
 
 describe('useTimeout', () => {
@@ -13,4 +14,18 @@ describe('useTimeout', () => {
     expect(ready.value).toEqual(false)
     setTimeout(() => expect(ready.value).toEqual(true), 10)
   })
+
+  it('works with ref target', () => {
+    const interval = ref(10)
+    const ready = useTimeout(interval)
+    expect(ready.value).toEqual(false)
+    setTimeout(() => expect(ready.value).toEqual(true), 10)
+  })
+
+  it('works with controls and ref target', () => {
+    const interval = ref(10)
+    const { ready } = useTimeout(interval, { controls: true })
+    expect(ready.value).toEqual(false)
+    setTimeout(() => expect(ready.value).toEqual(true), 10)
+  })
 })
diff --git a/packages/shared/useTimeout/index.ts b/packages/shared/useTimeout/index.ts
@@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue-demi'
 import { computed } from 'vue-demi'
 import type { UseTimeoutFnOptions } from '../useTimeoutFn'
 import { useTimeoutFn } from '../useTimeoutFn'
-import type { Fn, Stoppable } from '../utils'
+import type { Fn, MaybeRefOrGetter, Stoppable } from '../utils'
 import { noop } from '../utils'
 
 export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutFnOptions {
@@ -25,9 +25,9 @@ export interface UseTimeoutOptions<Controls extends boolean> extends UseTimeoutF
  * @param interval
  * @param options
  */
-export function useTimeout(interval?: number, options?: UseTimeoutOptions<false>): ComputedRef<boolean>
-export function useTimeout(interval: number, options: UseTimeoutOptions<true>): { ready: ComputedRef<boolean> } & Stoppable
-export function useTimeout(interval = 1000, options: UseTimeoutOptions<boolean> = {}) {
+export function useTimeout(interval?: MaybeRefOrGetter<number>, options?: UseTimeoutOptions<false>): ComputedRef<boolean>
+export function useTimeout(interval: MaybeRefOrGetter<number>, options: UseTimeoutOptions<true>): { ready: ComputedRef<boolean> } & Stoppable
+export function useTimeout(interval: MaybeRefOrGetter<number> = 1000, options: UseTimeoutOptions<boolean> = {}) {
   const {
     controls: exposeControls = false,
     callback,