vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

csb for tree

pull/880/head
Tuğçe Küçükoğlu 2021-01-22 10:16:31 +03:00
parent b0f1b25fca
commit 6db5ef2f50
5 changed files with 371 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/tree/TreeDoc.vue
View File

@ -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">
<span>View on GitHub</span>
</a>
<div class="p-d-flex p-jc-between">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tree" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<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>

64
src/views/tree/TreeFilterDemo.vue
View File

@ -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>

86
src/views/tree/TreeLazyDemo.vue
View File

@ -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>

66
src/views/tree/TreeSelectionDemo.vue
View File

@ -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>

71
src/views/tree/TreeTemplatingDemo.vue
View File

@ -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">