dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui - droped pub/custom-ui
2025-10-05 09:45:17 +07:00
parent 72627b8a37
commit 2da4e616ba
219 changed files with 474 additions and 474 deletions
@@ -0,0 +1,137 @@
+# 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:**
+```vue
+<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 modal
+- `action?: 'delete' | 'deactivate' | 'activate' | 'archive' | 'restore'` - Jenis aksi (default: "delete")
+- `record?: RecordData | null` - Data record yang akan diproses
+- `customTitle?: 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:**
+```vue
+<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:
+
+```vue
+<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/my-ui/modal/dialog.vue`
+- `~/components/pub/ui/button`