Daftar yang dapat diurutkan ulang lewat mouse, sentuhan, atau keyboard tanpa dependensi tambahan.
Hubungkan daftar melalui v-model. Tarik ikon grip untuk memindahkan item, atau fokuskan handle lalu gunakan keyboard. Data asal tidak dimutasi; komponen mengirim array baru setelah item diletakkan.
Verifikasi data pelanggan
Pastikan alamat dan kontak dapat dihubungi.
Timbang material
Catat berat bersih setiap kategori material.
Proses pembayaran
Kirim nilai akhir ke metode pembayaran pelanggan.
Tekan Enter atau Spasi untuk mengangkat item, gunakan tombol panah untuk memindahkan, lalu tekan Enter atau Spasi untuk meletakkan. Tekan Escape untuk membatalkan.
Urutan: Verifikasi data pelanggan → Timbang material → Proses pembayaran
Variant bordered menyatukan item dalam satu rangka, separated membuat kartu terpisah, dan ghost cocok untuk susunan yang sudah memiliki wadah. item-disabled mengunci item yang belum boleh dipindahkan.
Bordered
Tekan Enter atau Spasi untuk mengangkat item, gunakan tombol panah untuk memindahkan, lalu tekan Enter atau Spasi untuk meletakkan. Tekan Escape untuk membatalkan.
Ghost dan ukuran sm
Tekan Enter atau Spasi untuk mengangkat item, gunakan tombol panah untuk memindahkan, lalu tekan Enter atau Spasi untuk meletakkan. Tekan Escape untuk membatalkan.
W4cTable memakai perilaku pengurutan yang sama melalui prop draggable dan v-model:rows. Contoh lengkapnya tersedia di halaman Table.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| modelValue | Record<string, unknown>[] | [] | Daftar terurut, mendukung v-model. |
| itemKey | string | (item, index) => string | number | 'id' | Properti atau fungsi yang menghasilkan kunci stabil item. |
| itemLabel | string | (item, index) => string | label, title, atau key | Nama item untuk tombol handle dan pengumuman pembaca layar. |
| itemDisabled | (item, index) => boolean | undefined | Mencegah item tertentu diangkat dan dipindahkan. |
| disabled | boolean | false | Menonaktifkan seluruh interaksi pengurutan. |
| size | 'sm' | 'md' | 'lg' | 'md' | Tinggi item, ruang dalam, dan ukuran handle. |
| variant | 'bordered' | 'separated' | 'ghost' | 'separated' | Susunan visual item. |
| handleLabel | string | 'Ubah urutan' | Awalan nama aksesibel tombol drag handle. |
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| item | { item, index, dragging } | — | Isi setiap item di samping handle. |
| handle | { item, index, dragging } | — | Mengganti ikon grip di dalam tombol handle. |
| Event | Tipe | Default | Keterangan |
|---|---|---|---|
| update:modelValue | (items) => void | — | Array baru setelah item selesai dipindahkan. |
| reorder | ({ item, oldIndex, newIndex, items }) => void | — | Detail perubahan urutan yang sudah disimpan. |
| dragStart | (item, index) => void | — | Dipicu ketika item diangkat. |
| dragEnd | (item, index, cancelled) => void | — | Dipicu ketika item diletakkan atau dibatalkan. |