Hierachical Folder Tree Component For Vue

A customizable hierarchical folder tree component for Vue.

More Features:

• Event publishing/subscription from items.
• Moving Items between folders via drag-and-drop.
• Custom formating of items on the tree based on the type property.
• Programmatically toggle item visibility based on the type property.
• Sorting items alphametically or grouping based on types

How to use it:

1. Import and register the tree view component.

// main.ts
import Vue from 'vue'
import App from './App.vue'
import '@/styles/style.css';
import TreeViewPlugin from './plugins/TreeViewPlugin';
Vue.config.productionTip = false
Vue.use(TreeViewPlugin);
new Vue({
  render: h => h(App),
}).$mount('#app')

2. Add the tree view component to the template.

// app.vue
<template>
  <div style="display: flex">
    <!-- Example of how to customise appearance of tree items -->
    <tree-view :treeViewItems="treeViewNodes" @created="customiseTreeView">
        <template v-slot:icon="treeViewItem">
            <img src="@/assets/folder.svg" alt="folder" v-if="treeViewItem.type === 'folder'" >
            <img src="@/assets/word.svg" alt="vue-logo" v-else-if="treeViewItem.type === '.doc'" height="18" width="18">
            <img src="@/assets/excel.svg" alt="vue-logo" v-else-if="treeViewItem.type === '.excel'" height="18" width="18">
            <img src="@/assets/playlist.svg" alt="vue-logo" v-else-if="treeViewItem.type === 'media'" height="18" width="18">
        </template>
    </tree-view>
    <!-- Examples of how to subscribe for events -->
    <tree-view :treeViewItems="schools" @created="customiseSchools" />
  </div>
</template>
<script lang='ts'>
import { Vue, Component} from 'vue-property-decorator';
import { TreeViewCreatedEventPayload, TreeViewItem } from '@/businessLogic/contracts/types';
@Component
export default class App extends Vue {
  customiseTreeView(treeCreatedEvent: TreeViewCreatedEventPayload) {
    const customisations = treeCreatedEvent.itemCustomisations;
    const eventManager = treeCreatedEvent.eventManager;
    customisations.makeItemsCheckable([".doc", ".excel", "media" ]);
  }
  customiseSchools(treeCreatedEvent: TreeViewCreatedEventPayload) {
    const customisations = treeCreatedEvent.itemCustomisations;
    const eventManager = treeCreatedEvent.eventManager;
    eventManager.subscribeToItemChecked("department", (items) => console.log(items));
    customisations.makeItemsCheckable(["department"]);
  }
  treeViewNodes: TreeViewItem[] = [
    {
      name: 'Desktop',
      id: '1203-390293-1hdklsjdl-903923',
      type: 'folder',
      checkedStatus: 'False',
      children: [
        {
          name: 'Resume',
          id: '1203-390293-1hdklhsjdl-903923',
          type: '.doc',
          parentId: '1203-390293-1hdklsjdl-903923',
          checkedStatus: 'False',
        },
        {
          name: 'Cover Letter',
          id: '1203-1hdklsjdl-903923',
          type: '.doc',
          parentId: '1203-390293-1hdklsjdl-903923',
          checkedStatus: 'False'
        },
        {
          name: 'Short Video',
          id: '1203-1hmddklsjdl-903923',
          type: 'media',
          parentId: '1203-390293-1hdklsjdl-903923',
          checkedStatus: 'False'
        },
        {
          name: 'Excel Optimisation',
          id: '1203-1hmddklsjdl-903jdu923',
          type: '.excel',
          parentId: '1203-390293-1hdklsjdl-903923',
          checkedStatus: 'False'
        }
      ]
    },
    {
      name: 'Hard Drive',
      type: 'folder',
      id: '1203-390293-1hdkl-903923',
      checkedStatus: 'False',
      children: [
        {
          name: 'Remote Time-Sheet',
          type: '.excel',
          id: '1203-390293-1hdklsjdl-93',
          parentId: '1203-390293-1hdkl-903923',
          checkedStatus: 'False' 
        },
        {
          name: 'Monthly Budget',
          type: '.excel',
          id: '1203-39293-1hdklsjdl-93',
          parentId: '1203-390293-1hdkl-903923',
          checkedStatus: 'False'
        }
      ]
    },
    {
      name: 'C:/',
      type: 'folder',
      id: '1203-390293-1hfdkl-903923',
      checkedStatus: 'False',
      children: [
        {
          name: 'Documents',
          type: 'folder',
          id: '1203-39029f3-1hdklsjdl-93',
          parentId: '1203-390293-1hfdkl-903923',
          checkedStatus: 'False',
          children: [
            {
              name: 'Pictures',
              type: 'media',
              id: '1203-29f3-1hdklsjdl-93',
              parentId: '1203-39029f3-1hdklsjdl-93',
              checkedStatus: 'False',
            },
            {
              name: 'Videos',
              type: 'media',
              id: '1203-29fbb3-1hdklsjdl-93',
              parentId: '1203-39029f3-1hdklsjdl-93',
              checkedStatus: 'False',
            }
          ]
        },
        {
          name: 'Repositories',
          type: 'code',
          id: '1203-39b293-1hdklsjdl-93',
          parentId: '1203-390293-1hfdkl-903923',
          checkedStatus: 'False'
        }
      ]
    }
  ];
  schools: TreeViewItem[] = [
    {
      id: '1',
      type: 'school',
      name: 'Vue School',
      children: [
        {
          id: '2',
          type: 'department',
          name: 'Typescript Department',
          parentId: '1'
        },
        {
          id: '3',
          type: 'department',
          name: 'Open Source Department',
          parentId: '1'
        }
      ]
    }
  ]
}
</script>

Preview:

Changelog:

v1.0.20 (06/24/2023)

• Support Custom Expander

07/11/2021

• Added feature for renaming items.

06/12/2021

• Fix nested gridlines toggle

Download Details:

Author: geekhybrid

Live Demo: /demo/hierachical-folder-tree

Download Link: https://github.com/geekhybrid/tree-vue/archive/refs/heads/main.zip

Official Website: https://github.com/geekhybrid/tree-vue

Install & Download: