ayou
291
dev/App.vue
291
dev/App.vue
@@ -1,159 +1,174 @@
|
||||
<template>
|
||||
<div>
|
||||
<button @click="addNode">Add Node</button>
|
||||
<vue-tree-list
|
||||
@click="onClick"
|
||||
@change-name="onChangeName"
|
||||
@delete-node="onDel"
|
||||
@add-node="onAddNode"
|
||||
@drop="drop"
|
||||
@drop-before="dropBefore"
|
||||
@drop-after="dropAfter"
|
||||
:model="data"
|
||||
default-tree-node-name="new node"
|
||||
default-leaf-node-name="new leaf"
|
||||
v-bind:default-expanded="false">
|
||||
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
||||
<span class="icon" slot="addLeafNodeIcon">＋</span>
|
||||
<span class="icon" slot="editNodeIcon">📃</span>
|
||||
<span class="icon" slot="delNodeIcon">✂️</span>
|
||||
<span class="icon" slot="leafNodeIcon">🍃</span>
|
||||
<span class="icon" slot="treeNodeIcon">🌲</span>
|
||||
</vue-tree-list>
|
||||
<button @click="getNewTree">Get new tree</button>
|
||||
<pre>
|
||||
{{newTree}}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="addNode">Add Node</button>
|
||||
<vue-tree-list
|
||||
@click="onClick"
|
||||
@change-name="onChangeName"
|
||||
@delete-node="onDel"
|
||||
@add-node="onAddNode"
|
||||
@drop="drop"
|
||||
@drop-before="dropBefore"
|
||||
@drop-after="dropAfter"
|
||||
:model="data"
|
||||
default-tree-node-name="new node"
|
||||
default-leaf-node-name="new leaf"
|
||||
v-bind:default-expanded="false"
|
||||
>
|
||||
<template v-slot:addTreeNodeIcon="slotProps">
|
||||
<span class="icon">📂</span>
|
||||
</template>
|
||||
<template v-slot:addLeafNodeIcon="slotProps">
|
||||
<span class="icon">＋</span>
|
||||
</template>
|
||||
<template v-slot:editNodeIcon="slotProps">
|
||||
<span class="icon">📃</span>
|
||||
</template>
|
||||
<template v-slot:delNodeIcon="slotProps">
|
||||
<span class="icon">✂️</span>
|
||||
</template>
|
||||
<template v-slot:leafNodeIcon="slotProps">
|
||||
<span class="icon">🍃</span>
|
||||
</template>
|
||||
<template v-slot:treeNodeIcon="slotProps">
|
||||
<span class="icon">
|
||||
{{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
|
||||
</template>
|
||||
</vue-tree-list>
|
||||
<button @click="getNewTree">Get new tree</button>
|
||||
<pre>
|
||||
{{ newTree }}
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { VueTreeList, Tree, TreeNode } from '../src'
|
||||
export default {
|
||||
components: {
|
||||
VueTreeList
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
newTree: {},
|
||||
data: new Tree([
|
||||
{
|
||||
name: 'Node 1',
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
addTreeNodeDisabled: true,
|
||||
addLeafNodeDisabled: true,
|
||||
editNodeDisabled: true,
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Node 1-2',
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Node 2',
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: 'Node 3',
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDel (node) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(node)
|
||||
node.remove()
|
||||
},
|
||||
|
||||
onChangeName (params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
onAddNode (params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
onClick (params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
drop: function ({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop', node, src, target)
|
||||
},
|
||||
|
||||
dropBefore: function ({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop-before', node, src, target)
|
||||
},
|
||||
|
||||
dropAfter: function ({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop-after', node, src, target)
|
||||
},
|
||||
|
||||
addNode () {
|
||||
var node = new TreeNode({ name: 'new node', isLeaf: false })
|
||||
if (!this.data.children) this.data.children = []
|
||||
this.data.addChildren(node)
|
||||
},
|
||||
|
||||
getNewTree () {
|
||||
var vm = this
|
||||
function _dfs (oldNode) {
|
||||
var newNode = {}
|
||||
|
||||
for (var k in oldNode) {
|
||||
if (k !== 'children' && k !== 'parent') {
|
||||
newNode[k] = oldNode[k]
|
||||
import {VueTreeList, Tree, TreeNode} from '../src'
|
||||
export default {
|
||||
components: {
|
||||
VueTreeList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
newTree: {},
|
||||
data: new Tree([
|
||||
{
|
||||
name: 'Node 1',
|
||||
id: 1,
|
||||
pid: 0,
|
||||
dragDisabled: true,
|
||||
addTreeNodeDisabled: true,
|
||||
addLeafNodeDisabled: true,
|
||||
editNodeDisabled: true,
|
||||
delNodeDisabled: true,
|
||||
children: [
|
||||
{
|
||||
name: 'Node 1-2',
|
||||
id: 2,
|
||||
isLeaf: true,
|
||||
pid: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Node 2',
|
||||
id: 3,
|
||||
pid: 0,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
name: 'Node 3',
|
||||
id: 4,
|
||||
pid: 0
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDel(node) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(node)
|
||||
node.remove()
|
||||
},
|
||||
|
||||
if (oldNode.children && oldNode.children.length > 0) {
|
||||
newNode.children = []
|
||||
for (var i = 0, len = oldNode.children.length; i < len; i++) {
|
||||
newNode.children.push(_dfs(oldNode.children[i]))
|
||||
}
|
||||
onChangeName(params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
onAddNode(params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
onClick(params) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(params)
|
||||
},
|
||||
|
||||
drop: function({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop', node, src, target)
|
||||
},
|
||||
|
||||
dropBefore: function({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop-before', node, src, target)
|
||||
},
|
||||
|
||||
dropAfter: function({node, src, target}) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('drop-after', node, src, target)
|
||||
},
|
||||
|
||||
addNode() {
|
||||
var node = new TreeNode({name: 'new node', isLeaf: false})
|
||||
if (!this.data.children) this.data.children = []
|
||||
this.data.addChildren(node)
|
||||
},
|
||||
|
||||
getNewTree() {
|
||||
var vm = this
|
||||
function _dfs(oldNode) {
|
||||
var newNode = {}
|
||||
|
||||
for (var k in oldNode) {
|
||||
if (k !== 'children' && k !== 'parent') {
|
||||
newNode[k] = oldNode[k]
|
||||
}
|
||||
return newNode
|
||||
}
|
||||
|
||||
vm.newTree = _dfs(vm.data)
|
||||
if (oldNode.children && oldNode.children.length > 0) {
|
||||
newNode.children = []
|
||||
for (var i = 0, len = oldNode.children.length; i < len; i++) {
|
||||
newNode.children.push(_dfs(oldNode.children[i]))
|
||||
}
|
||||
}
|
||||
return newNode
|
||||
}
|
||||
|
||||
vm.newTree = _dfs(vm.data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
.vtl {
|
||||
.vtl-drag-disabled {
|
||||
background-color: #d0cfcf;
|
||||
&:hover {
|
||||
background-color: #d0cfcf;
|
||||
}
|
||||
}
|
||||
.vtl-disabled {
|
||||
.vtl {
|
||||
.vtl-drag-disabled {
|
||||
background-color: #d0cfcf;
|
||||
&:hover {
|
||||
background-color: #d0cfcf;
|
||||
}
|
||||
}
|
||||
.vtl-disabled {
|
||||
background-color: #d0cfcf;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" rel="stylesheet/less" scoped>
|
||||
.icon {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
27
readme.md
27
readme.md
@@ -199,13 +199,26 @@ drop-before | {node, src, target} | Trigger after dropping a node before another
|
||||
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
|
||||
The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them:
|
||||
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
|
||||
<span class="icon" slot="addTreeNodeIcon">📂</span>
|
||||
<span class="icon" slot="addLeafNodeIcon">＋</span>
|
||||
<span class="icon" slot="editNodeIcon">📃</span>
|
||||
<span class="icon" slot="delNodeIcon">✂️</span>
|
||||
<span class="icon" slot="leafNodeIcon">🍃</span>
|
||||
<span class="icon" slot="treeNodeIcon">🌲</span>
|
||||
<template v-slot:addTreeNodeIcon="slotProps">
|
||||
<span class="icon">📂</span>
|
||||
</template>
|
||||
<template v-slot:addLeafNodeIcon="slotProps">
|
||||
<span class="icon">＋</span>
|
||||
</template>
|
||||
<template v-slot:editNodeIcon="slotProps">
|
||||
<span class="icon">📃</span>
|
||||
</template>
|
||||
<template v-slot:delNodeIcon="slotProps">
|
||||
<span class="icon">✂️</span>
|
||||
</template>
|
||||
<template v-slot:leafNodeIcon="slotProps">
|
||||
<span class="icon">🍃</span>
|
||||
</template>
|
||||
<template v-slot:treeNodeIcon="slotProps">
|
||||
<span class="icon">
|
||||
{{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
|
||||
</template>
|
||||
```
|
||||
|
||||
264
src/Tree.js
264
src/Tree.js
@@ -1,3 +1,4 @@
|
||||
import {traverseTree} from './tools'
|
||||
/**
|
||||
* Tree data struct
|
||||
* Created by ayou on 2017/7/20.
|
||||
@@ -8,155 +9,160 @@
|
||||
* dragDisabled: decide if it can be dragged
|
||||
* disabled: desabled all operation
|
||||
*/
|
||||
const TreeNode = function (data) {
|
||||
const { id, isLeaf } = data
|
||||
this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
|
||||
this.parent = null
|
||||
this.children = null
|
||||
this.isLeaf = !!isLeaf
|
||||
export class TreeNode {
|
||||
constructor(data) {
|
||||
const {id, isLeaf} = data
|
||||
this.id = typeof id === 'undefined' ? new Date().valueOf() : id
|
||||
this.parent = null
|
||||
this.children = null
|
||||
this.isLeaf = !!isLeaf
|
||||
|
||||
// other params
|
||||
for (var k in data) {
|
||||
if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
|
||||
this[k] = data[k]
|
||||
// other params
|
||||
for (var k in data) {
|
||||
if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
|
||||
this[k] = data[k]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TreeNode.prototype.changeName = function (name) {
|
||||
this.name = name
|
||||
}
|
||||
|
||||
TreeNode.prototype.addChildren = function (children) {
|
||||
if (!this.children) {
|
||||
this.children = []
|
||||
changeName(name) {
|
||||
this.name = name
|
||||
}
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
for (let i = 0, len = children.length; i < len; i++) {
|
||||
const child = children[i]
|
||||
addChildren(children) {
|
||||
if (!this.children) {
|
||||
this.children = []
|
||||
}
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
for (let i = 0, len = children.length; i < len; i++) {
|
||||
const child = children[i]
|
||||
child.parent = this
|
||||
child.pid = this.id
|
||||
}
|
||||
this.children.concat(children)
|
||||
} else {
|
||||
const child = children
|
||||
child.parent = this
|
||||
child.pid = this.id
|
||||
}
|
||||
this.children.concat(children)
|
||||
} else {
|
||||
const child = children
|
||||
child.parent = this
|
||||
child.pid = this.id
|
||||
this.children.push(child)
|
||||
}
|
||||
}
|
||||
|
||||
// remove self
|
||||
TreeNode.prototype.remove = function () {
|
||||
const parent = this.parent
|
||||
const index = parent.findChildIndex(this)
|
||||
parent.children.splice(index, 1)
|
||||
}
|
||||
|
||||
// remove child
|
||||
TreeNode.prototype._removeChild = function (child) {
|
||||
for (var i = 0, len = this.children.length; i < len; i++) {
|
||||
if (this.children[i] === child) {
|
||||
this.children.splice(i, 1)
|
||||
break
|
||||
this.children.push(child)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TreeNode.prototype.isTargetChild = function (target) {
|
||||
let parent = target.parent
|
||||
while (parent) {
|
||||
if (parent === this) {
|
||||
return true
|
||||
}
|
||||
parent = parent.parent
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
TreeNode.prototype.moveInto = function (target) {
|
||||
if (this.name === 'root' || this === target) {
|
||||
return
|
||||
// remove self
|
||||
remove() {
|
||||
const parent = this.parent
|
||||
const index = parent.findChildIndex(this)
|
||||
parent.children.splice(index, 1)
|
||||
}
|
||||
|
||||
// cannot move ancestor to child
|
||||
if (this.isTargetChild(target)) {
|
||||
return
|
||||
}
|
||||
|
||||
// cannot move to leaf node
|
||||
if (target.isLeaf) {
|
||||
return
|
||||
}
|
||||
|
||||
this.parent._removeChild(this)
|
||||
this.parent = target
|
||||
this.pid = target.id
|
||||
if (!target.children) {
|
||||
target.children = []
|
||||
}
|
||||
target.children.unshift(this)
|
||||
}
|
||||
|
||||
TreeNode.prototype.findChildIndex = function (child) {
|
||||
var index
|
||||
for (let i = 0, len = this.children.length; i < len; i++) {
|
||||
if (this.children[i] === child) {
|
||||
index = i
|
||||
break
|
||||
// remove child
|
||||
_removeChild(child) {
|
||||
for (var i = 0, len = this.children.length; i < len; i++) {
|
||||
if (this.children[i] === child) {
|
||||
this.children.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return index
|
||||
}
|
||||
|
||||
TreeNode.prototype._beforeInsert = function (target) {
|
||||
if (this.name === 'root' || this === target) {
|
||||
isTargetChild(target) {
|
||||
let parent = target.parent
|
||||
while (parent) {
|
||||
if (parent === this) {
|
||||
return true
|
||||
}
|
||||
parent = parent.parent
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// cannot insert ancestor to child
|
||||
if (this.isTargetChild(target)) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.parent._removeChild(this)
|
||||
this.parent = target.parent
|
||||
this.pid = target.parent.id
|
||||
return true
|
||||
}
|
||||
|
||||
TreeNode.prototype.insertBefore = function (target) {
|
||||
if (!this._beforeInsert(target)) return
|
||||
|
||||
const pos = target.parent.findChildIndex(target)
|
||||
target.parent.children.splice(pos, 0, this)
|
||||
}
|
||||
|
||||
TreeNode.prototype.insertAfter = function (target) {
|
||||
if (!this._beforeInsert(target)) return
|
||||
|
||||
const pos = target.parent.findChildIndex(target)
|
||||
target.parent.children.splice(pos + 1, 0, this)
|
||||
}
|
||||
|
||||
function Tree (data) {
|
||||
this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
|
||||
this.initNode(this.root, data)
|
||||
return this.root
|
||||
}
|
||||
|
||||
Tree.prototype.initNode = function (node, data) {
|
||||
for (let i = 0, len = data.length; i < len; i++) {
|
||||
var _data = data[i]
|
||||
|
||||
var child = new TreeNode(_data)
|
||||
if (_data.children && _data.children.length > 0) {
|
||||
this.initNode(child, _data.children)
|
||||
moveInto(target) {
|
||||
if (this.name === 'root' || this === target) {
|
||||
return
|
||||
}
|
||||
node.addChildren(child)
|
||||
|
||||
// cannot move ancestor to child
|
||||
if (this.isTargetChild(target)) {
|
||||
return
|
||||
}
|
||||
|
||||
// cannot move to leaf node
|
||||
if (target.isLeaf) {
|
||||
return
|
||||
}
|
||||
|
||||
this.parent._removeChild(this)
|
||||
this.parent = target
|
||||
this.pid = target.id
|
||||
if (!target.children) {
|
||||
target.children = []
|
||||
}
|
||||
target.children.unshift(this)
|
||||
}
|
||||
|
||||
findChildIndex(child) {
|
||||
var index
|
||||
for (let i = 0, len = this.children.length; i < len; i++) {
|
||||
if (this.children[i] === child) {
|
||||
index = i
|
||||
break
|
||||
}
|
||||
}
|
||||
return index
|
||||
}
|
||||
|
||||
_canInsert(target) {
|
||||
if (this.name === 'root' || this === target) {
|
||||
return false
|
||||
}
|
||||
|
||||
// cannot insert ancestor to child
|
||||
if (this.isTargetChild(target)) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.parent._removeChild(this)
|
||||
this.parent = target.parent
|
||||
this.pid = target.parent.id
|
||||
return true
|
||||
}
|
||||
|
||||
insertBefore(target) {
|
||||
if (!this._canInsert(target)) return
|
||||
|
||||
const pos = target.parent.findChildIndex(target)
|
||||
target.parent.children.splice(pos, 0, this)
|
||||
}
|
||||
|
||||
insertAfter(target) {
|
||||
if (!this._canInsert(target)) return
|
||||
|
||||
const pos = target.parent.findChildIndex(target)
|
||||
target.parent.children.splice(pos + 1, 0, this)
|
||||
}
|
||||
|
||||
toString() {
|
||||
return JSON.stringify(traverseTree(this))
|
||||
}
|
||||
}
|
||||
|
||||
exports.Tree = Tree
|
||||
exports.TreeNode = TreeNode
|
||||
export class Tree {
|
||||
constructor(data) {
|
||||
this.root = new TreeNode({name: 'root', isLeaf: false, id: 0})
|
||||
this.initNode(this.root, data)
|
||||
return this.root
|
||||
}
|
||||
|
||||
initNode(node, data) {
|
||||
for (let i = 0, len = data.length; i < len; i++) {
|
||||
var _data = data[i]
|
||||
|
||||
var child = new TreeNode(_data)
|
||||
if (_data.children && _data.children.length > 0) {
|
||||
this.initNode(child, _data.children)
|
||||
}
|
||||
node.addChildren(child)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,422 +1,510 @@
|
||||
<template>
|
||||
<div class='vtl'>
|
||||
<div class="vtl">
|
||||
<div
|
||||
v-if="model.name !== 'root'"
|
||||
:id='model.id'
|
||||
:id="model.id"
|
||||
class="vtl-node"
|
||||
:class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': ! model.isLeaf}"
|
||||
:class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': !model.isLeaf}"
|
||||
>
|
||||
<div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
|
||||
<div
|
||||
class="vtl-border vtl-up"
|
||||
:class="{'vtl-active': isDragEnterUp}"
|
||||
@drop="dropBefore"
|
||||
@dragenter="dragEnterUp"
|
||||
@dragover='dragOverUp'
|
||||
@dragleave="dragLeaveUp" />
|
||||
<div :class="treeNodeClass"
|
||||
@dragover="dragOverUp"
|
||||
@dragleave="dragLeaveUp"
|
||||
/>
|
||||
<div
|
||||
:class="treeNodeClass"
|
||||
:draggable="!model.dragDisabled"
|
||||
@dragstart='dragStart'
|
||||
@dragover='dragOver'
|
||||
@dragenter='dragEnter'
|
||||
@dragleave='dragLeave'
|
||||
@drop='drop'
|
||||
@dragend='dragEnd'
|
||||
@mouseover='mouseOver'
|
||||
@mouseout='mouseOut'
|
||||
@click.stop='click'>
|
||||
<span class="vtl-caret vtl-is-small" v-if="model.children && model.children.length > 0">
|
||||
<i class="vtl-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
|
||||
@dragstart="dragStart"
|
||||
@dragover="dragOver"
|
||||
@dragenter="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@drop="drop"
|
||||
@dragend="dragEnd"
|
||||
@mouseover="mouseOver"
|
||||
@mouseout="mouseOut"
|
||||
@click.stop="click"
|
||||
>
|
||||
<span
|
||||
class="vtl-caret vtl-is-small"
|
||||
v-if="model.children && model.children.length > 0"
|
||||
>
|
||||
<i
|
||||
class="vtl-icon"
|
||||
:class="caretClass"
|
||||
@click.prevent.stop="toggle"
|
||||
></i>
|
||||
</span>
|
||||
|
||||
<span v-if="model.isLeaf">
|
||||
<slot name="leafNodeIcon">
|
||||
<slot
|
||||
name="leafNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span v-else>
|
||||
<slot name="treeNodeIcon" :expanded="expanded">
|
||||
<slot
|
||||
name="treeNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
|
||||
</slot>
|
||||
</span>
|
||||
|
||||
<div class="vtl-node-content" v-if="!editable">
|
||||
{{model.name}}
|
||||
{{ model.name }}
|
||||
</div>
|
||||
<input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
|
||||
<input
|
||||
v-else
|
||||
class="vtl-input"
|
||||
type="text"
|
||||
ref="nodeInput"
|
||||
:value="model.name"
|
||||
@input="updateName"
|
||||
@blur="setUnEditable"
|
||||
/>
|
||||
<div class="vtl-operation" v-show="isHover">
|
||||
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
|
||||
<slot name="addTreeNodeIcon">
|
||||
<span
|
||||
title="add tree node"
|
||||
@click.stop.prevent="addChild(false)"
|
||||
v-if="!model.isLeaf && !model.addTreeNodeDisabled"
|
||||
>
|
||||
<slot
|
||||
name="addTreeNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-icon-folder-plus-e"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
|
||||
<slot name="addLeafNodeIcon">
|
||||
<span
|
||||
title="add leaf node"
|
||||
@click.stop.prevent="addChild(true)"
|
||||
v-if="!model.isLeaf && !model.addLeafNodeDisabled"
|
||||
>
|
||||
<slot
|
||||
name="addLeafNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-icon-plus"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
|
||||
<slot name="editNodeIcon">
|
||||
<span
|
||||
title="edit"
|
||||
@click.stop.prevent="setEditable"
|
||||
v-if="!model.editNodeDisabled"
|
||||
>
|
||||
<slot
|
||||
name="editNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-icon-edit"></i>
|
||||
</slot>
|
||||
</span>
|
||||
<span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
|
||||
<slot name="delNodeIcon">
|
||||
<span
|
||||
title="delete"
|
||||
@click.stop.prevent="delNode"
|
||||
v-if="!model.delNodeDisabled"
|
||||
>
|
||||
<slot
|
||||
name="delNodeIcon"
|
||||
:expanded="expanded"
|
||||
:model="model"
|
||||
:root="rootNode"
|
||||
>
|
||||
<i class="vtl-icon vtl-icon-trash"></i>
|
||||
</slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="model.children && model.children.length > 0 && expanded"
|
||||
<div
|
||||
v-if="model.children && model.children.length > 0 && expanded"
|
||||
class="vtl-border vtl-bottom"
|
||||
:class="{'vtl-active': isDragEnterBottom}"
|
||||
@drop="dropAfter"
|
||||
@dragenter="dragEnterBottom"
|
||||
@dragover='dragOverBottom'
|
||||
@dragleave="dragLeaveBottom"></div>
|
||||
@dragover="dragOverBottom"
|
||||
@dragleave="dragLeaveBottom"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="model.name === 'root' || expanded" v-if="isFolder">
|
||||
<item v-for="model in model.children"
|
||||
<div
|
||||
:class="{'vtl-tree-margin': model.name !== 'root'}"
|
||||
v-show="model.name === 'root' || expanded"
|
||||
v-if="isFolder"
|
||||
>
|
||||
<item
|
||||
v-for="model in model.children"
|
||||
:default-tree-node-name="defaultTreeNodeName"
|
||||
:default-leaf-node-name="defaultLeafNodeName"
|
||||
:default-expanded="defaultExpanded"
|
||||
:model="model"
|
||||
:key='model.id'>
|
||||
<slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
|
||||
<slot name="addLeafNodeIcon" slot="addLeafNodeIcon" />
|
||||
<slot name="editNodeIcon" slot="editNodeIcon" />
|
||||
<slot name="delNodeIcon" slot="delNodeIcon" />
|
||||
<slot name="leafNodeIcon" slot="leafNodeIcon" />
|
||||
<template v-slot:treeNodeIcon="slotProps">
|
||||
<slot name="treeNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
:key="model.id"
|
||||
>
|
||||
<template v-slot:addTreeNodeIcon="slotProps">
|
||||
<slot name="addTreeNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-slot:addLeafNodeIcon="slotProps">
|
||||
<slot name="addLeafNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-slot:editNodeIcon="slotProps">
|
||||
<slot name="editNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-slot:delNodeIcon="slotProps">
|
||||
<slot name="delNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-slot:leafNodeIcon="slotProps">
|
||||
<slot name="leafNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
<template v-slot:treeNodeIcon="slotProps">
|
||||
<slot name="treeNodeIcon" v-bind="slotProps" />
|
||||
</template>
|
||||
</item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TreeNode } from './Tree.js'
|
||||
import { addHandler, removeHandler } from './tools.js'
|
||||
import {TreeNode} from './Tree.js'
|
||||
import {addHandler, removeHandler} from './tools.js'
|
||||
|
||||
let compInOperation = null
|
||||
let compInOperation = null
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
isHover: false,
|
||||
editable: false,
|
||||
isDragEnterUp: false,
|
||||
isDragEnterBottom: false,
|
||||
isDragEnterNode: false,
|
||||
expanded: this.defaultExpanded
|
||||
}
|
||||
},
|
||||
props: {
|
||||
model: {
|
||||
type: Object
|
||||
},
|
||||
defaultLeafNodeName: {
|
||||
type: String,
|
||||
default: 'New leaf node'
|
||||
},
|
||||
defaultTreeNodeName: {
|
||||
type: String,
|
||||
default: 'New tree node'
|
||||
},
|
||||
defaultExpanded: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rootNode() {
|
||||
var node = this.$parent
|
||||
while (node._props.model.name !== 'root') {
|
||||
node = node.$parent
|
||||
}
|
||||
return node
|
||||
},
|
||||
|
||||
caretClass() {
|
||||
return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
|
||||
},
|
||||
|
||||
isFolder() {
|
||||
return this.model.children && this.model.children.length
|
||||
},
|
||||
|
||||
treeNodeClass() {
|
||||
const {
|
||||
model: {dragDisabled, disabled},
|
||||
isDragEnterNode
|
||||
} = this
|
||||
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
isHover: false,
|
||||
editable: false,
|
||||
isDragEnterUp: false,
|
||||
isDragEnterBottom: false,
|
||||
isDragEnterNode: false,
|
||||
expanded: this.defaultExpanded
|
||||
}
|
||||
},
|
||||
props: {
|
||||
model: {
|
||||
type: Object
|
||||
},
|
||||
defaultLeafNodeName: {
|
||||
type: String,
|
||||
default: 'New leaf node'
|
||||
},
|
||||
defaultTreeNodeName: {
|
||||
type: String,
|
||||
default: 'New tree node'
|
||||
},
|
||||
defaultExpanded: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
caretClass () {
|
||||
return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
|
||||
},
|
||||
|
||||
isFolder () {
|
||||
return this.model.children &&
|
||||
this.model.children.length
|
||||
},
|
||||
|
||||
treeNodeClass () {
|
||||
const {
|
||||
model: {
|
||||
dragDisabled,
|
||||
disabled
|
||||
},
|
||||
isDragEnterNode
|
||||
} = this
|
||||
|
||||
return {
|
||||
'vtl-node-main': true,
|
||||
'vtl-active': isDragEnterNode,
|
||||
'vtl-drag-disabled': dragDisabled,
|
||||
'vtl-disabled': disabled
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate () {
|
||||
this.$options.components.item = require('./VueTreeList').default
|
||||
},
|
||||
mounted () {
|
||||
const vm = this
|
||||
addHandler(window, 'keyup', function (e) {
|
||||
// click enter
|
||||
if (e.keyCode === 13 && vm.editable) {
|
||||
vm.editable = false
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
removeHandler(window, 'keyup')
|
||||
},
|
||||
methods: {
|
||||
updateName (e) {
|
||||
var oldName = this.model.name;
|
||||
this.model.changeName(e.target.value)
|
||||
var node = this.getRootNode();
|
||||
node.$emit('change-name', {'id': this.model.id, 'oldName': oldName, 'newName': e.target.value})
|
||||
},
|
||||
|
||||
delNode () {
|
||||
var node = this.getRootNode()
|
||||
node.$emit('delete-node', this.model)
|
||||
},
|
||||
|
||||
setEditable () {
|
||||
this.editable = true
|
||||
this.$nextTick(() => {
|
||||
const $input = this.$refs.nodeInput
|
||||
$input.focus()
|
||||
$input.setSelectionRange(0, $input.value.length)
|
||||
})
|
||||
},
|
||||
|
||||
setUnEditable () {
|
||||
this.editable = false
|
||||
},
|
||||
|
||||
toggle() {
|
||||
if (this.isFolder) {
|
||||
this.expanded = !this.expanded
|
||||
}
|
||||
},
|
||||
|
||||
mouseOver() {
|
||||
if (this.model.disabled) return
|
||||
this.isHover = true
|
||||
},
|
||||
|
||||
mouseOut() {
|
||||
this.isHover = false
|
||||
},
|
||||
|
||||
click() {
|
||||
var node = this.getRootNode()
|
||||
node.$emit('click', this.model);
|
||||
},
|
||||
|
||||
addChild(isLeaf) {
|
||||
const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
|
||||
this.expanded = true
|
||||
var node = new TreeNode({ name, isLeaf })
|
||||
this.model.addChildren(node, true)
|
||||
var root = this.getRootNode();
|
||||
root.$emit('add-node', node)
|
||||
},
|
||||
|
||||
dragStart(e) {
|
||||
if (!(this.model.dragDisabled || this.model.disabled)) {
|
||||
compInOperation = this
|
||||
// for firefox
|
||||
e.dataTransfer.setData("data","data");
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
dragEnd() {
|
||||
compInOperation = null
|
||||
},
|
||||
dragOver(e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragEnter() {
|
||||
if (!compInOperation) return
|
||||
if (this.model.isLeaf) return
|
||||
this.isDragEnterNode = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.isDragEnterNode = false
|
||||
},
|
||||
drop() {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent;
|
||||
compInOperation.model.moveInto(this.model)
|
||||
this.isDragEnterNode = false
|
||||
var node = this.getRootNode();
|
||||
node.$emit('drop', {target: this.model, node: compInOperation.model, src: oldParent})
|
||||
},
|
||||
|
||||
dragEnterUp () {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterUp = true
|
||||
},
|
||||
dragOverUp (e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragLeaveUp () {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterUp = false
|
||||
},
|
||||
dropBefore () {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent;
|
||||
compInOperation.model.insertBefore(this.model)
|
||||
this.isDragEnterUp = false
|
||||
var node = this.getRootNode();
|
||||
node.$emit('drop-before', {target: this.model, node: compInOperation.model, src: oldParent})
|
||||
},
|
||||
|
||||
dragEnterBottom () {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterBottom = true
|
||||
},
|
||||
dragOverBottom (e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragLeaveBottom () {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterBottom = false
|
||||
},
|
||||
dropAfter () {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent;
|
||||
compInOperation.model.insertAfter(this.model)
|
||||
this.isDragEnterBottom = false
|
||||
var node = this.getRootNode();
|
||||
node.$emit('drop-after', {target: this.model, node: compInOperation.model, src: oldParent})
|
||||
},
|
||||
getRootNode() {
|
||||
var node = this.$parent
|
||||
while (node._props.model.name !== 'root') {
|
||||
node = node.$parent
|
||||
}
|
||||
return node;
|
||||
'vtl-node-main': true,
|
||||
'vtl-active': isDragEnterNode,
|
||||
'vtl-drag-disabled': dragDisabled,
|
||||
'vtl-disabled': disabled
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
this.$options.components.item = require('./VueTreeList').default
|
||||
},
|
||||
mounted() {
|
||||
const vm = this
|
||||
addHandler(window, 'keyup', function(e) {
|
||||
// click enter
|
||||
if (e.keyCode === 13 && vm.editable) {
|
||||
vm.editable = false
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
removeHandler(window, 'keyup')
|
||||
},
|
||||
methods: {
|
||||
updateName(e) {
|
||||
var oldName = this.model.name
|
||||
this.model.changeName(e.target.value)
|
||||
this.rootNode.$emit('change-name', {
|
||||
id: this.model.id,
|
||||
oldName: oldName,
|
||||
newName: e.target.value
|
||||
})
|
||||
},
|
||||
|
||||
delNode() {
|
||||
this.rootNode.$emit('delete-node', this.model)
|
||||
},
|
||||
|
||||
setEditable() {
|
||||
this.editable = true
|
||||
this.$nextTick(() => {
|
||||
const $input = this.$refs.nodeInput
|
||||
$input.focus()
|
||||
$input.setSelectionRange(0, $input.value.length)
|
||||
})
|
||||
},
|
||||
|
||||
setUnEditable() {
|
||||
this.editable = false
|
||||
},
|
||||
|
||||
toggle() {
|
||||
if (this.isFolder) {
|
||||
this.expanded = !this.expanded
|
||||
}
|
||||
},
|
||||
|
||||
mouseOver() {
|
||||
if (this.model.disabled) return
|
||||
this.isHover = true
|
||||
},
|
||||
|
||||
mouseOut() {
|
||||
this.isHover = false
|
||||
},
|
||||
|
||||
click() {
|
||||
this.rootNode.$emit('click', this.model)
|
||||
},
|
||||
|
||||
addChild(isLeaf) {
|
||||
const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
|
||||
this.expanded = true
|
||||
var node = new TreeNode({name, isLeaf})
|
||||
this.model.addChildren(node, true)
|
||||
this.rootNode.$emit('add-node', node)
|
||||
},
|
||||
|
||||
dragStart(e) {
|
||||
if (!(this.model.dragDisabled || this.model.disabled)) {
|
||||
compInOperation = this
|
||||
// for firefox
|
||||
e.dataTransfer.setData('data', 'data')
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
dragEnd() {
|
||||
compInOperation = null
|
||||
},
|
||||
dragOver(e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragEnter() {
|
||||
if (!compInOperation) return
|
||||
if (this.model.isLeaf) return
|
||||
this.isDragEnterNode = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.isDragEnterNode = false
|
||||
},
|
||||
drop() {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent
|
||||
compInOperation.model.moveInto(this.model)
|
||||
this.isDragEnterNode = false
|
||||
this.rootNode.$emit('drop', {
|
||||
target: this.model,
|
||||
node: compInOperation.model,
|
||||
src: oldParent
|
||||
})
|
||||
},
|
||||
|
||||
dragEnterUp() {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterUp = true
|
||||
},
|
||||
dragOverUp(e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragLeaveUp() {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterUp = false
|
||||
},
|
||||
dropBefore() {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent
|
||||
compInOperation.model.insertBefore(this.model)
|
||||
this.isDragEnterUp = false
|
||||
this.rootNode.$emit('drop-before', {
|
||||
target: this.model,
|
||||
node: compInOperation.model,
|
||||
src: oldParent
|
||||
})
|
||||
},
|
||||
|
||||
dragEnterBottom() {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterBottom = true
|
||||
},
|
||||
dragOverBottom(e) {
|
||||
e.preventDefault()
|
||||
return true
|
||||
},
|
||||
dragLeaveBottom() {
|
||||
if (!compInOperation) return
|
||||
this.isDragEnterBottom = false
|
||||
},
|
||||
dropAfter() {
|
||||
if (!compInOperation) return
|
||||
const oldParent = compInOperation.model.parent
|
||||
compInOperation.model.insertAfter(this.model)
|
||||
this.isDragEnterBottom = false
|
||||
this.rootNode.$emit('drop-after', {
|
||||
target: this.model,
|
||||
node: compInOperation.model,
|
||||
src: oldParent
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" rel="stylesheet/less">
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?ui1hbx');
|
||||
src: url('fonts/icomoon.eot?ui1hbx#iefix') format('embedded-opentype'),
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?ui1hbx');
|
||||
src: url('fonts/icomoon.eot?ui1hbx#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?ui1hbx') format('truetype'),
|
||||
url('fonts/icomoon.woff?ui1hbx') format('woff'),
|
||||
url('fonts/icomoon.svg?ui1hbx#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.vtl-icon {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
.vtl-icon {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
&.vtl-menu-icon {
|
||||
margin-right: 4px;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
&.vtl-menu-icon {
|
||||
margin-right: 4px;
|
||||
&:hover {
|
||||
color: blue;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.vtl-icon-file:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.vtl-icon-folder:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.vtl-icon-caret-down:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.vtl-icon-caret-right:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.vtl-icon-edit:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.vtl-icon-folder-plus-e:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.vtl-icon-plus:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.vtl-icon-trash:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.vtl-icon-file:before {
|
||||
content: '\e906';
|
||||
}
|
||||
.vtl-icon-folder:before {
|
||||
content: '\e907';
|
||||
}
|
||||
.vtl-icon-caret-down:before {
|
||||
content: '\e901';
|
||||
}
|
||||
.vtl-icon-caret-right:before {
|
||||
content: '\e900';
|
||||
}
|
||||
.vtl-icon-edit:before {
|
||||
content: '\e902';
|
||||
}
|
||||
.vtl-icon-folder-plus-e:before {
|
||||
content: '\e903';
|
||||
}
|
||||
.vtl-icon-plus:before {
|
||||
content: '\e904';
|
||||
}
|
||||
.vtl-icon-trash:before {
|
||||
content: '\e905';
|
||||
}
|
||||
|
||||
|
||||
.vtl-border {
|
||||
height: 5px;
|
||||
&.vtl-up {
|
||||
margin-top: -5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
&.vtl-bottom {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.vtl-active {
|
||||
border-bottom: 3px dashed blue;
|
||||
/*background-color: blue;*/
|
||||
}
|
||||
.vtl-border {
|
||||
height: 5px;
|
||||
&.vtl-up {
|
||||
margin-top: -5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.vtl-node-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0 5px 1rem;
|
||||
.vtl-input {
|
||||
border: none;
|
||||
max-width: 150px;
|
||||
border-bottom: 1px solid blue;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
&.vtl-active {
|
||||
outline: 2px dashed pink;
|
||||
}
|
||||
.vtl-caret {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.vtl-operation {
|
||||
margin-left: 2rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
&.vtl-bottom {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.vtl-item {
|
||||
cursor: pointer;
|
||||
&.vtl-active {
|
||||
border-bottom: 3px dashed blue;
|
||||
/*background-color: blue;*/
|
||||
}
|
||||
.vtl-tree-margin {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.vtl-node-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0 5px 1rem;
|
||||
.vtl-input {
|
||||
border: none;
|
||||
max-width: 150px;
|
||||
border-bottom: 1px solid blue;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
&.vtl-active {
|
||||
outline: 2px dashed pink;
|
||||
}
|
||||
.vtl-caret {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.vtl-operation {
|
||||
margin-left: 2rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.vtl-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.vtl-tree-margin {
|
||||
margin-left: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
26
src/tools.js
26
src/tools.js
@@ -4,7 +4,7 @@
|
||||
|
||||
var handlerCache
|
||||
|
||||
exports.addHandler = function (element, type, handler) {
|
||||
export const addHandler = function (element, type, handler) {
|
||||
handlerCache = handler
|
||||
if (element.addEventListener) {
|
||||
element.addEventListener(type, handler, false)
|
||||
@@ -15,7 +15,7 @@ exports.addHandler = function (element, type, handler) {
|
||||
}
|
||||
}
|
||||
|
||||
exports.removeHandler = function (element, type) {
|
||||
export const removeHandler = function (element, type) {
|
||||
if (element.removeEventListener) {
|
||||
element.removeEventListener(type, handlerCache, false)
|
||||
} else if (element.detachEvent) {
|
||||
@@ -25,7 +25,21 @@ exports.removeHandler = function (element, type) {
|
||||
}
|
||||
}
|
||||
|
||||
// exports.fireFocusEvent = function (ele) {
|
||||
// var event = new FocusEvent()
|
||||
// ele.dispatch(event)
|
||||
// }
|
||||
// depth first search
|
||||
export const traverseTree = (root) => {
|
||||
var newRoot = {}
|
||||
|
||||
for (var k in root) {
|
||||
if (k !== 'children' && k !== 'parent') {
|
||||
newRoot[k] = root[k]
|
||||
}
|
||||
}
|
||||
|
||||
if (root.children && root.children.length > 0) {
|
||||
newRoot.children = []
|
||||
for (var i = 0, len = root.children.length; i < len; i++) {
|
||||
newRoot.children.push(traverseTree(root.children[i]))
|
||||
}
|
||||
}
|
||||
return newRoot
|
||||
}
|
||||
|
||||
53
tests/unit/__snapshots__/slot.spec.js.snap
Normal file
53
tests/unit/__snapshots__/slot.spec.js.snap
Normal file
@@ -0,0 +1,53 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Slot render slot correctly 1`] = `
|
||||
<div class="vtl">
|
||||
<!---->
|
||||
<div class="">
|
||||
<div class="vtl">
|
||||
<div id="t1" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-down"></i></span> <span><span class="tree-node-icon icon">❀</span></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span></span></span></div>
|
||||
</div>
|
||||
<div class="vtl-border vtl-bottom"></div>
|
||||
</div>
|
||||
<div class="vtl-tree-margin">
|
||||
<div class="vtl">
|
||||
<div id="t11" class="vtl-node vtl-leaf-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><span class="icon">🍃</span></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 1-1
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;">
|
||||
<!---->
|
||||
<!----> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vtl">
|
||||
<div id="t2" class="vtl-node vtl-tree-node">
|
||||
<div class="vtl-border vtl-up"></div>
|
||||
<div draggable="true" class="vtl-node-main">
|
||||
<!----> <span><span class="tree-node-icon icon">❀</span></span>
|
||||
<div class="vtl-node-content">
|
||||
Node 2
|
||||
</div>
|
||||
<div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
79
tests/unit/slot.spec.js
Normal file
79
tests/unit/slot.spec.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import Vue from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {Tree, VueTreeList} from '@/index'
|
||||
|
||||
describe('Slot', () => {
|
||||
let wrapper
|
||||
|
||||
beforeEach(() => {
|
||||
const tree = new Tree([
|
||||
{
|
||||
name: 'Node 1',
|
||||
id: 't1',
|
||||
pid: 0,
|
||||
children: [
|
||||
{
|
||||
name: 'Node 1-1',
|
||||
id: 't11',
|
||||
isLeaf: true,
|
||||
pid: 't1'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Node 2',
|
||||
id: 't2',
|
||||
pid: 0
|
||||
}
|
||||
])
|
||||
wrapper = mount(VueTreeList, {
|
||||
propsData: {model: new Tree([])},
|
||||
scopedSlots: {
|
||||
addTreeNodeIcon() {
|
||||
return <span class="add-tree-node-icon">📂</span>
|
||||
},
|
||||
addLeafNodeIcon() {
|
||||
return <span class="icon">＋</span>
|
||||
},
|
||||
editNodeIcon() {
|
||||
return <span class="icon">📃</span>
|
||||
},
|
||||
delNodeIcon(slotProps) {
|
||||
return (slotProps.model.isLeaf || !slotProps.model.children) ? <span class="del-node-icon">✂️</span> : <span />
|
||||
},
|
||||
leafNodeIcon() {
|
||||
return <span class="icon">🍃</span>
|
||||
},
|
||||
treeNodeIcon(slotProps) {
|
||||
return <span class="tree-node-icon icon">{ slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded ? '🌲' : '❀' }</span>
|
||||
}
|
||||
}
|
||||
})
|
||||
wrapper.setProps({model: tree})
|
||||
})
|
||||
|
||||
it('render slot correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('toggle tree node show different icon', done => {
|
||||
const $caretDown = wrapper.find('.vtl-icon-caret-down')
|
||||
expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('❀')
|
||||
$caretDown.trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.exists('.vtl-icon-caret-right')).toBe(true)
|
||||
expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('🌲')
|
||||
done()
|
||||
})
|
||||
})
|
||||
|
||||
it('dont show ✂️ after add child ', done => {
|
||||
const $addTreeNodeIcon = wrapper.find('#t2 .add-tree-node-icon')
|
||||
expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(true)
|
||||
$addTreeNodeIcon.trigger('click')
|
||||
Vue.nextTick(() => {
|
||||
expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(false)
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user