feat/35: componente notificador (#47)

Signed-off-by: GitHub <[email protected]>
Co-authored-by: Fernando Fernández <[email protected]>

locales/en.json

@@ -1 +1,7 @@
-{}
+{
+  "¡Notificación Exitosa!" : "Success Notification!",
+  "¡Notificación de Errónea!" : "Error Notification!",
+  "¡Notificación de Advertencia!" : "Warning Notification!",
+  "¡Notificación de Información!" : "Info Notification!",
+  "Notificación" : "Notification"
+}

locales/es.json

@@ -1 +1,7 @@
-{}
+{
+  "¡Notificación Exitosa!" : "¡Notificación Exitosa!",
+  "¡Notificación de Errónea!" : "¡Notificación de Errónea!",
+  "¡Notificación de Advertencia!" : "¡Notificación de Advertencia!",
+  "¡Notificación de Información!" : "¡Notificación de Información!",
+  "Notificación" : "Notificación"
+}

package.json

@@ -42,7 +42,8 @@
     "radix-vue": "1.5.0",
     "vue": "3.4.21",
     "vue-i18n": "9.10.1",
-    "vue-router": "4.3.0"
+    "vue-router": "4.3.0",
+    "vue3-toastify": "0.2.1"
   },
   "devDependencies": {
     "@iconify/json": "2.2.188",

src/composables/use-toast.ts

@@ -0,0 +1,43 @@
+import { toast } from 'vue3-toastify';
+import { i18n } from '@/plugins/i18n';
+
+type NotificationTypes = 'warning' | 'success' | 'error' | 'info';
+
+/**
+ * Muestra una notificación en la aplicación
+ */
+export function useToast(message?: string, type?: NotificationTypes): void {
+  const { t } = i18n;
+
+  switch (type) {
+    case 'success': {
+      toast.success(message ?? t('¡Notificación Exitosa!') , {
+        position: toast.POSITION.TOP_CENTER
+      });
+      break;
+    }
+    case 'error': {
+      toast.error(message ?? t('¡Notificación de Errónea!'), {
+        position: toast.POSITION.TOP_LEFT
+      });
+      break;
+    }
+    case 'warning': {
+      toast.warn(message ?? t('¡Notificación de Advertencia!'), {
+        position: toast.POSITION.BOTTOM_LEFT
+      });
+      break;
+    }
+    case 'info': {
+      toast.info(message ?? t('¡Notificación de Información!'), {
+        position: toast.POSITION.BOTTOM_CENTER
+      });
+      break;
+    }
+    default: {
+      toast(message ?? t('Notificación'), {
+        position: toast.POSITION.BOTTOM_RIGHT
+      });
+    }
+  }
+}

src/main.ts

@@ -13,6 +13,7 @@ import { hideDirective } from '@/plugins/directives';
 import { vuePlugin as i18n } from '@/plugins/i18n';
 import { router } from '@/plugins/router';
 
+
 /**
  * - ESTILOS GLOBALES -
  */