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

Fixed #377 - Separator problem with Menu

pull/388/head
cagataycivici 2020-07-10 14:58:28 +03:00
parent e1c25feda4
commit a9917c37a4
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,17 @@
<template> <template>
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave"> <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave">
<div ref="container" :class="containerClass" v-if="popup ? visible : true"> <div ref="container" :class="containerClass" v-if="popup ? overlayVisible : true">
<ul class="p-menu-list p-reset" role="menu"> <ul class="p-menu-list p-reset" role="menu">
<template v-for="(item, i) of model"> <template v-for="(item, i) of model">
<template v-if="item.items && item.visible !== false"> <template v-if="item.items && visible(item) && !item.separator">
<li class="p-submenu-header" :key="item.label+i" v-if="item.items">{{item.label}}</li> <li class="p-submenu-header" :key="item.label+i" v-if="item.items">{{item.label}}</li>
<Menuitem v-for="(child, j) of item.items" :key="child.label+i+j" :item="child" @click="itemClick" /> <template v-for="(child, j) of item.items">
</template> <Menuitem v-if="visible(child) && !child.separator" :key="child.label + i + j" :item="child" @click="itemClick" />
<template v-else> <li v-else-if="visible(child) && child.separator" class="p-menu-separator" :style="child.style" :key="'separator' + i + j" role="separator"></li>
<Menuitem :key="item.label+i" :item="item" @click="itemClick" /> </template>
</template> </template>
<li v-else-if="visible(item) && item.separator" class="p-menu-separator" :style="item.style" :key="'separator' + i" role="separator"></li>
<Menuitem v-else :key="item.label+i" :item="item" @click="itemClick" />
</template> </template>
</ul> </ul>
</div> </div>
@ -45,7 +47,7 @@ export default {
}, },
data() { data() {
return { return {
visible: false overlayVisible: false
}; };
}, },
target: null, target: null,
@ -72,18 +74,18 @@ export default {
this.hide(); this.hide();
}, },
toggle(event) { toggle(event) {
if (this.visible) if (this.overlayVisible)
this.hide(); this.hide();
else else
this.show(event); this.show(event);
}, },
show(event) { show(event) {
this.visible = true; this.overlayVisible = true;
this.relativeAlign = event.relativeAlign; this.relativeAlign = event.relativeAlign;
this.target = event.currentTarget; this.target = event.currentTarget;
}, },
hide() { hide() {
this.visible = false; this.overlayVisible = false;
this.target = false; this.target = false;
this.relativeAlign = false; this.relativeAlign = false;
}, },
@ -111,7 +113,7 @@ export default {
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if (this.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) { if (this.overlayVisible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
this.hide(); this.hide();
} }
}; };
@ -127,7 +129,7 @@ export default {
bindResizeListener() { bindResizeListener() {
if (!this.resizeListener) { if (!this.resizeListener) {
this.resizeListener = () => { this.resizeListener = () => {
if (this.visible) { if (this.overlayVisible) {
this.hide(); this.hide();
} }
}; };
@ -164,6 +166,9 @@ export default {
this.unbindResizeListener(); this.unbindResizeListener();
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.target = null; this.target = null;
},
visible(item) {
return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
} }
}, },
computed: { computed: {