Templating Demo for Tree

src/components/tree/Tree.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass">
         <ul class="p-tree-container" role="tree">
-            <TreeNode v-for="node of value" :key="node.key" :node="node"
+            <TreeNode v-for="node of value" :key="node.key" :node="node" :templates="$scopedSlots" 
                 :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
         </ul>

src/components/tree/TreeNode.vue

@@ -11,10 +11,12 @@
                 </div>
             </div>
             <span :class="icon"></span>
-            <span class="p-treenode-label">{{node.label}}</span>
+            <span class="p-treenode-label">
+                <TreeNodeTemplate :node="node" :template="templates[node.type]||templates['default']" />
+            </span>
         </div>
         <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
-            <sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode"
+            <sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates"
                 :expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
                 :selectionMode="selectionMode" :selectionKeys="selectionKeys" 
                 @checkbox-change="propagateUp"></sub-treenode>
@@ -25,6 +27,27 @@
 <script>
 import DomHandler from '../utils/DomHandler';
 
+const TreeNodeTemplate = {
+    functional: true,
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        template: {
+            type: null,
+            default: null
+        }
+    },
+    render(createElement, context) {
+        const content = context.props.template ? context.props.template({
+            'node': context.props.node
+        }): context.props.node.label;
+
+        return [content];
+    }
+};
+
 export default {
     name: 'sub-treenode',
     props: {
@@ -43,6 +66,10 @@ export default {
         selectionMode: {
             type: String,
             default: null
+        },
+        templates: {
+            type: null,
+            default: null
         }
     },
     nodeTouched: false,
@@ -281,6 +308,9 @@ export default {
         partialChecked() {
             return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
         }
+    },
+    components: {
+        'TreeNodeTemplate': TreeNodeTemplate
     }
 }
 </script>

src/router.js

@@ -363,8 +363,23 @@ export default new Router({
         },
         {
 			path: '/tree/selection',
-			name: 'treeselectiın',
+			name: 'treeselection',
 			component: () => import('./views/tree/TreeSelectionDemo.vue')
+        },
+        {
+			path: '/tree/lazy',
+			name: 'treelazy',
+			component: () => import('./views/tree/TreeLazyDemo.vue')
+        },
+        {
+			path: '/tree/templating',
+			name: 'treetemplating',
+			component: () => import('./views/tree/TreeTemplatingDemo.vue')
+        },
+        {
+			path: '/tree/filter',
+			name: 'treefilter',
+			component: () => import('./views/tree/TreeFilterDemo.vue')
 		},
 		{
 			path: '/tristatecheckbox',

src/views/tree/TreeFilterDemo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <TreeSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Tree - Filter</h1>
+                <p>Tree is used to display hierarchical data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Basic</h3>
+            <Tree :value="nodes"></Tree>
+
+            <h3>Programmatic Control</h3>
+            <div style="margin-bottom: 1em">
+                <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+            </div>
+            <Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>            
+        </div>
+
+        <TreeDoc />
+    </div>
+</template>
+<script>
+import NodeService from '../../service/NodeService';
+import TreeDoc from './TreeDoc';
+import TreeSubMenu from './TreeSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {...this.expandedKeys};
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            this.expandedKeys[node.key] = true;
+            if (node.children && node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    },
+    components: {
+        'TreeDoc': TreeDoc,
+        'TreeSubMenu': TreeSubMenu
+    }
+}
+</script>
+
+<style scoped>
+button {
+    margin-right: .5em;
+}
+</style>

src/views/tree/TreeLazyDemo.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <TreeSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Tree - Lazy</h1>
+                <p>Tree is used to display hierarchical data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Basic</h3>
+            <Tree :value="nodes"></Tree>
+
+            <h3>Programmatic Control</h3>
+            <div style="margin-bottom: 1em">
+                <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+            </div>
+            <Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>            
+        </div>
+
+        <TreeDoc />
+    </div>
+</template>
+<script>
+import NodeService from '../../service/NodeService';
+import TreeDoc from './TreeDoc';
+import TreeSubMenu from './TreeSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        expandAll() {
+            for (let node of this.nodes) {
+                this.expandNode(node);
+            }
+
+            this.expandedKeys = {...this.expandedKeys};
+        },
+        collapseAll() {
+            this.expandedKeys = {};
+        },
+        expandNode(node) {
+            this.expandedKeys[node.key] = true;
+            if (node.children && node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    },
+    components: {
+        'TreeDoc': TreeDoc,
+        'TreeSubMenu': TreeSubMenu
+    }
+}
+</script>
+
+<style scoped>
+button {
+    margin-right: .5em;
+}
+</style>

src/views/tree/TreeTemplatingDemo.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <TreeSubMenu />
+
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Tree - Templating</h1>
+                <p>Tree is used to display hierarchical data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Tree :value="nodes">
+                <template #default="slotProps">
+                    <b>{{slotProps.node.label}}</b>
+                </template>
+                <template #url="slotProps">
+                    <a :href="slotProps.node.data">{{slotProps.node.label}}</a>
+                </template>
+            </Tree>
+        </div>
+
+        <TreeDoc />
+    </div>
+</template>
+<script>
+import NodeService from '../../service/NodeService';
+import TreeDoc from './TreeDoc';
+import TreeSubMenu from './TreeSubMenu';
+
+export default {
+    data() {
+        return {
+            nodes: [
+                {
+                    key: '0',
+                    label: 'Introduction',
+                    children: [
+                        {label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
+                        {label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
+                        {label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'},
+                        {label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Components In-Depth',
+                    children: [
+                        {label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
+                        {label: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
+                        {label: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
+                        {label: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
+                    ]
+                }
+            ]
+        }
+    },
+    components: {
+        'TreeDoc': TreeDoc,
+        'TreeSubMenu': TreeSubMenu
+    }
+}
+</script>
+
+<style scoped>
+button {
+    margin-right: .5em;
+}
+</style>