Adding slots for empty filter results and empty dataset provided

demo/pages/custom.html

@@ -98,7 +98,8 @@
           addChild(event, node) {
             event.stopPropagation()
 
-            console.log(node)
+            node.addChild('New child')
+            node.expand()
           }
         }
       })

demo/pages/filtering.html

@@ -89,7 +89,7 @@
           treeOptions0: {
             fetchData: '/assets/data/filtering.json',
             filter: {
-              emptyText: 'aaaaaaaaaa!'
+              emptyText: '<b>~~Overrided empty text as HTML~~</b>'
             }
           },
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "liquor-tree",
   "description": "A Vue.js tree component.",
-  "version": "0.2.48",
+  "version": "0.2.52",
   "author": "Kostiantyn <phlyze@gmail.com>",
   "library": "LiquorTree",
   "homepage": "https://amsik.github.io/liquor-tree/",

src/components/TreeNode.vue

@@ -3,7 +3,7 @@
     <div class="tree-content" :style="[options.direction == 'ltr' ? {'padding-left': padding} : {'padding-right': padding}]" @mouseup.stop="select">
       <i
         class="tree-arrow"
-        :class="{'expanded': node.states.expanded, 'has-child': node.children.length || node.isBatch}"
+        :class="[{'expanded': node.states.expanded, 'has-child': node.children.length || node.isBatch}, options.direction]"
         @mouseup.stop="toggleExpand">
       </i>
 
@@ -77,7 +77,8 @@
           'disabled': state.disabled,
           'matched': state.matched,
           'dragging': state.dragging,
-          'loading': this.loading
+          'loading': this.loading,
+          'draggable': state.draggable
         }
 
         if (this.options.checkbox) {
@@ -249,6 +250,20 @@
     transform-origin: center;
   }
 
+  .tree-arrow.has-child.rtl:after {
+    border: 1.5px solid #494646;
+    position: absolute;
+    border-right: 0;
+    border-bottom: 0;
+    right: 0px;
+    top: 50%;
+    height: 9px;
+    width: 9px;
+    transform: rotate(-45deg) translateY(-50%) translateX(0);
+    transition: transform .25s;
+    transform-origin: center;
+  }
+
   .tree-arrow.expanded.has-child:after {
     transform: rotate(45deg) translateY(-50%) translateX(-5px);
   }
@@ -373,14 +388,14 @@
     width: 5px;
   }
 
-
   .tree-node.has-child.loading > .tree-content > .tree-arrow,
   .tree-node.has-child.loading > .tree-content > .tree-arrow:after {
     border-radius: 50%;
     width: 15px;
     height: 15px;
     border: 0;
   }
+
   .tree-node.has-child.loading > .tree-content > .tree-arrow {
     font-size: 3px;
     position: relative;
@@ -396,6 +411,7 @@
     animation: loading 1.1s infinite linear;
     margin-right: 8px;
   }
+
   @-webkit-keyframes loading {
     0% {
       -webkit-transform: rotate(0deg);