Swal

Swal — componente de UI para exibição de janelas alert, confirm e prompt

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

Construtor

Cria uma instância de Swal com os parâmetros fornecidos

constructor(params: SwalParams)

Parâmetro	Tipo	Descrição
params	SwalParams	Parâmetros de criação da janela

Propriedades

events

Objeto do tipo EventCallbacks<SwalEventName> com os manipuladores de eventos

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

message

Texto da mensagem da janela

message: string

title

Título da janela

title: string

view

Visualização da janela, do tipo SwalView

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

Métodos

alert

Exibe uma janela de alerta

async alert(): Promise<any>

Eventos do método alert():

Evento	Parâmetro	Tipo	Descrição
'onShow'			Janela foi exibida
'onHide'			Janela foi ocultada
'onConfirm'			Usuário confirmou a ação

confirm

Exibe uma janela de confirmação

async confirm(): Promise<any>

Eventos do método confirm():

Evento	Parâmetro	Tipo	Descrição
'onShow'			Janela foi exibida
'onHide'			Janela foi ocultada
'onCancel'			Usuário cancelou a ação
'onConfirm'			Usuário confirmou a ação

destroy

Remove inscrições e libera recursos

destroy(): void

prompt

Exibe uma janela com campo de entrada ou seleção de uma opção de uma lista

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

Parâmetro	Tipo	Descrição
params	SwalPromptParams	Parâmetros do campo de entrada

Eventos do método prompt():

Evento	Parâmetro	Tipo	Descrição
'onShow'			Janela foi exibida
'onHide'			Janela foi ocultada
'onCancel'			Usuário cancelou a ação
'onPrompt'			Usuário informou um valor
	value	string	Valor informado / Valor da opção selecionada da lista params.options

Exemplo

Exibindo uma mensagem informativa:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'info',
  title: 'Informação',
  message: 'Esta é apenas uma mensagem informativa',
  events: {
    onShow: () => console.log('Mensagem exibida'),
    onHide: () => console.log('Mensagem ocultada'),
    onCancel: () => console.log('Recusado pelo usuário'),
  }
})

swal.alert();

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'info',
  title: 'Informação',
  message: 'Esta é apenas uma mensagem informativa',
  events: {
    onShow: () => console.log('Mensagem exibida'),
    onHide: () => console.log('Mensagem ocultada'),
    onCancel: () => console.log('Recusado pelo usuário'),
  }
});

swal.alert();

Exibindo uma janela de confirmação:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'warning',
  title: 'Confirmar ação',
  message: 'Excluir conta',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onConfirm: () => console.log('Aceito pelo usuário')
  }
})

await swal.confirm()

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Confirmar ação',
  message: 'Excluir conta',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onConfirm: () => console.log('Aceito pelo usuário')
  }
});

await swal.confirm();

Exibindo uma janela com campo de entrada:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Informar quantidade',
  message: 'Informe a quantidade:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
})

await swal.prompt({
  type: 'input',
  placeholder: 'Informe um valor',
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Informar quantidade',
  message: 'Informe a quantidade:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
});

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

Exibindo uma janela com campo textarea:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Informar o motivo',
  message: 'Informe o motivo:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
})

await swal.prompt({
  type: 'textarea',
  placeholder: 'Informe um valor',
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Informar o motivo',
  message: 'Informe o motivo:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
});

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

Exibindo uma janela com seleção em lista suspensa:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Alterar status',
  message: 'Selecione o novo status:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
})

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Ativo'},
    {value: 'inprocessing', title: 'Em andamento'},
    {value: 'done', title: 'Concluído'}
  ],
})

UMD

const App = window.FlowluMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Alterar status',
  message: 'Selecione o novo status:',
  events: {
    onShow: () => console.log('Diálogo exibido'),
    onHide: () => console.log('Diálogo ocultado'),
    onCancel: () => console.log('Recusado pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado: ${value}`)
  }
});

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Ativo'},
    {value: 'inprocessing', title: 'Em andamento'},
    {value: 'done', title: 'Concluído'}
  ],
});