Code Monkey home page Code Monkey logo

sl-vue-tree's Introduction

sl-vue-tree

Customizable draggable tree component for Vue.js

preview

demo

install

npm i sl-vue-tree

Quick start

<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>    

The value property is an array of ISlTreeNodeModel nodes:

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    data?: TDataType; // any serializable user data
}

For convenience the component's events return ISlTreeNode objects. Those actually are ISlTreeNodeModel with some computed props:

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 array of indexes, for example [2, 0, 1] in the example above is path to `Item4` 
    pathStr: string; // serialized path to node
    children: ISlTreeNode<TDataType>[];
}

You can get the list of ISlTreeNode from the computed slVueTree.nodes property

Props

prop type default description
value ISlTreeNodeModel[] [] An array of nodes to show. Each node is represented by ISlTreeNodeModel interface
allowMultiselect Boolean true Disable or enable the multiselect feature
allowToggleBranch Boolean true Disable or enable the expand/collapse button
edgeSize Number 3 Offset in pixels from top and bottom for folder-node element. While dragging cursor is in that offset, the dragging node will be placed before or after the folder-node instead of being placed inside the folder.
scrollAreaHeight Number 70 Offset in pixels from top and bottom for the component element. While dragging cursor is in that area, the scrolling starts.
maxScrollSpeed Number 20 The scroll speed is relative to the cursor position. Defines the max scroll speed.
multiselectKey String/String[] ['ctrlKey', 'metaKey'] The keys for multiselect mode. Allowed values are ['ctrlKey', 'metaKey', 'altKey']

Computed props

prop type description
nodes ISlTreeNode[] List of nodes with some computed props. See ISlTreeNode interface.
cursorPosition ICursorPosition Represents the current cursor position that describes the action that will be applied to the dragged node on mouseup event. See ICursorPosition interface
selectionSize Number The count of selected nodes
dragSize Number The count of selected and draggable nodes
isDragging Boolean True if nodes are dragging
interface ICursorPosition<TDataType> {
  node: ISlTreeNode<TDataType>;
  placement: 'before' | 'inside' | 'after';
}  

Events

event callback arguments description
input nodes: ISlTreeNodeModel[] triggers for any changes to value property
select selectedNodes: ISlTreeNode[], event: MouseEvent triggers when a node has been selected/deselected
toggle toggledNode: ISlTreeNode, event: MouseEvent triggers when a node has been collapsed/expanded
drop draggingNodes: ISlTreeNode[], position: ICursorPosition, event: MouseEvent triggers when dragging nodes have been dropped
nodeclick node: ISlTreeNode, event: MouseEvent handle click event on node
nodedblclick node: ISlTreeNode, event: MouseEvent handle dblclick event on node
nodecontextmenu node: ISlTreeNode, event: MouseEvent handle contextmenu event on node
externaldrop cursorPosition: ICursorPosition, event: MouseEvent handle drop event for external items demo

Methods

method description
getNode(path: number[]): ISlTreeNode Find the node by using its path
traverse(cb: (node: ISlTreeNode, nodeModel: ISlTreeNodeModel, siblings: ISlTreeNodeModel[]) => boolean) Helpful method to traverse all nodes. The traversing will be stopped if callback returns false.
updateNode(path: number[], patch: Partial) Update the node by using its path
select(path: number[], addToSelection = false) Select the node by using its path
getNodeEl(): HTMLElement Get the node HTMLElement by using its path
getSelected(): ISlTreeNode[] Get selected nodes
insert(position: ICursorPosition, nodeModel: ISlTreeNodeModel) Insert nodes by the current cursor position.
remove(paths: number[][]) Remove nodes by paths. For example .remove([[0,1], [0,2]])
getFirstNode(): ISlTreeNode Get the first node in the tree
getLastNode(): ISlTreeNode Get the last node in the tree
getNextNode(path: number[], filter?: (node: ISlTreeNode) => boolean): ISlTreeNode; Get the next node. You can skip the next nodes by using filter
getPrevNode(path: number[], filter?: (node: ISlTreeNode) => boolean): ISlTreeNode; Get the previous node. You can skip the previous nodes by using filter

Slots

slot context description
title ISlTreeNode Slot for item title
toggle ISlTreeNode Slot for expand/collapse button
sidebar ISlTreeNode Sidebar content
draginfo SlVueTree Slot that follows the mouse cursor while dragging. By default shows the dragging nodes count.
empty-node ISlTreeNode Slot for (optional) message when folder is open, but empty

IE 11 support

You must add a babel-polyfill for it to work correctly in IE11
See IE11 example

