From 2af0369a883ff2581ee9dc0bb786b311fb89e569 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 14:14:53 +0200
Subject: [PATCH 01/13] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20accordion=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/accordion.css | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/assets/style/primevue-style/accordion.css

diff --git a/src/assets/style/primevue-style/accordion.css b/src/assets/style/primevue-style/accordion.css
new file mode 100644
index 0000000..10b3659
--- /dev/null
+++ b/src/assets/style/primevue-style/accordion.css
@@ -0,0 +1,42 @@
+:root{
+  /* panel */
+  --p-accordion-transition-duration: 0.2s;
+  --p-accordion-panel-border-width: 0px;
+  --p-accordion-panel-border-color: none;
+  /* header */
+  --p-accordion-header-color: var(--text-action-high-blue-france);
+  --p-accordion-header-hover-color: var(--text-action-high-blue-france);
+  --p-accordion-header-active-color: var(--text-action-high-blue-france);
+  --p-accordion-header-active-hover-color: var(--text-action-high-blue-france);
+  --p-accordion-header-padding: 0.75rem 1rem;
+  --p-accordion-header-font-weight: var(--text-body-MD-standard-text-Medium-weight);
+  --p-accordion-header-border-radius: 0px;
+  --p-accordion-header-border-width: 1px;
+  --p-accordion-header-border-color: var(--border-default-grey);
+  --p-accordion-header-background: var(--background-transparent);
+  --p-accordion-header-hover-background: var(--background-transparent-hover);
+  --p-accordion-header-active-background: var(--background-open-blue-france);
+  --p-accordion-header-active-hover-background: var(--background-open-blue-france-hover);
+  /* header first top border */
+  --p-accordion-header-first-top-border-radius: 0px;
+  --p-accordion-header-first-border-width: 1px;
+  /* header last bottom border */
+  --p-accordion-header-last-bottom-border-radius: 0px;
+  --p-accordion-header-last-active-bottom-border-radius: 0px;
+  /* focus */
+  --p-accordion-header-focus-ring-width: var(--focus-width);
+  --p-accordion-header-focus-ring-style: var(--focus-style);
+  --p-accordion-header-focus-ring-color: var(--focus-color);
+  --p-accordion-header-focus-ring-offset: var(--focus-offset);
+  /* icon */
+  --p-accordion-header-toggle-icon-color: var(--text-action-high-blue-france);
+  --p-accordion-header-toggle-icon-hover-color: var(--text-action-high-blue-france);
+  --p-accordion-header-toggle-icon-active-color: var(--text-action-high-blue-france);
+  --p-accordion-header-toggle-icon-active-hover-color: var(--text-action-high-blue-france);
+  /* content */
+  --p-accordion-content-border-width: 0px;
+  --p-accordion-content-border-color: none;
+  --p-accordion-content-background: var(--background-contrast-grey);
+  --p-accordion-content-color: var(--text-default-grey);
+  --p-accordion-content-padding: 1rem;
+}

From d6abeb26c003b93c8d07ea6105abdf7b7efcc50a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 14:27:45 +0200
Subject: [PATCH 02/13] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20=20Added=20accord?=
 =?UTF-8?q?ion=20interface=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/IVAccordion.type.ts | 28 ++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/accordion/IVAccordion.type.ts

diff --git a/src/components/accordion/IVAccordion.type.ts b/src/components/accordion/IVAccordion.type.ts
new file mode 100644
index 0000000..1b61e80
--- /dev/null
+++ b/src/components/accordion/IVAccordion.type.ts
@@ -0,0 +1,28 @@
+/**
+ * Interface representing the configuration and state of an Accordion component.
+ */
+export default interface IVAccordion {
+  /**
+   * Optional unique identifier for the accordion instance.
+   */
+  id?: string;
+
+  /**
+   * Indicates whether the accordion is disabled.
+   * When true, user interaction is prevented.
+   */
+  disabled?: boolean;
+
+  /**
+   * The current value(s) of the accordion.
+   * Can be a single value or an array of values, depending on the selection mode.
+   * Accepts string, number, or null.
+   */
+  value?: null | string | number | string[] | number[];
+
+  /**
+   * The value associated with a specific panel within the accordion.
+   * Useful for identifying or controlling individual panels.
+   */
+  panelValue?: undefined | string | number;
+}

