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

Refactor #5592, #5661 - For Menu & MegaMenu

pull/5677/head
tugcekucukoglu 2024-04-30 16:02:03 +03:00
parent f71512afdb
commit aec93e5eea
8 changed files with 93 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,25 +59,25 @@ export interface MegaMenuPassThroughOptions {
*/ */
root?: MegaMenuPassThroughOptionType; root?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the root list's DOM element.
*/ */
menu?: MegaMenuPassThroughOptionType; rootList?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: MegaMenuPassThroughOptionType; item?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: MegaMenuPassThroughOptionType; itemContent?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: MegaMenuPassThroughOptionType; itemLink?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item icon's DOM element.
*/ */
icon?: MegaMenuPassThroughOptionType; itemIcon?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the label's DOM element.
*/ */
@ -99,17 +99,17 @@ export interface MegaMenuPassThroughOptions {
*/ */
column?: MegaMenuPassThroughOptionType; column?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the submenu header's DOM element. * Used to pass attributes to the submenu item's DOM element.
*/ */
submenuHeader?: MegaMenuPassThroughOptionType; submenuItem?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the submenu's DOM element. * Used to pass attributes to the submenu's DOM element.
*/ */
submenu?: MegaMenuPassThroughOptionType; submenu?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the submenu label's DOM element. * Used to pass attributes to the submenu item label's DOM element.
*/ */
submenuLabel?: MegaMenuPassThroughOptionType; submenuItemLabel?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the separator's DOM element. * Used to pass attributes to the separator's DOM element.
*/ */
@ -117,7 +117,7 @@ export interface MegaMenuPassThroughOptions {
/** /**
* Used to pass attributes to the mobile popup menu button's DOM element. * Used to pass attributes to the mobile popup menu button's DOM element.
*/ */
menubutton?: MegaMenuPassThroughOptionType; button?: MegaMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the start of the component. * Used to pass attributes to the start of the component.
*/ */

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

@ -3,23 +3,23 @@
<div v-if="$slots.start" :class="cx('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>
<slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)"> <slot :id="id" :name="$slots.menubutton ? 'menubutton' : 'button'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
<a <a
v-if="model && model.length > 0" v-if="model && model.length > 0"
ref="menubutton" ref="menubutton"
role="button" role="button"
tabindex="0" tabindex="0"
:class="cx('menubutton')" :class="cx('button')"
:aria-haspopup="model.length && model.length > 0 ? true : false" :aria-haspopup="model.length && model.length > 0 ? true : false"
:aria-expanded="mobileActive" :aria-expanded="mobileActive"
:aria-controls="id" :aria-controls="id"
:aria-label="$primevue.config.locale.aria?.navigation" :aria-label="$primevue.config.locale.aria?.navigation"
@click="menuButtonClick($event)" @click="menuButtonClick($event)"
@keydown="menuButtonKeydown($event)" @keydown="menuButtonKeydown($event)"
v-bind="ptm('menubutton')" v-bind="ptm('button')"
> >
<slot name="menubuttonicon"> <slot :name="$slots.menubuttonicon ? 'menubuttonicon' : 'buttonicon'">
<BarsIcon v-bind="ptm('menubuttonicon')" /> <BarsIcon v-bind="ptm('buttonicon')" />
</slot> </slot>
</a> </a>
</slot> </slot>
@ -421,7 +421,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, 'a[data-pc-section="action"]'); const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();

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

@ -1,12 +1,12 @@
<template> <template>
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')"> <ul :class="level === 0 ? cx('rootList') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
<li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li> <li v-if="submenu" :class="[cx('submenuItem', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuItem')">{{ 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="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]" :class="[cx('item', { 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"
@ -15,17 +15,19 @@
:aria-level="level + 1" :aria-level="level + 1"
:aria-setsize="getAriaSetSize()" :aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)" :aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'menuitem')" v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)" :data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)" :data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)" :data-p-disabled="isItemDisabled(processedItem)"
> >
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')"> <div :class="cx('itemContent')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'itemContent')">
<template v-if="!templates.item"> <template v-if="!templates.item">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
<span :class="level === 0 ? cx('label') : cx('submenuLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuLabel')">{{ getItemLabel(processedItem) }}</span> <span :class="level === 0 ? cx('label') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuItemLabel')">
{{ 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="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<component v-else :is="horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-else :is="horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -188,17 +190,17 @@ export default {
return { return {
action: mergeProps( action: mergeProps(
{ {
class: this.cx('action'), class: this.cx('itemLink'),
tabindex: -1, tabindex: -1,
'aria-hidden': true 'aria-hidden': true
}, },
this.getPTOptions(processedItem, index, 'action') this.getPTOptions(processedItem, index, 'itemLink')
), ),
icon: mergeProps( icon: mergeProps(
{ {
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')] class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
}, },
this.getPTOptions(processedItem, index, 'icon') this.getPTOptions(processedItem, index, 'itemIcon')
), ),
label: mergeProps( label: mergeProps(
{ {

16
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -15,15 +15,15 @@ const classes = {
} }
], ],
start: 'p-megamenu-start', start: 'p-megamenu-start',
menubutton: 'p-megamenu-button', button: 'p-megamenu-button',
menu: 'p-megamenu-root-list', rootList: 'p-megamenu-root-list',
submenuHeader: ({ instance, processedItem }) => [ submenuItem: ({ instance, processedItem }) => [
'p-megamenu-submenu-item', 'p-megamenu-submenu-item',
{ {
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
menuitem: ({ instance, processedItem }) => [ item: ({ instance, processedItem }) => [
'p-megamenu-item', 'p-megamenu-item',
{ {
'p-megamenu-item-active': instance.isItemActive(processedItem), 'p-megamenu-item-active': instance.isItemActive(processedItem),
@ -31,9 +31,9 @@ const classes = {
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-megamenu-item-content', itemContent: 'p-megamenu-item-content',
action: 'p-megamenu-item-link', itemLink: 'p-megamenu-item-link',
icon: 'p-megamenu-item-icon', itemIcon: 'p-megamenu-item-icon',
label: 'p-megamenu-item-text', label: 'p-megamenu-item-text',
submenuIcon: 'p-megamenu-submenu-icon', submenuIcon: 'p-megamenu-submenu-icon',
panel: 'p-megamenu-panel', panel: 'p-megamenu-panel',
@ -70,7 +70,7 @@ const classes = {
return columnClass; return columnClass;
}, },
submenu: 'p-megamenu-submenu', submenu: 'p-megamenu-submenu',
submenuLabel: 'p-megamenu-submenu-item-label', submenuItemLabel: 'p-megamenu-submenu-item-label',
separator: 'p-megamenu-separator', separator: 'p-megamenu-separator',
end: 'p-megamenu-end' end: 'p-megamenu-end'
}; };

35
components/lib/menu/Menu.d.ts vendored
View File

@ -63,27 +63,27 @@ export interface MenuPassThroughOptions {
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */
menu?: MenuPassThroughOptionType; list?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the submenu header's DOM element. * Used to pass attributes to the submenu item's DOM element.
*/ */
submenuHeader?: MenuPassThroughOptionType; submenuItem?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: MenuPassThroughOptionType; item?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: MenuPassThroughOptionType; itemContent?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: MenuPassThroughOptionType; itemLink?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item icon's DOM element.
*/ */
icon?: MenuPassThroughOptionType; itemIcon?: MenuPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the label's DOM element.
*/ */
@ -300,7 +300,8 @@ export interface MenuSlots {
class: any; class: any;
}): VNode[]; }): VNode[];
/** /**
* Custom item template. * @deprecated since v4.0. Use submenuitem slot instead.
* Custom submenu header template.
* @param {Object} scope - submenuheader slot's params. * @param {Object} scope - submenuheader slot's params.
*/ */
submenuheader(scope: { submenuheader(scope: {
@ -309,6 +310,16 @@ export interface MenuSlots {
*/ */
item: MenuItem; item: MenuItem;
}): VNode[]; }): VNode[];
/**
* Custom submenu item template.
* @param {Object} scope - submenuitem slot's params.
*/
submenuitem(scope: {
/**
* Menuitem instance
*/
item: MenuItem;
}): VNode[];
} }
/** /**

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

@ -8,7 +8,7 @@
<ul <ul
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="id + '_list'"
:class="cx('menu')" :class="cx('list')"
role="menu" role="menu"
:tabindex="tabindex" :tabindex="tabindex"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
@ -17,12 +17,13 @@
@focus="onListFocus" @focus="onListFocus"
@blur="onListBlur" @blur="onListBlur"
@keydown="onListKeyDown" @keydown="onListKeyDown"
v-bind="ptm('menu')" v-bind="ptm('list')"
> >
<template v-for="(item, i) of model" :key="label(item) + i.toString()"> <template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator"> <template v-if="item.items && visible(item) && !item.separator">
<li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuHeader'), item.class]" role="none" v-bind="ptm('submenuHeader')"> <li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuItem'), item.class]" role="none" v-bind="ptm('submenuItem')">
<slot name="submenuheader" :item="item">{{ label(item) }}</slot> <!--TODO: submenuheader deprecated since v4.0. Use submenuitem-->
<slot :name="$slots.submenuheader ? 'submenuheader' : 'submenuitem'" :item="item">{{ label(item) }}</slot>
</li> </li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j"> <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem <PVMenuitem
@ -205,12 +206,12 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onEndKey(event) { onEndKey(event) {
this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
event.preventDefault(); event.preventDefault();
}, },
onEnterKey(event) { onEnterKey(event) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`); const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
this.popup && DomHandler.focus(this.target); this.popup && DomHandler.focus(this.target);
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
@ -221,19 +222,19 @@ export default {
this.onEnterKey(event); this.onEnterKey(event);
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index); const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...links].findIndex((link) => link.id === index); const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index; let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id')); order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id'));

20
components/lib/menu/Menuitem.vue
View File

@ -2,20 +2,20 @@
<li <li
v-if="visible()" v-if="visible()"
:id="id" :id="id"
:class="[cx('menuitem'), item.class]" :class="[cx('item'), item.class]"
role="menuitem" role="menuitem"
:style="item.style" :style="item.style"
:aria-label="label()" :aria-label="label()"
:aria-disabled="disabled()" :aria-disabled="disabled()"
v-bind="getPTOptions('menuitem')" v-bind="getPTOptions('item')"
:data-p-focused="isItemFocused()" :data-p-focused="isItemFocused()"
:data-p-disabled="disabled() || false" :data-p-disabled="disabled() || false"
> >
<div :class="cx('content')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('content')"> <div :class="cx('itemContent')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('itemContent')">
<template v-if="!templates.item"> <template v-if="!templates.item">
<a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')"> <a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" /> <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon')" />
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span> <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
</a> </a>
</template> </template>
@ -82,17 +82,17 @@ export default {
return { return {
action: mergeProps( action: mergeProps(
{ {
class: this.cx('action'), class: this.cx('itemLink'),
tabindex: '-1', tabindex: '-1',
'aria-hidden': true 'aria-hidden': true
}, },
this.getPTOptions('action') this.getPTOptions('itemLink')
), ),
icon: mergeProps( icon: mergeProps(
{ {
class: [this.cx('icon'), item.icon] class: [this.cx('itemIcon'), item.icon]
}, },
this.getPTOptions('icon') this.getPTOptions('itemIcon')
), ),
label: mergeProps( label: mergeProps(
{ {

12
components/lib/menu/style/MenuStyle.js
View File

@ -9,20 +9,20 @@ const classes = {
} }
], ],
start: 'p-menu-start', start: 'p-menu-start',
menu: 'p-menu-list', list: 'p-menu-list',
submenuHeader: 'p-menu-submenu-item', submenuItem: 'p-menu-submenu-item',
separator: 'p-menu-separator', separator: 'p-menu-separator',
end: 'p-menu-end', end: 'p-menu-end',
menuitem: ({ instance }) => [ item: ({ instance }) => [
'p-menu-item', 'p-menu-item',
{ {
'p-focus': instance.id === instance.focusedOptionId, 'p-focus': instance.id === instance.focusedOptionId,
'p-disabled': instance.disabled() 'p-disabled': instance.disabled()
} }
], ],
content: 'p-menu-item-content', itemContent: 'p-menu-item-content',
action: 'p-menu-item-link', itemLink: 'p-menu-item-link',
icon: 'p-menu-item-icon', itemIcon: 'p-menu-item-icon',
label: 'p-menu-item-label' label: 'p-menu-item-label'
}; };