diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx index ec51bda0e14..13b0ba18c4d 100644 --- a/packages/vuetify/src/components/VList/VListItem.tsx +++ b/packages/vuetify/src/components/VList/VListItem.tsx @@ -35,6 +35,11 @@ import type { PropType } from 'vue' import type { RippleDirectiveBinding } from '@/directives/ripple' type ListItemSlot = { + index?: Number + depth?: Number + path?: Number[] + isFirst?: boolean + isLast?: boolean isActive: boolean isSelected: boolean isIndeterminate: boolean diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx index 85bf5e3c4d1..a10199a7f12 100644 --- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx +++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx @@ -28,6 +28,16 @@ export const makeVTreeviewChildrenProps = propsFactory({ }, items: Array as PropType, selectable: Boolean, + index: Number, + parentIndex: Number, + depth: { + type: Number, + default: 0, + }, + path: { + type: Array as PropType, + default: () => [], + }, }, 'VTreeviewChildren') export const VTreeviewChildren = genericComponent( @@ -66,11 +76,20 @@ export const VTreeviewChildren = genericComponent slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => { + return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }, index) => { const loading = isLoading.value === item.value + + const treeItemProps = { + index, + depth: props.depth, + isFirst: index === 0, + isLast: props.items ? props.items.length - 1 === index : false, + path: [...props.path, index], + } + const slotsWithItem = { prepend: slots.prepend - ? slotProps => slots.prepend?.({ ...slotProps, item }) + ? slotProps => slots.prepend?.({ ...slotProps, ...treeItemProps, item }) : props.selectable ? ({ isSelected, isIndeterminate }) => ( ) : undefined, - append: slots.append ? slotProps => slots.append?.({ ...slotProps, item }) : undefined, + append: slots.append ? slotProps => slots.append?.({ ...slotProps, ...treeItemProps, item }) : undefined, title: slots.title ? slotProps => slots.title?.({ ...slotProps, item }) : undefined, } satisfies VTreeviewItem['$props']['$children'] const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps) - const treeviewChildrenProps = VTreeviewChildren.filterProps(props) + const treeviewChildrenProps = VTreeviewChildren.filterProps({ ...props, ...treeItemProps }) return children ? ( ) : ( slots.item?.({ props: itemProps }) ?? ( - - )) + + ) + ) }) }, })