fix(VTreeview): faster interactions with large trees

Author: J-Sek

packages/api-generator/src/locale/en/VList.json

@@ -6,6 +6,7 @@
     "disabled": "Puts all children inputs into a disabled state.",
     "filterable": "**FOR INTERNAL USE ONLY** Prevents list item selection using [space] key and pass it back to the text input. Used internally for VAutocomplete and VCombobox.",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
+    "itemsRegistration": "When set to 'props', skips rendering collpased items/nodes (for significant performance gains). Does not support links, so you might need to set **item-value** to `href`, `to` or a custom resolver function.",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.",

packages/docs/src/data/new-in.json

@@ -182,6 +182,11 @@
       "glow": "3.8.0"
     }
   },
+  "VList": {
+    "props": {
+      "itemsRegistration": "3.11.0"
+    }
+  },
   "VListItem": {
     "props": {
       "baseColor": "3.3.0",
@@ -290,7 +295,8 @@
       "hideNoData": "3.10.0",
       "noDataText": "3.10.0",
       "separateRoots": "3.9.0",
-      "indentLines": "3.9.0"
+      "indentLines": "3.9.0",
+      "itemsRegistration": "3.11.0"
     },
     "slots": {
       "header": "3.10.0",

packages/vuetify/src/components/VList/VList.tsx

@@ -22,7 +22,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
-import { computed, ref, shallowRef, toRef } from 'vue'
+import { computed, ref, shallowRef, toRef, watch } from 'vue'
 import {
   EventProp,
   focusChild,
@@ -169,7 +169,35 @@ export const VList = genericComponent<new <
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
-    const { children, open, parents, select, getPath } = useNested(props)
+    const { children, disabled, open, parents, select, getPath } = useNested(props)
+
+    function flatten (items: InternalListItem<any>[]): InternalListItem<any>[] {
+      return [
+        ...items,
+        ...items.length ? flatten(items.flatMap(x => x.children ?? [])) : [],
+      ]
+    }
+
+    watch(items, val => {
+      if (props.itemsRegistration === 'render') return
+      const allNodes = flatten(val)
+      children.value = new Map(
+        allNodes
+          .filter(item => item.children)
+          .map(item => [item.value, item.children!.map(x => x.value)])
+      )
+      parents.value = new Map(
+        allNodes
+          .filter(item => !val.includes(item))
+          .map(item => [item.value, allNodes.find(x => x.children?.includes(item))?.value])
+      )
+      disabled.value = new Set(
+        allNodes
+          .filter(item => (item as any).disabled)
+          .map(item => item.value)
+      )
+    }, { immediate: true })
+
     const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined)
     const activeColor = toRef(() => props.activeColor)
     const baseColor = toRef(() => props.baseColor)

packages/vuetify/src/components/VList/VListGroup.tsx

@@ -6,13 +6,13 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { useList } from './list'
 import { makeComponentProps } from '@/composables/component'
 import { IconValue } from '@/composables/icons'
-import { useNestedGroupActivator, useNestedItem } from '@/composables/nested/nested'
+import { useNestedGroupActivator, useNestedItem, VNestedSymbol } from '@/composables/nested/nested'
 import { useSsrBoot } from '@/composables/ssrBoot'
 import { makeTagProps } from '@/composables/tag'
 import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, inject, toRef } from 'vue'
 import { defineComponent, genericComponent, propsFactory, useRender } from '@/util'
 
 export type VListGroupSlots = {
@@ -67,6 +67,9 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
     const list = useList()
     const { isBooted } = useSsrBoot()
 
+    const parent = inject(VNestedSymbol)
+    const renderWhenClosed = toRef(() => parent?.root?.itemsRegistration.value === 'render')
+
     function onClick (e: Event) {
       if (['INPUT', 'TEXTAREA'].includes((e.target as Element)?.tagName)) return
       open(!isOpen.value, e)
@@ -114,9 +117,16 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
         )}
 
         <MaybeTransition transition={{ component: VExpandTransition }} disabled={ !isBooted.value }>
-          <div class="v-list-group__items" role="group" aria-labelledby={ id.value } v-show={ isOpen.value }>
-            { slots.default?.() }
-          </div>
+          { renderWhenClosed.value
+            ? (
+            <div class="v-list-group__items" role="group" aria-labelledby={ id.value } v-show={ isOpen.value }>
+              { slots.default?.() }
+            </div>
+            ) : isOpen.value && (
+            <div class="v-list-group__items" role="group" aria-labelledby={ id.value }>
+              { slots.default?.() }
+            </div>
+            )}
         </MaybeTransition>
       </props.tag>
     ))

