Popconfirm

Лёгкое всплывающее окно подтверждения, привязанное к элементу-триггеру. Идеально для встроенных подтверждений перед деструктивными или важными действиями.

Basic

<VxPopconfirm title="Are you sure?" @confirm="onConfirm" @cancel="onCancel">
  <VxButton>Click me</VxButton>
</VxPopconfirm>

With Description

<VxPopconfirm title="Delete this item?" description="This action cannot be undone.">
  <VxButton>Delete</VxButton>
</VxPopconfirm>

Types

<VxPopconfirm title="Info confirmation" type="info">
  <VxButton>Info</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Operation successful" type="success">
  <VxButton>Success</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Proceed with caution?" type="warning">
  <VxButton>Warning</VxButton>
</VxPopconfirm>

<VxPopconfirm title="Delete permanently?" description="All data will be lost." type="danger">
  <VxButton variant="destructive">Danger</VxButton>
</VxPopconfirm>

Hover Trigger

Открывайте popconfirm при наведении вместо клика.

<VxPopconfirm title="Remove from list?" trigger="hover" type="warning">
  <VxButton>Hover me</VxButton>
</VxPopconfirm>

Before Confirm Hook

Выполняет асинхронную валидацию перед подтверждением. Спиннер автоматически отображается во время проверки. Если функция возвращает false или выбрасывает ошибку, подтверждение блокируется.

<script setup>
async function validate() {
  const ok = await checkServer()
  return ok // return false to block confirm
}
</script>

<VxPopconfirm title="Save changes?" :before-confirm="validate" @confirm="onConfirm">
  <VxButton>Save</VxButton>
</VxPopconfirm>

Auto Close

Автоматически закрывает popconfirm по истечении таймаута (в мс).

<VxPopconfirm title="Quick! Confirm within 3s" :auto-close="3000">
  <VxButton>Auto Close (3s)</VxButton>
</VxPopconfirm>

Condition

Когда condition равно false, клик по триггеру сразу вызывает confirm без показа всплывающего окна. Полезно для включения/отключения подтверждения.

<script setup>
const needConfirm = ref(true)
</script>

<VxPopconfirm title="Are you sure?" :condition="needConfirm" @confirm="onDelete">
  <VxButton>Delete</VxButton>
</VxPopconfirm>

<VxSwitch v-model="needConfirm" /> Require confirmation

Custom Icon Slot

Замените стандартную иконку типа своей.

<VxPopconfirm title="Publish article?">
  <template #icon>
    <div class="my-icon">
      <MyCustomIcon />
    </div>
  </template>
  <VxButton>Custom Icon</VxButton>
</VxPopconfirm>

Custom Actions Slot

Полностью настройте кнопки подвала. Слот предоставляет функции confirm, cancel и состояние loading.

<VxPopconfirm title="Choose an action">
  <template #actions="{ confirm, cancel }">
    <button @click="cancel">Skip</button>
    <button @click="saveDraft">Draft</button>
    <button @click="confirm">Publish</button>
  </template>
  <VxButton>Three Actions</VxButton>
</VxPopconfirm>

Loading

<script setup>
const loading = ref(false)

function onConfirm() {
  loading.value = true
  deleteRecord().finally(() => { loading.value = false })
}
</script>

<VxPopconfirm
  title="Delete this record?"
  type="danger"
  :loading="loading"
  @confirm="onConfirm"
>
  <VxButton variant="destructive">Delete</VxButton>
</VxPopconfirm>

No Icon

<VxPopconfirm title="Are you sure?" :icon="false">
  <VxButton>No Icon</VxButton>
</VxPopconfirm>

Custom Button Text

<VxPopconfirm
  title="Discard draft?"
  confirm-text="Discard"
  cancel-text="Keep Editing"
  type="warning"
>
  <VxButton>Discard</VxButton>
</VxPopconfirm>

No Cancel Button

