✨ feature: Alert component added

src/components/alert/VAlert.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Toast from 'primevue/toast';
+import VButton from '../button/VButton.vue';
+import type { ToastProps } from 'primevue/toast';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  group: undefined,
+  position: 'bottom-center',
+  breakpoints: undefined
+});
+
+const emit = defineEmits([
+  'close',
+  'life-end'
+]);
+
+const getIconColor = (type?: string) => {
+  switch (type) {
+    case 'error': return 'var(--text-default-error)';
+    case 'warn' : return 'var(--text-default-warning)';
+    case 'success' : return 'var(--text-default-success)';
+    case 'info': return 'var(--text-default-info)';
+    default:
+      return 'var(--text-default-success)';
+  }
+};
+
+const getIconClass = (type?: string) => {
+  switch (type) {
+    case 'error': return 'ri-spam-fill';
+    case 'warn' : return 'ri-alert-fill';
+    case 'success' : return 'ri-checkbox-circle-fill';
+    case 'info': return 'ri-information-fill';
+    default:
+      return 'ri-information-fill';
+  }
+};
+</script>
+
+<template>
+  <Toast
+    :position=props.position
+    :group="props.group"
+    :breakpoints="props.breakpoints"
+    class="p-toast"
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+    @close="emit('close', $event)"
+    @life-end="emit('life-end', $event)"
+  >
+    <template #container="{message, closeCallback}">
+      <div class="header">
+        <i
+          style="font-size: var(--p-message-icon-lg-size);"
+          :class="getIconClass(message.severity)"
+          :style="{color: getIconColor(message.severity)}"
+        />
+        <span
+          :class="[styles['text-body-MD-standard-text-Medium']]"
+          :style="{color: getIconColor(message.severity)}"
+          style="width: 100%;"
+        >
+          {{ message.summary }}
+        </span>
+        <VButton
+          title="Fermer le message"
+          tertiary
+          no-outline
+          size="sm"
+          icon-only
+          aria-label="Fermer"
+          icon="ri-close-line"
+          type="button"
+          @click="closeCallback"
+          style="height: 2rem;"
+        />
+      </div>
+      <div
+        v-if="!!message.detail"
+        :class="['content', styles['text-body-MD-standard-text-Regular']]"
+      >
+        <span>{{ message.detail }}</span>
+        <slot name="footer"/>
+      </div>
+    </template>
+  </Toast>
+</template>
+
+<style lang="css" scoped>
+.header{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  padding: var(--p-toast-text-gap);
+  color: var(--text-title-grey);
+  align-items: center;
+}
+
+.content{
+  padding: 0rem 0.825rem 0.5rem 0.825rem;
+  color: var(--text-default-grey);
+}
+</style>