✨ feat (form): add stacked layout option for form fields
This commit is contained in:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user