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

Fixed #536 - Menu components with web router refresh the whole page

pull/599/head
Cagatay Civici 2020-10-22 14:50:31 +03:00
parent 9572a804d5
commit 3f2b51a487
10 changed files with 114 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/breadcrumb/BreadcrumbItem.vue
View File

@ -1,8 +1,10 @@
<template>
<li :class="containerClass" v-if="visible()">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
<span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
<span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
<span v-if="item.icon" :class="iconClass"></span>
@ -17,13 +19,17 @@ export default {
item: null
},
methods: {
onClick(event) {
onClick(event, navigate) {
if (this.item.command) {
this.item.command({
originalEvent: event,
item: this.item
});
}
if (this.item.to && navigate) {
navigate(event);
}
},
visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false);

27
src/components/contextmenu/ContextMenuSub.vue
View File

@ -4,12 +4,14 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)" role="menuitem" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple 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" @click="onItemClick($event, item)" v-ripple
:aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
:aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem" :tabindex="item.disabled ? null : '0'">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@ -65,16 +67,12 @@ export default {
this.activeItem = item;
},
onItemClick(event, item) {
onItemClick(event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
@ -82,9 +80,20 @@ export default {
});
}
if (item.items) {
if (this.activeItem && item === this.activeItem)
this.activeItem = null;
else
this.activeItem = item;
}
if (!item.items) {
this.onLeafClick();
}
if (item.to && navigate) {
navigate(event);
}
},
onLeafClick() {
this.activeItem = null;

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

@ -4,7 +4,13 @@
<template v-for="(category,index) of model">
<li v-if="visible(category)" :key="category.label + '_' + index" :class="getCategoryClass(category)" :style="category.style"
@mouseenter="onCategoryMouseEnter($event, category)" role="none">
<a :href="category.url" :class="getLinkClass(category)" :target="category.target" @click="onCategoryClick($event, category)" @keydown="onCategoryKeydown($event, category)"
<router-link v-if="category.to && !category.disabled" :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>
<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)"
role="menuitem" :aria-haspopup="category.items != null" :aria-expanded="category === activeItem" :tabindex="category.disabled ? null : '0'" v-ripple>
<span v-if="category.icon" :class="getCategoryIcon(category)"></span>
<span class="p-menuitem-text">{{category.label}}</span>
@ -17,9 +23,11 @@
<li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
<template v-for="(item, i) of submenu.items">
<li role="none" :class="getSubmenuItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onLeafClick($event, item)" role="menuitem" v-ripple>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" :class="getLinkClass(item)" @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="item.disabled ? null : '0'" v-ripple>
<span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
@ -67,16 +75,12 @@ export default {
this.unbindDocumentClickListener();
},
methods: {
onLeafClick(event, item) {
onLeafClick(event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
@ -85,6 +89,10 @@ export default {
}
this.activeItem = null;
if (item.to && navigate) {
navigate(event);
}
},
onCategoryMouseEnter(event, category) {
if (category.disabled) {
@ -96,16 +104,12 @@ export default {
this.activeItem = category;
}
},
onCategoryClick(event, category) {
onCategoryClick(event, category, navigate) {
if (category.disabled) {
event.preventDefault();
return;
}
if (!category.url && !category.to) {
event.preventDefault();
}
if (category.command) {
category.command({
originalEvent: event,
@ -123,6 +127,10 @@ export default {
this.bindDocumentClickListener();
}
}
if (category.to && navigate) {
navigate(event);
}
},
onCategoryKeydown(event, category) {
let listItem = event.currentTarget.parentElement;

6
src/components/menu/Menu.vue
View File

@ -78,8 +78,12 @@ export default {
if (item.command) {
item.command(event);
event.originalEvent.preventDefault();
}
if (item.to && event.navigate) {
event.navigate(event.originalEvent);
}
this.hide();
},
toggle(event) {

13
src/components/menu/Menuitem.vue
View File

@ -1,8 +1,10 @@
<template>
<li :class="containerClass" role="none" :style="item.style" v-if="visible()">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="linkClass" role="menuitem" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" @click="onClick($event, navigate)" :class="linkClass" v-ripple 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="linkClass" @click="onClick" :target="item.target" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
@ -20,10 +22,11 @@ export default {
item: null
},
methods: {
onClick(event) {
onClick(event, navigate) {
this.$emit('click', {
originalEvent: event,
item: this.item
item: this.item,
navigate: navigate
});
},
visible() {

19
src/components/menubar/MenubarSub.vue
View File

@ -3,10 +3,11 @@
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :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">
<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"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
@ -87,16 +88,12 @@ export default {
this.activeItem = item;
}
},
onItemClick(event, item) {
onItemClick(event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
@ -114,6 +111,10 @@ export default {
if (!item.items) {
this.onLeafClick();
}
if (item.to && navigate) {
navigate(event);
}
},
onLeafClick() {
this.activeItem = null;

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

@ -2,10 +2,11 @@
<ul class="p-submenu-list" role="tree">
<template v-for="(item, i) of model">
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click="onItemClick($event, item)"
role="treeitem" :aria-expanded="isActive(item)">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :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)">
<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)"
role="treeitem" :aria-expanded="isActive(item)" :tabindex="item.disabled ? null : '0'">
@ -39,16 +40,12 @@ export default {
}
},
methods: {
onItemClick($event, item) {
onItemClick($event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
@ -60,6 +57,10 @@ export default {
this.activeItem = null;
else
this.activeItem = item;
if (item.to && navigate) {
navigate(event);
}
},
getItemClass(item) {
return ['p-menuitem', item.className];

14
src/components/steps/Steps.vue
View File

@ -3,9 +3,11 @@
<ul role="tablist">
<template v-for="(item,index) of model">
<li v-if="visible(item)" :key="item.to" :class="getItemClass(item)" :style="item.style" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" v-if="!isItemDisabled(item)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
<router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href}">
<a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</a>
</router-link>
<span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-number">{{index + 1}}</span>
@ -36,7 +38,7 @@ export default {
}
},
methods: {
onItemClick(event, item) {
onItemClick(event, item, navigate) {
if (item.disabled || this.readonly) {
event.preventDefault();
return;
@ -48,6 +50,10 @@ export default {
item: item
});
}
if (item.to && navigate) {
navigate(event);
}
},
isActive(item) {
return this.activeRoute === item.to || this.activeRoute === item.to + '/' ;

16
src/components/tabmenu/TabMenu.vue
View File

@ -3,9 +3,11 @@
<ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
<template v-for="(item,i) of model">
<li :key="item.label + '_' + i" :class="getItemClass(item)" :style="item.style" v-if="visible(item)" role="tab" :aria-selected="isActive(item)" :aria-expanded="isActive(item)">
<router-link v-if="item.to && !item.disabled" :to="item.to" class="p-menuitem-link" @click="onItemClick($event, item)" role="presentation" v-ripple>
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
<span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link>
<a v-else :href="item.url" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)" role="presentation" :tabindex="item.disabled ? null : '0'" v-ripple>
<span :class="getItemIcon(item)" v-if="item.icon"></span>
@ -36,7 +38,7 @@ export default {
this.updateInkBar();
},
methods: {
onItemClick(event, item) {
onItemClick(event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
@ -48,9 +50,13 @@ export default {
item: item
});
}
if (item.to && navigate) {
navigate(event);
}
},
isActive(item) {
return this.activeRoute.startsWith(item.to);
return this.activeRoute === item.to;
},
getItemClass(item) {
return ['p-tabmenuitem', item.class, {

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

@ -3,10 +3,11 @@
<template v-for="(item, i) of model">
<li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)" role="none">
<router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" v-ripple
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
<router-link v-if="item.to && !item.disabled" :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">
<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"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="item.disabled ? null : '0'" v-ripple>
@ -84,16 +85,12 @@ export default {
this.activeItem = item;
}
},
onItemClick(event, item) {
onItemClick(event, item, navigate) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
@ -111,6 +108,10 @@ export default {
if (!item.items) {
this.onLeafClick();
}
if (item.to && navigate) {
navigate(event);
}
},
onLeafClick() {
this.activeItem = null;