Merge pull request #2419 from tugcekucukoglu/accordion

Fixed #2418 - Accordion v2 | New expandIcon and collapseIcon properties
primefaces · Apr 8, 2022 · c99e060 · c99e060
2 parents 7ca0bd1 + 8879294
commit c99e060
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 24 deletions.
diff --git a/api-generator/components/accordion.js b/api-generator/components/accordion.js
@@ -10,6 +10,18 @@ const AccordionProps = [
         type: "number|array",
         default: "null",
         description: "Index of the active tab or an array of indexes in multiple mode."
+    },
+    {
+        name: "expandIcon",
+        type: "string",
+        default: "pi-chevron-right",
+        description: "Icon of a collapsed tab."
+    },
+    {
+        name: "collapseIcon",
+        type: "string",
+        default: "pi-chevron-down",
+        description: "Icon of a expanded tab."
     }
 ];
 

diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
@@ -3,6 +3,8 @@ import Vue, { VNode } from 'vue';
 declare class Accordion extends Vue {
     multiple?: boolean;
     activeIndex?: Number|[Number];
+    expandIcon?: string;
+    collapseIcon?: string;
     $emit(eventName: 'tab-open', e: {originalEvent: Event, tab: any}): this;
     $emit(eventName: 'tab-close', e: {originalEvent: Event, tab: any}): this;
     $slots: {

diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
@@ -8,7 +8,15 @@
 export default {
     props: {
         multiple: Boolean,
-        activeIndex: [Number,Array]
+        activeIndex: [Number,Array],
+        expandIcon: {
+            type: String,
+            default: 'pi-chevron-right'
+        },
+        collapseIcon: {
+            type: String,
+            default: 'pi-chevron-down'
+        }
     },
     data() {
         return {

diff --git a/src/components/accordiontab/AccordionTab.vue b/src/components/accordiontab/AccordionTab.vue
@@ -3,7 +3,7 @@
         <div :class="getTabHeaderClass()">
             <a role="tab" class="p-accordion-header-link" @click="onTabClick" @keydown="onTabKeydown" :tabindex="disabled ? null : '0'"
                 :aria-expanded="isTabActive()" :id="ariaId + '_header'" :aria-controls="ariaId + '_content'">
-                <span :class="getHeaderIcon()"></span>
+                <span :class="isTabActive() ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></span>
                 <span class="p-accordion-header-text" v-if="header">{{header}}</span>
                 <slot name="header"></slot>
             </a>
@@ -58,10 +58,12 @@ export default {
         getTabHeaderClass() {
             return ['p-accordion-header', {'p-highlight': this.isTabActive(), 'p-disabled': this.disabled}]
         },
-        getHeaderIcon() {
-            const active = this.isTabActive();
-            return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
-        }
+        getHeaderCollapseIcon() {
+            return ['p-accordion-toggle-icon pi', this.$parent.collapseIcon];
+        },
+        getHeaderExpandIcon() {
+            return ['p-accordion-toggle-icon pi', this.$parent.expandIcon];
+        },
     },
     computed: {
         ariaId() {

diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
@@ -170,26 +170,38 @@ export default {
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
-						<tr>
-							<th>Name</th>
-							<th>Type</th>
-							<th>Default</th>
-							<th>Description</th>
-						</tr>
+							<tr>
+								<th>Name</th>
+								<th>Type</th>
+								<th>Default</th>
+								<th>Description</th>
+							</tr>
 						</thead>
 						<tbody>
-						<tr>
-							<td>header</td>
-							<td>string</td>
-							<td>null</td>
-							<td>Orientation of tab headers.</td>
-						</tr>
-						<tr>
-							<td>disabled</td>
-							<td>boolean</td>
-							<td>false</td>
-							<td>Whether the tab is disabled.</td>
-						</tr>
+							<tr>
+								<td>header</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Orientation of tab headers.</td>
+							</tr>
+							<tr>
+								<td>disabled</td>
+								<td>boolean</td>
+								<td>false</td>
+								<td>Whether the tab is disabled.</td>
+							</tr>
+							<tr>
+								<td>expandIcon</td>
+								<td>string</td>
+								<td>pi-chevron-right</td>
+								<td>Icon of a collapsed tab.</td>
+							</tr>
+							<tr>
+								<td>collapseIcon</td>
+								<td>string</td>
+								<td>pi-chevron-down</td>
+								<td>Icon of an expanded tab.</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>