Refactor #5592 - For Menubar, PanelMenu, Steps, TabMenu, TieredMenu
parent
aec93e5eea
commit
37eb456f9b
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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(
|
||||||
{
|
{
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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(
|
||||||
{
|
{
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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)
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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)
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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')};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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(
|
||||||
{
|
{
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue