markhu-file-tree

markhu-file-tree is a customizable draggable file tree component for Vue 3 that draws inspiration from the VSCode resource explorer.

Feature

• All nodes in the tree have a type of either 'folder' or 'file'.
• Folders can be expanded regardless of whether they are empty or not.
• Items can be dragged and dropped into folders, but not into files.
• 'Folder' or 'file' names can be renamed to new names.
• Multiple files can be selected using the Ctrl/Shift keys.
• The selected item can be navigated using the up and down arrow keys.

Install

npm i markhu-file-tree or yarn add markhu-file-tree

Quick start

<script setup>
    import {reactive} from "vue";
    import "markhu-file-tree/dist/style.css";

    const treeData = reactive([
                {
                    title: "Documents",
                    path: "/users/Jim/Documents",
                    type: "folder",
                    children: [
                        {
                            title: "File1.txt",
                            path: "/users/Jim/Documents/File1.txt",
                            type: "file",
                        },
                        {
                            title: "File2.txt",
                            path: "/users/Jim/Documents/File2.txt",
                            type: "file"
                        }
                    ]
                },
                {
                    title: "Pictures",
                    path: "/users/Jim/Pictures",
                    type: "folder",
                    children: [
                        {
                            title: "Image1.jpg",
                            path: "/users/Jim/Pictures/Image1.jpg",
                            type: "file"
                        },
                        {
                            title: "Image2.jpg",
                            path: "/users/Jim/Pictures/Image2.jpg",
                            type: "file"
                        }
                    ]
                },
            ]
    );
</script>

<template>
    <file-tree :data="treeData"></file-tree>
</template>

The data property is an object of TreeNode nodes:

export interface TreeNode {
    title: string,
    path: string,
    type: string,
    expanded?: boolean,
    selected?: boolean,
    focused?: boolean,
    children?: TreeNode[],
    addingFile?: boolean,
    addingFolder?: boolean,
    editing?: boolean
}

Props

| prop | type | default | description | |-------------------|--------------------|----------------------|---------------------------------------------------| | data | TreeNode| | A tree to show. The root node will not show in ui |

Events

| Event Name | Callback Parameters | Purpose | |--------------------|----------------------------------------------------|-----------------------------------------------------------| | @nodeSelect | items: TreeNode[] | Triggered when nodes are selected. | | @nodeCreate | node: TreeNode, title: string | Triggered when a new node is created. | | @nodeRename | node: TreeNode, newTitle: string, oldTitle: string | Triggered when a node is renamed. | | @nodeExpand | node: TreeNode | Triggered when a node is expanded. | | @nodeCollapse | node: TreeNode | Triggered when a node is collapsed. | | @nodeDrop | newPath: string, oldPath: string | Triggered when a node is dragged and dropped to a new location. | | @nodeMove | newPath: string, oldPath: string | Triggered when a node is moved to a new location. | | @nodeContextmenu | e: MouseEvent, d: TreeNode | Triggered when a node's context menu is opened. |

Methods

| method | description | |----------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|

Slots

| Slot Name | Parameters | Purpose | | --------- | -------------- | ----------------------------------------------------------- | | title | {nodeData} | Used to customize the title content of a node. | | toggler | {nodeData} | Used to customize the expand/collapse icon of a node. | | icon | {nodeData} | Used to customize the icon of a node. |

Examples

Customize title, toggle icon and file icon with slots.

Note: In this example, we use Font Awesome as icon lib.

  <file-tree :data="treeData" @nodeSelect="onNodeSelect" @fileCreate="onFileCreate"
             @folderCreate="onFolderCreate" @nodeRename="onNodeRename"
             @nodeExpand="onNodeExpand" @nodeCollapse="onNodeCollapse"
             @nodeDrop="onNodeDrop" @nodeMove="onNodeMove" @nodeContextmenu="onNodeContextmenu"
>
    <template v-slot:title="{nodeData}">{{ nodeData.title }}</template>
    <template v-slot:toggler="{nodeData}">
          <span style="margin-right: 5px">
          <i class="fa-solid fa-chevron-down" v-if="nodeData.expanded"></i>
          <i class="fa-solid fa-chevron-right" v-else></i>
            </span>
    </template>
    <template v-slot:icon="{nodeData}">
          <span style="margin-right: 5px">
            <i class="fa-regular fa-folder" v-if="nodeData.type==='folder'"></i>
            <i class="fa-regular fa-file-audio" v-else-if="nodeData.title.endsWith('.mp3')"></i>
            <i class="fa-regular fa-file-image" v-else-if="nodeData.title.endsWith('.jpg')"></i>
            <i class="fa-solid fa-file-word" v-else-if="nodeData.title.endsWith('.doc')"></i>
            <i class="fa-solid fa-file-pdf" v-else-if="nodeData.title.endsWith('.pdf')"></i>
            <i class="fa-solid fa-file-csv" v-else-if="nodeData.title.endsWith('.csv')"></i>
            <i class="fa-regular fa-file-lines" v-else-if="nodeData.title.endsWith('.txt')"></i>
            <i class="fa-regular fa-file" v-else></i>
          </span>
    </template>
</file-tree>

Changelog