Modal

Dialog yang menuntut perhatian: memastikan keputusan, memuat formulir singkat, atau menampilkan detail tanpa meninggalkan halaman.

Dasar

Modal dikendalikan v-model. Komponen ini memakai elemen <dialog> bawaan browser, jadi lapisan teratas, perangkap fokus, Escape, dan menonaktifkan sisa halaman datang dari browser — bukan tiruan kami.

Belum ada perubahan.

Ubah jadwal pickup

Perubahan berlaku untuk penjemputan berikutnya saja.

Penjemputan PU-0042 saat ini dijadwalkan Selasa, 22 September 2026 pukul 09:00 WIB. Tim akan menerima pemberitahuan setelah jadwal disimpan.

Konfirmasi

Untuk keputusan merusak, sebut akibatnya di description dan beri tombol aksi warna danger. Slot #footer menerima close sehingga tombol Batal tidak perlu menyentuh state sendiri.

PU-0042 masih aktif.

Hapus PU-0042?

Tindakan ini tidak dapat dibatalkan.

Data penjemputan, foto timbangan, dan catatan operator akan dihapus permanen dari riwayat lokasi Kantor Bekasi.

Ukuran

Lima ukuran, dari sm untuk konfirmasi singkat hingga full untuk isi yang butuh seluruh layar. Di layar sempit semuanya menyisakan jarak yang sama ke tepi layar.

Ukuran md

Lebar panel mengikuti prop size. Ukuran full memakai seluruh tinggi layar, berguna untuk peta atau tabel lebar.

Isi panjang

Judul dan baris aksi tetap di tempatnya, hanya isinya yang menggulir. Tinggi panel dibatasi tinggi layar, jadi tombolnya tidak pernah terdorong keluar pandangan.

Jenis sampah terlayani

Judul dan tombol tetap di tempatnya; hanya isinya yang menggulir.

  • Sampah organik sisa makanan
  • Sampah organik dedaunan
  • Kertas dan kardus
  • Plastik PET
  • Plastik HDPE
  • Plastik campuran
  • Logam kaleng aluminium
  • Logam besi
  • Kaca botol bening
  • Kaca botol warna
  • Minyak jelantah
  • Elektronik kecil
  • Baterai rumah tangga
  • Lampu bekas
  • Tekstil dan kain
  • Sepatu dan sandal bekas
  • Kemasan tetra pak
  • Styrofoam kemasan
  • Karet dan ban kecil
  • Kayu dan palet
  • Puing bangunan ringan
  • Oli bekas kendaraan
  • Cat dan pelarut
  • Obat kedaluwarsa
  • Masker dan sarung tangan
  • Popok dan pembalut
  • Kabel dan charger
  • Kemasan aerosol
  • Toner dan katrid printer
  • Residu tidak terpilah

Wajib diselesaikan

:dismissible="false" menghilangkan tombol tutup dan menolak Escape; :close-on-backdrop="false" menahan klik di luar panel. Pakai keduanya hanya bila pengguna memang harus memilih, dan selalu sediakan jalan keluar di dalam dialognya. Kontrol dengan atribut autofocus mendapat fokus saat dialog terbuka.

Belum ada pembatalan.

Alasan pembatalan

Dikirim ke tim operasional.

API

Props

PropTipeDefaultKeterangan
v-modelbooleanfalseMembuka dan menutup dialog. Menutup lewat tombol, Escape, atau klik luar ikut memperbaruinya.
titlestring—Judul dialog, dipakai sebagai namanya lewat aria-labelledby. Dialog tanpa judul wajib diberi aria-label.
descriptionstring—Satu baris di bawah judul, ditautkan lewat aria-describedby sehingga ikut dibacakan saat dialog terbuka.
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'Lebar panel. full memakai seluruh tinggi layar, untuk peta atau tabel lebar.
dismissiblebooleantrueMenampilkan tombol tutup dan mengizinkan Escape. Setel false untuk alur yang harus diselesaikan.
role'dialog' | 'alertdialog'—Pakai alertdialog untuk dialog yang menyela dan menuntut jawaban, seperti konfirmasi. Selain itu biarkan sebagai dialog biasa.
closeOnBackdropbooleantrueKlik di luar panel menutup dialog. Setel false agar isian yang sudah diketik tidak hilang karena salah klik.
closeLabelstring'Tutup'Label tombol tutup untuk pembaca layar.

Slots

SlotTipeDefaultKeterangan
default——Isi dialog. Bagian inilah yang menggulir kalau isinya panjang.
footer{ close: () => void }—Baris aksi di bawah. Pakai close untuk tombol Batal tanpa menyentuh state sendiri.
header{ close: () => void }—Mengganti seluruh kepala dialog, termasuk tombol tutupnya. Sediakan sendiri elemen yang menamai dialog.
title / description——Versi kaya dari prop title dan description, misalnya untuk menyisipkan W4cBadge.

Events

EventTipeDefaultKeterangan
update:modelValue(open: boolean)—Dialog dibuka atau ditutup.
close()—Dialog selesai ditutup, setelah animasi keluarnya habis.

Lewat template ref tersedia show() dan close(), untuk dialog yang dibuka dari kode tanpa state sendiri. Kelas dan atribut tambahan diteruskan ke panel, bukan ke kotak dialognya.