vuejs-tree

VueJS Tree
==========


Vue2 version here

A highly customizable vuejs tree viewer

!tree

#### Example

codesandbox

Getting Started

$3

You can install using yarn:

``bash
$ yarn add vuejs-tree
`

or with npm:

`bash
$ npm install vuejs-tree
`

$3

Add the following lines at the top of your .js file which contains your Vue instance.

`javascript
import Tree from 'vuejs-tree'


// in your vue instance
components: {
'Tree': Tree
},
`


Then add the following line in your html file to generate a tree. You can have as many trees per page as you want.
`html

`

Data Structure

You need to define data to display which is a nested array of hash.

Example:

`javascript
data: {
treeDisplayData: [
{
text: 'Root 1',
state: { checked: false, selected: false, expanded: false },
nodes: [
{
text: 'Child 1',
state: { checked: false, selected: false, expanded: false },
nodes: [
{
text: 'Grandchild 1',
state: { checked: false, selected: false, expanded: false }
},
{
text: 'Grandchild 2',
state: { checked: false, selected: false, expanded: false }
}
]
},
{
text: 'Child 2',
state: { checked: false, selected: false, expanded: false }
}
]
},
{
text: 'Root 2',
state: { checked: false, selected: false, expanded: false }
}
]
}
`

$3

Here is a fully customized node:

`javascript
{
id: 1,
text: 'Root 1',
definition: 'First node',
depth: 1,
checkable: false,
selectable: false,
expandable: true,
tags: [42],
state: {
checked: false,
expanded: false,
selected: false
},
nodes: [
{},
...
]
}
`

The Following properties define a node level css and behavior.

| key | type | Detail |
|------------------|--------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
| id | String or Integer --> Mandatory | Used in the tree to differentiate each node |
| text | String --> Mandatory | The text value displayed at the right of the node icons |
| definition | String --> Optional | If some text is given, then it will show as a tooltip |
| depth | Integer --> Optional | It corresponds to the node depth, starting from 0, 1 or anything. It's advisable to fill these fields if some of your nodes have the same id |
| tags | [Integer] --> Optional | The tag is displayed at the right end of the line |
| checkable | Boolean --> Optional, default: true | Used to enable or disable the node's check event |
| selectable | Boolean --> Optional, default: true | Used to enable or disable the node's select event |
| expandable | Boolean --> Optional, default: true | Used to enable or disable the node's expand event |
| state | | nodes's state |
| state.checked | Boolean --> Mandatory, default: false | Change the node's default state (at initialize) |
| state.selected | Boolean --> Mandatory, default: false | Change the node's default state (at initialize) |
| state.expanded | Boolean --> Mandatory, default: false | Change the node's default state (at initialize) |
| nodes | Object --> Optional | Used to display the node's children. Look above for a structure example |

Options / Styles

Here is an example of a customOptions hash the tree can take.
I suggest you to use a vuejs computed function if you want to use a function pointer.

`javascript
computed: {
myCustomStyles() {
return {
tree: {
style: {
height: 'auto',
maxHeight: '300px',
overflowY: 'visible',
display: 'inline-block',
textAlign: 'left'
}
},
row: {
style: {
width: '500px',
cursor: 'pointer'
},
child: {
class: '',
style: {
height: '35px'
},
active: {
class: 'custom_row_active_class',
style: {
height: '35px'
}
}
}
},
addNode: {
class: 'custom_class',
style: {
color: '#007AD5'
}
},
editNode: {
class: 'custom_class',
style: {
color: '#007AD5'
}
},
deleteNode: {
class: 'custom_class',
style: {
color: '#EE5F5B'
}
},
selectIcon: {
class: 'custom_class',
style: {
color: '#007AD5'
},
active: {
class: 'custom_class',
style: {
color: '#2ECC71'
}
}
},
text: {
style: {},
class: 'capitalize',
active: {
style: {
'font-weight': 'bold',
color: '#2ECC71'
}
}
}
};
},
myCustomOptions() {
return {
treeEvents: {
expanded: {
state: true,
fn: null,
},
collapsed: {
state: false,
fn: null,
},
selected: {
state: false,
fn: null,
},
checked: {
state: true,
fn: this.myCheckedFunction,
}
},
events: {
expanded: {
state: true,
fn: null,
},
selected: {
state: false,
fn: null,
},
checked: {
state: false,
fn: null,
},
editableName: {
state: false,
fn: null,
calledEvent: null,
}
},
addNode: { state: false, fn: null, appearOnHover: false },
editNode: { state: true, fn: null, appearOnHover: true },
deleteNode: { state: true, fn: null, appearOnHover: true },
showTags: true,
};
}
},
`

#### Styles

| Option name | Detail |
|-------------|----------------------------------------------------------------------------------------------------|
| tree | Object - override default tree css |
| row.style | Object - override default tree node css |
| row.child | Object - override style of