Refactor #3965 - For MegaMenu
parent
503f9df280
commit
1a97ba848d
|
@ -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>
|
|
@ -75,6 +75,10 @@ export interface MegaMenuPassThroughOptions {
|
||||||
* Uses to pass attributes to the submenu header's DOM element.
|
* Uses to pass attributes to the submenu header's DOM element.
|
||||||
*/
|
*/
|
||||||
submenuHeader?: MegaMenuPassThroughOptionType;
|
submenuHeader?: MegaMenuPassThroughOptionType;
|
||||||
|
/**
|
||||||
|
* Uses to pass attributes to the submenu's DOM element.
|
||||||
|
*/
|
||||||
|
submenu?: MegaMenuPassThroughOptionType;
|
||||||
/**
|
/**
|
||||||
* Uses to pass attributes to the separator's DOM element.
|
* Uses to pass attributes to the separator's DOM element.
|
||||||
*/
|
*/
|
||||||
|
@ -195,6 +199,11 @@ export interface MegaMenuProps {
|
||||||
* @type {MegaMenuPassThroughOptions}
|
* @type {MegaMenuPassThroughOptions}
|
||||||
*/
|
*/
|
||||||
pt?: MegaMenuPassThroughOptions;
|
pt?: MegaMenuPassThroughOptions;
|
||||||
|
/**
|
||||||
|
* When enabled, it removes component related styles in the core.
|
||||||
|
* @defaultValue false
|
||||||
|
*/
|
||||||
|
unstyled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div :ref="containerRef" :id="id" :class="containerClass" v-bind="ptm('root')">
|
<div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="megamenu">
|
||||||
<div v-if="$slots.start" class="p-megamenu-start" v-bind="ptm('start')">
|
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
|
||||||
<slot name="start"></slot>
|
<slot name="start"></slot>
|
||||||
</div>
|
</div>
|
||||||
<MegaMenuSub
|
<MegaMenuSub
|
||||||
:ref="menubarRef"
|
:ref="menubarRef"
|
||||||
:id="id + '_list'"
|
:id="id + '_list'"
|
||||||
class="p-megamenu-root-list"
|
|
||||||
:tabindex="!disabled ? tabindex : -1"
|
:tabindex="!disabled ? tabindex : -1"
|
||||||
role="menubar"
|
role="menubar"
|
||||||
:aria-label="ariaLabel"
|
:aria-label="ariaLabel"
|
||||||
|
@ -29,20 +28,20 @@
|
||||||
@item-click="onItemClick"
|
@item-click="onItemClick"
|
||||||
@item-mouseenter="onItemMouseEnter"
|
@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>
|
<slot name="end"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseComponent from 'primevue/basecomponent';
|
|
||||||
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||||
|
import BaseMegaMenu from './BaseMegaMenu.vue';
|
||||||
import MegaMenuSub from './MegaMenuSub.vue';
|
import MegaMenuSub from './MegaMenuSub.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MegaMenu',
|
name: 'MegaMenu',
|
||||||
extends: BaseComponent,
|
extends: BaseMegaMenu,
|
||||||
emits: ['focus', 'blur'],
|
emits: ['focus', 'blur'],
|
||||||
props: {
|
props: {
|
||||||
model: {
|
model: {
|
||||||
|
@ -384,7 +383,7 @@ export default {
|
||||||
onEnterKey(event) {
|
onEnterKey(event) {
|
||||||
if (this.focusedItemInfo.index !== -1) {
|
if (this.focusedItemInfo.index !== -1) {
|
||||||
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
|
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();
|
anchorElement ? anchorElement.click() : element && element.click();
|
||||||
|
|
||||||
|
@ -580,15 +579,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
containerClass() {
|
|
||||||
return [
|
|
||||||
'p-megamenu p-component',
|
|
||||||
{
|
|
||||||
'p-megamenu-horizontal': this.horizontal,
|
|
||||||
'p-megamenu-vertical': this.vertical
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
processedItems() {
|
processedItems() {
|
||||||
return this.createProcessedItems(this.model || []);
|
return this.createProcessedItems(this.model || []);
|
||||||
},
|
},
|
||||||
|
@ -622,116 +612,3 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</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>
|
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<ul v-bind="ptm('menu')">
|
<ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
|
||||||
<li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
|
<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)">
|
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
|
||||||
<li
|
<li
|
||||||
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
|
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
|
||||||
:id="getItemId(processedItem)"
|
:id="getItemId(processedItem)"
|
||||||
:style="getItemProp(processedItem, 'style')"
|
:style="getItemProp(processedItem, 'style')"
|
||||||
:class="getItemClass(processedItem)"
|
:class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
|
||||||
role="menuitem"
|
role="menuitem"
|
||||||
:aria-label="getItemLabel(processedItem)"
|
:aria-label="getItemLabel(processedItem)"
|
||||||
:aria-disabled="isItemDisabled(processedItem) || undefined"
|
:aria-disabled="isItemDisabled(processedItem) || undefined"
|
||||||
|
@ -16,46 +16,40 @@
|
||||||
:aria-setsize="getAriaSetSize()"
|
:aria-setsize="getAriaSetSize()"
|
||||||
:aria-posinset="getAriaPosInset(index)"
|
:aria-posinset="getAriaPosInset(index)"
|
||||||
v-bind="getPTOptions(processedItem, 'menuitem')"
|
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">
|
<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>
|
<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')">
|
<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="getItemIconClass(processedItem)" />
|
<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="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
|
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
|
||||||
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
|
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
|
||||||
</a>
|
</a>
|
||||||
</router-link>
|
</router-link>
|
||||||
<a
|
<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')">
|
||||||
v-else
|
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
|
||||||
v-ripple
|
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
|
||||||
:href="getItemProp(processedItem, 'url')"
|
<span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
|
||||||
: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>
|
|
||||||
<template v-if="isItemGroup(processedItem)">
|
<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-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="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
|
<component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="templates.item" :item="processedItem.item"></component>
|
<component v-else :is="templates.item" :item="processedItem.item"></component>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel" v-bind="ptm('panel')">
|
<div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="getCXOptions('panel')" v-bind="ptm('panel')">
|
||||||
<div class="p-megamenu-grid" v-bind="ptm('grid')">
|
<div :class="getCXOptions('grid')" v-bind="ptm('grid')">
|
||||||
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)" v-bind="ptm('column')">
|
<div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getCXOptions('column', { processedItem })" v-bind="ptm('column')">
|
||||||
<MegaMenuSub
|
<MegaMenuSub
|
||||||
v-for="submenu of col"
|
v-for="submenu of col"
|
||||||
:key="getSubListKey(submenu)"
|
:key="getSubListKey(submenu)"
|
||||||
:id="getSubListId(submenu)"
|
:id="getSubListId(submenu)"
|
||||||
|
:style="getSXOptions('submenu', { processedItem })"
|
||||||
role="menu"
|
role="menu"
|
||||||
class="p-submenu-list p-megamenu-submenu"
|
|
||||||
:menuId="menuId"
|
:menuId="menuId"
|
||||||
:focusedItemId="focusedItemId"
|
:focusedItemId="focusedItemId"
|
||||||
:submenu="submenu"
|
:submenu="submenu"
|
||||||
|
@ -74,8 +68,8 @@
|
||||||
<li
|
<li
|
||||||
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
|
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
|
||||||
:id="getItemId(processedItem)"
|
:id="getItemId(processedItem)"
|
||||||
|
:class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
|
||||||
:style="getItemProp(processedItem, 'style')"
|
:style="getItemProp(processedItem, 'style')"
|
||||||
:class="getSeparatorItemClass(processedItem)"
|
|
||||||
role="separator"
|
role="separator"
|
||||||
v-bind="ptm('separator')"
|
v-bind="ptm('separator')"
|
||||||
></li>
|
></li>
|
||||||
|
@ -84,15 +78,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BaseComponent from 'primevue/basecomponent';
|
|
||||||
import AngleDownIcon from 'primevue/icons/angledown';
|
import AngleDownIcon from 'primevue/icons/angledown';
|
||||||
import AngleRightIcon from 'primevue/icons/angleright';
|
import AngleRightIcon from 'primevue/icons/angleright';
|
||||||
import Ripple from 'primevue/ripple';
|
import Ripple from 'primevue/ripple';
|
||||||
import { ObjectUtils } from 'primevue/utils';
|
import { ObjectUtils } from 'primevue/utils';
|
||||||
|
import BaseMegaMenu from './BaseMegaMenu.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MegaMenuSub',
|
name: 'MegaMenuSub',
|
||||||
extends: BaseComponent,
|
extends: BaseMegaMenu,
|
||||||
emits: ['item-click', 'item-mouseenter'],
|
emits: ['item-click', 'item-mouseenter'],
|
||||||
props: {
|
props: {
|
||||||
menuId: {
|
menuId: {
|
||||||
|
@ -130,6 +124,10 @@ export default {
|
||||||
exact: {
|
exact: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
tabindex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
isItemActive(processedItem) {
|
||||||
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
|
return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
|
||||||
},
|
},
|
||||||
|
@ -189,69 +199,6 @@ export default {
|
||||||
},
|
},
|
||||||
getAriaPosInset(index) {
|
getAriaPosInset(index) {
|
||||||
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
|
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: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue