useShowAlert

📦 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.