dev: compact styling

app/components/pub/my-ui/form/input-base.vue

@@ -6,12 +6,15 @@ import Label from '~/components/pub/my-ui/form/label.vue'
 import { Input } from '~/components/pub/ui/input'
 import { cn } from '~/lib/utils'
 
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
 const props = defineProps<{
   fieldName: string
   placeholder: string
   label: string
   errors?: FormErrors
   class?: string
+  colSpan?: number
   numericOnly?: boolean
   maxLength?: number
   isRequired?: boolean
@@ -42,15 +45,15 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <FieldGroup>
-    <Label
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
     >
       {{ label }}
-    </Label>
-    <Field
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
     >
@@ -77,6 +80,6 @@ function handleInput(event: Event) {
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>