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

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

@ -3,8 +3,8 @@
<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>
<template v-else> <template v-else>
@ -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);

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

@ -1,10 +1,14 @@
<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>
</li> </li>
</template> </template>
<script> <script>
@ -18,7 +22,6 @@ export default {
originalEvent: event, originalEvent: event,
item: this.item item: this.item
}); });
event.preventDefault();
} }
}, },
computed: { computed: {

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

@ -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"
}
} }
]} ]}
] ]

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

@ -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>
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;Menu ref="menu" :model="items" :popup="true" /&gt; &lt;Menu ref="menu" :model="items" :popup="true" /&gt;
</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"
}
} }
]} ]}
] ]

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

@ -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>