Compare commits
17 Commits
Author | SHA1 | Date | |
---|---|---|---|
![]() |
3dd6e31028 | ||
![]() |
cde7836539 | ||
![]() |
a8284583da | ||
![]() |
8cb42cd952 | ||
![]() |
5ab8775ace | ||
![]() |
3fec41a890 | ||
![]() |
867ef2a7fa | ||
![]() |
2b2b1419ad | ||
![]() |
47a4e2df8d | ||
![]() |
ec49d0e226 | ||
![]() |
52a63af52f | ||
![]() |
b10803df64 | ||
![]() |
7d35504b40 | ||
![]() |
b2eba3e3c9 | ||
![]() |
d6826e1a24 | ||
![]() |
a815fc658b | ||
![]() |
572b045314 |
2
.commitlintrc.yml
Normal file
2
.commitlintrc.yml
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
extends:
|
||||||
|
- "@commitlint/config-conventional"
|
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,3 +2,4 @@ node_modules
|
|||||||
npm-debug.log
|
npm-debug.log
|
||||||
.idea
|
.idea
|
||||||
coverage
|
coverage
|
||||||
|
package-lock.json
|
4
.huskyrc.yml
Normal file
4
.huskyrc.yml
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
hooks:
|
||||||
|
pre-commit:
|
||||||
|
- npm run standard
|
||||||
|
commit-msg: commitlint -E HUSKY_GIT_PARAMS
|
@@ -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, '../')
|
||||||
|
|
||||||
|
@@ -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',
|
||||||
|
19
dev/App.vue
19
dev/App.vue
@@ -1,7 +1,16 @@
|
|||||||
<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="onChange"
|
||||||
|
@delete-node="onChange"
|
||||||
|
@add-node="onChange"
|
||||||
|
:model="data"
|
||||||
|
default-tree-node-name="new node"
|
||||||
|
default-leaf-node-name="new leaf"
|
||||||
|
v-bind:default-expanded="false">
|
||||||
|
</vue-tree-list>
|
||||||
<button @click="getNewTree">Get new tree</button>
|
<button @click="getNewTree">Get new tree</button>
|
||||||
<pre>
|
<pre>
|
||||||
{{newTree}}
|
{{newTree}}
|
||||||
@@ -47,13 +56,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addNode: function () {
|
onChange (data) {
|
||||||
|
console.log(data)
|
||||||
|
},
|
||||||
|
|
||||||
|
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 = {}
|
||||||
|
2
dist/vue-tree-list.min.js
vendored
2
dist/vue-tree-list.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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',
|
||||||
|
15
package.json
15
package.json
@@ -1,9 +1,11 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-tree-list",
|
"name": "vue-tree-list",
|
||||||
"version": "1.1.0",
|
"version": "1.1.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,6 +52,7 @@
|
|||||||
"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.3.4",
|
||||||
"vue-loader": "^11.1.3",
|
"vue-loader": "^11.1.3",
|
||||||
@@ -53,7 +60,9 @@
|
|||||||
"vue-template-compiler": "^2.2.0",
|
"vue-template-compiler": "^2.2.0",
|
||||||
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
54
readme.md
54
readme.md
@@ -9,14 +9,25 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
|
|||||||
``npm install vue-tree-list``
|
``npm install vue-tree-list``
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
<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="onChange"
|
||||||
|
@delete-node="onChange"
|
||||||
|
@add-node="onChange"
|
||||||
|
:model="data"
|
||||||
|
default-tree-node-name="new node"
|
||||||
|
default-leaf-node-name="new leaf"
|
||||||
|
v-bind:default-expanded="false">
|
||||||
|
</vue-tree-list>
|
||||||
<button @click="getNewTree">Get new tree</button>
|
<button @click="getNewTree">Get new tree</button>
|
||||||
<pre>
|
<pre>
|
||||||
{{newTree}}
|
{{newTree}}
|
||||||
</pre>
|
</pre>
|
||||||
|
</div>
|
||||||
...
|
...
|
||||||
import { VueTreeList, Tree, TreeNode } from '../src'
|
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
VueTreeList
|
VueTreeList
|
||||||
@@ -43,7 +54,7 @@ export default {
|
|||||||
name: 'Node 2',
|
name: 'Node 2',
|
||||||
id: 3,
|
id: 3,
|
||||||
pid: 0,
|
pid: 0,
|
||||||
dragDisabled: true
|
disabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Node 3',
|
name: 'Node 3',
|
||||||
@@ -54,13 +65,17 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addNode: function () {
|
onChange (data) {
|
||||||
|
console.log(data)
|
||||||
|
},
|
||||||
|
|
||||||
|
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 = {}
|
||||||
@@ -99,17 +114,30 @@ export default {
|
|||||||
|
|
||||||
Default name for new leafnode.
|
Default name for new leafnode.
|
||||||
|
|
||||||
|
|
||||||
|
**onDeleteNode**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
onDeleteNode(confirm) {
|
||||||
|
if (something) {
|
||||||
|
confirm()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**default-expanded**
|
||||||
|
|
||||||
|
Default node is expanded or not.
|
||||||
|
|
||||||
|
|
||||||
# events
|
# events
|
||||||
**click**
|
**click**
|
||||||
|
|
||||||
```javascript
|
**change-name**
|
||||||
<vue-tree-list @click="onClick" ...
|
|
||||||
...
|
**delete-node**
|
||||||
onClick(model) {
|
|
||||||
console.log(model)
|
**add-node**
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
# Forbid dragging
|
# Forbid dragging
|
||||||
Use `dragDisabled` to forbid dragging:
|
Use `dragDisabled` to forbid dragging:
|
||||||
|
@@ -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.
|
||||||
@@ -13,7 +11,7 @@ let nodeId = 1
|
|||||||
const TreeNode = function (data) {
|
const TreeNode = function (data) {
|
||||||
const { id, isLeaf } = data
|
const { id, isLeaf } = data
|
||||||
// this.name = name
|
// this.name = name
|
||||||
this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
|
this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
|
||||||
this.parent = null
|
this.parent = null
|
||||||
// this.pid = null
|
// this.pid = null
|
||||||
this.children = null
|
this.children = null
|
||||||
|
@@ -69,10 +69,11 @@
|
|||||||
@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'>
|
||||||
</item>
|
</item>
|
||||||
@@ -94,7 +95,7 @@
|
|||||||
isDragEnterUp: false,
|
isDragEnterUp: false,
|
||||||
isDragEnterBottom: false,
|
isDragEnterBottom: false,
|
||||||
isDragEnterNode: false,
|
isDragEnterNode: false,
|
||||||
expanded: true
|
expanded: this.defaultExpanded
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
@@ -108,6 +109,14 @@
|
|||||||
defaultTreeNodeName: {
|
defaultTreeNodeName: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'New tree node'
|
default: 'New tree node'
|
||||||
|
},
|
||||||
|
onDeleteNode: {
|
||||||
|
type: Function,
|
||||||
|
default: confirm => { confirm() }
|
||||||
|
},
|
||||||
|
defaultExpanded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -155,14 +164,18 @@
|
|||||||
},
|
},
|
||||||
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
|
const vm = this
|
||||||
if (window.confirm('Are you sure?')) {
|
const confirm = () => vm.model.remove()
|
||||||
vm.model.remove()
|
this.onDeleteNode(confirm)
|
||||||
}
|
var node = this.getRootNode()
|
||||||
|
node.$emit('delete-node', this.model)
|
||||||
},
|
},
|
||||||
|
|
||||||
setEditable () {
|
setEditable () {
|
||||||
@@ -193,12 +206,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,6 +215,8 @@
|
|||||||
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) {
|
||||||
@@ -273,6 +284,13 @@
|
|||||||
if (!fromComp) return
|
if (!fromComp) return
|
||||||
fromComp.model.insertAfter(this.model)
|
fromComp.model.insertAfter(this.model)
|
||||||
this.isDragEnterBottom = false
|
this.isDragEnterBottom = false
|
||||||
|
},
|
||||||
|
getRootNode() {
|
||||||
|
var node = this.$parent
|
||||||
|
while (node._props.model.name !== 'root') {
|
||||||
|
node = node.$parent
|
||||||
|
}
|
||||||
|
return node;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeCreate () {
|
beforeCreate () {
|
||||||
|
12
src/tools.js
12
src/tools.js
@@ -7,21 +7,21 @@ 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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user