Merge pull request #32 from scalia/improve-tree-node-indent

improve tree node indent

Author: vinz3872

README.md

@@ -142,7 +142,8 @@ computed: {
         height: 'auto',
         maxHeight: '300px',
         overflowY: 'visible',
-        display: 'inline-block'
+        display: 'inline-block',
+        textAlign: 'left'
       },
       row: {
         width: '500px',
@@ -246,6 +247,7 @@ computed: {
 | tree        | Object - override default tree css                                                                 |
 | row         | Object - override default tree node css                                                            |
 | row.child   | Object - override style of `<div>` into the `<li>` row (e.g. you can manage the height of the row) |
+| rowIndent   | Object - override style of `<ul>`  (e.g. you can manage the child node indent)                     |
 | expanded    | Object - contains the class of the expanded icon                                                   |
 | addNode     | Object - contains the class and the style of the addNode button                                    |
 | editNode    | Object - contains the class and the style of the editNode button                                   |

src/App.vue

@@ -62,7 +62,8 @@ export default {
           height: 'auto',
           maxHeight: '300px',
           overflowY: 'visible',
-          display: 'inline-block'
+          display: 'inline-block',
+          textAlign: 'left'
         },
         row: {
           width: '500px',
@@ -155,10 +156,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tree-indent {
-  margin: 0 10px;
-  display: inline-block;
-}
 .small-tree-indent {
   margin: 0 3px;
   display: inline-block;

src/components/TreeRow.vue

@@ -7,7 +7,6 @@
       :style="styles.row.child"
       @click="toggleEvent('selected', node, 'node', $event)">
       <span @click.stop="options.events.expanded.state == true && node.nodes != undefined && node.nodes.length > 0 && toggleEvent('expanded', node)">
-        <span v-for="(count, index) in depth" class="tree-indent" v-bind:key="index"></span>
         <i
           v-if="options.events.expanded.state == true && node.nodes != undefined && node.nodes.length > 0"
           :class="[{'expanded': expanded == true}, styles.expanded.class]">
@@ -76,7 +75,7 @@
         </span>
       </span>
     </div>
-    <ul v-if="expanded">
+    <ul v-if="expanded" :style="styles.rowIndent">
       <tree-row
         v-for="child in node.nodes"
         :ref="'tree-row-' + child.id"
@@ -117,6 +116,9 @@ export default {
             height: '35px'
           }
         },
+        rowIndent: {
+          paddingLeft: '20px'
+        },
         expanded: {
           class: 'expanded_icon'
         },
@@ -349,10 +351,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tree-indent {
-  margin: 0 10px;
-  display: inline-block;
-}
 .small-tree-indent {
   margin: 0 3px;
   display: inline-block;