46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<CollapsibleRoot v-model:open="model" :disabled="disabled">
|
|
<div class="flex flex-row justify-center items-center">
|
|
<span v-if="!!label">{{ label }}</span>
|
|
<CollapsibleTrigger class="ms-4" asChild>
|
|
<Button icon :disabled="disabled">
|
|
<Icon v-if="model" icon="radix-icons:cross-2" class="h-4 w-4" />
|
|
<Icon v-else icon="radix-icons:row-spacing" class="h-4 w-4" />
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
<slot name="alwaysVisible"></slot>
|
|
<CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
|
|
<slot></slot>
|
|
</CollapsibleContent>
|
|
</CollapsibleRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
const { label, disabled = false } = defineProps<{
|
|
label?: string
|
|
disabled?: boolean
|
|
}>();
|
|
const model = defineModel<boolean>();
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes collapseOpen {
|
|
from {
|
|
height: 0;
|
|
}
|
|
to {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
}
|
|
|
|
@keyframes collapseClose {
|
|
from {
|
|
height: var(--radix-collapsible-content-height);
|
|
}
|
|
to {
|
|
height: 0;
|
|
}
|
|
}
|
|
</style> |