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
98 lines
3.5 KiB
Vue
98 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import type { DataTableLoader } from './type'
|
|
import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/custom-ui/data/types'
|
|
import { Info } from 'lucide-vue-next'
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
|
|
|
|
defineProps<{
|
|
rows: unknown[]
|
|
cols: Col[]
|
|
header: Th[][]
|
|
keys: string[]
|
|
funcParsed: RecStrFuncUnknown
|
|
funcHtml: RecStrFuncUnknown
|
|
funcComponent: RecStrFuncComponent
|
|
}>()
|
|
|
|
const loader = inject('table_data_loader') as DataTableLoader
|
|
|
|
function handleActionCellClick(event: Event, _cellRef: string) {
|
|
// Prevent event if clicked directly on the button/dropdown
|
|
const target = event.target as HTMLElement
|
|
if (target.closest('button') || target.closest('[role="button"]')) {
|
|
return
|
|
}
|
|
|
|
// Find the dropdown trigger button and click it
|
|
const cell = event.currentTarget as HTMLElement
|
|
const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
|
|
if (triggerButton) {
|
|
(triggerButton as HTMLButtonElement).click()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Table>
|
|
<TableHeader class="bg-gray-50">
|
|
<TableRow>
|
|
<TableHead
|
|
v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
|
|
:style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
|
|
>
|
|
{{ h.label }}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody v-if="loader.isTableLoading">
|
|
<!-- Loading state with 5 skeleton rows -->
|
|
<TableRow v-for="n in 5" :key="`skeleton-${n}`">
|
|
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
|
|
<Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
<TableBody v-else-if="rows.length === 0">
|
|
<TableRow>
|
|
<TableCell :colspan="keys.length" class="text-center py-8">
|
|
<div class="flex items-center justify-center">
|
|
<Info class="size-5 text-muted-foreground" />
|
|
<span class="ml-2">Tidak ada data tersedia</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
<TableBody v-else>
|
|
<TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
|
|
<TableCell
|
|
v-for="(key, cellIndex) in keys"
|
|
:key="`cell-${rowIndex}-${cellIndex}`"
|
|
class="border"
|
|
:class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
|
|
@click="key === 'action' && funcComponent[key] ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`) : null"
|
|
>
|
|
<!-- If funcComponent has a renderer -->
|
|
<component
|
|
:is="funcComponent[key]?.(row, rowIndex).component"
|
|
v-if="funcComponent[key]"
|
|
:ref="key === 'action' ? `actionComponent-${rowIndex}-${cellIndex}` : undefined"
|
|
:rec="row"
|
|
:idx="rowIndex"
|
|
v-bind="funcComponent[key]?.(row, rowIndex).props"
|
|
/>
|
|
<!-- If funcParsed or funcHtml returns a value -->
|
|
<template v-else>
|
|
<!-- Use v-html for funcHtml to render HTML content -->
|
|
<div v-if="funcHtml[key]" v-html="funcHtml[key]?.(row, rowIndex)"></div>
|
|
<!-- Use normal interpolation for funcParsed and regular data -->
|
|
<template v-else>
|
|
{{ funcParsed[key]?.(row, rowIndex) ?? (row as any)[key] }}
|
|
</template>
|
|
</template>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template>
|