68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, nextTick, onMounted, ref } from 'vue'
|
|
|
|
interface ResultPanelAction {
|
|
label: string
|
|
color?: 'primary' | 'neutral'
|
|
variant?: 'solid' | 'soft' | 'outline' | 'ghost'
|
|
to?: string
|
|
disabled?: boolean
|
|
onClick?: () => void
|
|
}
|
|
|
|
const props = defineProps<{
|
|
tone: 'success' | 'error' | 'info'
|
|
icon: string
|
|
title: string
|
|
description: string
|
|
actions: ResultPanelAction[]
|
|
}>()
|
|
|
|
const role = computed(() => (props.tone === 'error' ? 'alert' : 'status'))
|
|
|
|
const toneTileClass: Record<'success' | 'error' | 'info', string> = {
|
|
success: 'bg-success/10 text-success',
|
|
error: 'bg-error/10 text-error',
|
|
info: 'bg-info/10 text-info',
|
|
}
|
|
|
|
const tileClass = computed(() => toneTileClass[props.tone])
|
|
|
|
const titleEl = ref<HTMLHeadingElement | null>(null)
|
|
|
|
onMounted(async () => {
|
|
await nextTick()
|
|
titleEl.value?.focus()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :role="role" class="flex flex-col gap-4">
|
|
<div :class="['flex h-11 w-11 items-center justify-center', tileClass]">
|
|
<UIcon :name="icon" class="h-6 w-6" />
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<h1 ref="titleEl" tabindex="-1" class="text-xl font-semibold leading-7 outline-none">
|
|
{{ title }}
|
|
</h1>
|
|
<p class="text-toned text-sm">{{ description }}</p>
|
|
</div>
|
|
<slot />
|
|
<div class="flex w-full flex-col gap-2">
|
|
<UButton
|
|
v-for="action in actions"
|
|
:key="action.label"
|
|
block
|
|
size="lg"
|
|
:color="action.color ?? 'primary'"
|
|
:variant="action.variant ?? 'solid'"
|
|
:to="action.to"
|
|
:disabled="action.disabled"
|
|
@click="action.onClick"
|
|
>
|
|
{{ action.label }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|