@any-design/file-tree

@any-design/file-tree is a custom fork of markhu-file-tree

This package 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 @any-design/file-tree

Quick start

<script setup>
import { ref } from 'vue';
import '@any-design/file-tree/dist/style.css';

const treeData = ref([
  {
    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 v-model="treeData"></file-tree>
</template>

The modelValue 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
modelValue	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.
@update:modelValue	node: TreeNode	Tree data has been updated

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
  :v-model="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>