34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
|
|
export type AlertTone = "info" | "success" | "warn" | "danger";
|
|
|
|
const ICON: Record<AlertTone, string> = { info: "i", success: "✓", warn: "!", danger: "✕" };
|
|
|
|
const props = withDefaults(defineProps<{ tone?: AlertTone; title?: string, timestamp: string}>(), { tone: "info", timestamp: "1" });
|
|
const icon = computed(() => ICON[props.tone]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="aero-alert" :class="`aero-alert-${tone}`">
|
|
<div style="width: 100%;">
|
|
<div style="display: flex; flex-direction: column; justify-content: space-between; width: 100%;">
|
|
|
|
<div v-if="title" style="display: flex; flex-direction: row; text-align: left; gap: 15px;" :style="{ fontWeight: 700, marginBottom: '2px' }" >
|
|
|
|
<div class="aero-alert-icon">{{ icon }}</div>
|
|
{{ title }}
|
|
</div>
|
|
<div v-if="timestamp" :style="{ fontWeight: 700, marginBottom: '2px' }" style="text-align: left; color: gray">{{ timestamp }}</div>
|
|
</div>
|
|
<div :style="{ opacity: 0.9 }" style="text-align: left;"><slot /></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |