Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feateure: added the component that contains the accordion content

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-21 14:33:41 +02:00
parent d6abeb26c0
commit 454fc8e134
1 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/accordion/VAccordionChild.vue Normal file
View File

@ -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>