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

#1275 for TieredMenu

pull/1533/head
Cagatay Civici 2021-08-27 15:04:48 +03:00
parent 1bdf46a22c
commit 05565212bc
5 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,12 @@ const TieredMenuProps = [
type: "boolean",
default: "true",
description: "Whether to automatically manage layering."
},
{
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/tieredmenu/TieredMenu.d.ts vendored
View File

@ -6,6 +6,7 @@ interface TieredMenuProps {
appendTo?: string;
autoZIndex?: boolean;
baseZIndex?: number;
exact?: boolean;
}
declare class TieredMenu {

6
src/components/tieredmenu/TieredMenu.vue
View File

@ -2,7 +2,7 @@
<Teleport :to="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
<div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" />
<TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
</div>
</transition>
</Teleport>
@ -36,6 +36,10 @@ export default {
baseZIndex: {
type: Number,
default: 0
},
exact: {
type: Boolean,
default: true
}
},
target: null,

20
src/components/tieredmenu/TieredMenuSub.vue
View File

@ -4,13 +4,13 @@
<li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<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" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -19,7 +19,7 @@
</template>
<component v-else :is="template" :item="item"></component>
<TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :template="template"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" />
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
</template>
@ -53,6 +53,10 @@ export default {
template: {
type: Object,
default: null
},
exact: {
type: Boolean,
default: true
}
},
documentClickListener: null,
@ -200,8 +204,12 @@ export default {
}
]
},
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
}];
},
bindDocumentClickListener() {
if (!this.documentClickListener) {

18
src/views/tieredmenu/TieredMenuDoc.vue
View File

@ -182,6 +182,18 @@ toggle(event) {
&lt;/template&gt;
&lt;/TieredMenu&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;TieredMenu :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;/TieredMenu&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -226,6 +238,12 @@ toggle(event) {
<td>boolean</td>
<td>true</td>
<td>Whether to automatically manage layering.</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>