From 351ea5a0690912cde9cf0601f4190b230136817e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 11 Oct 2021 16:52:32 +0300
Subject: [PATCH] browser source for tree

---
 src/views/tree/TreeDoc.vue            | 71 +++++++++++++++++++++++-
 src/views/tree/TreeFilterDemo.vue     | 56 +++++++++++++++++++
 src/views/tree/TreeLazyDemo.vue       | 80 +++++++++++++++++++++++++++
 src/views/tree/TreeScrollDemo.vue     | 78 +++++++++++++++++++++++++-
 src/views/tree/TreeSelectionDemo.vue  | 64 +++++++++++++++++++++
 src/views/tree/TreeTemplatingDemo.vue | 66 ++++++++++++++++++++++
 6 files changed, 412 insertions(+), 3 deletions(-)

diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 57a69cf3d..5f8183643 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -824,7 +824,7 @@ export default {
 <\\/script>
 
 <style scoped>
-button {
+.p-button {
     margin-right: .5rem;
 }
 </style>`
@@ -885,10 +885,77 @@ export default {
 <\\/script>
 
 <style scoped>
-button {
+.p-button {
     margin-right: .5rem;
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Basic</h5>
+            <p-tree :value="nodes"></p-tree>
+
+            <h5>Programmatic Control</h5>
+            <div style="margin-bottom: 1em">
+                <p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll"></p-button>
+                <p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
+            </div>
+            <p-tree :value="nodes" :expanded-keys="expandedKeys"></p-tree>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref();
+                const expandedKeys = ref({});
+                const nodeService = ref(new NodeService());
+                const expandAll = () => {
+                    for (let node of nodes.value) {
+                        expandNode(node);
+                    }
+
+                    expandedKeys.value = {...expandedKeys.value};
+                };
+                const collapseAll = () => {
+                    expandedKeys.value = {};
+                };
+                const expandNode = (node) => {
+                    if (node.children && node.children.length) {
+                        expandedKeys.value[node.key] = true;
+
+                        for (let child of node.children) {
+                            expandNode(child);
+                        }
+                    }
+                };
+
+                return { nodes, expandedKeys, nodeService, expandAll, collapseAll, expandNode }
+            },
+            components: {
+                "p-tree": primevue.tree,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-button {
+            margin-right: .5rem;
+        }
+        </style>`
                 }
             }
         }
diff --git a/src/views/tree/TreeFilterDemo.vue b/src/views/tree/TreeFilterDemo.vue
index 479bfb457..0a1c4e1cb 100755
--- a/src/views/tree/TreeFilterDemo.vue
+++ b/src/views/tree/TreeFilterDemo.vue
@@ -134,6 +134,62 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Lenient Filter</h5>
+            <p-tree :value="nodes" :filter="true" filter-mode="lenient"></p-tree>
+
+            <h5>Strict Filter</h5>
+            <p-tree :value="nodes" :filter="true" filter-mode="strict"></p-tree>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                })
+
+                const nodes = ref(null);
+                const nodeService = ref(new NodeService());
+                const expandedKeys = ref({});
+                const expandAll = () => {
+                    for (let node of nodes.value) {
+                        expandNode(node);
+                    }
+
+                    expandedKeys.value = {...expandedKeys.value};
+                };
+                const collapseAll = () => {
+                    expandedKeys.value = {};
+                };
+                const expandNode = (node) => {
+                    expandedKeys.value[node.key] = true;
+                    if (node.children && node.children.length) {
+                        for (let child of node.children) {
+                            expandNode(child);
+                        }
+                    }
+                };
+
+                return { nodes, nodeService, expandedKeys, expandAll, collapseAll, expandNode }
+            },
+            components: {
+                "p-tree": primevue.tree
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/tree/TreeLazyDemo.vue b/src/views/tree/TreeLazyDemo.vue
index 69319582f..2b5b06fd7 100755
--- a/src/views/tree/TreeLazyDemo.vue
+++ b/src/views/tree/TreeLazyDemo.vue
@@ -177,6 +177,86 @@ export default {
     }
 }
 <\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></p-tree>
