Support lazy loading sub-items & events like QTree

[qyloxe]

This component could be just better than QTree in so many use cases.

I really do not want to overstep, but would it be possible to implement this behaviours from QTree?

The first is the support for item expansion. This would open a way to lazy loading sub-items. And lazy loading is a must if you want to use non-trivial hierarchical lists connected to backend API.

The second is the support for method/events. In QTree you can get info about: @update:expanded @lazyload @update:selected ... something more...

I read about your plan to make something similar to "kanban" boards, and I think it would just make this component the most versatile component in Quasar library. Can't wait to see what will happen with this. As for now, in my knowledge, there are no plans to enhance QList or QTree to anything you just implemented (multiple items selection, dragging, keyboard navigation), so IMHO anything you design now, could be a "standard" for the rest of components in Quasar. Wow!

[mesqueeb]

Hi @qyloxe i'm planning to implement hide/show sub-items via left / right arrow key and perhaps a little arrow icon at the right side of the row.

I'm not sure about visual things like which arrow icon to use yet since I wanna keep the plugin as flexible as possible.

About hiding and showing the items i'm thinking of using v-if for better load times on initial load.

Can you go deeper in what you mean with lazy loading the items?

Since my implementation is a flat ID array and a "depth" value saved on the item itself, i'm not seeing immediately what you mean with lazy loading. Please elaborate.

_{Sent with GitHawk}

[qyloxe]

Hi @qyloxe i'm planning to implement hide/show sub-items via left / right arrow key and perhaps a little arrow icon at the right side of the row. I'm not sure about visual things like which arrow icon to use yet since I wanna keep the plugin as flexible as possible.

Just use slot with default value md/fa icon. If the developer wants his own presentation, then he could put something of his own in this slot. Vue is awesome.

Can you go deeper in what you mean with lazy loading the items? Since my implementation is a flat ID array and a "depth" value saved on the item itself, i'm not seeing immediately what you mean with lazy loading. Please elaborate.

yep, I saw the two parts structure - the array for IDs and object for items. BUT it is your internal structure. The developer could present you data items in any structure, and you can convert this to your internal representation. Ideally, if your data geometry would be compatible with QTree, because this is quite similar use case, but your component seems... more useful in real apps :-)

In QTree there is an async lazyload event with node/item, key, done, fail parameters. This is rather common method for lazy loading of hierarchical structures in JS components, be it JQuery, Vue, React or tons of others. Typically there is a node/item with sub array - children and flag islazy. If this flag is set, then before expansion of said item/node, the lazyload event is fired, and developer has possibility to fill those sub children with dynamically retrieved subitems/subnodes. Quite typical and very useful.

Why it would be beneficial to let you convert and maintain your own pair of array/object internal data structure? Because it is your actual "view" on the problem, I assume, if you will have a use case with 20K of items, then you will want to use somewhat more advanced data structure, so it is easier, if you allow developers to use "persistable" data structures instead of "operational/internal" data structures.

In my opinion there is no way in escape from similarities to tree data structures - your component is just too damn useful :-)

Another argument for those async events are "isAllowed/allowDrop/beforeDrop" events. They should be fired before user wants to move item to new place. The developer should have a way to say "nope, this item does not belongs here".

And the last but not least - typical scenario, when you will allow exchange items between whole lists (this kanban/trello case) - there should be a possible decision if the item/s should be moved or copied. This also should have an event (or maybe you will decide, that it will be the same event which allows dropping of specific item).

[mesqueeb]

Can you please read #7 ? Thanks! 🦄