feat(event): add drop-before and drop-after

Duplicate Declaration On onClick Method

.commitlintrc.yml

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

.czrc

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

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 npm-debug.log
 .idea
-coverage
+coverage
+package-lock.json

.huskyrc.yml

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

.npmignore

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

build/webpack.base.conf.js

@@ -1,14 +1,8 @@
-var webpack = require('webpack');
+var path = require('path')
-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 +12,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 +34,5 @@ module.exports = {
         browsers: ['iOS >= 7', 'Android >= 4.1']
       })
     ]
-  },
+  }
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ]
 }

build/webpack.build.conf.js

@@ -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
+      }
+    })
+  ]
+})

build/webpack.dev.conf.js

@@ -0,0 +1,25 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var baseConfig = require('./webpack.base.conf')
+
+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()
+  ]
+})

dev/App.vue

@@ -0,0 +1,154 @@
+<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="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>
+        <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) {
+        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 })
+        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>

dev/index.html

@@ -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-tree-list</title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

dev/index.js

@@ -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')

examples/demo1.html

@@ -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>
 </head>
 <body>
@@ -78,7 +99,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 +148,7 @@
             name: 'Node 1',
             id: 1,
             pid: 0,
+            dragDisabled: true,
             children: [
               {
                 name: 'Node 1-2',
@@ -139,7 +161,8 @@
           {
             name: 'Node 2',
             id: 3,
-            pid: 0
+            pid: 0,
+            disabled: true
           },
           {
             name: 'Node 3',
@@ -155,24 +178,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
+          for (var k in oldNode) {
-          newNode.pid = oldNode.pid
+            if (k !== 'children' && k !== 'parent') {
-          newNode.isLeaf = oldNode.isLeaf
+              newNode[k] = oldNode[k]
-          newNode.id = oldNode.id
+            }
+          }
 
           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 +204,10 @@
         }
 
         vm.newTree = _dfs(vm.data)
+      },
+
+      onClick(model) {
+        console.log(model)
       }
     }
   })

package.json

@@ -1,13 +1,17 @@
 {
   "name": "vue-tree-list",
-  "version": "1.0.1",
+  "version": "1.3.2",
   "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": {
+    "commit": "npx git-cz",
+    "standard": "standard",
     "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",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -23,10 +27,9 @@
     "url": "https://github.com/ParadeTo/vue-tree-list/issues"
   },
   "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
-  "dependencies": {
-    "jquery": "^3.2.1"
-  },
   "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.0.0",
@@ -40,27 +43,26 @@
     "cross-env": "^5.0.1",
     "css-loader": "^0.26.2",
     "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.8.1",
+    "husky": "^1.2.0",
     "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",
+    "standard": "^12.0.1",
     "url-loader": "^0.5.7",
-    "vue": "^2.3.4",
+    "vue": "^2.6.6",
     "vue-loader": "^11.1.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-merge": "^0.14.1"
+  },
+  "dependencies": {
+    "cz-conventional-changelog": "^2.1.0"
   }
 }

readme.md

@@ -9,15 +9,32 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 ``npm install vue-tree-list``
 
 ```javascript
-<button @click="addNode">Add Node</button>
+<template>
-<vue-tree-list :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 'vue-tree-list'
+          @add-node="onAddNode"
-export default {
+          :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>
+        <pre>
+          {{newTree}}
+        </pre>
+    </div>
+</template>
+<script>
+  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
+  export default {
     components: {
       VueTreeList
     },
@@ -29,6 +46,11 @@ export default {
             name: 'Node 1',
             id: 1,
             pid: 0,
+            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
             children: [
               {
                 name: 'Node 1-2',
@@ -41,7 +63,8 @@ export default {
           {
             name: 'Node 2',
             id: 3,
-            pid: 0
+            pid: 0,
+            disabled: true
           },
           {
             name: 'Node 3',
@@ -52,25 +75,43 @@ export default {
       }
     },
     methods: {
-      addNode: function () {
+      onDel (node) {
-        var node = new TreeNode('new node', false)
+        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: function () {
+      getNewTree () {
-        const vm = this
+        var vm = this
         function _dfs (oldNode) {
-          let newNode = {}
+          var newNode = {}
 
-          newNode.name = oldNode.name
+          for (var k in oldNode) {
-          newNode.pid = oldNode.pid
+            if (k !== 'children' && k !== 'parent') {
-          newNode.isLeaf = oldNode.isLeaf
+              newNode[k] = oldNode[k]
-          newNode.id = oldNode.id
+            }
+          }
 
           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]))
             }
           }
@@ -78,11 +119,85 @@ export default {
         }
 
         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 {
+      background-color: #d0cfcf;
+    }
+  }
+</style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
+
 ```
 
 # props
