From db65464dcceebb4141403848f042c5215ea7aa91 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 8 Apr 2021 13:02:04 +0800
Subject: [PATCH] feat(reactivePick): new function (#424)

---
 README.md                             |  2 +-
 indexes.json                          |  7 ++
 packages/functions.md                 |  1 +
 packages/shared/index.ts              |  1 +
 packages/shared/reactivePick/index.md | 98 +++++++++++++++++++++++++++
 packages/shared/reactivePick/index.ts | 13 ++++
 6 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/reactivePick/index.md
 create mode 100644 packages/shared/reactivePick/index.ts

diff --git a/README.md b/README.md
index 94d18bcd02e..5a7e82f4c45 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-112%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-113%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>
diff --git a/indexes.json b/indexes.json
index 1068d3af46f..19a3b16215c 100644
--- a/indexes.json
+++ b/indexes.json
@@ -174,6 +174,13 @@
       "category": "Utilities",
       "description": "apply `reactify` to an object"
     },
+    {
+      "name": "reactivePick",
+      "package": "shared",
+      "docs": "https://vueuse.org/shared/reactivePick/",
+      "category": "Utilities",
+      "description": "reactively pick fields from a reactive object"
+    },
     {
       "name": "set",
       "package": "shared",
diff --git a/packages/functions.md b/packages/functions.md
index 56f49a71285..721e1ffbb83 100644
--- a/packages/functions.md
+++ b/packages/functions.md
@@ -101,6 +101,7 @@
   - [`makeDestructurable`](https://vueuse.org/shared/makeDestructurable/) — make isomorphic destructurable for object and array at the same time
   - [`reactify`](https://vueuse.org/shared/reactify/) — converts plain functions into reactive functions
   - [`reactifyObject`](https://vueuse.org/shared/reactifyObject/) — apply `reactify` to an object
+  - [`reactivePick`](https://vueuse.org/shared/reactivePick/) — reactively pick fields from a reactive object
   - [`set`](https://vueuse.org/shared/set/) — shorthand for `ref.value = x`
   - [`syncRef`](https://vueuse.org/shared/syncRef/) — keep target refs in sync with a source ref
   - [`useAsyncState`](https://vueuse.org/core/useAsyncState/) — reactive async state
diff --git a/packages/shared/index.ts b/packages/shared/index.ts
index 771e8b38a7f..e08a7fb7b75 100644
--- a/packages/shared/index.ts
+++ b/packages/shared/index.ts
@@ -9,6 +9,7 @@ export * from './makeDestructurable'
 export * from './pausableWatch'
 export * from './reactify'
 export * from './reactifyObject'
+export * from './reactivePick'
 export * from './set'
 export * from './syncRef'
 export * from './throttledWatch'
diff --git a/packages/shared/reactivePick/index.md b/packages/shared/reactivePick/index.md
new file mode 100644
index 00000000000..cf3d959e508
--- /dev/null
+++ b/packages/shared/reactivePick/index.md
@@ -0,0 +1,98 @@
+---
+category: Utilities
+---
+
+# reactivePick
+
+Reactively pick fields from a reactive object.
+
+## Usage
+
+```js
+import { reactivePick } from '@vueuse/core'
+
+const obj = reactive({
+  x: 0,
+  y: 0,
+  elementX: 0,
+  elementY: 0,
+})
+
+const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }
+```
+
+### Scenarios
+
+#### Selectively passing props to child
+
+```html
+<script setup>
+import { defineProps } from 'vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps({
+  value: {
+    default: 'value',
+  },
+  color: {
+    type: String,
+  },
+  font: {
+    type: String,
+  }
+})
+
+const childProps = reactivePick(props, 'color', 'font')
+</script>
+
+<template>
+  <div>
+    <!-- only passes "color" and "font" props to child -->
+    <ChildComp v-bind="childProps" />
+  </div>
+</template>
+```
+
+#### Selectively wrap reactive object
+
+Instead of doing this
+
+```ts
+import { reactive } from 'vue'
+import { useElementBounding } from '@vueuse/core'
+
+const { height, width } = useElementBounding() // object of refs
+const size = reactive({ height, width })
+```
+
+Now we can just have this
+
+```ts
+import { reactivePick, useElementBounding } from '@vueuse/core'
+
+const size = reactivePick(useElementBounding(), 'height', 'width')
+```
+
+<!--FOOTER_STARTS-->
+## Type Declarations
+
+```typescript
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * @link https://vueuse.js.org/reactivePick
+ */
+export declare function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: K[]
+): {
+  [S in K]: UnwrapRef<T[S]>
+}
+```
+
+## Source
+
+[Source](https://github.com/vueuse/vueuse/blob/main/packages/shared/reactivePick/index.ts) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/shared/reactivePick/index.md)
+
+
+<!--FOOTER_ENDS-->
diff --git a/packages/shared/reactivePick/index.ts b/packages/shared/reactivePick/index.ts
new file mode 100644
index 00000000000..7ec2015a628
--- /dev/null
+++ b/packages/shared/reactivePick/index.ts
@@ -0,0 +1,13 @@
+import { reactive, toRef, UnwrapRef } from 'vue-demi'
+
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * @link https://vueuse.js.org/reactivePick
+ */
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: K[]
+): { [S in K]: UnwrapRef<T[S]> } {
+  return reactive(Object.fromEntries(keys.map(k => [k, toRef(obj, k)]))) as any
+}