From 454fc8e1345e8866ad3d3ce0deb39ed272b509c9 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 14:33:41 +0200
Subject: [PATCH 03/13] =?UTF-8?q?=E2=9C=A8=20feateure:=20added=20the=20com?=
 =?UTF-8?q?ponent=20that=20contains=20the=20accordion=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordionChild.vue | 57 ++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/accordion/VAccordionChild.vue

diff --git a/src/components/accordion/VAccordionChild.vue b/src/components/accordion/VAccordionChild.vue
new file mode 100644
index 0000000..a214ba0
--- /dev/null
+++ b/src/components/accordion/VAccordionChild.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+import type IVAccordion from './IVAccordion.type';
+import { useId } from 'vue';
+
+const props = withDefaults(defineProps<IVAccordion>(), {
+  id: () => useId(),
+  disabled: false,
+})
+</script>
+
+<template>
+  <AccordionPanel :id="props.id" :value="panelValue" :disabled="props.disabled" :class="['p-accordionpanel', {'disabled': props.disabled}]">
+    <AccordionHeader class="p-accordionheader">
+      <slot name="header"></slot>
+    </AccordionHeader>
+    <AccordionContent class="p-accordioncontent">
+      <slot name="content"></slot>
+    </AccordionContent>
+  </AccordionPanel>
+</template>
+
+<style lang="css" scoped>
+.p-accordionpanel.disabled {
+  /* header */
+  --p-accordion-header-color: var(--text-disabled-grey);
+  --p-accordion-header-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-active-color: var(--text-disabled-grey);
+  --p-accordion-header-active-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-border-color: var(--border-disabled-grey);
+  --p-accordion-content-border-color: var(--border-disabled-grey);
+  /* focus header */
+  --p-accordion-header-focus-ring-style: none;
+  --p-accordion-header-focus-ring-color: transparent;
+  --p-accordion-header-focus-ring-width: 0px;
+  /* background header */
+  --p-accordion-header-border-color: var(--border-default-grey);
+  --p-accordion-header-background: var(--background-disabled-grey);
+  --p-accordion-header-hover-background: var(--background-disabled-grey);
+  --p-accordion-header-active-background: var(--background-disabled-grey);
+  --p-accordion-header-active-hover-background: var(--background-disabled-grey);
+  /* icon */
+  --p-accordion-header-toggle-icon-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-active-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-active-hover-color: var(--text-disabled-grey);
+}
+
+.p-accordionheader{
+  border-left: none;
+  border-right: none;
+}
+
+.p-accordioncontent{margin: 1rem;}
+</style>

From 1b01779237c06a231ac5cdadb54f48dd999e0097 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 14:42:41 +0200
Subject: [PATCH 04/13] =?UTF-8?q?=E2=9C=A8=20feateure:=20added=20accordion?=
 =?UTF-8?q?=20compoenent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordion.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/components/accordion/VAccordion.vue

diff --git a/src/components/accordion/VAccordion.vue b/src/components/accordion/VAccordion.vue
new file mode 100644
index 0000000..1951812
--- /dev/null
+++ b/src/components/accordion/VAccordion.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Accordion from 'primevue/accordion';
+import VAccordionChild from './VAccordionChild.vue';
+import type IVAccordion from './IVAccordion.type';
+
+const props = withDefaults(defineProps<IVAccordion>(), {
+    value: null,
+});
+</script>
+
+<template>
+  <Accordion :value="props.value" class="p-accordion" style="width: 100%;">
+    <slot>
+      <VAccordionChild/>
+    </slot>
+  </Accordion>
+</template>

