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

Fixed #367 - Ability to activate PanelMenu item declaratively or programmatically

pull/1281/head
Cagatay Civici 2021-05-17 18:44:09 +03:00
parent 62d8c7a448
commit c04098e4fe
9 changed files with 720 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/panelmenu.js
View File

@ -4,6 +4,12 @@ const PanelMenuProps = [
type: "array", type: "array",
default: "null", default: "null",
description: "An array of menuitems." description: "An array of menuitems."
},
{
name: "expandedKeys",
type: "array",
default: "null",
description: "A map of keys to represent the expansion state in controlled mode."
} }
]; ];

2
api-generator/components/tree.js
View File

@ -9,7 +9,7 @@ const TreeProps = [
name: "expandedKeys", name: "expandedKeys",
type: "array", type: "array",
default: "null", default: "null",
description: "A map of keys to represent the state of the tree expansion state in controlled mode." description: "A map of keys to represent the expansion state in controlled mode."
}, },
{ {
name: "selectionMode", name: "selectionMode",

1
src/components/panelmenu/PanelMenu.d.ts vendored
View File

@ -1,5 +1,6 @@
interface PanelMenuProps { interface PanelMenuProps {
model?: any[]; model?: any[];
expandedKeys?: any;
} }
declare class PanelMenu { declare class PanelMenu {

27
src/components/panelmenu/PanelMenu.vue
View File

@ -20,10 +20,11 @@
<component v-else :is="$slots.item" :item="item"></component> <component v-else :is="$slots.item" :item="item"></component>
</div> </div>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem" <div class="p-toggleable-content" v-show="isActive(item)"
role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'"> role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
<div class="p-panelmenu-content" v-if="item.items"> <div class="p-panelmenu-content" v-if="item.items">
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item" /> <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item"
:expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" />
</div> </div>
</div> </div>
</transition> </transition>
@ -38,10 +39,15 @@ import {UniqueComponentId} from 'primevue/utils';
export default { export default {
name: 'PanelMenu', name: 'PanelMenu',
emits: ['update:expandedKeys'],
props: { props: {
model: { model: {
type: Array, type: Array,
default: null default: null
},
expandedKeys: {
type: null,
default: null
} }
}, },
data() { data() {
@ -68,10 +74,25 @@ export default {
else else
this.activeItem = item; this.activeItem = item;
this.updateExpandedKeys({item: item, expanded: this.activeItem != null});
if (item.to && navigate) { if (item.to && navigate) {
navigate(event); navigate(event);
} }
}, },
updateExpandedKeys(event) {
if (this.expandedKeys) {
let item = event.item;
let _keys = {...this.expandedKeys};
if (event.expanded)
_keys[item.key] = true;
else
delete _keys[item.key];
this.$emit('update:expandedKeys', _keys);
}
},
getPanelClass(item) { getPanelClass(item) {
return ['p-panelmenu-panel', item.class]; return ['p-panelmenu-panel', item.class];
}, },
@ -83,7 +104,7 @@ export default {
return ['p-menuitem-icon', item.icon]; return ['p-menuitem-icon', item.icon];
}, },
isActive(item) { isActive(item) {
return item === this.activeItem; return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
}, },
getHeaderClass(item) { getHeaderClass(item) {
return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}]; return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}];

14
src/components/panelmenu/PanelMenuSub.vue
View File

@ -18,8 +18,9 @@
</template> </template>
<component v-else :is="template" :item="item"></component> <component v-else :is="template" :item="item"></component>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="item === activeItem"> <div class="p-toggleable-content" v-show="isActive(item)">
<PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template" /> <PanelMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
:expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" />
</div> </div>
</transition> </transition>
</li> </li>
@ -31,6 +32,7 @@
<script> <script>
export default { export default {
name: 'PanelMenuSub', name: 'PanelMenuSub',
emits: ['item-toggle'],
props: { props: {
model: { model: {
type: null, type: null,
@ -39,6 +41,10 @@ export default {
template: { template: {
type: Object, type: Object,
default: null default: null
},
expandedKeys: {
type: null,
default: null
} }
}, },
data() { data() {
@ -65,6 +71,8 @@ export default {
else else
this.activeItem = item; this.activeItem = item;
this.$emit('item-toggle', {item: item, expanded: this.activeItem != null});
if (item.to && navigate) { if (item.to && navigate) {
navigate(event); navigate(event);
} }
@ -76,7 +84,7 @@ export default {
return ['p-menuitem-link', {'p-disabled': item.disabled}]; return ['p-menuitem-link', {'p-disabled': item.disabled}];
}, },
isActive(item) { isActive(item) {
return item === this.activeItem; return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
}, },
getSubmenuIcon(item) { getSubmenuIcon(item) {
const active = this.isActive(item); const active = this.isActive(item);

6
src/views/menumodel/MenuModel.vue
View File

@ -110,6 +110,12 @@ const items: [
<td>null</td> <td>null</td>
<td>Style class of the menuitem.</td> <td>Style class of the menuitem.</td>
</tr> </tr>
<tr>
<td>key</td>
<td>object</td>
<td>null</td>
<td>Unique identifier of an item.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

90
src/views/panelmenu/PanelMenuDemo.vue
View File

@ -10,7 +10,15 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Default</h5>
<PanelMenu :model="items" /> <PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" v-model:expandedKeys="expandedKeys" />
</div> </div>
</div> </div>
@ -24,85 +32,96 @@ import PanelMenuDoc from './PanelMenuDoc';
export default { export default {
data() { data() {
return { return {
items: [ expandedKeys: {},
{ items: [{
key: '0',
label: 'File', label: 'File',
icon: 'pi pi-fw pi-file', icon: 'pi pi-fw pi-file',
items: [ items: [{
{ key: '0_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-plus', icon: 'pi pi-fw pi-plus',
items: [ items: [{
{ key: '0_0_0',
label: 'Bookmark', label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark' icon: 'pi pi-fw pi-bookmark'
}, },
{ {
key: '0_0_1',
label: 'Video', label: 'Video',
icon: 'pi pi-fw pi-video' icon: 'pi pi-fw pi-video'
} }
] ]
}, },
{ {
key: '0_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-trash' icon: 'pi pi-fw pi-trash'
}, },
{ {
key: '0_2',
label: 'Export', label: 'Export',
icon: 'pi pi-fw pi-external-link' icon: 'pi pi-fw pi-external-link'
} }
] ]
}, },
{ {
key: '1',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '1_0',
label: 'Left', label: 'Left',
icon: 'pi pi-fw pi-align-left' icon: 'pi pi-fw pi-align-left'
}, },
{ {
key: '1_1',
label: 'Right', label: 'Right',
icon: 'pi pi-fw pi-align-right' icon: 'pi pi-fw pi-align-right'
}, },
{ {
key: '1_2',
label: 'Center', label: 'Center',
icon: 'pi pi-fw pi-align-center' icon: 'pi pi-fw pi-align-center'
}, },
{ {
key: '1_3',
label: 'Justify', label: 'Justify',
icon: 'pi pi-fw pi-align-justify' icon: 'pi pi-fw pi-align-justify'
} }
] ]
}, },
{ {
key: '2',
label: 'Users', label: 'Users',
icon: 'pi pi-fw pi-user', icon: 'pi pi-fw pi-user',
items: [ items: [{
{ key: '2_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-user-plus', icon: 'pi pi-fw pi-user-plus',
}, },
{ {
key: '2_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-user-minus', icon: 'pi pi-fw pi-user-minus',
}, },
{ {
key: '2_2',
label: 'Search', label: 'Search',
icon: 'pi pi-fw pi-users', icon: 'pi pi-fw pi-users',
items: [ items: [{
{ key: '2_2_0',
label: 'Filter', label: 'Filter',
icon: 'pi pi-fw pi-filter', icon: 'pi pi-fw pi-filter',
items: [ items: [{
{ key: '2_2_0_0',
label: 'Print', label: 'Print',
icon: 'pi pi-fw pi-print' icon: 'pi pi-fw pi-print'
} }]
]
}, },
{ {
key: '2_2_1',
icon: 'pi pi-fw pi-bars', icon: 'pi pi-fw pi-bars',
label: 'List' label: 'List'
} }
@ -111,36 +130,61 @@ export default {
] ]
}, },
{ {
key: '3',
label: 'Events', label: 'Events',
icon: 'pi pi-fw pi-calendar', icon: 'pi pi-fw pi-calendar',
items: [ items: [{
{ key: '3_0',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '3_0_0',
label: 'Save', label: 'Save',
icon: 'pi pi-fw pi-calendar-plus' icon: 'pi pi-fw pi-calendar-plus'
}, },
{ {
key: '3_0_0',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
} }
] ]
}, },
{ {
key: '3_1',
label: 'Archieve', label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times', icon: 'pi pi-fw pi-calendar-times',
items: [ items: [{
{ key: '3_1_0',
label: 'Remove', label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
}]
} }
] ]
} }
] ]
} }
] },
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
} }
}, },
components: { components: {

386
src/views/panelmenu/PanelMenuDoc.vue
View File

@ -16,6 +16,7 @@ import PanelMenu from 'primevue/panelmenu';
</code></pre> </code></pre>
<div style="height: 400px; overflow:auto">
<pre v-code.script><code> <pre v-code.script><code>
export default { export default {
data() { data() {
@ -142,6 +143,7 @@ export default {
} }
</code></pre> </code></pre>
</div>
<h5>Templating</h5> <h5>Templating</h5>
<p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p> <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
@ -152,6 +154,202 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;/PanelMenu&gt; &lt;/PanelMenu&gt;
</template> </template>
</code></pre>
<h5>Programmatic Control</h5>
<p>If the menuitem has a <i>key</i> defined, PanelMenu 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>
<p>Example below expands and collapses all nodes with buttons.</p>
<pre v-code><code><template v-pre>
&lt;div&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;PanelMenu :model="items" v-model:expandedKeys="expandedKeys""&gt;&lt;/PanelMenu&gt;
</template>
</code></pre>
<div style="height: 400px; overflow:auto">
<pre v-code.script><code>
export default {
data() {
return {
items: [{
key: '0',
label: 'File',
icon: 'pi pi-fw pi-file',
items: [{
key: '0_0',
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [{
key: '0_0_0',
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
key: '0_0_1',
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
key: '0_1',
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
key: '0_2',
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
key: '1',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '1_0',
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
key: '1_1',
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
key: '1_2',
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
key: '2',
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [{
key: '2_0',
label: 'New',
icon: 'pi pi-fw pi-user-plus',
},
{
key: '2_1',
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
key: '2_2',
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [{
key: '2_2_0',
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [{
key: '2_2_0_0',
label: 'Print',
icon: 'pi pi-fw pi-print'
}]
},
{
key: '2_2_1',
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
key: '3',
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [{
key: '3_0',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '3_0_0',
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
key: '3_0_0',
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
key: '3_1',
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [{
key: '3_1_0',
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}]
}
]
}
],
expandedKeys: {}
}
},
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
}
}
}
</code></pre>
</div>
<p class="p-mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
<pre v-code.script><code>
export default {
data() {
return {
items: //menu model instance,
expandedKeys: {}
}
},
mounted() {
this.expandedKeys[this.items[0.key]] = true;
}
}
</code></pre> </code></pre>
<h5>Properties</h5> <h5>Properties</h5>
@ -172,6 +370,12 @@ export default {
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>An array of menuitems.</td> <td>An array of menuitems.</td>
</tr>
<tr>
<td>expandedKeys</td>
<td>array</td>
<td>null</td>
<td>A map of keys to represent the expansion state in controlled mode.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -257,7 +461,15 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<h5>Default</h5>
<PanelMenu :model="items" /> <PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" :expandedKeys="expandedKeys" />
</div> </div>
</template> </template>
@ -265,85 +477,96 @@ export default {
export default { export default {
data() { data() {
return { return {
items: [ expandedKeys: {},
{ items: [{
key: '0',
label: 'File', label: 'File',
icon: 'pi pi-fw pi-file', icon: 'pi pi-fw pi-file',
items: [ items: [{
{ key: '0_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-plus', icon: 'pi pi-fw pi-plus',
items: [ items: [{
{ key: '0_0_0',
label: 'Bookmark', label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark' icon: 'pi pi-fw pi-bookmark'
}, },
{ {
key: '0_0_1',
label: 'Video', label: 'Video',
icon: 'pi pi-fw pi-video' icon: 'pi pi-fw pi-video'
} }
] ]
}, },
{ {
key: '0_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-trash' icon: 'pi pi-fw pi-trash'
}, },
{ {
key: '0_2',
label: 'Export', label: 'Export',
icon: 'pi pi-fw pi-external-link' icon: 'pi pi-fw pi-external-link'
} }
] ]
}, },
{ {
key: '1',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '1_0',
label: 'Left', label: 'Left',
icon: 'pi pi-fw pi-align-left' icon: 'pi pi-fw pi-align-left'
}, },
{ {
key: '1_1',
label: 'Right', label: 'Right',
icon: 'pi pi-fw pi-align-right' icon: 'pi pi-fw pi-align-right'
}, },
{ {
key: '1_2',
label: 'Center', label: 'Center',
icon: 'pi pi-fw pi-align-center' icon: 'pi pi-fw pi-align-center'
}, },
{ {
key: '1_3',
label: 'Justify', label: 'Justify',
icon: 'pi pi-fw pi-align-justify' icon: 'pi pi-fw pi-align-justify'
} }
] ]
}, },
{ {
key: '2',
label: 'Users', label: 'Users',
icon: 'pi pi-fw pi-user', icon: 'pi pi-fw pi-user',
items: [ items: [{
{ key: '2_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-user-plus', icon: 'pi pi-fw pi-user-plus',
}, },
{ {
key: '2_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-user-minus', icon: 'pi pi-fw pi-user-minus',
}, },
{ {
key: '2_2',
label: 'Search', label: 'Search',
icon: 'pi pi-fw pi-users', icon: 'pi pi-fw pi-users',
items: [ items: [{
{ key: '2_2_0',
label: 'Filter', label: 'Filter',
icon: 'pi pi-fw pi-filter', icon: 'pi pi-fw pi-filter',
items: [ items: [{
{ key: '2_2_0_0',
label: 'Print', label: 'Print',
icon: 'pi pi-fw pi-print' icon: 'pi pi-fw pi-print'
} }]
]
}, },
{ {
key: '2_2_1',
icon: 'pi pi-fw pi-bars', icon: 'pi pi-fw pi-bars',
label: 'List' label: 'List'
} }
@ -352,36 +575,61 @@ export default {
] ]
}, },
{ {
key: '3',
label: 'Events', label: 'Events',
icon: 'pi pi-fw pi-calendar', icon: 'pi pi-fw pi-calendar',
items: [ items: [{
{ key: '3_0',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '3_0_0',
label: 'Save', label: 'Save',
icon: 'pi pi-fw pi-calendar-plus' icon: 'pi pi-fw pi-calendar-plus'
}, },
{ {
key: '3_0_0',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
} }
] ]
}, },
{ {
key: '3_1',
label: 'Archieve', label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times', icon: 'pi pi-fw pi-calendar-times',
items: [ items: [{
{ key: '3_1_0',
label: 'Remove', label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
}]
} }
] ]
} }
] ]
} }
] },
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
} }
} }
} }
@ -399,7 +647,15 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<h5>Default</h5>
<PanelMenu :model="items" /> <PanelMenu :model="items" />
<h5>Programmatic</h5>
<div class="p-mb-3">
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" :expandedKeys="expandedKeys" />
</div> </div>
</template> </template>
@ -408,84 +664,96 @@ import { ref } from 'vue';
export default { export default {
setup() { setup() {
const items = ref([ const expandedKeys = ref({});
{ const items = ref([{
key: '0',
label: 'File', label: 'File',
icon: 'pi pi-fw pi-file', icon: 'pi pi-fw pi-file',
items: [ items: [{
{ key: '0_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-plus', icon: 'pi pi-fw pi-plus',
items: [ items: [{
{ key: '0_0_0',
label: 'Bookmark', label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark' icon: 'pi pi-fw pi-bookmark'
}, },
{ {
key: '0_0_1',
label: 'Video', label: 'Video',
icon: 'pi pi-fw pi-video' icon: 'pi pi-fw pi-video'
} }
] ]
}, },
{ {
key: '0_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-trash' icon: 'pi pi-fw pi-trash'
}, },
{ {
key: '0_2',
label: 'Export', label: 'Export',
icon: 'pi pi-fw pi-external-link' icon: 'pi pi-fw pi-external-link'
} }
] ]
}, },
{ {
key: '1',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '1_0',
label: 'Left', label: 'Left',
icon: 'pi pi-fw pi-align-left' icon: 'pi pi-fw pi-align-left'
}, },
{ {
key: '1_1',
label: 'Right', label: 'Right',
icon: 'pi pi-fw pi-align-right' icon: 'pi pi-fw pi-align-right'
}, },
{ {
key: '1_2',
label: 'Center', label: 'Center',
icon: 'pi pi-fw pi-align-center' icon: 'pi pi-fw pi-align-center'
}, },
{ {
key: '1_3',
label: 'Justify', label: 'Justify',
icon: 'pi pi-fw pi-align-justify' icon: 'pi pi-fw pi-align-justify'
} }
] ]
}, },
{ {
key: '2',
label: 'Users', label: 'Users',
icon: 'pi pi-fw pi-user', icon: 'pi pi-fw pi-user',
items: [ items: [{
{ key: '2_0',
label: 'New', label: 'New',
icon: 'pi pi-fw pi-user-plus', icon: 'pi pi-fw pi-user-plus',
}, },
{ {
key: '2_1',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-user-minus', icon: 'pi pi-fw pi-user-minus',
}, },
{ {
key: '2_2',
label: 'Search', label: 'Search',
icon: 'pi pi-fw pi-users', icon: 'pi pi-fw pi-users',
items: [ items: [{
{ key: '2_2_0',
label: 'Filter', label: 'Filter',
icon: 'pi pi-fw pi-filter', icon: 'pi pi-fw pi-filter',
items: [ items: [{
{ key: '2_2_0_0',
label: 'Print', label: 'Print',
icon: 'pi pi-fw pi-print' icon: 'pi pi-fw pi-print'
} }]
]
}, },
{ {
key: '2_2_1',
icon: 'pi pi-fw pi-bars', icon: 'pi pi-fw pi-bars',
label: 'List' label: 'List'
} }
@ -494,38 +762,60 @@ export default {
] ]
}, },
{ {
key: '3',
label: 'Events', label: 'Events',
icon: 'pi pi-fw pi-calendar', icon: 'pi pi-fw pi-calendar',
items: [ items: [{
{ key: '3_0',
label: 'Edit', label: 'Edit',
icon: 'pi pi-fw pi-pencil', icon: 'pi pi-fw pi-pencil',
items: [ items: [{
{ key: '3_0_0',
label: 'Save', label: 'Save',
icon: 'pi pi-fw pi-calendar-plus' icon: 'pi pi-fw pi-calendar-plus'
}, },
{ {
key: '3_0_0',
label: 'Delete', label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
} }
] ]
}, },
{ {
key: '3_1',
label: 'Archieve', label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times', icon: 'pi pi-fw pi-calendar-times',
items: [ items: [{
{ key: '3_1_0',
label: 'Remove', label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus' icon: 'pi pi-fw pi-calendar-minus'
} }]
]
} }
] ]
} }
]); ]);
return { items } 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 { items, expandedKeys, expandAll, collapseAll, expandNode }
} }
} }
<\\/script> <\\/script>

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

@ -593,7 +593,7 @@ export default {
<td>expandedKeys</td> <td>expandedKeys</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>A map of keys to represent the state of the tree expansion state in controlled mode.</td> <td>A map of keys to represent the expansion state in controlled mode.</td>
</tr> </tr>
<tr> <tr>
<td>selectionMode</td> <td>selectionMode</td>