fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
529 stars 114 forks source link

option to use a custom list instead of the default ul #147

Open dragos-boisteanu opened 1 year ago

dragos-boisteanu commented 1 year ago

Hi,

Could it be made in a way that I can use my own list instead of the default ul https://github.com/fritx/vue-at/blob/e502b4f825ef89baa8a8c110fabe8c02b7d770d6/src/AtTemplate.vue#L17?

For example allow to use a virtuall scroller in case the members list is very long, 1000+ members.

Thank you

fritx commented 1 year ago

@dragos-boisteanu would be glad to help :)

dragos-boisteanu commented 1 year ago

do you know a virtual scroller that works well for vue2 and would fit well with the project ?

I know about this one https://github.com/tangbc/vue-virtual-scroll-list , it's pretty good for simple components like those that might be inside a mentions list but it gets slow when the components are too complex, like a chat message. A custom solution would be way better, but I am not able to make one.

Next week I could try to integrate it and replace the ul.

fritx commented 1 year ago

do you know a virtual scroller that works well for vue2 and would fit well with the project ?

any contribution is appreciated ;)

but I think a scoped slot support would be better here --

  1. it doesn't matter which scrolling library the user uses, but can integrate it him/herself.
  2. no need to depend on a library directly from vue-at

maybe we provide a scoped slot feature support here and add a demo to the documentation?

fritx commented 1 year ago

I have a PoC here, adding scoped-slot support for the <ul>: https://github.com/fritx/vue-at/commits/feat/custom-list

dragos-boisteanu commented 1 year ago

Thank you very much. I will give it a try soon.

fritx commented 1 year ago

I have a PoC here, adding scoped-slot support for the <ul>

  • [x] plain custom <ul>
  • [x] vue-virtual-scroller integrated
  • [x] vue-virtual-scroll-list integrated

@dragos-boisteanu vue-virtual-scroll-list has also been integrated: https://github.com/fritx/vue-at/commits/feat/custom-list

Is this implementation and corresponding usage acceptable for you?