1.4.5

update: after blur emit the event for changeName

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/essential",
+    "plugin:prettier/recommended",
+    "eslint:recommended"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-console": "warn"
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
+}

.huskyrc.yml

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

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset']
 }

dev/App.vue

@@ -31,7 +31,12 @@
       </template>
       <template v-slot:treeNodeIcon="slotProps">
         <span class="icon">
-          {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
+          {{
+            slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded
+              ? '🌲'
+              : ''
+          }}</span
+        >
       </template>
     </vue-tree-list>
     <button @click="getNewTree">Get new tree</button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.2",
+  "version": "1.4.5",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "author": "ayou",
   "scripts": {
@@ -9,14 +9,12 @@
     "test:unit": "vue-cli-service test:unit --watch",
     "test:coverage": "vue-cli-service test:unit --coverage",
     "lint": "vue-cli-service lint",
+    "lint-staged": "lint-staged",
     "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",
@@ -24,38 +22,24 @@
     "@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-config-prettier": "^6.10.0",
+    "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-vue": "^5.0.0",
+    "husky": "^4.2.1",
     "jest-serializer-vue": "^2.0.2",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "lint-staged": "^10.0.4",
+    "prettier": "^1.19.1",
+    "prettier-eslint-cli": "^5.0.0",
+    "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {
-      "no-console": "warn"
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "overrides": [
-      {
-        "files": [
-          "**/__tests__/*.{j,t}s?(x)",
-          "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
-      }
+  "lint-staged": {
+    "**/*.{js,json,md,vue}": [
+      "prettier --write"
     ]
   },
   "browserslist": [

prettier.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  requirePragma: false,
+  insertPragma: false,
+  htmlWhitespaceSensitivity: 'css'
+}

readme.md

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

src/VueTreeList.vue

@@ -27,34 +27,17 @@
         @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 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"
-            :expanded="expanded"
-            :model="model"
-            :root="rootNode"
-          >
+          <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"
-            :expanded="expanded"
-            :model="model"
-            :root="rootNode"
-          >
+          <slot name="treeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
             <i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
           </slot>
         </span>
@@ -77,12 +60,7 @@
             @click.stop.prevent="addChild(false)"
             v-if="!model.isLeaf && !model.addTreeNodeDisabled"
           >
-            <slot
-              name="addTreeNodeIcon"
-              :expanded="expanded"
-              :model="model"
-              :root="rootNode"
-            >
+            <slot name="addTreeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
               <i class="vtl-icon vtl-icon-folder-plus-e"></i>
             </slot>
           </span>
@@ -91,40 +69,17 @@
             @click.stop.prevent="addChild(true)"
             v-if="!model.isLeaf && !model.addLeafNodeDisabled"
           >
-            <slot
-              name="addLeafNodeIcon"
-              :expanded="expanded"
-              :model="model"
-              :root="rootNode"
-            >
+            <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"
-              :expanded="expanded"
-              :model="model"
-              :root="rootNode"
-            >
+          <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"
-              :expanded="expanded"
-              :model="model"
-              :root="rootNode"
-            >
+          <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>
@@ -185,6 +140,7 @@ import {addHandler, removeHandler} from './tools.js'
 let compInOperation = null
 
 export default {
+  name: 'vue-tree-list',
   data: function() {
     return {
       isHover: false,
@@ -265,7 +221,8 @@ export default {
       this.rootNode.$emit('change-name', {
         id: this.model.id,
         oldName: oldName,
-        newName: e.target.value
+        newName: e.target.value,
+        node: this.model
       })
     },
 
@@ -282,8 +239,16 @@ export default {
       })
     },
 
-    setUnEditable() {
+    setUnEditable(e) {
       this.editable = false
+      var oldName = this.model.name
+      this.model.changeName(e.target.value)
+      this.rootNode.$emit('change-name', {
+        id: this.model.id,
+        oldName: oldName,
+        newName: e.target.value,
+        eventType: 'blur'
+      })
     },
 
     toggle() {
@@ -332,7 +297,8 @@ export default {
     },
     dragEnter() {
       if (!compInOperation) return
-      if (this.model.isLeaf) return
+      if (compInOperation.model.id === this.model.id || !compInOperation || this.model.isLeaf)
+        return
       this.isDragEnterNode = true
     },
     dragLeave() {

src/index.js

@@ -2,7 +2,12 @@
  * Created by ayou on 17/7/21.
  */
 
-import VueTreeList from "./VueTreeList";
-import { Tree, TreeNode } from "./Tree";
+import VueTreeList from './VueTreeList'
+import { Tree, TreeNode } from './Tree'
 
-export { Tree, TreeNode, VueTreeList };
+VueTreeList.install = Vue => {
+  Vue.component(VueTreeList.name, VueTreeList)
+}
+
+export default VueTreeList
+export { Tree, TreeNode, VueTreeList }

src/tools.js

@@ -26,7 +26,7 @@ export const removeHandler = function (element, type) {
 }
 
 // depth first search
-export const traverseTree = (root) => {
+export const traverseTree = root => {
   var newRoot = {}
 
   for (var k in root) {

tests/unit/drag.spec.js

@@ -57,7 +57,12 @@ describe('Drag', () => {
     $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
     $tree1Bottom.trigger('drop')
     Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-tree-node').at(2).attributes('id')).toBe('t3')
+      expect(
+        wrapper
+          .findAll('.vtl-tree-node')
+          .at(2)
+          .attributes('id')
+      ).toBe('t3')
       done()
     })
   })

tests/unit/slot.spec.js

@@ -30,22 +30,34 @@ describe('Slot', () => {
       propsData: { model: new Tree([]) },
       scopedSlots: {
         addTreeNodeIcon() {
-          return <span class="add-tree-node-icon">📂</span>
+          return <span class='add-tree-node-icon'>📂</span>
         },
         addLeafNodeIcon() {
-          return <span class="icon">＋</span>
+          return <span class='icon'>＋</span>
         },
         editNodeIcon() {
-          return <span class="icon">📃</span>
+          return <span class='icon'>📃</span>
         },
         delNodeIcon(slotProps) {
-          return (slotProps.model.isLeaf || !slotProps.model.children) ? <span class="del-node-icon">✂️</span> : <span />
+          return slotProps.model.isLeaf || !slotProps.model.children ? (
+            <span class='del-node-icon'>✂️</span>
+          ) : (
+            <span />
+          )
         },
         leafNodeIcon() {
-          return <span class="icon">🍃</span>
+          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>
+          return (
+            <span class='tree-node-icon icon'>
+              {slotProps.model.children &&
+              slotProps.model.children.length > 0 &&
+              !slotProps.expanded
+                ? '🌲'
+                : '❀'}
+            </span>
+          )
         }
       }
     })

vue.config.js

@@ -2,4 +2,4 @@ module.exports = {
   css: {
     extract: false
   }
-};
+}