+        </div>                   
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    loading.value = true;
+
+                    setTimeout(() => {
+                        nodes.value = initateNodes();
+                        loading.value = false;
+                    }, 2000);
+                })
+
+                const loading = ref(false);
+                const nodes = ref(null);
+                const nodeService = ref(new NodeService());
+                const onNodeExpand = (node) => {
+                    if (!node.children) {
+                        loading.value = 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 = {...nodes.value}
+                            _nodes[parseInt(node.key, 10)] = _node;
+
+                            nodes.value = _nodes;
+                            loading.value = false;
+                        }, 500);
+                    }
+                };
+
+                const initateNodes = () => {
+                    return [{
+                        key: '0',
+                        label: 'Node 0',
+                        leaf: false
+                    },
+                    {
+                        key: '1',
+                        label: 'Node 1',
+                        leaf: false
+                    },
+                    {
+                        key: '2',
+                        label: 'Node 2',
+                        leaf: false
+                    }];
+                }
+
+                return { loading, nodes, nodeService, onNodeExpand, initateNodes }
+            },
+            components: {
+                "p-tree": primevue.tree
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
 `
                 }
             }
diff --git a/src/views/tree/TreeScrollDemo.vue b/src/views/tree/TreeScrollDemo.vue
index 9165182d3..2af2d6adb 100644
--- a/src/views/tree/TreeScrollDemo.vue
+++ b/src/views/tree/TreeScrollDemo.vue
@@ -161,7 +161,7 @@ export default {
         }
 
         onMounted(() => {
-            nodeService.value.getTreeNodes().then(data => nodes.value = data);
+            nodeService.value.getTreeNodes().then(data => nodes1.value = data);
             nodes2.value = Array.from({length: 100}).map((_,i) => createNode(i, 2));
         })
 
@@ -174,7 +174,83 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/dialog/dialog.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <h5>Regular Scroll</h5>
+            <p>Scrollable viewport is fixed.</p>
+            <p-tree :value="nodes1" scroll-height="200px"></p-tree>
 
+            <h5>Flex Scroll</h5>
+            <p>Flex scroll feature makes the scrollable viewport section dynamic so that it can grow or shrink relative to the parent size of the tree. Click the button below
+            to display maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
+            <p-button type="button" icon="pi pi-external-link" label="View" @click="dialogVisible = true"></p-button>
+
+            <p-dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '50vw'}" :maximizable="true"
+                :content-style="{height: '300px'}" class="p-fluid">
+                <p-tree :value="nodes2" scrollHeight="flex"></p-tree>
+                <template #footer>
+                    <p-button type="button" icon="pi pi-check" @click="dialogVisible = false" class="p-button-text"></p-button>
+                </template>
+            </p-dialog>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                const createNode = (i, children) => {
+                    let node = {
+                        key: 'node_' + i,
+                        label: 'Node ' + i,
+                        data: 'Node ' + i,
+                        expandedIcon: 'pi pi-folder-open',
+                        collapsedIcon: 'pi pi-folder',
+                        children: Array.from({length: children}).map((_,j) => {
+                            return {
+                                label: 'Node ' + i + '.' + j, 
+                                data: 'Node ' + i + '.' + j, 
+                                icon: 'pi pi-file-o'
+                            }
+                        })
+                    };
+
+                    return node;
+                }
+
+                onMounted(() => {
+                    nodeService.value.getTreeNodes().then(data => nodes1.value = data);
+                    nodes2.value = Array.from({length: 100}).map((_,i) => createNode(i, 2));
+                })
+
+                const nodes1 = ref(null);
+                const nodes2 = ref(null);
+                const dialogVisible = ref(false);
+                const nodeService = ref(new NodeService());
+
+                return { nodes1, nodes2, dialogVisible }
+            },
+            components: {
+                "p-tree": primevue.tree,
+                "p-toast": primevue.toast,
+                "p-dialog": primevue.dialog,
+                "p-button": primevue.button
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/tree/TreeSelectionDemo.vue b/src/views/tree/TreeSelectionDemo.vue
index d6e3b7a89..ee91d1ac9 100755
--- a/src/views/tree/TreeSelectionDemo.vue
+++ b/src/views/tree/TreeSelectionDemo.vue
@@ -158,7 +158,71 @@ export default {
     }
 }
 <\\/script>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/toast/toast.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/toastservice/toastservice.min.js"><\\/script>
+        <script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-toast></p-toast>
 
+            <h5>Single Selection</h5>
+            <p-tree :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey1"></p-tree>
+
+            <h5>Multiple Selection with MetaKey</h5>
+            <p-tree :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys1"></p-tree>
+
+            <h5>Multiple Selection without MetaKey</h5>
+            <p-tree :value="nodes" selection-mode="multiple" v-model:selection-keys="selectedKeys2" :meta-key-selection="false"></p-tree>
+
+            <h5>Checkbox Selection</h5>
+            <p-tree :value="nodes" selection-mode="checkbox" v-model:selection-keys="selectedKeys3"></p-tree>
+
+            <h5>Events</h5>
+            <p-tree :value="nodes" selection-mode="single" v-model:selection-keys="selectedKey2" :meta-key-delection="false"
+                @node-select="onNodeSelect" @node-unselect="onNodeUnselect"></p-tree>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+        const { useToast } = primevue.usetoast;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    nodeService.value.getTreeNodes().then(data => nodes.value = data);
+                })
+
+                const toast = useToast();
+                const selectedKey1 = ref(null);
+                const selectedKey2 = ref(null);
+                const selectedKeys1 = ref(null);
+                const selectedKeys2 = ref(null);
+                const selectedKeys3 = ref(null);
+                const nodes = ref(null);
+                const nodeService = ref(new NodeService());
+                const onNodeSelect = (node) => {
+                    toast.add({severity:'success', summary: 'Node Selected', detail: node.label, life: 3000});
+                };
+                const onNodeUnselect = (node) => {
+                    toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
+                };
+
+                return { selectedKey1, selectedKey2, selectedKeys1, selectedKeys2, selectedKeys3, nodes, nodeService, onNodeSelect, onNodeUnselect }
+            },
+            components: {
+                "p-tree": primevue.tree,
+                "p-toast": primevue.toast
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .use(primevue.toastservice)
+            .mount("#app");
+        <\\/script>`
                 }
             }
         }
diff --git a/src/views/tree/TreeTemplatingDemo.vue b/src/views/tree/TreeTemplatingDemo.vue
index 8b6272aec..34f5059f7 100755
--- a/src/views/tree/TreeTemplatingDemo.vue
+++ b/src/views/tree/TreeTemplatingDemo.vue
@@ -173,6 +173,72 @@ button {
     }
 }
 </style>`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="./NodeService.js"><\\/script>`,
+                    content: `
+        <div id="app">
+            <p-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>
+            </p-tree>
+        </div>                  
+
+        <script type="module">
+        const { createApp, ref } = Vue;
+
+        const App = {
+            setup() {
+                const nodes = ref([
+                    {
+                        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'}
+                        ]
+                    }
+                ]);
+
+                return { nodes }
+            },
+            components: {
+                "p-tree": primevue.tree
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+
+        <style>
+        .p-button {
+            margin-right: .5rem;
+        }
+
+        .p-tree a {
+            color: #2196f3;
+            text-decoration: none;
+        }
+        </style>`
                 }
             }
         }