Documentación de la Clase ArletAlert

La clase ArletAlert es una utilidad para mostrar alertas personalizadas en aplicaciones web. Ahora incluye soporte para formularios dinámicos, lo que permite agregar inputs, selects y textareas dentro de las alertas. Esta funcionalidad amplía las posibilidades de interacción con el usuario.

Propósito

El propósito de esta clase es proporcionar una forma sencilla y flexible de mostrar alertas visuales con diferentes estilos, comportamientos y formularios dinámicos.

Instanciación

La clase ArletAlert se puede instanciar pasando un contenedor HTML donde se mostrarán las alertas. A continuación, se muestra un ejemplo de cómo instanciar la clase:

const Arlet = new ArletAlert(document.body);

Métodos

1. Alerta

Alerta({
    titulo = 'Error',
    texto = 'Error message.',
    tipo = 'warning',
    estilo = '',
    icono = false,
    AlertaId = 'arlet-alert',
    AlertaClass = 'arlet-alert-container',
    inputs = [],
    cerrarAutomatico = false,
    tiempo = 3000,
    botonCancelar = false,
    botonAceptar = false,
    textoBotonAceptar = 'Aceptar',
    textoBotonCancelar = 'Cancelar',
    colorBotonAceptar = '#007bff',
    colorBotonCancelar = '#dc3545',
    colorTextoBotonAceptar = '#fff',
    colorTextoBotonCancelar = '#fff',
    callbackAceptar = () => { },
    callbackCancelar = () => { },
})

Descripción

Muestra una alerta personalizada con las opciones especificadas. Ahora soporta formularios dinámicos mediante el parámetro inputs, que permite agregar inputs, selects y textareas dentro de la alerta.

Parámetros

• titulo (string): Título de la alerta . Por defecto: 'Error'.
• texto (string): Texto de la alerta. Por defecto: 'Error message.' sin embargo se puede dejar vacío.
• tipo (string): Tipo de alerta. Valores posibles:
  • success: Alerta de éxito.
  • error: Alerta de error.
  • warning: Alerta de advertencia.
  • info: Alerta de información.
  • form: Alerta con formulario.
  • question: Alerta de pregunta.
• estilo (string):Estilo de posicionamiento de la alerta. Valores posibles:
  • left: A la izquierda, ocupa media pantalla y 100% de alto.
  • right: A la derecha, ocupa media pantalla y 100% de alto.
  • container: Ocupa toda la pantalla.
  • left-inputs-left: A la izquierda con los inputs alineados a la izquierda.
  • left-inputs-right: A la izquierda con los inputs alineados a la derecha.
  • right-inputs-left: A la derecha con los inputs alineados a la izquierda.
  • right-inputs-right: A la derecha con los inputs alineados a la derecha.
  • container-inputs-left: Ocupa toda la pantalla con los inputs alineados a la izquierda.
  • container-inputs-right: Ocupa toda la pantalla con los inputs alineados a la derecha.
• icono (boolean): Si se muestra un icono en la alerta. Por defecto es false. Puede ser:
  • Uno de los valores de tipo (success, error, warning, info, form, question).
  • Un ícono de Bootstrap Icons, como bi-check-circle-fill.
• AlertaId (string): ID del contenedor de la alerta. Por defecto es arlet-alert.
• AlertaClass (string): Clase CSS del contenedor de la alerta. Por defecto es arlet-alert-container.
• inputs (array): Lista de objetos que definen los campos del formulario. Cada objeto puede tener las siguientes propiedades:
  • label (boolean): Indica si se debe mostrar una etiqueta para el campo, por defecto es false.
  • textlabel (string): Texto de la etiqueta del campo.
  • class (string): Clase CSS para el campo.
  • id (string): ID del campo.
  • type (string): Tipo de input (text, number, email, etc). Por defecto es text.
  • formType (string): Tipo de formulario (input, select, textarea). Por defecto es input.
  • placeholder (string): Texto de marcador de posición para el campo.
  • value (string): Valor inicial del campo.
  • checked (boolean): Indica si el campo está marcado por defecto. Por defecto es false.
  • required (boolean): Indica si el campo es obligatorio. Por defecto es false.
  • disabled (boolean): Indica si el campo está deshabilitado. Por defecto es false.
  • autofocus (boolean): Indica si el campo debe recibir el foco automáticamente al abrir la alerta. Por defecto es false.
  • readonly (boolean): Indica si el campo es de solo lectura. Por defecto es false. -options (array): Opciones para el campo select. Cada opción es un objeto con las propiedades value y text.
    • value (string): Valor de la opción.
    • text (string): Texto de la opción.
