0.0.2 • Published 1 year ago
@evangelos_bitsilis/v-treeview v0.0.2
V - Treeview
V - Treeview is a Vue 3 component with drag n drop and collapse functionality.
Installation
npm i @evangelos_bitsilis/v-treeview
Configuration (optional)
{
colors: {
indicators: {
text: "White",
lines: "RoyalBlue",
background: "RoyalBlue",
},
ghost: {
text: "White",
background: "RoyalBlue"
},
notDraggable: {
text: "Red"
}
}
}| Color Config | Type | Default | Description |
|---|---|---|---|
| indicators | object | - | Holds tree's indicator colors |
| indicators.text | string | "White" | Changes the color of the hovering element's text. Works in conjunction with the background color |
| indicators.lines | string | "RoyalBlue" | Changes the indicator lines color |
| indicators.background | string | "RoyalBlue" | Changes the background color of the hovering element |
| ghost | object | - | Contains ghost element's colors |
| ghost.text | string | "White" | Ghost's text color |
| ghost.background | string | "RoyalBlue" | Ghost's background color |
| notDraggable | object | - | Contains the colors of the elements which can't be dragged |
| notDraggable.text | string | "Red" | Text color |
Data structure
[{
"id": 1,
"text": "Root",
"state": {
"expanded": true,
"draggable": true,
"droppable": true
},
"children": [{
"id": 2,
"text": "Child",
"state": {
"expanded": true,
"draggable": true,
"droppable": true
},
"children": []
}]
}]Make sure it's a reactive property
Node properties
| Property | Type | Required | Description |
|---|---|---|---|
| id | integer | true | Used in the tree to differentiate each node |
| text | string | true | Displayed text |
| state | object / State | true | Node's state |
| children | array | true | An array with node's children. If any |
Node's state
| State | Type | Default | Description |
|---|---|---|---|
| expanded | boolean | true | Determines if the node is expanded or not |
| draggable | boolean | true | Determines if the node can be dragged |
| droppable | boolean | true | Determines if nodes allowed to be dropped |
Initialization
<template>
<Tree :data="data">
</template>
<script setup>
import Tree from "@evangelos_bitsilis/v-treeview"
import "@evangelos_bitsilis/v-treeview/dist/style.css";
import someData from "someFile.json"
const data = reactive(someData);
</script>Events
treeMounted Emitted when the tree is mounted
orderChanged Emitted every time the order of the tree nodes changes. And returns the updated tree structure.
<template>
<Tree :data="data" @orderChanged="foo"/>
</template>
<script setup>
import Tree from "@evangelos_bitsilis/v-treeview"
import "@evangelos_bitsilis/v-treeview/dist/style.css";
import someData from "someFile.json";
const data = reactive(someData);
function foo(newData) {
console.log(newData);
}
</script>Custom HTML
The Tree has 2 normal slots that can be used to add content before and after the node's default text
<Tree :data="data">
<template #before="data">
<div style="margin-right: 20px;">
before {{ data.item.id }}
</div>
</template>
<template #after="data">
<div style="margin-left: 20px;">
after {{ data.item.id }}
</div>
</template>
</Tree>