[Feature Request] VTreeview: new slot for collapse/expand button

[b-maslennikov]

Problem to solve

we can't customize collapse/expand button for each specific item

for example: 1st level of items are servers. server icon should be displayed 2st level of items are users. user icon should be displayed 3rd level of items are folder. folder icon should be displayed

also I need to customize the color, variant etc

Proposed solution

This can be achived by adding a new slot with props: { buttonProps, item, isLoading, isSelected, isActive, ....... }

<template #action="{ buttonProps, item, isLoading, isSelected }">
    <v-btn 
        v-bind="buttonProps"
        :icon="getIcon(item, isLoading)"
        :color="getColor(item, isLoading, isSelected)"
        variant="text"
    />
</template>

script:

const getIcon = (item, isLoading) =>
{
    if(isLoading) return 'mdi-spinner';
    switch(item.itemType)
    {
        case 'Server': return 'mdi-server';
        case 'User': return 'mdi-user';
        case 'Folder': return 'mdi-folder';
        case 'File': return 'mdi-file';
        default: return 'mdi-unknown';
    }
}

const getColor = (item, isLoading, isSelected) =>
{
    if(isLoading) return 'black';
    switch(item.itemType)
    {
        case 'Server': return isSelected ? 'red' : 'green';
        case 'User': return isSelected ? 'blue' : 'yellow';
        case 'Folder': return isSelected ? 'orange' : 'grey';
        case 'File': return 'purple';
        default: return 'grey';
    }
}

[Doltario]

Hi,

Any updates on this? I agree with @b-maslennikov that this is quite unpleasant. Event the slot title doesn't allow to actually customise the title. Maybe there should be a distinction between title and label/text or something.