116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import type IVMessage from './IVMessage.type';
|
||
|
|
import Message from 'primevue/message';
|
||
|
|
import VButton from '../button/VButton.vue';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import styles from '@visua/typography.module.css';
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<IVMessage>(), {
|
||
|
|
type: undefined,
|
||
|
|
closable: false,
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['close']);
|
||
|
|
|
||
|
|
const iconClass = computed(() => {
|
||
|
|
switch (props.type) {
|
||
|
|
case 'alert': return 'ri-spam-fill';
|
||
|
|
case 'warning' : return 'ri-alert-fill';
|
||
|
|
case 'success' : return 'ri-checkbox-circle-fill';
|
||
|
|
case 'info': return 'ri-information-fill';
|
||
|
|
default:
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const severity = computed(() => {
|
||
|
|
switch (props.type) {
|
||
|
|
case 'alert': return 'error';
|
||
|
|
case 'warning' : return 'warn';
|
||
|
|
case 'success' : return 'success';
|
||
|
|
case 'info' : return 'info';
|
||
|
|
default:
|
||
|
|
return undefined;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const iconColor = computed(() => {
|
||
|
|
switch (props.type) {
|
||
|
|
case 'alert': return 'var(--text-default-error)';
|
||
|
|
case 'warning' : return 'var(--text-default-warning)';
|
||
|
|
case 'success' : return 'var(--text-default-success)';
|
||
|
|
case 'info': return 'var(--text-default-info)';
|
||
|
|
default:
|
||
|
|
return 'var(--text-mention-grey)';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Message
|
||
|
|
role="alert"
|
||
|
|
:closable="props.closable"
|
||
|
|
:severity="severity"
|
||
|
|
size="large"
|
||
|
|
class="p-message"
|
||
|
|
@close="emit('close', $event)"
|
||
|
|
>
|
||
|
|
<template #container="slotProps">
|
||
|
|
<div class="container">
|
||
|
|
<div class="header">
|
||
|
|
<i :class="[iconClass]" :style="{color: iconColor}" style="font-size: var(--p-message-icon-lg-size);"></i>
|
||
|
|
<span class="title" :class="[styles['text-body-MD-standard-text-Regular']]" :style="{color: iconColor}">
|
||
|
|
{{ props.title }}
|
||
|
|
</span>
|
||
|
|
<VButton
|
||
|
|
v-if="props.closable"
|
||
|
|
title="Fermer le message"
|
||
|
|
tertiary
|
||
|
|
no-outline
|
||
|
|
size="sm"
|
||
|
|
icon-only
|
||
|
|
aria-label="Fermer"
|
||
|
|
icon="ri-close-line"
|
||
|
|
type="button"
|
||
|
|
@click="slotProps.closeCallback"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div v-if="$slots.content" class="content">
|
||
|
|
<slot name="content"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</Message>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.p-message{
|
||
|
|
width: 100%;
|
||
|
|
height: fit-content;
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container{
|
||
|
|
padding: 0.5rem 0.75rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--p-message-content-gap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
gap: var(--p-message-content-gap);
|
||
|
|
align-items: baseline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content{
|
||
|
|
display: block;
|
||
|
|
padding: 0rem 0.825rem 0.5rem 0.825rem;
|
||
|
|
}
|
||
|
|
</style>
|