diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx index 6a8d08f7ce2..3ff619cbdc5 100644 --- 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()({ name: 'VDataTableRows', @@ -88,7 +113,7 @@ export const VDataTableRows = genericComponent()({ toggleSelect, toggleGroup, isGroupOpen, - }) : ( + } as GroupHeaderSlot) : ( ()({ ) } + 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) : ( { @@ -122,7 +149,7 @@ export const VDataTableRows = genericComponent()({ /> ) } - { 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 index 10109d5372e..7a1c1bee2ab 100644 --- a/packages/vuetify/src/util/defineComponent.tsx +++ b/packages/vuetify/src/util/defineComponent.tsx @@ -114,7 +114,7 @@ export type SlotsToProps> = T extends Record = (...args: T) => VNodeChild export type MakeSlots> = { - [K in keyof T]?: Slot + [K in keyof T]: Slot } export type GenericSlot = SlotsToProps<{ default: [] }>