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
71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { LinkItem, ListItemDto } from './types'
|
|
import { ActionEvents } from './types'
|
|
|
|
const props = defineProps<{
|
|
rec: ListItemDto
|
|
}>()
|
|
|
|
const recId = inject<Ref<number>>('rec_id')!
|
|
const recAction = inject<Ref<string>>('rec_action')!
|
|
const recItem = inject<Ref<any>>('rec_item')!
|
|
|
|
function detail() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showDetail
|
|
recItem.value = props.rec
|
|
}
|
|
|
|
function edit() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showEdit
|
|
recItem.value = props.rec
|
|
}
|
|
|
|
const linkItems: LinkItem[] = [
|
|
{
|
|
label: 'Detail',
|
|
onClick: () => {
|
|
detail()
|
|
},
|
|
icon: 'i-lucide-eye',
|
|
},
|
|
{
|
|
label: 'Edit',
|
|
onClick: () => {
|
|
edit()
|
|
},
|
|
icon: 'i-lucide-pencil',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
size="lg"
|
|
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
|
|
>
|
|
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
v-for="item in linkItems"
|
|
:key="item.label"
|
|
v-slot="{ active }"
|
|
class="hover:bg-gray-100"
|
|
@click="item.onClick"
|
|
>
|
|
<Icon :name="item.icon" />
|
|
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|