feat(Tree): expose $el for drag and drop example

[benjamincanac]

🔗 Linked issue

Resolves #4508

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[benjamincanac]

@J-Michalek We still need to implement some logic even with the newest nested prop as the items prop isn't. What do you think of the implementation?

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5239

commit: 6664049

[J-Michalek]

I think this is great! I am just wondering if we could somehow take it a step further and find a good way to expose the element of each tree item - it is necessary for some other DnD solutions for example I like to use https://atlassian.design/components/pragmatic-drag-and-drop/about but it requires access to the individual elements, not just the wrapping element like SortableJS does.

My first thought would be to add ref property on the item, then you could do something like the following:

{
  label: 'app/',
  ref: (el: HTMLElement | null) => {
    if (el == null) {
      // handle cleanup
    } else {
      // init draggable
    }
  }
}

that still requires extra work, because you would usually need to keep the cleanup somewhere to be accessed later so something like this perhaps:

function createItemDndFn() {
  let cleanup: (() => void) | undefined

  return (el: HTMLElement | null) => {
    cleanup?.()

    if (el) {
      cleanup = draggable(el)
    }
  }
}

{
  label: 'app/',
  ref: createItemDndFn()
}

just thinking out loud here, I feel like exposing nested elements is always such a hussle... but this would be usable in my eyes, but we would need to make sure to document it properly as not everyone might think of the correct usage.

[benjamincanac]

Maybe we could expose the items refs but we haven't done that in any component 😬 I'd like to improve the current behavior to support moving in directories but not sure how to achieve this in a simple way.

[J-Michalek]

Maybe we could expose the items refs but we haven't done that in any component 😬

Perhaps we can try it out maybe in a different PR, see if it makes sense. I could prepare an example using the pragmatic DnD to see the usage in practice.

I'd like to improve the current behavior to support moving in directories but not sure how to achieve this in a simple way.

Not sure how to easily achieve that without access to the item elements tbh. I had to implement a directory structure using SortableJS in the past and it was tough and I had to hack it in ways you should not...

[benjamincanac]

Reka UI has a demo with @atlaskit/pragmatic-drag-and-drop but it requires a lot of code 😅 https://stackblitz.com/edit/github-8f3fzs