1.4.5

update: after blur emit the event for changeName

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>
@@ -42,7 +47,7 @@
   </div>
 </template>
 <script>
-import {VueTreeList, Tree, TreeNode} from '../src'
+import { VueTreeList, Tree, TreeNode } from '../src'
 export default {
   components: {
     VueTreeList
@@ -105,23 +110,23 @@ export default {
       console.log(params)
     },
 
-    drop: function({node, src, target}) {
+    drop: function({ node, src, target }) {
       // eslint-disable-next-line no-console
       console.log('drop', node, src, target)
     },
 
-    dropBefore: function({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}) {
+    dropAfter: function({ node, src, target }) {
       // eslint-disable-next-line no-console
       console.log('drop-after', node, src, target)
     },
 
     addNode() {
-      var node = new TreeNode({name: 'new node', isLeaf: false})
+      var node = new TreeNode({ name: 'new node', isLeaf: false })
       if (!this.data.children) this.data.children = []
       this.data.addChildren(node)
     },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "author": "ayou",
   "scripts": {

src/VueTreeList.vue

@@ -221,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
       })
     },
 
@@ -238,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() {
@@ -287,6 +296,7 @@ export default {
       return true
     },
     dragEnter() {
+      if (!compInOperation) return
       if (compInOperation.model.id === this.model.id || !compInOperation || this.model.isLeaf)
         return
       this.isDragEnterNode = true