feat(useSorted): new function

packages/core/index.ts

@@ -94,6 +94,7 @@ export * from './useScroll'
 export * from './useScrollLock'
 export * from './useSessionStorage'
 export * from './useShare'
+export * from './useSorted'
 export * from './useSpeechRecognition'
 export * from './useSpeechSynthesis'
 export * from './useStepper'

packages/core/useSorted/demo.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { rand } from '@vueuse/shared'
+import { computed, ref } from 'vue'
+import { useSorted } from '.'
+
+const objArr = [{
+  name: 'John',
+  age: 40,
+}, {
+  name: 'Jane',
+  age: 20,
+}, {
+  name: 'Joe',
+  age: 30,
+}, {
+  name: 'Jenny',
+  age: 22,
+}]
+const result2 = useSorted(objArr, {
+  compareFn: (a, b) => a.age - b.age,
+})
+
+const arrText = ref('')
+const inputArr = computed(() => arrText.value.split(','))
+const inputOut = useSorted(inputArr)
+
+function randomArr() {
+  const arr = []
+  for (let i = 0; i < rand(10, 20); i++)
+    arr.push(rand(0, 100))
+  arrText.value = arr.join(',')
+}
+
+randomArr()
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center">
+      input:
+      <input v-model="arrText" type="text">
+    </div>
+    <div>
+      <button @click="randomArr">
+        random
+      </button>
+    </div>
+    output: {{ inputOut }}
+  </div>
+
+  <div class="mt-10">
+    <div>object property sort:</div>
+    <div>input:</div>
+    <div>{{ objArr }}</div>
+    <div class="mt-5">
+      output:
+    </div>
+    <div>{{ result2 }}</div>
+  </div>
+</template>

packages/core/useSorted/index.md

@@ -0,0 +1,49 @@
+---
+category: Sort
+---
+
+# useSorted
+
+reactive sort array
+
+## Usage
+
+```ts
+import { quickSort, useSorted } from '@vueuse/core'
+
+// general sort
+const sorted = useSorted([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
+
+// object sort
+const objArr = [{
+  name: 'John',
+  age: 40,
+}, {
+  name: 'Jane',
+  age: 20,
+}, {
+  name: 'Joe',
+  age: 30,
+}, {
+  name: 'Jenny',
+  age: 22,
+}]
+const objSorted = useSorted(objArr, quickSort, {
+  compareFn: (a, b) => a.age - b.age,
+})
+```
+
+### useSortedWrapFn
+
+```ts
+const wrapFn = useSortedWrapFn<User>(quickSort, {
+  compareFn: (a, b) => a.age - b.age,
+})
+const sorted = wrapFn(objArr)
+
+// or
+const wrapFn = useSortedWrapFn<User>(quickSort)
+const sorted = wrapFn(objArr, {
+  compareFn: (a, b) => a.age - b.age,
+})
+```

packages/core/useSorted/index.test.ts

@@ -0,0 +1,79 @@
+import { unref } from 'vue'
+import { useSorted } from '.'
+
+interface User {
+  name: string
+  age: number
+}
+
+const arr = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
+const arrSorted = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+
+const objArr: User[] = [
+  {
+    name: 'John',
+    age: 40,
+  },
+  {
+    name: 'Jane',
+    age: 20,
+  },
+  {
+    name: 'Joe',
+    age: 30,
+  },
+  {
+    name: 'Jenny',
+    age: 22,
+  },
+]
+const objectSorted: User[] = [
+  {
+    name: 'Jane',
+    age: 20,
+  },
+  {
+    name: 'Jenny',
+    age: 22,
+  },
+  {
+    name: 'Joe',
+    age: 30,
+  },
+  {
+    name: 'John',
+    age: 40,
+  },
+]
+
+describe('useSorted', () => {
+  it('should be defined', () => {
+    expect(useSorted).toBeDefined()
+  })
+
+  it('should sort', () => {
+    const sorted = useSorted(arr)
+    expect(unref(sorted)).toMatchObject(arrSorted)
+  })
+
+  it('should pure sort function', () => {
+    const sorted = useSorted(arr)
+    expect(unref(sorted)).toMatchObject(arrSorted)
+  })
+
+  it('should dirty sort', () => {
+    const dirtyArr = [...arr]
+    const sorted = useSorted(dirtyArr, { dirty: true })
+
+    expect(unref(sorted)).toMatchObject(arrSorted)
+    expect(unref(dirtyArr)).toMatchObject(arrSorted)
+  })
+
+  it('should sort object', () => {
+    const sorted = useSorted(objArr, {
+      compareFn: (a, b) => a.age - b.age,
+    })
+
+    expect(unref(sorted)).toMatchObject(objectSorted)
+  })
+})

packages/core/useSorted/index.ts

@@ -0,0 +1,51 @@
+import { computed } from '@vue/reactivity'
+import type { MaybeRef } from '@vueuse/shared'
+import { isRef, unref, watchEffect } from 'vue-demi'
+
+export type UseSortedCompareFn<T> = (a: T, b: T) => number
+
+export type UseSortedFn<T> = (arr: T[], compareFn: UseSortedCompareFn<T>) => T[]
+
+export interface UseSortedOptions<T> {
+  /**
+   * sort algorithm
+   */
+  sortFn?: UseSortedFn<T>
+  /**
+   * compare function
+   */
+  compareFn?: UseSortedCompareFn<T>
+  /**
+   * change the value of the source array
+   * @default false
+   */
+  dirty?: boolean
+}
+
+const defaultSortFn = <T>(source: T[], compareFn: UseSortedCompareFn<T>): T[] => source.sort(compareFn)
+const defaultCompare: UseSortedCompareFn<number> = (a, b) => a - b
+
+/**
+ * reactive sort array
+ *
+ * @see https://vueuse.org/useSorted
+ * @param source source array
+ * @param options
+ */
+export function useSorted<T>(source: MaybeRef<T[]>, options: UseSortedOptions<T> = {}) {
+  const { sortFn = defaultSortFn, compareFn = defaultCompare, dirty = false } = options
+
+  if (!dirty)
+    return computed(() => sortFn(unref(source), compareFn as UseSortedCompareFn<T>))
+
+  // dirty
+  watchEffect(() => {
+    const result = sortFn(unref(source), compareFn as UseSortedCompareFn<T>)
+    if (isRef(source))
+      source.value = result
+    else
+      source.splice(0, source.length, ...result)
+  })
+
+  return source
+}