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
55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { Dialog } from '~/components/pub/ui/dialog'
|
|
|
|
interface DialogProps {
|
|
title: string
|
|
description?: string
|
|
preventOutside?: boolean
|
|
open?: boolean
|
|
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<DialogProps>(), {
|
|
preventOutside: false,
|
|
open: false,
|
|
size: 'md',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:open': [value: boolean]
|
|
}>()
|
|
|
|
// Computed untuk menentukan class size berdasarkan prop size
|
|
const sizeClass = computed(() => {
|
|
const sizeMap = {
|
|
sm: 'sm:max-w-[350px]',
|
|
md: 'sm:max-w-[425px]',
|
|
lg: 'sm:max-w-[600px]',
|
|
xl: 'sm:max-w-[800px]',
|
|
full: 'sm:max-w-[95vw]',
|
|
}
|
|
return sizeMap[props.size]
|
|
})
|
|
|
|
// Computed untuk state dialog
|
|
const isOpen = computed({
|
|
get: () => props.open,
|
|
set: (value) => emit('update:open', value),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="isOpen">
|
|
<DialogContent
|
|
:class="sizeClass" @interact-outside="(e: any) => preventOutside && e.preventDefault()"
|
|
@pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>{{ props.title }}</DialogTitle>
|
|
<DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
|
|
</DialogHeader>
|
|
<slot />
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|