feat(VSelects): add itemType prop

closes #21666

Author: KaelWD

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -495,13 +495,13 @@ export const VAutocomplete = genericComponent<new <
                             onClick: () => select(item, null),
                           })
 
-                          if (item.raw?.type === 'divider') {
+                          if (item.type === 'divider') {
                             return slots.divider?.({ props: item.raw, index }) ?? (
                               <VDivider { ...item.props } key={ `divider-${index}` } />
                             )
                           }
 
-                          if (item.raw?.type === 'subheader') {
+                          if (item.type === 'subheader') {
                             return slots.subheader?.({ props: item.raw, index }) ?? (
                               <VListSubheader { ...item.props } key={ `subheader-${index}` } />
                             )

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -541,13 +541,13 @@ export const VCombobox = genericComponent<new <
                             onClick: () => select(item, null),
                           })
 
-                          if (item.raw?.type === 'divider') {
+                          if (item.type === 'divider') {
                             return slots.divider?.({ props: item.raw, index }) ?? (
                               <VDivider { ...item.props } key={ `divider-${index}` } />
                             )
                           }
 
-                          if (item.raw?.type === 'subheader') {
+                          if (item.type === 'subheader') {
                             return slots.subheader?.({ props: item.raw, index }) ?? (
                               <VListSubheader { ...item.props } key={ `subheader-${index}` } />
                             )

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -470,13 +470,13 @@ export const VSelect = genericComponent<new <
                             onClick: () => select(item, null),
                           })
 
-                          if (item.raw?.type === 'divider') {
+                          if (item.type === 'divider') {
                             return slots.divider?.({ props: item.raw, index }) ?? (
                               <VDivider { ...item.props } key={ `divider-${index}` } />
                             )
                           }
 
-                          if (item.raw?.type === 'subheader') {
+                          if (item.type === 'subheader') {
                             return slots.subheader?.({ props: item.raw, index }) ?? (
                               <VListSubheader { ...item.props } key={ `subheader-${index}` } />
                             )

packages/vuetify/src/composables/filter.tsx

@@ -35,6 +35,7 @@ export interface FilterProps {
 export interface InternalItem<T = any> {
   value: any
   raw: T
+  type?: string
 }
 
 // Composables
@@ -102,7 +103,7 @@ export function filterItems (
 
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
       if (typeof item === 'object') {
-        if (['divider', 'subheader'].includes(item.raw?.type)) {
+        if (item.type === 'divider' || item.type === 'subheader') {
           continue
         }
 

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

@@ -14,7 +14,8 @@ export interface ListItem<T = any> extends InternalItem<T> {
     title: string
     value: any
   }
-  children?: ListItem<T>[]
+  children: ListItem<T>[] | undefined
+  type: string
 }
 
 export interface ItemProps {
@@ -23,6 +24,7 @@ export interface ItemProps {
   itemValue: SelectItemKey
   itemChildren: SelectItemKey
   itemProps: SelectItemKey
+  itemType: SelectItemKey
   returnObject: boolean
   valueComparator: typeof deepEqual | undefined
 }
@@ -49,6 +51,10 @@ export const makeItemsProps = propsFactory({
     type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,
     default: 'props',
   },
+  itemType: {
+    type: [Boolean, String, Array, Function] as PropType<SelectItemKey>,
+    default: 'type',
+  },
   returnObject: Boolean,
   valueComparator: Function as PropType<typeof deepEqual>,
 }, 'list-items')
@@ -57,6 +63,7 @@ export function transformItem (props: Omit<ItemProps, 'items'>, item: any): List
   const title = getPropertyFromItem(item, props.itemTitle, item)
   const value = getPropertyFromItem(item, props.itemValue, title)
   const children = getPropertyFromItem(item, props.itemChildren)
+  const type = getPropertyFromItem(item, props.itemType, 'item')
   const itemProps = props.itemProps === true
     ? typeof item === 'object' && item != null && !Array.isArray(item)
       ? 'children' in item
@@ -72,10 +79,11 @@ export function transformItem (props: Omit<ItemProps, 'items'>, item: any): List
   }
 
   return {
+    type,
     title: String(_props.title ?? ''),
     value: _props.value,
     props: _props,
-    children: Array.isArray(children) ? transformItems(props, children) : undefined,
+    children: type === 'item' && Array.isArray(children) ? transformItems(props, children) : undefined,
     raw: item,
   }
 }
@@ -86,6 +94,7 @@ export function transformItems (props: Omit<ItemProps, 'items'>, items: ItemProp
     'itemValue',
     'itemChildren',
     'itemProps',
+    'itemType',
     'returnObject',
     'valueComparator',
   ])
@@ -140,6 +149,7 @@ export function useItems (props: ItemProps) {
       'itemValue',
       'itemChildren',
       'itemProps',
+      'itemType',
       'returnObject',
       'valueComparator',
     ])