visua-vue/src/components/accordion/VAccordionChild.vue

<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"
    :aria-disabled="props.disabled"
    :class="['p-accordionpanel', {'disabled': props.disabled}]">
    <AccordionHeader class="p-accordionheader" role="heading" :aria-level="panelValue">
      <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>