Recreated Trello example with better drag drop + adding/deleting/editing tasks

[BaccanoMob]

OG Post: #932
Other Post: #3830 and repo
This Post: uses ValueElement rather than ui.element to store the list values (with row, column, grid + few more changes)

The component uses 3 files. (Can be reduced to 2 if you import via URL in sortable.js)
.
├── sortable.js
├── sortable.min.js
└── sortable.py

Working example

Recreated Trello code is here

TODO

I am waiting for #4819 to be merged so I can use notification action for undoing delete. Workaround mentioned in #1994 (comment) does not work well with my example. The button does show in the notification but the handlers are emitted including for closed notifications action handlers since all share the same event name undo. This led to duplicate values in list. That PR should ideally fix this since it includes self.id in the JS call.

Help wanted

I need some help with disabling drag drop. DisableElement does not help. I found out if I set disabled to true here, I can disable drap/drop. But I do not know VueJS so I do not know how to toggle it via a function call or via setting a prop (like with group). I would appreciate if anyone can show me how to do it (or PR in my repo).

I figured it out.

Limitations

Some limitations I am aware of:

• The class of the list elements need to be same.
• Does not support nested sortables (not working on it, may in the future)
• Can not drag multiple elements at once
• value is currently one way bound. That is, modifying the list does not update the UI. If you want to 2 way, you will prolly need to keep the sort lists in a refreshable with the binding lists outside. So on updating the list values, you will refresh the sort lists. (Will prolly fix this at some point)

Extra Info

The repo also contains other custom elements (and useful info) in it. Originally, I wanted to just keep just the elements alone but yesterday I decided to use nicegui to demonstrate the elements with examples. (Mostly due to the trello example turned out really well than I expected)