From cfc86747615c8168c716aabbce595d1324b93a0a Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 23 May 2023 22:10:36 +0100
Subject: [PATCH] Refactor #3983 - For Accordion

---
 components/lib/accordion/Accordion.d.ts       |  5 ++++
 components/lib/accordion/Accordion.vue        | 27 +++++++++++--------
 components/lib/accordiontab/AccordionTab.d.ts | 11 ++++++++
 .../lib/basecomponent/BaseComponent.vue       |  8 +++---
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/components/lib/accordion/Accordion.d.ts b/components/lib/accordion/Accordion.d.ts
index 6d0aa818e..deaa0e2a8 100755
--- a/components/lib/accordion/Accordion.d.ts
+++ b/components/lib/accordion/Accordion.d.ts
@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { AccordionTabPassThroughOptionType } from '../accordiontab';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
@@ -58,6 +59,10 @@ export interface AccordionPassThroughOptions {
      * Uses to pass attributes to the root's DOM element.
      */
     root?: AccordionPassThroughOptionType;
+    /**
+     * Uses to pass attributes to AccordionTab helper components.
+     */
+    tab?: AccordionTabPassThroughOptionType;
 }
 
 /**
diff --git a/components/lib/accordion/Accordion.vue b/components/lib/accordion/Accordion.vue
index 201a54b55..fc9ff0ccc 100755
--- a/components/lib/accordion/Accordion.vue
+++ b/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, 'header') }">
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root', i)">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header', i) }">
                 <a
                     :id="getTabHeaderActionId(i)"
                     class="p-accordion-header-link p-accordion-header-action"
@@ -12,12 +12,12 @@
                     :aria-controls="getTabContentId(i)"
                     @click="onTabClick($event, tab, i)"
                     @keydown="onTabKeyDown($event, tab, i)"
-                    v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
+                    v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
                 >
                     <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
-                    <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
-                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')" />
-                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
+                    <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="['p-accordion-toggle-icon', collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="['p-accordion-toggle-icon', expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
@@ -30,9 +30,9 @@
                     :class="getTabContentClass(tab)"
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent', i) }"
                 >
-                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
+                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content', i)">
                         <component :is="tab"></component>
                     </div>
                 </div>
@@ -118,14 +118,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) };
         },
         onTabClick(event, tab, index) {
             this.changeActiveIndex(event, tab, index);
diff --git a/components/lib/accordiontab/AccordionTab.d.ts b/components/lib/accordiontab/AccordionTab.d.ts
index 992b8e4ef..c9ebb214b 100755
--- a/components/lib/accordiontab/AccordionTab.d.ts
+++ b/components/lib/accordiontab/AccordionTab.d.ts
@@ -19,6 +19,7 @@ export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughA
 export interface AccordionTabPassThroughMethodOptions {
     props: AccordionTabProps;
     parent: AccordionPassThroughOptions;
+    context: AccordionTabContext;
 }
 
 /**
@@ -114,6 +115,16 @@ export interface AccordionTabProps {
     pt?: AccordionTabPassThroughOptions;
 }
 
+/**
+ * Defines current options in AccordionTab component.
+ */
+export interface AccordionTabContext {
+    /**
+     * Current index of the tab.
+     */
+    index: number;
+}
+
 /**
  * Defines valid slots in AcordionTab slots.
  */
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index da4e0e2c1..af71ea6d4 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -28,10 +28,11 @@ export default {
         }
     },
     methods: {
-        getOption(obj = {}, key = '') {
-            const fKey = ObjectUtils.convertToFlatCase(key);
+        getOption(options, key = '') {
+            const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
+            const fKey = fKeys.shift();
 
-            return obj[Object.keys(obj).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''];
+            return fKey ? (typeof options === 'object' ? this.getOption(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], fKeys.join('.')) : undefined) : options;
         },
         getPTValue(obj = {}, key = '', params = {}) {
             const self = ObjectUtils.getItemValue(this.getOption(obj, key), params);
@@ -55,6 +56,7 @@ export default {
             return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(this.$options.css && this.$options.css.classes, key), { instance: this, props: this.$props, state: this.$data, ...params }) : undefined;
         },
         cxo(obj = {}, key = '', params = {}) {
+            // @todo
             return !this.isUnstyled ? ObjectUtils.getItemValue(this.getOption(obj.css && obj.css.classes, key), { instance: obj, props: obj && obj.props, state: obj && obj.data, ...params }) : undefined;
         },
         sx(key = '', when = true, params = {}) {