ConfirmDialog

Satu pertanyaan ya/tidak sebelum tindakan yang sulit dibatalkan, dipanggil dari kode sebagai await confirm() tanpa menyiapkan state dialog sendiri.

Pemasangan

Pasang satu <W4cConfirmDialog /> di app.vue atau layout yang selalu terpasang, sama seperti Toaster. Komponennya tidak punya props: seluruh isi dialog datang dari pemanggilan confirm().

vue

<template>
  <NuxtPage />
  <W4cConfirmDialog />
</template>

Setelah itu setiap halaman cukup memanggilnya. Nilainya true hanya kalau pengguna menekan tombol ya, dan baru kembali setelah dialognya tertutup — jadi aman untuk langsung disambung dengan permintaan ke server.

const confirm = useConfirm()

async function hapus() {
  if (!(await confirm({ title: 'Hapus PU-0042?', color: 'danger' }))) return
  await $fetch('/api/pickup/PU-0042', { method: 'DELETE' })
  toast.success('PU-0042 dihapus')
}

Dasar

Judulnya pertanyaan, deskripsinya akibat dari jawaban ya, dan label tombolnya menyebutkan tindakannya. Tombol bertuliskan Hapus permanen memberi tahu apa yang akan terjadi walau pertanyaannya terlewat dibaca; OK tidak.

PU-0042 masih aktif.

Warna tindakan

color mewarnai tombol ya beserta ikonnya: danger untuk yang menghapus data, warning untuk yang mengganggu rencana orang lain, primary untuk langkah maju yang sekadar perlu dipastikan. Ikonnya bisa diganti lewat icon.

Belum ada pertanyaan yang dijawab.

Ketik ulang

challenge menahan tombol ya sampai pengguna mengetik ulang kode yang diminta. Simpan untuk tindakan yang merusak sekaligus tidak bisa dibatalkan — dipakai di mana-mana, jebakan ini hanya jadi kebiasaan mengetik. Contoh ini juga memakai :dismissible="false", jadi pertanyaannya harus dijawab lewat salah satu tombol.

Lokasi BEKASI-02 aktif dengan 6 titik pickup.

Satu per satu

Dua pertanyaan yang datang bersamaan tidak menumpuk: yang kedua menunggu sampai yang pertama dijawab dan dialognya selesai menutup. Dengan begitu satu jawaban tidak pernah bisa jatuh ke pertanyaan yang salah. Bentuk singkat confirm('Simpan?') sama dengan confirm({ title: 'Simpan?' }).

Belum ada yang ditanyakan.

API

useConfirm() mengembalikan satu fungsi: confirm(options?: W4cConfirmOptions | string): Promise<boolean>. Antreannya terpisah per aplikasi Nuxt, termasuk saat render server.

Options

Opsi	Tipe	Default	Keterangan
title	string	'Lanjutkan tindakan ini?'	Pertanyaannya, sebagai judul dialog. Tulis sebagai pertanyaan yang dijawab oleh kedua tombolnya.
description	string	—	Akibat dari jawaban ya, satu baris di bawah pertanyaan. Ikut dibacakan pembaca layar lewat aria-describedby.
confirmLabel	string	'Lanjutkan'	Label tombol jawaban ya. Sebutkan tindakannya, misalnya Hapus permanen, bukan OK.
cancelLabel	string	'Batal'	Label tombol jawaban tidak, sekaligus nama tombol tutup untuk pembaca layar.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Makna tindakannya. Mewarnai tombol ya dan ikonnya; danger untuk apa pun yang menghapus data.
icon	string \| false	—	Nama ikon Iconify. Bawaannya mengikuti color; false menghilangkan ikonnya.
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'sm'	Ukuran panel, diteruskan ke Modal.
challenge	string	—	Kata atau kode yang harus diketik ulang sebelum tombol ya bisa ditekan. Untuk tindakan yang merusak sekaligus tidak bisa dibatalkan.
challengeLabel	string	'Ketik <challenge> untuk melanjutkan'	Label kolom ketik ulang, kalau kalimat bawaannya kurang pas.
dismissible	boolean	true	Escape, klik di luar panel, dan tombol tutup menjawab tidak. Matikan untuk pertanyaan yang harus dijawab dengan sengaja.

Dialognya dibangun dari Modal dengan role="alertdialog", jadi lapisan teratas, perangkap fokus, dan kunci gulir halaman berperilaku sama. Untuk pertanyaan yang butuh lebih dari satu kolom isian, pakai Modal langsung.