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
22
components/lib/tieredmenu/TieredMenu.d.ts
vendored
22
components/lib/tieredmenu/TieredMenu.d.ts
vendored
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue