TheAlert

📦 useShowAlert.ts

✅ Descripción

useShowAlert es un composable de Vue/Nuxt que permite gestionar el estado y visibilidad de alertas (tipo success o error) en la interfaz. Controla cuándo mostrar u ocultar una alerta y por cuánto tiempo.

---

📌 Tipado

interface Alert {
  showAlert: boolean;
  duration: number;
  typeAlert: AlertType;
}

---

🧩 Estado Reactivo

const ALERT = useState<Record<AlertType, Alert>>("alert-state", () => ({
  error: { showAlert: false, duration: 3000, typeAlert: "error" },
  success: { showAlert: false, duration: 3000, typeAlert: "success" },
}));

Se crea un estado global con useState, que contiene las propiedades necesarias para mostrar cada tipo de alerta.

---

🔧 Métodos

toggleAlert(type: AlertType): void

Activa o desactiva manualmente la visibilidad de una alerta.

toggleAlert("success");

showAlert(type: AlertType, alertDuration = 3000): void

Muestra una alerta durante un tiempo específico (en milisegundos). Luego de ese tiempo, se oculta automáticamente.

showAlert("error", 5000);

---

🔁 Retorno

return {
  ALERT,
  toggleAlert,
  showAlert,
};

Puedes usar ALERT para hacer binding en los componentes y toggleAlert / showAlert para manipular la lógica.

---

🧱 Componente TheAlert.vue

✅ Descripción

Componente visual que muestra un mensaje de alerta estilizado. Puede recibir distintos tipos de alerta (error, success) y adaptarse visualmente.

---

⚙️ Props

export type AlertProps = {
  showAlert: boolean; // Controla si se muestra o no la alerta
  duration: number; // Duración visible de la alerta
  typeAlert: AlertType; // Tipo de alerta ('success' | 'error')
};

---

🧩 Estilos visuales por tipo

const alertProperties: Record<AlertType, AlertProperties> = {
  error: {
    backgroundColor: "rgb(220 53 69)",
    icon: "material-symbols-light:error-rounded",
  },
  success: {
    backgroundColor: "rgb(40 167 69)",
    icon: "material-symbols-light:check-circle",
  },
};

---

🎨 Template

<UiTheAlert v-bind="ALERT.success">¡Operación exitosa!</UiTheAlert>
<UiTheAlert v-bind="ALERT.error">¡Ha ocurrido un error!</UiTheAlert>

---

🔘 Botón de cierre

<button class="alert__close" @click="toggleAlert($props.typeAlert)">
  <Icon name="mdi:close-circle" />
</button>

Este botón permite cerrar manualmente la alerta utilizando el método toggleAlert.

---

💅 Estilos

El componente está diseñado para ser responsive, con colores personalizados, animaciones y un diseño adaptativo a pantallas pequeñas.

---

🚀 Ejemplo de uso completo

<script setup lang="ts">
const { ALERT, showAlert } = useShowAlert();
</script>

<template>
  <UiTheAlert v-bind="ALERT.success">¡Operación exitosa!</UiTheAlert>
  <UiTheAlert v-bind="ALERT.error">¡Error inesperado!</UiTheAlert>

  <button @click="showAlert('success')">Mostrar Éxito</button>
  <button @click="showAlert('error', 5000)">Mostrar Error por 5s</button>
</template>

---