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();