feat(VDatatable): to solve #11117

vuetifyjs · Nov 11, 2024 · d6e7296 · d6e7296
1 parent 741f771
commit d6e7296
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx b/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx
@@ -112,10 +112,10 @@ export const VDataIterator = genericComponent<new <T> (
     const { items } = useDataIteratorItems(props)
     const { filteredItems } = useFilter(props, items, search, { transform: item => item.raw })
 
-    const { sortBy, multiSort, mustSort } = createSort(props)
+    const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props)
     const { page, itemsPerPage } = createPagination(props)
 
-    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst, page })
     const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy })
 
     const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, { transform: item => item.raw })

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx
@@ -128,7 +128,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
 
   setup (props, { attrs, slots }) {
     const { groupBy } = createGroupBy(props)
-    const { sortBy, multiSort, mustSort } = createSort(props)
+    const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props)
     const { page, itemsPerPage } = createPagination(props)
     const { disableSort } = toRefs(props)
 
@@ -152,7 +152,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
       customKeyFilter: filterFunctions,
     })
 
-    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst, page })
     const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy, disableSort })
 
     const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, {

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -62,6 +62,7 @@ export const makeVDataTableHeadersProps = propsFactory({
   sticky: Boolean,
   disableSort: Boolean,
   multiSort: Boolean,
+  sortDescendingFirst: Boolean,
   sortAscIcon: {
     type: IconValue,
     default: '$sortAsc',
@@ -103,9 +104,13 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     function getSortIcon (column: InternalDataTableHeader) {
       const item = sortBy.value.find(item => item.key === column.key)
 
-      if (!item) return props.sortAscIcon
+      const firstIcon = props.sortDescendingFirst ? props.sortDescIcon : props.sortAscIcon
+      const secondIcon = props.sortDescendingFirst ? props.sortAscIcon : props.sortDescIcon
+      const firstOrder = props.sortDescendingFirst ? 'desc' : 'asc'
 
-      return item.order === 'asc' ? props.sortAscIcon : props.sortDescIcon
+      if (!item) return firstIcon
+
+      return item.order === firstOrder ? firstIcon : secondIcon
     }
 
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/components/VDataTable/VDataTableServer.tsx
@@ -67,7 +67,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
 
   setup (props, { attrs, slots }) {
     const { groupBy } = createGroupBy(props)
-    const { sortBy, multiSort, mustSort } = createSort(props)
+    const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props)
     const { page, itemsPerPage } = createPagination(props)
     const { disableSort } = toRefs(props)
     const itemsLength = computed(() => parseInt(props.itemsLength, 10))
@@ -80,7 +80,7 @@ export const VDataTableServer = genericComponent<new <T extends readonly any[],
 
     const { items } = useDataTableItems(props, columns)
 
-    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, page })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst, page })
 
     const { opened, isGroupOpen, toggleGroup, extractRows } = provideGroupBy({ groupBy, sortBy, disableSort })
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx
@@ -84,7 +84,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
 
   setup (props, { attrs, slots }) {
     const { groupBy } = createGroupBy(props)
-    const { sortBy, multiSort, mustSort } = createSort(props)
+    const { sortBy, multiSort, mustSort, sortDescendingFirst } = createSort(props)
     const { disableSort } = toRefs(props)
 
     const {
@@ -106,7 +106,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
       customKeyFilter: filterFunctions,
     })
 
-    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort })
+    const { toggleSort } = provideSort({ sortBy, multiSort, mustSort, sortDescendingFirst })
     const { sortByWithGroups, opened, extractRows, isGroupOpen, toggleGroup } = provideGroupBy({ groupBy, sortBy, disableSort })
 
     const { sortedItems } = useSortedItems(props, filteredItems, sortByWithGroups, {

diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts
@@ -19,6 +19,7 @@ export const makeDataTableSortProps = propsFactory({
   customKeySort: Object as PropType<Record<string, DataTableCompareFunction>>,
   multiSort: Boolean,
   mustSort: Boolean,
+  sortDescendingFirst: Boolean,
 }, 'DataTable-sort')
 
 const VDataTableSortSymbol: InjectionKey<{
@@ -34,23 +35,28 @@ type SortProps = {
   'onUpdate:sortBy': ((value: any) => void) | undefined
   mustSort: boolean
   multiSort: boolean
+  sortDescendingFirst: boolean
 }
 
 export function createSort (props: SortProps) {
   const sortBy = useProxiedModel(props, 'sortBy')
   const mustSort = toRef(props, 'mustSort')
   const multiSort = toRef(props, 'multiSort')
+  const sortDescendingFirst = toRef(props, 'sortDescendingFirst')
 
-  return { sortBy, mustSort, multiSort }
+  return { sortBy, mustSort, multiSort, sortDescendingFirst }
 }
 
 export function provideSort (options: {
   sortBy: Ref<readonly SortItem[]>
   mustSort: Ref<boolean>
   multiSort: Ref<boolean>
+  sortDescendingFirst: Ref<boolean>
   page?: Ref<number>
 }) {
-  const { sortBy, mustSort, multiSort, page } = options
+  const { sortBy, mustSort, multiSort, sortDescendingFirst, page } = options
+  const firstOrder = sortDescendingFirst.value ? 'desc' : 'asc'
+  const secondOrder = sortDescendingFirst.value ? 'asc' : 'desc'
 
   const toggleSort = (column: InternalDataTableHeader) => {
     if (column.key == null) return
@@ -59,16 +65,16 @@ export function provideSort (options: {
     const item = newSortBy.find(x => x.key === column.key)
 
     if (!item) {
-      if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: 'asc' }]
-      else newSortBy = [{ key: column.key, order: 'asc' }]
-    } else if (item.order === 'desc') {
+      if (multiSort.value) newSortBy = [...newSortBy, { key: column.key, order: firstOrder }]
+      else newSortBy = [{ key: column.key, order: firstOrder }]
+    } else if (item.order === secondOrder) {
       if (mustSort.value) {
-        item.order = 'asc'
+        item.order = firstOrder
       } else {
         newSortBy = newSortBy.filter(x => x.key !== column.key)
       }
     } else {
-      item.order = 'desc'
+      item.order = secondOrder
     }
 
     sortBy.value = newSortBy