chore: 🤖 move core-js & vue to devDependencies

feat: 🎸 #47

.github/workflows/test.yml

@@ -0,0 +1,15 @@
+name: Test
+
+on: [pull_request, push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: npm install, lint and test
+        run: |
+          npm install
+          npm run lint
+          npm run test:coverage

.gitignore

@@ -19,3 +19,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+coverage

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 ayou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dev/App.vue

@@ -12,18 +12,33 @@
       :model="data"
       default-tree-node-name="new node"
       default-leaf-node-name="new leaf"
-          v-bind:default-expanded="false">
-          <span class="icon" slot="addTreeNodeIcon">📂</span>
-          <span class="icon" slot="addLeafNodeIcon">＋</span>
-          <span class="icon" slot="editNodeIcon">📃</span>
-          <span class="icon" slot="delNodeIcon">✂️</span>
-          <span class="icon" slot="leafNodeIcon">🍃</span>
-          <span class="icon" slot="treeNodeIcon">🌲</span>
+      v-bind:default-expanded="false"
+    >
+      <template v-slot:addTreeNodeIcon="slotProps">
+        <span class="icon">📂</span>
+      </template>
+      <template v-slot:addLeafNodeIcon="slotProps">
+        <span class="icon">＋</span>
+      </template>
+      <template v-slot:editNodeIcon="slotProps">
+        <span class="icon">📃</span>
+      </template>
+      <template v-slot:delNodeIcon="slotProps">
+        <span class="icon">✂️</span>
+      </template>
+      <template v-slot:leafNodeIcon="slotProps">
+        <span class="icon">🍃</span>
+      </template>
+      <template v-slot:treeNodeIcon="slotProps">
+        <span class="icon">
+          {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
+      </template>
     </vue-tree-list>
     <button @click="getNewTree">Get new tree</button>
     <pre>
           {{ newTree }}
-        </pre>
+        </pre
+    >
   </div>
 </template>
 <script>
@@ -70,31 +85,38 @@
   },
   methods: {
     onDel(node) {
+      // eslint-disable-next-line no-console
       console.log(node)
       node.remove()
     },
 
     onChangeName(params) {
+      // eslint-disable-next-line no-console
       console.log(params)
     },
 
     onAddNode(params) {
+      // eslint-disable-next-line no-console
       console.log(params)
     },
 
     onClick(params) {
+      // eslint-disable-next-line no-console
       console.log(params)
     },
 
     drop: function({node, src, target}) {
+      // eslint-disable-next-line no-console
       console.log('drop', node, src, target)
     },
 
     dropBefore: function({node, src, target}) {
+      // eslint-disable-next-line no-console
       console.log('drop-before', node, src, target)
     },
 
     dropAfter: function({node, src, target}) {
+      // eslint-disable-next-line no-console
       console.log('drop-after', node, src, target)
     },
 

jest.config.js

@@ -1,4 +1,6 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
-  snapshotSerializers: ["jest-serializer-vue"]
-};
+  preset: '@vue/cli-plugin-unit-jest',
+  snapshotSerializers: ['jest-serializer-vue'],
+  collectCoverageFrom: ['src/**/*.{js,vue}'],
+  coveragePathIgnorePatterns: ['src/index.js']
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4041,7 +4041,8 @@
     "core-js": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.1.tgz",
-      "integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ=="
+      "integrity": "sha512-186WjSik2iTGfDjfdCZAxv2ormxtKgemjC3SI6PL31qOA0j5LhTDVjHChccoc7brwLvpvLPiMyRlcO88C4l1QQ==",
+      "dev": true
     },
     "core-js-compat": {
       "version": "3.6.1",
@@ -13012,7 +13013,8 @@
     "vue": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
-      "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
+      "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
+      "dev": true
     },
     "vue-eslint-parser": {
       "version": "5.0.0",

package.json

@@ -1,21 +1,19 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "author": "ayou",
   "scripts": {
     "serve": "vue-cli-service serve dev",
     "build": "vue-cli-service build --target lib src/index.js",
-    "test:unit": "vue-cli-service test:unit",
+    "test:unit": "vue-cli-service test:unit --watch",
+    "test:coverage": "vue-cli-service test:unit --coverage",
     "lint": "vue-cli-service lint",
     "commit": "npx git-cz",
     "prepublish": "npm run build"
   },
   "main": "dist/vue-tree-list.umd.min.js",
-  "dependencies": {
-    "core-js": "^3.4.3",
-    "vue": "^2.6.10"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
@@ -23,11 +21,13 @@
     "@vue/cli-service": "^4.1.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
+    "core-js": "^3.4.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "jest-serializer-vue": "^2.0.2",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

readme.md

@@ -1,3 +1,5 @@
+[![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions)
+
 # vue-tree-list
 A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
 
@@ -5,6 +7,19 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 
 [Live Demo](http://paradeto.com/vue-tree-list/)
 
+# install
+
+Install the plugin then you can use the component globally.
+
+```js
+import Vue from 'vue'
+import VueTreeList from 'vue-tree-list'
+
+Vue.use(VueTreeList)
+```
+
+Or just register locally like the example below.
+
 # use
 ``npm install vue-tree-list``
 
@@ -197,13 +212,26 @@ drop-before | {node, src, target} | Trigger after dropping a node before another
 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 `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them:
+The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below:
 
 ```html
-      <span class="icon" slot="addTreeNodeIcon">📂</span>
-      <span class="icon" slot="addLeafNodeIcon">＋</span>
-      <span class="icon" slot="editNodeIcon">📃</span>
-      <span class="icon" slot="delNodeIcon">✂️</span>
-      <span class="icon" slot="leafNodeIcon">🍃</span>
-      <span class="icon" slot="treeNodeIcon">🌲</span>
+<template v-slot:addTreeNodeIcon="slotProps">
+  <span class="icon">📂</span>
+</template>
+<template v-slot:addLeafNodeIcon="slotProps">
+  <span class="icon">＋</span>
+</template>
+<template v-slot:editNodeIcon="slotProps">
+  <span class="icon">📃</span>
+</template>
+<template v-slot:delNodeIcon="slotProps">
+  <span class="icon">✂️</span>
+</template>
+<template v-slot:leafNodeIcon="slotProps">
+  <span class="icon">🍃</span>
+</template>
+<template v-slot:treeNodeIcon="slotProps">
+  <span class="icon">
+    {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
+</template>
 ```

src/Tree.js

@@ -1,3 +1,4 @@
+import {traverseTree} from './tools'
 /**
  * Tree data struct
  * Created by ayou on 2017/7/20.
@@ -8,9 +9,10 @@
  *   dragDisabled: decide if it can be dragged
  *   disabled: desabled all operation
  */
-const TreeNode = function (data) {
+export class TreeNode {
+  constructor(data) {
     const {id, isLeaf} = data
-  this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
+    this.id = typeof id === 'undefined' ? new Date().valueOf() : id
     this.parent = null
     this.children = null
     this.isLeaf = !!isLeaf
@@ -23,11 +25,11 @@ const TreeNode = function (data) {
     }
   }
 
-TreeNode.prototype.changeName = function (name) {
+  changeName(name) {
     this.name = name
   }
 
-TreeNode.prototype.addChildren = function (children) {
+  addChildren(children) {
     if (!this.children) {
       this.children = []
     }
@@ -48,14 +50,14 @@ TreeNode.prototype.addChildren = function (children) {
   }
 
   // remove self
-TreeNode.prototype.remove = function () {
+  remove() {
     const parent = this.parent
     const index = parent.findChildIndex(this)
     parent.children.splice(index, 1)
   }
 
   // remove child
-TreeNode.prototype._removeChild = function (child) {
+  _removeChild(child) {
     for (var i = 0, len = this.children.length; i < len; i++) {
       if (this.children[i] === child) {
         this.children.splice(i, 1)
@@ -64,7 +66,7 @@ TreeNode.prototype._removeChild = function (child) {
     }
   }
 
-TreeNode.prototype.isTargetChild = function (target) {
+  isTargetChild(target) {
     let parent = target.parent
     while (parent) {
       if (parent === this) {
@@ -75,7 +77,7 @@ TreeNode.prototype.isTargetChild = function (target) {
     return false
   }
 
-TreeNode.prototype.moveInto = function (target) {
+  moveInto(target) {
     if (this.name === 'root' || this === target) {
       return
     }
@@ -99,7 +101,7 @@ TreeNode.prototype.moveInto = function (target) {
     target.children.unshift(this)
   }
 
-TreeNode.prototype.findChildIndex = function (child) {
+  findChildIndex(child) {
     var index
     for (let i = 0, len = this.children.length; i < len; i++) {
       if (this.children[i] === child) {
@@ -110,12 +112,12 @@ TreeNode.prototype.findChildIndex = function (child) {
     return index
   }
 
-TreeNode.prototype._beforeInsert = function (target) {
+  _canInsert(target) {
     if (this.name === 'root' || this === target) {
       return false
     }
 
-  // cannot move ancestor to child
+    // cannot insert ancestor to child
     if (this.isTargetChild(target)) {
       return false
     }
@@ -126,27 +128,33 @@ TreeNode.prototype._beforeInsert = function (target) {
     return true
   }
 
-TreeNode.prototype.insertBefore = function (target) {
-  if (!this._beforeInsert(target)) return
+  insertBefore(target) {
+    if (!this._canInsert(target)) return
 
     const pos = target.parent.findChildIndex(target)
     target.parent.children.splice(pos, 0, this)
   }
 
-TreeNode.prototype.insertAfter = function (target) {
-  if (!this._beforeInsert(target)) return
+  insertAfter(target) {
+    if (!this._canInsert(target)) return
 
     const pos = target.parent.findChildIndex(target)
     target.parent.children.splice(pos + 1, 0, this)
   }
 
-function Tree (data) {
+  toString() {
+    return JSON.stringify(traverseTree(this))
+  }
+}
+
+export class Tree {
+  constructor(data) {
     this.root = new TreeNode({name: 'root', isLeaf: false, id: 0})
     this.initNode(this.root, data)
     return this.root
   }
 
-Tree.prototype.initNode = function (node, data) {
+  initNode(node, data) {
     for (let i = 0, len = data.length; i < len; i++) {
       var _data = data[i]
 
@@ -157,6 +165,4 @@ Tree.prototype.initNode = function (node, data) {
       node.addChildren(child)
     }
   }
-
-exports.Tree = Tree
-exports.TreeNode = TreeNode
+}

src/VueTreeList.vue

@@ -1,33 +1,60 @@
 <template>
-  <div class='vtl'>
-    <div v-if="model.name !== 'root'">
-      <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
+  <div class="vtl">
+    <div
+      v-if="model.name !== 'root'"
+      :id="model.id"
+      class="vtl-node"
+      :class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': !model.isLeaf}"
+    >
+      <div
+        class="vtl-border vtl-up"
+        :class="{'vtl-active': isDragEnterUp}"
         @drop="dropBefore"
         @dragenter="dragEnterUp"
-        @dragover='dragOverUp'
-        @dragleave="dragLeaveUp"></div>
-      <div :id='model.id' :class="treeNodeClass"
+        @dragover="dragOverUp"
+        @dragleave="dragLeaveUp"
+      />
+      <div
+        :class="treeNodeClass"
         :draggable="!model.dragDisabled"
-        @dragstart='dragStart'
-        @dragover='dragOver'
-        @dragenter='dragEnter'
-        @dragleave='dragLeave'
-        @drop='drop'
-        @dragend='dragEnd'
-        @mouseover='mouseOver'
-        @mouseout='mouseOut'
-        @click.stop='click'>
-        <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>
+        @dragstart="dragStart"
+        @dragover="dragOver"
+        @dragenter="dragEnter"
+        @dragleave="dragLeave"
+        @drop="drop"
+        @dragend="dragEnd"
+        @mouseover="mouseOver"
+        @mouseout="mouseOut"
+        @click.stop="click"
+      >
+        <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">
+          <slot
+            name="leafNodeIcon"
+            :expanded="expanded"
+            :model="model"
+            :root="rootNode"
+          >
             <i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
           </slot>
         </span>
         <span v-else>
-          <slot name="treeNodeIcon">
+          <slot
+            name="treeNodeIcon"
+            :expanded="expanded"
+            :model="model"
+            :root="rootNode"
+          >
             <i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
           </slot>
         </span>
@@ -35,53 +62,117 @@
         <div class="vtl-node-content" v-if="!editable">
           {{ model.name }}
         </div>
-        <input v-else class="vtl-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="vtl-operation" v-show="isHover">
-          <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
-            <slot name="addTreeNodeIcon">
+          <span
+            title="add tree node"
+            @click.stop.prevent="addChild(false)"
+            v-if="!model.isLeaf && !model.addTreeNodeDisabled"
+          >
+            <slot
+              name="addTreeNodeIcon"
+              :expanded="expanded"
+              :model="model"
+              :root="rootNode"
+            >
               <i class="vtl-icon vtl-icon-folder-plus-e"></i>
             </slot>
           </span>
-          <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
-            <slot name="addLeafNodeIcon">
+          <span
+            title="add leaf node"
+            @click.stop.prevent="addChild(true)"
+            v-if="!model.isLeaf && !model.addLeafNodeDisabled"
+          >
+            <slot
+              name="addLeafNodeIcon"
+              :expanded="expanded"
+              :model="model"
+              :root="rootNode"
+            >
               <i class="vtl-icon vtl-icon-plus"></i>
             </slot>
           </span>
-          <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
-            <slot name="editNodeIcon">
+          <span
+            title="edit"
+            @click.stop.prevent="setEditable"
+            v-if="!model.editNodeDisabled"
+          >
+            <slot
+              name="editNodeIcon"
+              :expanded="expanded"
+              :model="model"
+              :root="rootNode"
+            >
               <i class="vtl-icon vtl-icon-edit"></i>
             </slot>
           </span>
-          <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
-            <slot name="delNodeIcon">
+          <span
+            title="delete"
+            @click.stop.prevent="delNode"
+            v-if="!model.delNodeDisabled"
+          >
+            <slot
+              name="delNodeIcon"
+              :expanded="expanded"
+              :model="model"
+              :root="rootNode"
+            >
               <i class="vtl-icon vtl-icon-trash"></i>
             </slot>
           </span>
         </div>
       </div>
 
-      <div v-if="model.children && model.children.length > 0 && expanded"
+      <div
+        v-if="model.children && model.children.length > 0 && expanded"
         class="vtl-border vtl-bottom"
         :class="{'vtl-active': isDragEnterBottom}"
         @drop="dropAfter"
         @dragenter="dragEnterBottom"
-        @dragover='dragOverBottom'
-        @dragleave="dragLeaveBottom"></div>
+        @dragover="dragOverBottom"
+        @dragleave="dragLeaveBottom"
+      ></div>
     </div>
 
-    <div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="model.name === 'root' || expanded" v-if="isFolder">
-      <item v-for="model in model.children"
+    <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"
+        :default-expanded="defaultExpanded"
         :model="model"
-        :key='model.id'>
-          <slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
-          <slot name="addLeafNodeIcon" slot="addLeafNodeIcon" />
-          <slot name="editNodeIcon" slot="editNodeIcon" />
-          <slot name="delNodeIcon" slot="delNodeIcon" />
-          <slot name="leafNodeIcon" slot="leafNodeIcon" />
-          <slot name="treeNodeIcon" slot="treeNodeIcon" />
+        :key="model.id"
+      >
+        <template v-slot:addTreeNodeIcon="slotProps">
+          <slot name="addTreeNodeIcon" v-bind="slotProps" />
+        </template>
+        <template v-slot:addLeafNodeIcon="slotProps">
+          <slot name="addLeafNodeIcon" v-bind="slotProps" />
+        </template>
+        <template v-slot:editNodeIcon="slotProps">
+          <slot name="editNodeIcon" v-bind="slotProps" />
+        </template>
+        <template v-slot:delNodeIcon="slotProps">
+          <slot name="delNodeIcon" v-bind="slotProps" />
+        </template>
+        <template v-slot:leafNodeIcon="slotProps">
+          <slot name="leafNodeIcon" v-bind="slotProps" />
+        </template>
+        <template v-slot:treeNodeIcon="slotProps">
+          <slot name="treeNodeIcon" v-bind="slotProps" />
+        </template>
       </item>
     </div>
   </div>
@@ -94,6 +185,7 @@
 let compInOperation = null
 
 export default {
+  name: 'vue-tree-list',
   data: function() {
     return {
       isHover: false,
@@ -122,8 +214,12 @@
     }
   },
   computed: {
-      itemIconClass () {
-        return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
+    rootNode() {
+      var node = this.$parent
+      while (node._props.model.name !== 'root') {
+        node = node.$parent
+      }
+      return node
     },
 
     caretClass() {
@@ -131,21 +227,17 @@
     },
 
     isFolder() {
-        return this.model.children &&
-          this.model.children.length
+      return this.model.children && this.model.children.length
     },
 
     treeNodeClass() {
       const {
-          model: {
-            dragDisabled,
-            disabled
-          },
+        model: {dragDisabled, disabled},
         isDragEnterNode
       } = this
 
       return {
-          'vtl-tree-node': true,
+        'vtl-node-main': true,
         'vtl-active': isDragEnterNode,
         'vtl-drag-disabled': dragDisabled,
         'vtl-disabled': disabled
@@ -169,15 +261,17 @@
   },
   methods: {
     updateName(e) {
-        var oldName = this.model.name;
+      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})
+      this.rootNode.$emit('change-name', {
+        id: this.model.id,
+        oldName: oldName,
+        newName: e.target.value
+      })
     },
 
     delNode() {
-        var node = this.getRootNode()
-        node.$emit('delete-node', this.model)
+      this.rootNode.$emit('delete-node', this.model)
     },
 
     setEditable() {
@@ -209,8 +303,7 @@
     },
 
     click() {
-        var node = this.getRootNode()
-        node.$emit('click', this.model);
+      this.rootNode.$emit('click', this.model)
     },
 
     addChild(isLeaf) {
@@ -218,15 +311,14 @@
       this.expanded = true
       var node = new TreeNode({name, isLeaf})
       this.model.addChildren(node, true)
-        var root = this.getRootNode();
-        root.$emit('add-node', node)
+      this.rootNode.$emit('add-node', node)
     },
 
     dragStart(e) {
       if (!(this.model.dragDisabled || this.model.disabled)) {
         compInOperation = this
         // for firefox
-          e.dataTransfer.setData("data","data");
+        e.dataTransfer.setData('data', 'data')
         e.dataTransfer.effectAllowed = 'move'
         return true
       }
@@ -249,11 +341,14 @@
     },
     drop() {
       if (!compInOperation) return
-        const oldParent = compInOperation.model.parent;
+      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})
+      this.rootNode.$emit('drop', {
+        target: this.model,
+        node: compInOperation.model,
+        src: oldParent
+      })
     },
 
     dragEnterUp() {
@@ -270,11 +365,14 @@
     },
     dropBefore() {
       if (!compInOperation) return
-        const oldParent = compInOperation.model.parent;
+      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})
+      this.rootNode.$emit('drop-before', {
+        target: this.model,
+        node: compInOperation.model,
+        src: oldParent
+      })
     },
 
     dragEnterBottom() {
@@ -291,18 +389,14 @@
     },
     dropAfter() {
       if (!compInOperation) return
-        const oldParent = compInOperation.model.parent;
+      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;
+      this.rootNode.$emit('drop-after', {
+        target: this.model,
+        node: compInOperation.model,
+        src: oldParent
+      })
     }
   }
 }
@@ -345,31 +439,30 @@
 }
 
 .vtl-icon-file:before {
-    content: "\e906";
+  content: '\e906';
 }
 .vtl-icon-folder:before {
-    content: "\e907";
+  content: '\e907';
 }
 .vtl-icon-caret-down:before {
-    content: "\e901";
+  content: '\e901';
 }
 .vtl-icon-caret-right:before {
-    content: "\e900";
+  content: '\e900';
 }
 .vtl-icon-edit:before {
-    content: "\e902";
+  content: '\e902';
 }
 .vtl-icon-folder-plus-e:before {
-    content: "\e903";
+  content: '\e903';
 }
 .vtl-icon-plus:before {
-    content: "\e904";
+  content: '\e904';
 }
 .vtl-icon-trash:before {
-    content: "\e905";
+  content: '\e905';
 }
 
-
 .vtl-border {
   height: 5px;
   &.vtl-up {
@@ -385,7 +478,7 @@
   }
 }
 
-  .vtl-tree-node {
+.vtl-node-main {
   display: flex;
   align-items: center;
   padding: 5px 0 5px 1rem;
@@ -409,7 +502,6 @@
   }
 }
 
-
 .vtl-item {
   cursor: pointer;
 }

src/index.js

@@ -5,4 +5,9 @@
 import VueTreeList from "./VueTreeList";
 import { Tree, TreeNode } from "./Tree";
 
+VueTreeList.install = Vue => {
+  Vue.component(VueTreeList.name, VueTreeList);
+};
+
+export default VueTreeList;
 export { Tree, TreeNode, VueTreeList };

src/tools.js

@@ -4,7 +4,7 @@
 
 var handlerCache
 
-exports.addHandler = function (element, type, handler) {
+export const addHandler = function (element, type, handler) {
   handlerCache = handler
   if (element.addEventListener) {
     element.addEventListener(type, handler, false)
@@ -15,7 +15,7 @@ exports.addHandler = function (element, type, handler) {
   }
 }
 
-exports.removeHandler = function (element, type) {
+export const removeHandler = function (element, type) {
   if (element.removeEventListener) {
     element.removeEventListener(type, handlerCache, false)
   } else if (element.detachEvent) {
@@ -25,7 +25,21 @@ exports.removeHandler = function (element, type) {
   }
 }
 
-// exports.fireFocusEvent = function (ele) {
-//   var event = new FocusEvent()
-//   ele.dispatch(event)
-// }
+// depth first search
+export const traverseTree = (root) => {
+  var newRoot = {}
+
+  for (var k in root) {
+    if (k !== 'children' && k !== 'parent') {
+      newRoot[k] = root[k]
+    }
+  }
+
+  if (root.children && root.children.length > 0) {
+    newRoot.children = []
+    for (var i = 0, len = root.children.length; i < len; i++) {
+      newRoot.children.push(traverseTree(root.children[i]))
+    }
+  }
+  return newRoot
+}

tests/unit/__snapshots__/render.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VueTreeList renders correctly 1`] = `
+exports[`Render render correctly 1`] = `
 <div class="vtl">
   <!---->
   <div class="">
     <div class="vtl">
-      <div>
+      <div id="1" class="vtl-node vtl-tree-node">
         <div class="vtl-border vtl-up"></div>
-        <div id="1" draggable="false" class="vtl-tree-node vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
+        <div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
           <div class="vtl-node-content">
             Node 1
           </div>
@@ -22,9 +22,9 @@ exports[`VueTreeList renders correctly 1`] = `
       </div>
       <div class="vtl-tree-margin" style="display: none;">
         <div class="vtl">
-          <div>
+          <div id="2" class="vtl-node vtl-leaf-node">
             <div class="vtl-border vtl-up"></div>
-            <div id="2" draggable="true" class="vtl-tree-node">
+            <div draggable="true" class="vtl-node-main">
               <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
               <div class="vtl-node-content">
                 Node 1-2
@@ -40,9 +40,9 @@ exports[`VueTreeList renders correctly 1`] = `
       </div>
     </div>
     <div class="vtl">
-      <div>
+      <div id="3" class="vtl-node vtl-tree-node">
         <div class="vtl-border vtl-up"></div>
-        <div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
+        <div draggable="true" class="vtl-node-main vtl-disabled">
           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
           <div class="vtl-node-content">
             Node 2
@@ -54,9 +54,9 @@ exports[`VueTreeList renders correctly 1`] = `
       <!---->
     </div>
     <div class="vtl">
-      <div>
+      <div id="4" class="vtl-node vtl-tree-node">
         <div class="vtl-border vtl-up"></div>
-        <div id="4" draggable="true" class="vtl-tree-node">
+        <div draggable="true" class="vtl-node-main">
           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
           <div class="vtl-node-content">
             Node 3

tests/unit/__snapshots__/slot.spec.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slot render slot correctly 1`] = `
+<div class="vtl">
+  <!---->
+  <div class="">
+    <div class="vtl">
+      <div id="t1" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-down"></i></span> <span><span class="tree-node-icon icon">❀</span></span>
+          <div class="vtl-node-content">
+            Node 1
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span></span></span></div>
+        </div>
+        <div class="vtl-border vtl-bottom"></div>
+      </div>
+      <div class="vtl-tree-margin">
+        <div class="vtl">
+          <div id="t11" class="vtl-node vtl-leaf-node">
+            <div class="vtl-border vtl-up"></div>
+            <div draggable="true" class="vtl-node-main">
+              <!----> <span><span class="icon">🍃</span></span>
+              <div class="vtl-node-content">
+                Node 1-1
+              </div>
+              <div class="vtl-operation" style="display: none;">
+                <!---->
+                <!----> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
+            </div>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <div class="vtl">
+      <div id="t2" class="vtl-node vtl-tree-node">
+        <div class="vtl-border vtl-up"></div>
+        <div draggable="true" class="vtl-node-main">
+          <!----> <span><span class="tree-node-icon icon">❀</span></span>
+          <div class="vtl-node-content">
+            Node 2
+          </div>
+          <div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
+        </div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+</div>
+`;

tests/unit/drag.spec.js

@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
+
+describe('Drag', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const tree = new Tree([
+      {
+        name: 'Node 1',
+        id: 't1',
+        pid: 0,
+        children: [
+          {
+            name: 'Node 1-1',
+            id: 't11',
+            isLeaf: true,
+            pid: 't1'
+          },
+          {
+            name: 'Node 1-2',
+            id: 't12',
+            pid: 't1'
+          }
+        ]
+      },
+      {
+        name: 'Node 2',
+        id: 't2',
+        pid: 0
+      },
+      {
+        name: 'Node 3',
+        id: 't3',
+        pid: 0
+      }
+    ])
+    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
+    wrapper.setProps({model: tree})
+  })
+
+  it('drag before', done => {
+    const $tree2 = wrapper.find('#t2 .vtl-node-main')
+    const $tree1Up = wrapper.find('#t1 .vtl-up')
+    $tree2.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Up.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
+      done()
+    })
+  })
+
+  it('drag after', done => {
+    const $tree3 = wrapper.find('#t3 .vtl-node-main')
+    const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
+    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Bottom.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-tree-node').at(2).attributes('id')).toBe('t3')
+      done()
+    })
+  })
+
+  it('drag into', done => {
+    const $tree3 = wrapper.find('#t3 .vtl-node-main')
+    const $tree1 = wrapper.find('#t1 .vtl-node-main')
+    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
+      done()
+    })
+  })
+
+  it('cannot drag ancestor into child', done => {
+    const snapshot = wrapper.html()
+    const $tree1 = wrapper.find('#t1 .vtl-node-main')
+    const $tree1Child = wrapper.find('#t12 .vtl-node-main')
+    $tree1.trigger('dragstart', { dataTransfer: { setData: () => {} }})
+    $tree1Child.trigger('drop')
+    Vue.nextTick(() => {
+      expect(wrapper.html()).toBe(snapshot)
+      done()
+    })
+  })
+})

