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

Implemented panel menu

pull/132/head
cagataycivici 2019-12-09 10:20:49 +03:00
parent 98a5742d63
commit ebba7cc73c
2 changed files with 105 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/panelmenu/PanelMenu.vue
View File

@ -9,6 +9,13 @@
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</div>
<transition name="p-panelmenu-content-wrapper">
<div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
<div class="p-panelmenu-content" v-if="item.items">
<PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" />
</div>
</div>
</transition>
</div>
</template>
</div>
@ -31,7 +38,26 @@ export default {
},
methods: {
onItemClick(event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (this.activeItem && this.activeItem === item)
this.activeItem = null;
else
this.activeItem = item;
},
getPanelClass(item) {
return ['p-panelmenu-panel', item.class, {'p-disabled': item.disabled}];
@ -119,4 +145,24 @@ export default {
display: block;
text-decoration: none;
}
.p-panelmenu-content-wrapper-enter,
.p-panelmenu-content-wrapper-leave-to {
max-height: 0;
}
.p-panelmenu-content-wrapper-enter-to,
.p-panelmenu-content-wrapper-leave {
max-height: 1000px;
}
.p-panelmenu-content-wrapper-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.p-panelmenu-content-wrapper-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}
</style>

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

@ -1,15 +1,71 @@
<template>
<div class="p-panelmenu-panel">
</div>
<ul class="p-submenu-list">
<template v-for="(item, i) of model">
<li role="menuitem" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
<router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)">
<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" :target="item.target" @click="onItemClick($event, item)">
<span :class="getSubmenuIcon(item)" v-if="item.items"></span>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
<transition name="p-panelmenu-content-wrapper">
<div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
<sub-panelmenu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" />
</div>
</transition>
</li>
<li class="p-menu-separator" :style="item.style" v-if="item.visible !== false && item.separator" :key="'separator' + i"></li>
</template>
</ul>
</template>
<script>
export default {
name: 'sub-panelmenu',
props: {
item: {
model: {
type: null,
default: null
}
},
data() {
return {
activeItem: null
}
},
methods: {
onItemClick($event, item) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (this.activeItem && this.activeItem === item)
this.activeItem = null;
else
this.activeItem = item;
},
getItemClass(item) {
return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
},
getSubmenuIcon(item) {
const active = (item === this.activeItem);
return ['p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active}];
}
}
}
</script>