arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 23:40:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
docs/content/3.forms/10.form.md
View File

@@ -17,54 +17,7 @@ The Form component requires the `validate` and `state` props for form validation
- `message` - the error message to display.
- `path` - the path to the form element matching the `name`.
::component-example
#default
:form-example-basic{class="space-y-4 w-60"}
#code
```vue
<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const state = reactive({
email: undefined,
password: undefined
})
const validate = (state: any): FormError[] => {
const errors = []
if (!state.email) errors.push({ path: 'email', message: 'Required' })
if (!state.password) errors.push({ path: 'password', message: 'Required' })
return errors
}
async function submit (event: FormSubmitEvent<any>) {
// Do something with data
console.log(event.data)
}
</script>
<template>
<UForm
:validate="validate"
:state="state"
@submit="submit"
>
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>
```
::
:component-example{component="form-example-basic" :componentProps='{"class": "space-y-4 w-60"}'}
## Schema
@@ -72,213 +25,20 @@ You can provide a schema from [Yup](#yup), [Zod](#zod) or [Joi](#joi), [Valibot]
### Yup
::component-example
#default
:form-example-yup{class="space-y-4 w-60"}
#code
```vue
<script setup lang="ts">
import { object, string, InferType } from 'yup'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = object({
email: string().email('Invalid email').required('Required'),
password: string()
.min(8, 'Must be at least 8 characters')
.required('Required')
})
type Schema = InferType<typeof schema>
const state = reactive({
email: undefined,
password: undefined
})
async function submit (event: FormSubmitEvent<Schema>) {
// Do something with event.data
console.log(event.data)
}
</script>
<template>
<UForm
:schema="schema"
:state="state"
@submit="submit"
>
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>
```
::
:component-example{component="form-example-yup" :componentProps='{"class": "space-y-4 w-60"}'}
### Zod
::component-example
#default
:form-example-zod{class="space-y-4 w-60"}
#code
```vue
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '@nuxt/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')
})
type Schema = z.output<typeof schema>
const state = reactive({
email: undefined,
password: undefined
})
async function submit (event: FormSubmitEvent<Schema>) {
// Do something with data
console.log(event.data)
}
</script>
<template>
<UForm
:schema="schema"
:state="state"
@submit="submit"
>
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>
```
::
:component-example{component="form-example-zod" :componentProps='{"class": "space-y-4 w-60"}'}
### Joi
::component-example
#default
:form-example-joi{class="space-y-4 w-60"}
:component-example{component="form-example-joi" :componentProps='{"class": "space-y-4 w-60"}'}
#code
```vue
<script setup lang="ts">
import Joi from 'joi'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = Joi.object({
email: Joi.string().required(),
password: Joi.string()
.min(8)
.required()
})
const state = reactive({
email: undefined,
password: undefined
})
async function submit (event: FormSubmitEvent<any>) {
// Do something with event.data
console.log(event.data)
}
</script>
<template>
<UForm
:schema="schema"
:state="state"
@submit="submit"
>
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>
```
::
### Valibot
::component-example
#default
:form-example-valibot{class="space-y-4 w-60"}
#code
```vue
<script setup lang="ts">
import { string, object, email, minLength, Input } from 'valibot'
import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
const schema = object({
email: string([email('Invalid email')]),
password: string([minLength(8, 'Must be at least 8 characters')])
})
type Schema = Input<typeof schema>
const state = reactive({
email: undefined,
password: undefined
})
async function submit (event: FormSubmitEvent<Schema>) {
// Do something with event.data
console.log(event.data)
}
</script>
<template>
<UForm
:schema="schema"
:state="state"
@submit="submit"
>
<UFormGroup label="Email" name="email">
<UInput v-model="state.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormGroup>
<UButton type="submit">
Submit
</UButton>
</UForm>
</template>
```
::
:component-example{component="form-example-valibot" :componentProps='{"class": "space-y-4 w-60"}'}
## Other libraries
@@ -372,10 +132,7 @@ async function submit (event: FormSubmitEvent<any>) {
The Form component automatically triggers validation upon `submit`, `input`, `blur` or `change` events. This ensures that any errors are displayed as soon as the user interacts with the form elements. You can control when validation happens this using the `validate-on` prop.
::component-example
#default
:form-example-elements{class="space-y-4 w-60"}
::
:component-example{component="form-example-elements" :componentProps='{"class": "space-y-4 w-60"}' hiddenCode }
::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/FormExampleElements.vue"}
Take a look at the component!