Compare commits

...

35 Commits
1.1.0 ... 1.3.2

Author SHA1 Message Date
youxingzhi
cf41282fcf feat(event): add drop-before and drop-after 2019-07-17 09:54:15 +08:00
ayou
6154cfd1ad Merge pull request #37 from zymawy/patch-1
Duplicate Declaration On onClick Method
2019-06-16 10:47:35 +08:00
Hamza Ironside
51167862c9 Duplicate Declaration On onClick Method
There Were Two Methods With The Same Name
2019-06-15 05:56:21 +03:00
ayou
e38102ed71 Merge pull request #27 from iakta/feature/drop-events
Feature/drop events
2019-03-15 22:49:45 +08:00
Salvatore Giordano
d605642199 feat(events): add docs for drop and drop-up 2019-03-13 09:48:20 +01:00
Salvatore Giordano
62335d9eac feat(events): rename event using dashes 2019-03-13 09:45:25 +01:00
Salvatore Giordano
625dadcb44 feat(events): add dropBottom event 2019-03-13 09:30:13 +01:00
youxingzhi
87b8a30bfb fix(demo): change param name 2019-03-13 12:09:53 +08:00
youxingzhi
2164d032ca feat: #23 2019-03-13 12:05:34 +08:00
Salvatore Giordano
538678d916 fix(events): fix oldParent object in drop events 2019-03-12 16:29:49 +01:00
Salvatore Giordano
dd3d61ddf7 feat(events): update version 2019-03-12 16:21:58 +01:00
Salvatore Giordano
e7757b97a7 feat(events): add oldParent information in drop event 2019-03-12 16:15:18 +01:00
Salvatore Giordano
76e67c583c feat(events): emit drop and dropup events 2019-03-12 15:20:52 +01:00
youxingzhi
106708217f chore(readme): fix format 2019-02-23 11:58:16 +08:00
youxingzhi
165d2dfb5d chore(version): 1.3.0 2019-02-23 11:54:26 +08:00
youxingzhi
8f0a5d7737 feat: support closing operation icons 2019-02-23 11:52:58 +08:00
youxingzhi
a3b03a9579 chore(version): 1.2.0 2019-02-23 10:46:47 +08:00
youxingzhi
136b33971c feat: support customizing operation icons 2019-02-23 10:44:34 +08:00
youxingzhi
3dd6e31028 chore(version): 1.1.2 2019-02-15 09:43:24 +08:00
youxingzhi
cde7836539 refactor: change event name 2019-02-15 09:41:53 +08:00
ayou
a8284583da Merge pull request #20 from energiehund/feature/events-for-node-operations
feat: Emit events for node operations
2019-02-15 09:23:25 +08:00
energiehund
8cb42cd952 feat: Emit events for node operations 2019-02-13 17:14:53 +08:00
youxingzhi
5ab8775ace chore: 1.1.1 2019-01-03 09:56:25 +08:00
youxingzhi
3fec41a890 fix: add semi 2019-01-03 09:55:27 +08:00
youxingzhi
867ef2a7fa chore(add husky): add standard and commitlint 2018-12-11 11:16:29 +08:00
youxingzhi
2b2b1419ad chore: update demo
update demo because of new style
2018-12-11 11:14:49 +08:00
ayou
47a4e2df8d Merge pull request #16 from ParadeTo/fix-issue#14
fix issue #14, make delete node configurable
2018-12-11 10:29:18 +08:00
ayou
ec49d0e226 Merge branch 'master' into fix-issue#14 2018-12-11 10:29:07 +08:00
ayou
52a63af52f Merge pull request #15 from ParadeTo/fix-issue#11
Fix issue#11
2018-12-11 10:23:41 +08:00
ayou
b10803df64 Merge pull request #17 from ParadeTo/fix-issue#13
fix issue #13
2018-12-08 22:20:50 +08:00
Zhiyuan Guo
7d35504b40 rm logs 2018-12-08 15:13:08 +08:00
Zhiyuan Guo
b2eba3e3c9 update readme 2018-12-08 15:11:11 +08:00
Zhiyuan Guo
d6826e1a24 fix issue #14, make delete node configurable 2018-12-08 15:08:43 +08:00
Zhiyuan Guo
a815fc658b fix issue #11 2018-12-08 14:43:35 +08:00
Zhiyuan Guo
572b045314 fix issue #13 2018-12-08 11:53:36 +08:00
16 changed files with 361 additions and 169 deletions

