Componente BaseAlertMessage

El componente BaseAlertMessage se utiliza para mostrar mensajes contextuales al usuario con diferentes tipos de estilos visuales (éxito, peligro, información y advertencia).

Uso

El componente acepta un type que define la apariencia del mensaje. Las opciones disponibles son: success, danger, info y warning.

Ejemplo básico

<template>
  <BaseAlertMessage type="success">
    ¡Operación completada con éxito!
  </BaseAlertMessage>
</template>

Propiedades

Propiedad	Tipo	Requerido	Descripción
type	String	true	Define el estilo de la alerta. Las opciones disponibles son: success, danger, info y warning.

Variantes de BaseAlertMessage

Las variantes disponibles cambian la apariencia del componente según el tipo seleccionado.

1. Success (type="success): Usado para indicar operaciones exitosas.
2. Danger (type="danger): Usado para mostrar mensajes de error o advertencias críticas.
3. Info (type="info): Usado para proporcionar información adicional.
4. Warning (type="warning): Usado para mostrar advertencias no críticas.

Ejemplo de Variantes

<template>
  <div>
    <BaseAlertMessage type="success">
      ¡La operación se ha completado con éxito!
    </BaseAlertMessage>

    <BaseAlertMessage type="danger">
      ¡Hubo un error al procesar la operación!
    </BaseAlertMessage>

    <BaseAlertMessage type="info">
      Esta es información relevante para el usuario.
    </BaseAlertMessage>

    <BaseAlertMessage type="warning">
      Tienes configuraciones sin guardar. ¡Recuerda hacerlo!
    </BaseAlertMessage>
  </div>
</template>

Estructura Interna

El componente BaseAlertMessage se construye utilizando la siguiente estructura y estilos:

<div class="border-l-4 p-4" :class="variants[type].wrapper">
  <div class="flex">
    <div class="shrink-0" :class="variants[type].icon.color" v-html="variants[type].icon.svg">
    </div>
    <div class="ml-3">
      <p class="text-sm" :class="variants[type].body">
        <slot></slot>
      </p>
    </div>
  </div>
</div>

Iconos y Colores

Cada variante tiene su propio color de fondo, borde e icono distintivo.

Slots

El componente usa un slot para inyectar el contenido del mensaje:

<BaseAlertMessage type="info">
  Aquí puedes insertar el mensaje del alert.
</BaseAlertMessage>