Khafid Prayoga
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
54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
labelFor: string
|
|
size?: 'default' | 'narrow' | 'wide'
|
|
height?: 'default' | 'compact'
|
|
position?: 'default' | 'dynamic'
|
|
}>(),
|
|
{
|
|
size: 'default',
|
|
height: 'default',
|
|
position: 'default',
|
|
},
|
|
)
|
|
|
|
const sizeMap = {
|
|
default: 'w-28 2xl:w-36',
|
|
narrow: 'w-24 2xl:w-28',
|
|
wide: 'w-44 2xl:w-48',
|
|
} as const
|
|
|
|
const heightMap = {
|
|
default: 'pt-2 2xl:pt-2.5',
|
|
compact: 'leading-[14pt]',
|
|
} as const
|
|
|
|
const positionWrapMap = {
|
|
default: 'pe-2 text-start',
|
|
dynamic: 'md:text-end',
|
|
} as const
|
|
|
|
const positionChildMap = {
|
|
default: '',
|
|
dynamic: 'block pe-2.5',
|
|
} as const
|
|
|
|
const wrapperClass = computed(() => [
|
|
'block shrink-0',
|
|
sizeMap[props.size],
|
|
heightMap[props.height],
|
|
positionWrapMap[props.position],
|
|
])
|
|
|
|
const labelClass = computed(() => positionChildMap[props.position])
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="wrapperClass">
|
|
<label :class="labelClass" :for="labelFor">
|
|
<slot />
|
|
</label>
|
|
</div>
|
|
</template>
|