54 lines
1.1 KiB
Vue
54 lines
1.1 KiB
Vue
<template>
|
|
<UAlert
|
|
:color="color"
|
|
:variant="variant"
|
|
:icon="icon"
|
|
:title="title"
|
|
:description="description"
|
|
class="my-4 font-serif"
|
|
>
|
|
<template v-if="$slots.default" #description>
|
|
<div class="prose prose-sm dark:prose-invert max-w-none font-serif">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
</UAlert>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
type AlertColor =
|
|
| "error"
|
|
| "info"
|
|
| "primary"
|
|
| "secondary"
|
|
| "success"
|
|
| "warning"
|
|
| "neutral";
|
|
|
|
interface Props {
|
|
type?: "info" | "warning" | "error" | "success" | "primary";
|
|
title?: string;
|
|
description?: string;
|
|
icon?: string;
|
|
variant?: "solid" | "outline" | "soft" | "subtle";
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
type: "primary",
|
|
variant: "soft",
|
|
});
|
|
|
|
// Map type to Nuxt UI 3 color
|
|
const color = computed<AlertColor>(() => {
|
|
const colorMap: Record<string, AlertColor> = {
|
|
info: "info",
|
|
warning: "warning",
|
|
error: "error",
|
|
success: "success",
|
|
primary: "primary",
|
|
};
|
|
return colorMap[props.type || "primary"] || "primary";
|
|
});
|
|
</script>
|