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

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>