tests/unit/operation.spec.js

@@ -0,0 +1,86 @@
+import Vue from 'vue'
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
+
+describe('Operation', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const tree = new Tree([
+      {
+        name: 'Node 1',
+        id: 't1',
+        pid: 0,
+        children: [
+          {
+            name: 'Node 1-1',
+            id: 't11',
+            isLeaf: true,
+            pid: 't1'
+          }
+        ]
+      },
+      {
+        name: 'Node 2',
+        id: 't2',
+        pid: 0
+      }
+    ])
+    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
+    wrapper.setProps({model: tree})
+  })
+
+  it('delete leaf node', done => {
+    const $node11Trash = wrapper.find('#t11 [title="delete"]')
+    $node11Trash.trigger('click')
+    wrapper.emitted('delete-node')[0][0].remove()
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-node').length).toBe(2)
+      done()
+    })
+  })
+
+  it('delete tree node', done => {
+    const $node11Trash = wrapper.find('#t1 [title="delete"]')
+    $node11Trash.trigger('click')
+    wrapper.emitted('delete-node')[0][0].remove()
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-node').length).toBe(1)
+      done()
+    })
+  })
+
+  it('add leaf node', done => {
+    const $node1AddLeafNode = wrapper.find('#t1 [title="add leaf node"]')
+    $node1AddLeafNode.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
+      done()
+    })
+  })
+
+  it('add tree node', done => {
+    const $node1AddTreeNode = wrapper.find('#t1 [title="add tree node"]')
+    $node1AddTreeNode.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)
+      done()
+    })
+  })
+
+  it('change node name', done => {
+    const $node1Edit = wrapper.find('#t1 [title="edit"]')
+    $node1Edit.trigger('click')
+    Vue.nextTick(() => {
+      const $input = wrapper.find('#t1 .vtl-input')
+      $input.element.value = 'New Node 1'
+      $input.trigger('input')
+      var event = new KeyboardEvent('keyup', {keyCode: 13})
+      window.dispatchEvent(event)
+      Vue.nextTick(() => {
+        expect(wrapper.find('#t1').text()).toBe('New Node 1')
+        done()
+      })
+    })
+  })
+})

