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

Refactor #3907 - TabMenu options added

pull/3913/head
Tuğçe Küçükoğlu 2023-04-28 10:23:20 +03:00
parent f7572320c4
commit 39bd79dc10
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/lib/tabmenu/TabMenu.d.ts vendored
View File

@ -19,6 +19,7 @@ export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes
export interface TabMenuPassThroughMethodOptions { export interface TabMenuPassThroughMethodOptions {
props: TabMenuProps; props: TabMenuProps;
state: TabMenuState; state: TabMenuState;
options: TabMenuOptions;
} }
/** /**
@ -74,6 +75,16 @@ export interface TabMenuState {
d_activeIndex: number; d_activeIndex: number;
} }
/**
* Defines current options in TabMenu component.
*/
export interface TabMenuOptions {
/**
* Order of the menuitem
*/
order: number;
}
/** /**
* Custom change event. * Custom change event.
* @see {@link TabMenuEmits['tab-change']} * @see {@link TabMenuEmits['tab-change']}

23
components/lib/tabmenu/TabMenu.vue
View File

@ -3,7 +3,7 @@
<ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')"> <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
<template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()"> <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
<router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom> <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
<li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="ptm('menuitem')"> <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="getPTOptions('menuitem', i)">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a <a
ref="tabLink" ref="tabLink"
@ -16,22 +16,22 @@
:tabindex="isExactActive ? '0' : '-1'" :tabindex="isExactActive ? '0' : '-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="ptm('action')" v-bind="getPTOptions('action', i)"
> >
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="ptm('icon')" /> <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
<span class="p-menuitem-text" v-bind="ptm('label')">{{ label(item) }}</span> <span class="p-menuitem-text" v-bind="getPTOptions('label', 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>
</li> </li>
</router-link> </router-link>
<li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)" v-bind="ptm('menuitem')"> <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, item, i)" v-bind="getPTOptions('menuitem', i)">
<template v-if="!$slots.item"> <template v-if="!$slots.item">
<a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="ptm('action')"> <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
<component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" /> <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
<span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="ptm('icon')" /> <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
<span class="p-menuitem-text" v-bind="ptm('label')">{{ label(item) }}</span> <span class="p-menuitem-text" v-bind="getPTOptions('label', 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>
@ -97,6 +97,13 @@ export default {
clearTimeout(this.timeout); clearTimeout(this.timeout);
}, },
methods: { methods: {
getPTOptions(key, index) {
return this.ptm(key, {
options: {
order: index
}
});
},
onItemClick(event, item, index, navigate) { onItemClick(event, item, index, navigate) {
if (this.disabled(item)) { if (this.disabled(item)) {
event.preventDefault(); event.preventDefault();