From eaa0212ea0b2cc110861069b1486d90f610ae9a9 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 23 Oct 2023 23:35:14 +0300
Subject: [PATCH] Update accordion sample for template and controlled

---
 doc/accordion/ControlledDoc.vue |  32 +++----
 doc/accordion/TemplateDoc.vue   | 142 +++++++++++++++-----------------
 2 files changed, 81 insertions(+), 93 deletions(-)

diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index d24a111ff..bba3d8874 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -3,10 +3,10 @@
         <p>Accordion can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>v-model</i> to update the active index.</p>
     </DocSectionText>
     <div class="card">
-        <div class="pb-3">
-            <Button @click="active = 0" text label="Activate 1st" />
-            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
+        <div class="flex mb-3 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -40,10 +40,10 @@ export default {
             active: 0,
             code: {
                 basic: `
-<div class="pb-3">
-    <Button @click="active = 0" text label="Activate 1st" />
-    <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
-    <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
+<div class="flex mb-3 gap-2 justify-content-end">
+    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
 </div>
 
 <Accordion v-model:activeIndex="active">
@@ -70,10 +70,10 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="pb-3">
-            <Button @click="active = 0" text label="Activate 1st" />
-            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
+        <div class="flex mb-3 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -112,10 +112,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="pb-3">
-            <Button @click="active = 0" text label="Activate 1st" />
-            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
+        <div class="flex mb-3 gap-2 justify-content-end">
+            <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
+            <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
+            <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
         </div>
 
         <Accordion v-model:activeIndex="active">
diff --git a/doc/accordion/TemplateDoc.vue b/doc/accordion/TemplateDoc.vue
index 87ee90691..ba741246b 100644
--- a/doc/accordion/TemplateDoc.vue
+++ b/doc/accordion/TemplateDoc.vue
@@ -3,11 +3,14 @@
         <p>Title section of a tab is customized with the <i>header</i> slot.</p>
     </DocSectionText>
     <div class="card">
-        <Accordion class="accordion-custom" :activeIndex="0">
+        <Accordion :activeIndex="0">
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-calendar"></i>
-                    <span>Header I</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -16,8 +19,11 @@
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-user"></i>
-                    <span>Header II</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
@@ -26,9 +32,11 @@
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-search"></i>
-                    <span>Header III</span>
-                    <i class="pi pi-cog"></i>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@@ -46,11 +54,14 @@ export default {
         return {
             code: {
                 basic: `
-<Accordion class="accordion-custom" :activeIndex="0">
+<Accordion :activeIndex="0">
     <AccordionTab>
         <template #header>
-            <i class="pi pi-calendar"></i>
-            <span>Header I</span>
+            <span class="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                <Badge value="3" class="ml-auto" />
+            </span>
         </template>
         <p class="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -59,8 +70,11 @@ export default {
     </AccordionTab>
     <AccordionTab>
         <template #header>
-            <i class="pi pi-user"></i>
-            <span>Header II</span>
+            <span class="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                <Badge value="4" class="ml-auto" />
+            </span>
         </template>
         <p class="m-0">
             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
@@ -69,9 +83,11 @@ export default {
     </AccordionTab>
     <AccordionTab>
         <template #header>
-            <i class="pi pi-search"></i>
-            <span>Header III</span>
-            <i class="pi pi-cog"></i>
+            <span class="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" class="ml-auto" />
+            </span>
         </template>
         <p class="m-0">
             At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@@ -83,11 +99,14 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Accordion class="accordion-custom" :activeIndex="0">
+        <Accordion :activeIndex="0">
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-calendar"></i>
-                    <span>Header I</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -96,8 +115,11 @@ export default {
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-user"></i>
-                    <span>Header II</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
@@ -106,9 +128,11 @@ export default {
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-search"></i>
-                    <span>Header III</span>
-                    <i class="pi pi-cog"></i>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@@ -121,30 +145,18 @@ export default {
 
 <script>
 <\/script>
-
-<style scoped>
-.accordion-custom i span {
-    vertical-align: middle;
-}
-
-.accordion-custom span {
-    margin: 0 0.5rem;
-}
-
-.p-accordion p {
-    line-height: 1.5;
-    margin: 0;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card">
-        <Accordion class="accordion-custom" :activeIndex="0">
+        <Accordion :activeIndex="0">
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-calendar"></i>
-                    <span>Header I</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Amy Elsner</span>
+                        <Badge value="3" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -153,8 +165,11 @@ export default {
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-user"></i>
-                    <span>Header II</span>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
+                        <Badge value="4" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
@@ -163,9 +178,11 @@ export default {
             </AccordionTab>
             <AccordionTab>
                 <template #header>
-                    <i class="pi pi-search"></i>
-                    <span>Header III</span>
-                    <i class="pi pi-cog"></i>
+                    <span class="flex align-items-center gap-2 w-full">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+                        <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
+                        <Badge value="2" class="ml-auto" />
+                    </span>
                 </template>
                 <p class="m-0">
                     At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
@@ -178,38 +195,9 @@ export default {
 
 <script setup>
 <\/script>
-
-<style scoped>
-.accordion-custom i span {
-    vertical-align: middle;
-}
-
-.accordion-custom span {
-    margin: 0 0.5rem;
-}
-
-.p-accordion p {
-    line-height: 1.5;
-    margin: 0;
-}
-</style>`
+`
             }
         };
     }
 };
 </script>
-
-<style scoped>
-.accordion-custom i span {
-    vertical-align: middle;
-}
-
-.accordion-custom span {
-    margin: 0 0.5rem;
-}
-
-.p-accordion p {
-    line-height: 1.5;
-    margin: 0;
-}
-</style>