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

#1275 for Megamenu

pull/1533/head
Cagatay Civici 2021-08-27 15:58:54 +03:00
parent 23970ebedf
commit 22521d5817
4 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,12 @@ const MegaMenuProps = [
type: "string",
default: "horizontal",
description: "Defines the orientation, valid values are horizontal and vertical."
},
{
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/megamenu/MegaMenu.d.ts vendored
View File

@ -3,6 +3,7 @@ import { VNode } from 'vue';
interface MegaMenuProps {
model?: any[];
orientation?: string;
exact?: boolean;
}
declare class MegaMenu {

24
src/components/megamenu/MegaMenu.vue
View File

@ -5,13 +5,13 @@
<li v-if="visible(category)" :class="getCategoryClass(category)" :style="category.style"
@mouseenter="onCategoryMouseEnter($event, category)" role="none">
<template v-if="!$slots.item">
<router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href}">
<a :href="href" :class="getLinkClass(category)" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
<router-link v-if="category.to && !disabled(category)" :to="category.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" :class="linkClass(category, {isActive, isExactActive})" @click="onCategoryClick($event, category, navigate)" @keydown="onCategoryKeydown($event, category)" role="menuitem" v-ripple>
<span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span class="p-menuitem-text">{{category.label}}</span>
</a>
</router-link>
<a v-else :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
<a v-else :href="category.url" :class="linkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="disabled(category) ? null : '0'" v-ripple>
<span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span class="p-menuitem-text">{{category.label}}</span>
@ -27,13 +27,13 @@
<template v-for="(item, i) of submenu.items" :key="item.label + i.toString()">
<li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator">
<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="getLinkClass(item)" @click="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
<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="onLeafClick($event, item, navigate)" role="menuitem" v-ripple>
<span v-if="item.icon" :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="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" @click="onLeafClick($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span :class="getSubmenuIcon()" v-if="item.items"></span>
@ -70,6 +70,10 @@ export default {
orientation: {
type: String,
default: 'horizontal'
},
exact: {
type: Boolean,
default: true
}
},
documentClickListener: null,
@ -271,8 +275,12 @@ export default {
getSubmenuItemClass(item) {
return ['p-menuitem', item.class];
},
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/megamenu/MegaMenuDoc.vue
View File

@ -155,6 +155,18 @@ export default {
&lt;/template&gt;
&lt;/MegaMenu&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;MegaMenu :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;/MegaMenu&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -181,6 +193,12 @@ export default {
<td>string</td>
<td>horizontal</td>
<td>Defines the orientation, valid values are horizontal and vertical.</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>