<VxPopconfirm title="Continue?" :show-cancel="false">
  <VxButton>Acknowledge</VxButton>
</VxPopconfirm>

Disabled

<VxPopconfirm title="This won't open" disabled>
  <VxButton disabled>Disabled</VxButton>
</VxPopconfirm>

Custom Content Slot

<VxPopconfirm title="Update settings?">
  <template #content>
    <div>
      This will apply to <strong>all team members</strong>. Are you sure?
    </div>
  </template>
  <VxButton>Update</VxButton>
</VxPopconfirm>

Programmatic Usage

Используйте usePopconfirm() для Promise-based API. Резолвится при подтверждении, отклоняется при отмене.

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

const popconfirm = usePopconfirm()

// Basic
popconfirm('Are you sure?')
  .then(() => console.log('Confirmed'))
  .catch(() => console.log('Cancelled'))

// Type-specific with options
popconfirm.danger({
  title: 'Delete account?',
  description: 'This cannot be undone.',
  confirmText: 'Delete',
}).then(() => { ... })

// Other types
popconfirm.success({ title: 'Publish?' })
popconfirm.warning({ title: 'Discard changes?' })
popconfirm.info({ title: 'Continue?' })
</script>

API

Props

Prop	Type	Default	Description
title	string	''	Текст заголовка
description	string	''	Текст описания
type	'info' | 'success' | 'warning' | 'danger'	'info'	Вариант типа (влияет на иконку и цвет кнопки подтверждения)
icon	boolean	true	Показывать иконку типа
confirmText	string	'Yes'	Текст кнопки подтверждения
cancelText	string	'No'	Текст кнопки отмены
showCancel	boolean	true	Показывать кнопку отмены
loading	boolean	false	Показать спиннер на кнопке подтверждения (предотвращает закрытие)
disabled	boolean	false	Отключить открытие popconfirm
width	string | number	280	Ширина панели
gap	number	8	Отступ между триггером и панелью в px
trigger	'click' | 'hover'	'click'	Способ открытия popconfirm
beforeConfirm	() => boolean | Promise<boolean>	—	Асинхронный обработчик перед подтверждением. Верните false или выбросите ошибку, чтобы заблокировать
autoClose	number	0	Автозакрытие через N миллисекунд (0 = отключено)
hideOnRouteChange	boolean	true	Автозакрытие при навигации браузера
condition	boolean	true	При false пропускает всплывающее окно и сразу вызывает confirm

Events

Event	Payload	Description
confirm	—	Вызывается при клике на кнопку подтверждения (и если beforeConfirm пройдена)
cancel	—	Вызывается при клике на кнопку отмены
open	—	Вызывается при открытии popconfirm
close	—	Вызывается при закрытии popconfirm

Slots

Slot	Props	Description
default	—	Элемент-триггер
content	—	Пользовательское содержимое под заголовком (заменяет description)
icon	—	Пользовательская иконка (заменяет стандартную иконку типа)
actions	{ confirm, cancel, loading }	Пользовательские кнопки действий

usePopconfirm

const popconfirm = usePopconfirm()

popconfirm(options: PopconfirmOptions | string): Promise<void>
popconfirm.info(options): Promise<void>
popconfirm.success(options): Promise<void>
popconfirm.warning(options): Promise<void>
popconfirm.danger(options): Promise<void>

PopconfirmOptions:

Option	Type	Default	Description
title	string	—	Текст заголовка
description	string	—	Текст описания
type	PopconfirmType	'info'	Вариант типа
icon	boolean	true	Показывать иконку
confirmText	string	'Yes'	Текст кнопки подтверждения
cancelText	string	'No'	Текст кнопки отмены
showCancel	boolean	true	Показывать кнопку отмены
width	string | number	280	Ширина панели
beforeConfirm	() => boolean | Promise<boolean>	—	Асинхронный обработчик
autoClose	number	0	Таймаут автозакрытия