Message (notification globale)

Retour global léger, généralement utilisé pour signaler ponctuellement le résultat d'une opération. L'API est principalement un service impératif (LhMessage.success(...)) : le rendu de la file s'effectue dans un conteneur indépendant, sans dépendance vis-à-vis de l'arbre des composants, et les messages les plus anciens sont automatiquement supprimés en cas de dépassement de la limite.

Utilisation de base

Utilisation de base

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showBasic = () => {
  LhMessage('Ceci est un message')
}
</script>

<template>
  <LhButton @click="showBasic">Afficher le message</LhButton>
</template>

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showBasic() {
      LhMessage('Ceci est un message')
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Afficher le message</LhButton>
</template>

Types sémantiques

Quatre types sémantiques + loading ; warning / danger / error sont annoncés immédiatement avec role="alert", les autres le sont en douceur.

Quatre types sémantiques et loading

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showInfo = () => LhMessage.info('Message informatif')
const showSuccess = () => LhMessage.success('Enregistré avec succès')
const showWarning = () => LhMessage.warning('Attention au risque')
const showDanger = () => LhMessage.danger("Échec de l'opération")
// loading ne se ferme pas automatiquement par défaut :
// utilisez le handle renvoyé pour le refermer manuellement
const showLoading = () => {
  const handle = LhMessage.loading('Synchronisation…')
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Information</LhButton>
    <LhButton @click="showSuccess">Succès</LhButton>
    <LhButton @click="showWarning">Avertissement</LhButton>
    <LhButton @click="showDanger">Danger</LhButton>
    <LhButton @click="showLoading">Chargement (fermeture manuelle)</LhButton>
  </div>
</template>

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showInfo() {
      LhMessage.info('Message informatif')
    },
    showSuccess() {
      LhMessage.success('Enregistré avec succès')
    },
    showWarning() {
      LhMessage.warning('Attention au risque')
    },
    showDanger() {
      LhMessage.danger("Échec de l'opération")
    },
    // loading ne se ferme pas automatiquement par défaut :
    // utilisez le handle renvoyé pour le refermer manuellement
    showLoading() {
      const handle = LhMessage.loading('Synchronisation…')
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Information</LhButton>
    <LhButton @click="showSuccess">Succès</LhButton>
    <LhButton @click="showWarning">Avertissement</LhButton>
    <LhButton @click="showDanger">Danger</LhButton>
    <LhButton @click="showLoading">Chargement (fermeture manuelle)</LhButton>
  </div>
</template>

Fermeture manuelle et limite de file

showClose affiche le bouton de fermeture ; la file affiche au maximum 5 messages simultanément par défaut (ajustable via LhMessage.config({ max })), les plus anciens étant supprimés au-delà.

Fermeture manuelle

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showClosable = () => LhMessage.success('Enregistré avec succès', { showClose: true })
// closeLabel personnalise le nom accessible du bouton de fermeture
const showCloseLabel = () => LhMessage.info('Veuillez vérifier', { showClose: true, closeLabel: 'Compris, fermer' })
</script>

<template>
  <LhButton @click="showClosable">Fermeture manuelle</LhButton>
  <LhButton @click="showCloseLabel">Libellé de fermeture personnalisé</LhButton>
</template>

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showClosable() {
      LhMessage.success('Enregistré avec succès', { showClose: true })
    },
    // closeLabel personnalise le nom accessible du bouton de fermeture
    showCloseLabel() {
      LhMessage.info('Veuillez vérifier', { showClose: true, closeLabel: 'Compris, fermer' })
    },
  },
}
</script>

<template>
  <LhButton @click="showClosable">Fermeture manuelle</LhButton>
  <LhButton @click="showCloseLabel">Libellé de fermeture personnalisé</LhButton>
</template>

Configuration globale

import { LhMessage } from '@lh-ui/vue3'

LhMessage.config({
  duration: 3000, // délai de fermeture automatique en ms (0 = pas de fermeture automatique)
  max: 5,         // nombre maximal de messages affichés simultanément dans la file
  offset: 20,     // décalage par rapport au haut de la fenêtre, en px
  appendTo: 'body', // conteneur de montage (sélecteur ou élément)
})

API

LhMessage Props

Prop	Description	Type	Valeur par défaut
content	Contenu du message	string	—
type	Type sémantique	"success" | "warning" | "error" | "info" | "danger" | "loading"	'info'
showClose	Afficher le bouton de fermeture	boolean	false
closeLabel	Nom accessible du bouton de fermeture (par défaut, lit message.close du paquet de langue)	string	—
sx	Props de mise en page sx	LhSxProps	—

Méthodes de service : LhMessage(options) / LhMessage.success/info/warning/danger/loading(content, options?), qui renvoient un handle { close } ; il existe également LhMessage.close(id), LhMessage.closeAll() et LhMessage.config(options).

Events

Événement	Description	Callback
close	Émis lors du clic sur le bouton de fermeture d'un message	—

Dans l'usage impératif, la fermeture (automatique ou manuelle) est perçue via la callback onClose des options.

Options

Prop	Description	Type	Valeur par défaut
content	Contenu du message	string	—
type	Type sémantique	'info' | 'success' | 'warning' | 'danger' | 'error' | 'loading'	'info'
duration	Délai de fermeture automatique en ms, 0 désactive la fermeture automatique (0 par défaut pour loading)	number	3000
showClose	Afficher le bouton de fermeture	boolean	false
offset	Décalage par rapport au haut de la fenêtre, en px	number	20
sx	Props de mise en page sx	LhSxProps	—
onClose	Callback après fermeture	() => void	—

Accessibilité

• Le conteneur et les messages constituent des live regions : info / success / loading sont annoncés en douceur avec role="status", warning / danger / error immédiatement avec role="alert"
• Conception non bloquante : pas de captation de focus, pas d'occlusion du flux clavier
• Le bouton de fermeture possède un aria-label (message.close du paquet de langue, surchargeable via closeLabel)
• L'animation respecte prefers-reduced-motion

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/message/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhMessageOptions

/** Options du service : contenu sous forme de chaîne + affichage et callback */
export interface LhMessageOptions {
  /** Contenu du message */
  content: string
  /** Type sémantique, info par défaut */
  type?: LhMessageType
  /** Délai de fermeture automatique en ms, 0 désactive la fermeture automatique (0 par défaut pour loading, 3000 pour les autres) */
  duration?: number
  /** Afficher le bouton de fermeture */
  showClose?: boolean
  /** Décalage par rapport au haut de la fenêtre, en px (20 par défaut) */
  offset?: number
  /** Props de mise en page sx */
  sx?: LhSxProps
  /** Callback après fermeture (automatique ou manuelle) */
  onClose?: () => void
}

LhMessageHandle

/** Handle du service */
export interface LhMessageHandle {
  close: () => void
}

LhMessageProps

/** Props du composant message (rendu interne du service ; utilisable aussi seul, de manière déclarative) */
export interface LhMessageProps {
  content: string
  type?: LhMessageType
  showClose?: boolean
  /** Nom accessible du bouton de fermeture (par défaut, lit message.close du paquet de langue) */
  closeLabel?: string
  sx?: LhSxProps
}

LhMessageConfig

/** Options de configuration globale par défaut (LhMessage.config) */
export interface LhMessageConfig {
  duration?: number
  max?: number
  offset?: number
  /** Conteneur de montage (body par défaut) */
  appendTo?: string | HTMLElement
}

LhMessageType _{(provenant de @lh-ui/share/core/message)}

/** Type sémantique du message (quatre types sémantiques + loading) */
export type LhMessageType =
  | (typeof LH_MESSAGE_TYPE_CONST)[keyof typeof LH_MESSAGE_TYPE_CONST]

LhMessageRecord _{(provenant de @lh-ui/share/core/message)}

/** Forme d'enregistrement d'un message dans la file du service */
export interface LhMessageRecord {
  id: number
  type: LhMessageType
  content: string
  /** Délai de fermeture automatique en ms, 0 désactive la fermeture automatique */
  duration: number
  showClose: boolean
  /** Décalage par rapport au haut de la fenêtre, en px */
  offset: number
  sx?: LhSxProps
  onClose?: () => void
}

Constantes

Les constantes publiques utilisées par ce composant sont les suivantes (vous pouvez cliquer sur une entrée de même nom dans les colonnes « Type / Valeur par défaut » du tableau Props pour sauter jusqu'ici) :

LH_MESSAGE_TYPE_CONST _{(provenant de @lh-ui/share/core/message)}

/** Constante de type (ajoute loading aux constantes sémantiques communes) */
export const LH_MESSAGE_TYPE_CONST = {
  ...LH_TYPES_CONST,
  /** @alias chargement */
  loading: 'loading',
} as const

LH_MESSAGE_DURATION_DEFAULT _{(provenant de @lh-ui/share/core/message)}

/** Durée de fermeture automatique par défaut (le type loading ne se ferme pas automatiquement) */
export const LH_MESSAGE_DURATION_DEFAULT = 3000

LH_MESSAGE_MAX_DEFAULT _{(provenant de @lh-ui/share/core/message)}

/** Nombre maximal de messages affichés simultanément, les plus anciens sont supprimés au-delà */
export const LH_MESSAGE_MAX_DEFAULT = 5

LH_MESSAGE_OFFSET_DEFAULT _{(provenant de @lh-ui/share/core/message)}

/** Décalage par défaut par rapport au haut de la fenêtre, en px */
export const LH_MESSAGE_OFFSET_DEFAULT = 20