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

Refactor #3965 - For MegaMenu

pull/4004/head
Tuğçe Küçükoğlu 2023-05-30 09:56:47 +03:00
parent 503f9df280
commit 1a97ba848d
4 changed files with 295 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
components/lib/megamenu/BaseMegaMenu.vue Normal file
View File

@ -0,0 +1,240 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-megamenu {
display: flex;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-root-list > .p-menuitem {
position: relative;
}
.p-megamenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-megamenu .p-menuitem-text {
line-height: 1;
}
.p-megamenu-panel {
display: none;
position: absolute;
width: auto;
z-index: 1;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: none;
}
/* Horizontal */
.p-megamenu-horizontal {
align-items: center;
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
}
/* Vertical */
.p-megamenu-vertical {
flex-direction: column;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
margin-left: auto;
}
.p-megamenu-grid {
display: flex;
}
.p-megamenu-col-2,
.p-megamenu-col-3,
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
flex: 0 0 auto;
padding: 0.5rem;
}
.p-megamenu-col-2 {
width: 16.6667%;
}
.p-megamenu-col-3 {
width: 25%;
}
.p-megamenu-col-4 {
width: 33.3333%;
}
.p-megamenu-col-6 {
width: 50%;
}
.p-megamenu-col-12 {
width: 100%;
}
`;
const inlineStyles = {
submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
};
const classes = {
root: ({ instance }) => [
'p-megamenu p-component',
{
'p-megamenu-horizontal': instance.horizontal,
'p-megamenu-vertical': instance.vertical
}
],
start: 'p-megamenu-start',
menu: 'p-megamenu-root-list',
submenuHeader: ({ context, processedItem }) => [
'p-megamenu-submenu-header p-submenu-header',
{
'p-disabled': context.isItemDisabled(processedItem)
}
],
menuitem: ({ context, processedItem }) => [
'p-menuitem',
{
'p-menuitem-active p-highlight': context.isItemActive(processedItem),
'p-focus': context.isItemFocused(processedItem),
'p-disabled': context.isItemDisabled(processedItem)
}
],
content: 'p-menuitem-content',
action: ({ context, isActive, isExactActive }) => [
'p-menuitem-link',
{
'router-link-active': isActive,
'router-link-active-exact': context.exact && isExactActive
}
],
icon: 'p-menuitem-icon',
label: 'p-menuitem-text',
submenuIcon: 'p-submenu-icon',
panel: 'p-megamenu-panel',
grid: 'p-megamenu-grid',
column: ({ context, processedItem }) => {
let length = context.isItemGroup(processedItem) ? processedItem.items.length : 0;
let columnClass;
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
}
return columnClass;
},
submenu: 'p-submenu-list p-megamenu-submenu',
separator: 'p-menuitem-separator',
end: 'p-megamenu-end'
};
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
export default {
name: 'BaseMegaMenu',
extends: BaseComponent,
props: {
model: {
type: Array,
default: null
},
orientation: {
type: String,
default: 'horizontal'
},
exact: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
tabindex: {
type: Number,
default: 0
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
css: {
classes,
inlineStyles
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

9
components/lib/megamenu/MegaMenu.d.ts vendored
View File

@ -75,6 +75,10 @@ export interface MegaMenuPassThroughOptions {
* Uses to pass attributes to the submenu header's DOM element.
*/
submenuHeader?: MegaMenuPassThroughOptionType;
/**
* Uses to pass attributes to the submenu's DOM element.
*/
submenu?: MegaMenuPassThroughOptionType;
/**
* Uses to pass attributes to the separator's DOM element.
*/
@ -195,6 +199,11 @@ export interface MegaMenuProps {
* @type {MegaMenuPassThroughOptions}
*/
pt?: MegaMenuPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

135
components/lib/megamenu/MegaMenu.vue
View File

@ -1,12 +1,11 @@
<template>
<div :ref="containerRef" :id="id" :class="containerClass" v-bind="ptm('root')">
<div v-if="$slots.start" class="p-megamenu-start" v-bind="ptm('start')">
<div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="megamenu">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot>
</div>
<MegaMenuSub
:ref="menubarRef"
:id="id + '_list'"
class="p-megamenu-root-list"
:tabindex="!disabled ? tabindex : -1"
role="menubar"
:aria-label="ariaLabel"
@ -29,20 +28,20 @@
@item-click="onItemClick"
@item-mouseenter="onItemMouseEnter"
/>
<div v-if="$slots.end" class="p-megamenu-end" v-bind="ptm('end')">
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
<slot name="end"></slot>
</div>
</div>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
import BaseMegaMenu from './BaseMegaMenu.vue';
import MegaMenuSub from './MegaMenuSub.vue';
export default {
name: 'MegaMenu',
extends: BaseComponent,
extends: BaseMegaMenu,
emits: ['focus', 'blur'],
props: {
model: {
@ -384,7 +383,7 @@ export default {
onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
anchorElement ? anchorElement.click() : element && element.click();
@ -580,15 +579,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-megamenu p-component',
{
'p-megamenu-horizontal': this.horizontal,
'p-megamenu-vertical': this.vertical
}
];
},
processedItems() {
return this.createProcessedItems(this.model || []);
},
@ -622,116 +612,3 @@ export default {
}
};
</script>
<style>
.p-megamenu {
display: flex;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-root-list > .p-menuitem {
position: relative;
}
.p-megamenu .p-menuitem-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
}
.p-megamenu .p-menuitem-text {
line-height: 1;
}
.p-megamenu-panel {
display: none;
position: absolute;
width: auto;
z-index: 1;
}
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
padding: 0;
list-style: none;
}
/* Horizontal */
.p-megamenu-horizontal {
align-items: center;
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
}
/* Vertical */
.p-megamenu-vertical {
flex-direction: column;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
margin-left: auto;
}
.p-megamenu-grid {
display: flex;
}
.p-megamenu-col-2,
.p-megamenu-col-3,
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
flex: 0 0 auto;
padding: 0.5rem;
}
.p-megamenu-col-2 {
width: 16.6667%;
}
.p-megamenu-col-3 {
width: 25%;
}
.p-megamenu-col-4 {
width: 33.3333%;
}
.p-megamenu-col-6 {
width: 50%;
}
.p-megamenu-col-12 {
width: 100%;
}
</style>

133
components/lib/megamenu/MegaMenuSub.vue
View File

@ -1,12 +1,12 @@
<template>
<ul v-bind="ptm('menu')">
<li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<li v-if="submenu" :class="[getCXOptions('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="getItemClass(processedItem)"
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -16,46 +16,40 @@
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a
v-else
v-ripple
:href="getItemProp(processedItem, 'url')"
:class="getItemActionClass(processedItem)"
:target="getItemProp(processedItem, 'target')"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions(processedItem, 'action')"
>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item"></component>
</div>
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel" v-bind="ptm('panel')">
<div class="p-megamenu-grid" v-bind="ptm('grid')">
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)" v-bind="ptm('column')">
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="getCXOptions('panel')" v-bind="ptm('panel')">
<div :class="getCXOptions('grid')" v-bind="ptm('grid')">
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getCXOptions('column', { processedItem })" v-bind="ptm('column')">
<MegaMenuSub
v-for="submenu of col"
:key="getSubListKey(submenu)"
:id="getSubListId(submenu)"
:style="getSXOptions('submenu', { processedItem })"
role="menu"
class="p-submenu-list p-megamenu-submenu"
:menuId="menuId"
:focusedItemId="focusedItemId"
:submenu="submenu"
@ -74,8 +68,8 @@
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
:class="getSeparatorItemClass(processedItem)"
role="separator"
v-bind="ptm('separator')"
></li>
@ -84,15 +78,15 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import BaseMegaMenu from './BaseMegaMenu.vue';
export default {
name: 'MegaMenuSub',
extends: BaseComponent,
extends: BaseMegaMenu,
emits: ['item-click', 'item-mouseenter'],
props: {
menuId: {
@ -130,6 +124,10 @@ export default {
exact: {
type: Boolean,
default: true
},
tabindex: {
type: Number,
default: 0
}
},
methods: {
@ -159,6 +157,18 @@ export default {
}
});
},
getCXOptions(key, params) {
return this.cx(key, {
...params,
context: this
});
},
getSXOptions(key, params) {
return this.sx(key, true, {
...params,
context: this
});
},
isItemActive(processedItem) {
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
},
@ -189,69 +199,6 @@ export default {
},
getAriaPosInset(index) {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
getSubmenuHeaderClass(processedItem) {
return [
'p-megamenu-submenu-header p-submenu-header',
this.getItemProp(processedItem, 'class'),
{
'p-disabled': this.isItemDisabled(processedItem)
}
];
},
getColumnClass(processedItem) {
let length = this.isItemGroup(processedItem) ? processedItem.items.length : 0;
let columnClass;
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
}
return columnClass;
},
getItemClass(processedItem) {
return [
'p-menuitem',
this.getItemProp(processedItem, 'class'),
{
'p-menuitem-active p-highlight': this.isItemActive(processedItem),
'p-focus': this.isItemFocused(processedItem),
'p-disabled': this.isItemDisabled(processedItem)
}
];
},
getItemActionClass(processedItem, routerProps) {
return [
'p-menuitem-link',
{
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}
];
},
getItemIconClass(processedItem) {
return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
},
getSeparatorItemClass(processedItem) {
return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
}
},
components: {