vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3907 - Options added

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-04-27 17:16:09 +03:00
parent bd0152fdef
commit 059f7d7f68
10 changed files with 227 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/lib/contextmenu/ContextMenu.d.ts vendored
View file

@ -20,6 +20,7 @@ export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAtt
export interface ContextMenuPassThroughMethodOptions {
props: ContextMenuProps;
state: ContextMenuState;
options: ContextMenuOptions;
}
/**
@ -125,6 +126,22 @@ export interface ContextMenuState {
submenuVisible: boolean;
}
/**
* Defines current options in ContextMenu component.
*/
export interface ContextMenuOptions {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focused state of menuitem as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
* Defines valid properties in ContextMenu component.
*/

43
components/lib/contextmenu/ContextMenuSub.vue
View file

@ -15,24 +15,41 @@
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="ptm('menuitem')"
v-bind="getPTOptions(processedItem, 'menuitem')"
>
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="ptm('content')">
<div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
<template v-if="!templates.item">
<router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
<a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="ptm('action')">
<a
v-ripple
:href="href"
:class="getItemActionClass(processedItem, { isActive, isExactActive })"
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, navigate)"
v-bind="getPTOptions(processedItem, 'action')"
>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
<span class="p-menuitem-text" v-bind="ptm('label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
</a>
</router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="ptm('action')">
<a
v-else
v-ripple
:href="getItemProp(processedItem, 'url')"
:class="getItemActionClass(processedItem)"
:target="getItemProp(processedItem, 'target')"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions(processedItem, 'action')"
>
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="ptm('icon')" />
<span class="p-menuitem-text" v-bind="ptm('label')">{{ getItemLabel(processedItem) }}</span>
<span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
<span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
<AngleRightIcon v-else class="p-submenu-icon" v-bind="ptm('submenuicon')" />
<AngleRightIcon v-else class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuicon')" />
</template>
</a>
</template>
@ -130,6 +147,14 @@ export default {
getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label');
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}
});
},
isItemActive(processedItem) {
return this.activeItemPath.some((path) => path.key === processedItem.key);
},