merge

.gitignore

@@ -58,3 +58,5 @@ typings/
 .env
 
 dist
+
+package-lock.json

demo/pages/custom.html

@@ -50,7 +50,7 @@
             Font ionicons. (http://ionicons.com). Implementing Filesystem.
           </div>
           <div class="example-tree">
-            <tree :data="treeData0" >
+            <tree :data="treeData0" ref="tree" @tree:mounted="treeMounted">
               <span class="tree-text" slot-scope="{ node }">
                 <template v-if="!node.hasChildren()">
                   <i class="ion-android-star"></i>
@@ -100,7 +100,13 @@
 
             node.addChild('New child')
             node.expand()
+          },
+          treeMounted() {
+            console.log(this.$refs.tree.find({ data: { text: 'User 1' }}))
           }
+        },
+
+        mounted() {
         }
       })
 

demo/pages/dnd.html

@@ -90,7 +90,7 @@
                 return destinationNode.data.isNotDroppable !== true
               },
               onDragFinish(targetNode, destinationNode, dropPosition) {
-                console.log('onDragFinish', targetNode.text, destinationNode.text, dropPosition)
+                console.log('onDragFinish', `Target: ${targetNode.text}`, `Destination: ${destinationNode.text}`, dropPosition)
                 return destinationNode.data.isNotDroppable !== true
               }
             },

demo/pages/editing.html

@@ -66,8 +66,8 @@
           	console.log('Start editing: ' + node.text)
           })
 
-        	this.$refs.tree.$on('node:editing:stop', (node, isTextChanged) => {
-          	console.log('Stop editing: ' + node.text + ', ' + isTextChanged)
+        	this.$refs.tree.$on('node:editing:stop', (node, prevNodeText) => {
+          	console.log('Stop editing: ' + node.text + ', ' + prevNodeText)
           })
         }
       })

docs/hexo/source/index.md

