Skip to content

Commit 081a228

Browse files
crutchcorncrutchcorn
authored
feat: Add Vue adapter (#416)
* chore: initial work at scaffolding Vue package * chore: initial work on adding in useField and useForm API * chore: fix build for Vue package * chore: migrate to slots for functional comps * chore: got initial fields rendering * chore: add component names for debuggability * chore: fix error regarding passdown props * chore: fix Promise constructor error in demo * chore: initial work at writing vue store implementation * feat: add initial useStore and Subscribe instances * fix: state is now passed as a dedicated reactive option * chore: temporarily remove Vue 2 typechecking * chore: make Provider and selector optional * chore: add createFormFactory * chore: attempt 1 of test - JSX * chore: attempt 2 of test - Vue JSX * chore: attempt 3 of test - H * chore: migrate to proper h function * chore: fix tests by bumping package * chore: fix JSX typings * chore: add another test for useForm * chore: listen for fieldAPIs to update * fix: fields should now update during mount * chore: add test for useField in Vue * test: add useField Vue tests * docs: add early docs for Vue package
1 parent d6da133 commit 081a228

39 files changed

+3597
-542
lines changed

‎docs/config.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,50 @@
9393
]
9494
}
9595
]
96+
},
97+
{
98+
"framework": "vue",
99+
"menuItems": [
100+
{
101+
"label": "Getting Started",
102+
"children": [
103+
{
104+
"label": "Quick Start",
105+
"to": "framework/vue/quick-start"
106+
}
107+
]
108+
},
109+
{
110+
"label": "API Reference",
111+
"children": [
112+
{
113+
"label": "useForm",
114+
"to": "framework/vue/reference/useForm"
115+
},
116+
{
117+
"label": "useField",
118+
"to": "framework/vue/reference/useField"
119+
},
120+
{
121+
"label": "Field",
122+
"to": "framework/vue/reference/Field"
123+
},
124+
{
125+
"label": "FormApi",
126+
"to": "framework/vue/reference/formApi"
127+
}
128+
]
129+
},
130+
{
131+
"label": "Examples",
132+
"children": [
133+
{
134+
"label": "Simple",
135+
"to": "framework/vue/examples/simple"
136+
}
137+
]
138+
}
139+
]
96140
}
97141
]
98142
}

‎docs/framework/vue/quick-start.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
id: quick-start
3+
title: Quick Start
4+
---
5+
6+
The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
7+
8+
```vue
9+
<!-- App.vue -->
10+
<script setup>
11+
import { useForm } from '@tanstack/vue-form'
12+
13+
const form = useForm({
14+
// Memoize your default values to prevent re-renders
15+
defaultValues: {
16+
fullName: '',
17+
},
18+
onSubmit: async (values) => {
19+
// Do something with form data
20+
console.log(values)
21+
},
22+
})
23+
24+
form.provideFormContext()
25+
</script>
26+
27+
<template>
28+
<div>
29+
<div>
30+
<form.Field name="fullName">
31+
<template v-slot="field">
32+
<input
33+
:name="field.name"
34+
:value="field.state.value"
35+
:onBlur="field.handleBlur"
36+
:onChange="(e) => field.handleChange(e.target.value)"
37+
/>
38+
</template>
39+
</form.Field>
40+
</div>
41+
<button type="submit">Submit</button>
42+
</div>
43+
</template>
44+
```
45+
46+
From here, you'll be ready to explore all of the other features of TanStack Form!

‎docs/framework/vue/reference/Field.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: field
3+
title: Field
4+
---
5+
6+
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

‎docs/framework/vue/reference/createFormFactory.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
id: createFormFactory
3+
title: createFormFactory
4+
---
5+
6+
### `createFormFactory`
7+
8+
```tsx
9+
export function createFormFactory<TFormData>(
10+
opts?: FormOptions<TFormData>,
11+
): FormFactory<TFormData>
12+
```
13+
14+
A function that creates a new `FormFactory<TFormData>` instance.
15+
16+
- `opts`
17+
- Optional form options and a `listen` function to be called with the form state.
18+
19+
### `FormFactory<TFormData>`
20+
21+
A type representing a form factory. Form factories provide a type-safe way to interact with the form API as opposed to using the globally exported form utilities.
22+
23+
```tsx
24+
export type FormFactory<TFormData> = {
25+
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
26+
useField: UseField<TFormData>
27+
Field: FieldComponent<TFormData>
28+
}
29+
```
30+
31+
- `useForm`
32+
- A custom composition that creates and returns a new instance of the `FormApi<TFormData>` class.
33+
- `useField`
34+
- A custom composition that returns an instance of the `FieldApi<TFormData>` class.
35+
- `Field`
36+
- A form field component.

‎docs/framework/vue/reference/fieldApi.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: fieldApi
3+
title: Field API
4+
---
5+
6+
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

‎docs/framework/vue/reference/formApi.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: formApi
3+
title: Form API
4+
---
5+
6+
Please see [/packages/vue-form/src/useForm.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx)

‎docs/framework/vue/reference/useField.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: useField
3+
title: useField
4+
---
5+
6+
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

‎docs/framework/vue/reference/useForm.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: useForm
3+
title: useForm
4+
---
5+
6+
Please see [/packages/vue-form/src/useForm.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx)

‎examples/vue/simple/.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
7+
package-lock.json
8+
yarn.lock
9+
pnpm-lock.yaml

‎examples/vue/simple/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Basic example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn` or `pnpm i`
6+
- `npm run dev` or `yarn dev` or `pnpm dev`

0 commit comments

Comments
 (0)