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> <template>
<li :class="containerClass" v-if="visible()"> <li :class="containerClass" v-if="visible()">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link"> <router-link v-if="item.to" :to="item.to" custom v-slot="{navigate, href}">
<span v-if="item.icon" :class="iconClass"></span> <a :href="href" class="p-menuitem-link" @click="onClick($event, navigate)">
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span> <span v-if="item.icon" :class="iconClass"></span>
<span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link> </router-link>
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target"> <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
<span v-if="item.icon" :class="iconClass"></span> <span v-if="item.icon" :class="iconClass"></span>
@ -17,13 +19,17 @@ export default {
item: null item: null
}, },
methods: { methods: {
onClick(event) { onClick(event, navigate) {
if (this.item.command) { if (this.item.command) {
this.item.command({ this.item.command({
originalEvent: event, originalEvent: event,
item: this.item item: this.item
}); });
} }
if (this.item.to && navigate) {
navigate(event);
}
}, },
visible() { visible() {
return (typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false); 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"> <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" <li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator" :key="item.label + i"
@mouseenter="onItemMouseEnter($event, item)"> @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> <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<span :class="['p-menuitem-icon', item.icon]"></span> <a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple role="menuitem">
<span class="p-menuitem-text">{{item.label}}</span> <span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link> </router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)" v-ripple <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-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span> <span class="p-menuitem-text">{{item.label}}</span>
<span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span> <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
@ -65,16 +67,12 @@ export default {
this.activeItem = item; this.activeItem = item;
}, },
onItemClick(event, item) { onItemClick(event, item, navigate) {
if (item.disabled) { if (item.disabled) {
event.preventDefault(); event.preventDefault();
return; return;
} }
if (!item.url && !item.to) {
event.preventDefault();
}
if (item.command) { if (item.command) {
item.command({ item.command({
originalEvent: event, 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) { if (!item.items) {
this.onLeafClick(); this.onLeafClick();
} }
if (item.to && navigate) {
navigate(event);
}
}, },
onLeafClick() { onLeafClick() {
this.activeItem = null; this.activeItem = null;

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

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

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

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

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

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

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

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

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

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

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

@ -3,9 +3,11 @@
<ul role="tablist"> <ul role="tablist">
<template v-for="(item,index) of model"> <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)"> <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"> <router-link :to="item.to" v-if="!isItemDisabled(item)" custom v-slot="{navigate, href}">
<span class="p-steps-number">{{index + 1}}</span> <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation">
<span class="p-steps-title">{{item.label}}</span> <span class="p-steps-number">{{index + 1}}</span>
<span class="p-steps-title">{{item.label}}</span>
</a>
</router-link> </router-link>
<span v-else class="p-menuitem-link" role="presentation"> <span v-else class="p-menuitem-link" role="presentation">
<span class="p-steps-number">{{index + 1}}</span> <span class="p-steps-number">{{index + 1}}</span>
@ -36,7 +38,7 @@ export default {
} }
}, },
methods: { methods: {
onItemClick(event, item) { onItemClick(event, item, navigate) {
if (item.disabled || this.readonly) { if (item.disabled || this.readonly) {
event.preventDefault(); event.preventDefault();
return; return;
@ -48,6 +50,10 @@ export default {
item: item item: item
}); });
} }
if (item.to && navigate) {
navigate(event);
}
}, },
isActive(item) { isActive(item) {
return this.activeRoute === item.to || this.activeRoute === item.to + '/' ; 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"> <ul ref="nav" class="p-tabmenu-nav p-reset" role="tablist">
<template v-for="(item,i) of model"> <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)"> <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> <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href}">
<span :class="getItemIcon(item)" v-if="item.icon"></span> <a :href="href" class="p-menuitem-link" @click="onItemClick($event, item, navigate)" role="presentation" v-ripple>
<span class="p-menuitem-text">{{item.label}}</span> <span :class="getItemIcon(item)" v-if="item.icon"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link> </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> <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> <span :class="getItemIcon(item)" v-if="item.icon"></span>
@ -36,7 +38,7 @@ export default {
this.updateInkBar(); this.updateInkBar();
}, },
methods: { methods: {
onItemClick(event, item) { onItemClick(event, item, navigate) {
if (item.disabled) { if (item.disabled) {
event.preventDefault(); event.preventDefault();
return; return;
@ -48,9 +50,13 @@ export default {
item: item item: item
}); });
} }
if (item.to && navigate) {
navigate(event);
}
}, },
isActive(item) { isActive(item) {
return this.activeRoute.startsWith(item.to); return this.activeRoute === item.to;
}, },
getItemClass(item) { getItemClass(item) {
return ['p-tabmenuitem', item.class, { return ['p-tabmenuitem', item.class, {

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

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