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
113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { cn } from '~/lib/utils'
|
|
|
|
interface Item {
|
|
value: string
|
|
label: string
|
|
code?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
id: string
|
|
modelValue?: string
|
|
items: Item[]
|
|
placeholder?: string
|
|
searchPlaceholder?: string
|
|
emptyMessage?: string
|
|
class?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
}>()
|
|
|
|
const open = ref(false)
|
|
|
|
const selectedItem = computed(() =>
|
|
props.items.find(item => item.value === props.modelValue),
|
|
)
|
|
|
|
const displayText = computed(() =>
|
|
selectedItem.value?.label || props.placeholder || '---pilih item',
|
|
)
|
|
|
|
// Create searchable items with combined code and label for better search
|
|
// Sort by:
|
|
// 1. Selected item first (highest priority)
|
|
// 2. Then by label alphabetically
|
|
const searchableItems = computed(() => {
|
|
const itemsWithSearch = props.items.map(item => ({
|
|
...item,
|
|
searchValue: `${item.code || ''} ${item.label}`.trim(),
|
|
isSelected: item.value === props.modelValue,
|
|
}))
|
|
|
|
return itemsWithSearch.sort((a, b) => {
|
|
// Selected item always comes first
|
|
if (a.isSelected && !b.isSelected) return -1
|
|
if (!a.isSelected && b.isSelected) return 1
|
|
|
|
// If neither or both are selected, sort by label alphabetically
|
|
return a.label.localeCompare(b.label)
|
|
})
|
|
})
|
|
|
|
function onSelect(item: Item) {
|
|
emit('update:modelValue', item.value)
|
|
open.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Popover v-model:open="open">
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
:id="props.id"
|
|
variant="outline"
|
|
role="combobox"
|
|
:aria-expanded="open"
|
|
:aria-controls="`${props.id}-list`"
|
|
:aria-describedby="`${props.id}-search`"
|
|
:class="cn(
|
|
'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
|
|
!modelValue && 'text-muted-foreground',
|
|
props.class,
|
|
)"
|
|
>
|
|
{{ displayText }}
|
|
<Icon name="i-lucide-chevrons-up-down" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-full p-0">
|
|
<Command>
|
|
<CommandInput
|
|
:id="`${props.id}-search`"
|
|
class="h-9"
|
|
:placeholder="searchPlaceholder || 'Cari...'"
|
|
:aria-label="`Cari ${displayText}`"
|
|
/>
|
|
<CommandEmpty>{{ emptyMessage || 'Item tidak ditemukan.' }}</CommandEmpty>
|
|
<CommandList :id="`${props.id}-list`" role="listbox">
|
|
<CommandGroup>
|
|
<CommandItem v-for="item in searchableItems" :key="item.value" :value="item.searchValue" @select="onSelect(item)">
|
|
<div class="flex items-center justify-between w-full">
|
|
<span>{{ item.label }}</span>
|
|
<div class="flex items-center gap-2">
|
|
<span v-if="item.code" class="text-xs text-muted-foreground">{{ item.code }}</span>
|
|
<Icon
|
|
name="i-lucide-check"
|
|
:class="cn(
|
|
'h-4 w-4',
|
|
modelValue === item.value ? 'opacity-100' : 'opacity-0',
|
|
)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|