From d2a8a07a21a4943144bd990fdbfe645ea308ae7b Mon Sep 17 00:00:00 2001
From: henrycunh <henrycunh@gmail.com>
Date: Mon, 24 Jul 2023 14:36:58 -0300
Subject: [PATCH] feat(FormGroup): add `size` prop and theme options (#391)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/3.forms/9.form-group.md      | 26 +++++++++++++++++++++++
 src/runtime/app.config.ts                 | 20 +++++++++++------
 src/runtime/components/forms/FormGroup.ts | 18 +++++++++++++---
 3 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md
index aa32945ec7..b47d7a9291 100644
--- a/docs/content/3.forms/9.form-group.md
+++ b/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="you@example.com" icon="i-heroicons-envelope" />
+---
+
+#default
+:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"}
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 4aac4c6a94..5f9edd5267 100644
--- a/src/runtime/app.config.ts
+++ b/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 = {
diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts
index 65ac7ab108..75b6427903 100644
--- a/src/runtime/components/forms/FormGroup.ts
+++ b/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
       ])
     ])
   }