• cerrarAutomatico (boolean): Si la alerta se cierra automáticamente después de un tiempo. Por defecto, es false.
• tiempo (number): Tiempo en milisegundos antes de que la alerta se cierre automáticamente. Por defecto, es 3000 ms.
• botonCancelar (boolean): Si se muestra el botón de cancelar. Por defecto, es false.
• botonAceptar (boolean): Si se muestra el botón de aceptar. Por defecto, es false.
• textoBotonAceptar (string): Texto del botón de aceptar. Por defecto, es Aceptar.
• textoBotonCancelar (string): Texto del botón de cancelar. Por defecto, es Cancelar.
• colorBotonAceptar (string): Color de fondo del botón de aceptar. Por defecto, es #007bff.
• colorBotonCancelar (string): Color de fondo del botón de cancelar. Por defecto, es #dc3545.
• colorTextoBotonAceptar (string): Color del texto del botón de aceptar. Por defecto, es #fff.
• colorTextoBotonCancelar (string): Color del texto del botón de cancelar. Por defecto, es #fff.
• callbackAceptar (function): Función que se ejecuta al hacer clic en el botón de aceptar. Por defecto, es una función vacía.
• callbackCancelar (function): Función que se ejecuta al hacer clic en el botón de cancelar. Por defecto, es una función vacía.

Ejemplo de uso

Mostrar una alerta básica

Arlet.Alerta({
    titulo: 'Éxito',
    texto: 'El registro se ha guardado correctamente.',
    tipo: 'success',
});

Mostrar una alerta con botones

Arlet.Alerta({
    titulo: 'Confirmación',
    texto: '¿Estás seguro de eliminar este registro?',
    tipo: 'warning',
    botonAceptar: true,
    botonCancelar: true,
    textoBotonAceptar: 'Sí, eliminar',
    textoBotonCancelar: 'Cancelar',
    callbackAceptar: () => {
        console.log('Registro eliminado');
    },
    callbackCancelar: () => {
        console.log('Operación cancelada');
    },
});

Mostrar una alerta con formulario

Arlet.Alerta({
    titulo: 'Agregar Oficina',
    texto: '',
    tipo: 'form',
    inputs: [
        {
            label: true,
            textlabel: 'Nombre de la oficina',
            class: 'nombre',
            id: 'nombre',
            type: 'text',
            formType: 'input',
            placeholder: 'Nombre de la oficina',
        },
        {
            label: true,
            textlabel: 'Oficina',
            class: 'nombre',
            id: 'oficina',
            formType: 'select',
            options: [
                { value: '1', text: 'Oficina 1' },
                { value: '2', text: 'Oficina 2' },
                { value: '3', text: 'Oficina 3' },
                { value: '4', text: 'Oficina 4' },
            ],
        },
    ],
    botonAceptar: true,
    botonCancelar: true,
    textoBotonAceptar: 'Agregar',
    textoBotonCancelar: 'Cancelar',
    callbackAceptar: () => {
        const nombre = document.getElementById('nombre').value;
        const oficina = document.getElementById('oficina').value;
        console.log(`Nombre: ${nombre}, Oficina: ${oficina}`);
    },
    callbackCancelar: () => {
        console.log('Operación cancelada');
    },
});

2. Cerrar

cerrar()

Descripción

Cierra y elimina la alerta del contenedor

3. evitarCierre

evitarCierre()

Descripción

Evita el cierre automático de la alerta.

4.permitirCierre

permitirCierre()

Descripción

Permite el cierre automático de la alerta

Tipos de Alerta

success, error, warning, info, form, question, confirm, dark y custom son los tipos de alerta que se pueden mostrar. Cada tipo tiene un estilo diferente, la la custom es un tipo de alerta que quita el fondo permitiendo personalizarla con la propiedad backgroundColor.

Ejemplos de cada tipo de alerta

• success:
• error:
• warning:
• info:
• form:
• question:
• confirm:
• dark:
• custom:

Ejemplo completo de uso

const Arlet = new ArletAlert(document.body);

Arlet.Alerta({
    titulo: 'Formulario de Registro',
    texto: 'Por favor, complete los campos requeridos.',
    tipo: 'form',
    estilo: 'left-inputs-left',
    icono: 'bi-person-fill',
    inputs: [
        {
            label: true,
            textlabel: 'Nombre',
            class: 'form-control',
            id: 'nombre',
            type: 'text',
            formType: 'input',
            placeholder: 'Ingrese su nombre',
            required: true,
        },
        {
            label: true,
            textlabel: 'Correo Electrónico',
            class: 'form-control',
            id: 'email',
            type: 'email',
            formType: 'input',
            placeholder: 'Ingrese su correo',
            required: true,
        },
    ],
    botonAceptar: true,
    botonCancelar: true,
    textoBotonAceptar: 'Enviar',
    textoBotonCancelar: 'Cancelar',
    callbackAceptar: () => {
        const nombre = document.getElementById('nombre').value;
        const email = document.getElementById('email').value;
        console.log(`Nombre: ${nombre}, Email: ${email}`);
    },
    callbackCancelar: () => {
        console.log('Formulario cancelado');
    },
});