-default-tree-node-name: Default name for new treenode.
+## props of vue-tree-list
-default-leaf-node-name: Default name for new leafnode.
+| 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
+
+
+## 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
+
+### 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
+| 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
+
+# customize operation icons
+The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
+
+```html
+<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>
+```

src/Tree.js

@@ -1,43 +1,33 @@
-// used to record treenode's change
-let Record = {}
-// treenode's id
-let nodeId = 1
-
 /**
  * Tree data struct
  * Created by ayou on 2017/7/20.
- * @param name: treenode's name
+ * @param data: treenode's params
- * @param isLeaf: treenode is leaf node or not
+ *   name: treenode's name
- * @param id
+ *   isLeaf: treenode is leaf node or not
+ *   id: id
+ *   dragDisabled: decide if it can be dragged
+ *   disabled: desabled all operation
  */
-const TreeNode = function (name, isLeaf, id) {
+const TreeNode = function (data) {
-  this.name = name
+  const { id, isLeaf } = data
-  this.id = (typeof id === 'undefined') ? ('new' + nodeId++) : id
+  this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
   this.parent = null
-  this.pid = null
   this.children = null
   this.isLeaf = !!isLeaf
-}
 
-TreeNode.prototype.updateRecordProperty = function () {
+  // other params
-  if (!Record[this.id]) {
+  for (var k in data) {
-    Record[this.id] = {}
+    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.changeName = function (name) {
   this.name = name
-
-  this.updateRecordProperty()
-  Record[this.id].modify = true
 }
 
-TreeNode.prototype.addChildren = function (children, isNew) {
+TreeNode.prototype.addChildren = function (children) {
   if (!this.children) {
     this.children = []
   }
@@ -47,11 +37,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
       const child = children[i]
       child.parent = this
       child.pid = this.id
-
-      if (isNew) {
-        child.updateRecordProperty()
-        Record[child.id].add = true
-      }
     }
     this.children.concat(children)
   } else {
@@ -59,11 +44,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
     child.parent = this
     child.pid = this.id
     this.children.push(child)
-
-    if (isNew) {
-      child.updateRecordProperty()
-      Record[child.id].add = true
-    }
   }
 }
 
@@ -72,9 +52,6 @@ TreeNode.prototype.remove = function () {
   const parent = this.parent
   const index = parent.findChildIndex(this)
   parent.children.splice(index, 1)
-
-  this.updateRecordProperty()
-  Record[this.id].remove = true
 }
 
 // remove child
@@ -120,11 +97,6 @@ TreeNode.prototype.moveInto = function (target) {
     target.children = []
   }
   target.children.unshift(this)
-
-  this.updateRecordProperty()
-  Record[this.id].targetId = target.id
-  Record[this.id].move = true
-  Record[this.id].moveType = 'inside'
 }
 
 TreeNode.prototype.findChildIndex = function (child) {
@@ -159,11 +131,6 @@ 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'
 }
 
 TreeNode.prototype.insertAfter = function (target) {
@@ -171,15 +138,10 @@ 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'
 }
 
-function Tree(data) {
+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 +150,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 +160,3 @@ Tree.prototype.initNode = function (node, data) {
 
 exports.Tree = Tree
 exports.TreeNode = TreeNode
-exports.Record = Record

src/VueTreeList.vue

@@ -1,15 +1,13 @@
 <template>
-  <div>
+  <div class='vtl'>
     <div v-if="model.name !== 'root'">
-      <div class="border up" :class="{'active': isDragEnterUp}"
+      <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
-        @drop="dropUp"
+        @drop="dropBefore"
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
         @dragleave="dragLeaveUp"></div>
-
+      <div :id='model.id' :class="treeNodeClass"
-      <div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
+        :draggable="!model.dragDisabled"
-        draggable="true"
-        @click=""
         @dragstart='dragStart'
         @dragover='dragOver'
         @dragenter='dragEnter'
@@ -17,65 +15,71 @@
         @drop='drop'
         @dragend='dragEnd'
         @mouseover='mouseOver'
-        @mouseout='mouseOut'>
+        @mouseout='mouseOut'
-        <span class="caret icon is-small" v-if="model.children && model.children.length > 0">
+        @click.stop='click'>
-          <i class="vue-tree-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
+        <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">
-            <i class="vue-tree-icon item-icon icon-file"></i>
+            <i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
           </slot>
         </span>
         <span v-else>
           <slot name="treeNodeIcon">
-            <i class="vue-tree-icon item-icon icon-folder"></i>
+            <i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
           </slot>
         </span>
 
-        <div class="node-content" v-if="!editable">
+        <div class="vtl-node-content" v-if="!editable">
           {{model.name}}
         </div>
-        <input v-else class="vue-tree-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="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">
-              <i class="vue-tree-icon icon-folder-plus-e"></i>
+              <i class="vtl-icon vtl-icon-folder-plus-e"></i>
             </slot>
           </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">
-              <i class="vue-tree-icon icon-plus"></i>
+              <i class="vtl-icon vtl-icon-plus"></i>
             </slot>
           </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="vue-tree-icon icon-edit"></i>
+              <i class="vtl-icon vtl-icon-edit"></i>
             </slot>
           </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="vue-tree-icon icon-trash"></i>
+              <i class="vtl-icon vtl-icon-trash"></i>
             </slot>
           </span>
         </div>
       </div>
 
       <div v-if="model.children && model.children.length > 0 && expanded"
-        class="border bottom"
+        class="vtl-border vtl-bottom"
-        :class="{'active': isDragEnterBottom}"
+        :class="{'vtl-active': isDragEnterBottom}"
-        @drop="dropBottom"
+        @drop="dropAfter"
         @dragenter="dragEnterBottom"
         @dragover='dragOverBottom'
         @dragleave="dragLeaveBottom"></div>
     </div>
 
-    <div :class="{'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"
         :default-tree-node-name="defaultTreeNodeName"
         :default-leaf-node-name="defaultLeafNodeName"
+        v-bind:default-expanded="defaultExpanded"
         :model="model"
         :key='model.id'>
+          <slot name="addTreeNode" slot="addTreeNode" />
+          <slot name="addLeafNode" slot="addLeafNode" />
+          <slot name="editNode" slot="editNode" />
+          <slot name="delNode" slot="delNode" />
       </item>
     </div>
   </div>
@@ -83,9 +87,10 @@
 
 <script>
   import { Tree, TreeNode } from './Tree.js'
-  import $ from 'jquery'
+  import { addHandler, removeHandler } from './tools.js'
+
+  let compInOperation = null
 
-  let fromComp = ''
   export default {
     data: function () {
       return {
@@ -94,7 +99,7 @@
         isDragEnterUp: false,
         isDragEnterBottom: false,
         isDragEnterNode: false,
-        expanded: true
+        expanded: this.defaultExpanded
       }
     },
     props: {
@@ -108,25 +113,46 @@
       defaultTreeNodeName: {
         type: String,
         default: 'New tree node'
+      },
+      defaultExpanded: {
+        type: Boolean,
+        default: true
       }
     },
     computed: {
       itemIconClass () {
-        return this.model.isLeaf ? 'icon-file' : 'icon-folder'
+        return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
       },
 
       caretClass () {
-        return this.expanded ? 'icon-caret-down' : 'icon-caret-right'
+        return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
       },
 
-      isFolder() {
+      isFolder () {
         return this.model.children &&
           this.model.children.length
+      },
+
+      treeNodeClass () {
+        const {
+          model: {
+            dragDisabled,
+            disabled
+          },
+          isDragEnterNode
+        } = this
+
+        return {
+          'vtl-tree-node': true,
+          'vtl-active': isDragEnterNode,
+          'vtl-drag-disabled': dragDisabled,
+          'vtl-disabled': disabled
+        }
       }
     },
     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,24 +160,27 @@
       })
     },
     beforeDestroy () {
-      $(window).off('keyup')
+      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 () {
-        const vm = this
+        var node = this.getRootNode()
-        if (window.confirm('Are you sure?')) {
+        node.$emit('delete-node', this.model)
-          vm.model.remove()
-        }
       },
 
       setEditable () {
         this.editable = true
         this.$nextTick(() => {
-          $(this.$refs.nodeInput).trigger('focus')
+          const $input = this.$refs.nodeInput
+          $input.focus()
+          $input.setSelectionRange(0, $input.value.length)
         })
       },
 
@@ -166,6 +195,7 @@
       },
 
       mouseOver(e) {
+        if (this.model.disabled) return
         this.isHover = true
       },
 
@@ -173,41 +203,56 @@
         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)
+        var node = new TreeNode({ name, isLeaf })
         this.model.addChildren(node, true)
+        var root = this.getRootNode();
+        root.$emit('add-node', node)
       },
 
       dragStart(e) {
-        fromComp = this
+        if (!(this.model.dragDisabled || this.model.disabled)) {
-
+          compInOperation = this
-        e.dataTransfer.effectAllowed = 'move'
+          // for firefox
-        return true
+          e.dataTransfer.setData("data","data");
+          e.dataTransfer.effectAllowed = 'move'
+          return true
+        }
+        return false
       },
       dragEnd(e) {
-        fromComp = null
+        compInOperation = null
       },
       dragOver(e) {
         e.preventDefault()
         return true
       },
       dragEnter(e) {
-        if (this.model.isLeaf) {
+        if (!compInOperation) return
-          return
+        if (this.model.isLeaf) return
-        }
         this.isDragEnterNode = true
       },
       dragLeave(e) {
         this.isDragEnterNode = false
       },
       drop(e) {
-        fromComp.model.moveInto(this.model)
+        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) {
@@ -215,14 +260,20 @@
         return true
       },
       dragLeaveUp () {
+        if (!compInOperation) return
         this.isDragEnterUp = false
       },
-      dropUp () {
+      dropBefore () {
-        fromComp.model.insertBefore(this.model)
+        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) {
@@ -230,11 +281,23 @@
         return true
       },
       dragLeaveBottom () {
+        if (!compInOperation) return
         this.isDragEnterBottom = false
       },
-      dropBottom () {
+      dropAfter () {
-        fromComp.model.insertAfter(this.model)
+        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;
       }
     },
     beforeCreate () {
@@ -243,7 +306,7 @@
   }
 </script>
 
-<style lang="less" rel="stylesheet/less" scoped>
+<style lang="less" rel="stylesheet/less">
   @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?ui1hbx');
@@ -255,7 +318,7 @@
     font-style: normal;
   }
 
-  .vue-tree-icon {
+  .vtl-icon {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icomoon' !important;
     speak: none;
@@ -268,7 +331,7 @@
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    &.item-icon {
+    &.vtl-menu-icon {
       margin-right: 4px;
       &:hover {
         color: inherit;
@@ -279,52 +342,52 @@
     }
   }
 
-  .icon-file:before {
+  .vtl-icon-file:before {
     content: "\e906";
   }
-  .icon-folder:before {
+  .vtl-icon-folder:before {
     content: "\e907";
   }
-  .icon-caret-down:before {
+  .vtl-icon-caret-down:before {
-    content: "\e900";
-  }
-  .icon-caret-right:before {
     content: "\e901";
   }
-  .icon-edit:before {
+  .vtl-icon-caret-right:before {
+    content: "\e900";
+  }
+  .vtl-icon-edit:before {
     content: "\e902";
   }
-  .icon-folder-plus-e:before {
+  .vtl-icon-folder-plus-e:before {
     content: "\e903";
   }
-  .icon-plus:before {
+  .vtl-icon-plus:before {
     content: "\e904";
   }
-  .icon-trash:before {
+  .vtl-icon-trash:before {
     content: "\e905";
   }
 
 
-  .border {
+  .vtl-border {
     height: 5px;
-    &.up {
+    &.vtl-up {
       margin-top: -5px;
       background-color: transparent;
     }
-    &.bottom {
+    &.vtl-bottom {
       background-color: transparent;
     }
-    &.active {
+    &.vtl-active {
       border-bottom: 3px dashed blue;
       /*background-color: blue;*/
     }
   }
 
-  .tree-node {
+  .vtl-tree-node {
     display: flex;
     align-items: center;
     padding: 5px 0 5px 1rem;
-    .input {
+    .vtl-input {
       border: none;
       max-width: 150px;
       border-bottom: 1px solid blue;
@@ -332,23 +395,23 @@
     &:hover {
       background-color: #f0f0f0;
     }
-    &.active {
+    &.vtl-active {
       outline: 2px dashed pink;
     }
-    .caret {
+    .vtl-caret {
       margin-left: -1rem;
     }
-    .operation {
+    .vtl-operation {
       margin-left: 2rem;
       letter-spacing: 1px;
     }
   }
 
 
-  .item {
+  .vtl-item {
     cursor: pointer;
   }
-  .tree-margin {
+  .vtl-tree-margin {
     margin-left: 2em;
   }
 </style>

src/index.js

@@ -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

src/tools.js

@@ -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)
+// }