BjToast

Conteneur de toasts Vue. La prop position fixe le coin d’affichage ; la ref du composant expose add, remove et toasts. Le composable useToast() expose la même API pour une logique sans conteneur DSBJ.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjButton, BjToast } from '@flrxnt/dsbj/vue'

const toastRef = ref<InstanceType<typeof BjToast> | null>(null)

function notify() {
  toastRef.value?.add({
    title: 'Succès',
    text: 'Le document a été validé.',
    type: 'success',
    duration: 5000,
  })
}
</script>

<template>
  <BjButton @click="notify">Notifier</BjButton>
  <BjToast ref="toastRef" />
</template>

Aperçu (déclaratif)

position : les quatre valeurs

<!-- Valeurs possibles (une par instance montée typiquement) -->
<BjToast position="top-right" />
<BjToast position="top-left" />
<BjToast position="bottom-right" />
<BjToast position="bottom-left" />

Options de add()

toastRef.value?.add({ text: 'Info', type: 'info' })
toastRef.value?.add({ text: 'OK', type: 'success', title: 'Titre' })
toastRef.value?.add({ text: 'Attention', type: 'warning' })
toastRef.value?.add({ text: 'Erreur', type: 'error', duration: 0 })

Combinaisons position × type de toast

Montez un BjToast par coin si besoin ; dans chaque instance, add() choisit le type (couleur + icône) indépendamment de position.

<!-- Coin bas-gauche + succès -->
<BjToast ref="toastBL" position="bottom-left" />
<!-- puis toastBL.add({ text: '…', type: 'success' }) -->

<!-- Coin haut-droit + erreur persistante -->
<BjToast ref="toastTR" position="top-right" />
<!-- toastTR.add({ text: '…', type: 'error', duration: 0 }) -->

Aperçu HTML (conteneur + types)

success

Succès

Message validé.

Avertissement sans titre.

v-model

Pas de v-model : la pile est gérée par add() / remove() sur la ref.

Slots

Pas de slots : le rendu est entièrement piloté par la liste interne toasts.

Expose (ref)

Membre	Description
`add`	add(options) : ajoute un toast ; options avec text obligatoire, type, title et duration optionnels ; retourne l’id.
`remove`	remove(id) : retire un toast (animation de sortie puis suppression).
`toasts`	toasts : ref réactive sur la liste affichée par ce BjToast.

<script setup>
import { ref, watch } from 'vue'
import { BjToast } from '@flrxnt/dsbj/vue'

const tref = ref<InstanceType<typeof BjToast> | null>(null)

watch(
  () => tref.value?.toasts,
  (list) => console.log('Nombre de toasts', list?.length),
  { deep: true }
)
</script>

<template>
  <BjToast ref="tref" />
</template>

Composable useToast()

Import depuis @flrxnt/dsbj/vue. Instance distincte de celle interne à chaque BjToast : utilisez soit la ref du BjToast pour afficher dans le DSBJ, soit useToast() seul pour brancher votre propre rendu.

<script setup>
import { BjButton, useToast } from '@flrxnt/dsbj/vue'

const { add, remove, toasts } = useToast()

function ping() {
  const id = add({ text: 'Sans BjToast', type: 'info', duration: 3000 })
  setTimeout(() => remove(id), 1000)
}
</script>

<template>
  <BjButton @click="ping">Tester useToast</BjButton>
  <!-- À vous de rendre toasts.value si vous n’utilisez pas BjToast -->
</template>

Props

Prop	Description
`position`	Position du conteneur : top-right (défaut), top-left, bottom-right, bottom-left (classe bj-toast-container--…).