arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-03 13:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(form): use useTemplateRef

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-15 15:09:21 +02:00
parent 16b48efa96
commit 8258cd3829
5 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/app/components/content/examples/form/FormExampleElements.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { z } from 'zod' import { z } from 'zod'
import type { FormSubmitEvent, Form } from '@nuxt/ui' import type { FormSubmitEvent } from '@nuxt/ui'
const schema = z.object({ const schema = z.object({
input: z.string().min(10), input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
type Schema = z.output<typeof schema> type Schema = z.output<typeof schema>
const state = reactive<Partial<Schema>>({}) const state = reactive<Partial<Schema>>({})
const form = ref<Form<Schema>>()
const form = useTemplateRef('form')
const items = [ const items = [
{ label: 'Option 1', value: 'option-1' }, { label: 'Option 1', value: 'option-1' },

3
docs/app/components/content/examples/form/FormExampleNestedList.vue
View File

@@ -31,9 +31,9 @@ function removeItem() {
state.items.pop() state.items.pop()
} }
} }
const formItemRef = ref()
const toast = useToast() const toast = useToast()
async function onSubmit(event: FormSubmitEvent<any>) { async function onSubmit(event: FormSubmitEvent<any>) {
toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' }) toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
console.log(event.data) console.log(event.data)
@@ -42,7 +42,6 @@ async function onSubmit(event: FormSubmitEvent<any>) {
<template> <template>
<UForm <UForm
ref="formItemRef"
:state="state" :state="state"
:schema="schema" :schema="schema"
class="gap-4 flex flex-col w-60" class="gap-4 flex flex-col w-60"

14
docs/content/3.components/form.md
View File

@@ -167,7 +167,19 @@ name: 'form-example-nested-list'
### Expose ### Expose
When accessing the component via a template ref, you can use the following: You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
```vue
<script setup lang="ts">
const form = useTemplateRef('form')
</script>
<template>
<UForm ref="form" />
</template>
```
This will give you access to the following:
| Name | Type | | Name | Type |
| ---- | ---- | | ---- | ---- |

5
playground/app/components/FormElementsExample.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { z } from 'zod' import { z } from 'zod'
import type { FormSubmitEvent, Form } from '@nuxt/ui' import type { FormSubmitEvent } from '@nuxt/ui'
const schema = z.object({ const schema = z.object({
input: z.string().min(10), input: z.string().min(10),
@@ -35,7 +35,8 @@ const schema = z.object({
type Schema = z.output<typeof schema> type Schema = z.output<typeof schema>
const state = reactive<Partial<Schema>>({}) const state = reactive<Partial<Schema>>({})
const form = ref<Form<Schema>>()
const form = useTemplateRef('form')
const items = [ const items = [
{ label: 'Option 1', value: 'option-1' }, { label: 'Option 1', value: 'option-1' },

2
playground/app/components/FormNestedListExample.vue
View File

@@ -30,7 +30,6 @@ function removeItem() {
state.items.pop() state.items.pop()
} }
} }
const formItemRef = ref()
function onSubmit(event: FormSubmitEvent<Schema>) { function onSubmit(event: FormSubmitEvent<Schema>) {
console.log('Success', event.data) console.log('Success', event.data)
@@ -43,7 +42,6 @@ function onError(event: any) {
<template> <template>
<UForm <UForm
ref="formItemRef"
:state="state" :state="state"
:schema="schema" :schema="schema"
class="gap-4 flex flex-col w-60" class="gap-4 flex flex-col w-60"