Accordion pt completed - panel dts changes

components/lib/accordion/Accordion.d.ts

@@ -10,6 +10,15 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    props: AccordionProps;
+    state: AccordionState;
+}
 /**
  * Custom tab open event.
  * @see {@link AccordionEmits.tab-open}
@@ -40,6 +49,38 @@ export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
  */
 export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state as a boolean
+     */
+    d_activeIndex: boolean;
+}
+
 /**
  * Defines valid properties in Accordion component.
  */
@@ -79,6 +120,11 @@ export interface AccordionProps {
      * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: AccordionPassThroughOptions;
 }
 
 /**

components/lib/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="p-accordion p-component" v-bind="ptm('root')">
         <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
-            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'tabheader') }">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
                 <a
                     :id="getTabHeaderActionId(i)"
                     class="p-accordion-header-link p-accordion-header-action"
@@ -12,10 +12,11 @@
                     :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 :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
-                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <span v-else :class="getTabHeaderIconClass(i)" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')"></span>
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
@@ -28,9 +29,9 @@
                     :class="getTabContentClass(tab)"
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="getTabProp(tab, 'contentProps')"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
                 >
-                    <div class="p-accordion-content">
+                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
                         <component :is="tab"></component>
                     </div>
                 </div>

components/lib/accordiontab/AccordionTab.d.ts

@@ -8,8 +8,61 @@
  *
  */
 import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { AccordionPassThroughOptions } from '../accordion';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionTabPassThroughMethodOptions {
+    props: AccordionTabProps;
+    parent: AccordionPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionTabProps.pt}
+ */
+export interface AccordionTabPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headeraction's DOM element.
+     */
+    headeraction?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headericon's DOM element.
+     */
+    headericon?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headertitle's DOM element.
+     */
+    headertitle?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleablecontent?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: AccordionTabPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionTabPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in AccordionTab component.
  */
@@ -62,9 +115,23 @@ export interface AccordionTabSlots {
      */
     default(): VNode[];
     /**
-     * Custom content for the title section of a panel is defined using the header template.
+     * Custom content for the title section of a AccordionTab is defined using the header template.
      */
     header(): VNode[];
+    /**
+     * Custom icon for the header section of a AccordionTab is defined using the headericon template.
+     * @param {Object} scope - header slot's params.
+     */
+    headericon(scope: {
+        /**
+         * Index of the tab
+         */
+        index: number;
+        /**
+         * Whether the tab is active
+         */
+        isTabActive(i: number): void;
+    }): VNode[];
 }
 
 /**

components/lib/panel/Panel.d.ts

@@ -10,7 +10,15 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: { props: PanelProps; state: PanelState }) => PanelPassThroughAttributes) | null | undefined;
+export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
 
 /**
  * Custom toggle event.