From 7f40462903ca41c19256fe0fa1dc64ec43005b7c Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 15:24:06 +0200
Subject: [PATCH 05/13] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20accordion=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/accordion.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/style/primevue-style/accordion.css b/src/assets/style/primevue-style/accordion.css
index 10b3659..ffca950 100644
--- a/src/assets/style/primevue-style/accordion.css
+++ b/src/assets/style/primevue-style/accordion.css
@@ -36,7 +36,7 @@
   /* content */
   --p-accordion-content-border-width: 0px;
   --p-accordion-content-border-color: none;
-  --p-accordion-content-background: var(--background-contrast-grey);
+  --p-accordion-content-background: var(--background-transparent);
   --p-accordion-content-color: var(--text-default-grey);
-  --p-accordion-content-padding: 1rem;
+  --p-accordion-content-padding: 0px;
 }

From b17fc6e8d34a3b76f187e18ad521257f10abbad4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 15:25:24 +0200
Subject: [PATCH 06/13] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index c080610..3736d1a 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -1 +1,2 @@
 @import './primevue-style/button.css';
+@import './primevue-style/accordion.css';

From a8d052894e0c327c2d84b2313617ca2fab2a925e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 15:27:04 +0200
Subject: [PATCH 07/13] =?UTF-8?q?=E2=9C=A8=20feateure:=20updated=20the=20c?=
 =?UTF-8?q?omponent=20that=20contains=20the=20accordion=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordionChild.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/accordion/VAccordionChild.vue b/src/components/accordion/VAccordionChild.vue
