fix(VDataTable): add missing slot types

vuetifyjs · Feb 28, 2023 · 3382f5d · 3382f5d
1 parent 151b872
commit 3382f5d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
@@ -13,16 +13,41 @@ import { useGroupBy } from './composables/group'
 import { genericComponent, useRender } from '@/util'
 
 // Types
-import type { DataTableItem, InternalDataTableItem } from './types'
+import type { DataTableItem, GroupHeaderItem, InternalDataTableHeader, InternalDataTableItem } from './types'
 import type { PropType } from 'vue'
 
+type GroupHeaderSlot = {
+  index: number
+  item: GroupHeaderItem
+  columns: InternalDataTableHeader[]
+  isExpanded: (item: DataTableItem) => boolean
+  toggleExpand: (item: DataTableItem) => void
+  isSelected: (items: DataTableItem[]) => boolean
+  toggleSelect: (item: DataTableItem) => void
+  toggleGroup: (group: GroupHeaderItem) => void
+  isGroupOpen: (group: GroupHeaderItem) => boolean
+}
+
+type ItemSlot = {
+  index: number
+  item: InternalDataTableItem
+  columns: InternalDataTableHeader[]
+  isExpanded: (item: DataTableItem) => boolean
+  toggleExpand: (item: DataTableItem) => void
+  isSelected: (items: DataTableItem[]) => boolean
+  toggleSelect: (item: DataTableItem) => void
+}
+
 export type VDataTableRowsSlots = {
   default: []
-  item: [InternalDataTableItem]
+  item: [ItemSlot]
   loading: []
-  'group-header': [InternalDataTableItem]
+  'group-header': [GroupHeaderSlot]
   'no-data': []
-}
+  'expanded-row': [ItemSlot]
+  'item.data-table-select': [ItemSlot]
+  'item.data-table-expand': [ItemSlot]
+} & { [key: `item.${string}`]: [ItemSlot] }
 
 export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
   name: 'VDataTableRows',
@@ -88,7 +113,7 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
               toggleSelect,
               toggleGroup,
               isGroupOpen,
-            }) : (
+            } as GroupHeaderSlot) : (
               <VDataTableGroupHeaderRow
                 key={ `group-header_${item.id}` }
                 item={ item }
@@ -97,17 +122,19 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
             )
           }
 
+          const slotProps = {
+            index,
+            item,
+            columns: columns.value,
+            isExpanded,
+            toggleExpand,
+            isSelected,
+            toggleSelect,
+          } as ItemSlot
+
           return (
             <>
-              { slots.item ? slots.item({
-                index,
-                item,
-                columns: columns.value,
-                isExpanded,
-                toggleExpand,
-                isSelected,
-                toggleSelect,
-              }) : (
+              { slots.item ? slots.item(slotProps) : (
                 <VDataTableRow
                   key={ `item_${item.value}` }
                   onClick={ (event: Event) => {
@@ -122,7 +149,7 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
                 />
               ) }
 
-              { isExpanded(item) && slots['expanded-row']?.({ item, columns: columns.value }) }
+              { isExpanded(item) && slots['expanded-row']?.(slotProps) }
             </>
           )
         }) }

diff --git a/packages/vuetify/src/util/defineComponent.tsx b/packages/vuetify/src/util/defineComponent.tsx
@@ -114,7 +114,7 @@ export type SlotsToProps<T extends Record<string, any>> = T extends Record<strin
 
 type Slot<T extends any[] = any[]> = (...args: T) => VNodeChild
 export type MakeSlots<T extends Record<string, any[]>> = {
-  [K in keyof T]?: Slot<T[K]>
+  [K in keyof T]: Slot<T[K]>
 }
 
 export type GenericSlot = SlotsToProps<{ default: [] }>