mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-23 16:30:45 +01:00
feat(playground): update form examples
This commit is contained in:
Romain Hamel
@@ -73,15 +73,15 @@ async function onSubmit(event: FormSubmitEvent<any>) {
|
|||||||
</UFormField>
|
</UFormField>
|
||||||
|
|
||||||
<UFormField name="select" label="Select">
|
<UFormField name="select" label="Select">
|
||||||
<USelect v-model="state.select" :items="items" />
|
<USelect v-model="state.select" :items="items" class="w-48" />
|
||||||
</UFormField>
|
</UFormField>
|
||||||
|
|
||||||
<UFormField name="selectMenu" label="Select Menu">
|
<UFormField name="selectMenu" label="Select Menu">
|
||||||
<USelectMenu v-model="state.selectMenu" :items="items" />
|
<USelectMenu v-model="state.selectMenu" :items="items" class="w-48" />
|
||||||
</UFormField>
|
</UFormField>
|
||||||
|
|
||||||
<UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
|
<UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
|
||||||
<USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" />
|
<USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-48" />
|
||||||
</UFormField>
|
</UFormField>
|
||||||
|
|
||||||
<UFormField name="inputMenu" label="Input Menu">
|
<UFormField name="inputMenu" label="Input Menu">
|
||||||
@@ -104,11 +104,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-2 mt-8">
|
<div class="flex gap-2 mt-8">
|
||||||
<UButton color="neutral" type="submit">
|
<UButton type="submit">
|
||||||
Submit
|
Submit
|
||||||
</UButton>
|
</UButton>
|
||||||
|
|
||||||
<UButton color="neutral" variant="outline" @click="form?.clear()">
|
<UButton variant="outline" @click="form?.clear()">
|
||||||
Clear
|
Clear
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,108 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
input: z.string().min(10),
|
|
||||||
inputMenu: z.any().refine(option => option?.value === 'option-2', {
|
|
||||||
message: 'Select Option 2'
|
|
||||||
}),
|
|
||||||
inputMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
|
|
||||||
message: 'Include Option 2'
|
|
||||||
}),
|
|
||||||
textarea: z.string().min(10),
|
|
||||||
select: z.string().refine(value => value === 'option-2', {
|
|
||||||
message: 'Select Option 2'
|
|
||||||
}),
|
|
||||||
selectMenu: z.any().refine(option => option?.value === 'option-2', {
|
|
||||||
message: 'Select Option 2'
|
|
||||||
}),
|
|
||||||
selectMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
|
|
||||||
message: 'Include Option 2'
|
|
||||||
}),
|
|
||||||
switch: z.boolean().refine(value => value === true, {
|
|
||||||
message: 'Toggle me'
|
|
||||||
}),
|
|
||||||
checkbox: z.boolean().refine(value => value === true, {
|
|
||||||
message: 'Check me'
|
|
||||||
}),
|
|
||||||
radioGroup: z.string().refine(value => value === 'option-2', {
|
|
||||||
message: 'Select Option 2'
|
|
||||||
}),
|
|
||||||
slider: z.number().max(20, { message: 'Must be less than 20' })
|
|
||||||
})
|
|
||||||
|
|
||||||
type Schema = z.input<typeof schema>
|
|
||||||
|
|
||||||
const state = reactive<Partial<Schema>>({})
|
|
||||||
|
|
||||||
const form = useTemplateRef('form')
|
|
||||||
|
|
||||||
const items = [
|
|
||||||
{ label: 'Option 1', value: 'option-1' },
|
|
||||||
{ label: 'Option 2', value: 'option-2' },
|
|
||||||
{ label: 'Option 3', value: 'option-3' }
|
|
||||||
]
|
|
||||||
|
|
||||||
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
||||||
console.log(event.data)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UForm ref="form" :state="state" :schema="schema" class="gap-4 flex flex-col w-60" @submit="onSubmit">
|
|
||||||
<UFormField label="Input" name="input">
|
|
||||||
<UInput v-model="state.input" placeholder="john@lennon.com" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField label="Textarea" name="textarea">
|
|
||||||
<UTextarea v-model="state.textarea" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="select" label="Select">
|
|
||||||
<USelect v-model="state.select" class="w-44" :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="selectMenu" label="Select Menu">
|
|
||||||
<USelectMenu v-model="state.selectMenu" class="w-44" :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
|
|
||||||
<USelectMenu v-model="state.selectMenuMultiple" class="w-44" multiple :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="inputMenu" label="Input Menu">
|
|
||||||
<UInputMenu v-model="state.inputMenu" :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="inputMenuMultiple" label="Input Menu (Multiple)">
|
|
||||||
<UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="checkbox">
|
|
||||||
<UCheckbox v-model="state.checkbox" label="Check me" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="radioGroup">
|
|
||||||
<URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="switch">
|
|
||||||
<USwitch v-model="state.switch" label="Switch me" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField name="slider" label="Slider">
|
|
||||||
<USlider v-model="state.slider" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<UButton color="neutral" type="submit">
|
|
||||||
Submit
|
|
||||||
</UButton>
|
|
||||||
|
|
||||||
<UButton color="neutral" variant="outline" @click="form?.clear()">
|
|
||||||
Clear
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
</template>
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
email: z.string().min(2),
|
|
||||||
password: z.string().min(8)
|
|
||||||
})
|
|
||||||
|
|
||||||
type Schema = z.output<typeof schema>
|
|
||||||
|
|
||||||
const nestedSchema = z.object({
|
|
||||||
phone: z.string().length(10)
|
|
||||||
})
|
|
||||||
|
|
||||||
type NestedSchema = z.output<typeof nestedSchema>
|
|
||||||
|
|
||||||
const state = reactive<Partial<Schema & { nested: Partial<NestedSchema> }>>({
|
|
||||||
nested: {}
|
|
||||||
})
|
|
||||||
|
|
||||||
const checked = ref(false)
|
|
||||||
|
|
||||||
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
||||||
console.log('Success', event.data)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onError(event: any) {
|
|
||||||
console.log('Error', event)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UForm
|
|
||||||
:state="state"
|
|
||||||
:schema="schema"
|
|
||||||
class="gap-4 flex flex-col w-60"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@error="onError"
|
|
||||||
>
|
|
||||||
<UFormField label="Email" name="email">
|
|
||||||
<UInput v-model="state.email" placeholder="john@lennon.com" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField label="Password" name="password">
|
|
||||||
<UInput v-model="state.password" type="password" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<UCheckbox v-model="checked" name="check" label="Check me" @change="state.nested = {}" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UForm v-if="checked && state.nested" :state="state.nested" :schema="nestedSchema">
|
|
||||||
<UFormField label="Phone" name="phone">
|
|
||||||
<UInput v-model="state.nested.phone" />
|
|
||||||
</UFormField>
|
|
||||||
</UForm>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<UButton color="neutral" type="submit">
|
|
||||||
Submit
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
</template>
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { z } from 'zod'
|
|
||||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
||||||
|
|
||||||
const schema = z.object({
|
|
||||||
email: z.string().min(2),
|
|
||||||
password: z.string().min(8)
|
|
||||||
})
|
|
||||||
|
|
||||||
type Schema = z.output<typeof schema>
|
|
||||||
|
|
||||||
const itemSchema = z.object({
|
|
||||||
name: z.string().min(1),
|
|
||||||
price: z.string().min(1)
|
|
||||||
})
|
|
||||||
|
|
||||||
type ItemSchema = z.output<typeof itemSchema>
|
|
||||||
|
|
||||||
const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({})
|
|
||||||
|
|
||||||
function addItem() {
|
|
||||||
if (!state.items) {
|
|
||||||
state.items = []
|
|
||||||
}
|
|
||||||
state.items.push({})
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeItem() {
|
|
||||||
if (state.items) {
|
|
||||||
state.items.pop()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
||||||
console.log('Success', event.data)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onError(event: any) {
|
|
||||||
console.log('Error', event)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<UForm
|
|
||||||
:state="state"
|
|
||||||
:schema="schema"
|
|
||||||
class="gap-4 flex flex-col w-60"
|
|
||||||
@submit="onSubmit"
|
|
||||||
@error="onError"
|
|
||||||
>
|
|
||||||
<UFormField label="Email" name="email">
|
|
||||||
<UInput v-model="state.email" placeholder="john@lennon.com" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField label="Password" name="password">
|
|
||||||
<UInput v-model="state.password" type="password" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
|
|
||||||
<UFormField label="Name" name="name">
|
|
||||||
<UInput v-model="item.name" />
|
|
||||||
</UFormField>
|
|
||||||
<UFormField label="Price" name="price">
|
|
||||||
<UInput v-model="item.price" />
|
|
||||||
</UFormField>
|
|
||||||
</UForm>
|
|
||||||
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<UButton color="neutral" variant="subtle" size="sm" @click="addItem()">
|
|
||||||
Add Item
|
|
||||||
</UButton>
|
|
||||||
|
|
||||||
<UButton color="neutral" variant="ghost" size="sm" @click="removeItem()">
|
|
||||||
Remove Item
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<UButton color="neutral" type="submit">
|
|
||||||
Submit
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
</template>
|
|
||||||
@@ -1,6 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||||
|
import FormExampleElements from '../../../../docs/app/components/content/examples/form/FormExampleElements.vue'
|
||||||
|
import FormExampleNestedList from '../../../../docs/app/components/content/examples/form/FormExampleNestedList.vue'
|
||||||
|
import FormExampleNested from '../../../../docs/app/components/content/examples/form/FormExampleNested.vue'
|
||||||
|
|
||||||
const schema = z.object({
|
const schema = z.object({
|
||||||
email: z.string().email(),
|
email: z.string().email(),
|
||||||
@@ -8,18 +11,20 @@ const schema = z.object({
|
|||||||
tos: z.literal(true)
|
tos: z.literal(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
type Schema = z.output<typeof schema>
|
type Schema = z.input<typeof schema>
|
||||||
|
|
||||||
const state = reactive<Partial<Schema>>({})
|
const state = reactive<Partial<Schema>>({})
|
||||||
const state2 = reactive<Partial<Schema>>({})
|
|
||||||
|
|
||||||
function onSubmit(event: FormSubmitEvent<Schema>) {
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
||||||
console.log(event.data)
|
console.log(event.data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const validateOn = ref(['input', 'change', 'blur'])
|
||||||
|
const disabled = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-8">
|
||||||
<div class="flex gap-4">
|
<div class="flex gap-4">
|
||||||
<UForm
|
<UForm
|
||||||
:state="state"
|
:state="state"
|
||||||
@@ -40,75 +45,24 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
|
|||||||
</UFormField>
|
</UFormField>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<UButton color="neutral" type="submit">
|
<UButton type="submit">
|
||||||
Submit
|
Submit
|
||||||
</UButton>
|
</UButton>
|
||||||
</div>
|
</div>
|
||||||
</UForm>
|
</UForm>
|
||||||
|
<FormExampleNested />
|
||||||
<UForm
|
<FormExampleNestedList />
|
||||||
:state="state2"
|
|
||||||
:schema="schema"
|
|
||||||
class="gap-4 flex flex-col w-60"
|
|
||||||
:validate-on-input-delay="2000"
|
|
||||||
@submit="onSubmit"
|
|
||||||
>
|
|
||||||
<UFormField label="Email" name="email">
|
|
||||||
<UInput v-model="state2.email" placeholder="john@lennon.com" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<UFormField
|
|
||||||
label="Password"
|
|
||||||
name="password"
|
|
||||||
:validate-on-input-delay="50"
|
|
||||||
eager-validation
|
|
||||||
>
|
|
||||||
<UInput v-model="state2.password" type="password" />
|
|
||||||
</UFormField>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<UButton color="neutral" type="submit">
|
|
||||||
Submit
|
|
||||||
</UButton>
|
|
||||||
</div>
|
|
||||||
</UForm>
|
|
||||||
<FormNestedExample />
|
|
||||||
<FormNestedListExample />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<USeparator class="my-8" />
|
<div class="border border-[var(--ui-border)] rounded-lg">
|
||||||
|
<div class="py-2 px-4 flex gap-4 items-center">
|
||||||
|
<UFormField label="Validate on" class="flex items-center gap-2">
|
||||||
|
<USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
|
||||||
|
</UFormField>
|
||||||
|
<UCheckbox v-model="disabled" label="Disabled" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-4 flex-wrap">
|
<FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-[var(--ui-border)] p-4" />
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold underline mb-4">
|
|
||||||
Validate on input
|
|
||||||
</p>
|
|
||||||
<FormElementsExample :validate-on="['input']" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold underline mb-4">
|
|
||||||
Validate on change
|
|
||||||
</p>
|
|
||||||
<FormElementsExample :validate-on="['change']" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold underline mb-4">
|
|
||||||
Validate on blur
|
|
||||||
</p>
|
|
||||||
<FormElementsExample :validate-on="['blur']" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold underline mb-4">
|
|
||||||
Default
|
|
||||||
</p>
|
|
||||||
<FormElementsExample />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-lg font-bold underline mb-4">
|
|
||||||
Disabled
|
|
||||||
</p>
|
|
||||||
<FormElementsExample disabled />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user