packages/vuetify/src/composables/nested/nested.ts

@@ -57,6 +57,7 @@ export type SelectStrategyProp =
   | SelectStrategy
   | ((mandatory: boolean) => SelectStrategy)
 export type OpenStrategyProp = 'single' | 'multiple' | 'list' | OpenStrategy
+export type ItemsRegistrationType = 'props' | 'render'
 
 export interface NestedProps {
   activatable: boolean
@@ -68,6 +69,7 @@ export interface NestedProps {
   selected: any
   opened: any
   mandatory: boolean
+  itemsRegistration: ItemsRegistrationType
   'onUpdate:activated': EventProp<[any]> | undefined
   'onUpdate:selected': EventProp<[any]> | undefined
   'onUpdate:opened': EventProp<[any]> | undefined
@@ -86,6 +88,7 @@ type NestedProvide = {
     activated: Ref<Set<unknown>>
     selected: Ref<Map<unknown, 'on' | 'off' | 'indeterminate'>>
     selectedValues: Ref<unknown[]>
+    itemsRegistration: Ref<ItemsRegistrationType>
     register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void
     unregister: (id: unknown) => void
     open: (id: unknown, value: boolean, event?: Event) => void
@@ -101,6 +104,7 @@ export const VNestedSymbol: InjectionKey<NestedProvide> = Symbol.for('vuetify:ne
 export const emptyNested: NestedProvide = {
   id: shallowRef(),
   root: {
+    itemsRegistration: ref('render'),
     register: () => null,
     unregister: () => null,
     children: ref(new Map()),
@@ -130,6 +134,10 @@ export const makeNestedProps = propsFactory({
   activated: null,
   selected: null,
   mandatory: Boolean,
+  itemsRegistration: {
+    type: String as PropType<ItemsRegistrationType>,
+    default: 'render',
+  },
 }, 'nested')
 
 export const useNested = (props: NestedProps) => {
@@ -242,6 +250,7 @@ export const useNested = (props: NestedProps) => {
 
         return arr
       }),
+      itemsRegistration: toRef(() => props.itemsRegistration),
       register: (id, parentId, isDisabled, isGroup) => {
         if (nodeIds.has(id)) {
           const path = getPath(id).map(String).join(' -> ')
@@ -389,26 +398,23 @@ export const useNestedItem = (id: MaybeRefOrGetter<unknown>, isDisabled: MaybeRe
   }
 
   onBeforeMount(() => {
-    if (!parent.isGroupActivator) {
-      nextTick(() => {
-        parent.root.register(computedId.value, parent.id.value, toValue(isDisabled), isGroup)
-      })
-    }
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return
+    nextTick(() => {
+      parent.root.register(computedId.value, parent.id.value, toValue(isDisabled), isGroup)
+    })
   })
 
   onBeforeUnmount(() => {
-    if (!parent.isGroupActivator) {
-      parent.root.unregister(computedId.value)
-    }
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return
+    parent.root.unregister(computedId.value)
   })
 
   watch(computedId, (val, oldVal) => {
-    if (!parent.isGroupActivator) {
-      parent.root.unregister(oldVal)
-      nextTick(() => {
-        parent.root.register(val, parent.id.value, toValue(isDisabled), isGroup)
-      })
-    }
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return
+    parent.root.unregister(oldVal)
+    nextTick(() => {
+      parent.root.register(val, parent.id.value, toValue(isDisabled), isGroup)
+    })
   })
 
   isGroup && provide(VNestedSymbol, item)