Source codes for Tree Demos

src/views/tree/TreeDoc.vue

@@ -112,7 +112,7 @@ import Tree from 'primevue/tree';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tristatecheckbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/treedemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <CodeHighlight>
@@ -121,14 +121,21 @@ import Tree from 'primevue/tree';
 	&lt;div&gt;
         &lt;div class="content-section introduction"&gt;
             &lt;div class="feature-intro"&gt;
-				&lt;h1&gt;TriStateCheckbox&lt;/h1&gt;
+                &lt;h1&gt;Tree&lt;/h1&gt;
-				&lt;p&gt;TriStateCheckbox is used to select either "true", "false" or "null" as the value.&lt;/p&gt;
+                &lt;p&gt;Tree is used to display hierarchical data.&lt;/p&gt;
             &lt;/div&gt;
         &lt;/div&gt;
 
         &lt;div class="content-section implementation"&gt;
-			&lt;TriStateCheckbox v-model="value" /&gt;
+            &lt;h3&gt;Basic&lt;/h3&gt;
-			&lt;p&gt;Value: &lt;span style="font-weight: bold"&gt;{{value == null ? 'null' : value}}&lt;/span&gt;&lt;/p&gt;
+            &lt;Tree :value="nodes"&gt;&lt;/Tree&gt;
+
+            &lt;h3&gt;Programmatic Control&lt;/h3&gt;
+            &lt;div style="margin-bottom: 1em"&gt;
+                &lt;Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" /&gt;
+                &lt;Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" /&gt;
+            &lt;/div&gt;
+            &lt;Tree :value="nodes" :expandedKeys="expandedKeys"&gt;&lt;/Tree&gt;            
         &lt;/div&gt;
     &lt;/div&gt;
 &lt;/template&gt;
@@ -136,10 +143,40 @@ import Tree from 'primevue/tree';
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
 export default {
     data() {
         return {
-			value: null
+            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 &amp;&amp; node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
         }
     }
 }

src/views/tree/TreeFilterDemo.vue

@@ -17,9 +17,64 @@
             <Tree :value="nodes" :filter="true" filterMode="strict"></Tree>          
         </div>
 
-        <TreeDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Lenient Filter&lt;/h3&gt;
+&lt;Tree :value="nodes" :filter="true" filterMode="lenient"&gt;&lt;/Tree&gt;
+
+&lt;h3&gt;Strict Filter&lt;/h3&gt;
+&lt;Tree :value="nodes" :filter="true" filterMode="strict"&gt;&lt;/Tree&gt;    
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+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 &lt;&lt; node.children.length) {
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
+
 <script>
 import NodeService from '../../service/NodeService';
 import TreeDoc from './TreeDoc';

src/views/tree/TreeLazyDemo.vue

@@ -13,9 +13,87 @@
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
         </div>
 
-        <TreeDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"&gt;&lt;/Tree&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.loading = true;
+
+        setTimeout(() => {
+            this.nodes = this.initateNodes();
+            this.loading = false;
+        }, 2000);
+    },
+    methods: {
+        onNodeExpand(node) {
+            if (!node.children) {
+                this.loading = true;
+        
+                setTimeout(() => {
+                    let _node = {...node};
+                    _node.children = [];
+        
+                    for (let i = 0; i &lt; 3; i++) {
+                        _node.children.push({
+                            key: node.key + '-' + i,
+                            label: 'Lazy ' + node.label + '-' + i
+                        });
+                    }
+                    
+                    let _nodes = {...this.nodes}
+                    _nodes[parseInt(node.key, 10)] = _node; 
+                    
+                    this.nodes = _nodes;
+                    this.loading = false;
+                }, 500);  
+            }
+        },
+        initateNodes() {
+            return [{
+                key: '0',
+                label: 'Node 0',
+                leaf: false
+            },
+            {
+                key: '1',
+                label: 'Node 1',
+                leaf: false
+            },
+            {
+                key: '2',
+                label: 'Node 2',
+                leaf: false
+            }];
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
+
 <script>
 import NodeService from '../../service/NodeService';
 import TreeDoc from './TreeDoc';

src/views/tree/TreeSelectionDemo.vue

@@ -27,9 +27,66 @@
                 @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
         </div>
 
-        <TreeDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;h3&gt;Single Selection&lt;/h3&gt;
+&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"&gt;&lt;/Tree&gt;
+
+&lt;h3&gt;Multiple Selection with MetaKey&lt;/h3&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"&gt;&lt;/Tree&gt;
+
+&lt;h3&gt;Multiple Selection without MetaKey&lt;/h3&gt;
+&lt;Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"&gt;&lt;/Tree&gt;
+
+&lt;h3&gt;Checkbox Selection&lt;/h3&gt;
+&lt;Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"&gt;&lt;/Tree&gt;
+
+&lt;h3&gt;Events&lt;/h3&gt;
+&lt;Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
+    @node-select="onNodeSelect" @node-unselect="onNodeUnselect"&gt;&lt;/Tree&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            selectedKey1: null,
+            selectedKey2: null,
+            selectedKeys1: null,
+            selectedKeys2: null,
+            selectedKeys3: null,
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.label, life: 3000});
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
+
 <script>
 import NodeService from '../../service/NodeService';
 import TreeDoc from './TreeDoc';

src/views/tree/TreeTemplatingDemo.vue

@@ -20,9 +20,58 @@
             </Tree>
         </div>
 
-        <TreeDoc />
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;Tree :value="nodes"&gt;
+    &lt;template #default="slotProps"&gt;
+        &lt;b&gt;&#123;&#123;slotProps.node.label&#125;&#125;&lt;/b&gt;
+    &lt;/template&gt;
+    &lt;template #url="slotProps"&gt;
+        &lt;a :href="slotProps.node.data"&gt;&#123;&#123;slotProps.node.label&#125;&#125;&lt;/a&gt;
+    &lt;/template&gt;
+&lt;/Tree&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            nodes: [
+                {
+                    key: '0',
+                    label: 'Introduction',
+                    children: [
+                        {key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
+                        {key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
+                        {key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'},
+                        {key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Components In-Depth',
+                    children: [
+                        {key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
+                        {key: '1-1', llabel: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
+                        {key: '1-2', llabel: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
+                        {key: '1-3', llabel: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
+                    ]
+                }
+            ]
+        }
+    }
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
     </div>
 </template>
+
 <script>
 import TreeDoc from './TreeDoc';
 import TreeSubMenu from './TreeSubMenu';