Refactored and applied fixes to Menu component
parent
f77e0f76fe
commit
38a411e2e9
|
@ -3,7 +3,7 @@
|
||||||
<div ref="container" :class="containerClass" v-if="popup ? visible : true">
|
<div ref="container" :class="containerClass" v-if="popup ? visible : 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">
|
<template v-if="item.items && item.visible !== false">
|
||||||
<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" />
|
<Menuitem v-for="(child, j) of item.items" :key="child.label+i+j" :item="child" @click="itemClick" />
|
||||||
</template>
|
</template>
|
||||||
|
@ -41,7 +41,7 @@ export default {
|
||||||
baseZIndex: {
|
baseZIndex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -54,9 +54,7 @@ export default {
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
this.restoreAppend();
|
this.restoreAppend();
|
||||||
this.unbindResizeListener();
|
this.unbindResizeListener();
|
||||||
if (this.dismissable) {
|
|
||||||
this.unbindOutsideClickListener();
|
this.unbindOutsideClickListener();
|
||||||
}
|
|
||||||
this.target = null;
|
this.target = null;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -64,8 +62,9 @@ export default {
|
||||||
const item = event.item;
|
const item = event.item;
|
||||||
if (item.command) {
|
if (item.command) {
|
||||||
item.command(event);
|
item.command(event);
|
||||||
|
event.originalEvent.preventDefault();
|
||||||
}
|
}
|
||||||
this.overlayVisible = false;
|
this.hide();
|
||||||
},
|
},
|
||||||
toggle(event) {
|
toggle(event) {
|
||||||
if (this.visible)
|
if (this.visible)
|
||||||
|
@ -96,16 +95,12 @@ export default {
|
||||||
},
|
},
|
||||||
alignOverlay() {
|
alignOverlay() {
|
||||||
DomHandler.absolutePosition(this.$refs.container, this.target);
|
DomHandler.absolutePosition(this.$refs.container, this.target);
|
||||||
|
|
||||||
if (DomHandler.getOffset(this.$refs.container).top < DomHandler.getOffset(this.target).top) {
|
|
||||||
DomHandler.addClass(this.$refs.container, 'p-overlaypanel-flipped');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
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.visible && this.$refs.container && !this.$refs.container.contains(event.target) && !this.isTargetClicked(event)) {
|
||||||
this.visible = false;
|
this.hide();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
document.addEventListener('click', this.outsideClickListener);
|
document.addEventListener('click', this.outsideClickListener);
|
||||||
|
@ -121,7 +116,7 @@ export default {
|
||||||
if (!this.resizeListener) {
|
if (!this.resizeListener) {
|
||||||
this.resizeListener = () => {
|
this.resizeListener = () => {
|
||||||
if (this.visible) {
|
if (this.visible) {
|
||||||
this.visible = false;
|
this.hide();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
window.addEventListener('resize', this.resizeListener);
|
window.addEventListener('resize', this.resizeListener);
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<li :class="containerClass" role="menuitem" :style="item.style">
|
<li :class="containerClass" role="menuitem" :style="item.style" v-if="item.visible !== false">
|
||||||
<a :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
|
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
|
||||||
|
<span :class="['p-menuitem-icon', item.icon]"></span>
|
||||||
|
<span class="p-menuitem-text">{{item.label}}</span>
|
||||||
|
</router-link>
|
||||||
|
<a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
|
||||||
<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>
|
</a>
|
||||||
|
@ -18,7 +22,6 @@ export default {
|
||||||
originalEvent: event,
|
originalEvent: event,
|
||||||
item: this.item
|
item: this.item
|
||||||
});
|
});
|
||||||
event.preventDefault();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -49,16 +49,12 @@ export default {
|
||||||
items: [{
|
items: [{
|
||||||
label: 'Vue Website',
|
label: 'Vue Website',
|
||||||
icon: 'pi pi-external-link',
|
icon: 'pi pi-external-link',
|
||||||
command: () => {
|
url: 'https://vuejs.org/'
|
||||||
window.location.href = 'https://vuejs.org/'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Upload',
|
label: 'Router',
|
||||||
icon: 'pi pi-upload',
|
icon: 'pi pi-upload',
|
||||||
command: () => {
|
to: '/fileupload'
|
||||||
window.location.hash = "/fileupload"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
]
|
]
|
||||||
|
|
|
@ -35,16 +35,12 @@ export default {
|
||||||
{
|
{
|
||||||
label: 'Vue Website',
|
label: 'Vue Website',
|
||||||
icon: 'pi pi-external-link',
|
icon: 'pi pi-external-link',
|
||||||
command: () => {
|
url: 'https://vuejs.org/'
|
||||||
window.location.href = 'https://vuejs.org/'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Upload',
|
label: 'Router',
|
||||||
icon: 'pi pi-upload',
|
icon: 'pi pi-upload',
|
||||||
command: () => {
|
to: '/fileupload'
|
||||||
window.location.hash = "/fileupload"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -58,18 +54,18 @@ export default {
|
||||||
<h3>SubMenus</h3>
|
<h3>SubMenus</h3>
|
||||||
<p>Menu supports one level of nesting via subitems of an item.</p>
|
<p>Menu supports one level of nesting via subitems of an item.</p>
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
let items: [
|
const items: [
|
||||||
{
|
{
|
||||||
label: 'Options',
|
label: 'Options',
|
||||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
|
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
||||||
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Account',
|
label: 'Account',
|
||||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
|
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
||||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
|
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Popup Mode</h3>
|
<h3>Popup Mode</h3>
|
||||||
|
@ -78,6 +74,12 @@ let items: [
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
<Menu ref="menu" :model="items" :popup="true" />
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<CodeHighlight lang="js">
|
||||||
|
toggle(event) {
|
||||||
|
this.$refs.menu.toggle(event);
|
||||||
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
@ -239,16 +241,12 @@ export default {
|
||||||
items: [{
|
items: [{
|
||||||
label: 'Vue Website',
|
label: 'Vue Website',
|
||||||
icon: 'pi pi-external-link',
|
icon: 'pi pi-external-link',
|
||||||
command: () => {
|
url: 'https://vuejs.org/'
|
||||||
window.location.href = 'https://vuejs.org/'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Upload',
|
label: 'Router',
|
||||||
icon: 'pi pi-upload',
|
icon: 'pi pi-upload',
|
||||||
command: () => {
|
to: '/fileupload'
|
||||||
window.location.hash = "/fileupload"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
]
|
]
|
||||||
|
|
|
@ -14,15 +14,15 @@
|
||||||
const items: [
|
const items: [
|
||||||
{
|
{
|
||||||
label: 'Options',
|
label: 'Options',
|
||||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
|
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
||||||
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Account',
|
label: 'Account',
|
||||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
|
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
||||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
|
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
||||||
}
|
}
|
||||||
]
|
];
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
|
<p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
|
||||||
|
@ -50,6 +50,12 @@ const items: [
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Icon of the item.</td>
|
<td>Icon of the item.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>to</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>null</td>
|
||||||
|
<td>Path of the route.</td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>command</td>
|
<td>command</td>
|
||||||
<td>function</td>
|
<td>function</td>
|
||||||
|
@ -118,20 +124,18 @@ const items = [
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Navigation</h3>
|
<h3>Navigation</h3>
|
||||||
<p>Navigation is specified using url property for external links or using command function for internal router.</p>
|
<p>Navigation is specified using <i>url</i> property for external links or using <i>to</i> property for internal routing.</p>
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
label: 'New',
|
label: 'Internal',
|
||||||
icon: 'pi pi-plus',
|
icon: 'pi pi-plus',
|
||||||
command: (event) => {
|
to: '/fileupload'
|
||||||
window.location.hash = "/fileupload";
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Link',
|
label: 'External',
|
||||||
icon: 'pi pi-check',
|
icon: 'pi pi-check',
|
||||||
url: 'https://www.primefaces.org/primereact'
|
url: 'https://www.primefaces.org/primevue'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
Loading…
Reference in New Issue