Componentes de UI

O SDK permite invocar elementos da interface da plataforma a partir de uma miniaplicação e responder aos seus eventos.

Disponíveis:

• Toast — notificação
• Swal — alert/confirm/prompt
• Modal — janela modal
• Sidepanel — painel lateral

Exemplo Toast

Exibindo uma notificação de sucesso que se oculta automaticamente após 5 segundos:

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

const toast = new Toast({
  view: 'success',
  title: 'Salvo',
  message: 'As configurações foram atualizadas com sucesso',
  options: {
    timeOut: 5000
  },
  events: {
    onClose: () => console.log('Notificação dispensada pelo usuário')
  }
})

await toast.show()

Exemplo Swal

Exibindo uma janela de confirmação:

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

const swal = new Swal({
  view: 'warning',
  title: 'Confirmar ação',
  message: 'Tem certeza?',
  events: {
    onCancel: () => console.log('Confirmação recusada pelo usuário'),
    onConfirm: () => console.log('Confirmação aceita pelo usuário')
  }
})

await swal.confirm()

Exibindo uma janela com campo de entrada:

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

const swal = new Swal({
  view: 'info',
  title: 'Informar quantidade',
  message: 'Informe a quantidade:',
  events: {
    onCancel: () => console.log('Entrada recusada pelo usuário'),
    onPrompt: (value) => console.log(`Valor informado pelo usuário: ${value}`)
  }
})

await swal.prompt({
  type: 'input',
})

Exemplo Modal

Exibindo uma janela modal com URL personalizada e tratamento de evento de fechamento:

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

const modal = new Modal({
  title: 'Acme Corp',
  url: '/_module/crm/view/account_view/2332?tab=account_info',
  options: {
    width: 'lg'
  },
  events: {
    onClose: () => console.log('Janela modal fechada pelo usuário'),
    onHide: () => console.log('Janela modal ocultada')
  }
})

await modal.show()

Exemplo Sidepanel

Exibindo um painel lateral com URL personalizada e tratamento de evento de fechamento:

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

const panel = new Sidepanel({
  title: 'Perfil do usuário',
  url: '/_module/company/view/member/433772?tab=contacts',
  options: {
    width: 'md'
  },
  events: {
    onClose: () => console.log('Painel lateral fechado pelo usuário'),
    onHide: () => console.log('Painel lateral ocultado')
  }
})

await panel.show()