Feat (useArrayUnique): Custom deduplication

packages/shared/useArrayUnique/index.md

@@ -36,3 +36,13 @@ const result = useArrayUnique(list)
 result.value.push(1)
 // result.value: [1, 2, 3]
 ```
+
+### Custom deduplication
+
+```js
+import { useArrayUnique } from '@vueuse/core'
+
+const list = reactive([{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'foo' }])
+const result = useArrayUnique(list, 'name')
+// result.value: [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}]
+```

packages/shared/useArrayUnique/index.test.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue-demi'
-import { useArrayUnique } from '../useArrayUnique'
+import { useArrayUnique } from '.'
 
-describe('useArraySome', () => {
+describe('useArrayUnique', () => {
   it('should be defined', () => {
     expect(useArrayUnique).toBeDefined()
   })
@@ -26,4 +26,53 @@ describe('useArraySome', () => {
     list.value.push(1)
     expect(result.value.length).toBe(3)
   })
+
+  it('is able to deduplicate objects based on a specific property', () => {
+    const list = ref([
+      {
+        id: 1,
+        value: 'foo',
+      },
+      {
+        id: 2,
+        value: 'bar',
+      },
+      {
+        id: 3,
+        value: 'foo',
+      },
+      {
+        id: 1,
+        value: 'bar',
+      },
+    ])
+    let result = useArrayUnique(list, { property: 'id' })
+    expect(result.value).toStrictEqual([
+      {
+        id: 1,
+        value: 'foo',
+      },
+      {
+        id: 2,
+        value: 'bar',
+      },
+      {
+        id: 3,
+        value: 'foo',
+      },
+    ])
+
+    // Try with property shortcut
+    result = useArrayUnique(list, 'value')
+    expect(result.value).toStrictEqual([
+      {
+        id: 1,
+        value: 'foo',
+      },
+      {
+        id: 2,
+        value: 'bar',
+      },
+    ])
+  })
 })

packages/shared/useArrayUnique/index.ts

@@ -3,13 +3,31 @@ import { computed } from 'vue-demi'
 import type { MaybeComputedRef } from '../utils'
 import { resolveUnref } from '../resolveUnref'
 
+export interface UseArrayUniqueOptions {
+  /**
+   * Use that object property for deduplication
+   */
+  property?: string
+}
+
+export function useArrayUnique<T = any>(list: MaybeComputedRef<MaybeComputedRef<T>[]>, property?: string): ComputedRef<T[]>
+export function useArrayUnique<T = any>(list: MaybeComputedRef<MaybeComputedRef<T>[]>, options?: UseArrayUniqueOptions): ComputedRef<T[]>
+
 /**
  * reactive unique array
  * @see https://vueuse.org/useArrayUnique
  * @param {Array} list - the array was called upon.
  * @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)))])
+export function useArrayUnique<T>(...args: any[]): ComputedRef<T[]> {
+  const [list] = args
+  let options = args[1] ?? { property: null }
+  if (typeof options === 'string')
+    options = { property: options }
+
+  if (typeof options.property === 'string') {
+    const identifiers = [...new Set<T>(resolveUnref(list).map((element: any) => resolveUnref(element)?.[options.property]))]
+    return computed<T[]>(() => identifiers.map(identifier => resolveUnref(list).find((element: any) => resolveUnref(element)?.[options.property] === identifier)))
+  }
+  return computed<T[]>(() => [...new Set<T>(resolveUnref(list).map((element: any) => resolveUnref(element)))])
 }