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

Refactor #4190 - For ContextMenu

pull/4203/head
Tuğçe Küçükoğlu 2023-07-24 17:23:12 +03:00
parent 63ebb3991f
commit e83481fe4a
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/contextmenu/ContextMenu.d.ts vendored
View File

@ -141,6 +141,14 @@ export interface ContextMenuState {
* Defines current options in ContextMenu component. * Defines current options in ContextMenu component.
*/ */
export interface ContextMenuContext { export interface ContextMenuContext {
/**
* Current menuitem
*/
item: any;
/**
* Index of the menuitem
*/
index: number;
/** /**
* Current active state of menuitem as a boolean. * Current active state of menuitem as a boolean.
* @defaultValue false * @defaultValue false

24
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -15,27 +15,27 @@
: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, 'menuitem')" v-bind="getPTOptions('menuitem', processedItem, index)"
: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)" v-bind="getPTOptions(processedItem, 'content')"> <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
<template v-if="!templates.item"> <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> <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="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')"> <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
</a> </a>
</router-link> </router-link>
<a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')"> <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" /> <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" /> <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')"> <template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" /> <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" /> <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
</template> </template>
</a> </a>
</template> </template>
@ -139,11 +139,13 @@ export default {
getItemLabel(processedItem) { getItemLabel(processedItem) {
return this.getItemProp(processedItem, 'label'); return this.getItemProp(processedItem, 'label');
}, },
getPTOptions(processedItem, key) { getPTOptions(key, processedItem, index) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {
item: processedItem,
active: this.isItemActive(processedItem), active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem) focused: this.isItemFocused(processedItem),
index
} }
}); });
}, },