Message

Лёгкое toast-уведомление, появляющееся вверху страницы. Полностью программное — не требует компонента в шаблоне.

Basic

<script setup>
import { VxMessage } from 'veloxui'

VxMessage('Default message')
VxMessage.success('Success message')
VxMessage.warning('Warning message')
VxMessage.danger('Danger message')
VxMessage.info('Info message')
</script>

Closable

Установите closable: true, чтобы показать кнопку закрытия.

VxMessage.success('File saved', { closable: true })

Plain Style

Используйте plain: true для нейтрального фона с цветной иконкой и границей.

VxMessage.success('Saved successfully', { plain: true })

Loading

Используйте VxMessage.loading() для асинхронных операций. Сообщение остаётся видимым, пока вы не закроете его вручную.

// Show loading, then swap to success
const handle = VxMessage.loading('Saving...')
await saveData()
handle.close()
VxMessage.success('Saved!')

// Or update in-place
const handle = VxMessage.loading('Uploading...')
await upload()
handle.update({ message: 'Upload complete!', type: 'success', duration: 2000 })

HTML Content

Установите dangerouslyUseHTMLString: true, чтобы рендерить HTML в сообщении.

VxMessage({
  message: 'File <strong>report.pdf</strong> uploaded',
  type: 'success',
  dangerouslyUseHTMLString: true,
})

Action Button

Добавьте инлайн-кнопку действия через action: { text, onClick }.

VxMessage({
  message: 'Email archived',
  duration: 5000,
  action: {
    text: 'Undo',
    onClick: () => restoreEmail(),
  },
})

Progress Bar

Установите showProgress: true, чтобы показать визуальный обратный отсчёт.

VxMessage.success('Auto-closing...', {
  showProgress: true,
  duration: 4000,
})

Custom Position

Сообщения могут появляться в 6 позициях. Кликните по любой зоне для предпросмотра.

VxMessage.info('Top left', { position: 'top-left' })
VxMessage.success('Bottom right', { position: 'bottom-right' })

Without Icon

VxMessage.success('No icon', { showIcon: false })

Custom Duration

Задайте duration в миллисекундах. Используйте 0 для постоянного сообщения (требуется closable).

VxMessage.info('Quick', { duration: 1000 })
VxMessage.warning('Persistent', { duration: 0, closable: true })

Custom Icon

Передайте сырую SVG-строку в опции icon.

VxMessage({
  message: 'Rocket launched!',
  type: 'info',
  icon: '<svg ...>...</svg>',
})

Grouping

Используйте grouping: true, чтобы предотвратить дублирующиеся сообщения с одинаковым содержимым.

VxMessage.info('Only one shown', { grouping: true })

Update Existing

Используйте id, чтобы обновить активное сообщение, или вызовите update() у handle.

// Update by ID
VxMessage({ id: 'upload', message: 'Uploading...', type: 'loading' })
// Later...
VxMessage({ id: 'upload', message: 'Done!', type: 'success', duration: 2000 })

// Or via handle
const h = VxMessage.loading('Processing...')
h.update({ message: 'Complete!', type: 'success', duration: 2000 })

Max Count

Ограничьте количество видимых сообщений на каждой позиции через VxMessage.config().

VxMessage.config({ max: 3 }) // only 3 visible at a time

Promise Support

Цепочка .then() позволяет выполнить код после закрытия сообщения.

VxMessage.success('Step 1 complete', { duration: 2000 })
  .then(() => VxMessage.info('Moving to step 2...'))

Custom Style

Любое визуальное свойство можно переопределить: background, color, iconColor, borderColor, borderRadius, shadow, progressColor.

VxMessage({
  message: 'Fully customized',
  background: 'linear-gradient(135deg, #667eea, #764ba2)',
  color: '#fff',
  iconColor: '#fff',
  borderColor: 'transparent',
  borderRadius: '9999px',
  shadow: '0 4px 20px rgba(102,126,234,0.4)',
  progressColor: '#c4b5fd',
})

Close All

VxMessage.closeAll()

API

VxMessage(options)

Param	Type	Default	Description
message	string	—	Текст сообщения (можно передать строку напрямую)
type	'success' | 'warning' | 'danger' | 'info' | 'loading' | 'default'	'default'	Тип сообщения
duration	number	3000	Автозакрытие в мс. 0 = без автозакрытия
closable	boolean	false	Показать кнопку закрытия
showIcon	boolean	true	Показывать иконку типа
icon	Component | string	—	Кастомная иконка (Vue-компонент или SVG-строка)
plain	boolean	false	Нейтральный фон с цветной иконкой
position	'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right'	'top-center'	Позиция на экране
showProgress	boolean	false	Визуальная полоска обратного отсчёта
dangerouslyUseHTMLString	boolean	false	Рендерить сообщение как HTML
action	{ text: string, onClick: () => void }	—	Инлайн-кнопка действия
id	string	—	Переиспользовать/обновить существующее сообщение
grouping	boolean	false	Предотвращать дублирующиеся сообщения
offset	number	16	Отступ от края вьюпорта
background	string	—	Кастомный фон (цвет, градиент)
color	string	—	Кастомный цвет текста
iconColor	string	—	Кастомный цвет иконки
borderColor	string	—	Кастомный цвет границы
progressColor	string	—	Кастомный цвет полоски прогресса
borderRadius	string	—	Кастомное скругление углов
shadow	string	—	Кастомный box-shadow
customClass	string	—	Дополнительный CSS-класс
customStyle	CSSStyleDeclaration	—	Переопределение инлайн-стилей
onClose	() => void	—	Callback при закрытии сообщения

Methods

VxMessage.success(message, options?)
VxMessage.warning(message, options?)
VxMessage.danger(message, options?)
VxMessage.info(message, options?)
VxMessage.loading(message, options?)  // duration defaults to 0
VxMessage.closeAll()
VxMessage.config({ max: 3 })          // limit visible count

Return Value

const handle = VxMessage.success('Done')
handle.close()                        // dismiss manually
handle.update({ message: 'Updated' }) // change content/type
handle.then(() => { /* ... */ })       // runs after close