feat(VDataTable): Add checkboxColor prop (#11975)

resolves #8348

Author: MaazDev

packages/api-generator/src/locale/en/v-data-table.json

@@ -1,6 +1,7 @@
 {
   "props": {
     "calculateWidths": "Enables calculation of column widths. `widths` property will be available in select scoped slots",
+    "checkboxColor": "Set the color of the checkboxes (showSelect must be used)",
     "customFilter": "Function to filter items",
     "customGroup": "Function used to group items",
     "customSort": "Function used to sort items",

packages/api-generator/src/maps/v-data.js

@@ -30,6 +30,7 @@ const DataProps = [
   { name: 'itemsPerPage', source: 'v-data' },
   { name: 'groupBy', source: 'v-data' },
   { name: 'groupDesc', source: 'v-data' },
+  { name: 'checkboxColor', source: 'v-data', type: 'string' },
   { name: 'customGroup', source: 'v-data', default: 'gh:groupItems', example: '(items: any[], groupBy: string[], groupDesc: boolean[]) => Record<string, any[]>' },
   { name: 'locale', source: 'v-data' },
   { name: 'disableSort', source: 'v-data' },

packages/vuetify/src/components/VDataTable/VDataTable.ts

@@ -88,6 +88,7 @@ export default mixins(
       default: () => [],
     } as PropValidator<DataTableHeader[]>,
     showSelect: Boolean,
+    checkboxColor: String,
     showExpand: Boolean,
     showGroupBy: Boolean,
     // TODO: Fix
@@ -262,6 +263,7 @@ export default mixins(
           options: props.options,
           mobile: this.isMobile,
           showGroupBy: this.showGroupBy,
+          checkboxColor: this.checkboxColor,
           someItems: this.someItems,
           everyItem: this.everyItem,
           singleSelect: this.singleSelect,
@@ -467,6 +469,7 @@ export default mixins(
           props: {
             value: data.isSelected,
             disabled: !this.isSelectable(item),
+            color: this.checkboxColor ?? '',
           },
           on: {
             input: (val: boolean) => data.select(val),

packages/vuetify/src/components/VDataTable/mixins/__tests__/__snapshots__/header.spec.ts.snap

@@ -51,23 +51,23 @@ exports[`VDataTable/header.ts should generate select 3`] = `
 exports[`VDataTable/header.ts should generate select scoped slot 1`] = `
 <div>
   <div class="test">
-    {"props":{"value":false,"indeterminate":false},"on":{}}
+    {"props":{"value":false,"indeterminate":false,"color":""},"on":{}}
   </div>
 </div>
 `;
 
 exports[`VDataTable/header.ts should generate select scoped slot 2`] = `
 <div>
   <div class="test">
-    {"props":{"value":true,"indeterminate":false},"on":{}}
+    {"props":{"value":true,"indeterminate":false,"color":""},"on":{}}
   </div>
 </div>
 `;
 
 exports[`VDataTable/header.ts should generate select scoped slot 3`] = `
 <div>
   <div class="test">
-    {"props":{"value":false,"indeterminate":true},"on":{}}
+    {"props":{"value":false,"indeterminate":true,"color":""},"on":{}}
   </div>
 </div>
 `;

packages/vuetify/src/components/VDataTable/mixins/header.ts

@@ -38,6 +38,7 @@ export default mixins<options>().extend({
         mustSort: false,
       }),
     } as PropValidator<DataOptions>,
+    checkboxColor: String,
     sortIcon: {
       type: String,
       default: '$sort',
@@ -55,6 +56,7 @@ export default mixins<options>().extend({
         props: {
           value: this.everyItem,
           indeterminate: !this.everyItem && this.someItems,
+          color: this.checkboxColor ?? '',
         },
         on: {
           input: (v: boolean) => this.$emit('toggle-select-all', v),