2
.commitlintrc.yml Normal file
View File

@@ -0,0 +1,2 @@
extends:
- "@commitlint/config-conventional"

3
.czrc Normal file
View File

@@ -0,0 +1,3 @@
{
"path": "cz-conventional-changelog"
}

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@ node_modules
npm-debug.log npm-debug.log
.idea .idea
coverage coverage
package-lock.json

4
.huskyrc.yml Normal file
View File

@@ -0,0 +1,4 @@
hooks:
pre-commit:
- npm run standard
commit-msg: commitlint -E HUSKY_GIT_PARAMS

View File

@@ -1,5 +1,4 @@
var webpack = require('webpack'); var path = require('path')
var path = require('path');
var projectRoot = path.resolve(__dirname, '../') var projectRoot = path.resolve(__dirname, '../')

View File

@@ -2,9 +2,6 @@ var webpack = require('webpack')
var merge = require('webpack-merge') var merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin')
var baseConfig = require('./webpack.base.conf') var baseConfig = require('./webpack.base.conf')
var path = require('path')
var projectRoot = path.resolve(__dirname, '../')
module.exports = merge(baseConfig, { module.exports = merge(baseConfig, {
entry: './dev/index.js', entry: './dev/index.js',

View File

@@ -1,7 +1,23 @@
<template> <template>
<div> <div>
<button @click="addNode">Add Node</button> <button @click="addNode">Add Node</button>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list> <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="addTreeNode">addTreeNode</span>
<span class="icon" slot="addLeafNode">addLeafNode</span>
<span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
</vue-tree-list>
<button @click="getNewTree">Get new tree</button> <button @click="getNewTree">Get new tree</button>
<pre> <pre>
{{newTree}} {{newTree}}
@@ -23,6 +39,10 @@
id: 1, id: 1,
pid: 0, pid: 0,
dragDisabled: true, dragDisabled: true,
addTreeNodeDisabled: true,
addLeafNodeDisabled: true,
editNodeDisabled: true,
delNodeDisabled: true,
children: [ children: [
{ {
name: 'Node 1-2', name: 'Node 1-2',
@@ -47,13 +67,42 @@
} }
}, },
methods: { methods: {
addNode: function () { onDel (node) {
console.log(node)
node.remove()
},
onChangeName (params) {
console.log(params)
},
onAddNode (params) {
console.log(params)
},
onClick (params) {
console.log(params)
},
drop: function ({node, src, target}) {
console.log('drop', node, src, target)
},
dropBefore: function ({node, src, target}) {
console.log('drop-before', node, src, target)
},
dropAfter: function ({node, src, target}) {
console.log('drop-after', node, src, target)
},
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: function () { getNewTree () {
var vm = this var vm = this
function _dfs (oldNode) { function _dfs (oldNode) {
var newNode = {} var newNode = {}
@@ -95,3 +144,11 @@
} }
} }
</style> </style>
<style lang="less" rel="stylesheet/less" scoped>
.icon {
&:hover {
cursor: pointer;
}
}
</style>

View File

@@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="with=device-width,initial-scale=1.0, <meta name="viewport" content="with=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no"> maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
<title>vue-date-range</title> <title>vue-tree-list</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

File diff suppressed because one or more lines are too long

View File

@@ -59,6 +59,27 @@
} }
} }
.vtl .vtl-drag-disabled, .vtl .vtl-drag-disabled:hover {
background-color: #dbd7d7;
position: relative;
}
.vtl .vtl-drag-disabled::after, .vtl .vtl-disabled::after {
content: 'drag disabled';
position: absolute;
right: 10px;
font-size: 12px;
font-style: italic;
}
.vtl .vtl-disabled, .vtl .vtl-disabled:hover {
background-color: red;
position: relative;
}
.vtl .vtl-disabled::after {
content: 'disabled';
}
</style> </style>
</head> </head>
<body> <body>
@@ -141,7 +162,7 @@
name: 'Node 2', name: 'Node 2',
id: 3, id: 3,
pid: 0, pid: 0,
dragDisabled: true disabled: true
}, },
{ {
name: 'Node 3', name: 'Node 3',

View File

@@ -1,9 +1,11 @@
{ {
"name": "vue-tree-list", "name": "vue-tree-list",
"version": "1.1.0", "version": "1.3.2",
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.", "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
"main": "dist/vue-tree-list.min.js", "main": "dist/vue-tree-list.min.js",
"scripts": { "scripts": {
"commit": "npx git-cz",
"standard": "standard",
"test": "karma start --single-run", "test": "karma start --single-run",
"unit": "karma start --watch", "unit": "karma start --watch",
"coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls", "coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
@@ -26,6 +28,8 @@
}, },
"homepage": "https://github.com/ParadeTo/vue-tree-list#readme", "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^7.1.2",
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
"babel-core": "^6.0.0", "babel-core": "^6.0.0",
"babel-eslint": "^7.0.0", "babel-eslint": "^7.0.0",
@@ -39,6 +43,8 @@
"cross-env": "^5.0.1", "cross-env": "^5.0.1",
"css-loader": "^0.26.2", "css-loader": "^0.26.2",
"file-loader": "^0.10.1", "file-loader": "^0.10.1",
"html-webpack-plugin": "^2.8.1",
"husky": "^1.2.0",
"isparta": "^4.0.0", "isparta": "^4.0.0",
"isparta-loader": "^2.0.0", "isparta-loader": "^2.0.0",
"less": "^2.7.2", "less": "^2.7.2",
@@ -46,14 +52,17 @@
"sinon": "^2.3.5", "sinon": "^2.3.5",
"sinon-chai": "^2.11.0", "sinon-chai": "^2.11.0",
"sourcemap": "^0.1.0", "sourcemap": "^0.1.0",
"standard": "^12.0.1",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"vue": "^2.3.4", "vue": "^2.6.6",
"vue-loader": "^11.1.3", "vue-loader": "^11.1.3",
"vue-style-loader": "^2.0.3", "vue-style-loader": "^2.0.3",
"vue-template-compiler": "^2.2.0", "vue-template-compiler": "^2.6.6",
"webpack": "^1.13.2", "webpack": "^1.13.2",
"webpack-dev-server": "1.14.0", "webpack-dev-server": "1.14.0",
"webpack-merge": "^0.14.1", "webpack-merge": "^0.14.1"
"html-webpack-plugin": "^2.8.1" },
"dependencies": {
"cz-conventional-changelog": "^2.1.0"
} }
} }

272
readme.md
View File

@@ -9,117 +9,195 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
``npm install vue-tree-list`` ``npm install vue-tree-list``
```javascript ```javascript
<button @click="addNode">Add Node</button> <template>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list> <div>
<button @click="getNewTree">Get new tree</button> <button @click="addNode">Add Node</button>
<pre> <vue-tree-list
{{newTree}} @click="onClick"
</pre> @change-name="onChangeName"
... @delete-node="onDel"
import { VueTreeList, Tree, TreeNode } from '../src' @add-node="onAddNode"
export default { :model="data"
components: { default-tree-node-name="new node"
VueTreeList default-leaf-node-name="new leaf"
}, v-bind:default-expanded="false">
data () { <span class="icon" slot="addTreeNode">addTreeNode</span>
return { <span class="icon" slot="addLeafNode">addLeafNode</span>
newTree: {}, <span class="icon" slot="editNode">editNode</span>
data: new Tree([ <span class="icon" slot="delNode">delNode</span>
{ </vue-tree-list>
name: 'Node 1', <button @click="getNewTree">Get new tree</button>
id: 1, <pre>
pid: 0, {{newTree}}
dragDisabled: true, </pre>
children: [ </div>
{ </template>
name: 'Node 1-2', <script>
id: 2, import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
isLeaf: true, export default {
pid: 1 components: {
} VueTreeList
]
},
{
name: 'Node 2',
id: 3,
pid: 0,
dragDisabled: true
},
{
name: 'Node 3',
id: 4,
pid: 0
}
])
}
},
methods: {
addNode: function () {
var node = new TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
}, },
data () {
getNewTree: function () { return {
var vm = this newTree: {},
function _dfs (oldNode) { data: new Tree([
var newNode = {} {
name: 'Node 1',
for (var k in oldNode) { id: 1,
if (k !== 'children' && k !== 'parent') { pid: 0,
newNode[k] = oldNode[k] 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
} }
} ])
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)
}, },
methods: {
onDel (node) {
console.log(node)
node.remove()
},
onChangeName (params) {
console.log(params)
},
onAddNode (params) {
console.log(params)
},
onClick (params) {
console.log(params)
},
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]
}
}
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)
},
onClick(model) {
console.log(model)
} }
} }
} </script>
<style lang="less" rel="stylesheet/less">
.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;
}
}
</style>
``` ```
# props # props
**default-tree-node-name** ## 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
Default name for new treenode.
**default-leaf-node-name** ## props of TreeNode
### attributes
| name | type | default | description |
|:-----:|:-------:|:------------:|:----:|
id | string, number | current timestamp | The node's id
isLeaf | boolean | false | The node is leaf or not
dragDisabled | boolean | false | Forbid dragging tree node
addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not
addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not
editNodeDisabled | boolean | false | Show `editNode` button or not
delNodeDisabled | boolean | false | Show `delNode` button or not
children | array | null | The children of node
Default name for new leafnode. ### methods
| name | params | description |
|:-----:|:-------:|:----:|
changeName | name | Change node's name
addChildren | children: object, array | Add children to node
remove | - | Remove node from the tree
moveInto | target: TreeNode | Move node into another node
insertBefore | target: TreeNode | Move node before another node
insertAfter | target: TreeNode | Move node after another node
# events # events
**click** | name | params | description |
|:-----:|:-------:|:----:|
click | TreeNode | Trigger when clicking a tree node
change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
add-node | TreeNode | Trigger after adding a new 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
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
```javascript # customize operation icons
<vue-tree-list @click="onClick" ... The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
...
onClick(model) { ```html
console.log(model) <span class="icon" slot="addTreeNode">addTreeNode</span>
} <span class="icon" slot="addLeafNode">addLeafNode</span>
... <span class="icon" slot="editNode">editNode</span>
<span class="icon" slot="delNode">delNode</span>
``` ```
# Forbid dragging
Use `dragDisabled` to forbid dragging:
```javascript
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
...
```

