Fixed #3794 - TabView: new passthrough(pt) property implementation

api-generator/components/tabpanel.js

@@ -52,6 +52,12 @@ const TabPanelProps = [
         type: 'boolean',
         default: 'null',
         description: 'Whether the tab is disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tabview.js

@@ -40,6 +40,12 @@ const TabViewProps = [
         type: 'any',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -78,11 +84,27 @@ const TabViewEvents = [
     }
 ];
 
+const TabViewSlots = [
+    {
+        name: 'default',
+        description: 'Default slot to detect TabPanel components.'
+    },
+    {
+        name: 'previcon',
+        description: 'Previous button icon template for the scrollable component.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Next button icon template for the scrollable component.'
+    }
+];
+
 module.exports = {
     tabview: {
         name: 'TabView',
         description: 'TabView is a container component to group content with tabs.',
         props: TabViewProps,
-        event: TabViewEvents
+        event: TabViewEvents,
+        slots: TabViewSlots
     }
 };

components/lib/tabpanel/TabPanel.d.ts

@@ -8,8 +8,50 @@
  *
  */
 import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
+import { TabViewPassThroughOptions } from '../tabview';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelPassThroughMethodOptions {
+    props: TabPanelProps;
+    parent: TabViewPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabPanelProps.pt}
+ */
+export interface TabPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headeraction?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    headertitle?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    content?: TabPanelPassThroughOptionType;
+}
+
+export interface TabPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in TabPanel component.
  */
@@ -20,30 +62,37 @@ export interface TabPanelProps {
     header?: string | undefined;
     /**
      * Inline style of the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerStyle?: any;
     /**
      * Style class of the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerClass?: any;
     /**
      * Uses to pass all properties of the HTMLLiElement to the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerProps?: LiHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerActionProps?: AnchorHTMLAttributes | undefined;
     /**
      * Inline style of the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentStyle?: any;
     /**
      * Style class of the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentClass?: any;
     /**
      * Uses to pass all properties of the HTMLDivElement to the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentProps?: HTMLAttributes | undefined;
     /**
@@ -51,6 +100,11 @@ export interface TabPanelProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabPanelPassThroughOptions}
+     */
+    pt?: TabPanelPassThroughOptions;
 }
 /**
  * Defines valid slots in TabPanel slots.

components/lib/tabpanel/TabPanel.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 export default {
     name: 'TabPanel',
+    extends: ComponentBase,
     props: {
         header: null,
         headerStyle: null,

components/lib/tabview/TabView.d.ts

@@ -10,6 +10,8 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
+
 /**
  * Custom tab change event.
  * @see {@link TabViewEmits['tab-change']}
@@ -32,6 +34,86 @@ export interface TabViewChangeEvent {
  */
 export interface TabViewClickEvent extends TabViewChangeEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabViewProps.pt}
+ */
+export interface TabViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nav container's DOM element.
+     */
+    navcontainer?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nav content's DOM element.
+     */
+    navcontent?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    nav?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list items' DOM element.
+     */
+    tabheader?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    prevbutton?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previcon?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nex button's DOM element.
+     */
+    nextbutton?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nexticon?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panelcontent?: TabViewPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabViewPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabView component.
+ */
+export interface TabViewState {
+    /**
+     * Current collapsed state as a boolean.
+     */
+    d_activeIndex: number;
+    /**
+     * Unique id for the TabView component.
+     */
+    id: string;
+    /**
+     * Current state of previous button.
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Current state of the next button.
+     */
+    isNextButtonDisabled: boolean;
+}
+
 /**
  * Defines valid properties in TabView component.
  */
@@ -63,12 +145,19 @@ export interface TabViewProps {
     selectOnFocus?: boolean | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the previous button.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     previousButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the next button.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabViewPassThroughOptions}
+     */
+    pt?: TabViewPassThroughOptions;
 }
 
 /**
@@ -79,6 +168,14 @@ export interface TabViewSlots {
      * Default slot to detect TabPanel components.
      */
     default(): VNode[];
+    /**
+     * Previous button icon template for the scrollable component.
+     */
+    previcon(): VNode[];
+    /**
+     * Next button icon template for the scrollable component.
+     */
+    nexticon(): VNode[];
 }
 
 /**

components/lib/tabview/TabView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="contentClasses">
+    <div :class="contentClasses" v-bind="ptm('root')">
-        <div class="p-tabview-nav-container">
+        <div class="p-tabview-nav-container" v-bind="ptm('navcontainer')">
             <button
                 v-if="scrollable && !isPrevButtonDisabled"
                 ref="prevBtn"
@@ -10,13 +10,23 @@
                 :tabindex="tabindex"
                 :aria-label="prevButtonAriaLabel"
                 @click="onPrevButtonClick"
-                v-bind="previousButtonProps"
+                v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
-                <span class="pi pi-chevron-left" aria-hidden="true"></span>
+                <slot name="previcon">
+                    <span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
+                </slot>
             </button>
-            <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
+            <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
-                <ul ref="nav" class="p-tabview-nav" role="tablist">
+                <ul ref="nav" class="p-tabview-nav" role="tablist" v-bind="ptm('nav')">
-                    <li v-for="(tab, i) of tabs" :key="getKey(tab, i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
+                    <li
+                        v-for="(tab, i) of tabs"
+                        :key="getKey(tab, i)"
+                        :style="getTabProp(tab, 'headerStyle')"
+                        :class="getTabHeaderClass(tab, i)"
+                        role="presentation"
+                        :data-index="i"
+                        v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }"
+                    >
                         <a
                             :id="getTabHeaderActionId(i)"
                             v-ripple
@@ -28,13 +38,13 @@
                             :aria-controls="getTabContentId(i)"
                             @click="onTabClick($event, tab, i)"
                             @keydown="onTabKeyDown($event, tab, i)"
-                            v-bind="getTabProp(tab, 'headerActionProps')"
+                            v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headeraction') }"
                         >
-                            <span v-if="tab.props && tab.props.header" class="p-tabview-title">{{ tab.props.header }}</span>
+                            <span v-if="tab.props && tab.props.header" class="p-tabview-title" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
                             <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                         </a>
                     </li>
-                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true"></li>
+                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></li>
                 </ul>
             </div>
             <button
@@ -46,12 +56,14 @@
                 :tabindex="tabindex"
                 :aria-label="nextButtonAriaLabel"
                 @click="onNextButtonClick"
-                v-bind="nextButtonProps"
+                v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
-                <span class="pi pi-chevron-right" aria-hidden="true"></span>
+                <slot name="nexticon">
+                    <span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
+                </slot>
             </button>
         </div>
-        <div class="p-tabview-panels">
+        <div class="p-tabview-panels" v-bind="ptm('panelcontent')">
             <template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
                 <div
                     v-if="lazy ? isTabActive(i) : true"
@@ -60,7 +72,7 @@
                     :class="getTabContentClass(tab)"
                     role="tabpanel"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="getTabProp(tab, 'contentProps')"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
                 >
                     <component :is="tab"></component>
                 </div>
@@ -70,11 +82,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TabView',
+    extends: ComponentBase,
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
     props: {
         activeIndex: {
@@ -152,6 +166,15 @@ export default {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onScroll(event) {
             this.scrollable && this.updateButtonState();