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/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,37 +62,49 @@ 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;
     /**
      * Whether the tab is disabled.
      * @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/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/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[];
 }
 
 /**