From 182b4769e4dfa7dd80426d18360537f448aa6aaa Mon Sep 17 00:00:00 2001
From: cmgdragon <carlos_ole1996@hotmail.com>
Date: Fri, 26 Apr 2024 12:14:52 +0200
Subject: [PATCH] feat(VDataTable): enhance data-table color prop

---
 .../VDataTable/VDataTableFooter.tsx           |  6 +++--
 .../VDataTable/VDataTableHeaders.tsx          | 24 +++++++++++--------
 .../components/VDataTable/VDataTableRow.tsx   |  3 +++
 .../components/VDataTable/VDataTableRows.tsx  |  2 ++
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
index 799c7a4f492..42b57f5250a 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableFooter.tsx
@@ -12,12 +12,13 @@ import { useLocale } from '@/composables/locale'
 
 // Utilities
 import { computed } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
 
 export const makeVDataTableFooterProps = propsFactory({
+  color: String,
   prevIcon: {
     type: IconValue,
     default: '$prev',
@@ -110,6 +111,7 @@ export const VDataTableFooter = genericComponent<{ prepend: never }>()({
 
             <VSelect
               items={ itemsPerPageOptions.value }
+              itemColor={ props.color }
               modelValue={ itemsPerPage.value }
               onUpdate:modelValue={ v => setItemsPerPage(Number(v)) }
               density="compact"
@@ -137,7 +139,7 @@ export const VDataTableFooter = genericComponent<{ prepend: never }>()({
               showFirstLastPage
               totalVisible={ props.showCurrentPage ? 1 : 0 }
               variant="plain"
-              { ...paginationProps }
+              { ...omit(paginationProps, ['color']) }
             ></VPagination>
           </div>
         </div>
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
index 81c7a7d2d52..843ad3a2d36 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -204,6 +204,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               if (column.key === 'data-table-select') {
                 return slots['header.data-table-select']?.(columnSlotProps) ?? (showSelectAll.value && (
                   <VCheckboxBtn
+                    color={ props.color }
                     density={ props.density }
                     modelValue={ allSelected.value }
                     indeterminate={ someSelected.value && !allSelected.value }
@@ -247,14 +248,6 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
         return columns.value.filter(column => column?.sortable && !props.disableSort)
       })
 
-      const appendIcon = computed(() => {
-        const showSelectColumn = columns.value.find(column => column.key === 'data-table-select')
-
-        if (showSelectColumn == null) return
-
-        return allSelected.value ? '$checkboxOn' : someSelected.value ? '$checkboxIndeterminate' : '$checkboxOff'
-      })
-
       return (
         <VDataTableColumn
           tag="th"
@@ -267,6 +260,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           <div class="v-data-table-header__content">
             <VSelect
               chips
+              color={ props.color }
               class="v-data-table__td-sort-select"
               clearable
               density="default"
@@ -275,10 +269,18 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               multiple={ props.multiSort }
               variant="underlined"
               onClick:clear={ () => sortBy.value = [] }
-              appendIcon={ appendIcon.value }
               onClick:append={ () => selectAll(!allSelected.value) }
             >
               {{
+                append: () => (
+                  <VCheckboxBtn
+                    color={ props.color }
+                    density="compact"
+                    modelValue={ allSelected.value }
+                    indeterminate={ someSelected.value && !allSelected.value }
+                    onUpdate:modelValue={ selectAll }
+                  />
+                ),
                 chip: props => (
                   <VChip
                     onClick={ props.item.raw?.sortable ? () => toggleSort(props.item.raw) : undefined }
@@ -329,7 +331,9 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                   name="v-data-table-progress"
                   absolute
                   active
-                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }
+                  color={ typeof props.loading === 'boolean' || props.loading === 'true'
+                    ? props.color
+                    : props.loading }
                   indeterminate
                   v-slots={{ default: slots.loader }}
                 />
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
index 93b6f01e12a..8e2ce79e20b 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableRow.tsx
@@ -37,6 +37,7 @@ export type VDataTableRowSlots<T> = {
 }
 
 export const makeVDataTableRowProps = propsFactory({
+  color: String,
   index: Number,
   item: Object as PropType<DataTableItem>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
@@ -163,12 +164,14 @@ export const VDataTableRow = genericComponent<new <T>(
                     return slots['item.data-table-select']?.({
                       ...slotProps,
                       props: {
+                        color: props.color,
                         disabled: !item.selectable,
                         modelValue: isSelected([item]),
                         onClick: withModifiers(() => toggleSelect(item), ['stop']),
                       },
                     }) ?? (
                       <VCheckboxBtn
+                        color={ props.color }
                         disabled={ !item.selectable }
                         density={ props.density }
                         modelValue={ isSelected([item]) }
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
index ab6c34ecb46..b1936f8c71d 100644
--- a/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
+++ b/packages/vuetify/src/components/VDataTable/VDataTableRows.tsx
@@ -32,6 +32,7 @@ export type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableR
 }
 
 export const makeVDataTableRowsProps = propsFactory({
+  color: String,
   loading: [Boolean, String],
   loadingText: {
     type: String,
@@ -162,6 +163,7 @@ export const VDataTableRows = genericComponent<new <T>(
                   } : undefined,
                   index,
                   item,
+                  color: props.color,
                   cellProps: props.cellProps,
                   collapseIcon: props.collapseIcon,
                   expandIcon: props.expandIcon,