v-treeview not able to find a way to move expand button to right end, after title

[myendorphin]

Client asked to move the expand button to end of the title, to make it look 'more natural'

Did not find a way to it. Anyone had similar task?

[babu-ch]

It may not be perfect, but I tried the following:

<template>
  <v-treeview
    v-model:opened="open"
    :collapse-icon="false"
    :expand-icon="false"
    :items="items"
    density="compact"
    item-value="title"
    activatable
    open-on-click
  >
    <template v-slot:prepend="{ item, isOpen }">
      <v-icon v-if="!item.file" :icon="isOpen ? 'mdi-folder-open' : 'mdi-folder'"></v-icon>
      <v-icon v-else :icon="files[item.file]"></v-icon>
    </template>
    <template v-slot:title="{item}">
      {{ item.title }}
      <v-icon
        v-if="item.children"
        :icon="open.includes(item.title) ? '$treeviewCollapse' : '$treeviewExpand'"/>
    </template>
  </v-treeview>
</template>

<script setup>
import {shallowRef} from 'vue'

const open = shallowRef(['public'])
const files = shallowRef({
  html: 'mdi-language-html5',
  js: 'mdi-nodejs',
  json: 'mdi-code-json',
  md: 'mdi-language-markdown',
  pdf: 'mdi-file-pdf-box',
  png: 'mdi-file-image',
  txt: 'mdi-file-document-outline',
  xls: 'mdi-file-excel',
})

const items = [
  {
    title: '.git',
  },
  {
    title: 'node_modules',
  },
  {
    title: 'public',
    children: [
      {
        title: 'static',
        children: [
          {
            title: 'logo.png',
            file: 'png',
          }
        ],
      },
      {
        title: 'favicon.ico',
        file: 'png',
      },
      {
        title: 'index.html',
        file: 'html',
      },
    ],
  },
  {
    title: '.gitignore',
    file: 'txt',
  },
  {
    title: 'babel.config.js',
    file: 'js',
  },
  {
    title: 'package.json',
    file: 'json',
  },
  {
    title: 'README.md',
    file: 'md',
  },
  {
    title: 'vue.config.js',
    file: 'js',
  },
  {
    title: 'yarn.lock',
    file: 'txt',
  },
]
</script>

[J-Sek]

Pass null instead of false to hide left icons
Edit: we have hide-actions since 3.9.0

Internally, that left icon is a VBtn [1], but in this case it is easier to use VIconBtn with additional v-ripple to have exactly the same result.

Playground

loading flag does not seem to be provided by any of the slots, so this would be the biggest pain to restore.