From 8508e849582279e1da94b82cffab48e6e6c05739 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 9 Jan 2024 12:05:32 +0100
Subject: [PATCH] chore(Table): rename columns `sortFn` to `sort`

---
 docs/content/4.data/1.table.md        |  8 +++---
 src/runtime/components/data/Table.vue | 37 ++++++++++++++-------------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index f3a0ae56..7bc21edb 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -28,7 +28,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 - `class` - The class to apply to the column cells.
-- `sortFn` - A function that is used to sort the column, comparable to what would be passed to the Javascript `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
+- `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison.
 
 ::component-example{class="grid"}
 ---
@@ -156,7 +156,7 @@ You can also customize the entire header cell, read more in the [Slots](#slots)
 
 Sometimes you will want to fetch new data depending on the sorted column and direction. You can use the `v-model:sort` to automatically update the `ref` reactive element every time the sorting changes on the Table. You may also use `@update:sort` to call your own function with the sorting data.
 
-For example, we can take advantage of `useLazyRefresh` computed URL to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
+For example, we can take advantage of the `useLazyFetch` computed to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
 
 ```vue
 <script setup>
@@ -168,9 +168,7 @@ const sort = ref({
 
 const columns = [...]
 
-const { data, pending } = useLazyFetch(() => {
-  return `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`
-})
+const { data, pending } = await useLazyFetch(`/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`)
 </script>
 
 <template>
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 0ac2698f..fad8efa5 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -87,6 +87,18 @@ function defaultComparator<T> (a: T, z: T): boolean {
   return a === z
 }
 
+function defaultSort (a: any, b: any, direction: 'asc' | 'desc') {
+  if (a === b) {
+    return 0
+  }
+
+  if (direction === 'asc') {
+    return a < b ? -1 : 1
+  } else {
+    return a > b ? -1 : 1
+  }
+}
+
 export default defineComponent({
   components: {
     UButton,
@@ -108,7 +120,7 @@ export default defineComponent({
       default: () => []
     },
     columns: {
-      type: Array as PropType<{ key: string, sortable?: boolean, sortFn?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
+      type: Array as PropType<{ key: string, sortable?: boolean, sort?: (a: any, b: any, direction: 'asc' | 'desc') => number, direction?: 'asc' | 'desc', class?: string, [key: string]: any }[]>,
       default: null
     },
     columnAttribute: {
@@ -156,23 +168,11 @@ export default defineComponent({
   setup (props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
-    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sortFn: defaultSortFn })))
+    const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort })))
 
     const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' }))
 
-    const defaultSort = { column: sort.value.column, direction: null }
-
-    function defaultSortFn (a: any, b: any, direction: 'asc' | 'desc') {
-      if (a === b) {
-        return 0
-      }
-
-      if (direction === 'asc') {
-        return a < b ? -1 : 1
-      } else {
-        return a > b ? -1 : 1
-      }
-    }
+    const savedSort = { column: sort.value.column, direction: null }
 
     const rows = computed(() => {
       if (!sort.value?.column) {
@@ -185,8 +185,9 @@ export default defineComponent({
         const aValue = get(a, column)
         const bValue = get(b, column)
 
-        const sortFn = columns.value.find((col) => col.key === column)?.sortFn ?? defaultSortFn
-        return sortFn(aValue, bValue, direction)
+        const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
+
+        return sort(aValue, bValue, direction)
       })
     })
 
@@ -232,7 +233,7 @@ export default defineComponent({
         const direction = !column.direction || column.direction === 'asc' ? 'desc' : 'asc'
 
         if (sort.value.direction === direction) {
-          sort.value = defu({}, defaultSort, { column: null, direction: 'asc' })
+          sort.value = defu({}, savedSort, { column: null, direction: 'asc' })
         } else {
           sort.value.direction = sort.value.direction === 'asc' ? 'desc' : 'asc'
         }