diff --git a/playground/app/app.vue b/playground/app/app.vue index 7348fbd70f..a2ca7263be 100644 --- a/playground/app/app.vue +++ b/playground/app/app.vue @@ -52,6 +52,7 @@ const components = [ 'radio-group', 'select', 'select-menu', + 'select-menu-virtualized', 'separator', 'shortcuts', 'skeleton', diff --git a/playground/app/pages/components/select-menu-virtualized.vue b/playground/app/pages/components/select-menu-virtualized.vue new file mode 100644 index 0000000000..de7953007c --- /dev/null +++ b/playground/app/pages/components/select-menu-virtualized.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 983a219642..e7490e94a9 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -117,6 +117,17 @@ export interface SelectMenuProps = Array ignoreFilter?: boolean autofocus?: boolean autofocusDelay?: number + /** + * When `true` the items in the SelectMenu are virtualized. Keep in mind that this only works with a single group due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885). + * @defaultValue false + */ + virtualize?: boolean + /** + * The height of items to be used by the virtualizer to determine the amount of items to render. + * Keep in mind that virtualization only works when you have no groups due to a limitation of RekaUI (https://github.com/unovue/reka-ui/issues/1885). + * @defaultValue 20 + */ + virtualItemEstimateSize?: number class?: any ui?: SelectMenu['slots'] } @@ -168,7 +179,7 @@ export interface SelectMenuSlots<