Compare commits

...

5 Commits
1.0.4 ... 1.0.6

Author SHA1 Message Date
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
12 changed files with 1332 additions and 93 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,16 @@
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'
}
})

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 '../src'
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">
@@ -183,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.4",
"version": "1.0.6",
"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",
@@ -39,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",
@@ -58,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"
}
}

146
readme.md
View File

@@ -10,83 +10,106 @@ 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-tree-node-name**
Default name for new treenode.
default-leaf-node-name: Default name for new leafnode.
**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:
@@ -98,4 +121,5 @@ data: new Tree([
pid: 0,
dragDisabled: true,
...
```
```

View File

@@ -15,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>
@@ -173,6 +174,15 @@
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