Merged new Docs and Demos

2025-05-08 16:37:15 +00:00 · 2023-02-28 11:29:30 +03:00 · 2023-02-28 11:29:30 +03:00 · dfcc8ef4e7
commit dfcc8ef4e7
parent 296cc217fb
1235 changed files with 130757 additions and 122640 deletions
--- a/doc/tree/ControlledDoc.vue
+++ b/doc/tree/ControlledDoc.vue
@ -0,0 +1,152 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tree state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that
+            <i>expandedKeys</i> also supports two-way binding with the v-model directive.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-column align-items-center">
+        <div class="flex flex-wrap gap-2 mb-4">
+            <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 v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+    </div>
+    <DocSectionCode :code="code" v-bind="$attrs" :service="['NodeService']" />
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {},
+            code: {
+                basic: `
+<div class="flex flex-wrap gap-2 mb-4">
+    <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 v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>`,
+                options: `
+<template>
+    <div class="card flex flex-column align-items-cente">
+        <div class="flex flex-wrap gap-2 mb-4">
+            <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 v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+    </div>
+</template>
+
+<script>
+import { NodeService } from '@/service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            expandedKeys: {}
+        };
+    },
+    mounted() {
+        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);
+                }
+            }
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex flex-column align-items-cente">
+        <div class="flex flex-wrap gap-2 mb-4">
+            <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 v-model:expandedKeys="expandedKeys" :value="nodes" class="w-full md:w-30rem"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+const expandedKeys = ref({});
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+
+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);
+        }
+    }
+};
+<\/script>`
+            }
+        };
+    },
+    mounted() {
+        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);
+                }
+            }
+        }
+    }
+};
+</script>