<template>
  <v-tree :items="items"></v-tree>
</template>
  

    
  
  

    <script setup>
import { ref } from "vue";

const items = ref([
  {
    name: "Directory",
    id: 17,
    children: [
      { name: "Some item", id: 1 },
      { name: "Another item", id: 2 },
      { name: "Third", id: 3 },
      { name: "File" },
      {
        name: "Sub directory",
        id: 5,
        children: [
          {
            name: "Another sub directory",
            id: 6,
            children: [
              { name: "Content", id: 7 },
              { name: "Another item", id: 8 },
            ],
          },
          { name: "Fourth", id: 9 },
          { name: "Another file", id: 10 },
          { name: "Video file", id: 11 },
          { name: "Secret item", id: 12 },
          {
            name: "More content here",
            id: 13,
            children: [
              { name: "Another video file", id: 14 },
              { name: "Fifth", id: 15 },
            ],
          },
        ],
      },
      { name: "Sixth item", id: 16 },
    ],
  },
]);
</script>
  

    
  
  

    <template>
  <v-tree
    v-bind="example"
    ref="treeRef"
    :chevron="{ triangle: true }"
    :placeholder-folder-icon="['mdi-folder', 'mdi-folder-open']"
    placeholder-item-icon="b-file-earmark"
    @input:click="handleClickItem"
    @input:selected="handleSelectedItem"
  >
    <template #item-append="{ item }">
      <v-badge
        v-if="item.badge"
        mod-badge="size:tiny"
        class="ml-2"
      >
        {{ item.badge }}
      </v-badge>
    </template>
  </v-tree>

  <v-button
    mod-button="size:small"
    class="mr-4 mt-8"
    @click="treeRef.openAllLevel(9999)"
  >
    Open all
  </v-button>
  <v-button
    mod-button="size:small"
    @click="treeRef.closeAll()"
  >
    Close all
  </v-button>

</template>
  

    
  
  

    <script setup>
import { ref, reactive } from "vue";

const treeData = [
  {
    name: "Directory",
    id: 17,
    children: [
      { name: "Some item", id: 1 },
      { name: "Another item", id: 2 },
      { name: "Third item", id: 3 },
      { name: "File", icon: "b-star", id: 4 },
      {
        name: "Sub directory",
        id: 5,
        children: [
          {
            name: "Another sub directory",
            id: 6,
            children: [
              { name: "Content", id: 7 },
              { name: "Another item", id: 8 },
            ],
          },
          { name: "Fourth item", id: 9 },
          { name: "Another file", id: 10 },
          { name: "Video file", id: 11 },
          { name: "Secret item", id: 12 },
          {
            name: "More content here",
            id: 13,
            children: [
              { name: "Another video file", id: 14, badge: "NEW" },
              { name: "Fifth item", id: 15 },
            ],
          },
        ],
      },
      { name: "Sixth item", id: 16 },
    ],
  },
  {
    name: "Another directory",
    id: 17,
    children: [
      {
        name: "Sub dir",
        id: 5,
        children: [
          { name: "New file", id: 9 },
          { name: "Music file", id: 10 },
          { name: "Secret content", id: 12 },
          {
            name: "Folder",
            id: 13,
            children: [
              { name: "Another file", id: 14, badge: "NEW" },
              { name: "Readme", id: 15 },
            ],
          },
        ],
      },
      { name: "More content", id: 1 },
      { name: "Movie file", id: 16 },
    ],
  },
];

let example = reactive({
  items: treeData,
  openOnClick: true,
  showIndicators: true,
  showIcons: true,
  showCheckboxes: false,
  filter: "",
  openAll: false,
  autoOpenRoot: false,
  autoOpenAll: false,
  selectReturnKeys: false,
  selectIndependent: false,
  allowSelectDisabled: false,
  allowOpenDisabled: true,
  transition: "fade",
});

let treeRef = ref(null);

let events = ref([]);

let handleClickItem = (item) => {
  events.value.unshift({ ev: "input:click", data: item });
};

let handleSelectedItem = (selection) => {
  events.value.unshift({ ev: "input:selected", data: selection });
};
</script>