Swal

Swal — componente de UI para mostrar diálogos alert, confirm y prompt

import { Swal } from '@flowlu/miniapp-jssdk'

Constructor

Crea una instancia de Swal con los parámetros dados

constructor(params: SwalParams)

Parámetro	Tipo	Descripción
params	SwalParams	Parámetros de creación del diálogo

Propiedades

events

Objeto de tipo EventCallbacks<SwalEventName> con los manejadores de eventos

get events(): EventCallbacks
set events(value: EventCallbacks)

message

Texto del mensaje del diálogo

message: string

title

Título del diálogo

title: string

view

Vista del diálogo de tipo SwalView

get view(): SwalView
set view(value: SwalView)

Métodos

alert

Muestra un diálogo de alerta

async alert(): Promise<any>

Eventos del método alert():

Evento	Parámetro	Tipo	Descripción
'onShow'			El diálogo se muestra
'onHide'			El diálogo se oculta
'onConfirm'			El usuario confirmó la acción

confirm

Muestra un diálogo de confirmación

async confirm(): Promise<any>

Eventos del método confirm():

Evento	Parámetro	Tipo	Descripción
'onShow'			El diálogo se muestra
'onHide'			El diálogo se oculta
'onCancel'			El usuario canceló la acción
'onConfirm'			El usuario confirmó la acción

destroy

Elimina las suscripciones y libera los recursos

destroy(): void

prompt

Muestra un diálogo con campo de entrada o selección de una opción de una lista

async prompt(params?: SwalPromptParams): Promise<any>

Parámetro	Tipo	Descripción
params	SwalPromptParams	Parámetros del campo de entrada

Eventos del método prompt():

Evento	Parámetro	Tipo	Descripción
'onShow'			El diálogo se muestra
'onHide'			El diálogo se oculta
'onCancel'			El usuario canceló la acción
'onPrompt'			El usuario ingresó un valor
	value	string	Valor ingresado / Valor de la opción seleccionada de la lista params.options

Ejemplo

Mostrar un mensaje informativo:

ESM

import { App, Swal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

const swal = new Swal({
  view: 'info',
  title: 'Información',
  message: 'Esto es solo un mensaje informativo',
  events: {
    onShow: () => console.log('Mensaje mostrado'),
    onHide: () => console.log('Mensaje ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
  }
})

swal.alert();

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'info',
  title: 'Información',
  message: 'Esto es solo un mensaje informativo',
  events: {
    onShow: () => console.log('Mensaje mostrado'),
    onHide: () => console.log('Mensaje ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
  }
});

swal.alert();

Mostrar un diálogo de confirmación:

ESM

import { App, Swal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

const swal = new Swal({
  view: 'warning',
  title: 'Confirmar acción',
  message: 'Eliminar cuenta',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onConfirm: () => console.log('Aceptado por el usuario')
  }
})

await swal.confirm()

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Confirmar acción',
  message: 'Eliminar cuenta',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onConfirm: () => console.log('Aceptado por el usuario')
  }
});

await swal.confirm();

Mostrar un diálogo con un campo de entrada:

ESM

import { App, Swal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Indicar cantidad',
  message: 'Introduzca la cantidad:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
})

await swal.prompt({
  type: 'input',
  placeholder: 'Introduzca un valor',
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Indicar cantidad',
  message: 'Introduzca la cantidad:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
});

await swal.prompt({
  type: 'input',
  placeholder: 'Introduzca un valor',
});

Mostrar un diálogo con un campo textarea:

ESM

import { App, Swal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Indicar el motivo',
  message: 'Indique el motivo:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
})

await swal.prompt({
  type: 'textarea',
  placeholder: 'Introduzca un valor',
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Indicar el motivo',
  message: 'Indique el motivo:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
});

await swal.prompt({
  type: 'textarea',
  placeholder: 'Introduzca un valor',
});

Mostrar un diálogo con selección desplegable:

ESM

import { App, Swal } from '@flowlu/miniapp-jssdk'

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Cambiar estado',
  message: 'Seleccione el nuevo estado:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
})

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Activo'},
    {value: 'inprocessing', title: 'En progreso'},
    {value: 'done', title: 'Hecho'}
  ],
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Cambiar estado',
  message: 'Seleccione el nuevo estado:',
  events: {
    onShow: () => console.log('Diálogo mostrado'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Rechazado por el usuario'),
    onPrompt: (value) => console.log(`Valor introducido: ${value}`)
  }
});

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Activo'},
    {value: 'inprocessing', title: 'En progreso'},
    {value: 'done', title: 'Hecho'}
  ],
});