mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Refactor #5592 - For Menubar, PanelMenu, Steps, TabMenu, TieredMenu
This commit is contained in:
tugcekucukoglu
parent
aec93e5eea
commit
37eb456f9b
20 changed files with 181 additions and 175 deletions
40
components/lib/panelmenu/PanelMenu.d.ts
vendored
40
components/lib/panelmenu/PanelMenu.d.ts
vendored
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue