From 7c9a1f591e1f1c36d3770f68fedd47d27a4f24a3 Mon Sep 17 00:00:00 2001 From: henrycunh Date: Thu, 6 Jul 2023 18:45:25 -0300 Subject: [PATCH 1/5] feat(form-group): add `size` prop and theme options --- docs/content/3.forms/9.form-group.md | 19 +++++++++++++++++++ src/runtime/app.config.ts | 20 ++++++++++++++------ src/runtime/components/forms/FormGroup.ts | 13 ++++++++++--- 3 files changed, 43 insertions(+), 9 deletions(-) diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md index 7a592d3545..35aef177eb 100644 --- a/docs/content/3.forms/9.form-group.md +++ b/docs/content/3.forms/9.form-group.md @@ -132,6 +132,25 @@ 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.' +code: >- + + +--- + +#default +:u-input{placeholder="you@example.com" icon="i-heroicons-envelope" size="xl"} +:: ## Props :component-props diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts index 306542330f..a445b1931a 100644 --- a/src/runtime/app.config.ts +++ b/src/runtime/app.config.ts @@ -406,15 +406,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-centerc 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' + }, + description: 'text-gray-500 dark:text-gray-400', 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' + 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..70960ef21c 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.button.default.size, + validator (value: string) { + return Object.keys(appConfig.ui.button.size).includes(value) + } + }, label: { type: String, default: null @@ -70,12 +77,12 @@ export default defineComponent({ })) 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), - h('div', { class: [!!props.label && ui.value.container] }, [ + props.description && h('p', { class: [ui.value.description, ui.value.size[props.size]] }, props.description), + h('div', { class: [!!props.label && ui.value.container, ui.value.size[props.size]] }, [ ...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 ]) From 83056f3500c3be49d2d190897c3a0345acaaacae Mon Sep 17 00:00:00 2001 From: henrycunh Date: Thu, 6 Jul 2023 21:33:37 -0300 Subject: [PATCH 2/5] fix(form-group): correct typo and wrong appConfig references --- src/runtime/app.config.ts | 2 +- src/runtime/components/forms/FormGroup.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts index a445b1931a..d46a772155 100644 --- a/src/runtime/app.config.ts +++ b/src/runtime/app.config.ts @@ -406,7 +406,7 @@ const input = { const formGroup = { wrapper: '', label: { - wrapper: 'flex content-centerc items-center justify-between', + 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' }, diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts index 70960ef21c..a21ed41bca 100644 --- a/src/runtime/components/forms/FormGroup.ts +++ b/src/runtime/components/forms/FormGroup.ts @@ -17,9 +17,9 @@ export default defineComponent({ }, size: { type: String, - default: () => appConfig.ui.button.default.size, + default: () => appConfig.ui.input.default.size, validator (value: string) { - return Object.keys(appConfig.ui.button.size).includes(value) + return Object.keys(appConfig.ui.formGroup.size).includes(value) } }, label: { @@ -81,7 +81,8 @@ export default defineComponent({ 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, ui.value.size[props.size]] }, 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, ui.value.size[props.size]] }, [ ...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 From 1d31c7ffc0d33f79f88b1ca0d03c8f7a48474810 Mon Sep 17 00:00:00 2001 From: henrycunh Date: Tue, 11 Jul 2023 20:18:51 -0300 Subject: [PATCH 3/5] feat: pass down size to input and improve documentation --- docs/content/3.forms/9.form-group.md | 5 +++++ src/runtime/components/forms/FormGroup.ts | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md index 35aef177eb..7ba4ef6d35 100644 --- a/docs/content/3.forms/9.form-group.md +++ b/docs/content/3.forms/9.form-group.md @@ -143,6 +143,11 @@ props: 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: >- diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts index a21ed41bca..12ebdd43b7 100644 --- a/src/runtime/components/forms/FormGroup.ts +++ b/src/runtime/components/forms/FormGroup.ts @@ -73,6 +73,10 @@ export default defineComponent({ vProps.name = props.name } + if (props.size) { + vProps.size = props.size + } + return cloneVNode(node, vProps) })) From e2859c82f0f2c51f4cc3300dcb43c300530d85fe Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 20 Jul 2023 12:17:01 +0200 Subject: [PATCH 4/5] up --- docs/content/3.forms/9.form-group.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md index 6d87ac51dd..b47d7a9291 100644 --- a/docs/content/3.forms/9.form-group.md +++ b/docs/content/3.forms/9.form-group.md @@ -135,6 +135,7 @@ You can also use the `error` prop as a boolean to mark the form element as inval :: ### Size + Use the `size` prop to change the size of the label and the form element. ::component-card @@ -152,12 +153,13 @@ excludedProps: - help code: >- - + --- #default -:u-input{placeholder="you@example.com" icon="i-heroicons-envelope" size="xl"} +:u-input{placeholder="you@example.com" icon="i-heroicons-envelope"} :: + ## Props :component-props From bc75909ccb8bd6101d10fca0e126bd8aeb0e6ffb Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 20 Jul 2023 12:20:18 +0200 Subject: [PATCH 5/5] up --- src/runtime/app.config.ts | 2 +- src/runtime/components/forms/FormGroup.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts index 1e40dac3a4..5f9edd5267 100644 --- a/src/runtime/app.config.ts +++ b/src/runtime/app.config.ts @@ -419,8 +419,8 @@ const formGroup = { lg: 'text-sm', xl: 'text-base' }, - description: 'text-gray-500 dark:text-gray-400', container: 'mt-1 relative', + 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' diff --git a/src/runtime/components/forms/FormGroup.ts b/src/runtime/components/forms/FormGroup.ts index 12ebdd43b7..75b6427903 100644 --- a/src/runtime/components/forms/FormGroup.ts +++ b/src/runtime/components/forms/FormGroup.ts @@ -87,9 +87,9 @@ export default defineComponent({ ]), props.description && h('p', { class: [ui.value.description, ui.value.size[props.size] ] }, props.description), - h('div', { class: [!!props.label && ui.value.container, ui.value.size[props.size]] }, [ + 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 ]) ]) }