arlet-alert
Version:
Un componente de alertas personalizables con soporte para Bootstrap Icons.
300 lines (254 loc) • 10.6 kB
Markdown
# 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:
```javascript
const Arlet = new ArletAlert(document.body);
```
## Métodos
### 1. Alerta
```javascript
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**
```javascript
Arlet.Alerta({
titulo: 'Éxito',
texto: 'El registro se ha guardado correctamente.',
tipo: 'success',
});
```
**Mostrar una alerta con botones**
```javascript
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**
```javascript
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
```javascript
cerrar()
```
#### Descripción
Cierra y elimina la alerta del contenedor
### 3. evitarCierre
```javascript
evitarCierre()
```
#### Descripción
Evita el cierre automático de la alerta.
### 4.permitirCierre
```javascript
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
```javascript
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');
},
});