Examples

Add a folder or item icon via title slot

<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-if="!node.isLeaf"></i>
      </span>
    
      {{ node.title }}
      
    </template>
</sl-vue-tree>

Select all nodes

slVueTree.traverse((node, nodeModel, path) => {
    Vue.set(nodeModel, 'isSelected', true);
})

Handle keydown and keyup events via getNextNode and getPrevNode methods

demo

Contributing

see CONTRIBUTING.md

Changelog

v1.8.5

v1.8.4

  • added insert method #39

v1.8.3

  • Allow to disable or enable the expand/collapse button #33

v1.8.1

  • added IE11 support #17

v1.8.0

  • added empty-node slot

v1.7.1

  • added multiselectKey property

v1.7.0

  • added isSelectable and isDraggable flags

v1.6.0

  • added getNextNode and getPrevNode methods #6

v1.5.1

  • improve drop on the bottom of tree #5

v1.5.0

  • SlVueTree.select method added
  • SlVueTree.@nodeclick event fixed

sl-vue-tree's People

Contributors

alex-sokolov avatar darrelfrancis avatar ericksonc avatar holiber avatar lazylester avatar onekiloparsec avatar opowell avatar rojtjo avatar shibukk avatar yuki-inoue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sl-vue-tree's Issues

Cancel or revert drag

Is there a built in way to cancel or revert a drag operation? I'd like to be able to disable or lock some nodes from being dragged.

Thanks.

integration with vue-virtual-scroller

Hi and very good work on sl-vue-tree.

Thanks a lot .. I want to use your vue tree with a lots of items and want to combine with vue-virtual-scroller
to limit the dom ressource, where do you think the best way to combine vue-virtual-scroller with your code ?

thanks...

Handle selecting nodes via data

Example:

<sl-vue-tree v-model="nodes" :allow-multiselect="false"></sl-vue-tree>

and somewhere selectedNode method:

selectedNode(node) {
  node.isSelected = true
}

When selecting node in sidebar — all ok, but if we select one node, and later somewhere change isSelected in nodes — will be two selected nodes.

How to handle selecting nodes outside component, from data?

Cancel Drop event

Hi there.

I wanna cancel drop event when node is move to parent side.
Are there any function like stop or cancel the drop event?
Thanks a lot!

New paths + getParent() method on drop ?

Hi,

I am struggling a bit to update a backend with the current state of information we get on the drop callback.

There are 3 arguments: draggingNodes, position, and event. However, the path of each node inside draggingNodes are the old ones, and the position also contains the old path of the targetNode.

Morover, one couldn't get the updated indexes / paths without knowing the parent. And the getParent() method is missing (there is one such method inside the code, but it does something else).

I would be happy to write myself, but so far I couldn't get to know when the tree paths are actually updated. Thanks!

The maximum nesting level

Hi, how do I define the maximum nesting level?, I just want my list to be nested at 2 levels max.

Adding a directive for node leaf's title container

I'm trying to add a tooltip for node leafs. The idea is to display leafs full title on hover, since leafs title is too long and has to be truncated. I'm trying to combine SlVueTree with v-tooltip, but I can't figure out how to add v-tooltip="Some message" directive to leaf's title container.

Original tree is hollow

If the original tree does not have any file or forlder, can it pull the file from outside into that component?

@nodeclick is not firing

First off, this lib is great, thank you!

I'm having trouble getting @nodeclick or @select to fire correctly. @select seems to fire, but does not return the target node. @nodeclick does not fire.

<sl-vue-tree @nodeclick="test(node)" :allowMultiselect="false" v-model="nodes">

also tried...

<sl-vue-tree v-on:nodeclick="test(node)" :allowMultiselect="false" v-model="nodes">

Thanks again! Let me know if I'm doing something wrong.

  • Chris

Component prop isDraggable is not support

Glad that our project used your component.
I have a issue that you mentioned the newest version v1.8.4 include feature isDraggable since v1.7.0.
but it's no any effect when i set isDraggable prop on that component.
I searched your relate solved issue to solve that disabled drag effect from #12 .
but that solution is not good for doing this. hope you can start complete this feature.

Expand/Collapse transition

Question: Would it be possible to add transition wrapper to the expand/collapse v-if, so that collapse/expand could be animated?

visible is not working

hello it seems like setting
"data": {
"visible": false
}
for a node dosen't change anything

how can we fix this? (or am i missing something?) (actually even in the demo page is not working)

I need filter function

Hello.
I'm not very good at English and please acknowledge.
and It's good module.
Can you make a filter function on this?
I think it is better.

thankyou!

