Message component added

src/components/message/VMessage.vue

@@ -0,0 +1,116 @@
+<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>(), {
+  icon: true,
+  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>