Swal

Swal — UI компонент для отображения диалогов alert, confirm и prompt

import { Swal } from '@aspro-cloud/miniapp-jssdk'

Конструктор

Создает экземпляр Swal с переданными параметрами

constructor(params: SwalParams)

Параметр	Тип	Описание
params	SwalParams	Параметры создания диалога

Свойства

events

Объект типа EventCallbacks<SwalEventName> с обработчиками событий

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

message

Текст сообщения диалога

message: string

title

Заголовок диалога

title: string

view

Вид диалога типа SwalView

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

Методы

alert

Показывает alert диалог

async alert(): Promise<any>

События метода alert():

Событие	Параметр	Тип	Описание
'onShow'			Диалог отображен
'onHide'			Диалог скрыт
'onConfirm'			Пользователь подтвердил действие

confirm

Показывает диалог с подтверждением действия

async confirm(): Promise<any>

События метода confirm():

Событие	Параметр	Тип	Описание
'onShow'			Диалог отображен
'onHide'			Диалог скрыт
'onCancel'			Пользователь отменил действие
'onConfirm'			Пользователь подтвердил действие

destroy

Удаляет подписки и освобождает ресурсы

destroy(): void

prompt

Показывает диалог с полем ввода/выбором варианта из списка

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

Параметр	Тип	Описание
params	SwalPromptParams	Параметры поля ввода

События метода prompt():

Событие	Параметр	Тип	Описание
'onShow'			Диалог отображен
'onHide'			Диалог скрыт
'onCancel'			Пользователь отменил действие
'onPrompt'			Пользователь ввел значение
	value	string	Введенное значение / Выбранное значение варианта списка params.options

Пример

Вывод информационного сообщения:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'info',
  title: 'Информационное сообщение',
  message: 'Это просто информационное сообщение',
  events: {
    onShow: () => console.log('Сообщение отображено'),
    onHide: () => console.log('Сообщение скрыто'),
    onCancel: () => console.log('Отклонено пользователем'),
  }
})

swal.alert();

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'info',
  title: 'Информационное сообщение',
  message: 'Это просто информационное сообщение',
  events: {
    onShow: () => console.log('Сообщение отображено'),
    onHide: () => console.log('Сообщение скрыто'),
    onCancel: () => console.log('Отклонено пользователем'),
  }
});

swal.alert();

Вывод диалога с подтверждением действия:

ESM

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

await App.initializeFrame()

const swal = new Swal({
  view: 'warning',
  title: 'Подтвердите действие',
  message: 'Удалить контрагента',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onConfirm: () => console.log('Принято пользователем')
  }
})

await swal.confirm()

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

const swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Подтвердите действие',
  message: 'Удалить контрагента',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onConfirm: () => console.log('Принято пользователем')
  }
});

await swal.confirm();

Вывод диалога с полем ввода:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Укажите количество',
  message: 'Пожалуйста, введите количество:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
})

await swal.prompt({
  type: 'input',
  placeholder: 'Введите значение',
})

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Укажите количество',
  message: 'Пожалуйста, введите количество:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
});

await swal.prompt({
  type: 'input',
  placeholder: 'Введите значение',
});

Вывод диалога с текстовым полем ввода:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Укажите причину',
  message: 'Пожалуйста, укажите причину:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
})

await swal.prompt({
  type: 'textarea',
  placeholder: 'Введите значение',
})

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Укажите причину',
  message: 'Пожалуйста, укажите причину:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
});

await swal.prompt({
  type: 'textarea',
  placeholder: 'Введите значение',
});

Вывод диалога с выбором варианта из списка:

ESM

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

await App.initializeFrame()

let swal = new Swal({
  view: 'warning',
  title: 'Изменение статуса',
  message: 'Выберите новый статус:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
})

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Активен'},
    {value: 'inprocessing', title: 'В обработке'},
    {value: 'done', title: 'Завершен'}
  ],
})

UMD

const App = window.ACloudMiniApp;

await App.initializeFrame();

let swal = new App.Frame.Swal({
  view: 'warning',
  title: 'Изменение статуса',
  message: 'Выберите новый статус:',
  events: {
    onShow: () => console.log('Диалог отображен'),
    onHide: () => console.log('Диалог скрыт'),
    onCancel: () => console.log('Отклонено пользователем'),
    onPrompt: (value) => console.log(`Введено значение: ${value}`)
  }
});

await swal.prompt({
  type: 'select',
  options: [
    {value: 'active', title: 'Активен'},
    {value: 'inprocessing', title: 'В обработке'},
    {value: 'done', title: 'Завершен'}
  ],
});