Accordion style

This is a great library. Thank you.
I would like to know if it is possible to have a kind of accordion style that always only one folder can be opened while another will be closed.

How to change a tree programmatically based on event

Question:

I have two tree one with directory and one with the list of file and directory, in two separate boxes.

How can clicking on a directory of the first tree to see only the files on the second tree corresponding to the directory?

here my code

<div class="row" id="treeView">
        <div class="tree-container col-md-3">
            <sl-vue-tree
                    v-model="leftFrontTree"
                    ref="slVueTree"
            >


                <template slot="title" slot-scope="{ node }">
                    <span class="item-icon">
                        <i class="fa fa-folder" v-if="!node.isLeaf"></i>
                        <i class="fa fa-file-alt" v-if="node.isLeaf"></i>
                    </span>

                    {{ node.title }}
                </template>

                <template slot="toggle" slot-scope="{ node }">
                  <span v-if="!node.isLeaf">
                    <i v-if="node.isExpanded" class="fa fa-chevron-down"></i>
                    <i v-if="!node.isExpanded" class="fa fa-chevron-right"></i>
                  </span>
                </template>

                <template slot="sidebar" slot-scope="{ node }">
                  <span v-if="node.isLeaf" class="visible-icon" @click="event => listFiles(event, node)">
                    <i class="fa fa-eye"></i>
                  </span>
                </template>

            </sl-vue-tree>

        </div>

        <div id="fileListId" class="col-md-3">
            <sl-vue-tree
                    v-model="frontTreeFull"
                    ref="refFrontTreeFull"
            >
                <template slot="title" slot-scope="{ node }">
                    <span class="item-icon">
                        <i class="fa fa-file"></i>
                    </span>

                    {{ node.title }}
                </template>

                <template slot="sidebar" slot-scope="{ node }">
                    <span class="visible-icon" @click="event => preview(event, node)">
                        <i class="fa fa-eye"></i>
                    </span>
                    <span class="visible-icon" @click="event => download(event, node)">
                        <i class="fa fa-cloud-download-alt"></i>
                    </span>
                </template>
            </sl-vue-tree>
        </div>
        <div id="filePreview" class="col-md-3">
            <h3>qui va l'anteprima del pdf</h3>

        </div>
    </div>

the javascript method tha I want to call

listFiles: function (event, node) {
                        debugger
                        event.stopPropagation();
                       
                        this.$refs.refFrontTreeFull = this.$refs.refFrontTreeFull.getNode(node.path);
}

Bad update algorithm

Everywere is used
const newNodes = this.copy(this.currentValue);
This is a very resource-intensive operation.
I have the data with about 600 nodes.
If I just select node JSON.parse(JSON.stringify(entity)) happens for whole tree.
It works very very slow.
I think it should to revise the update node algorithm.

Maybe this will help:
https://jsperf.com/deep-copy-vs-json-stringify-json-parse/5

Path of targetNode is old

Hi there,
the path of targetNode in the callback nodeDropped is the old path instead of the one after the drop, that makes the updateNode function unable to use. How to fix this?
Thanks.

drop from outside source

Question: am I able to apply some classes or data to an element to allow dragging into the tree from an outside source?

I can add elements via selecting a node then then splice/push on the data array, but not having any luck reading the drop event as it's probably set to cancel default and stop propagation?

Maybe expose a drop event with the index of the node dropped onto?

IE11 compatibility

Hi,
It seems there was an issue with the build of version 1.8.4 (which is currently the latest version available on npm): it includes arrow functions, and is therefore not compatible with IE11. The issue was not present in 1.8.3, and when I execute npm run build on the cloned repo, the code is correctly transpiled.
Thanks!

how add inserted in last children

how add inserted in last children
this.$refs.slVueTree.insert({node:node,placement: "inside"}, { title:node.title,code:node.code});
this code add in first items

traverse tree after drag/drop

I have been unable to add a drop handler to the demo, so I can't demonstrate this to you. But this is what I'm seeing in my app...

In the drop handler, I traverse the tree in order to sync the backend with the drag/drop event. However tree traversal (slVueTree.traverse) at this time finds the dragging nodes in both their original, pre-drag, position and also in the position in which they were dropped.

(if you can add a drop handler to the demo, I can probably offer the code that demonstrates this problem)

This is my drop handler:

    drop_handler: function(draggingNodes,position,event){
      const url = this.$store.state.staff_resource_path
      const data = {};
      slVueTree.traverse(function(node){data[JSON.stringify(node.path)] = {id: node.title.id, isFile: node.isLeaf}})
      $.ajax({
        url: url,
        data: data,
        method: 'put'
      })
    }

