51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, required: true },
|
|
defaultOpen: { type: Boolean, default: false },
|
|
sectionId: { type: String, default: undefined },
|
|
})
|
|
|
|
const open = ref(props.defaultOpen)
|
|
const panelId = props.sectionId ? `${props.sectionId}-panel` : undefined
|
|
const headerId = props.sectionId ? `${props.sectionId}-header` : undefined
|
|
|
|
function toggle() {
|
|
open.value = !open.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section :aria-labelledby="headerId">
|
|
<button
|
|
:id="headerId"
|
|
type="button"
|
|
class="flex min-h-11 w-full items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
|
|
:aria-expanded="open"
|
|
:aria-controls="panelId"
|
|
@click="toggle"
|
|
>
|
|
<span>{{ title }}</span>
|
|
<svg
|
|
class="h-5 w-5 shrink-0 text-gray-500 transition-transform dark:text-gray-400"
|
|
:class="open ? 'rotate-180' : ''"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div
|
|
v-show="open"
|
|
:id="panelId"
|
|
:aria-labelledby="headerId"
|
|
class="mt-4 space-y-4"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
</template>
|