csb for tree

src/views/tree/TreeDoc.vue

@@ -750,9 +750,12 @@ export default {
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/tree" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+                <div class="p-d-flex p-jc-between">
-					<span>View on GitHub</span>
+                    <a href="https://github.com/primefaces/primevue/tree/master/src/views/tree" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
-				</a>
+                        <span>View on GitHub</span>
+                    </a>
+                    <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" :components="['Button']" />
+                </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
@@ -813,3 +816,80 @@ export default {
 		</TabView>
 	</div>
 </template>
+
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+export default {
+    data() {
+        return {
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <Tree :value="nodes"></Tree>
+
+                <h5>Programmatic Control</h5>
+                <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>
+        </div>
+    </div>
+</template>
+<script>
+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) {
+            if (node.children && node.children.length) {
+                this.expandedKeys[node.key] = true;
+
+                for (let child of node.children) {
+                    this.expandNode(child);
+                }
+            }
+        }
+    }
+}`,
+                    style: `<style scoped>
+button {
+    margin-right: .5rem;
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
+</script>

src/views/tree/TreeFilterDemo.vue

@@ -20,6 +20,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Lenient Filter&lt;/h3&gt;
@@ -79,6 +82,31 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {},
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Lenient Filter</h5>
+                <Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>
+
+                <h5>Strict Filter</h5>
+                <Tree :value="nodes" :filter="true" filterMode="strict"></Tree>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -115,6 +143,42 @@ export default {
         }
     }
 }
+`
+                }
+            }
+        }
+    },
+    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: {
+        LiveEditor
+    }
+}
 </script>
 
 <style scoped>

src/views/tree/TreeLazyDemo.vue

@@ -16,6 +16,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"&gt;&lt;/Tree&gt;
@@ -98,6 +101,27 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
+            </div>
+        </div>
+    </div>                    
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -160,6 +184,68 @@ export default {
             }];
         }
     }
+}`
+                }
+            }
+        }
+    },
+    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 < 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
+            }];
+        }
+    },
+    components: {
+        LiveEditor
+    }
 }
 </script>
 

src/views/tree/TreeSelectionDemo.vue

@@ -30,6 +30,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeDemo" :sources="sources" service="NodeService" data="treenodes" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;h3&gt;Single Selection&lt;/h3&gt;
@@ -91,6 +94,46 @@ export default {
 
 <script>
 import NodeService from '../../service/NodeService';
+import LiveEditor from '../liveeditor/LiveEditor';
+
+export default {
+    data() {
+        return {
+            selectedKey1: null,
+            selectedKey2: null,
+            selectedKeys1: null,
+            selectedKeys2: null,
+            selectedKeys3: null,
+            nodes: null,
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <Toast />
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Single Selection</h5>
+                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey1"></Tree>
+
+                <h5>Multiple Selection with MetaKey</h5>
+                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys1"></Tree>
+
+                <h5>Multiple Selection without MetaKey</h5>
+                <Tree :value="nodes" selectionMode="multiple" v-model:selectionKeys="selectedKeys2" :metaKeySelection="false"></Tree>
+
+                <h5>Checkbox Selection</h5>
+                <Tree :value="nodes" selectionMode="checkbox" v-model:selectionKeys="selectedKeys3"></Tree>
+
+                <h5>Events</h5>
+                <Tree :value="nodes" selectionMode="single" v-model:selectionKeys="selectedKey2" :metaKeySelection="false"
+                    @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import NodeService from '../service/NodeService';
 
 export default {
     data() {
@@ -118,6 +161,29 @@ export default {
             this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
         }
     }
+}`
+                }
+            }
+        }
+    },
+    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});
+        }
+    },
+    components: {
+        LiveEditor
+    }
 }
 </script>
 

src/views/tree/TreeTemplatingDemo.vue

@@ -23,6 +23,9 @@
         <div class="content-section documentation">
             <TabView>
                 <TabPanel header="Source">
+                    <div class="p-d-flex p-jc-end">
+                        <LiveEditor name="TreeDemo" :sources="sources" />
+                    </div>
 <pre v-code>
 <code><template v-pre>
 &lt;Tree :value="nodes"&gt;
@@ -74,6 +77,53 @@ export default {
     </div>
 </template>
 
+<script>
+import LiveEditor from '../liveeditor/LiveEditor';
+
+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', label: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
+                        {key: '1-2', label: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
+                        {key: '1-3', label: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
+                    ]
+                }
+            ],
+            sources: {
+                'template': {
+                    content: `<template>
+    <div class="layout-content">
+        <div class="content-section implementation">
+            <div class="card">
+                <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>
+        </div>
+    </div>                    
+</template>
+
 <script>
 export default {
     data() {
@@ -103,6 +153,27 @@ export default {
         }
     }
 }
+`,
+style: `<style scoped lang="scss">
+button {
+    margin-right: .5rem;
+}
+
+::v-deep(.p-tree) {
+    a {
+        color: #2196f3;
+        text-decoration: none;
+    }
+}
+</style>`
+                }
+            }
+        }
+    },
+    components: {
+        LiveEditor
+    }
+}
 </script>
 
 <style scoped lang="scss">