58 lines
2.2 KiB
Vue
58 lines
2.2 KiB
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" :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>
|