feat(VTreeview): support item-type (#21709)

Co-authored-by: Kael <[email protected]>

Author: J-Sek

packages/vuetify/src/components/VTreeview/VTreeview.tsx

@@ -45,7 +45,7 @@ export const makeVTreeviewProps = propsFactory({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true,
-  }), ['itemType', 'nav', 'openStrategy']),
+  }), ['nav', 'openStrategy']),
 
   modelValue: Array,
 }, 'VTreeview')

packages/vuetify/src/components/VTreeview/VTreeviewChildren.tsx

@@ -2,14 +2,16 @@
 import { VTreeviewGroup } from './VTreeviewGroup'
 import { makeVTreeviewItemProps, VTreeviewItem } from './VTreeviewItem'
 import { VCheckboxBtn } from '@/components/VCheckbox'
+import { VDivider } from '@/components/VDivider'
+import { VListSubheader } from '@/components/VList'
 
 // Composables
 import { makeDensityProps } from '@/composables/density'
 import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { computed, reactive, ref, toRaw } from 'vue'
-import { genericComponent, getIndentLines, pick, propsFactory } from '@/util'
+import { genericComponent, getIndentLines, pick, propsFactory, renderSlot } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -30,6 +32,8 @@ export type VTreeviewChildrenSlots<T> = {
     item: T
     internalItem: InternalListItem<T>
   }
+  divider: { props: InternalListItem['props'] }
+  subheader: { props: InternalListItem['props'] }
 }
 
 export const makeVTreeviewChildrenProps = propsFactory({
@@ -217,16 +221,34 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
             ),
           }}
         </VTreeviewGroup>
-      ) : (
-        slots.item?.({ props: itemProps, item: item.raw, internalItem: item }) ?? (
-          <VTreeviewItem
-            { ...itemProps }
-            hideActions={ props.hideActions }
-            indentLines={ indentLines.leaf }
-            value={ props.returnObject ? toRaw(item.raw) : itemProps.value }
-            v-slots={ slotsWithItem }
-          />
-        ))
+      ) : renderSlot(
+        slots.item,
+        { props: itemProps, item: item.raw, internalItem: item },
+        () => {
+          if (item.type === 'divider') {
+            return renderSlot(
+              slots.divider,
+              { props: item.raw },
+              () => <VDivider { ...item.props } />,
+            )
+          }
+          if (item.type === 'subheader') {
+            return renderSlot(
+              slots.subheader,
+              { props: item.raw },
+              () => <VListSubheader { ...item.props } />,
+            )
+          }
+          return (
+            <VTreeviewItem
+              { ...itemProps }
+              hideActions={ props.hideActions }
+              indentLines={ indentLines.leaf }
+              value={ props.returnObject ? toRaw(item.raw) : itemProps.value }
+              v-slots={ slotsWithItem }
+            />
+          )
+        })
     })
   },
 })

packages/vuetify/src/composables/__tests__/filter.spec.ts

@@ -9,6 +9,7 @@ import { deepEqual } from '@/util'
 const itemProps = {
   itemTitle: 'title',
   itemValue: 'value',
+  itemType: 'type',
   itemChildren: 'children',
   itemProps: 'props',
   returnObject: false,

packages/vuetify/src/composables/__tests__/list-items.spec.ts

@@ -8,6 +8,7 @@ describe('list-items', () => {
   const defaults = {
     itemTitle: 'title',
     itemValue: 'value',
+    itemType: 'type',
     itemChildren: 'children',
     itemProps: () => ({}),
     returnObject: false,

packages/vuetify/src/composables/list-items.ts

@@ -24,7 +24,7 @@ export interface ItemProps {
   itemValue: SelectItemKey
   itemChildren: SelectItemKey
   itemProps: SelectItemKey
-  itemType?: SelectItemKey
+  itemType: SelectItemKey
   returnObject: boolean
   valueComparator: typeof deepEqual | undefined
 }

packages/vuetify/src/util/helpers.ts

@@ -721,6 +721,15 @@ export function ensureValidVNode (vnodes: VNodeArrayChildren): VNodeArrayChildre
     : null
 }
 
+type Slot<T> = [T] extends [never] ? () => VNodeChild : (arg: T) => VNodeChild
+
+export function renderSlot <T> (slot: Slot<never> | undefined, fallback?: Slot<never> | undefined): VNodeChild
+export function renderSlot <T> (slot: Slot<T> | undefined, props: T, fallback?: Slot<T> | undefined): VNodeChild
+export function renderSlot (slot?: Slot<unknown>, props?: unknown, fallback?: Slot<unknown>) {
+  // TODO: check if slot returns elements: #18308
+  return slot?.(props) ?? fallback?.(props)
+}
+
 export function defer (timeout: number, cb: () => void) {
   if (!IN_BROWSER || timeout === 0) {
     cb()