@@ -486,6 +486,14 @@ Example:
 Now there is only basic functionality of DND includes events (`dragging:start`, `dragging:finish`). Just add `dnd` property to the tree options.
 To more details see the [Issue](https://github.com/amsik/liquor-tree/issues/55) 
 
+**Events and parameters**:
+- `dragging:start`: 
+  - `node`: A `Node`, the node that is dragging
+- `dragging:finish`:
+  - `targetNode`: A `Node`, the node that was dragged
+  - `destinationNode`: A `Node`, where the target node has been dragged
+  - `position`: A `String`, can be `drag-on`, `drag-below`, or `drag-above`
+
 <iframe width="100%" height="500" src="//jsfiddle.net/amsik/h1z2n05k/embedded/html,result/dark/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 
@@ -667,6 +675,41 @@ This method is "syntactic sugar" of `Tree.find(criteria, true)`
   Remove Node by criteria.
 
 
+#### [Tree.updateData(criteria, callback)](#Tree-remove-criteria-multiple)
+
+- **Arguments:**
+  - `{ Object | String } criteria` (see [find method](#Tree-find-criteria-multiple-false))
+  - `{ Function } callback`
+
+- **Returns:**
+  - [Selection](#Selection-API)
+
+- **Usage:**
+
+  This method updates the `data` object in a given node. It is an extension of `find` method but with a slight twist. 
+  The first argument is a criteria while the second is a callback which should return a Node.
+```javascript
+  this.$refs.tree.updateData('Node Text', node => ({
+    description: `ID of this node: ${node.id}`
+  }));
+```
+  Under the hood, there is also a `forEach` which gives you the ability to do something like this:
+```javascript
+  this.$refs.tree.updateData('Node Text', node => {
+    if (node.data.someData) {
+      return {
+        ...node.data,
+        isBoolean: true
+      }
+    }
+
+    return {
+      ...node.data,
+      greeting: 'Hello World'
+    }
+  });
+```
+
 ### Selection API
 
 This array-like object has all array methods (forEach, map and so on) because it inherits `Array` object. This collection has very similar behaviour with jQuery. __All actions apply to all items in the collection.__ I'm going to show one example in more details and other methods have similar logic.
@@ -842,4 +885,4 @@ Examples:
 
 This example shows every possible event for the tree.
 
-<iframe width="100%" height="500" src="//jsfiddle.net/amsik/cuseo1j7/embedded/js,html,css,result/dark/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="500" src="//jsfiddle.net/amsik/cuseo1j7/embedded/js,html,css,result/dark/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "liquor-tree",
   "description": "A Vue.js tree component.",
-  "version": "0.2.60",
+  "version": "0.2.67",
   "author": "Kostiantyn <[email protected]>",
   "library": "LiquorTree",
   "homepage": "https://amsik.github.io/liquor-tree/",
@@ -57,6 +57,7 @@
     "vue-template-compiler": "^2.5.17"
   },
   "jest": {
+    "setupFiles": ["./test/setupTests.js"],
     "moduleFileExtensions": [
       "js",
       "vue"

src/lib/Node.js

@@ -81,10 +81,10 @@ export default class Node {
     }
   }
 
-  setData (data = {}) {
+  setData (data) {
     this.data = Object.assign({}, this.data, data);
 
-    this.$emit('updated', this.data);
+    this.$emit('data:changed', this.data);
 
     return this.data;
   }
@@ -326,7 +326,7 @@ export default class Node {
       return this
     }
 
-    if (!this.tree.options.autoDisableChildren) {
+    if (this.tree.options.autoDisableChildren) {
       this.recurseDown(node => {
         if (node.disabled()) {
           node.state('disabled', false)
@@ -398,14 +398,20 @@ export default class Node {
   }
 
   canExpand () {
+    if (this.disabled() || !this.hasChildren()) {
+      return false
+    }
+
     return this.collapsed() &&
-      this.hasChildren() &&
       (!this.tree.autoDisableChildren || this.disabled())
   }
 
   canCollapse () {
+    if (this.disabled() || !this.hasChildren()) {
+      return false
+    }
+
     return this.expanded() &&
-      this.hasChildren() &&
       (!this.tree.autoDisableChildren || this.disabled())
   }
 
@@ -487,6 +493,8 @@ export default class Node {
     clone.id = this.id
     tree.__silence = true
 
+    this.remove()
+
     if (destinationPosition === 'drag-on') {
       tree.append(destination, clone)
     } else if (destinationPosition === 'drag-below') {
@@ -495,8 +503,6 @@ export default class Node {
       tree.before(destination, clone)
     }
 
-    this.remove()
-
     destination.refreshIndeterminateState()
 
     parent && parent.refreshIndeterminateState()

src/lib/Selection.js

@@ -52,4 +52,14 @@ export default class Selection extends Array {
 
     return this
   }
+
+  disable () {
+    nodeIterator(this, 'disable')
+    return this
+  }
+
+  enable () {
+    nodeIterator(this, 'enable')
+    return this
+  }
 }

src/lib/Tree.js

@@ -237,7 +237,12 @@ export default class Tree {
 
   setModel (data) {
     this.model = this.parse(data, this.options.modelParse)
-    this.vm.model = this.model
+
+    /* eslint-disable */
+    requestAnimationFrame(_ => {
+      this.vm.model = this.model
+    })
+    /* eslint-enable */
 
     /**
     * VueJS transform properties to reactives when constructor is running
@@ -672,7 +677,7 @@ export default class Tree {
     const result = find(this.model, criteria)
 
     if (!result || !result.length) {
-      return null
+      return new Selection(this, [])
     }
 
     if (multiple === true) {
@@ -682,8 +687,8 @@ export default class Tree {
     return new Selection(this, [result[0]])
   }
 
-  update (criteria, callback) {
-    let nodes = this.find(criteria);
+  updateData (criteria, callback) {
+    const nodes = this.find(criteria);
 
     nodes.forEach(node => node.setData(callback(node)));
 

src/mixins/DndMixin.js

@@ -159,8 +159,6 @@ export default {
         if (this.$$dropDestination && this.tree.isNode(this.$$dropDestination) && this.$$dropDestination.vm) {
           updateHelperClasses(this.$$dropDestination.vm.$el, null)
 
-          this.draggableNode.node.parent = this.$$dropDestination
-
           const cbResult = callDndCb(
             [this.draggableNode.node, this.$$dropDestination, dropPosition],
             this.tree.options.dnd,
@@ -169,6 +167,7 @@ export default {
 
           if (cbResult !== false && !(!this.$$dropDestination.isDropable() && dropPosition === DropPosition.ON || !dropPosition)) {
             this.draggableNode.node.finishDragging(this.$$dropDestination, dropPosition)
+            this.draggableNode.node.parent = this.$$dropDestination
           }
 
           this.$$dropDestination = null

src/mixins/TreeMixin.js

@@ -190,6 +190,10 @@ export default {
       return this.tree.expandAll()
     },
 
+    updateData (criteria, callback) {
+      return this.tree.updateData(criteria, callback);
+    },
+
     collapseAll () {
       return this.tree.collapseAll()
     },

test/setupTests.js

@@ -0,0 +1,3 @@
+global.requestAnimationFrame = function (callback) {
+  setTimeout(callback, 0)
+}