Refactor #5592 - For Menubar, PanelMenu, Steps, TabMenu, TieredMenu

pull/5677/head
tugcekucukoglu 2024-04-30 16:03:20 +03:00
parent aec93e5eea
commit 37eb456f9b
20 changed files with 181 additions and 175 deletions

View File

@ -59,29 +59,29 @@ export interface MenubarPassThroughOptions {
*/ */
root?: MenubarPassThroughOptionType; root?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the root list's DOM element.
*/ */
menu?: MenubarPassThroughOptionType; rootList?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: MenubarPassThroughOptionType; item?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: MenubarPassThroughOptionType; itemContent?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: MenubarPassThroughOptionType; itemLink?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item icon's DOM element.
*/ */
icon?: MenubarPassThroughOptionType; itemIcon?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the item label's DOM element.
*/ */
label?: MenubarPassThroughOptionType; itemLabel?: MenubarPassThroughOptionType;
/** /**
* Used to pass attributes to the submenu icon's DOM element. * Used to pass attributes to the submenu icon's DOM element.
*/ */

View File

@ -404,7 +404,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();

View File

@ -1,11 +1,11 @@
<template> <template>
<ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')"> <ul :class="level === 0 ? cx('rootList') : cx('submenu')" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
<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"
@ -14,17 +14,23 @@
: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)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')"> <div
:class="cx('itemContent')"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter($event, processedItem)"
@mousemove="onItemMouseMove($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 :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span> <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -179,23 +185,23 @@ 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(
{ {
class: this.cx('label') class: this.cx('itemLabel')
}, },
this.getPTOptions(processedItem, index, 'label') this.getPTOptions(processedItem, index, 'itemLabel')
), ),
submenuicon: mergeProps( submenuicon: mergeProps(
{ {

View File

@ -14,8 +14,8 @@ const classes = {
], ],
start: 'p-menubar-start', start: 'p-menubar-start',
button: 'p-menubar-button', button: 'p-menubar-button',
menu: 'p-menubar-root-list', rootList: 'p-menubar-root-list',
menuitem: ({ instance, processedItem }) => [ item: ({ instance, processedItem }) => [
'p-menubar-item', 'p-menubar-item',
{ {
'p-menubar-item-active': instance.isItemActive(processedItem), 'p-menubar-item-active': instance.isItemActive(processedItem),
@ -23,10 +23,10 @@ const classes = {
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-menubar-item-content', itemContent: 'p-menubar-item-content',
action: 'p-menubar-item-link', itemLink: 'p-menubar-item-link',
icon: 'p-menubar-item-icon', itemIcon: 'p-menubar-item-icon',
label: 'p-menubar-item-label', itemLabel: 'p-menubar-item-label',
submenuIcon: 'p-menubar-submenu-icon', submenuIcon: 'p-menubar-submenu-icon',
submenu: 'p-menubar-submenu', submenu: 'p-menubar-submenu',
separator: 'p-menubar-separator', separator: 'p-menubar-separator',

View File

@ -73,9 +73,9 @@ export interface PanelMenuPassThroughOptions {
*/ */
headerContent?: PanelMenuPassThroughOptionType; headerContent?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the header action's DOM element. * Used to pass attributes to the header link's DOM element.
*/ */
headerAction?: PanelMenuPassThroughOptionType; headerLink?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the submenuIcon's DOM element. * Used to pass attributes to the submenuIcon's DOM element.
*/ */
@ -89,33 +89,33 @@ export interface PanelMenuPassThroughOptions {
*/ */
headerLabel?: PanelMenuPassThroughOptionType; headerLabel?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the toggleable content's DOM element. * Used to pass attributes to the content container's DOM element.
*/ */
toggleableContent?: PanelMenuPassThroughOptionType; contentContainer?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the menu content's DOM element.
*/
menuContent?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the list's DOM element.
*/
menu?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the list item's DOM element.
*/
menuitem?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
content?: PanelMenuPassThroughOptionType; content?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the root list's DOM element.
*/ */
action?: PanelMenuPassThroughOptionType; rootList?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the list item's DOM element.
*/ */
icon?: PanelMenuPassThroughOptionType; menuitem?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the item content's DOM element.
*/
itemContent?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the item link's DOM element.
*/
itemLink?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the item icon's DOM element.
*/
itemIcon?: PanelMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the label's DOM element.
*/ */

View File

@ -19,7 +19,7 @@
> >
<div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)"> <div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)"> <a :href="getItemProp(item, 'url')" :class="cx('headerLink')" :tabindex="-1" v-bind="getPTOptions('headerLink', item, index)">
<slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)"> <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" /> <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
</slot> </slot>
@ -32,8 +32,8 @@
</div> </div>
</div> </div>
<transition name="p-toggleable-content" v-bind="ptm('transition')"> <transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('toggleableContent')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')"> <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('contentContainer')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('contentContainer')">
<div v-if="getItemProp(item, 'items')" :class="cx('menuContent')" v-bind="ptm('menuContent')"> <div v-if="getItemProp(item, 'items')" :class="cx('content')" v-bind="ptm('content')">
<PanelMenuList <PanelMenuList
:panelId="getPanelId(index)" :panelId="getPanelId(index)"
:items="getItemProp(item, 'items')" :items="getItemProp(item, 'items')"
@ -164,14 +164,14 @@ export default {
} }
}, },
onHeaderArrowDownKey(event) { onHeaderArrowDownKey(event) {
const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null; const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true }); rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
event.preventDefault(); event.preventDefault();
}, },
onHeaderArrowUpKey(event) { onHeaderArrowUpKey(event) {
const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader(); const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null; const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false }); rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
event.preventDefault(); event.preventDefault();
@ -185,7 +185,7 @@ export default {
event.preventDefault(); event.preventDefault();
}, },
onHeaderEnterKey(event, item) { onHeaderEnterKey(event, item) {
const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]'); const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headerlink"]');
headerAction ? headerAction.click() : this.onHeaderClick(event, item); headerAction ? headerAction.click() : this.onHeaderClick(event, item);
event.preventDefault(); event.preventDefault();

View File

@ -1,7 +1,7 @@
<template> <template>
<PanelMenuSub <PanelMenuSub
:id="panelId + '_list'" :id="panelId + '_list'"
:class="cx('menu')" :class="cx('rootList')"
role="tree" role="tree"
:tabindex="-1" :tabindex="-1"
:aria-activedescendant="focused ? focusedItemId : undefined" :aria-activedescendant="focused ? focusedItemId : undefined"
@ -17,7 +17,7 @@
@item-mousemove="onItemMouseMove" @item-mousemove="onItemMouseMove"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
v-bind="ptm('menu')" v-bind="ptm('rootList')"
/> />
</template> </template>
@ -203,7 +203,7 @@ export default {
onEnterKey(event) { onEnterKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) { if (ObjectUtils.isNotEmpty(this.focusedItem)) {
const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`); const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button')); const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="itemlink"]') || DomHandler.findSingle(element, 'a,button'));
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();
} }

View File

@ -4,7 +4,7 @@
<li <li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')" v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)" :id="getItemId(processedItem)"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]" :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')" :style="getItemProp(processedItem, 'style')"
role="treeitem" role="treeitem"
:aria-label="getItemLabel(processedItem)" :aria-label="getItemLabel(processedItem)"
@ -12,19 +12,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('menuitem', processedItem, index)" v-bind="getPTOptions('item', processedItem, index)"
: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)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)"> <div :class="cx('itemContent')" @click="onItemClick($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('itemContent', processedItem, index)">
<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('action', processedItem, index)"> <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink', processedItem, index)">
<template v-if="isItemGroup(processedItem)"> <template v-if="isItemGroup(processedItem)">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions('submenuIcon', processedItem, index)" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
<component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', processedItem, index)" /> <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
</template> </template>
<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('icon', processedItem, index)" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</template> </template>
@ -40,7 +40,7 @@
></component> ></component>
</div> </div>
<transition name="p-toggleable-content" v-bind="ptm('transition')"> <transition name="p-toggleable-content" v-bind="ptm('transition')">
<div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')"> <div v-show="isItemActive(processedItem)" :class="cx('contentContainer')" v-bind="ptm('contentContainer')">
<PanelMenuSub <PanelMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'" :id="getItemId(processedItem) + '_list'"
@ -173,17 +173,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', processedItem, index) this.getPTOptions('itemLink', processedItem, index)
), ),
icon: mergeProps( icon: mergeProps(
{ {
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')] class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
}, },
this.getPTOptions('icon', processedItem, index) this.getPTOptions('itemIcon', processedItem, index)
), ),
label: mergeProps( label: mergeProps(
{ {

View File

@ -11,22 +11,22 @@ const classes = {
} }
], ],
headerContent: 'p-panelmenu-header-content', headerContent: 'p-panelmenu-header-content',
headerAction: 'p-panelmenu-header-link', headerLink: 'p-panelmenu-header-link',
headerIcon: 'p-panelmenu-header-icon', headerIcon: 'p-panelmenu-header-icon',
headerLabel: 'p-panelmenu-header-label', headerLabel: 'p-panelmenu-header-label',
toggleableContent: 'p-panelmenu-content-container', contentContainer: 'p-panelmenu-content-container',
menuContent: 'p-panelmenu-content', content: 'p-panelmenu-content',
menu: 'p-panelmenu-root-list', rootList: 'p-panelmenu-root-list',
menuitem: ({ instance, processedItem }) => [ item: ({ instance, processedItem }) => [
'p-panelmenu-item', 'p-panelmenu-item',
{ {
'p-focus': instance.isItemFocused(processedItem), 'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-panelmenu-item-content', itemContent: 'p-panelmenu-item-content',
action: 'p-panelmenu-item-link', itemLink: 'p-panelmenu-item-link',
icon: 'p-panelmenu-item-icon', itemIcon: 'p-panelmenu-item-icon',
label: 'p-panelmenu-item-label', label: 'p-panelmenu-item-label',
submenuIcon: 'p-panelmenu-submenu-icon', submenuIcon: 'p-panelmenu-submenu-icon',
submenu: 'p-panelmenu-submenu', submenu: 'p-panelmenu-submenu',

View File

@ -57,23 +57,23 @@ export interface StepsPassThroughOptions {
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */
menu?: StepsPassThroughOptionType; list?: StepsPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the list item's DOM element.
*/ */
menuitem?: StepsPassThroughOptionType; item?: StepsPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: StepsPassThroughOptionType; itemLink?: StepsPassThroughOptionType;
/** /**
* Used to pass attributes to the step's DOM element. * Used to pass attributes to the item number's DOM element.
*/ */
step?: StepsPassThroughOptionType; itemNumber?: StepsPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the item label's DOM element.
*/ */
label?: StepsPassThroughOptionType; itemLabel?: StepsPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

View File

@ -1,22 +1,22 @@
<template> <template>
<nav :id="id" :class="cx('root')" v-bind="ptmi('root')"> <nav :id="id" :class="cx('root')" v-bind="ptmi('root')">
<ol ref="list" :class="cx('menu')" v-bind="ptm('menu')"> <ol ref="list" :class="cx('list')" v-bind="ptm('list')">
<template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()"> <template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()">
<li <li
v-if="visible(item)" v-if="visible(item)"
:class="[cx('menuitem', { item, index }), item.class]" :class="[cx('item', { item, index }), item.class]"
:style="item.style" :style="item.style"
:aria-current="isActive(index) ? 'step' : undefined" :aria-current="isActive(index) ? 'step' : undefined"
@click="onItemClick($event, item, index)" @click="onItemClick($event, item, index)"
@keydown="onItemKeydown($event, item, index)" @keydown="onItemKeydown($event, item, index)"
v-bind="getPTOptions('menuitem', item, index)" v-bind="getPTOptions('item', item, index)"
:data-p-highlight="isActive(index)" :data-p-highlight="isActive(index)"
:data-p-disabled="isItemDisabled(item, index)" :data-p-disabled="isItemDisabled(item, index)"
> >
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<span :class="cx('action')" v-bind="getPTOptions('action', item, index)"> <span :class="cx('itemLink')" v-bind="getPTOptions('itemLink', item, index)">
<span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span> <span :class="cx('itemNumber')" v-bind="getPTOptions('itemNumber', item, index)">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span> <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, index)">{{ label(item) }}</span>
</span> </span>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="index" :active="index === d_activeStep" :label="label(item)" :props="getMenuItemProps(item, index)"></component> <component v-else :is="$slots.item" :item="item" :index="index" :active="index === d_activeStep" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
@ -160,12 +160,12 @@ export default {
return prevItem ? prevItem.children[0] : null; return prevItem ? prevItem.children[0] : null;
}, },
findFirstItem() { findFirstItem() {
const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="menuitem"]'); const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="item"]');
return firstSibling ? firstSibling.children[0] : null; return firstSibling ? firstSibling.children[0] : null;
}, },
findLastItem() { findLastItem() {
const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="menuitem"]'); const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="item"]');
return siblings ? siblings[siblings.length - 1].children[0] : null; return siblings ? siblings[siblings.length - 1].children[0] : null;
}, },
@ -193,23 +193,23 @@ export default {
return { return {
action: mergeProps( action: mergeProps(
{ {
class: this.cx('action'), class: this.cx('itemLink'),
onClick: ($event) => this.onItemClick($event, item), onClick: ($event) => this.onItemClick($event, item),
onKeyDown: ($event) => this.onItemKeydown($event, item) onKeyDown: ($event) => this.onItemKeydown($event, item)
}, },
this.getPTOptions('action', item, index) this.getPTOptions('itemLink', item, index)
), ),
step: mergeProps( step: mergeProps(
{ {
class: this.cx('step') class: this.cx('itemNumber')
}, },
this.getPTOptions('step', item, index) this.getPTOptions('itemNumber', item, index)
), ),
label: mergeProps( label: mergeProps(
{ {
class: this.cx('label') class: this.cx('itemLabel')
}, },
this.getPTOptions('label', item, index) this.getPTOptions('itemLabel', item, index)
) )
}; };
} }

View File

@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }], root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
menu: 'p-steps-list', list: 'p-steps-list',
menuitem: ({ instance, item, index }) => [ item: ({ instance, item, index }) => [
'p-steps-item', 'p-steps-item',
{ {
'p-steps-item-active': instance.isActive(index), 'p-steps-item-active': instance.isActive(index),
'p-disabled': instance.isItemDisabled(item, index) 'p-disabled': instance.isItemDisabled(item, index)
} }
], ],
action: 'p-steps-item-link', itemLink: 'p-steps-item-link',
step: 'p-steps-item-number', itemNumber: 'p-steps-item-number',
label: 'p-steps-item-label' itemLabel: 'p-steps-item-label'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

View File

@ -59,25 +59,25 @@ export interface TabMenuPassThroughOptions {
*/ */
root?: TabMenuPassThroughOptionType; root?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the tablist's DOM element.
*/ */
menu?: TabMenuPassThroughOptionType; tablist?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: TabMenuPassThroughOptionType; item?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: TabMenuPassThroughOptionType; itemLink?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item itemIcon's DOM element.
*/ */
icon?: TabMenuPassThroughOptionType; itemIcon?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the item label's DOM element.
*/ */
label?: TabMenuPassThroughOptionType; itemLabel?: TabMenuPassThroughOptionType;
/** /**
* Used to pass attributes to the inkbar's DOM element. * Used to pass attributes to the inkbar's DOM element.
*/ */

View File

@ -1,23 +1,23 @@
<template> <template>
<div :class="cx('root')" v-bind="ptmi('root')"> <div :class="cx('root')" v-bind="ptmi('root')">
<ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')"> <ul ref="nav" :class="cx('tablist')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('tablist')">
<template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()"> <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
<li <li
v-if="visible(item)" v-if="visible(item)"
ref="tab" ref="tab"
:class="[cx('menuitem', { item, index: i }), item.class]" :class="[cx('item', { item, index: i }), item.class]"
role="presentation" role="presentation"
@click="onItemClick($event, item, i)" @click="onItemClick($event, item, i)"
@keydown="onKeydownItem($event, item, i)" @keydown="onKeydownItem($event, item, i)"
v-bind="getPTOptions('menuitem', item, i)" v-bind="getPTOptions('item', item, i)"
:data-p-highlight="d_activeIndex === i" :data-p-highlight="d_activeIndex === i"
:data-p-disabled="disabled(item)" :data-p-disabled="disabled(item)"
> >
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('action', item, i)"> <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('itemLink')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="-1" v-bind="getPTOptions('itemLink', item, i)">
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="cx('icon')" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="cx('itemIcon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" /> <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span> <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, i)">{{ label(item) }}</span>
</a> </a>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="i" :active="i === d_activeIndex" :label="label(item)" :props="getMenuItemProps(item, i)"></component> <component v-else :is="$slots.item" :item="item" :index="i" :active="i === d_activeIndex" :label="label(item)" :props="getMenuItemProps(item, i)"></component>
@ -170,17 +170,17 @@ export default {
return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null; return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? this.findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;
}, },
findFirstItem() { findFirstItem() {
const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]'); const firstSibling = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
return firstSibling ? firstSibling.children[0] : null; return firstSibling ? firstSibling.children[0] : null;
}, },
findLastItem() { findLastItem() {
const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"]'); const siblings = DomHandler.find(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"]');
return siblings ? siblings[siblings.length - 1].children[0] : null; return siblings ? siblings[siblings.length - 1].children[0] : null;
}, },
findActiveItem() { findActiveItem() {
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'); const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
return activeItem ? activeItem.children[0] : null; return activeItem ? activeItem.children[0] : null;
}, },
@ -190,8 +190,8 @@ export default {
focusableItem.focus(); focusableItem.focus();
}, },
onTabKey() { onTabKey() {
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'); const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]'); const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="itemlink"][tabindex="0"]');
if (focusedItem !== activeItem.children[0]) { if (focusedItem !== activeItem.children[0]) {
activeItem && (activeItem.children[0].tabIndex = '0'); activeItem && (activeItem.children[0].tabIndex = '0');
@ -230,24 +230,24 @@ export default {
return { return {
action: mergeProps( action: mergeProps(
{ {
class: this.cx('action'), class: this.cx('itemLink'),
tabindex: -1, tabindex: -1,
onClick: ($event) => this.onItemClick($event, item, index), onClick: ($event) => this.onItemClick($event, item, index),
onKeyDown: ($event) => this.onKeydownItem($event, item, index) onKeyDown: ($event) => this.onKeydownItem($event, item, index)
}, },
this.getPTOptions('action', item, index) this.getPTOptions('itemLink', item, index)
), ),
icon: mergeProps( icon: mergeProps(
{ {
class: [this.cx('icon'), item.icon] class: [this.cx('itemIcon'), item.icon]
}, },
this.getPTOptions('icon', item, index) this.getPTOptions('itemIcon', item, index)
), ),
label: mergeProps( label: mergeProps(
{ {
class: this.cx('label') class: this.cx('itemLabel')
}, },
this.getPTOptions('label', item, index) this.getPTOptions('itemLabel', item, index)
) )
}; };
} }

View File

@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-tabmenu p-component', root: 'p-tabmenu p-component',
menu: 'p-tabmenu-tablist', tablist: 'p-tabmenu-tablist',
menuitem: ({ instance, index, item }) => [ item: ({ instance, index, item }) => [
'p-tabmenu-item', 'p-tabmenu-item',
{ {
'p-tabmenu-item-active': instance.d_activeIndex === index, 'p-tabmenu-item-active': instance.d_activeIndex === index,
'p-disabled': instance.disabled(item) 'p-disabled': instance.disabled(item)
} }
], ],
action: 'p-tabmenu-item-link', itemLink: 'p-tabmenu-item-link',
icon: 'p-tabmenu-item-icon', itemIcon: 'p-tabmenu-item-icon',
label: 'p-tabmenu-item-label', itemLabel: 'p-tabmenu-item-label',
inkbar: 'p-tabmenu-ink-bar' inkbar: 'p-tabmenu-ink-bar'
}; };

View File

@ -107,7 +107,7 @@ export default {
color: ${dt('panelmenu.item.color')}; color: ${dt('panelmenu.item.color')};
} }
.p-menupanelmenu-item.p-focus > .p-panelmenu-item-content { .p-panelmenu-item.p-focus > .p-panelmenu-item-content {
background: ${dt('panelmenu.item.focus.background')}; background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }

View File

@ -61,29 +61,29 @@ export interface TieredMenuPassThroughOptions<T = any> {
*/ */
root?: TieredMenuPassThroughOptionType<T>; root?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the root list's DOM element.
*/ */
menu?: TieredMenuPassThroughOptionType<T>; rootList?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the list item's DOM element.
*/ */
menuitem?: TieredMenuPassThroughOptionType<T>; item?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: TieredMenuPassThroughOptionType<T>; itemContent?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: TieredMenuPassThroughOptionType<T>; itemLink?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item icon's DOM element.
*/ */
icon?: TieredMenuPassThroughOptionType<T>; itemIcon?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the label's DOM element. * Used to pass attributes to the item label's DOM element.
*/ */
label?: TieredMenuPassThroughOptionType<T>; itemLabel?: TieredMenuPassThroughOptionType<T>;
/** /**
* Used to pass attributes to the submenu icon's DOM element. * Used to pass attributes to the submenu icon's DOM element.
*/ */

View File

@ -365,7 +365,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, '[data-pc-section="action"]'); const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click(); anchorElement ? anchorElement.click() : element && element.click();

View File

@ -1,12 +1,12 @@
<template> <template>
<transition name="p-tieredmenu" @enter="onEnter" v-bind="ptm('menu.transition')"> <transition name="p-tieredmenu" @enter="onEnter" v-bind="ptm('menu.transition')">
<ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')"> <ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('rootList') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
<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,23 +15,23 @@
: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 <div
:class="cx('content')" :class="cx('itemContent')"
@click="onItemClick($event, processedItem)" @click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)"
@mousemove="onItemMouseMove($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)"
v-bind="getPTOptions(processedItem, index, 'content')" 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 :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span> <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" /> <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -185,23 +185,23 @@ 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(
{ {
class: this.cx('label') class: this.cx('itemLabel')
}, },
this.getPTOptions(processedItem, index, 'label') this.getPTOptions(processedItem, index, 'itemLabel')
), ),
submenuicon: mergeProps( submenuicon: mergeProps(
{ {

View File

@ -13,8 +13,8 @@ const classes = {
} }
], ],
start: 'p-tieredmenu-start', start: 'p-tieredmenu-start',
menu: 'p-tieredmenu-root-list', rootList: 'p-tieredmenu-root-list',
menuitem: ({ instance, processedItem }) => [ item: ({ instance, processedItem }) => [
'p-tieredmenu-item', 'p-tieredmenu-item',
{ {
'p-tieredmenu-item-active': instance.isItemActive(processedItem), 'p-tieredmenu-item-active': instance.isItemActive(processedItem),
@ -22,10 +22,10 @@ const classes = {
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-tieredmenu-item-content', itemContent: 'p-tieredmenu-item-content',
action: 'p-tieredmenu-item-link', itemLink: 'p-tieredmenu-item-link',
icon: 'p-tieredmenu-item-icon', itemIcon: 'p-tieredmenu-item-icon',
text: 'p-tieredmenu-item-label', itemLabel: 'p-tieredmenu-item-label',
submenuIcon: 'p-tieredmenu-submenu-icon', submenuIcon: 'p-tieredmenu-submenu-icon',
submenu: 'p-tieredmenu-submenu', submenu: 'p-tieredmenu-submenu',
separator: 'p-tieredmenu-separator', separator: 'p-tieredmenu-separator',