Compare commits

...

13 Commits
1.0.1 ... 1.0.8

Author SHA1 Message Date
youxingzhi
a7b717334c 1.0.8 2018-03-09 17:22:33 +08:00
youxingzhi
f6de5a2be8 1.0.7 2018-03-09 17:20:09 +08:00
ayou
2367a7d1e6 Merge remote-tracking branch 'origin/master'
# Conflicts:
#	readme.md
2018-03-07 22:03:26 +08:00
ayou
01eca7d2a3 add dev mode, update readme 2018-03-07 22:03:07 +08:00
ayou
2f1205ae02 Update readme.md 2018-03-07 21:39:46 +08:00
ayou
fc5b9f58ff 1.0.5 2018-02-11 21:37:56 +08:00
ayou
c846f7a9c1 add node click event 2018-02-11 21:35:53 +08:00
ayou
1580a3524d 1.0.4 2018-02-06 21:58:05 +08:00
ayou
6812b1eb30 remove jquery 2018-02-06 21:51:45 +08:00
youxingzhi
bbbe58a4e0 1.0.3 2018-01-05 10:59:54 +08:00
youxingzhi
97f0db4343 #3 add dragDisabled params 2018-01-05 10:52:09 +08:00
youxingzhi
527bae5bdc 1.0.2 2017-08-31 18:27:39 +08:00
youxingzhi
dce8f74717 #1 2017-08-31 18:25:47 +08:00
15 changed files with 404 additions and 189 deletions

View File

@@ -9,4 +9,4 @@ test
.babelrc
.travis.yml
karma.conf.js
webpack.config.js
build

View File

