vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Updated PanelMenu docs

Browse source
This commit is contained in:
Cagatay Civici 2023-11-08 11:33:18 +03:00
parent 16c8e054fa
commit c7975c24ac
8 changed files with 1240 additions and 1340 deletions
Download patch file Download diff file Expand all files Collapse all files

337
doc/panelmenu/ControlledDoc.vue Normal file
View file

@ -0,0 +1,337 @@
<template>
<DocSectionText v-bind="$attrs">
<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.
</p>
</DocSectionText>
<div class="card flex flex-column align-items-center gap-3">
<Button type="button" label="Toggle All" text @click="toggleAll" />
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
expandedKeys: {},
items: [
{
key: '0',
label: 'Users',
icon: 'pi pi-users',
items: [
{
key: '0_1',
label: 'New',
items: [
{
key: '0_1_0',
label: 'Member'
},
{
key: '0_1_1',
label: 'Group'
}
]
},
{
key: '0_2',
label: 'Search'
}
]
},
{
key: '1',
label: 'Tasks',
icon: 'pi pi-server',
items: [
{
key: '1_0',
label: 'Add New'
},
{
key: '1_1',
label: 'Pending'
},
{
key: '1_2',
label: 'Overdue'
}
]
},
{
key: '2',
label: 'Calendar',
icon: 'pi pi-calendar',
items: [
{
key: '2_0',
label: 'New Event'
},
{
key: '2_1',
label: 'Today'
},
{
key: '2_2',
label: 'This Week'
}
]
}
],
code: {
basic: `
<Button type="button" label="Toggle All" text @click="toggleAll" />
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />
`,
options: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<Button type="button" label="Toggle All" text @click="toggleAll" />
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
</div>
</template>
<script>
export default {
data() {
return {
expandedKeys: {},
items: [
{
key: '0',
label: 'Users',
icon: 'pi pi-users',
items: [
{
key: '0_1',
label: 'New',
items: [
{
key: '0_1_0',
label: 'Member'
},
{
key: '0_1_1',
label: 'Group'
}
]
},
{
key: '0_2',
label: 'Search'
}
]
},
{
key: '1',
label: 'Tasks',
icon: 'pi pi-server',
items: [
{
key: '1_0',
label: 'Add New'
},
{
key: '1_1',
label: 'Pending'
},
{
key: '1_2',
label: 'Overdue'
}
]
},
{
key: '2',
label: 'Calendar',
icon: 'pi pi-calendar',
items: [
{
key: '2_0',
label: 'New Event'
},
{
key: '2_1',
label: 'Today'
},
{
key: '2_2',
label: 'This Week'
}
]
}
]
};
},
methods: {
toggleAll() {
if (Object.keys(this.expandedKeys).length) this.collapseAll();
else this.expandAll();
},
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);
}
}
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex flex-column align-items-center gap-3">
<Button type="button" label="Toggle All" text @click="toggleAll" />
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" class="w-full md:w-20rem" />
</div>
</template>
<script setup>
import { ref } from "vue";
const expandedKeys = ref({});
const items = ref([
{
key: '0',
label: 'Users',
icon: 'pi pi-users',
items: [
{
key: '0_1',
label: 'New',
items: [
{
key: '0_1_0',
label: 'Member'
},
{
key: '0_1_1',
label: 'Group'
}
]
},
{
key: '0_2',
label: 'Search'
}
]
},
{
key: '1',
label: 'Tasks',
icon: 'pi pi-server',
items: [
{
key: '1_0',
label: 'Add New'
},
{
key: '1_1',
label: 'Pending'
},
{
key: '1_2',
label: 'Overdue'
}
]
},
{
key: '2',
label: 'Calendar',
icon: 'pi pi-calendar',
items: [
{
key: '2_0',
label: 'New Event'
},
{
key: '2_1',
label: 'Today'
},
{
key: '2_2',
label: 'This Week'
}
]
}
]);
const toggleAll = () => {
if (Object.keys(expandedKeys.value).length) collapseAll();
else expandAll();
}
const expandAll = () => {
for (let node of items.value) {
expandNode(node);
}
expandedKeys.value = {...expandedKeys.value};
};
const collapseAll = () => {
expandedKeys.value = {};
};
const expandNode = (node) => {
if (node.items && node.items.length) {
expandedKeys.value[node.key] = true;
for (let child of node.items) {
expandNode(child);
}
}
};
<\/script>
`
}
};
},
methods: {
toggleAll() {
if (Object.keys(this.expandedKeys).length) this.collapseAll();
else this.expandAll();
},
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);
}
}
}
}
};
</script>