fix(components): fall back to md for custom sizes in virtualizer (#6917)

Author: lazerg

src/runtime/components/Tree.vue

@@ -190,7 +190,7 @@ const flattenedPaddingFormula = computed(() => {
     lg: { base: 3, perLevel: 7 }, // px-3, ms-5.5 + ps-1.5
     xl: { base: 3, perLevel: 7.5 } // px-3, ms-6 + ps-1.5
   }
-  const config = sizeConfig[props.size || 'md']
+  const config = sizeConfig[props.size as keyof typeof sizeConfig] ?? sizeConfig.md
   return (level: number) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`
 })
 

src/runtime/utils/virtualizer.ts

@@ -8,30 +8,30 @@ function itemHasDescription(item: any, descriptionKey: string): boolean {
   return value !== undefined && value !== null && value !== ''
 }
 
-function getSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', hasDescription: boolean): number {
-  if (hasDescription) {
-    return ({
-      xs: 44,
-      sm: 48,
-      md: 52,
-      lg: 56,
-      xl: 60
-    })[size]
-  }
+function getSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}), hasDescription: boolean): number {
+  const sizes = hasDescription
+    ? {
+        xs: 44,
+        sm: 48,
+        md: 52,
+        lg: 56,
+        xl: 60
+      }
+    : {
+        xs: 24,
+        sm: 28,
+        md: 32,
+        lg: 36,
+        xl: 40
+      }
 
-  return ({
-    xs: 24,
-    sm: 28,
-    md: 32,
-    lg: 36,
-    xl: 40
-  })[size]
+  return sizes[size as keyof typeof sizes] ?? sizes.md
 }
 
 /**
  * Get estimate size for virtualizers that checks each item individually
  */
-export function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number {
+export function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}), descriptionKey?: string, hasDescriptionSlot?: boolean): (index: number) => number {
   const sizeWithDescription = getSize(size, true)
   const sizeWithoutDescription = getSize(size, false)
 

test/components/Tree.spec.ts

@@ -73,6 +73,17 @@ describe('Tree', () => {
     ['with dynamic slot', { props, slots: { app: () => 'dynamic slot' } }]
   ])
 
+  it('does not throw when flattened with a custom theme size', async () => {
+    const wrapper = await mountSuspended(Tree, {
+      props: {
+        items: [{ label: 'app', defaultExpanded: true, children: items }],
+        nested: false,
+        size: 'xxs' as any
+      }
+    })
+    expect(wrapper.exists()).toBe(true)
+  })
+
   it('passes accessibility tests', async () => {
     const wrapper = await mountSuspended(Tree, {
       props: {

test/utils/virtualizer.spec.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { getEstimateSize } from '../../src/runtime/utils/virtualizer'
+
+describe('getEstimateSize', () => {
+  it('returns the height for each built-in size', () => {
+    expect(getEstimateSize([{ label: 'foo' }], 'xs')(0)).toBe(24)
+    expect(getEstimateSize([{ label: 'foo' }], 'xl')(0)).toBe(40)
+  })
+
+  it('falls back to the `md` size for a custom theme size', () => {
+    expect(getEstimateSize([{ label: 'foo' }], 'xxs')(0)).toBe(32)
+  })
+
+  it('falls back to the `md` size for a custom theme size with a description', () => {
+    const items = [{ label: 'foo', description: 'bar' }]
+
+    expect(getEstimateSize(items, 'xxs', 'description')(0)).toBe(52)
+    expect(getEstimateSize(items, 'xxs', undefined, true)(0)).toBe(52)
+  })
+
+  it('uses the larger size only for items that have a description', () => {
+    const items = [{ label: 'foo', description: 'bar' }, { label: 'baz' }]
+    const estimateSize = getEstimateSize(items, 'md', 'description')
+
+    expect(estimateSize(0)).toBe(52)
+    expect(estimateSize(1)).toBe(32)
+  })
+})