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

Refactor #5592 - Breadcrumb, ContextMenu, Dock

pull/5677/head
tugcekucukoglu 2024-04-30 14:51:44 +03:00
parent 28d77998c0
commit f71512afdb
11 changed files with 87 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/lib/breadcrumb/Breadcrumb.d.ts vendored
View File

@ -57,15 +57,15 @@ export interface BreadcrumbPassThroughOptions {
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */
menu?: BreadcrumbPassThroughOptionType; list?: BreadcrumbPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: BreadcrumbPassThroughOptionType; item?: BreadcrumbPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: BreadcrumbPassThroughOptionType; itemLink?: BreadcrumbPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the icon's DOM element.
*/ */

4
components/lib/breadcrumb/Breadcrumb.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<nav :class="cx('root')" v-bind="ptmi('root')"> <nav :class="cx('root')" v-bind="ptmi('root')">
<ol :class="cx('menu')" v-bind="ptm('menu')"> <ol :class="cx('list')" v-bind="ptm('list')">
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" /> <BreadcrumbItem v-if="home" :item="home" :class="cx('homeItem')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('homeItem')" />
<template v-for="(item, i) of model" :key="item.label + '_' + i"> <template v-for="(item, i) of model" :key="item.label + '_' + i">
<li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')"> <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
<slot name="separator"> <slot name="separator">

8
components/lib/breadcrumb/BreadcrumbItem.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)"> <li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
<template v-if="!templates.item"> <template v-if="!templates.item">
<a :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)"> <a :href="item.url || '#'" :class="cx('itemLink')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('itemLink', ptmOptions)">
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" /> <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span> <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
@ -62,11 +62,11 @@ export default {
return { return {
action: mergeProps( action: mergeProps(
{ {
class: this.cx('action'), class: this.cx('itemLink'),
'aria-current': this.isCurrentUrl(), 'aria-current': this.isCurrentUrl(),
onClick: ($event) => this.onClick($event) onClick: ($event) => this.onClick($event)
}, },
this.ptm('action', this.ptmOptions) this.ptm('itemLink', this.ptmOptions)
), ),
icon: mergeProps( icon: mergeProps(
{ {

8
components/lib/breadcrumb/style/BreadcrumbStyle.js
View File

@ -2,11 +2,11 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-breadcrumb p-component', root: 'p-breadcrumb p-component',
menu: 'p-breadcrumb-list', list: 'p-breadcrumb-list',
home: 'p-breadcrumb-home-item', homeItem: 'p-breadcrumb-home-item',
separator: 'p-breadcrumb-separator', separator: 'p-breadcrumb-separator',
menuitem: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }], item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
action: 'p-breadcrumb-item-link', itemLink: 'p-breadcrumb-item-link',
icon: 'p-breadcrumb-item-icon', icon: 'p-breadcrumb-item-icon',
label: 'p-breadcrumb-item-label' label: 'p-breadcrumb-item-label'
}; };

24
components/lib/contextmenu/ContextMenu.d.ts vendored
View File

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

4
components/lib/contextmenu/ContextMenu.vue
View File

@ -5,7 +5,7 @@
<ContextMenuSub <ContextMenuSub
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="id + '_list'"
:class="cx('menu')" :class="cx('rootList')"
role="menubar" role="menubar"
:root="true" :root="true"
:tabindex="tabindex" :tabindex="tabindex"
@ -319,7 +319,7 @@ export default {
onEnterKey(event) { onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) { if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`); const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`);
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();
const processedItem = this.visibleItems[this.focusedItemInfo.index]; const processedItem = this.visibleItems[this.focusedItemInfo.index];

30
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<transition name="p-contextmenusub" @enter="onEnter" v-bind="ptm('menu.transition')"> <transition name="p-contextmenusub" @enter="onEnter" v-bind="ptm('menu.transition')">
<ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('menu')"> <ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('rootList')">
<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('menuitem', processedItem, index)" v-bind="getPTOptions('item', processedItem, index)"
: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('content', processedItem, index)" 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)">
<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('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
<span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span> <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" /> <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
@ -189,23 +189,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('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(
{ {
class: this.cx('label') class: this.cx('itemLabel')
}, },
this.getPTOptions('label', processedItem, index) this.getPTOptions('itemLabel', processedItem, index)
), ),
submenuicon: mergeProps( submenuicon: mergeProps(
{ {

12
components/lib/contextmenu/style/ContextMenuStyle.js
View File

@ -7,8 +7,8 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
menu: 'p-contextmenu-root-list', rootList: 'p-contextmenu-root-list',
menuitem: ({ instance, processedItem }) => [ item: ({ instance, processedItem }) => [
'p-contextmenu-item', 'p-contextmenu-item',
{ {
'p-contextmenu-item-active': instance.isItemActive(processedItem), 'p-contextmenu-item-active': instance.isItemActive(processedItem),
@ -16,10 +16,10 @@ const classes = {
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-contextmenu-item-content', itemContent: 'p-contextmenu-item-content',
action: 'p-contextmenu-item-link', itemLink: 'p-contextmenu-item-link',
icon: 'p-contextmenu-item-icon', itemIcon: 'p-contextmenu-item-icon',
label: 'p-contextmenu-item-label', itemLabel: 'p-contextmenu-item-label',
submenuIcon: 'p-contextmenu-submenu-icon', submenuIcon: 'p-contextmenu-submenu-icon',
submenu: 'p-contextmenu-submenu', submenu: 'p-contextmenu-submenu',
separator: 'p-contextmenu-separator' separator: 'p-contextmenu-separator'

22
components/lib/dock/Dock.d.ts vendored
View File

@ -59,29 +59,29 @@ export interface DockPassThroughOptions {
*/ */
root?: DockPassThroughOptionType; root?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the container's DOM element. * Used to pass attributes to the list container's DOM element.
*/ */
container?: DockPassThroughOptionType; listContainer?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the list's DOM element. * Used to pass attributes to the list's DOM element.
*/ */
menu?: DockPassThroughOptionType; list?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the list item's DOM element. * Used to pass attributes to the item's DOM element.
*/ */
menuitem?: DockPassThroughOptionType; item?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the item content's DOM element.
*/ */
content?: DockPassThroughOptionType; itemContent?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the action's DOM element. * Used to pass attributes to the item link's DOM element.
*/ */
action?: DockPassThroughOptionType; itemLink?: DockPassThroughOptionType;
/** /**
* Used to pass attributes to the icon's DOM element. * Used to pass attributes to the item icon's DOM element.
*/ */
icon?: DockPassThroughOptionType; itemIcon?: DockPassThroughOptionType;
/** /**
* Used to manage all lifecycle hooks. * Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks} * @see {@link BaseComponent.ComponentHooks}

40
components/lib/dock/DockSub.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div :class="cx('container')" v-bind="ptm('container')"> <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
<ul <ul
ref="list" ref="list"
:id="id" :id="id"
:class="cx('menu')" :class="cx('list')"
role="menu" role="menu"
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'" :aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
:aria-activedescendant="focused ? focusedOptionId : undefined" :aria-activedescendant="focused ? focusedOptionId : undefined"
@ -14,36 +14,36 @@
@blur="onListBlur" @blur="onListBlur"
@keydown="onListKeyDown" @keydown="onListKeyDown"
@mouseleave="onListMouseLeave" @mouseleave="onListMouseLeave"
v-bind="ptm('menu')" v-bind="ptm('list')"
> >
<template v-for="(processedItem, index) of model" :key="index"> <template v-for="(processedItem, index) of model" :key="index">
<li <li
:id="getItemId(index)" :id="getItemId(index)"
:class="cx('menuitem', { processedItem, id: getItemId(index) })" :class="cx('item', { processedItem, id: getItemId(index) })"
role="menuitem" role="menuitem"
:aria-label="processedItem.label" :aria-label="processedItem.label"
:aria-disabled="disabled(processedItem)" :aria-disabled="disabled(processedItem)"
@click="onItemClick($event, processedItem)" @click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter(index)" @mouseenter="onItemMouseEnter(index)"
v-bind="getPTOptions('menuitem', processedItem, index)" v-bind="getPTOptions('item', processedItem, index)"
:data-p-focused="isItemActive(getItemId(index))" :data-p-focused="isItemActive(getItemId(index))"
:data-p-disabled="disabled(processedItem) || false" :data-p-disabled="disabled(processedItem) || false"
> >
<div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)"> <div :class="cx('itemContent')" v-bind="getPTOptions('itemContent', processedItem, index)">
<template v-if="!templates['item']"> <template v-if="!templates['item']">
<a <a
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
:href="processedItem.url" :href="processedItem.url"
:class="cx('action')" :class="cx('itemLink')"
:target="processedItem.target" :target="processedItem.target"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
v-bind="getPTOptions('action', processedItem, index)" v-bind="getPTOptions('itemLink', processedItem, index)"
> >
<template v-if="!templates['icon']"> <template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span> <span v-ripple :class="[cx('itemIcon'), processedItem.icon]" v-bind="getPTOptions('itemIcon', processedItem, index)"></span>
</template> </template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component> <component v-else :is="templates['icon']" :item="processedItem" :class="cx('itemIcon')"></component>
</a> </a>
</template> </template>
<component v-else :is="templates['item']" :item="processedItem" :index="index" :label="processedItem.label" :props="getMenuItemProps(processedItem, index)"></component> <component v-else :is="templates['item']" :item="processedItem" :index="index" :label="processedItem.label" :props="getMenuItemProps(processedItem, index)"></component>
@ -130,7 +130,7 @@ export default {
}); });
}, },
isSameMenuItem(event) { isSameMenuItem(event) {
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="menuitem"]'))); return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="item"]')));
}, },
isItemActive(id) { isItemActive(id) {
return id === this.focusedOptionIndex; return id === this.focusedOptionIndex;
@ -223,28 +223,28 @@ export default {
this.changeFocusedOptionIndex(0); this.changeFocusedOptionIndex(0);
}, },
onEndKey() { onEndKey() {
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1); this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
}, },
onSpaceKey() { onSpaceKey() {
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`); const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
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();
}, },
findNextOptionIndex(index) { findNextOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
}, },
findPrevOptionIndex(index) { findPrevOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index); const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0; return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
}, },
changeFocusedOptionIndex(index) { changeFocusedOptionIndex(index) {
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]'); const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index; let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
@ -259,15 +259,15 @@ export default {
{ {
tabindex: -1, tabindex: -1,
'aria-hidden': true, 'aria-hidden': true,
class: this.cx('action') class: this.cx('itemLink')
}, },
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)
) )
}; };
} }

12
components/lib/dock/style/DockStyle.js
View File

@ -8,18 +8,18 @@ const classes = {
'p-dock-mobile': instance.queryMatches 'p-dock-mobile': instance.queryMatches
} }
], ],
container: 'p-dock-list-container', listContainer: 'p-dock-list-container',
menu: 'p-dock-list', list: 'p-dock-list',
menuitem: ({ instance, processedItem, id }) => [ item: ({ instance, processedItem, id }) => [
'p-dock-item', 'p-dock-item',
{ {
'p-focus': instance.isItemActive(id), 'p-focus': instance.isItemActive(id),
'p-disabled': instance.disabled(processedItem) 'p-disabled': instance.disabled(processedItem)
} }
], ],
content: 'p-dock-item-content', itemContent: 'p-dock-item-content',
action: 'p-dock-item-link', itemLink: 'p-dock-item-link',
icon: 'p-dock-item-icon' itemIcon: 'p-dock-item-icon'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({