Recursive tree items

src/ui/components/controls/viewControl.vue

@@ -53,8 +53,9 @@
             }
         },
         methods: {
-            toggle() {
+            toggle(event) {
                 this.expanded = !this.expanded;
+                this.$emit('click', event);
             }
         }
     }

src/ui/components/layout/Layout.vue

@@ -13,7 +13,7 @@
                     <search class="c-search--major" ref="shell-search"></search>
                 </div>
                 <div class="l-shell__tree">
-                    <MctTree ref="shell-tree"></MctTree>
+                    <mct-tree :nodes="treeRoots"></mct-tree>
                 </div>
             </pane>
             <pane class="l-pane l-shell__pane-main">
@@ -133,7 +133,7 @@
     import MctInspector from './MctInspector.vue';
     import MctMain from './MctMain.vue';
     import MctStatus from './MctStatus.vue';
-    import MctTree from './MctTree.vue';
+    import MctTree from './mct-tree.vue';
     import search from '../controls/search.vue';
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
@@ -141,7 +141,44 @@
     export default {
         data () {
             return {
-                msg: 'Hello world!'
+                treeRoots: [
+                    {
+                        id: 'r1',
+                        name: 'Root 1',
+                        children: [
+                            {
+                                id: 'r1c1',
+                                name: 'r1c1'
+                            },
+                            {
+                                id: 'r1c2',
+                                name: 'r1c2'
+                            },
+                            {
+                                id: 'r1c3',
+                                name: 'r1c3'
+                            },
+                        ]
+                    },{
+                        id: 'r2',
+                        name: 'Root 2',
+                        children: [
+                            {
+                                id: 'r2c1',
+                                name: 'r2c1',
+                                children: [
+                                    {
+                                        id: 'r2c1c1',
+                                        name: 'r2c1c1'
+                                    }
+                                ]
+                            }
+                        ]
+                    },{
+                        id: 'r3',
+                        name: 'Root 3'
+                    }
+                ]
             }
         },
         methods: {

src/ui/components/layout/mct-tree.vue

@@ -0,0 +1,83 @@
+<template>
+    <ul class="c-tree">
+        <tree-item v-for="node in nodes"
+                   :key="node.id"
+                   :node="node">
+        </tree-item>
+    </ul>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-tree {
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 100%;
+
+        .c-tree {
+            margin-left: 20px;
+        }
+
+        &__item {
+            border-radius: $controlCr;
+            color: $colorItemTreeFg;
+            display: flex;
+            align-items: stretch;
+            cursor: pointer;
+            padding: 5px;
+            transition: background 150ms ease;
+
+            &:hover {
+                background: $colorItemTreeHoverBg;
+                .c-tree__item__name:before {
+                    // Type icon
+                    color: $colorItemTreeIconHover;
+                }
+            }
+
+            .c-tree__item__view-control {
+                color: $colorItemTreeVC;
+                margin-right: $interiorMarginSm;
+            }
+
+            &__name {
+                &:before {
+                    color: $colorItemTreeIcon;
+                    width: $treeTypeIconW;
+                }
+            }
+        }
+    }
+
+    .c-object-name {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:before {
+            // Type icon
+            display: inline-block;
+            font-size: 1.3em;
+            margin-right: $interiorMarginSm;
+        }
+
+        &__name {
+            @include ellipsize();
+            display: inline;
+        }
+    }
+</style>
+
+<script>
+    import treeItem from './tree-item.vue'
+
+    export default {
+        props: ['nodes'],
+        name: 'mct-tree',
+        components: {
+            treeItem
+        }
+    }
+</script>

src/ui/components/layout/tree-item.vue

@@ -0,0 +1,44 @@
+<template>
+    <li class="c-tree__item-h">
+        <div class="c-tree__item">
+            <view-control class="c-tree__item__view-control"
+                          :expanded="expanded"
+                          @click="toggleChildren">
+            </view-control>
+            <span class="c-tree__item__name c-object-name icon-folder"
+                  :class="node.cssClass">
+                <span class="c-object-name__name">{{ node.name }}</span>
+            </span>
+        </div>
+        <ul v-if="expanded" class="c-tree">
+            <tree-item v-for="child in node.children"
+                       :key="child.id"
+                       :node="child"
+                       >
+            </tree-item>
+        </ul>
+    </li>
+</template>
+
+<script>
+    import viewControl from '../controls/viewControl.vue'
+    export default {
+        name: 'tree-item',
+        props: {
+            node: Object
+        },
+        data() {
+            return {
+                expanded: false
+            }
+        },
+        methods: {
+            toggleChildren: function () {
+                this.expanded = !this.expanded;
+            }
+        },
+        components: {
+            viewControl
+        }
+    }
+</script>