From 7eba5b539aed38df0ee3790763549f9ebe3ba0b1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 12 Feb 2024 11:59:13 +0100
Subject: [PATCH] chore(FormGroup): wrap `label` & `description` to ease
 styling

---
 src/runtime/components/forms/FormGroup.vue | 34 ++++++++++++----------
 src/runtime/ui.config/forms/formGroup.ts   |  3 +-
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/runtime/components/forms/FormGroup.vue b/src/runtime/components/forms/FormGroup.vue
index fcd74e82..720c01ed 100644
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -1,22 +1,24 @@
 <template>
   <div :class="ui.wrapper" v-bind="attrs">
-    <div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
-      <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
-        <slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
-        <template v-else>{{ label }}</template>
-      </label>
-      <span v-if="hint || $slots.hint" :class="[ui.hint]">
-        <slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
-        <template v-else>{{ hint }}</template>
-      </span>
-    </div>
+    <div :class="ui.inner">
+      <div v-if="label || $slots.label" :class="[ui.label.wrapper, size]">
+        <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">
+          <slot v-if="$slots.label" name="label" v-bind="{ error, label, name, hint, description, help }" />
+          <template v-else>{{ label }}</template>
+        </label>
+        <span v-if="hint || $slots.hint" :class="[ui.hint]">
+          <slot v-if="$slots.hint" name="hint" v-bind="{ error, label, name, hint, description, help }" />
+          <template v-else>{{ hint }}</template>
+        </span>
+      </div>
 
-    <p v-if="description || $slots.description" :class="[ui.description, size]">
-      <slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
-      <template v-else>
-        {{ description }}
-      </template>
-    </p>
+      <p v-if="description || $slots.description" :class="[ui.description, size]">
+        <slot v-if="$slots.description" name="description" v-bind="{ error, label, name, hint, description, help }" />
+        <template v-else>
+          {{ description }}
+        </template>
+      </p>
+    </div>
 
     <div :class="[label ? ui.container : '']">
       <slot v-bind="{ error }" />
diff --git a/src/runtime/ui.config/forms/formGroup.ts b/src/runtime/ui.config/forms/formGroup.ts
index 4e3e3f5a..e9d10cdb 100644
--- a/src/runtime/ui.config/forms/formGroup.ts
+++ b/src/runtime/ui.config/forms/formGroup.ts
@@ -1,5 +1,6 @@
 export default {
   wrapper: '',
+  inner: '',
   label: {
     wrapper: 'flex content-center items-center justify-between',
     base: 'block font-medium text-gray-700 dark:text-gray-200',
@@ -22,4 +23,4 @@ export default {
   default: {
     size: 'sm'
   }
-}
\ No newline at end of file
+}