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
100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
|
import { Button } from '~/components/pub/ui/button'
|
|
|
|
interface ConfirmationProps {
|
|
open?: boolean
|
|
title?: string
|
|
message?: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
variant?: 'default' | 'destructive' | 'warning'
|
|
size?: 'sm' | 'md' | 'lg' | 'xl'
|
|
}
|
|
|
|
interface ConfirmationEmits {
|
|
'update:open': [value: boolean]
|
|
'confirm': []
|
|
'cancel': []
|
|
}
|
|
|
|
const props = withDefaults(defineProps<ConfirmationProps>(), {
|
|
open: false,
|
|
title: 'Konfirmasi',
|
|
message: 'Apakah Anda yakin ingin melanjutkan?',
|
|
confirmText: 'Ya',
|
|
cancelText: 'Batal',
|
|
variant: 'default',
|
|
size: 'md',
|
|
})
|
|
|
|
const emit = defineEmits<ConfirmationEmits>()
|
|
|
|
const isOpen = computed({
|
|
get: () => props.open,
|
|
set: (value) => emit('update:open', value),
|
|
})
|
|
|
|
const variantClasses = computed(() => {
|
|
const variants = {
|
|
default: {
|
|
icon: 'i-lucide-help-circle',
|
|
iconColor: 'text-blue-500',
|
|
confirmVariant: 'default' as const,
|
|
},
|
|
destructive: {
|
|
icon: 'i-lucide-alert-triangle',
|
|
iconColor: 'text-red-500',
|
|
confirmVariant: 'destructive' as const,
|
|
},
|
|
warning: {
|
|
icon: 'i-lucide-alert-circle',
|
|
iconColor: 'text-yellow-500',
|
|
confirmVariant: 'default' as const,
|
|
},
|
|
}
|
|
return variants[props.variant]
|
|
})
|
|
|
|
function handleConfirm() {
|
|
emit('confirm')
|
|
emit('update:open', false)
|
|
}
|
|
|
|
function handleCancel() {
|
|
emit('cancel')
|
|
emit('update:open', false)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="isOpen" :title="title" :size="size">
|
|
<div class="space-y-4">
|
|
<!-- Icon dan pesan -->
|
|
<div class="flex items-start gap-3">
|
|
<div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
|
|
<div class="flex-1">
|
|
<p class="text-sm text-muted-foreground leading-relaxed">
|
|
{{ message }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slot untuk konten custom -->
|
|
<div v-if="$slots.default">
|
|
<slot />
|
|
</div>
|
|
|
|
<!-- Footer buttons -->
|
|
<div class="flex justify-end gap-3 pt-4">
|
|
<Button variant="outline" @click="handleCancel">
|
|
{{ cancelText }}
|
|
</Button>
|
|
<Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
|
|
{{ confirmText }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|