vikingowl/vue3-tree-list
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

✨ Add slot for display node/leaf name (#74)

Browse Source
This commit is contained in:
Zois Pagoulatos
2020-07-01 11:26:10 +02:00
parent d1e12aad85
commit 97daf67f9a
3 changed files with 88 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
dev/App.vue
View File

@@ -14,6 +14,11 @@
default-leaf-node-name="new leaf" default-leaf-node-name="new leaf"
v-bind:default-expanded="false" v-bind:default-expanded="false"
> >
<template v-slot:leafNameDisplay="slotProps">
<span>
{{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
</span>
</template>
<template v-slot:addTreeNodeIcon="slotProps"> <template v-slot:addTreeNodeIcon="slotProps">
<span class="icon">📂</span> <span class="icon">📂</span>
</template> </template>
@@ -41,9 +46,8 @@
</vue-tree-list> </vue-tree-list>
<button @click="getNewTree">Get new tree</button> <button @click="getNewTree">Get new tree</button>
<pre> <pre>
{{ newTree }} {{ newTree }}
</pre </pre>
>
</div> </div>
</template> </template>
<script> <script>
@@ -176,4 +180,9 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.muted {
color: gray;
font-size: 80%;
}
</style> </style>

118
readme.md
View File

@@ -1,6 +1,7 @@
[![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions) [![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions)
# vue-tree-list # vue-tree-list
A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging. A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
![vue-tree-demo.gif](https://raw.githubusercontent.com/ParadeTo/vue-tree-list/master/img/demo.gif) ![vue-tree-demo.gif](https://raw.githubusercontent.com/ParadeTo/vue-tree-list/master/img/demo.gif)
@@ -21,7 +22,8 @@ Vue.use(VueTreeList)
Or just register locally like the example below. Or just register locally like the example below.
# use # use
``npm install vue-tree-list``
`npm install vue-tree-list`
```html ```html
<template> <template>
@@ -35,7 +37,13 @@ Or just register locally like the example below.
:model="data" :model="data"
default-tree-node-name="new node" default-tree-node-name="new node"
default-leaf-node-name="new leaf" default-leaf-node-name="new leaf"
v-bind:default-expanded="false"> v-bind:default-expanded="false"
>
<template v-slot:leafNameDisplay="slotProps">
<span>
{{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
</span>
</template>
<span class="icon" slot="addTreeNodeIcon">📂</span> <span class="icon" slot="addTreeNodeIcon">📂</span>
<span class="icon" slot="addLeafNodeIcon">＋</span> <span class="icon" slot="addLeafNodeIcon">＋</span>
<span class="icon" slot="editNodeIcon">📃</span> <span class="icon" slot="editNodeIcon">📃</span>
@@ -56,7 +64,7 @@ Or just register locally like the example below.
components: { components: {
VueTreeList VueTreeList
}, },
data () { data() {
return { return {
newTree: {}, newTree: {},
data: new Tree([ data: new Tree([
@@ -93,32 +101,32 @@ Or just register locally like the example below.
} }
}, },
methods: { methods: {
onDel (node) { onDel(node) {
console.log(node) console.log(node)
node.remove() node.remove()
}, },
onChangeName (params) { onChangeName(params) {
console.log(params) console.log(params)
}, },
onAddNode (params) { onAddNode(params) {
console.log(params) console.log(params)
}, },
onClick (params) { onClick(params) {
console.log(params) console.log(params)
}, },
addNode () { addNode() {
var node = new TreeNode({ name: 'new node', isLeaf: false }) var node = new TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = [] if (!this.data.children) this.data.children = []
this.data.addChildren(node) this.data.addChildren(node)
}, },
getNewTree () { getNewTree() {
var vm = this var vm = this
function _dfs (oldNode) { function _dfs(oldNode) {
var newNode = {} var newNode = {}
for (var k in oldNode) { for (var k in oldNode) {
@@ -137,8 +145,7 @@ Or just register locally like the example below.
} }
vm.newTree = _dfs(vm.data) vm.newTree = _dfs(vm.data)
}, }
} }
} }
</script> </script>
@@ -163,58 +170,71 @@ Or just register locally like the example below.
cursor: pointer; cursor: pointer;
} }
} }
</style>
.muted {
color: gray;
font-size: 80%;
}
</style>
``` ```
# props # props
## props of vue-tree-list
| name | type | default | description |
|:-----:|:-------:|:------------:|:----:|
model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type
default-tree-node-name | string | New node node | Default name for new treenode
default-leaf-node-name | string | New leaf node | Default name for new leafnode
default-expanded | boolean | true | Tree is expanded or not
## props of vue-tree-list
| name | type | default | description |
| :--------------------: | :------: | :-----------: | :-----------------------------------------------------------------------------------------: |
| model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type |
| default-tree-node-name | string | New node node | Default name for new treenode |
| default-leaf-node-name | string | New leaf node | Default name for new leafnode |
| default-expanded | boolean | true | Tree is expanded or not |
## props of TreeNode ## props of TreeNode
### attributes ### attributes
| name | type | default | description |
|:-----:|:-------:|:------------:|:----:| | name | type | default | description |
id | string, number | current timestamp | The node's id | :-----------------: | :------------: | :---------------: | :------------------------------: |
isLeaf | boolean | false | The node is leaf or not | id | string, number | current timestamp | The node's id |
dragDisabled | boolean | false | Forbid dragging tree node | isLeaf | boolean | false | The node is leaf or not |
addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not | dragDisabled | boolean | false | Forbid dragging tree node |
addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not | addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not |
editNodeDisabled | boolean | false | Show `editNode` button or not | addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not |
delNodeDisabled | boolean | false | Show `delNode` button or not | editNodeDisabled | boolean | false | Show `editNode` button or not |
children | array | null | The children of node | delNodeDisabled | boolean | false | Show `delNode` button or not |
| children | array | null | The children of node |
### methods ### methods
| name | params | description |
|:-----:|:-------:|:----:| | name | params | description |
changeName | name | Change node's name | :----------: | :---------------------: | :---------------------------: |
addChildren | children: object, array | Add children to node | changeName | name | Change node's name |
remove | - | Remove node from the tree | addChildren | children: object, array | Add children to node |
moveInto | target: TreeNode | Move node into another node | remove | - | Remove node from the tree |
insertBefore | target: TreeNode | Move node before another node | moveInto | target: TreeNode | Move node into another node |
insertAfter | target: TreeNode | Move node after another node | insertBefore | target: TreeNode | Move node before another node |
| insertAfter | target: TreeNode | Move node after another node |
# events # events
| name | params | description |
|:-----:|:-------:|:----:| | name | params | description |
click | TreeNode | Trigger when clicking a tree node | :---------: | :--------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: |
change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name | click | TreeNode | Trigger when clicking a tree node |
delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node. | change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name |
add-node | TreeNode | Trigger after adding a new node | delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node. |
drop | {node, src, target} | Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into | add-node | TreeNode | Trigger after adding a new node |
drop-before | {node, src, target} | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before | drop | {node, src, target} | Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into |
drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after | drop-before | {node, src, target} | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before |
| drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after |
# customize operation icons # customize operation icons
The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below: The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below:
```html ```html
<template v-slot:leafNameDisplay="slotProps">
<span>{{ slotProps.model.name }} #{{ slotProps.model.id }}</span>
</template>
<template v-slot:addTreeNodeIcon="slotProps"> <template v-slot:addTreeNodeIcon="slotProps">
<span class="icon">📂</span> <span class="icon">📂</span>
</template> </template>
@@ -232,6 +252,8 @@ The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editN
</template> </template>
<template v-slot:treeNodeIcon="slotProps"> <template v-slot:treeNodeIcon="slotProps">
<span class="icon"> <span class="icon">
{{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span> {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ?
'🌲' : '' }}</span
>
</template> </template>
``` ```

7
src/VueTreeList.vue
View File

@@ -43,7 +43,9 @@
</span> </span>
<div class="vtl-node-content" v-if="!editable"> <div class="vtl-node-content" v-if="!editable">
{{ model.name }} <slot name="leafNameDisplay" :expanded="expanded" :model="model" :root="rootNode">
{{ model.name }}
</slot>
</div> </div>
<input <input
v-else v-else
@@ -110,6 +112,9 @@
:model="model" :model="model"
:key="model.id" :key="model.id"
> >
<template v-slot:leafNameDisplay="slotProps">
<slot name="leafNameDisplay" v-bind="slotProps" />
</template>
<template v-slot:addTreeNodeIcon="slotProps"> <template v-slot:addTreeNodeIcon="slotProps">
<slot name="addTreeNodeIcon" v-bind="slotProps" /> <slot name="addTreeNodeIcon" v-bind="slotProps" />
</template> </template>