45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { useId } from 'vue'
|
|
|
|
defineProps<{ title: string; tag?: string; summary: string }>()
|
|
|
|
const open = defineModel<boolean>('open', { default: false })
|
|
|
|
const bodyId = useId()
|
|
</script>
|
|
|
|
<template>
|
|
<UCollapsible
|
|
v-model:open="open"
|
|
:ui="{ root: 'flex flex-col gap-3 border border-default p-3' }"
|
|
>
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
class="min-h-11 w-full justify-start gap-2 p-0 text-sm text-highlighted md:min-h-6"
|
|
:aria-controls="bodyId"
|
|
data-testid="seo-disclosure-toggle"
|
|
>
|
|
<UIcon
|
|
name="i-lucide-chevron-down"
|
|
class="size-3.5 shrink-0 transition-transform"
|
|
:class="{ '-rotate-90': !open }"
|
|
/>
|
|
<span class="font-semibold">{{ title }}</span>
|
|
<span
|
|
v-if="tag"
|
|
class="inline-flex min-h-5 items-center border border-dashed border-accented px-1.5 py-px font-mono text-2xs/4 font-medium text-toned"
|
|
>{{ tag }}</span
|
|
>
|
|
<span class="min-w-0 flex-1 truncate text-right text-xs font-normal text-muted">{{
|
|
summary
|
|
}}</span>
|
|
</UButton>
|
|
<template #content>
|
|
<div :id="bodyId" class="flex flex-col gap-3">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</template>
|