Notification

Carte de notification placée dans un angle (les quatre angles sont possibles), destinée aux retours demandant un temps de lecture : titre / corps / icône sémantique / fermeture manuelle / disparition automatique / empilement. API de service impérative (LhNotification.success(...)).

Utilisation de base

vue

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

const showBasic = () => {
  LhNotification.info({ title: 'Synchronisation terminée', content: '3 modifications ont été synchronisées vers le cloud' })
}
</script>

<template>
  <LhButton @click="showBasic">Ouvrir une notification</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: 'Synchronisation terminée', content: '3 modifications ont été synchronisées vers le cloud' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Ouvrir une notification</LhButton>
</template>

Types sémantiques

vue

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

const showInfo = () => LhNotification.info({ title: 'Information', content: 'Contenu' })
const showSuccess = () => LhNotification.success({ title: 'Succès', content: 'La sauvegarde est terminée' })
const showWarning = () => LhNotification.warning({ title: 'Avertissement', content: 'Espace de stockage insuffisant' })
const showDanger = () => LhNotification.danger({ title: 'Échec', content: 'Connexion réseau interrompue' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Information</LhButton>
    <LhButton @click="showSuccess">Succès</LhButton>
    <LhButton @click="showWarning">Avertissement</LhButton>
    <LhButton @click="showDanger">Danger</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: 'Information', content: 'Contenu' })
    },
    showSuccess() {
      LhNotification.success({ title: 'Succès', content: 'La sauvegarde est terminée' })
    },
    showWarning() {
      LhNotification.warning({ title: 'Avertissement', content: 'Espace de stockage insuffisant' })
    },
    showDanger() {
      LhNotification.danger({ title: 'Échec', content: 'Connexion réseau interrompue' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">Information</LhButton>
    <LhButton @click="showSuccess">Succès</LhButton>
    <LhButton @click="showWarning">Avertissement</LhButton>
    <LhButton @click="showDanger">Danger</LhButton>
  </div>
</template>

Position d'affichage

position prend en charge les quatre angles.

vue

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

const showAt = (position) => {
  LhNotification.info({ title: 'Exemple de position', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">En haut à droite</LhButton>
    <LhButton @click="showAt('top-left')">En haut à gauche</LhButton>
    <LhButton @click="showAt('bottom-right')">En bas à droite</LhButton>
    <LhButton @click="showAt('bottom-left')">En bas à gauche</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: 'Exemple de position', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">En haut à droite</LhButton>
    <LhButton @click="showAt('top-left')">En haut à gauche</LhButton>
    <LhButton @click="showAt('bottom-right')">En bas à droite</LhButton>
    <LhButton @click="showAt('bottom-left')">En bas à gauche</LhButton>
  </div>
</template>

Notification cliquable

Lorsque onClick est fourni, la carte acquiert la sémantique d'un bouton : elle peut recevoir le focus via Tab et être déclenchée avec Enter / Space.

vue

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

const showClickable = () => {
  LhNotification.info({
    title: 'Nouvelle version disponible',
    content: 'Cliquez pour consulter le journal des modifications',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">Notification avec action</LhButton>
</template>

vue

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

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: 'Nouvelle version disponible',
        content: 'Cliquez pour consulter le journal des modifications',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">Notification avec action</LhButton>
</template>

Bouton de fermeture

show-close contrôle l'affichage du bouton de fermeture (affiché par défaut) et close-label personnalise son nom accessible.

vue

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

const notifyClosable = () => LhNotification.info({ title: 'Information', content: 'Fermeture manuelle possible', showClose: true, closeLabel: 'Compris, fermer' })
const notifyNoClose = () => LhNotification.info({ title: 'Information', content: 'Fermeture automatique uniquement', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">Avec bouton de fermeture</LhButton>
  <LhButton @click="notifyNoClose">Sans bouton de fermeture</LhButton>
</template>

vue

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

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: 'Information', content: 'Fermeture manuelle possible', showClose: true, closeLabel: 'Compris, fermer' })
    },
    notifyNoClose() {
      LhNotification.info({ title: 'Information', content: 'Fermeture automatique uniquement', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">Avec bouton de fermeture</LhButton>
  <LhButton @click="notifyNoClose">Sans bouton de fermeture</LhButton>
</template>

API

LhNotification Props

Prop	Description	Type	Valeur par défaut
type	Type sémantique	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	Titre	`string`	—
content	Corps du message	`string`	—
showClose	Afficher le bouton de fermeture	`boolean`	`true`
closeLabel	Nom accessible du bouton de fermeture (par défaut, lit `notification.close` du paquet de langue)	`string`	—
onClick	Callback de clic sur la carte (lorsqu'il est fourni, la carte est rendue avec la sémantique d'un bouton)	`() => void`	—
sx	Props de mise en page sx	`LhSxProps`	—

Méthodes de service : LhNotification(options) / LhNotification.success/info/warning/danger(options), qui renvoient un handle { close } ; il existe également LhNotification.close(id), LhNotification.closeAll() et LhNotification.config({ duration, offset, appendTo }).

Events

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

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
title	Titre	`string`	—
content	Corps du message	`string`	—
type	Type sémantique	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	Délai de fermeture automatique en ms, `0` désactive la fermeture automatique	`number`	`4500`
position	Position d'affichage	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	Afficher le bouton de fermeture	`boolean`	`true`
sx	Props de mise en page sx	`LhSxProps`	—
onClick	Callback de clic sur la carte	`() => void`	—
onClose	Callback après fermeture	`() => void`	—

Accessibilité

Le conteneur de chaque position a role="region" + aria-live="polite" : les nouvelles notifications sont annoncées en douceur, sans captation de focus
Les cartes pourvues d'un onClick ont role="button", reçoivent le focus via Tab et sont déclenchées par Enter / Space
Le bouton de fermeture possède un aria-label (notification.close du paquet de langue, surchargeable via closeLabel)
Le déplacement à l'empilement est géré par une transition CSS ; l'animation respecte prefers-reduced-motion

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/notification/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) :

LhNotificationOptions

/** Options du service */
export interface LhNotificationOptions {
  /** Titre */
  title: string
  /** Corps du message */
  content?: string
  /** Type sémantique, info par défaut */
  type?: LhNotificationType
  /** Délai de fermeture automatique en ms, 0 désactive la fermeture automatique (4500 par défaut) */
  duration?: number
  /** Position d'affichage (top-right par défaut) */
  position?: LhNotificationPosition
  /** Afficher le bouton de fermeture (true par défaut) */
  showClose?: boolean
  /** Props de mise en page sx */
  sx?: LhSxProps
  /** Callback de clic sur la carte (lorsqu'il est fourni, la carte est focalisable et rendue avec la sémantique d'un bouton) */
  onClick?: () => void
  /** Callback après fermeture (automatique ou manuelle) */
  onClose?: () => void
}

LhNotificationHandle

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

LhNotificationConfig

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

LhNotificationProps

/** Props du composant notification (rendu interne du service ; utilisable aussi seul, de manière déclarative) */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** Nom accessible du bouton de fermeture (par défaut, lit notification.close du paquet de langue) */
  closeLabel?: string
  /** Lorsqu'il est fourni, la carte est cliquable */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{(provenant de @lh-ui/share/core/notification)}

/** Type sémantique de notification (quatre types, pas de loading) */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{(provenant de @lh-ui/share/core/notification)}

/** Forme d'enregistrement d'une notification dans la file du service */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** Délai de fermeture automatique en ms, 0 désactive la fermeture automatique */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{(provenant de @lh-ui/share/core/notification)}

/** Position d'affichage de la notification (quatre angles) */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

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_NOTIFICATION_POSITION_CONST _{(provenant de @lh-ui/share/core/notification)}

/** Constante de position */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{(provenant de @lh-ui/share/core/notification)}

/** Durée de fermeture automatique par défaut (les notifications restent affichées plus longtemps que les messages) */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{(provenant de @lh-ui/share/core/notification)}

/** Espacement d'empilement, en px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Notification ​

Utilisation de base ​

Types sémantiques ​

Position d'affichage ​

Notification cliquable ​

Bouton de fermeture ​

API ​

LhNotification Props ​

Events ​

Options ​

Accessibilité ​

Définitions de types ​

Constantes ​