diff --git a/docs/content/3.components/tree.md b/docs/content/3.components/tree.md index 93452397c3..ef7383ec60 100644 --- a/docs/content/3.components/tree.md +++ b/docs/content/3.components/tree.md @@ -411,6 +411,7 @@ Use the `slot` property to customize a specific item. You will have access to the following slots: +- `#{{ item.slot }}-wrapper`{lang="ts-type"} - `#{{ item.slot }}`{lang="ts-type"} - `#{{ item.slot }}-leading`{lang="ts-type"} - `#{{ item.slot }}-label`{lang="ts-type"} diff --git a/src/runtime/components/Tree.vue b/src/runtime/components/Tree.vue index 9677f59b90..ebef2f61a7 100644 --- a/src/runtime/components/Tree.vue +++ b/src/runtime/components/Tree.vue @@ -90,6 +90,7 @@ export type TreeSlots< A extends TreeItem[] = TreeItem[], T extends NestedItem = NestedItem > = { + 'item-wrapper': SlotProps 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps @@ -163,35 +164,37 @@ const defaultExpanded = computed(() => @toggle="item.onToggle" @select="item.onSelect" > - + + + {{ getItemLabel(item) }} + + + + + + + + + + + +
    diff --git a/test/components/Tree.spec.ts b/test/components/Tree.spec.ts index 9339c282ec..d17365560f 100644 --- a/test/components/Tree.spec.ts +++ b/test/components/Tree.spec.ts @@ -60,6 +60,7 @@ describe('Tree', () => { ['with ui', { props: { ...props, ui: { link: 'font-bold' } } }], // Slots ['with default slot', { props, slots: { default: () => 'default slot' } }], + ['with item-wrapper slot', { props, slots: { 'item-wrapper': () => 'wrapper slot' } }], ['with item slot', { props, slots: { item: () => 'item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'leading slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'trailing slot' } }], diff --git a/test/components/__snapshots__/Tree-vue.spec.ts.snap b/test/components/__snapshots__/Tree-vue.spec.ts.snap index a8da856c18..83c03b4162 100644 --- a/test/components/__snapshots__/Tree-vue.spec.ts.snap +++ b/test/components/__snapshots__/Tree-vue.spec.ts.snap @@ -250,6 +250,20 @@ exports[`Tree > renders with item-trailing slot correctly 1`] = `
" `; +exports[`Tree > renders with item-wrapper slot correctly 1`] = ` +"
    +
  • + +
  • +
  • wrapper slot + +
  • +
  • wrapper slot + +
  • +
" +`; + exports[`Tree > renders with items correctly 1`] = ` "
  • diff --git a/test/components/__snapshots__/Tree.spec.ts.snap b/test/components/__snapshots__/Tree.spec.ts.snap index d02a6dd671..4c44d639d7 100644 --- a/test/components/__snapshots__/Tree.spec.ts.snap +++ b/test/components/__snapshots__/Tree.spec.ts.snap @@ -250,6 +250,20 @@ exports[`Tree > renders with item-trailing slot correctly 1`] = `
" `; +exports[`Tree > renders with item-wrapper slot correctly 1`] = ` +"
    +
  • + +
  • +
  • wrapper slot + +
  • +
  • wrapper slot + +
  • +
" +`; + exports[`Tree > renders with items correctly 1`] = ` "