LoongPanel-Asp/web/components/Notification.vue

134 lines
2.5 KiB
Vue
Executable File

<script lang="ts" setup>
import type {PropType} from "vue";
const props = defineProps({
label: String,
cardType: String as PropType<'Error' | 'Informative' | 'Success' | 'Warning'>,
time: Number,
text: String,
})
const notificationBoxClass = computed(() => ({
'Notification-Box': true,
'Notification-Box-Error': props.cardType === 'Error',
'Notification-Box-Informative': props.cardType === 'Informative',
'Notification-Box-Success': props.cardType === 'Success',
'Notification-Box-Warning': props.cardType === 'Warning'
}));
</script>
<template>
<div :class="notificationBoxClass">
<div class="Icon">
<NuxtImg v-if="cardType==='Success'" src="/Success.svg" width="24"></NuxtImg>
<NuxtImg v-if="cardType==='Informative'" src="/Informative.svg" width="24"></NuxtImg>
<NuxtImg v-if="cardType==='Warning'" src="/Warning.svg" width="24"></NuxtImg>
<NuxtImg v-if="cardType==='Error'" src="/Error.svg" width="24"></NuxtImg>
</div>
<div class="Text">
<h3>{{ label }}</h3>
<p>{{ text }}</p>
</div>
<Icon :stroke-width="1.2" name="X"></Icon>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.Notification-Box {
padding: $padding;
display: grid;
grid-template-columns: 24px 1fr 18px;
gap: $gap*2;
grid-template-rows: 1fr;
border-radius: 12px;
> svg {
stroke: #979FA9;
.dark-mode & {
stroke: #FFF;
}
}
}
.Icon {
.dark-mode & {
filter: grayscale(30%) brightness(100%);
}
}
.Text {
display: flex;
flex-direction: column;
gap: $gap*.5;
.dark-mode & {
> h3, p {
color: #FFF;
}
}
> h3 {
color: #27303A;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 19.6px */
text-transform: capitalize;
}
> p {
color: #2F3F53;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 19.2px */
}
}
.Notification-Box-Success {
border: 1.3px solid #48C1B5;
background: #F6FFF9;
.dark-mode & {
border: 1.3px solid #43D590;
background: unset;
}
}
.Notification-Box-Informative {
border: 1.3px solid #9DC0EE;
background: #F5F9FF;
.dark-mode & {
border: 1.3px solid #7BCFED;
background: unset;
}
}
.Notification-Box-Warning {
border: 1.3px solid #F7D9A4;
background: #FFF8EC;
.dark-mode & {
border: 1.3px solid #FFDF8D;
background: unset;
}
}
.Notification-Box-Error {
border: 1.3px solid #F4B0A1;
background: #FFF5F3;
.dark-mode & {
border: 1.3px solid #F0863A;
background: unset;
}
}
</style>