unovue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
5.26k stars 317 forks source link

[Feature]: use virtual list for command (or components when use list for render lots of items) #629

Open davsaniuv opened 5 months ago

davsaniuv commented 5 months ago

Describe the feature

Im trying to use filters on task example but when i put a lot of items on some filters it crashes and it runs slow, i’ve tried to use virtual list on radix ui and it works better but i dont how to know to style it as good as shadcn styles so i wonder if is there are plans to bring this component (s)

Additional information

hrynevychroman commented 5 months ago

@davsaniuv hello! I was previously worked on this example feature, but don't have much time to end this for a reasonable PR. I just updated my working branch with dev, here you can find some example how to implement this feature with vue-virtual-scroller

https://github.com/radix-vue/shadcn-vue/assets/82209198/2006be2d-424b-4783-8c04-e0e350944a06

This example is inside /src/examples/big-data/Example.vue, if you have some additional questions feel free to ask 🙌

image

Branch where you can find all code: link

wrtisans commented 5 months ago

that's awesome, but is there a way to implement this with command and filters ? this one: CleanShot 2024-06-25 at 07 19 22

at this moment have filters with 100+ options

hrynevychroman commented 4 months ago

Yeah, definitely, will send you some working example 🙌

hrynevychroman commented 4 months ago

@wrtisans, here is the raw example of how you can virtualize this popover 🙂

https://github.com/radix-vue/shadcn-vue/assets/82209198/6585bbdf-d549-440b-a134-9ab7fe26795a

Branch: https://github.com/romanhrynevych/shadcn-vue/commit/a1fcbf8ea9e147c86ebab55db3a128e0e28d854c

davsaniuv commented 4 months ago

thats awesome, thanks a lot!!