a9c286bd0a
feat(form): add accessibility improvements to form components - Add labelFor prop to Label component for better form element association - Enhance Combobox with ARIA attributes for better screen reader support - Update form fields with proper IDs and label associations feat(pagination): adjust button width based on page number length Add dynamic button sizing for pagination items to accommodate different digit lengths (1-99, 100-999, 1000+). This improves visual consistency when displaying varying page numbers. feat(modal): add reusable dialog component and refactor division form - Create new Dialog.vue component with configurable size and outside click prevention - Replace inline dialog implementation in division list with new Dialog component - Fix formatting in entry-form.vue feat(data-table): add click handling for action cells Implement handleActionCellClick function to manage click events on action cells, triggering dropdown buttons when clicked outside interactive elements. Add cursor-pointer class and click handler to action cells for better UX. refactor(custom-ui): centralize action event strings in types Replace hardcoded action event strings with constants from types.ts to improve maintainability and reduce potential typos feat(confirmation): add reusable confirmation modal components - Implement base confirmation.vue component with customizable props - Create record-specific record-confirmation.vue for data operations - Add comprehensive README.md documentation for usage - Integrate confirmation flow in division list component refactor(components): move dialog component to base directory and update imports The dialog component was moved from custom-ui/modal to base/modal to better reflect its shared usage across the application. All import paths referencing the old location have been updated accordingly. refactor(select): reorganize imports and adjust conditional formatting - Reorder imports in Select.vue for better organization - Adjust logical operator formatting in SelectContent.vue for consistency
Confirmation Modal Components
Sistem confirmation modal yang modular dan dapat digunakan kembali di seluruh aplikasi.
Components
1. confirmation.vue - Base Confirmation Modal
Komponen dasar untuk modal konfirmasi yang dapat dikustomisasi.
Props:
open?: boolean- Status modal (terbuka/tertutup)title?: string- Judul modal (default: "Konfirmasi")message?: string- Pesan konfirmasi (default: "Apakah Anda yakin ingin melanjutkan?")confirmText?: string- Text tombol konfirmasi (default: "Ya")cancelText?: string- Text tombol batal (default: "Batal")variant?: 'default' | 'destructive' | 'warning'- Varian tampilan (default: "default")size?: 'sm' | 'md' | 'lg' | 'xl'- Ukuran modal (default: "md")
Events:
@confirm- Dipanggil saat tombol konfirmasi diklik@cancel- Dipanggil saat tombol batal diklik@update:open- Dipanggil saat status modal berubah
Contoh penggunaan:
<template>
<Confirmation
v-model:open="isConfirmOpen"
title="Hapus Data"
message="Apakah Anda yakin ingin menghapus data ini?"
confirm-text="Hapus"
variant="destructive"
@confirm="handleConfirm"
@cancel="handleCancel"
/>
</template>
2. record-confirmation.vue - Record-specific Confirmation
Komponen khusus untuk konfirmasi operasi pada record/data tertentu.
Props:
open?: boolean- Status modalaction?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'- Jenis aksi (default: "delete")record?: RecordData | null- Data record yang akan diprosescustomTitle?: string- Custom judul (opsional)customMessage?: string- Custom pesan (opsional)customConfirmText?: string- Custom text tombol konfirmasi (opsional)customCancelText?: string- Custom text tombol batal (opsional)
Events:
@confirm- Dipanggil dengan parameter(record, action)@cancel- Dipanggil saat batal@update:open- Update status modal
Contoh penggunaan:
<template>
<RecordConfirmation
v-model:open="isRecordConfirmOpen"
action="delete"
:record="selectedRecord"
@confirm="handleDeleteRecord"
@cancel="handleCancel"
>
<template #default="{ record }">
<div class="text-sm">
<p><strong>ID:</strong> {{ record?.id }}</p>
<p><strong>Nama:</strong> {{ record?.name }}</p>
</div>
</template>
</RecordConfirmation>
</template>
Action Types
Record confirmation mendukung beberapa jenis aksi dengan konfigurasi default:
- delete: Hapus data (variant: destructive, warna merah)
- deactivate: Nonaktifkan data (variant: warning, warna kuning)
- activate: Aktifkan data (variant: default, warna biru)
- archive: Arsipkan data (variant: warning, warna kuning)
- restore: Pulihkan data (variant: default, warna biru)
Integration Example
Contoh implementasi di komponen list:
<script setup>
// State management
const isRecordConfirmationOpen = ref(false)
const selectedRecord = ref(null)
const confirmAction = ref('delete')
// Handle action dari table
function handleRowAction(action, record) {
selectedRecord.value = record
confirmAction.value = action
isRecordConfirmationOpen.value = true
}
// Handle konfirmasi
async function handleConfirmAction(record, action) {
try {
// API call berdasarkan action
await performAction(action, record.id)
// Refresh data
await refreshData()
} catch (error) {
// Handle error
}
}
</script>
<template>
<!-- Your list component -->
<DataTable @action="handleRowAction" />
<!-- Confirmation modal -->
<RecordConfirmation
v-model:open="isRecordConfirmationOpen"
:action="confirmAction"
:record="selectedRecord"
@confirm="handleConfirmAction"
/>
</template>
Styling
Komponen menggunakan Tailwind CSS dan shadcn/ui components. Pastikan dependencies berikut tersedia:
~/components/pub/custom-ui/modal/dialog.vue~/components/pub/ui/button