feat(useArrayFind): new function

packages/shared/useArrayFind/index.md

@@ -0,0 +1,26 @@
+---
+category: Utilities
+---
+
+# useArrayFind
+
+Reactively array find.
+
+## Usage
+
+```js
+import { useArrayFind } from '@vueuse/core'
+const positive = useArrayFind([ref(1), ref(-1), ref(2)], val => val > 0)
+// positive.value: 1
+```
+
+### Use with reactive array
+
+```js
+import { useArrayFind } from '@vueuse/core'
+const list = reactive([-1, -2])
+const positive = useArrayFind(list, val => val > 0)
+// positive.value: undefined
+list.push(1)
+// positive.value: 1
+```

packages/shared/useArrayFind/index.test.ts

@@ -0,0 +1,35 @@
+import { reactive, ref } from 'vue-demi'
+import { useSetup } from '../../.test'
+import { useArrayFind } from '../useArrayFind'
+
+describe('useArrayFind', () => {
+  it('should be defined', () => {
+    expect(useArrayFind).toBeDefined()
+  })
+
+  it('should find postive', () => {
+    useSetup(() => {
+      const item1 = ref(1)
+      const item2 = ref(2)
+      const item3 = ref(3)
+      const positive = useArrayFind([item1, item2, item3], val => val > 0)
+      expect(positive.value).toBe(1)
+      item1.value = -1
+      expect(positive.value).toBe(2)
+      item2.value = -1
+      expect(positive.value).toBe(3)
+      item3.value = -1
+      expect(positive.value).toBe(undefined)
+    })
+  })
+
+  it('should work with reactive array', () => {
+    useSetup(() => {
+      const list = reactive([-1, -2])
+      const positive = useArrayFind(list, val => val > 0)
+      expect(positive.value).toBe(undefined)
+      list.push(1)
+      expect(positive.value).toBe(1)
+    })
+  })
+})

packages/shared/useArrayFind/index.ts

@@ -0,0 +1,17 @@
+import type { MaybeComputedRef } from '@vueuse/shared'
+import type { ComputedRef } from 'vue-demi'
+import { resolveUnref } from '@vueuse/shared'
+import { computed } from 'vue-demi'
+
+export function useArrayFind<T>(
+  list: MaybeComputedRef<MaybeComputedRef<T>[]>,
+  fn: (element: T, index: number, array: MaybeComputedRef<T>[]) => boolean,
+): ComputedRef<T | undefined> {
+  return computed(() => {
+    const find = Array.prototype.find.bind(resolveUnref(list))
+
+    const findCallback = (element: MaybeComputedRef<T>, index: number, array: MaybeComputedRef<T>[]) => fn(resolveUnref(element), index, array)
+
+    return resolveUnref(find(findCallback))
+  })
+}