View File

@@ -1,5 +1,3 @@
let nodeId = 1
/** /**
* Tree data struct * Tree data struct
* Created by ayou on 2017/7/20. * Created by ayou on 2017/7/20.
@@ -12,10 +10,8 @@ let nodeId = 1
*/ */
const TreeNode = function (data) { const TreeNode = function (data) {
const { id, isLeaf } = data const { id, isLeaf } = data
// this.name = name this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
this.parent = null this.parent = null
// this.pid = null
this.children = null this.children = null
this.isLeaf = !!isLeaf this.isLeaf = !!isLeaf
@@ -31,7 +27,7 @@ TreeNode.prototype.changeName = function (name) {
this.name = name this.name = name
} }
TreeNode.prototype.addChildren = function (children, isNew) { TreeNode.prototype.addChildren = function (children) {
if (!this.children) { if (!this.children) {
this.children = [] this.children = []
} }

View File

@@ -2,7 +2,7 @@
<div class='vtl'> <div class='vtl'>
<div v-if="model.name !== 'root'"> <div v-if="model.name !== 'root'">
<div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}" <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
@drop="dropUp" @drop="dropBefore"
@dragenter="dragEnterUp" @dragenter="dragEnterUp"
@dragover='dragOverUp' @dragover='dragOverUp'
@dragleave="dragLeaveUp"></div> @dragleave="dragLeaveUp"></div>
@@ -37,23 +37,23 @@
</div> </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"> <div class="vtl-operation" v-show="isHover">
<span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf"> <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
<slot name="addTreeNode"> <slot name="addTreeNode">
<i class="vtl-icon vtl-icon-folder-plus-e"></i> <i class="vtl-icon vtl-icon-folder-plus-e"></i>
</slot> </slot>
</span> </span>
<span title="add tree node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf"> <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
<slot name="addLeafNode"> <slot name="addLeafNode">
<i class="vtl-icon vtl-icon-plus"></i> <i class="vtl-icon vtl-icon-plus"></i>
</slot> </slot>
</span> </span>
<span title="edit" @click.stop.prevent="setEditable"> <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
<slot name="edit"> <slot name="editNode">
<i class="vtl-icon vtl-icon-edit"></i> <i class="vtl-icon vtl-icon-edit"></i>
</slot> </slot>
</span> </span>
<span title="delete" @click.stop.prevent="delNode"> <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
<slot name="edit"> <slot name="delNode">
<i class="vtl-icon vtl-icon-trash"></i> <i class="vtl-icon vtl-icon-trash"></i>
</slot> </slot>
</span> </span>
@@ -63,18 +63,23 @@
<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-border vtl-bottom"
:class="{'vtl-active': isDragEnterBottom}" :class="{'vtl-active': isDragEnterBottom}"
@drop="dropBottom" @drop="dropAfter"
@dragenter="dragEnterBottom" @dragenter="dragEnterBottom"
@dragover='dragOverBottom' @dragover='dragOverBottom'
@dragleave="dragLeaveBottom"></div> @dragleave="dragLeaveBottom"></div>
</div> </div>
<div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder"> <div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="model.name === 'root' || expanded" v-if="isFolder">
<item v-for="model in model.children" <item v-for="model in model.children"
:default-tree-node-name="defaultTreeNodeName" :default-tree-node-name="defaultTreeNodeName"
:default-leaf-node-name="defaultLeafNodeName" :default-leaf-node-name="defaultLeafNodeName"
v-bind:default-expanded="defaultExpanded"
:model="model" :model="model"
:key='model.id'> :key='model.id'>
<slot name="addTreeNode" slot="addTreeNode" />
<slot name="addLeafNode" slot="addLeafNode" />
<slot name="editNode" slot="editNode" />
<slot name="delNode" slot="delNode" />
</item> </item>
</div> </div>
</div> </div>
@@ -84,7 +89,7 @@
import { Tree, TreeNode } from './Tree.js' import { Tree, TreeNode } from './Tree.js'
import { addHandler, removeHandler } from './tools.js' import { addHandler, removeHandler } from './tools.js'
let fromComp = null let compInOperation = null
export default { export default {
data: function () { data: function () {
@@ -94,7 +99,7 @@
isDragEnterUp: false, isDragEnterUp: false,
isDragEnterBottom: false, isDragEnterBottom: false,
isDragEnterNode: false, isDragEnterNode: false,
expanded: true expanded: this.defaultExpanded
} }
}, },
props: { props: {
@@ -108,6 +113,10 @@
defaultTreeNodeName: { defaultTreeNodeName: {
type: String, type: String,
default: 'New tree node' default: 'New tree node'
},
defaultExpanded: {
type: Boolean,
default: true
} }
}, },
computed: { computed: {
@@ -155,21 +164,23 @@
}, },
methods: { methods: {
updateName (e) { updateName (e) {
var oldName = this.model.name;
this.model.changeName(e.target.value) 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 () { delNode () {
const vm = this var node = this.getRootNode()
if (window.confirm('Are you sure?')) { node.$emit('delete-node', this.model)
vm.model.remove()
}
}, },
setEditable () { setEditable () {
this.editable = true this.editable = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.nodeInput.focus() const $input = this.$refs.nodeInput
// fireFocusEvent(this.$refs.nodeInput) $input.focus()
$input.setSelectionRange(0, $input.value.length)
}) })
}, },
@@ -193,12 +204,8 @@
}, },
click() { click() {
var node = this.$parent var node = this.getRootNode()
var clickModel = this.model node.$emit('click', this.model);
while (node._props.model.name !== 'root') {
node = node.$parent
}
node.$emit('click', clickModel)
}, },
addChild(isLeaf) { addChild(isLeaf) {
@@ -206,11 +213,13 @@
this.expanded = true this.expanded = true
var node = new TreeNode({ name, isLeaf }) var node = new TreeNode({ name, isLeaf })
this.model.addChildren(node, true) this.model.addChildren(node, true)
var root = this.getRootNode();
root.$emit('add-node', node)
}, },
dragStart(e) { dragStart(e) {
if (!(this.model.dragDisabled || this.model.disabled)) { if (!(this.model.dragDisabled || this.model.disabled)) {
fromComp = this compInOperation = this
// for firefox // for firefox
e.dataTransfer.setData("data","data"); e.dataTransfer.setData("data","data");
e.dataTransfer.effectAllowed = 'move' e.dataTransfer.effectAllowed = 'move'
@@ -219,14 +228,14 @@
return false return false
}, },
dragEnd(e) { dragEnd(e) {
fromComp = null compInOperation = null
}, },
dragOver(e) { dragOver(e) {
e.preventDefault() e.preventDefault()
return true return true
}, },
dragEnter(e) { dragEnter(e) {
if (!fromComp) return if (!compInOperation) return
if (this.model.isLeaf) return if (this.model.isLeaf) return
this.isDragEnterNode = true this.isDragEnterNode = true
}, },
@@ -234,13 +243,16 @@
this.isDragEnterNode = false this.isDragEnterNode = false
}, },
drop(e) { drop(e) {
if (!fromComp) return if (!compInOperation) return
fromComp.model.moveInto(this.model) const oldParent = compInOperation.model.parent;
compInOperation.model.moveInto(this.model)
this.isDragEnterNode = false this.isDragEnterNode = false
var node = this.getRootNode();
node.$emit('drop', {target: this.model, node: compInOperation.model, src: oldParent})
}, },
dragEnterUp () { dragEnterUp () {
if (!fromComp) return if (!compInOperation) return
this.isDragEnterUp = true this.isDragEnterUp = true
}, },
dragOverUp (e) { dragOverUp (e) {
@@ -248,17 +260,20 @@
return true return true
}, },
dragLeaveUp () { dragLeaveUp () {
if (!fromComp) return if (!compInOperation) return
this.isDragEnterUp = false this.isDragEnterUp = false
}, },
dropUp () { dropBefore () {
if (!fromComp) return if (!compInOperation) return
fromComp.model.insertBefore(this.model) const oldParent = compInOperation.model.parent;
compInOperation.model.insertBefore(this.model)
this.isDragEnterUp = false this.isDragEnterUp = false
var node = this.getRootNode();
node.$emit('drop-before', {target: this.model, node: compInOperation.model, src: oldParent})
}, },
dragEnterBottom () { dragEnterBottom () {
if (!fromComp) return if (!compInOperation) return
this.isDragEnterBottom = true this.isDragEnterBottom = true
}, },
dragOverBottom (e) { dragOverBottom (e) {
@@ -266,13 +281,23 @@
return true return true
}, },
dragLeaveBottom () { dragLeaveBottom () {
if (!fromComp) return if (!compInOperation) return
this.isDragEnterBottom = false this.isDragEnterBottom = false
}, },
dropBottom () { dropAfter () {
if (!fromComp) return if (!compInOperation) return
fromComp.model.insertAfter(this.model) const oldParent = compInOperation.model.parent;
compInOperation.model.insertAfter(this.model)
this.isDragEnterBottom = false 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;
} }
}, },
beforeCreate () { beforeCreate () {

View File

@@ -4,24 +4,24 @@
var handlerCache var handlerCache
exports.addHandler = function(element, type, handler) { exports.addHandler = function (element, type, handler) {
handlerCache = handler handlerCache = handler
if (element.addEventListener) { if (element.addEventListener) {
element.addEventListener(type, handler, false); element.addEventListener(type, handler, false)
} else if (element.attachEvent) { } else if (element.attachEvent) {
element.attachEvent("on" + type, handler); element.attachEvent('on' + type, handler)
} else { } else {
element["on" + type] = handler; element['on' + type] = handler
} }
} }
exports.removeHandler = function (element, type) { exports.removeHandler = function (element, type) {
if (element.removeEventListener) { if (element.removeEventListener) {
element.removeEventListener(type, handlerCache, false); element.removeEventListener(type, handlerCache, false)
} else if (element.detachEvent) { } else if (element.detachEvent) {
element.detachEvent("on" + type, handlerCache); element.detachEvent('on' + type, handlerCache)
} else { } else {
element["on" + type] = null; element['on' + type] = null
} }
} }