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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/menubar/Menubar.d.ts vendored
View File

@ -59,29 +59,29 @@ export interface MenubarPassThroughOptions {
*/
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.
*/

2
components/lib/menubar/Menubar.vue
View File

@ -404,7 +404,7 @@ export default {
onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click();

34
components/lib/menubar/MenubarSub.vue
View File

@ -1,11 +1,11 @@
<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)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -14,17 +14,23 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(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">
<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')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<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('itemIcon')" />
<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('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<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')" />
@ -179,23 +185,23 @@ export default {
return {
action: mergeProps(
{
class: this.cx('action'),
class: this.cx('itemLink'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions(processedItem, index, 'action')
this.getPTOptions(processedItem, index, 'itemLink')
),
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(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions(processedItem, index, 'label')
this.getPTOptions(processedItem, index, 'itemLabel')
),
submenuicon: mergeProps(
{

12
components/lib/menubar/style/MenubarStyle.js
View File

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

40
components/lib/panelmenu/PanelMenu.d.ts vendored
View File

@ -73,9 +73,9 @@ export interface PanelMenuPassThroughOptions {
*/
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.
*/
@ -89,33 +89,33 @@ export interface PanelMenuPassThroughOptions {
*/
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;
/**
* 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;
contentContainer?: PanelMenuPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/
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.
*/

12
components/lib/panelmenu/PanelMenu.vue
View File

@ -19,7 +19,7 @@
>
<div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
<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)">
<component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
</slot>
@ -32,8 +32,8 @@
</div>
</div>
<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-if="getItemProp(item, 'items')" :class="cx('menuContent')" v-bind="ptm('menuContent')">
<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('content')" v-bind="ptm('content')">
<PanelMenuList
:panelId="getPanelId(index)"
:items="getItemProp(item, 'items')"
@ -164,14 +164,14 @@ export default {
}
},
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 });
event.preventDefault();
},
onHeaderArrowUpKey(event) {
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 });
event.preventDefault();
@ -185,7 +185,7 @@ export default {
event.preventDefault();
},
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);
event.preventDefault();

6
components/lib/panelmenu/PanelMenuList.vue
View File

@ -1,7 +1,7 @@
<template>
<PanelMenuSub
:id="panelId + '_list'"
:class="cx('menu')"
:class="cx('rootList')"
role="tree"
:tabindex="-1"
:aria-activedescendant="focused ? focusedItemId : undefined"
@ -17,7 +17,7 @@
@item-mousemove="onItemMouseMove"
:pt="pt"
:unstyled="unstyled"
v-bind="ptm('menu')"
v-bind="ptm('rootList')"
/>
</template>
@ -203,7 +203,7 @@ export default {
onEnterKey(event) {
if (ObjectUtils.isNotEmpty(this.focusedItem)) {
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();
}

22
components/lib/panelmenu/PanelMenuSub.vue
View File

@ -4,7 +4,7 @@
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
:style="getItemProp(processedItem, 'style')"
role="treeitem"
:aria-label="getItemLabel(processedItem)"
@ -12,19 +12,19 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions('menuitem', processedItem, index)"
v-bind="getPTOptions('item', processedItem, index)"
:data-p-focused="isItemFocused(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">
<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)">
<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)" />
</template>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
<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>
</a>
</template>
@ -40,7 +40,7 @@
></component>
</div>
<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
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
@ -173,17 +173,17 @@ export default {
return {
action: mergeProps(
{
class: this.cx('action'),
class: this.cx('itemLink'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions('action', processedItem, index)
this.getPTOptions('itemLink', processedItem, index)
),
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(
{

16
components/lib/panelmenu/style/PanelMenuStyle.js
View File

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

16
components/lib/steps/Steps.d.ts vendored
View File

@ -57,23 +57,23 @@ export interface StepsPassThroughOptions {
/**
* 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.
*/
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.
* @see {@link BaseComponent.ComponentHooks}

28
components/lib/steps/Steps.vue
View File

@ -1,22 +1,22 @@
<template>
<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()">
<li
v-if="visible(item)"
:class="[cx('menuitem', { item, index }), item.class]"
:class="[cx('item', { item, index }), item.class]"
:style="item.style"
:aria-current="isActive(index) ? 'step' : undefined"
@click="onItemClick($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-disabled="isItemDisabled(item, index)"
>
<template v-if="!$slots.item">
<span :class="cx('action')" v-bind="getPTOptions('action', item, index)">
<span :class="cx('step')" v-bind="getPTOptions('step', item, index)">{{ index + 1 }}</span>
<span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
<span :class="cx('itemLink')" v-bind="getPTOptions('itemLink', item, index)">
<span :class="cx('itemNumber')" v-bind="getPTOptions('itemNumber', item, index)">{{ index + 1 }}</span>
<span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, index)">{{ label(item) }}</span>
</span>
</template>
<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;
},
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;
},
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;
},
@ -193,23 +193,23 @@ export default {
return {
action: mergeProps(
{
class: this.cx('action'),
class: this.cx('itemLink'),
onClick: ($event) => this.onItemClick($event, item),
onKeyDown: ($event) => this.onItemKeydown($event, item)
},
this.getPTOptions('action', item, index)
this.getPTOptions('itemLink', item, index)
),
step: mergeProps(
{
class: this.cx('step')
class: this.cx('itemNumber')
},
this.getPTOptions('step', item, index)
this.getPTOptions('itemNumber', item, index)
),
label: mergeProps(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions('label', item, index)
this.getPTOptions('itemLabel', item, index)
)
};
}

10
components/lib/steps/style/StepsStyle.js
View File

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

20
components/lib/tabmenu/TabMenu.d.ts vendored
View File

@ -59,25 +59,25 @@ export interface TabMenuPassThroughOptions {
*/
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.
*/

36
components/lib/tabmenu/TabMenu.vue
View File

@ -1,23 +1,23 @@
<template>
<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()">
<li
v-if="visible(item)"
ref="tab"
:class="[cx('menuitem', { item, index: i }), item.class]"
:class="[cx('item', { item, index: i }), item.class]"
role="presentation"
@click="onItemClick($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-disabled="disabled(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)">
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="cx('icon')" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
<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('itemIcon')" />
<span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon', item, i)" />
<span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, i)">{{ label(item) }}</span>
</a>
</template>
<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;
},
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;
},
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;
},
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;
},
@ -190,8 +190,8 @@ export default {
focusableItem.focus();
},
onTabKey() {
const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="action"][tabindex="0"]');
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="itemlink"][tabindex="0"]');
if (focusedItem !== activeItem.children[0]) {
activeItem && (activeItem.children[0].tabIndex = '0');
@ -230,24 +230,24 @@ export default {
return {
action: mergeProps(
{
class: this.cx('action'),
class: this.cx('itemLink'),
tabindex: -1,
onClick: ($event) => this.onItemClick($event, item, index),
onKeyDown: ($event) => this.onKeydownItem($event, item, index)
},
this.getPTOptions('action', item, index)
this.getPTOptions('itemLink', item, index)
),
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(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions('label', item, index)
this.getPTOptions('itemLabel', item, index)
)
};
}

10
components/lib/tabmenu/style/TabMenuStyle.js
View File

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

2
components/lib/themes/primeone/base/panelmenu/index.js
View File

@ -107,7 +107,7 @@ export default {
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')};
color: ${dt('panelmenu.item.focus.color')};
}

22
components/lib/tieredmenu/TieredMenu.d.ts vendored
View File

@ -61,29 +61,29 @@ export interface TieredMenuPassThroughOptions<T = any> {
*/
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.
*/
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.
*/

2
components/lib/tieredmenu/TieredMenu.vue
View File

@ -365,7 +365,7 @@ export default {
onEnterKey(event) {
if (this.focusedItemInfo.index !== -1) {
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]');
anchorElement ? anchorElement.click() : element && element.click();

30
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -1,12 +1,12 @@
<template>
<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)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
:class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
@ -15,23 +15,23 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
v-bind="getPTOptions(processedItem, index, 'item')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div
:class="cx('content')"
:class="cx('itemContent')"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter($event, processedItem)"
@mousemove="onItemMouseMove($event, processedItem)"
v-bind="getPTOptions(processedItem, index, 'content')"
v-bind="getPTOptions(processedItem, index, 'itemContent')"
>
<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')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<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('itemIcon')" />
<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('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
<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')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@ -185,23 +185,23 @@ export default {
return {
action: mergeProps(
{
class: this.cx('action'),
class: this.cx('itemLink'),
tabindex: -1,
'aria-hidden': true
},
this.getPTOptions(processedItem, index, 'action')
this.getPTOptions(processedItem, index, 'itemLink')
),
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(
{
class: this.cx('label')
class: this.cx('itemLabel')
},
this.getPTOptions(processedItem, index, 'label')
this.getPTOptions(processedItem, index, 'itemLabel')
),
submenuicon: mergeProps(
{

12
components/lib/tieredmenu/style/TieredMenuStyle.js
View File

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