44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { ref } from 'vue'
|
|
|
|
defineProps<{
|
|
version: string
|
|
date: string
|
|
items: string[]
|
|
}>()
|
|
|
|
const open = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<UCollapsible
|
|
v-model:open="open"
|
|
class="flex flex-col gap-2.5"
|
|
:ui="{ content: 'data-[state=closed]:hidden' }"
|
|
>
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
:icon="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
|
|
class="min-h-11 self-start gap-1.5 p-0 font-medium text-highlighted md:min-h-8"
|
|
:ui="{ leadingIcon: 'size-3.5' }"
|
|
>
|
|
{{ t("What's new in") }} {{ version }}
|
|
</UButton>
|
|
|
|
<template #content>
|
|
<div class="flex flex-col gap-2 pl-5">
|
|
<span class="text-xs text-muted">{{ date }}</span>
|
|
<ul class="flex flex-col gap-2">
|
|
<li v-for="item in items" :key="item" class="flex gap-2">
|
|
<span aria-hidden="true" class="mt-2 size-1 shrink-0 bg-muted" />
|
|
<span class="text-sm text-pretty text-toned">{{ item }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</UCollapsible>
|
|
</template>
|