vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.57k stars 6.94k forks source link

[Bug Report][3.6.7] Treeview wrong slots in documentation #19907

Closed b4rthm closed 3 weeks ago

b4rthm commented 2 months ago

Environment

Vuetify Version: 3.6.7 Vue Version: 3.4.27 Browsers: Chrome 125.0.0.0 OS: Windows 10

Steps to reproduce

change prepend slot to label slot.

Expected Behavior

the labels are replaced with icons

Actual Behavior

Property 'label' does not exist...

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

The label slot seems so be renamed to the title slot. The documentation needs to be adjusted. https://vuetifyjs.com/en/components/treeview/#append-and-label image

yuwu9145 commented 2 months ago

Documentation is wrong, but also prepend slot doesn't return open so folder icon doesn't change to "open folder" when expanding.

pciavald commented 3 weeks ago

It seems the slots are only used for leaf items, and there does not seem to be slots for groups. As you can see here only empty folders behave correctly

  <v-treeview
    ref="treeview"
    class="treeview"
    active-class="treeview-active"

    return-object
    activatable
    hoverable

    :items="nodes"
    item-children="nodes"
    item-value="path"
    item-title="label"

    density="compact"
    :selected="selected"

    @update:activated="select"
  >
    <template v-slot:prepend="{ item }">
      <v-icon>
        {{ item.open ? 'mdi-folder-open' : 'mdi-folder' }}
      </v-icon>
    </template>

    <template v-slot:item="{ item }">
      <div>
        {{ item.value }}
      </div>
    </template>

    <template v-slot:append="{ item }">
      <div class="append_bold">
        {{ item.count || 0 }}
      </div>
    </template>

  </v-treeview>

image

yuwu9145 commented 3 weeks ago

Fixed in v3.7+ https://github.com/vuetifyjs/vuetify/releases/tag/v3.6.13-3.7.0-beta.0.0