Refactor #4190 - For TabMenu
parent
b947b4860f
commit
daf6034d98
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue