feat(reactivePick): add predicate parameter (#2850)

packages/shared/reactivePick/index.md

@@ -8,7 +8,9 @@ Reactively pick fields from a reactive object.
 
 ## Usage
 
-```js
+### Basic Usage
+
+```ts
 import { reactivePick } from '@vueuse/core'
 
 const obj = reactive({
@@ -21,6 +23,21 @@ const obj = reactive({
 const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }
 ```
 
+### Predicate Usage
+
+```ts
+import { reactivePick } from '@vueuse/core'
+const source = reactive({
+  foo: 'foo',
+  bar: 'bar',
+  baz: 'baz',
+  qux: true,
+})
+const state = reactivePick(source, (value, key) => key !== 'bar' && value !== true)
+// { foo: string, baz: string }
+source.qux = false
+// { foo: string, baz: string, qux: boolean }
+````
 ### Scenarios
 
 #### Selectively passing props to child

packages/shared/reactivePick/index.test.ts

@@ -44,4 +44,41 @@ describe('reactivePick', () => {
       bar: 'bar2',
     })
   })
+  it('should work with predicate', () => {
+    const source = reactive({
+      foo: 'foo',
+      bar: 'bar',
+      baz: 'baz',
+      qux: true,
+    })
+    const state = reactivePick(source, (value, key) => {
+      return key !== 'bar' && value !== true
+    })
+
+    expect(state).toEqual({
+      foo: 'foo',
+      baz: 'baz',
+    })
+
+    source.foo = 'foo2'
+
+    expect(state).toEqual({
+      foo: 'foo2',
+      baz: 'baz',
+    })
+
+    source.bar = 'bar1'
+
+    expect(state).toEqual({
+      foo: 'foo2',
+      baz: 'baz',
+    })
+
+    source.qux = false
+    expect(state).toEqual({
+      foo: 'foo2',
+      baz: 'baz',
+      qux: false,
+    })
+  })
 })

packages/shared/reactivePick/index.ts

@@ -1,5 +1,18 @@
 import type { UnwrapRef } from 'vue-demi'
-import { reactive, toRef } from 'vue-demi'
+import { toRef, toRefs } from 'vue-demi'
+import { reactiveComputed } from '../reactiveComputed'
+import { resolveUnref } from '../resolveUnref'
+
+export type ReactivePickPredicate<T> = (value: T[keyof T], key: keyof T) => boolean
+
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: (K | K[])[]
+): { [S in K]: UnwrapRef<T[S]> }
+export function reactivePick<T extends object>(
+  obj: T,
+  predicate: ReactivePickPredicate<T>
+): { [S in keyof T]?: UnwrapRef<T[S]> }
 
 /**
  * Reactively pick fields from a reactive object
@@ -11,5 +24,6 @@ export function reactivePick<T extends object, K extends keyof T>(
   ...keys: (K | K[])[]
 ): { [S in K]: UnwrapRef<T[S]> } {
   const flatKeys = keys.flat() as K[]
-  return reactive(Object.fromEntries(flatKeys.map(k => [k, toRef(obj, k)]))) as any
+  const predicate = flatKeys[0] as unknown as ReactivePickPredicate<T>
+  return reactiveComputed(() => typeof predicate === 'function' ? Object.fromEntries(Object.entries(toRefs(obj)).filter(([k, v]) => predicate(resolveUnref(v) as T[K], k as K))) : Object.fromEntries(flatKeys.map(k => [k, toRef(obj, k)]))) as any
 }