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

#1275 for PanelMenu

pull/1533/head
Cagatay Civici 2021-08-27 16:31:55 +03:00
parent 22521d5817
commit 23f842e203
5 changed files with 53 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,12 @@ const PanelMenuProps = [
type: "array",
default: "null",
description: "A map of keys to represent the expansion state in controlled mode."
},
{
name: "exact",
type: "boolean",
default: "true",
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
}
];

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

@ -3,6 +3,7 @@ import { VNode } from 'vue';
interface PanelMenuProps {
model?: any[];
expandedKeys?: any;
exact?: boolean;
}
declare class PanelMenu {

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

@ -4,13 +4,13 @@
<div v-if="visible(item)" :class="getPanelClass(item)" :style="item.style">
<div :class="getHeaderClass(item)" :style="item.style">
<template v-if="!$slots.item">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" class="p-panelmenu-header-link" @click="onItemClick($event, item, navigate)" role="treeitem">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="getHeaderLinkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem">
<span v-if="item.icon" :class="getPanelIcon(item)"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link>
<a v-else :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
<a v-else :href="item.url" :class="getHeaderLinkClass(item)" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"
:aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
<span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
<span v-if="item.icon" :class="getPanelIcon(item)"></span>
@ -24,7 +24,7 @@
role="region" :id="ariaId +'_content' " :aria-labelledby="ariaId +'_header'">
<div class="p-panelmenu-content" v-if="item.items">
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" :template="$slots.item"
:expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" />
:expandedKeys="expandedKeys" @item-toggle="updateExpandedKeys" :exact="exact" />
</div>
</div>
</transition>
@ -48,6 +48,10 @@ export default {
expandedKeys: {
type: null,
default: null
},
exact: {
type: Boolean,
default: true
}
},
data() {
@ -107,6 +111,12 @@ export default {
getPanelIcon(item) {
return ['p-menuitem-icon', item.icon];
},
getHeaderLinkClass(item, routerProps) {
return ['p-panelmenu-header-link', {
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
},
isActive(item) {
return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;
},

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

@ -3,13 +3,13 @@
<template v-for="(item, i) of model" :key="item.label + i.toString()">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" :class="getLinkClass(item)" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass(item, {isActive, isExactActive})" @click="onItemClick($event, item, navigate)" role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)" :tabindex="disabled(item) ? null : '0'">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span>
@ -20,7 +20,7 @@
<transition name="p-toggleable-content">
<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"
:expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" />
:expandedKeys="expandedKeys" @item-toggle="$emit('item-toggle', $event)" :exact="exact"/>
</div>
</transition>
</li>
@ -45,6 +45,10 @@ export default {
expandedKeys: {
type: null,
default: null
},
exact: {
type: Boolean,
default: true
}
},
data() {
@ -84,8 +88,12 @@ export default {
getItemClass(item) {
return ['p-menuitem', item.className];
},
getLinkClass(item) {
return ['p-menuitem-link', {'p-disabled': this.disabled(item)}];
linkClass(item, routerProps) {
return ['p-menuitem-link', {
'p-disabled': this.disabled(item),
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
},
isActive(item) {
return this.expandedKeys ? this.expandedKeys[item.key] : item === this.activeItem;

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

@ -154,6 +154,18 @@ export default {
&lt;/template&gt;
&lt;/PanelMenu&gt;
</template>
</code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre>
&lt;PanelMenu :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/PanelMenu&gt;
</template>
</code></pre>
<h5>Programmatic Control</h5>
@ -376,6 +388,12 @@ export default {
<td>array</td>
<td>null</td>
<td>A map of keys to represent the expansion state in controlled mode.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr>
</tbody>
</table>