Refactor #4190 - For TabMenu

pull/4208/head
Tuğçe Küçükoğlu 2023-07-25 12:11:57 +03:00
parent b947b4860f
commit daf6034d98
2 changed files with 14 additions and 9 deletions

View File

@ -86,6 +86,10 @@ export interface TabMenuState {
* Defines current options in TabMenu component. * Defines current options in TabMenu component.
*/ */
export interface TabMenuContext { export interface TabMenuContext {
/**
* Current menuitem
*/
item: any;
/** /**
* Index of the menuitem * Index of the menuitem
*/ */

View File

@ -9,7 +9,7 @@
:class="[cx('menuitem', { item, isActive, isExactActive }), item.class]" :class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
:style="item.style" :style="item.style"
role="presentation" role="presentation"
v-bind="getPTOptions('menuitem', i)" v-bind="getPTOptions('menuitem', item, i)"
:data-p-highlight="exact ? isExactActive : isActive" :data-p-highlight="exact ? isExactActive : isActive"
:data-p-disabled="disabled(item)" :data-p-disabled="disabled(item)"
> >
@ -25,11 +25,11 @@
:tabindex="-1" :tabindex="-1"
@click="onItemClick($event, item, i, navigate)" @click="onItemClick($event, item, i, navigate)"
@keydown="onKeydownItem($event, item, i, navigate)" @keydown="onKeydownItem($event, item, i, navigate)"
v-bind="getPTOptions('action', i)" v-bind="getPTOptions('action', item, i)"
> >
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
</a> </a>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="i"></component> <component v-else :is="$slots.item" :item="item" :index="i"></component>
@ -42,15 +42,15 @@
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', i)" v-bind="getPTOptions('menuitem', 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', i)"> <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)">
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" /> <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', item, i)" />
<span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span> <span :class="cx('label')" v-bind="getPTOptions('label', item, i)">{{ label(item) }}</span>
</a> </a>
</template> </template>
<component v-else :is="$slots.item" :item="item" :index="i"></component> <component v-else :is="$slots.item" :item="item" :index="i"></component>
@ -98,9 +98,10 @@ export default {
clearTimeout(this.timeout); clearTimeout(this.timeout);
}, },
methods: { methods: {
getPTOptions(key, index) { getPTOptions(key, item, index) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {
item,
index index
} }
}); });