feat: support customizing operation icons

dev/App.vue

@@ -4,12 +4,16 @@
         <vue-tree-list
           @click="onClick"
           @change-name="onChange"
-          @delete-node="onChange"
+          @delete-node="onDel"
           @add-node="onChange"
           :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>
@@ -56,6 +60,10 @@
       }
     },
     methods: {
+      onDel (node) {
+        node.remove()
+      },
+
       onChange (data) {
         console.log(data)
       },
@@ -108,3 +116,11 @@
     }
   }
 </style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>

package.json

@@ -54,10 +54,10 @@
     "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-dev-server": "1.14.0",
     "webpack-merge": "^0.14.1"

readme.md

@@ -114,17 +114,6 @@ Default name for new treenode.
 
 Default name for new leafnode.
 
-
-**onDeleteNode**
-
-```javascript
-onDeleteNode(confirm) {
-  if (something) {
-    confirm()
-  }
-}
-```
-
 **default-expanded**
 
 Default node is expanded or not.
@@ -137,6 +126,14 @@ Default node is expanded or not.
 
 **delete-node**
 
+```javascript
+@delete-node="onDel"
+...
+onDel (node) {
+  node.remove()
+},
+```
+
 **add-node**
 
 # Forbid dragging

src/Tree.js

@@ -10,10 +10,8 @@
  */
 const TreeNode = function (data) {
   const { id, isLeaf } = data
-  // this.name = name
   this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
   this.parent = null
-  // this.pid = null
   this.children = null
   this.isLeaf = !!isLeaf
 
@@ -29,7 +27,7 @@ TreeNode.prototype.changeName = function (name) {
   this.name = name
 }
 
-TreeNode.prototype.addChildren = function (children, isNew) {
+TreeNode.prototype.addChildren = function (children) {
   if (!this.children) {
     this.children = []
   }

src/VueTreeList.vue

@@ -42,18 +42,18 @@
               <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">
             <slot name="addLeafNode">
               <i class="vtl-icon vtl-icon-plus"></i>
             </slot>
           </span>
           <span title="edit" @click.stop.prevent="setEditable">
-            <slot name="edit">
+            <slot name="editNode">
               <i class="vtl-icon vtl-icon-edit"></i>
             </slot>
           </span>
           <span title="delete" @click.stop.prevent="delNode">
-            <slot name="edit">
+            <slot name="delNode">
               <i class="vtl-icon vtl-icon-trash"></i>
             </slot>
           </span>
@@ -76,6 +76,10 @@
         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>
@@ -110,10 +114,6 @@
         type: String,
         default: 'New tree node'
       },
-      onDeleteNode: {
-        type: Function,
-        default: confirm => { confirm() }
-      },
       defaultExpanded: {
         type: Boolean,
         default: true
@@ -171,9 +171,6 @@
       },
 
       delNode () {
-        const vm = this
-        const confirm = () => vm.model.remove()
-        this.onDeleteNode(confirm)
         var node = this.getRootNode()
         node.$emit('delete-node', this.model)
       },