Refactor #4679

api-generator/components/accordion.js

@@ -106,11 +106,27 @@ const AccordionEvents = [
     }
 ];
 
+const AccordioneSlots = [
+    {
+        name: 'default',
+        description: 'Custom template.'
+    },
+    {
+        name: 'collapseicon',
+        description: 'Custom collapse icon template.'
+    },
+    {
+        name: 'expandicon',
+        description: 'Custom expand icon template.'
+    }
+];
+
 module.exports = {
     accordion: {
         name: 'Accordion',
         description: 'Accordion groups a collection of contents in tabs.',
         props: AccordionProps,
-        events: AccordionEvents
+        events: AccordionEvents,
+        slots: AccordioneSlots
     }
 };

components/lib/accordion/Accordion.d.ts

@@ -175,20 +175,13 @@ export interface AccordionSlots {
      */
     default(): VNode[];
     /**
-     * Custom toggler icon template.
+     * Custom collapse icon template.
-     * @param {Object} scope - togglericon slot's params.
      */
-    togglericon(scope: {
+    collapseicon(): VNode[];
-        /**
+    /**
-         * Current index of the tab
+     * Custom expand icon template.
-         */
+     */
-        index: number;
+    expandicon(): VNode[];
-        /**
-         * Whether the current tab is active
-         * @param {number} index - Current index of the tab
-         */
-        isTabActive: (index: number) => void;
-    }): VNode[];
 }
 
 /**

components/lib/accordion/Accordion.vue

@@ -21,9 +21,14 @@
                     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="$slots.toggleicon" :is="$slots.toggleicon" :isTabActive="isTabActive(i)" :index="i"></component>
+                    <component
-                    <component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                        v-else-if="isTabActive(i)"
-                    <component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
+                        :is="$slots.collapseicon ? $slots.collapseicon : collapseIcon ? 'span' : 'ChevronDownIcon'"
+                        :class="[cx('tab.headerIcon'), collapseIcon]"
+                        aria-hidden="true"
+                        v-bind="getTabPT(tab, 'headericon', i)"
+                    />
+                    <component v-else :is="$slots.expandicon ? $slots.expandicon : expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
                     <span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>