Popconfirm

Trigger elementga biriktiriladigan yengil tasdiqlash popup’i. Destruktiv yoki muhim amallardan oldingi inline tasdiqlashlar uchun ideal.

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

Popconfirmni bosish oʻrniga hover qilinganda oching.

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

Before Confirm Hook

Confirm amali bajarilishidan oldin asinxron validatsiyani ishga tushiring. Tekshirish davomida spinner avtomatik koʻrsatiladi. Agar funksiya false qaytarsa yoki istisno tashlasa, confirm bloklanadi.

<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

Belgilangan vaqtdan (ms) keyin popconfirmni avtomatik yoping.

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

Condition

condition false boʻlsa, trigger’ni bosish popup’ni koʻrsatmasdan darhol confirm hodisasini ishga tushiradi. Tasdiqlashni yoqish yoki oʻchirish uchun foydali.

<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

Standart tur ikonkasini oʻzingizning ikonkangiz bilan almashtiring.

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

Custom Actions Slot

Footer tugmalarini toʻliq moslashtiring. Slot confirm, cancel funksiyalari va loading holatini taqdim etadi.

<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

Promise asosidagi API uchun usePopconfirm() dan foydalaning. Confirm’da resolve boʻladi, cancel’da reject boʻladi.

<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	''	Sarlavha matni
description	string	''	Tavsif matni
type	'info' | 'success' | 'warning' | 'danger'	'info'	Tur varianti (ikonka va confirm tugmasi rangiga taʼsir qiladi)
icon	boolean	true	Tur ikonkasini koʻrsatish
confirmText	string	'Yes'	Confirm tugmasi matni
cancelText	string	'No'	Cancel tugmasi matni
showCancel	boolean	true	Cancel tugmasini koʻrsatish
loading	boolean	false	Confirm tugmasida yuklash spinner’ini koʻrsatish (yopilishning oldini oladi)
disabled	boolean	false	Popconfirm ochilishini oʻchirish
width	string | number	280	Panel kengligi
gap	number	8	Trigger va panel orasidagi masofa (px)
trigger	'click' | 'hover'	'click'	Popconfirmni qanday ochish
beforeConfirm	() => boolean | Promise<boolean>	—	Confirm’dan oldingi asinxron himoya. Bloklash uchun false qaytaring yoki istisno tashlang
autoClose	number	0	N millisekunddan keyin avtomatik yopish (0 = oʻchirilgan)
hideOnRouteChange	boolean	true	Brauzer navigatsiyasi sodir boʻlganda avtomatik yopish
condition	boolean	true	false boʻlsa, popup’ni oʻtkazib yuboradi va darhol confirm ni ishga tushiradi

Events

Event	Payload	Description
confirm	—	Confirm tugmasi bosilganda chiqariladi (va beforeConfirm oʻtganida)
cancel	—	Cancel tugmasi bosilganda chiqariladi
open	—	Popconfirm ochilganda chiqariladi
close	—	Popconfirm yopilganda chiqariladi

Slots

Slot	Props	Description
default	—	Trigger elementi
content	—	Sarlavha ostidagi maxsus kontent (description oʻrnini bosadi)
icon	—	Maxsus ikonka (standart tur ikonkasi oʻrnini bosadi)
actions	{ confirm, cancel, loading }	Maxsus amal tugmalari

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	—	Sarlavha matni
description	string	—	Tavsif matni
type	PopconfirmType	'info'	Tur varianti
icon	boolean	true	Ikonkani koʻrsatish
confirmText	string	'Yes'	Confirm tugmasi matni
cancelText	string	'No'	Cancel tugmasi matni
showCancel	boolean	true	Cancel tugmasini koʻrsatish
width	string | number	280	Panel kengligi
beforeConfirm	() => boolean | Promise<boolean>	—	Asinxron himoya
autoClose	number	0	Avtomatik yopish vaqti