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
57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
|
|
import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
|
|
import {
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectSeparator,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '~/components/pub/ui/select'
|
|
|
|
interface Item {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
const props = defineProps<
|
|
SelectRootProps & {
|
|
items: Item[]
|
|
placeholder?: string
|
|
label?: string
|
|
separator?: boolean
|
|
}
|
|
>()
|
|
const emits = defineEmits<SelectRootEmits>()
|
|
|
|
const forwarded = useForwardPropsEmits(props, emits)
|
|
</script>
|
|
|
|
<template>
|
|
<SelectRoot v-bind="forwarded">
|
|
<SelectTrigger class="">
|
|
<SelectValue :placeholder="placeholder" />
|
|
</SelectTrigger>
|
|
|
|
<SelectContent class="rounded border bg-white">
|
|
<SelectGroup>
|
|
<SelectLabel v-if="label" class="px-2 py-1 text-sm font-semibold">
|
|
{{ label }}
|
|
</SelectLabel>
|
|
|
|
<SelectItem
|
|
v-for="item in items"
|
|
:key="item.value"
|
|
:value="item.value"
|
|
class="cursor-pointer px-2 py-1 hover:bg-gray-100"
|
|
>
|
|
{{ item.label }}
|
|
</SelectItem>
|
|
|
|
<SelectSeparator v-if="separator" class="my-1 h-px bg-gray-200" />
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</SelectRoot>
|
|
</template>
|