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

feat(playground): update form examples

Browse Source
This commit is contained in:
Romain Hamel
2024-11-12 13:44:09 +01:00
parent fc9711223b
commit 8b975de35e
5 changed files with 24 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
playground/app/pages/components/form.vue
View File

@@ -1,6 +1,9 @@
<script setup lang="ts">
import { z } from 'zod'
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({
email: z.string().email(),
@@ -8,18 +11,20 @@ const schema = z.object({
tos: z.literal(true)
})
type Schema = z.output<typeof schema>
type Schema = z.input<typeof schema>
const state = reactive<Partial<Schema>>({})
const state2 = reactive<Partial<Schema>>({})
function onSubmit(event: FormSubmitEvent<Schema>) {
console.log(event.data)
}
const validateOn = ref(['input', 'change', 'blur'])
const disabled = ref(false)
</script>
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-8">
<div class="flex gap-4">
<UForm
:state="state"
@@ -40,75 +45,24 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
</UFormField>
<div>
<UButton color="neutral" type="submit">
<UButton type="submit">
Submit
</UButton>
</div>
</UForm>
<UForm
: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 />
<FormExampleNested />
<FormExampleNestedList />
</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">
<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>
<FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-[var(--ui-border)] p-4" />
</div>
</div>
</template>