Programmatically selecting prev/next in tree

Is it possible to move selection by code?

For example, assume that selected Image Block 3:

2018-06-19 11 52 21

If we call method up — selection moved to Image Block 2
If we call method down — selection moved to Text Block 4

Thanks!

Mobile support

Hello,
first of all thank you for this excellent library!
My problem: it looks like drag'n'drop for mobile devices (with touch gestures) doesn't work. Is there any plan to support it in the future?
Thanks again, Diego

How to use import

Hi, great node tree component.

There is a way to use in a Vue CLI 3.0 project that uses import to get the node modules, instead of using a script tag?

Disable drop nodes

Is there a way to disable certain nodes/targets so we can prevent insertion in particular paths.

I have used isLeaf : true, but it doesn't work when a node already have children.

Great lib, thanks !

Can't import css in main.js (Module build failed: ModuleBuildError: Module build failed: BrowserslistError: Unknown browser query `dead`)

Hi. I'm using sl-vue-tree, installed by npm. (1.8.4 version) And thanks for your component.

As I write below in main.js, webpack build error occured.

import Vue from 'vue'
import 'babel-polyfill'
import App from './App'

import 'sl-vue-tree/src/sl-vue-tree-minimal.css' // this line makes error

new Vue({
  render: h => h(App)
}).$mount('#app')

I tried both sl-vue-tree-minimal.css and sl-vue-tree-dark.css.
The error message says below.

ERROR in ./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/postcss-loader/lib??ref--6-3!./node_modules/sl-vue-tree/src/sl-vue-tree-minimal.css
Module build failed: BrowserslistError: Unknown browser query `dead`

But when I just copy & paste css code in vue component, it works. (In component, changing <style scoped> to <style>)

Maybe it is because in your package.json
"browserslist": "> 0.25%, not dead"

I'm using packages version like below, using webpack 3.6.0 (using vue cli)

{
	"scripts": {
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"test": "npm run unit",
		"lint": "eslint --ext .js,.vue src test/unit",
		"build": "node build/build.js",
		"build:prod": "webpack --config build/webpack.prod.conf.js"
	},
	"dependencies": {
		"@babel/polyfill": "^7.0.0",
		"axios": "^0.18.0",
		"es6-promise": "^4.2.5",
		"html-loader": "^0.5.5",
		"jqwidgets-scripts": "^7.1.0",
		"moment": "^2.22.2",
		"sl-vue-tree": "^1.8.4",
		"vue": "^2.5.2",
		"vue-js-modal": "^1.3.28",
		"vue-router": "^3.0.1",
		"vuejs-datepicker": "^1.5.4",
		"vuex": "^3.0.1"
	},
	"devDependencies": {
		"autoprefixer": "^7.1.2",
		"babel-core": "^6.22.1",
		"babel-eslint": "^8.2.1",
		"babel-helper-vue-jsx-merge-props": "^2.0.3",
		"babel-loader": "^7.1.1",
		"babel-plugin-component": "^1.1.1",
		"babel-plugin-syntax-jsx": "^6.18.0",
		"babel-plugin-transform-runtime": "^6.22.0",
		"babel-plugin-transform-vue-jsx": "^3.5.0",
		"babel-preset-env": "^1.3.2",
		"babel-preset-stage-2": "^6.22.0",
		"chalk": "^2.0.1",
		"copy-webpack-plugin": "^4.0.1",
		"css-loader": "^2.1.1",
		"eslint": "^4.15.0",
		"eslint-config-standard": "^10.2.1",
		"eslint-friendly-formatter": "^3.0.0",
		"eslint-loader": "^1.7.1",
		"eslint-plugin-import": "^2.7.0",
		"eslint-plugin-node": "^5.2.0",
		"eslint-plugin-promise": "^3.4.0",
		"eslint-plugin-standard": "^3.0.1",
		"eslint-plugin-vue": "^4.0.0",
		"extract-text-webpack-plugin": "^3.0.0",
		"file-loader": "^1.1.4",
		"friendly-errors-webpack-plugin": "^1.6.1",
		"html-webpack-plugin": "^2.30.1",
		"node-notifier": "^5.1.2",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"ora": "^1.2.0",
		"portfinder": "^1.0.13",
		"postcss-import": "^11.0.0",
		"postcss-loader": "^2.0.8",
		"postcss-url": "^7.2.1",
		"rimraf": "^2.6.0",
		"semver": "^5.3.0",
		"shelljs": "^0.7.6",
		"uglifyjs-webpack-plugin": "^1.1.1",
		"url-loader": "^0.5.8",
		"validator": "^10.11.0",
		"vue-loader": "^14.2.2",
		"vue-style-loader": "^3.0.1",
		"vue-template-compiler": "^2.5.2",
		"webpack": "^3.6.0",
		"webpack-bundle-analyzer": "^2.9.0",
		"webpack-dev-server": "^2.9.1",
		"webpack-merge": "^4.1.0"
	},
	"engines": {
		"node": ">= 6.0.0",
		"npm": ">= 3.0.0"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
	]
}

