feat (form): add stacked layout option for form fields

This commit is contained in:
Abizrh
2025-08-31 17:21:23 +07:00
parent f9af69fd27
commit f5209154ee
3 changed files with 28 additions and 24 deletions
@@ -21,9 +21,11 @@ const loader = inject('table_data_loader') as DataTableLoader
<TableHeader class="bg-gray-50">
<TableRow>
<TableHead
v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
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>
@@ -33,13 +35,13 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
<!-- 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" />
<Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground" />
</TableCell>
</TableRow>
</TableBody>
<TableBody v-else-if="rows.length === 0">
<TableRow>
<TableCell :colspan="keys.length" class="text-center py-8">
<TableCell :colspan="keys.length" class="py-8 text-center">
<div class="flex items-center justify-center">
<Info class="size-5 text-muted-foreground" />
<span class="ml-2">Tidak ada data tersedia</span>
@@ -52,9 +54,10 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
<TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
<!-- If funcComponent has a renderer -->
<component
:is="funcComponent[key](row, rowIndex).component" v-if="funcComponent[key]"
:is="funcComponent[key](row, rowIndex).component"
v-if="funcComponent[key]"
v-bind="funcComponent[key](row, rowIndex)"
/>
/>
<!-- If funcParsed or funcHtml returns a value -->
<template v-else>
<!-- Use v-html for funcHtml to render HTML content -->