Merge branch 'master' into master

amsik · amsik · Dec 20, 2019 · Dec 11, 2019 · Dec 11, 2019 · Dec 11, 2019
commit c28ffb460583ecc5e13258abfa0440a63d6a442e
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "liquor-tree",
-  "version": "0.2.69",
   "description": "A Vue.js tree component.",
+  "version": "0.2.70",
   "author": "Kostiantyn <phlyze@gmail.com>",
   "scripts": {
     "lint": "vue-cli-service lint",

diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue
@@ -39,15 +39,13 @@
       <ul
         v-if="hasChildren() && node.states.expanded"
         class="tree-children"
-      >
-        <template v-for="child in node.children">
+        >
           <node
-            v-if="child && child.visible()"
+            v-for="child in visibleChildren"
             :key="child.id"
             :node="child"
             :options="options"
           />
-        </template>
       </ul>
     </transition>
   </li>

diff --git a/src/components/TreeRoot.vue b/src/components/TreeRoot.vue
@@ -16,24 +16,20 @@
         @dragstart="onDragStart"
       >
         <template v-if="opts.filter.plainList && matches.length > 0">
-          <template v-for="node in matches">
-            <TreeNode
-              v-if="node.visible()"
-              :key="node.id"
-              :node="node"
-              :options="opts"
-            />
-          </template>
+          <TreeNode
+            v-for="node in visibleMatches"
+            :key="node.id"
+            :node="node"
+            :options="opts"
+          />
         </template>
         <template v-else>
-          <template v-for="node in model">
-            <TreeNode
-              v-if="node && node.visible()"
-              :key="node.id"
-              :node="node"
-              :options="opts"
-            />
-          </template>
+          <TreeNode
+            v-for="node in visibleModel"
+            :key="node.id"
+            :node="node"
+            :options="opts"
+          />
         </template>
       </ul>
     </template>
@@ -117,7 +113,24 @@
         default: 'div'
       }
     },
+    watch: {
+      filter (term) {
+        this.tree.filter(term)
+      }
+    },
+    computed: {
+      visibleModel() {
+        return this.model.filter(function(node) {
+          return node && node.visible()
+        }) 
+      },
 
+      visibleMatches() {
+        return this.matches.filter(function(node) {
+          return node && node.visible()
+        })
+      }
+    },
     data () {
       // we should not mutating a prop directly...
       // that's why we have to create a new object