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

app/components/pub/base/data-table/data-table.vue

@@ -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 -->

app/components/pub/custom-ui/form/field-group.vue

@@ -5,6 +5,7 @@ const props = withDefaults(
     density?: 'default' | 'dense'
     side?: 'default' | 'break'
     position?: 'default' | 'dynamic'
+    layout?: 'default' | 'stacked'
     class?: string
   }>(),
   {
@@ -12,25 +13,25 @@ const props = withDefaults(
     density: 'default',
     side: 'default',
     position: 'default',
+    layout: 'default',
     class: '',
   },
 )
 
-const wrapperClass = computed(() => [
-  'w-full flex-shrink-0',
+const widthClass = computed(() => {
+  if (props.column === 1) return 'md:w-full pe-4'
+  if (props.column === 2) return 'md:w-1/2 pe-4'
+  if (props.column === 3) return 'md:w-1/3 pe-4'
+  return 'w-full'
+})
 
-  props.column === 1 && props.side !== 'break' ? 'pe-4 md:w-1/1 ' : '',
-  props.column === 2 && props.side !== 'break' ? 'pe-4 md:w-1/2 my-3' : '',
-  props.column === 3 && props.side !== 'break' ? 'pe-4 md:w-1/3' : '',
-  props.column === 2 && props.side === 'break' ? 'md:w-1/2' : '',
-  props.column === 3 && props.side === 'break' ? 'md:w-1/3' : '',
+const wrapperClass = computed(() => [
+  'w-full flex-shrink-0 mb-3',
+  widthClass.value,
+
+  props.layout === 'stacked' ? 'flex flex-col p-2' : 'md:flex',
 
   props.density !== 'dense' ? 'mb-2 md:mb-2.5 xl:mb-3' : '',
-
-  props.side !== 'break' ? 'md:flex' : '',
-
-  props.position === 'dynamic' ? 'ps-4' : props.column > 1 ? 'pe-4' : '',
-
   props.class,
 ])
 </script>
@@ -40,5 +41,3 @@ const wrapperClass = computed(() => [
     <slot />
   </div>
 </template>
-
-<style scoped></style>

app/components/pub/custom-ui/form/label.vue

@@ -4,11 +4,13 @@ const props = withDefaults(
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
+    stacked?: boolean
   }>(),
   {
     size: 'default',
     height: 'default',
     position: 'default',
+    stacked: false,
   },
 )
 
@@ -35,12 +37,12 @@ const positionChildMap = {
 
 const wrapperClass = computed(() => [
   'block shrink-0',
-  sizeMap[props.size],
-  heightMap[props.height],
-  positionWrapMap[props.position],
+  props.stacked ? 'w-full mb-1 text-start' : sizeMap[props.size],
+  props.stacked ? '' : heightMap[props.height],
+  props.stacked ? '' : positionWrapMap[props.position],
 ])
 
-const labelClass = computed(() => positionChildMap[props.position])
+const labelClass = computed(() => [props.stacked ? 'block mb-1 text-sm font-medium' : positionChildMap[props.position]])
 </script>
 
 <template>