docs(home): Add more demo features on home page

app/components/Main.ts

@@ -1,32 +1,14 @@
 import Vue from 'vue'
 
 import VueTree from '@/VueTree.vue'
+import examples from '#/components/examples'
 
 export default Vue.extend({
   components: {VueTree},
   data: function () {
     return {
-      loaderProps: {
-        value: {label: 'Test'},
-        children: (parent: any) => {
-          if (parent.label === 'Test') {
-            return [{label: 'Cat #1'}, {label: 'Cat #2'}]
-          } else if (parent.label === 'Cat #1') {
-            return [
-              {label: '#1'},
-              {label: '#2'},
-              {label: '#3'},
-              {label: '#4'}
-            ]
-          } else if (parent.label === 'Cat #2') {
-            return [
-              {label: '#A'},
-              {label: '#B'},
-              {label: '#C'}
-            ]
-          }
-        }
-      }
+      examples,
+      scope: { VueTree, Vue }
     }
   }
 

app/components/Main.vue

@@ -23,21 +23,13 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-4">
-        <div class="well well-sm sample-tree-container">
-          <vue-tree theme="fontAwesome"></vue-tree>
-        </div>
-      </div>
+      <vuep :template="examples.home" :scope="scope"></vuep>
     </div>
   </div>
 </template>
 <style lang="scss">
 .badges {
   padding-bottom: 1em;
 }
-
-.sample-tree-container {
-  height: 14em;
-}
 </style>
 <script lang="ts" src="./Main.ts"></script>

app/components/examples/Home.vue.raw

@@ -0,0 +1,69 @@
+<template>
+  <vue-tree
+    theme="fontAwesome"
+    :selectable="true"
+    :data="data"
+    label="label"
+    children="children"
+    opened="opened"
+    selected="selected"
+    selectable="selectable">
+  </vue-tree>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: {
+        label: 'Vue Tree',
+        selectable: false,
+        children: [
+          { label: 'Data',
+            children: [
+              { label: 'From any source', children: [
+                  { label: 'Thanks to configurable property names' },
+                ]
+              },
+              { label: 'Synchronously', opened: false, children: [
+                  { label: 'Configurable property containing TreeNode[]' },
+                  { label: 'Function returning TreeNode[]' }
+                ]
+              },
+              { label: 'Asynchronously', opened: false, children: [
+                  { label: 'Function returning Promise<TreeNode[]>' }
+                ]
+              }
+            ]
+          },
+          { label: 'Initial state',
+            opened: false,
+            selected: true,
+            children: [
+              { label: 'Thanks ! I really thought nobody would ever open me :)' },
+            ]
+          },
+          { label: 'Selection',
+            children: [
+              { label: '#1', selectable: true },
+              { label: '#2', selectable: true, selected: true },
+              { label: '#3', selectable: true, selected: true },
+              { label: 'Not selectable', selectable: false },
+            ]
+          },
+          { label: 'Themes',
+            children: [
+              { label: 'Vanilla (Unicode Symbols)' },
+              { label: 'FontAwesome' },
+              { label: 'Custom (Component based theming)' }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  components: {
+    VueTree
+  }
+}
+</script>

app/components/examples/index.ts

@@ -5,6 +5,7 @@ const functionalObjectProperties = require('raw-loader!./FunctionalObjectPropert
 const asyncChildren = require('raw-loader!./AsyncChildren.vue.raw')
 const defaultThemes = require('raw-loader!./DefaultThemes.vue.raw')
 const selectableProperty = require('raw-loader!./SelectableProperty.vue.raw')
+const home = require('raw-loader!./Home.vue.raw')
 
 export default {
   simple,
@@ -13,5 +14,6 @@ export default {
   functionalObjectProperties,
   asyncChildren,
   defaultThemes,
-  selectableProperty
+  selectableProperty,
+  home
 }