repository·master·Indexed 43 days ago
https://github.com/holiber/sl-vue-treeA customizable, draggable tree component for Vue.js version 1.8.5 that supports hierarchical data structures, multiselect, and drag-and-drop operations. It provides a robust API for tree manipulation via the SlVueTree class, including methods for node insertion, removal, and traversal using ISlTreeNodeModel and ISlTreeNode data structures.
keydown and keyup events) by using the getNextNode and getPrevNode methods provided by the component to navigate through the tree structure.The tree's data is driven by an array of ISlTreeNodeModel objects. Each object represents a node in the tree.
interface ISlTreeNodeModel<TDataType> {
title: string;
isLeaf?: boolean;
children?: ISlTreeNodeModel<TDataType>[];
isExpanded?: boolean;
isSelected?: boolean;
isDraggable?: boolean;
isSelectable?: boolean;
data?: TDataType; // any serializable user data
}While the component uses ISlTreeNodeModel for input, its events and the nodes computed property return ISlTreeNode objects. These extend the base model with useful metadata about the node's position and visibility in the tree.
interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> {
isFirstChild: boolean;
isLastChild: boolean;
isVisible: boolean; // node is visible if all of its parents are expanded
level: number; // nesting level
ind: number; // index in the array of siblings
path: number[]; // path to node as an array of indexes, e.g., [2, 0, 1]
pathStr: string; // serialized path to node
children: ISlTreeNode<TDataType>[];
}To implement a basic tree, provide an array of nodes to the v-model of the <sl-vue-tree /> component. Ensure you include the component's CSS and JavaScript files.
<div id="app">
<sl-vue-tree v-model="nodes" />
</div
<link rel="stylesheet" href="dist/sl-vue-tree-dark.css">
<script src="dist/sl-vue-tree.js"></script>
<script>
var nodes = [
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true, data: { visible: false } },
{ title: 'Folder1' },
{
title: 'Folder2',
isExpanded: true,
children: [
{ title: 'Item3', isLeaf: true },
{ title: 'Item4', isLeaf: true }
]
}
];
new Vue({
el: '#app',
components: { SlVueTree },
data: function () {
return {
nodes: nodes
};
}
});
</script>To use the sl-vue-tree component in your Vue.js project, install it using npm:
npm i sl-vue-treesl-vue-tree works correctly in Internet Explorer 11, you must include a babel-polyfill in your project.Use the title slot to customize how each node is rendered. The slot provides a node object via slot-scope, which contains properties like isLeaf and title. This is useful for adding icons (e.g., using FontAwesome) based on whether a node is a leaf or a folder.
<sl-vue-tree v-model="nodes">
<template slot="title" slot-scope="{ node }">
<span class="item-icon">
<i class="fa fa-file" v-if="node.isLeaf"></i>
<i class="fa fa-folder" v-else></i>
</span>
{{ node.title }}
</template>
</sl-vue-tree>To select every node in the tree, use the traverse method. Inside the traversal callback, you can access the nodeModel and update its isSelected property. If using Vue 2, ensure you use Vue.set to maintain reactivity.
slVueTree.traverse((node, nodeModel, path) => {
Vue.set(nodeModel, 'isSelected', true);
});The component exposes several computed properties to monitor the state of the tree and user interactions:
| Property | Type | Description |
|----------------|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| nodes | ISlTreeNode[] | List of nodes with computed properties. See the `ISlTreeNode` interface. |
| cursorPosition | ICursorPosition<TDataType> | Represents the current cursor position that describes the action to be applied to the dragged node on the `mouseup` event. See the `ICursorPosition` interface. |
| selectionSize | Number | The count of selected nodes. |
| dragSize | Number | The count of selected and draggable nodes. |
| isDragging | Boolean | Indicates whether nodes are currently being dragged. |The component emits the following events to allow interaction with the tree state:
| Event | Callback Arguments | Description |
|-----------------|----------------------------------------------------------------------|----------------------------------------------------------------------|
| input | `nodes: ISlTreeNodeModel[]` | Triggered whenever the `value` property changes. |
| select | `selectedNodes: ISlTreeNode[]`, `event: MouseEvent` | Triggered when a node is selected or deselected. |
| toggle | `toggledNode: ISlTreeNode`, `event: MouseEvent` | Triggered when a node is expanded or collapsed. |
| drop | `draggingNodes: ISlTreeNode[]`, `position: ICursorPosition`, `event: MouseEvent` | Triggered when dragged nodes are dropped. |
| nodeclick | `node: ISlTreeNode`, `event: MouseEvent` | Handles the `click` event on a node. |
| nodedblclick | `node: ISlTreeNode`, `event: MouseEvent` | Handles the `dblclick` event on a node. |
| nodecontextmenu | `node: ISlTreeNode`, `event: MouseEvent` | Handles the `contextmenu` event on a node. |
| externaldrop | `cursorPosition: ICursorPosition`, `event: MouseEvent` | Handles the `drop` event for external items. |The following methods are available on the component instance to programmatically manipulate the tree:
| Method | Description |
|---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| getNode(path: number[]): ISlTreeNode | Finds a node by its path. |
| traverse(callback: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[]) => boolean) | Traverses all nodes. Traversing stops if the callback returns `false`. |
| updateNode(path: number[], patch: Partial<ISlTreeNodeModel>) | Updates a node by its path. |
| select(path: number[], addToSelection = false) | Selects a node by its path. |
| getNodeEl(path: number[]): HTMLElement | Gets the node's HTMLElement by its path. |
| getSelected(): ISlTreeNode[] | Gets the selected nodes. |
| insert(position: ICursorPosition, nodeModel: ISlTreeNodeModel) | Inserts a node at the specified cursor position. |
| remove(paths: number[][]) | Removes nodes by their paths, e.g., `.remove([[0,1], [0,2]])`. |
| getFirstNode(): ISlTreeNode | Gets the first node in the tree. |
| getLastNode(): ISlTreeNode | Gets the last node in the tree. |
| getNextNode(path: number[], filter?: (node: ISlTreeNode<TDataType>) => boolean): ISlTreeNode<TDataType> | Gets the next node. You can skip nodes by using the `filter` function. |
| getPrevNode(path: number[], filter?: (node: ISlTreeNode<TDataType>) => boolean): ISlTreeNode<TDataType> | Gets the previous node. You can skip nodes by using the `filter` function. |Use slots to customize different parts of the tree UI. Most slots provide access to the ISlTreeNode context.
| Slot | Context | Description |
|-------------|-------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| title | ISlTreeNode | Slot for customizing the item title. |
| toggle | ISlTreeNode | Slot for the expand/collapse button. |
| sidebar | ISlTreeNode | Slot for sidebar content. |
| draginfo | SlVueTree | Slot that follows the mouse cursor while dragging. By default, shows the count of dragging nodes. |
| empty-node | ISlTreeNode | Slot for an optional message when a folder is open but empty. |