diff --git a/components/lib/tabpanel/TabPanel.d.ts b/components/lib/tabpanel/TabPanel.d.ts index 2bb2b7927..37db9ab66 100755 --- a/components/lib/tabpanel/TabPanel.d.ts +++ b/components/lib/tabpanel/TabPanel.d.ts @@ -19,6 +19,7 @@ export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttribute export interface TabPanelPassThroughMethodOptions { props: TabPanelProps; parent: TabViewPassThroughOptions; + context: TabPanelContext; } /** @@ -102,6 +103,17 @@ export interface TabPanelProps { */ pt?: TabPanelPassThroughOptions; } + +/** + * Defines current options in TabPanel component. + */ +export interface TabPanelContext { + /** + * Current index of the tab. + */ + index: number; +} + /** * Defines valid slots in TabPanel slots. */ diff --git a/components/lib/tabview/TabView.d.ts b/components/lib/tabview/TabView.d.ts index 902551af8..1fa83f063 100755 --- a/components/lib/tabview/TabView.d.ts +++ b/components/lib/tabview/TabView.d.ts @@ -8,6 +8,7 @@ * */ import { ButtonHTMLAttributes, VNode } from 'vue'; +import { TabPanelPassThroughOptionType } from '../tabpanel'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined; @@ -55,6 +56,10 @@ export interface TabViewPassThroughOptions { * Uses to pass attributes to the list's DOM element. */ nav?: TabViewPassThroughOptionType; + /** + * Uses to pass attributes to TabPanel helper components. + */ + tab?: TabPanelPassThroughOptionType; /** * Uses to pass attributes to the inkbar's DOM element. */ diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue index 3327c9c72..9300f7a23 100755 --- a/components/lib/tabview/TabView.vue +++ b/components/lib/tabview/TabView.vue @@ -29,7 +29,7 @@ :data-p-highlight="d_activeIndex === index" :data-p-disabled="getTabProp(tab, 'disabled')" data-pc-section="header" - v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }" + v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }" > - {{ tab.props.header }} + {{ tab.props.header }} @@ -79,7 +79,7 @@ role="tabpanel" :aria-labelledby="getTabHeaderActionId(index)" data-pc-section="content" - v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }" + v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'content', index) }" > @@ -145,14 +145,19 @@ export default { getTabContentId(index) { return `${this.id}_${index}_content`; }, - getTabPT(tab, key) { - return this.ptmo(this.getTabProp(tab, 'pt'), key, { + getTabPT(tab, key, index) { + const tabMetaData = { props: tab.props, parent: { props: this.$props, state: this.$data + }, + context: { + index } - }); + }; + + return { ...this.ptm(`tab.${key}`, { tab: tabMetaData }), ...this.ptmo(this.getTabProp(tab, 'pt'), key, tabMetaData) }; }, onScroll(event) { this.scrollable && this.updateButtonState();