feat(watchDebounced): new maxWait option (#1579)

packages/shared/watchDebounced/demo.vue

@@ -7,13 +7,13 @@ const updated = ref(0)
 
 watchDebounced(input, () => {
   updated.value += 1
-}, { debounce: 1000 })
+}, { debounce: 1000, maxWait: 5000 })
 </script>
 
 <template>
   <div>
     <input v-model="input" placeholder="Try to type anything..." type="text">
-    <note>Delay is set to 1000ms for this demo.</note>
+    <note>Delay is set to 1000ms and maxWait is set to 5000ms for this demo.</note>
 
     <p>Input: {{ input }}</p>
     <p>Times Updated: {{ updated }}</p>

packages/shared/watchDebounced/index.md

@@ -9,15 +9,15 @@ Debounced watch
 
 ## Usage
 
-Similar to `watch`, but offering an extra option `debounce` which will be applied to the callback function.
+Similar to `watch`, but offering extra options `debounce` and `maxWait` which will be applied to the callback function.
 
 ```ts
 import { watchDebounced } from '@vueuse/core'
 
 watchDebounced(
   source,
   () => { console.log('changed!') },
-  { debounce: 500 },
+  { debounce: 500, maxWait: 1000 },
 )
 ```
 
@@ -30,7 +30,7 @@ watchWithFilter(
   source,
   () => { console.log('changed!') },
   {
-    eventFilter: debounceFilter(500),
+    eventFilter: debounceFilter(500, { maxWait: 1000 }),
   },
 )
 ```

packages/shared/watchDebounced/index.ts

@@ -1,9 +1,9 @@
 import type { WatchCallback, WatchOptions, WatchSource, WatchStopHandle } from 'vue-demi'
-import type { MapOldSources, MapSources, MaybeRef } from '../utils'
+import type { DebounceFilterOptions, MapOldSources, MapSources, MaybeRef } from '../utils'
 import { debounceFilter } from '../utils'
 import { watchWithFilter } from '../watchWithFilter'
 
-export interface WatchDebouncedOptions<Immediate> extends WatchOptions<Immediate> {
+export interface WatchDebouncedOptions<Immediate> extends WatchOptions<Immediate>, DebounceFilterOptions {
   debounce?: MaybeRef<number>
 }
 
@@ -20,6 +20,7 @@ export function watchDebounced<Immediate extends Readonly<boolean> = false>(
 ): WatchStopHandle {
   const {
     debounce = 0,
+    maxWait = undefined,
     ...watchOptions
   } = options
 
@@ -28,7 +29,7 @@ export function watchDebounced<Immediate extends Readonly<boolean> = false>(
     cb,
     {
       ...watchOptions,
-      eventFilter: debounceFilter(debounce),
+      eventFilter: debounceFilter(debounce, { maxWait }),
     },
   )
 }