Message (notificación breve)

Feedback global ligero, normalmente usado para notificar de una sola vez el resultado de una operación. Predomina el API del servicio imperativo (LhMessage.success(...)); la cola se renderiza en un contenedor independiente, sin depender del árbol de componentes, y al superarse el límite se elimina automáticamente el mensaje más antiguo.

Uso básico

Uso básico

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

const showBasic = () => {
  LhMessage('Esto es un mensaje de notificación')
}
</script>

<template>
  <LhButton @click="showBasic">Mostrar notificación</LhButton>
</template>

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

export default {
  methods: {
    showBasic() {
      LhMessage('Esto es un mensaje de notificación')
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Mostrar notificación</LhButton>
</template>

Tipos semánticos

Cuatro tipos semánticos más loading; warning / danger / error se anuncian de inmediato con role="alert", los demás de forma discreta.

Cuatro tipos semánticos y loading

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

const showInfo = () => LhMessage.info('Mensaje de información')
const showSuccess = () => LhMessage.success('Guardado con éxito')
const showWarning = () => LhMessage.warning('Ten cuidado con el riesgo')
const showDanger = () => LhMessage.danger('Error en la operación')
// loading no se cierra automáticamente por defecto;
// se cierra manualmente con el manejador devuelto
const showLoading = () => {
  const handle = LhMessage.loading('Sincronizando...')
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Información</LhButton>
    <LhButton @click="showSuccess">Éxito</LhButton>
    <LhButton @click="showWarning">Advertencia</LhButton>
    <LhButton @click="showDanger">Peligro</LhButton>
    <LhButton @click="showLoading">Cargando (cierre manual)</LhButton>
  </div>
</template>

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

export default {
  methods: {
    showInfo() {
      LhMessage.info('Mensaje de información')
    },
    showSuccess() {
      LhMessage.success('Guardado con éxito')
    },
    showWarning() {
      LhMessage.warning('Ten cuidado con el riesgo')
    },
    showDanger() {
      LhMessage.danger('Error en la operación')
    },
    // loading no se cierra automáticamente por defecto;
    // se cierra manualmente con el manejador devuelto
    showLoading() {
      const handle = LhMessage.loading('Sincronizando...')
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Información</LhButton>
    <LhButton @click="showSuccess">Éxito</LhButton>
    <LhButton @click="showWarning">Advertencia</LhButton>
    <LhButton @click="showDanger">Peligro</LhButton>
    <LhButton @click="showLoading">Cargando (cierre manual)</LhButton>
  </div>
</template>

Cierre manual y límite de cola

showClose muestra el botón de cierre; la cola muestra como máximo 5 mensajes por defecto (se ajusta con LhMessage.config({ max })); al superarse, se elimina el más antiguo.

Cierre manual

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

const showClosable = () => LhMessage.success('Guardado con éxito', { showClose: true })
// closeLabel personaliza el nombre accesible del botón de cierre
const showCloseLabel = () => LhMessage.info('Revisa la recepción', { showClose: true, closeLabel: 'Entendido, cerrar' })
</script>

<template>
  <LhButton @click="showClosable">Cerrable manualmente</LhButton>
  <LhButton @click="showCloseLabel">Texto de cierre personalizado</LhButton>
</template>

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

export default {
  methods: {
    showClosable() {
      LhMessage.success('Guardado con éxito', { showClose: true })
    },
    // closeLabel personaliza el nombre accesible del botón de cierre
    showCloseLabel() {
      LhMessage.info('Revisa la recepción', { showClose: true, closeLabel: 'Entendido, cerrar' })
    },
  },
}
</script>

<template>
  <LhButton @click="showClosable">Cerrable manualmente</LhButton>
  <LhButton @click="showCloseLabel">Texto de cierre personalizado</LhButton>
</template>

Configuración global

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

LhMessage.config({
  duration: 3000, // milisegundos hasta el cierre automático (0 significa sin cierre automático)
  max: 5,         // número máximo de mensajes simultáneos en la cola
  offset: 20,     // desplazamiento desde la parte superior de la ventana, en px
  appendTo: 'body', // contenedor de montaje (selector o elemento)
})

API

LhMessage Props

Prop	Descripción	Tipo	Predeterminado
content	Contenido del mensaje	string	—
type	Tipo semántico	"success" | "warning" | "error" | "info" | "danger" | "loading"	'info'
showClose	Si se muestra el botón de cierre	boolean	false
closeLabel	Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma message.close)	string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Métodos del servicio: LhMessage(options) / LhMessage.success/info/warning/danger/loading(content, options?), que devuelven un manejador { close }; además LhMessage.close(id), LhMessage.closeAll() y LhMessage.config(options).

Eventos

Evento	Descripción	Parámetro
close	Se dispara al pulsar el botón de cierre del mensaje	—

En el uso imperativo, el cierre (tanto automático como manual) se percibe mediante la retrollamada onClose de Options.

Options

Prop	Descripción	Tipo	Predeterminado
content	Contenido del mensaje	string	—
type	Tipo semántico	'info' | 'success' | 'warning' | 'danger' | 'error' | 'loading'	'info'
duration	Milisegundos hasta el cierre automático; 0 significa sin cierre automático (loading usa 0 por defecto)	number	3000
showClose	Si se muestra el botón de cierre	boolean	false
offset	Desplazamiento desde la parte superior de la ventana, en px	number	20
sx	Props de maquetación rápida sx	LhSxProps	—
onClose	Retrollamada tras el cierre	() => void	—

Accesibilidad

• El contenedor y los mensajes son live regions: info / success / loading se anuncian de forma discreta con role="status", y warning / danger / error de inmediato con role="alert"
• Diseño no bloqueante: no mueve el foco ni interrumpe el flujo del teclado
• El botón de cierre lleva aria-label (paquete de idioma message.close, se puede sobrescribir con closeLabel)
• La animación respeta prefers-reduced-motion

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/message/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhMessageOptions

/** Opciones del servicio: contenido en forma de cadena + visualización y retrollamada */
export interface LhMessageOptions {
  /** Contenido del mensaje */
  content: string
  /** Tipo semántico, info por defecto */
  type?: LhMessageType
  /** Milisegundos hasta el cierre automático; 0 significa sin cierre automático (loading usa 0 por defecto; los demás, 3000) */
  duration?: number
  /** Si se muestra el botón de cierre */
  showClose?: boolean
  /** Desplazamiento desde la parte superior de la ventana, en px (20 por defecto) */
  offset?: number
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
  /** Retrollamada tras el cierre (tanto automático como manual) */
  onClose?: () => void
}

LhMessageHandle

/** Manejador del servicio */
export interface LhMessageHandle {
  close: () => void
}

LhMessageProps

/** Props del componente de mensaje (renderizado internamente por el servicio; también utilizable de forma declarativa) */
export interface LhMessageProps {
  content: string
  type?: LhMessageType
  showClose?: boolean
  /** Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma message.close) */
  closeLabel?: string
  sx?: LhSxProps
}

LhMessageConfig

/** Opciones de configuración global por defecto (LhMessage.config) */
export interface LhMessageConfig {
  duration?: number
  max?: number
  offset?: number
  /** Contenedor de montaje (body por defecto) */
  appendTo?: string | HTMLElement
}

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

/** Tipo semántico del mensaje (cuatro tipos semánticos + loading) */
export type LhMessageType =
  | (typeof LH_MESSAGE_TYPE_CONST)[keyof typeof LH_MESSAGE_TYPE_CONST]

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

/** Registro de un mensaje en la cola del servicio */
export interface LhMessageRecord {
  id: number
  type: LhMessageType
  content: string
  /** Milisegundos hasta el cierre automático; 0 significa sin cierre automático */
  duration: number
  showClose: boolean
  /** Desplazamiento desde la parte superior de la ventana, en px */
  offset: number
  sx?: LhSxProps
  onClose?: () => void
}

Constantes

Las constantes públicas que usa este componente son las siguientes (en las columnas «Tipo / Predeterminado» de la tabla de Props puedes pulsar una entrada con el mismo nombre para saltar aquí):

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

/** Constante de tipos (añade loading a las constantes semánticas generales) */
export const LH_MESSAGE_TYPE_CONST = {
  ...LH_TYPES_CONST,
  /** @alias carga */
  loading: 'loading',
} as const

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

/** Duración por defecto del cierre automático (el tipo semántico loading no se cierra automáticamente) */
export const LH_MESSAGE_DURATION_DEFAULT = 3000

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

/** Número máximo de mensajes simultáneos en la cola; al superarse se elimina el más antiguo */
export const LH_MESSAGE_MAX_DEFAULT = 5

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

/** Desplazamiento por defecto desde la parte superior de la ventana, en px */
export const LH_MESSAGE_OFFSET_DEFAULT = 20