35 lines
968 B
Vue
35 lines
968 B
Vue
<template>
|
|
<div class="overflow-hidden">
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-center justify-between gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-left"
|
|
@click="toggle"
|
|
>
|
|
<span class="flex-1">
|
|
<slot name="header" />
|
|
</span>
|
|
<Icon
|
|
name="mdi:chevron-down"
|
|
size="24"
|
|
class="shrink-0 transition-transform"
|
|
:class="{ 'rotate-180': modelValue }"
|
|
/>
|
|
</button>
|
|
<div v-if="modelValue" class="border border-t-0 border-slate-200 px-6 py-6">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
|
|
const toggle = () => emit('update:modelValue', !props.modelValue)
|
|
</script>
|