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

Refactored and applied fixes to Menu component

pull/104/head
cagataycivici 2019-12-02 14:02:01 +03:00
parent f77e0f76fe
commit 38a411e2e9
5 changed files with 76 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
<template>
<transition name="p-input-overlay" @enter="onEnter" @leave="onLeave">
<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">
<template v-for="(item, i) of model">
<template v-if="item.items">
<li class="p-submenu-header " :key="item.label+i" v-if="item.items">{{item.label}}</li>
<template v-if="item.items && item.visible !== false">
<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>
<template v-else>
@ -41,7 +41,7 @@ export default {
baseZIndex: {
type: Number,
default: 0
},
}
},
data() {
return {
@ -54,9 +54,7 @@ export default {
beforeDestroy() {
this.restoreAppend();
this.unbindResizeListener();
if (this.dismissable) {
this.unbindOutsideClickListener();
}
this.unbindOutsideClickListener();
this.target = null;
},
methods: {
@ -64,8 +62,9 @@ export default {
const item = event.item;
if (item.command) {
item.command(event);
event.originalEvent.preventDefault();
}
this.overlayVisible = false;
this.hide();
},
toggle(event) {
if (this.visible)
@ -96,16 +95,12 @@ export default {
},
alignOverlay() {
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() {
if (!this.outsideClickListener) {
this.outsideClickListener = (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);
@ -121,7 +116,7 @@ export default {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.visible) {
this.visible = false;
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);

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

@ -1,10 +1,14 @@
<template>
<li :class="containerClass" role="menuitem" :style="item.style">
<a :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</li>
<li :class="containerClass" role="menuitem" :style="item.style" v-if="item.visible !== false">
<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-text">{{item.label}}</span>
</a>
</li>
</template>
<script>
@ -18,7 +22,6 @@ export default {
originalEvent: event,
item: this.item
});
event.preventDefault();
}
},
computed: {

10
src/views/menu/MenuDemo.vue
View File

@ -49,16 +49,12 @@ export default {
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
url: 'https://vuejs.org/'
},
{
label: 'Upload',
label: 'Router',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
to: '/fileupload'
}
]}
]

80
src/views/menu/MenuDoc.vue
View File

@ -35,17 +35,13 @@ export default {
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
url: 'https://vuejs.org/'
},
{
label: 'Upload',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
}
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
}
@ -58,18 +54,18 @@ export default {
<h3>SubMenus</h3>
<p>Menu supports one level of nesting via subitems of an item.</p>
<CodeHighlight lang="js">
let items: [
const items: [
{
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: 'Account',
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
}
]
];
</CodeHighlight>
<h3>Popup Mode</h3>
@ -78,6 +74,12 @@ let items: [
<CodeHighlight>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu ref="menu" :model="items" :popup="true" /&gt;
</CodeHighlight>
<CodeHighlight lang="js">
toggle(event) {
this.$refs.menu.toggle(event);
}
</CodeHighlight>
<h3>Properties</h3>
@ -169,26 +171,26 @@ let items: [
</tr>
</thead>
<tbody>
<tr>
<td>p-menu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
<tr>
<td>p-menu</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-menu-list</td>
<td>List element.</td>
</tr>
<tr>
<td>p-menuitem</td>
<td>Menuitem element.</td>
</tr>
<tr>
<td>p-menuitem-text</td>
<td>Label of a menuitem.</td>
</tr>
<tr>
<td>p-menuitem-icon</td>
<td>Icon of a menuitem.</td>
</tr>
</tbody>
</table>
</div>
@ -239,16 +241,12 @@ export default {
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/'
}
url: 'https://vuejs.org/'
},
{
label: 'Upload',
label: 'Router',
icon: 'pi pi-upload',
command: () => {
window.location.hash = "/fileupload"
}
to: '/fileupload'
}
]}
]

26
src/views/menumodel/MenuModel.vue
View File

@ -14,15 +14,15 @@
const items: [
{
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: 'Account',
items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
}
]
];
</CodeHighlight>
<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>Icon of the item.</td>
</tr>
<tr>
<td>to</td>
<td>string</td>
<td>null</td>
<td>Path of the route.</td>
</tr>
<tr>
<td>command</td>
<td>function</td>
@ -118,20 +124,18 @@ const items = [
</CodeHighlight>
<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">
const items = [
{
label: 'New',
label: 'Internal',
icon: 'pi pi-plus',
command: (event) => {
window.location.hash = "/fileupload";
}
to: '/fileupload'
},
{
label: 'Link',
label: 'External',
icon: 'pi pi-check',
url: 'https://www.primefaces.org/primereact'
url: 'https://www.primefaces.org/primevue'
}
];
</CodeHighlight>