Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Form): return state on validate #472

Merged
merged 4 commits into from
Aug 1, 2023
Merged

fix(Form): return state on validate #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f9d7722
fix(Form): return state on validate
romhml Jul 31, 2023
676fe3b
docs(Form): fixed vuelidate example
romhml Jul 31, 2023
fdaaa3c
docs(Form): fixed yup, zod and joi examples
romhml Jul 31, 2023
131d821
docs(Form): fixed duplicate id warnings
romhml Aug 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/components/content/examples/FormExampleJoi.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { ref } from 'vue'
import Joi from 'joi'

const schema = Joi.object({
email: Joi.string().required(),
password: Joi.string()
emailJoi: Joi.string().required(),
passwordJoi: Joi.string()
.min(8)
.required()
})
Expand All @@ -29,11 +29,11 @@ async function submit () {
:state="state"
@submit.prevent="submit"
>
<UFormGroup label="Email" name="email-joi">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, I see the issue. I've updated this because it throws some duplicate ids warnings in the console.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok! Let's update the schema path then!

Copy link
Collaborator Author

@romhml romhml Aug 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked into it, is it necessary to bind the name props to id on inputs?
https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Input.vue#L4

Copy link
Member

@benjamincanac benjamincanac Aug 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, it was just a shortcut to write less code. But removing it would cause a breaking change though.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry, the id is here to be targeted by the FormGroup component through <label for="..." />, we can't remove it..

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What can we do to fix this quickly? I plan to release the 2.7.0 today.

Copy link
Collaborator Author

@romhml romhml Aug 1, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed the name attributes in the examples, should be good enough for now

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh sorry, the id is here to be targeted by the FormGroup component through , we can't remove it..

Could you send me a link to the code?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes

<UFormGroup label="Email" name="emailJoi">
<UInput v-model="state.email" />
</UFormGroup>

<UFormGroup label="Password" name="password-joi">
<UFormGroup label="Password" name="passwordJoi">
<UInput v-model="state.password" type="password" />
</UFormGroup>

Expand Down
8 changes: 4 additions & 4 deletions docs/components/content/examples/FormExampleYup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { object, string, InferType } from 'yup'
import type { Form } from '@nuxthq/ui/dist/runtime/types'

const schema = object({
email: string().email('Invalid email').required('Required'),
password: string()
emailYup: string().email('Invalid email').required('Required'),
passwordYup: string()
.min(8, 'Must be at least 8 characters')
.required('Required')
})
Expand All @@ -32,11 +32,11 @@ async function submit () {
:state="state"
@submit.prevent="submit"
>
<UFormGroup label="Email" name="email-yup">
<UFormGroup label="Email" name="emailYup">
<UInput v-model="state.email" />
</UFormGroup>

<UFormGroup label="Password" name="password-yup">
<UFormGroup label="Password" name="passwordYup">
<UInput v-model="state.password" type="password" />
</UFormGroup>

Expand Down
8 changes: 4 additions & 4 deletions docs/components/content/examples/FormExampleZod.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { z } from 'zod'
import type { Form } from '@nuxthq/ui/dist/runtime/types'

const schema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'Must be at least 8 characters')
emailZod: z.string().email('Invalid email'),
passwordZod: z.string().min(8, 'Must be at least 8 characters')
})

type Schema = z.output<typeof schema>
Expand All @@ -30,11 +30,11 @@ async function submit () {
:state="state"
@submit.prevent="submit"
>
<UFormGroup label="Email" name="email-zod">
<UFormGroup label="Email" name="emailZod">
<UInput v-model="state.email" />
</UFormGroup>

<UFormGroup label="Password" name="password-zod">
<UFormGroup label="Password" name="passwordZod">
<UInput v-model="state.password" type="password" />
</UFormGroup>

Expand Down
6 changes: 1 addition & 5 deletions docs/content/3.forms/10.form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,11 +301,7 @@ defineExpose({
</script>

<template>
<UForm
ref="form"
:model="model"
@validate="validateWithVuelidate"
>
<UForm ref="form" :model="model" :validate="validateWithVuelidate">
<slot />
</UForm>
</template>
Expand Down
2 changes: 2 additions & 0 deletions src/runtime/components/forms/Form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ export default defineComponent({
`Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
)
}

return props.state
}

expose({
Expand Down