BjAlert

Alerte Vue avec variantes sémantiques, taille compacte, titre optionnel, fermeture optionnelle et événement close.

Utilisation

<script setup>
import { BjAlert } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <BjAlert variant="success" title="Succès">
    Votre dossier a été enregistré.
  </BjAlert>
</template>

Variantes

Information

Votre session expirera dans 5 minutes.

Succès

Votre dossier a été enregistré.

Attention

Vérifiez les champs avant de valider.

Erreur

La soumission a échoué. Réessayez.

<BjAlert variant="info" title="Information">Message info.</BjAlert>
<BjAlert variant="success" title="Succès">Message succès.</BjAlert>
<BjAlert variant="warning" title="Attention">Message avertissement.</BjAlert>
<BjAlert variant="error" title="Erreur">Message erreur.</BjAlert>

Tailles

Alerte compacte.

Taille par défaut.

<BjAlert variant="warning" size="sm" title="Compact">Alerte sm.</BjAlert>
<BjAlert variant="warning" size="md" title="Par défaut">Alerte md (défaut).</BjAlert>

Variantes × tailles

success sm

…

error sm

…

success md

…

error md

…

<!-- success sm / md -->
<BjAlert variant="success" size="sm" title="sm">Corps sm.</BjAlert>
<BjAlert variant="success" title="md">Corps md.</BjAlert>
<!-- error sm / md -->
<BjAlert variant="error" size="sm" title="sm">Erreur sm.</BjAlert>
<BjAlert variant="error" title="md">Erreur md.</BjAlert>

Titre et fermeture

Fermable

Cette alerte peut être masquée par l’utilisateur.

<BjAlert variant="info" title="À lire" closable @close="onAlertClose">
  Contenu important pour l’utilisateur.
</BjAlert>

Contenu (slot par défaut)

Le message principal passe dans le slot par défaut (texte ou markup léger).

<BjAlert variant="warning">
  <p>Paragraphe dans le slot.</p>
  <p class="bj-text-sm">Ligne secondaire.</p>
</BjAlert>

Événements

Écoutez @close pour journaliser, synchroniser un état parent ou annuler une action après fermeture.

<script setup>
function onAlertClose() {
  console.log('Alerte fermée')
}
<\/script>

<template>
  <BjAlert closable variant="info" @close="onAlertClose">Message</BjAlert>
</template>

Props

Prop	Description
`variant`	info (défaut), success, warning ou error — icône et couleurs sémantiques.
`size`	md (défaut) ou sm — densité du bloc.
`closable`	Affiche le bouton de fermeture ; masque l’alerte et émet close au clic.
`title`	Titre au-dessus du contenu du slot.
`(div attrs)`	Attributs HTML transmis au div racine (role="alert" est déjà défini).

Émissions

Émission	Description
`close`	Émis après fermeture locale lorsque closable est actif.