56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
export type UpdateBannerState = 'available'
|
|
|
|
defineProps<{
|
|
state: UpdateBannerState
|
|
version: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'go-to-settings': []
|
|
dismiss: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<UAlert
|
|
role="region"
|
|
aria-label="Update available"
|
|
color="info"
|
|
variant="soft"
|
|
orientation="horizontal"
|
|
icon="i-lucide-circle-arrow-up"
|
|
:title="`Version ${version} is available`"
|
|
description="Update it from Settings. It takes about 2 minutes and the site stays online."
|
|
:ui="{
|
|
root: 'flex-wrap items-start gap-x-2.5 gap-y-3 border border-default py-3 ring-0 md:flex-nowrap md:items-center',
|
|
wrapper: 'basis-0 gap-0.5',
|
|
title: 'text-sm text-highlighted',
|
|
description: 'mt-0 text-sm/5 text-toned',
|
|
actions: 'max-md:w-full max-md:basis-full',
|
|
}"
|
|
>
|
|
<template #actions>
|
|
<div class="flex w-full items-center gap-2">
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
class="h-11 flex-1 justify-center border border-accented bg-default px-3 text-highlighted ring-0 md:h-8 md:flex-none"
|
|
@click="emit('go-to-settings')"
|
|
>
|
|
Go to Settings
|
|
</UButton>
|
|
<UButton
|
|
color="neutral"
|
|
variant="ghost"
|
|
icon="i-lucide-x"
|
|
aria-label="Dismiss"
|
|
class="size-11 shrink-0 justify-center text-muted md:size-8"
|
|
:ui="{ leadingIcon: 'size-4' }"
|
|
@click="emit('dismiss')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</UAlert>
|
|
</template>
|