tests/unit/render.spec.js

@@ -1,11 +1,11 @@
-import { mount } from "@vue/test-utils";
-import { Tree, VueTreeList } from "@/index";
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
 
-describe("VueTreeList", () => {
-  it("renders correctly", () => {
+describe('Render', () => {
+  it('render correctly', () => {
     const tree = new Tree([
       {
-        name: "Node 1",
+        name: 'Node 1',
         id: 1,
         pid: 0,
         dragDisabled: true,
@@ -15,7 +15,7 @@ describe("VueTreeList", () => {
         delNodeDisabled: true,
         children: [
           {
-            name: "Node 1-2",
+            name: 'Node 1-2',
             id: 2,
             isLeaf: true,
             pid: 1
@@ -23,27 +23,27 @@ describe("VueTreeList", () => {
         ]
       },
       {
-        name: "Node 2",
+        name: 'Node 2',
         id: 3,
         pid: 0,
         disabled: true
       },
       {
-        name: "Node 3",
+        name: 'Node 3',
         id: 4,
         pid: 0
       }
-    ]);
+    ])
 
     const wrapper = mount(VueTreeList, {
       propsData: {
         model: tree,
-        defaultTreeNodeName: "new node",
-        defaultLeafNodeName: "new leaf",
+        defaultTreeNodeName: 'new node',
+        defaultLeafNodeName: 'new leaf',
         defaultExpanded: false
       }
-    });
+    })
 
-    expect(wrapper).toMatchSnapshot();
-  });
-});
+    expect(wrapper).toMatchSnapshot()
+  })
+})

tests/unit/slot.spec.js

@@ -0,0 +1,79 @@
+import Vue from 'vue'
+import {mount} from '@vue/test-utils'
+import {Tree, VueTreeList} from '@/index'
+
+describe('Slot', () => {
+  let wrapper
+
+  beforeEach(() => {
+    const tree = new Tree([
+      {
+        name: 'Node 1',
+        id: 't1',
+        pid: 0,
+        children: [
+          {
+            name: 'Node 1-1',
+            id: 't11',
+            isLeaf: true,
+            pid: 't1'
+          }
+        ]
+      },
+      {
+        name: 'Node 2',
+        id: 't2',
+        pid: 0
+      }
+    ])
+    wrapper = mount(VueTreeList, {
+      propsData: {model: new Tree([])},
+      scopedSlots: {
+        addTreeNodeIcon() {
+          return <span class="add-tree-node-icon">📂</span>
+        },
+        addLeafNodeIcon() {
+          return <span class="icon">＋</span>
+        },
+        editNodeIcon() {
+          return <span class="icon">📃</span>
+        },
+        delNodeIcon(slotProps) {
+          return (slotProps.model.isLeaf || !slotProps.model.children) ? <span class="del-node-icon">✂️</span> : <span />
+        },
+        leafNodeIcon() {
+          return <span class="icon">🍃</span>
+        },
+        treeNodeIcon(slotProps) {
+          return <span class="tree-node-icon icon">{ slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded ? '🌲' : '❀' }</span>
+        }
+      }
+    })
+    wrapper.setProps({model: tree})
+  })
+
+  it('render slot correctly', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('toggle tree node show different icon', done => {
+    const $caretDown = wrapper.find('.vtl-icon-caret-down')
+    expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('❀')
+    $caretDown.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.exists('.vtl-icon-caret-right')).toBe(true)
+      expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('🌲')
+      done()
+    })
+  })
+
+  it('dont show ✂️ after add child ', done => {
+    const $addTreeNodeIcon = wrapper.find('#t2 .add-tree-node-icon')
+    expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(true)
+    $addTreeNodeIcon.trigger('click')
+    Vue.nextTick(() => {
+      expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(false)
+      done()
+    })
+  })
+})