feat(VDataTable): highlight filter matches

Author: KaelWD

packages/vuetify/src/components/VDataTable/VDataTable.sass

@@ -164,3 +164,6 @@
 
       &-active
         color: $data-table-header-mobile-chip-icon-color-active
+
+.v-data-table__mask
+  background: rgb(var(--v-theme-on-surface-variant))

packages/vuetify/src/components/VDataTable/VDataTable.tsx

@@ -147,7 +147,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
     const { items } = useDataTableItems(props, columns)
 
     const search = toRef(props, 'search')
-    const { filteredItems } = useFilter(props, items, search, {
+    const { filteredItems, getMatches } = useFilter(props, items, search, {
       transform: item => item.columns,
       customKeyFilter: filterFunctions,
     })
@@ -262,6 +262,7 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                         { ...attrs }
                         { ...dataTableRowsProps }
                         items={ paginatedItems.value }
+                        getMatches={ getMatches }
                         v-slots={ slots }
                       />
                     )}

packages/vuetify/src/components/VDataTable/VDataTableRow.tsx

@@ -9,6 +9,7 @@ import { useHeaders } from './composables/headers'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
+import { highlightResult } from '@/composables/filter'
 
 // Utilities
 import { toDisplayString, withModifiers } from 'vue'
@@ -34,6 +35,7 @@ export const makeVDataTableRowProps = propsFactory({
   index: Number,
   item: Object as PropType<DataTableItem>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
+  getMatches: Function,
   onClick: EventProp<[MouseEvent]>(),
   onContextmenu: EventProp<[MouseEvent]>(),
   onDblclick: EventProp<[MouseEvent]>(),
@@ -159,7 +161,11 @@ export const VDataTableRow = genericComponent<new <T>(
                     )
                   }
 
-                  const displayValue = toDisplayString(slotProps.value)
+                  const displayValue = highlightResult(
+                    'v-data-table',
+                    toDisplayString(slotProps.value),
+                    props.getMatches!(item)?.[column.key!]
+                  )
 
                   return !mobile.value ? displayValue : (
                     <>

packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

@@ -47,6 +47,7 @@ export const makeVDataTableRowsProps = propsFactory({
   },
   rowProps: [Object, Function] as PropType<RowProps<any>>,
   cellProps: [Object, Function] as PropType<CellProps<any>>,
+  getMatches: Function,
 
   ...makeDisplayProps(),
 }, 'VDataTableRows')
@@ -164,6 +165,7 @@ export const VDataTableRows = genericComponent<new <T>(
                 { slots.item ? slots.item(itemSlotProps) : (
                   <VDataTableRow
                     { ...itemSlotProps.props }
+                    getMatches={ props.getMatches }
                     v-slots={ slots }
                   />
                 )}

packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx

@@ -104,7 +104,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
     const { items } = useDataTableItems(props, columns)
 
     const search = toRef(props, 'search')
-    const { filteredItems } = useFilter(props, items, search, {
+    const { filteredItems, getMatches } = useFilter(props, items, search, {
       transform: item => item.columns,
       customKeyFilter: filterFunctions,
     })
@@ -231,6 +231,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                         { ...attrs }
                         { ...dataTableRowsProps }
                         items={ displayItems.value }
+                        getMatches={ getMatches }
                       >
                         {{
                           ...slots,

packages/vuetify/src/composables/filter.tsx

@@ -160,7 +160,7 @@ export function useFilter <T extends InternalItem> (
     customKeyFilter?: MaybeRef<FilterKeyFunctions | undefined>
   }
 ) {
-  const filteredItems= shallowRef<T[]>([])
+  const filteredItems = shallowRef<T[]>([])
   const filteredMatches = shallowRef(new Map<unknown, Record<string, FilterMatchArrayMultiple | undefined>>())
   const transformedItems = computed(() => (
     options?.transform