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] =?UTF-8?q?=E2=9C=A8=20feateure:=20added=20the=20component?=
 =?UTF-8?q?=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>