feat(useArrayUnique): add a custom function to deduplicate

packages/shared/useArrayUnique/index.md

@@ -33,6 +33,24 @@ const list = reactive([1, 2, 2, 3])
 const result = useArrayUnique(list)
 // result.value: [1, 2, 3]
 
-result.value.push(1)
+result.push(1)
 // result.value: [1, 2, 3]
 ```
+
+### Use with custom function
+
+```js
+import { useArrayUnique } from '@vueuse/core'
+
+const list = reactive([
+  { id: 1, name: 'foo' },
+  { id: 2, name: 'bar' },
+  { id: 1, name: 'baz' },
+])
+
+const result = useArrayUnique(list, (a, b) => a.id === b.id)
+// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+
+list.push({ id: 1, name: 'qux' })
+// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+```

packages/shared/useArrayUnique/index.test.ts

@@ -1,3 +1,4 @@
+import { reactive } from 'vue'
 import { ref } from 'vue-demi'
 import { useArrayUnique } from '../useArrayUnique'
 
@@ -19,11 +20,37 @@ describe('useArraySome', () => {
     expect(result.value.length).toBe(3)
   })
 
-  it('should work with reactive array', () => {
+  it('should work with ref array', () => {
     const list = ref([1, 2, 2, 3])
     const result = useArrayUnique(list)
     expect(result.value.length).toBe(3)
     list.value.push(1)
     expect(result.value.length).toBe(3)
   })
+
+  it('should work with reactive array', () => {
+    const list = reactive([1, 2, 2, 3])
+    const result = useArrayUnique(list)
+    expect(result.value.length).toBe(3)
+    list.push(1)
+    expect(result.value.length).toBe(3)
+  })
+
+  it('should work with array of reactive and custom compare function', () => {
+    const list = reactive([
+      {
+        id: 1,
+        name: 'foo',
+      }, {
+        id: 2,
+        name: 'bar',
+      },
+      {
+        id: 1,
+        name: 'baz',
+      },
+    ])
+    const result = useArrayUnique(list, (a, b) => a.id === b.id)
+    expect(result.value.length).toBe(2)
+  })
 })

packages/shared/useArrayUnique/index.ts

@@ -3,13 +3,32 @@ import { computed } from 'vue-demi'
 import type { MaybeComputedRef } from '../utils'
 import { resolveUnref } from '../resolveUnref'
 
+function uniq<T>(array: T[]) {
+  return Array.from(new Set(array))
+}
+
+function uniqueElementsBy<T>(
+  array: T[],
+  fn: (a: T, b: T, array: T[]) => boolean,
+) {
+  return array.reduce<T[]>((acc, v) => {
+    if (!acc.some(x => fn(v, x, array)))
+      acc.push(v)
+    return acc
+  }, [])
+}
+
 /**
  * reactive unique array
  * @see https://vueuse.org/useArrayUnique
  * @param {Array} list - the array was called upon.
+ * @param fn - the function to compare
  * @returns {Array} A computed ref that returns a unique array of items.
  */
 export function useArrayUnique<T>(
-  list: MaybeComputedRef<MaybeComputedRef<T>[]>): ComputedRef<T[]> {
-  return computed<T[]>(() => [...new Set<T>(resolveUnref(list).map(element => resolveUnref(element)))])
+  list: MaybeComputedRef<MaybeComputedRef<T>[]>, fn?: (a: T, b: T, array: T[]) => boolean): ComputedRef<T[]> {
+  return computed<T[]>(() => {
+    const resolvedList = resolveUnref(list).map(element => resolveUnref(element))
+    return fn ? uniqueElementsBy(resolvedList, fn) : uniq(resolvedList)
+  })
 }