@@ -1,14 +1,9 @@
var webpack = require('webpack');
var path = require('path');
var projectRoot = path.resolve(__dirname, '../')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'vue-tree-list.min.js',
library: 'VueTreeList',
libraryTarget: 'umd'
},
module: {
loaders: [
{
@@ -18,7 +13,7 @@ module.exports = {
{
test: /\.js$/,
loader: 'babel',
include: [path.join(__dirname, 'src')],
include: [path.join(projectRoot, 'src'), path.join(projectRoot, 'dev')],
exclude: /node_modules/
},
{
@@ -40,12 +35,5 @@ module.exports = {
browsers: ['iOS >= 7', 'Android >= 4.1']
})
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
}

View File

@@ -0,0 +1,23 @@
var webpack = require('webpack')
var merge = require('webpack-merge')
var baseConfig = require('./webpack.base.conf')
var path = require('path')
var projectRoot = path.resolve(__dirname, '../')
module.exports = merge(baseConfig, {
entry: './src/index.js',
output: {
path: path.resolve(projectRoot, 'dist'),
filename: 'vue-tree-list.min.js',
library: 'VueTreeList',
libraryTarget: 'umd'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
})

28
build/webpack.dev.conf.js Normal file
View File

@@ -0,0 +1,28 @@
var webpack = require('webpack')
var merge = require('webpack-merge')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var baseConfig = require('./webpack.base.conf')
var path = require('path')
var projectRoot = path.resolve(__dirname, '../')
module.exports = merge(baseConfig, {
entry: './dev/index.js',
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
open: true,
hot: true,
inline: true
},
devtool: '#eval-source-map',
plugins: [
new HtmlWebpackPlugin({
template: './dev/index.html',
filename: 'index.html',
inject: true
}),
new webpack.HotModuleReplacementPlugin()
]
})

84
dev/App.vue Normal file
View File

@@ -0,0 +1,84 @@
<template>
<div>
<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>
<button @click="getNewTree">Get new tree</button>
<pre>
{{newTree}}
</pre>
</div>
</template>
<script>
import { VueTreeList, Tree, TreeNode } from '../dist/vue-tree-list.min'
export default {
components: {
VueTreeList
},
data () {
return {
newTree: {},
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
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)
},
getNewTree: function () {
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>

11
dev/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="with=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
<title>vue-date-range</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

9
dev/index.js Normal file
View File

@@ -0,0 +1,9 @@
/**
* Created by ayou on 18/3/7.
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')

File diff suppressed because one or more lines are too long

View File

@@ -78,7 +78,7 @@
</span>
New Treenode
</button>
<vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
</div>
<div class="container">
@@ -127,6 +127,7 @@
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
@@ -139,7 +140,8 @@
{
name: 'Node 2',
id: 3,
pid: 0
pid: 0,
dragDisabled: true
},
{
name: 'Node 3',
@@ -155,24 +157,25 @@
},
addNode: function () {
var node = new VueTreeList.TreeNode('new node', false)
var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
var vm = this
function _dfs (oldNode) {
let newNode = {}
var newNode = {}
newNode.name = oldNode.name
newNode.pid = oldNode.pid
newNode.isLeaf = oldNode.isLeaf
newNode.id = oldNode.id
for (var k in oldNode) {
if (k !== 'children' && k !== 'parent') {
newNode[k] = oldNode[k]
}
}
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (let i = 0, len = oldNode.children.length; i < len; i++) {
for (var i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
}
}
@@ -180,6 +183,10 @@
}
vm.newTree = _dfs(vm.data)
},
onClick(model) {
console.log(model)
}
}
})

View File

@@ -1,13 +1,14 @@
{
"name": "vue-tree-list",
"version": "1.0.1",
"version": "1.0.8",
"description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
"main": "dist/vue-tree-list.min.js",
"scripts": {
"test": "karma start --single-run",
"unit": "karma start --watch",
"coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
"build": "webpack"
"build": "webpack --config build/webpack.build.conf.js",
"dev": "webpack-dev-server --config build/webpack.dev.conf.js"
},
"repository": {
"type": "git",
@@ -23,9 +24,6 @@
"url": "https://github.com/ParadeTo/vue-tree-list/issues"
},
"homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
"dependencies": {
"jquery": "^3.2.1"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
@@ -42,17 +40,8 @@
"file-loader": "^0.10.1",
"isparta": "^4.0.0",
"isparta-loader": "^2.0.0",
"karma": "^1.7.0",
"karma-coverage": "^1.1.1",
"karma-coveralls": "^1.1.2",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sinon-chai": "^1.3.1",
"karma-webpack": "^2.0.3",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"mocha": "^3.4.2",
"phantomjs-prebuilt": "^2.1.14",
"sinon": "^2.3.5",
"sinon-chai": "^2.11.0",
"sourcemap": "^0.1.0",
@@ -61,6 +50,9 @@
"vue-loader": "^11.1.3",
"vue-style-loader": "^2.0.3",
"vue-template-compiler": "^2.2.0",
"webpack": "^1.13.2"
"webpack": "^1.13.2",
"webpack-dev-server": "1.14.0",
"webpack-merge": "^0.14.1",
"html-webpack-plugin": "^2.8.1"
}
}

157
readme.md
View File

@@ -10,79 +10,116 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
```javascript
<button @click="addNode">Add Node</button>
<vue-tree-list :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
<button @click="getNewTree">Get new tree</button>
<pre>
{{newTree}}
</pre>
...
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
import { VueTreeList, Tree, TreeNode } from '../src'
export default {
components: {
VueTreeList
},
data () {
return {
newTree: {},
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
name: 'Node 2',
id: 3,
pid: 0
},
{
name: 'Node 3',
id: 4,
pid: 0
}
])
}
},
methods: {
addNode: function () {
var node = new TreeNode('new node', false)
if (!this.data.children) this.data.children = []
this.data.addChildren(node)
},
getNewTree: function () {
const vm = this
function _dfs (oldNode) {
let newNode = {}
newNode.name = oldNode.name
newNode.pid = oldNode.pid
newNode.isLeaf = oldNode.isLeaf
newNode.id = oldNode.id
if (oldNode.children && oldNode.children.length > 0) {
newNode.children = []
for (let i = 0, len = oldNode.children.length; i < len; i++) {
newNode.children.push(_dfs(oldNode.children[i]))
components: {
VueTreeList
},
data () {
return {
newTree: {},
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
children: [
{
name: 'Node 1-2',
id: 2,
isLeaf: true,
pid: 1
}
]
},
{
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)
},
getNewTree: function () {
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)
},
onClick(model) {
console.log(model)
}
}
}
```
# props
default-tree-node-name: Default name for new treenode.
default-leaf-node-name: Default name for new leafnode.
**default-tree-node-name**
Default name for new treenode.
**default-leaf-node-name**
Default name for new leafnode.
# events
**click**
```javascript
<vue-tree-list @click="onClick" ...
...
onClick(model) {
console.log(model)
}
...
```
# Forbid dragging
Use `dragDisabled` to forbid dragging:
```javascript
data: new Tree([
{
name: 'Node 1',
id: 1,
pid: 0,
dragDisabled: true,
...
```

View File

@@ -1,40 +1,50 @@
// used to record treenode's change
let Record = {}
// let Record = {}
// treenode's id
let nodeId = 1
/**
* Tree data struct
* Created by ayou on 2017/7/20.
* @param name: treenode's name
* @param isLeaf: treenode is leaf node or not
* @param id
* @param data: treenode's params
* name: treenode's name
* isLeaf: treenode is leaf node or not
* id: id
* dragDisabled: decide if it can be dragged
*/
const TreeNode = function (name, isLeaf, id) {
this.name = name
const TreeNode = function (data) {
const { id, isLeaf } = data
// this.name = name
this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
this.parent = null
this.pid = null
// this.pid = null
this.children = null
this.isLeaf = !!isLeaf
}
TreeNode.prototype.updateRecordProperty = function () {
if (!Record[this.id]) {
Record[this.id] = {}
// other params
for (var k in data) {
if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
this[k] = data[k]
}
}
Record[this.id].name = this.name
Record[this.id].id = this.id
Record[this.id].pid = this.pid
Record[this.id].isLeaf = this.isLeaf
}
// TreeNode.prototype.updateRecordProperty = function () {
// if (!Record[this.id]) {
// Record[this.id] = {}
// }
//
// Record[this.id].name = this.name
// Record[this.id].id = this.id
// Record[this.id].pid = this.pid
// Record[this.id].isLeaf = this.isLeaf
// }
TreeNode.prototype.changeName = function (name) {
this.name = name
this.updateRecordProperty()
Record[this.id].modify = true
// this.updateRecordProperty()
// Record[this.id].modify = true
}
TreeNode.prototype.addChildren = function (children, isNew) {
@@ -48,10 +58,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
child.parent = this
child.pid = this.id
if (isNew) {
child.updateRecordProperty()
Record[child.id].add = true
}
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
this.children.concat(children)
} else {
@@ -60,10 +70,10 @@ TreeNode.prototype.addChildren = function (children, isNew) {
child.pid = this.id
this.children.push(child)
if (isNew) {
child.updateRecordProperty()
Record[child.id].add = true
}
// if (isNew) {
// child.updateRecordProperty()
// Record[child.id].add = true
// }
}
}
@@ -73,8 +83,8 @@ TreeNode.prototype.remove = function () {
const index = parent.findChildIndex(this)
parent.children.splice(index, 1)
this.updateRecordProperty()
Record[this.id].remove = true
// this.updateRecordProperty()
// Record[this.id].remove = true
}
// remove child
@@ -121,10 +131,10 @@ TreeNode.prototype.moveInto = function (target) {
}
target.children.unshift(this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'inside'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'inside'
}
TreeNode.prototype.findChildIndex = function (child) {
@@ -160,10 +170,10 @@ TreeNode.prototype.insertBefore = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos, 0, this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'before'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'before'
}
TreeNode.prototype.insertAfter = function (target) {
@@ -172,14 +182,14 @@ TreeNode.prototype.insertAfter = function (target) {
const pos = target.parent.findChildIndex(target)
target.parent.children.splice(pos + 1, 0, this)
this.updateRecordProperty()
Record[this.id].targetId = target.id
Record[this.id].move = true
Record[this.id].moveType = 'after'
// this.updateRecordProperty()
// Record[this.id].targetId = target.id
// Record[this.id].move = true
// Record[this.id].moveType = 'after'
}
function Tree(data) {
this.root = new TreeNode('root', false, 0)
this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
this.initNode(this.root, data)
return this.root
}
@@ -188,7 +198,7 @@ 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.name, _data.isLeaf, _data.id)
var child = new TreeNode(_data)
if (_data.children && _data.children.length > 0) {
this.initNode(child, _data.children)
}
@@ -198,4 +208,4 @@ Tree.prototype.initNode = function (node, data) {
exports.Tree = Tree
exports.TreeNode = TreeNode
exports.Record = Record
// exports.Record = Record

View File

@@ -6,10 +6,8 @@
@dragenter="dragEnterUp"
@dragover='dragOverUp'
@dragleave="dragLeaveUp"></div>
<div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
draggable="true"
@click=""
:draggable="!model.dragDisabled"
@dragstart='dragStart'
@dragover='dragOver'
@dragenter='dragEnter'
@@ -17,7 +15,8 @@
@drop='drop'
@dragend='dragEnd'
@mouseover='mouseOver'
@mouseout='mouseOut'>
@mouseout='mouseOut'
@click.stop='click'>
<span class="caret icon is-small" v-if="model.children && model.children.length > 0">
<i class="vue-tree-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
</span>
@@ -83,9 +82,10 @@
<script>
import { Tree, TreeNode } from './Tree.js'
import $ from 'jquery'
import { addHandler, removeHandler } from './tools.js'
let fromComp = null
let fromComp = ''
export default {
data: function () {
return {
@@ -126,7 +126,7 @@
},
mounted () {
const vm = this
$(window).on('keyup', function (e) {
addHandler(window, 'keyup', function (e) {
// click enter
if (e.keyCode === 13 && vm.editable) {
vm.editable = false
@@ -134,7 +134,7 @@
})
},
beforeDestroy () {
$(window).off('keyup')
removeHandler(window, 'keyup')
},
methods: {
updateName (e) {
@@ -151,7 +151,8 @@
setEditable () {
this.editable = true
this.$nextTick(() => {
$(this.$refs.nodeInput).trigger('focus')
this.$refs.nodeInput.focus()
// fireFocusEvent(this.$refs.nodeInput)
})
},
@@ -173,18 +174,31 @@
this.isHover = false
},
click() {
var node = this.$parent
var clickModel = this.model
while (node._props.model.name !== 'root') {
node = node.$parent
}
node.$emit('click', clickModel)
},
addChild(isLeaf) {
const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
this.expanded = true
var node = new TreeNode(name, isLeaf)
var node = new TreeNode({ name, isLeaf })
this.model.addChildren(node, true)
},
dragStart(e) {
fromComp = this
e.dataTransfer.effectAllowed = 'move'
return true
if (!this.model.dragDisabled) {
fromComp = this
// for firefox
e.dataTransfer.setData("data","data");
e.dataTransfer.effectAllowed = 'move'
return true
}
return false
},
dragEnd(e) {
fromComp = null
@@ -194,20 +208,21 @@
return true
},
dragEnter(e) {
if (this.model.isLeaf) {
return
}
if (!fromComp) return
if (this.model.isLeaf) return
this.isDragEnterNode = true
},
dragLeave(e) {
this.isDragEnterNode = false
},
drop(e) {
if (!fromComp) return
fromComp.model.moveInto(this.model)
this.isDragEnterNode = false
},
dragEnterUp () {
if (!fromComp) return
this.isDragEnterUp = true
},
dragOverUp (e) {
@@ -215,14 +230,17 @@
return true
},
dragLeaveUp () {
if (!fromComp) return
this.isDragEnterUp = false
},
dropUp () {
if (!fromComp) return
fromComp.model.insertBefore(this.model)
this.isDragEnterUp = false
},
dragEnterBottom () {
if (!fromComp) return
this.isDragEnterBottom = true
},
dragOverBottom (e) {
@@ -230,9 +248,11 @@
return true
},
dragLeaveBottom () {
if (!fromComp) return
this.isDragEnterBottom = false
},
dropBottom () {
if (!fromComp) return
fromComp.model.insertAfter(this.model)
this.isDragEnterBottom = false
}

View File

@@ -4,4 +4,4 @@
exports.VueTreeList = require('./VueTreeList.vue')
exports.TreeNode = require('./Tree.js').TreeNode
exports.Tree = require('./Tree.js').Tree
exports.Record = require('./Tree.js').Record
// exports.Record = require('./Tree.js').Record

31
src/tools.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* Created by ayou on 18/2/6.
*/
var handlerCache
exports.addHandler = function(element, type, handler) {
handlerCache = handler
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
exports.removeHandler = function (element, type) {
if (element.removeEventListener) {
element.removeEventListener(type, handlerCache, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handlerCache);
} else {
element["on" + type] = null;
}
}
// exports.fireFocusEvent = function (ele) {
// var event = new FocusEvent()
// ele.dispatch(event)
// }