feat(FormGroup): add size prop and theme options (#391)

Co-authored-by: Benjamin Canac <[email protected]>

docs/content/3.forms/9.form-group.md

@@ -134,6 +134,32 @@ You can also use the `error` prop as a boolean to mark the form element as inval
   The `error` prop will automatically set the `color` prop of the form element to `red`.
 ::
 
+### Size
+
+Use the `size` prop to change the size of the label and the form element.
+
+::component-card
+---
+props:
+  size: 'xl'
+  label: 'Email'
+  hint: 'Optional'
+  description: "We'll only use this for spam."
+  help: 'We will never share your email with anyone else.'
+excludedProps:
+  - label
+  - hint
+  - description
+  - help
+code: >-
+
+  <UInput placeholder="[email protected]" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="[email protected]" icon="i-heroicons-envelope"}
+::
+
 ## Props
 
 :component-props

src/runtime/app.config.ts

@@ -407,15 +407,23 @@ const input = {
 const formGroup = {
   wrapper: '',
   label: {
-    wrapper: 'flex content-center justify-between',
-    base: 'block text-sm font-medium text-gray-700 dark:text-gray-200',
+    wrapper: 'flex content-center items-center justify-between',
+    base: 'block font-medium text-gray-700 dark:text-gray-200',
     required: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
   },
-  description: 'text-sm text-gray-500 dark:text-gray-400',
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
   container: 'mt-1 relative',
-  hint: 'text-sm text-gray-500 dark:text-gray-400',
-  help: 'mt-2 text-sm text-gray-500 dark:text-gray-400',
-  error: 'mt-2 text-sm text-red-500 dark:text-red-400'
+  description: 'text-gray-500 dark:text-gray-400',
+  hint: 'text-gray-500 dark:text-gray-400',
+  help: 'mt-2 text-gray-500 dark:text-gray-400',
+  error: 'mt-2 text-red-500 dark:text-red-400'
 }
 
 const textarea = {

src/runtime/components/forms/FormGroup.ts

@@ -15,6 +15,13 @@ export default defineComponent({
       type: String,
       default: null
     },
+    size: {
+      type: String,
+      default: () => appConfig.ui.input.default.size,
+      validator (value: string) {
+        return Object.keys(appConfig.ui.formGroup.size).includes(value)
+      }
+    },
     label: {
       type: String,
       default: null
@@ -66,18 +73,23 @@ export default defineComponent({
         vProps.name = props.name
       }
 
+      if (props.size) {
+        vProps.size = props.size
+      }
+
       return cloneVNode(node, vProps)
     }))
 
     return () => h('div', { class: [ui.value.wrapper] }, [
-      props.label && h('div', { class: [ui.value.label.wrapper] }, [
+      props.label && h('div', { class: [ui.value.label.wrapper, ui.value.size[props.size]] }, [
         h('label', { for: props.name, class: [ui.value.label.base, props.required && ui.value.label.required] }, props.label),
         props.hint && h('span', { class: [ui.value.hint] }, props.hint)
       ]),
-      props.description && h('p', { class: [ui.value.description] }, props.description),
+      props.description && h('p', { class: [ui.value.description, ui.value.size[props.size]
+      ] }, props.description),
       h('div', { class: [!!props.label && ui.value.container] }, [
         ...clones.value,
-        props.error && typeof props.error === 'string' ? h('p', { class: [ui.value.error] }, props.error) : props.help ? h('p', { class: [ui.value.help] }, props.help) : null
+        props.error && typeof props.error === 'string' ? h('p', { class: [ui.value.error, ui.value.size[props.size]] }, props.error) : props.help ? h('p', { class: [ui.value.help, ui.value.size[props.size]] }, props.help) : null
       ])
     ])
   }