feat(Tree): add item-wrapper slot

[J-Michalek]

🔗 Linked issue

Resolves: #4424

❓ 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

I've added the option to replace the entire item using the item-wrapper slot, this can be useful to display errors or to handle end branches of the tree.

📝 Checklist

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

[pkg-pr-new]

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

commit: f9c4acd

[freyjameetsmel]

Hey 👋

This would be exactly what we need for our project. 🤩 We have a component that is based on the Tree component, but each element should be rendered as something other than a button. So the item-wrapper slot would be perfect.
Is there a possibility to get this in one of the next releases? We would realy appreciate it.

Thx, Mel

[benjilollebg]

Hey, I would like to use the item-wrapper to "wrap" the item in a droppable div, but keep the same base display. When i use the item-wrapper, it overrides everything in it instead of wrapping it (or I don't use it correctly). I would expect this to do the job :

<UTree v-if="folderItems.length" v-model="selectedFolderTreeItem" expanded-icon="i-lucide-folder" trailing-icon="" :items="folderItems" :ui="{ root: 'font-medium p-2', }" > <template #item-wrapper="{ item }"> <span @drop="(e) => onDropFolder(e, item.value!)" class="block w-full" draggable="true" @dragstart="(e) => onDragFolder(e, item.folder)" @dragover=" (event: DragEvent) => { event.preventDefault(); } " > <slot></slot> </span> </template> </UTree>

as it doesnt work as expected, can someone give me a hint on how to do it if its possible ?