Could you check this error, please.

Thanks.

Multiselect & Selectable issues.

When trying to supply the property allowMultiselect it's still allowing multi-selection. Please inform me if I'm using this wrong.

            <sl-vue-tree
                @nodeclick="clickedTreeItem"
                v-model="fileSystem"
                :allowMultiselect="false"
            />

Also, per node, I'm supplying the flag isSelectable: false with the directories, however, it's still allowing selection of directories, does this flag disable the nodeclick event as I expect or again please inform me if I'm using this wrong.

How to implement @nodecontextmenu? No documentation

In the application I'm pondering it would be useful for the tree viewer to have a context menu.

The documentation doesn't say what to do, and neither do the demos.

I see in the source code that nodecontextmenu is emitted, and I am successfully receiving the event, but don't know what to do afterward.

Cannot use 'in' operator to search for nodes in null

First off, thanks for the great work with sl-vue-tree. I seem to have my tree displaying properly on the page with the drag and collapse 'branch' functionality working. However, my console gives me a series of warnings whenever I click a node:

  1. [Vue Warn] Cannot set reactive property on undefined, null, or primitive value: null
  2. [Vue warn]: Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'chapters' in null"
  3. TypeError: Cannot use 'in' operator to search for 'chapters' in null

My chapters array is an array of the following objects - i am simply giving this.chapters to the sl-vue-tree v-model:

 {
                title: this.title,
                data: {
                    image: this.image,
                    description: this.description,
                    id: uuid()
                },
                children: [
                    {
                        data: {
                            id: uuid(),
                            path: '#',
                            colour: 'primary',
                            isCompile: false,
                        },
                        title: 'Notes',
                        isLeaf: true, 
                        isSelected: false,
                        isSelectable: true,
                        isDraggable: true,
                        isExpanded: true
                    }
                ],
                isLeaf: false,
                isSelected: false,
                isSelectable: false,
                isDraggable: true,
                isExpanded: true   
            }

Apologies in advance if I have missed something simply - been scratching my head with this one for a couple of days now.

Thanks!

Combining nodecontextmenu and nodeclick.

Currently, item's not getting selected if you click on it with the right mouse button.
Is it possible to add nodeclick event right before nodecontextmenu is getting fired if one or less items are selected. Also, let it behave as it does currently if more than 1 items selected?

Terminate dragging without a drop

In using sl-vue-tree in my app, I have concluded that it's sometimes necessary to terminate dragging without dropping the draggingNodes anywhere. Sometimes I have inadvertently found dragging to be triggered and there's currently no way to terminate it. In another scenario, I initiate dragging but then change my mind, and I would just like to revert to the pre-dragging hierarchy.

I would happily submit a PR for this, but would like to understand if

  1. you agree that it's desirable
  2. you have a preference as to how it should be done, options I can think of (you may have other ideas too) include:
    a) hit the keyboard escape key
    b) drop the dragging nodes left or right of the bounding box
    c.) drop the dragging nodes above or below the bounding box, sufficiently far removed that it's not interpreted as a drop 'before' the first node or 'after' the last node.

Cannot individually change the node icon

So far your component worked great for me. However changing the icon of individual nodes seems impossible. If you change one you change them all. In the code snippet below I added two more icons depending on some conditions. When I click on the node with the bug icon all leaf items get the bug icon. Would be great if the next release supports changing individual nodes, either in the slot or via a method in JavaScript.

<template slot="title" slot-scope="{ node }">
<span class="item-icon">
	<i v-if="node.isLeaf && getCurrentItemSubType == 0">
		<font-awesome-icon icon="file" />
	</i>
	<i v-if="node.isLeaf && getCurrentItemSubType == 1">
		<font-awesome-icon icon="hourglass-start" />
	</i>
	<i v-if="node.isLeaf && getCurrentItemSubType == 2">
		<font-awesome-icon icon="bug" />
	</i>
	<i v-if="!node.isLeaf">
		<font-awesome-icon icon="folder" />
	</i>
</span>
{{ node.title }}
</template>

Thank you for your good work,
Erik

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.