index a214ba0..0235bfc 100644
--- a/src/components/accordion/VAccordionChild.vue
+++ b/src/components/accordion/VAccordionChild.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<IVAccordion>(), {
 
 <template>
   <AccordionPanel :id="props.id" :value="panelValue" :disabled="props.disabled" :class="['p-accordionpanel', {'disabled': props.disabled}]">
-    <AccordionHeader class="p-accordionheader">
+    <AccordionHeader class="p-accordionheader" role="heading" :aria-level="panelValue">
       <slot name="header"></slot>
     </AccordionHeader>
     <AccordionContent class="p-accordioncontent">

From 82759bdcae2bbc3df54c162177c1cd5ffb433294 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 15:28:32 +0200
Subject: [PATCH 08/13] Display some accordion components

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c7eecad..3c30836 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 // import VButtonView from '../template/VButtonView.vue'
 // import VButtonGroupView from '../template/VButtonGroupView.vue';
-import VLinkView from '../template/VLinkView.vue';
+// import VLinkView from '../template/VLinkView.vue';
+import VAccordionView from '../template/VAccordionView.vue';
 </script>
 
 
 <template>
   <!-- <VButtonView/> -->
   <!-- <VButtonGroupView/> -->
-   <VLinkView/>
+   <!-- <VLinkView/> -->
+    <VAccordionView/>
 </template>

From 34427c40a2c80820f3ac57850f5d5bc731e6771f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 16:17:55 +0200
Subject: [PATCH 09/13] =?UTF-8?q?=E2=9C=A8=20feature:=20Added=20aria-disab?=
 =?UTF-8?q?led=20=20attribute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordionChild.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/accordion/VAccordionChild.vue b/src/components/accordion/VAccordionChild.vue
index 0235bfc..e5c208d 100644
--- a/src/components/accordion/VAccordionChild.vue
+++ b/src/components/accordion/VAccordionChild.vue
@@ -12,7 +12,12 @@ const props = withDefaults(defineProps<IVAccordion>(), {
 </script>
 
 <template>
-  <AccordionPanel :id="props.id" :value="panelValue" :disabled="props.disabled" :class="['p-accordionpanel', {'disabled': props.disabled}]">
+  <AccordionPanel
+    :id="props.id"
+    :value="panelValue"
+    :disabled="props.disabled"
+    :aria-disabled="props.disabled"
+    :class="['p-accordionpanel', {'disabled': props.disabled}]">
     <AccordionHeader class="p-accordionheader" role="heading" :aria-level="panelValue">
       <slot name="header"></slot>
     </AccordionHeader>

From 4ddb99a878777286c5a8728aaa38f0766123f299 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 16:22:24 +0200
Subject: [PATCH 10/13] =?UTF-8?q?=E2=9C=A8=20feature:=20emit=20handler=20a?=
 =?UTF-8?q?dded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordion.vue | 27 +++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/accordion/VAccordion.vue b/src/components/accordion/VAccordion.vue
index 1951812..c130e49 100644
--- a/src/components/accordion/VAccordion.vue
+++ b/src/components/accordion/VAccordion.vue
@@ -2,14 +2,37 @@
 import Accordion from 'primevue/accordion';
 import VAccordionChild from './VAccordionChild.vue';
 import type IVAccordion from './IVAccordion.type';
+import { ref, watch } from 'vue';
 
 const props = withDefaults(defineProps<IVAccordion>(), {
-    value: null,
+  value: null,
+});
+
+const emit = defineEmits([
+  'update:value',
+])
+
+const localValue = ref(props.value);
+watch(() => props.value, (newVal) => {
+  if(localValue.value !== newVal) {
+    localValue.value = newVal;
+  }
+});
+
+watch(localValue, (newVal) => {
+  if(props.value !== newVal){
+    emit('update:value', newVal);
+  }
 });
 </script>
 
 <template>
-  <Accordion :value="props.value" class="p-accordion" style="width: 100%;">
+  <Accordion
+    v-model:value="localValue"
+    class="p-accordion"
+    style="width: 100%;"
+    @update:value="emit('update:value', $event)"
+  >
     <slot>
       <VAccordionChild/>
     </slot>

From 7e7070ad2ff8118f9e2f50015990c8256a82ee24 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 16:26:07 +0200
Subject: [PATCH 11/13] =?UTF-8?q?=E2=9C=85=20test:=20added=20accordion=20c?=
 =?UTF-8?q?omponent=20test=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VAccordion.spec.ts | 57 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 test/VAccordion.spec.ts

diff --git a/test/VAccordion.spec.ts b/test/VAccordion.spec.ts
new file mode 100644
index 0000000..aa6c1dc
--- /dev/null
+++ b/test/VAccordion.spec.ts
@@ -0,0 +1,57 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import VAccordion from '../src/components/accordion/VAccordion.vue'
+import VAccordionChild from '../src/components/accordion/VAccordionChild.vue'
+
+describe('VAccordion', () => {
+  const factory = () =>
+    mount(VAccordion, {
+      props: {
+        value: '0',
+      },
+      slots: {
+        default: `
+          <VAccordionChild panel-value="0">
+            <template #header>Un titre d'accordéon 1</template>
+            <template #content><p>Contenu 1</p></template>
+          </VAccordionChild>
+          <VAccordionChild panel-value="1" disabled>
+            <template #header>Un titre d'accordéon 2</template>
+            <template #content><p>Contenu 2</p></template>
+          </VAccordionChild>
+          <VAccordionChild panel-value="2">
+            <template #header>Un titre d'accordéon 3</template>
+            <template #content>
+              <p>Contenu 3</p>
+            </template>
+          </VAccordionChild>
+        `,
+      },
+      global: {
+        components: {
+          VAccordionChild,
+        },
+      },
+    })
+
+  test('renders three accordion panels', () => {
+    const wrapper = factory()
+    const panels = wrapper.findAll('.p-accordionpanel')
+    expect(panels).toHaveLength(3)
+  })
+
+  test('activates the first panel by default', () => {
+    const wrapper = factory()
+    const firstPanel = wrapper.findAll('.p-accordionpanel')[0]
+    expect(firstPanel.classes()).toContain('p-accordionpanel-active')
+    expect(firstPanel.attributes('data-p-active')).toBe('true')
+  })
+
+  test('disables the second panel', () => {
+    const wrapper = factory()
+    const secondPanel = wrapper.findAll('.p-accordionpanel')[1]
+    expect(secondPanel.classes()).toContain('p-disabled')
+    expect(secondPanel.attributes('data-p-disabled')).toBe('true')
+    expect(secondPanel.find('button').attributes('disabled')).toBeDefined()
+  })
+})

From f468fff7e4806cd61d1a871b8e48bb1d15490a5e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 16:54:35 +0200
Subject: [PATCH 12/13] =?UTF-8?q?=E2=9C=85=20test:=20added=20new=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/VAccordion.spec.ts | 160 ++++++++++++++++++++++++++++++++--------
 1 file changed, 128 insertions(+), 32 deletions(-)

diff --git a/test/VAccordion.spec.ts b/test/VAccordion.spec.ts
index aa6c1dc..bdcf631 100644
--- a/test/VAccordion.spec.ts
+++ b/test/VAccordion.spec.ts
@@ -1,5 +1,6 @@
 import { describe, test, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { h } from 'vue'
 import VAccordion from '../src/components/accordion/VAccordion.vue'
 import VAccordionChild from '../src/components/accordion/VAccordionChild.vue'
 
@@ -10,22 +11,20 @@ describe('VAccordion', () => {
         value: '0',
       },
       slots: {
-        default: `
-          <VAccordionChild panel-value="0">
-            <template #header>Un titre d'accordéon 1</template>
-            <template #content><p>Contenu 1</p></template>
-          </VAccordionChild>
-          <VAccordionChild panel-value="1" disabled>
-            <template #header>Un titre d'accordéon 2</template>
-            <template #content><p>Contenu 2</p></template>
-          </VAccordionChild>
-          <VAccordionChild panel-value="2">
-            <template #header>Un titre d'accordéon 3</template>
-            <template #content>
-              <p>Contenu 3</p>
-            </template>
-          </VAccordionChild>
-        `,
+        default: () => [
+          h(VAccordionChild, { panelValue: '0' }, {
+            header: () => 'Un titre d\'accordéon 1',
+            content: () => h('p', 'Contenu 1'),
+          }),
+          h(VAccordionChild, { panelValue: '1', disabled: true }, {
+            header: () => 'Un titre d\'accordéon 2',
+            content: () => h('p', 'Contenu 2'),
+          }),
+          h(VAccordionChild, { panelValue: '2' }, {
+            header: () => 'Un titre d\'accordéon 3',
+            content: () => h('p', 'Contenu 3'),
+          }),
+        ],
       },
       global: {
         components: {
@@ -34,24 +33,121 @@ describe('VAccordion', () => {
       },
     })
 
-  test('renders three accordion panels', () => {
-    const wrapper = factory()
-    const panels = wrapper.findAll('.p-accordionpanel')
-    expect(panels).toHaveLength(3)
+    test('renders three accordion panels', () => {
+      const wrapper = factory()
+      const panels = wrapper.findAll('.p-accordionpanel')
+      expect(panels).toHaveLength(3)
+    })
+
+    test('activates the first panel by default', () => {
+      const wrapper = factory()
+      const firstPanel = wrapper.findAll('.p-accordionpanel')[0]
+      expect(firstPanel.classes()).toContain('p-accordionpanel-active')
+      expect(firstPanel.attributes('data-p-active')).toBe('true')
+    })
+
+    test('disables the second panel', () => {
+      const wrapper = factory()
+      const secondPanel = wrapper.findAll('.p-accordionpanel')[1]
+      expect(secondPanel.classes()).toContain('p-disabled')
+      expect(secondPanel.attributes('data-p-disabled')).toBe('true')
+      expect(secondPanel.find('button').attributes('disabled')).toBeDefined()
+    })
+
+    test('does not emit update:value when a disabled panel is clicked', async () => {
+      const wrapper = mount(VAccordion, {
+        props: {
+          value: null,
+        },
+        slots: {
+          default: () => [
+            h(VAccordionChild, { panelValue: '0', disabled: true }, {
+              header: () => 'Panneau désactivé',
+              content: () => h('p', 'Contenu'),
+            }),
+          ],
+        },
+        global: {
+          components: {
+            VAccordionChild,
+          },
+        },
+      })
+
+      const header = wrapper.find('.p-accordionheader')
+      expect(header.attributes('disabled')).toBeDefined()
+      await header.trigger('click')
+      expect(wrapper.emitted('update:value')).toBeFalsy()
+    })
+
+    test('emits update:value when a panel is clicked', async () => {
+      const wrapper = mount(VAccordion, {
+        props: {
+          value: null,
+        },
+        slots: {
+          default: `
+            <VAccordionChild panel-value="0">
+              <template #header>Panel 1</template>
+              <template #content><p>Contenu 1</p></template>
+            </VAccordionChild>
+            <VAccordionChild panel-value="1">
+              <template #header>Panel 2</template>
+              <template #content><p>Contenu 2</p></template>
+            </VAccordionChild>
+          `,
+        },
+        global: {
+          components: {
+            VAccordionChild,
+          },
+        },
+      })
+
+    const headers = wrapper.findAll('.p-accordionheader')
+    await headers[1].trigger('click')
+
+    // Checks that the event has been issued with the correct value
+    expect(wrapper.emitted('update:value')).toBeTruthy()
+    expect(wrapper.emitted('update:value')![0]).toEqual(['1'])
   })
 
-  test('activates the first panel by default', () => {
-    const wrapper = factory()
-    const firstPanel = wrapper.findAll('.p-accordionpanel')[0]
-    expect(firstPanel.classes()).toContain('p-accordionpanel-active')
-    expect(firstPanel.attributes('data-p-active')).toBe('true')
-  })
+  test('toggles an active panel when clicked again', async () => {
+    const wrapper = mount(VAccordion, {
+      props: {
+        value: '0',
+      },
+      slots: {
+        default: () => [
+          h(VAccordionChild, { panelValue: '0' }, {
+            header: () => 'Panneau 1',
+            content: () => h('p', 'Contenu 1'),
+          }),
+        ],
+      },
+      global: {
+        components: {
+          VAccordionChild,
+        },
+      },
+    })
 
-  test('disables the second panel', () => {
-    const wrapper = factory()
-    const secondPanel = wrapper.findAll('.p-accordionpanel')[1]
-    expect(secondPanel.classes()).toContain('p-disabled')
-    expect(secondPanel.attributes('data-p-disabled')).toBe('true')
-    expect(secondPanel.find('button').attributes('disabled')).toBeDefined()
+    const header = wrapper.find('.p-accordionheader')
+
+    // Vérifie que le panneau est actif au départ
+    const panel = wrapper.find('.p-accordionpanel')
+    expect(panel.attributes('data-p-active')).toBe('true')
+
+    // Clique une première fois pour le refermer
+    await header.trigger('click')
+
+    // Vérifie que le panneau est maintenant inactif
+    expect(panel.attributes('data-p-active')).toBe('false')
+
+    // Vérifie que l'événement a bien été émis avec `null` ou une valeur vide
+    const emitted = wrapper.emitted('update:value')
+    expect(emitted).toBeTruthy()
+    const lastEmission = emitted![emitted!.length - 1]
+    expect(lastEmission[0]).toBe(null)
   })
 })

From 645b952c9fa975a6050f899ec9b5103afe440881 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 21 Jul 2025 17:00:18 +0200
Subject: [PATCH 13/13] =?UTF-8?q?=E2=9C=A8=20feature:=20emit=20handler=20a?=
 =?UTF-8?q?dded?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/accordion/VAccordion.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/accordion/VAccordion.vue b/src/components/accordion/VAccordion.vue
index c130e49..1eca4ce 100644
--- a/src/components/accordion/VAccordion.vue
+++ b/src/components/accordion/VAccordion.vue
@@ -8,17 +8,22 @@ const props = withDefaults(defineProps<IVAccordion>(), {
   value: null,
 });
 
+// Define the event emitter for v-model binding
 const emit = defineEmits([
   'update:value',
 ])
 
+// Local reactive value to sync with the parent v-model
 const localValue = ref(props.value);
+
+// Watch for external changes to the prop and update localValue accordingly
 watch(() => props.value, (newVal) => {
   if(localValue.value !== newVal) {
     localValue.value = newVal;
   }
 });
 
+// Watch for internal changes to localValue and emit them to the parent
 watch(localValue, (newVal) => {
   if(props.value !== newVal){
     emit('update:value', newVal);