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
This commit is contained in:
Corbin Crutchley
2023-09-07 17:20:35 -07:00
committed by GitHub
parent d6da133a29
commit 081a22896e
39 changed files with 3578 additions and 523 deletions

View File

@@ -0,0 +1,6 @@
---
id: field
title: Field
---
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

View File

@@ -0,0 +1,36 @@
---
id: createFormFactory
title: createFormFactory
---
### `createFormFactory`
```tsx
export function createFormFactory<TFormData>(
opts?: FormOptions<TFormData>,
): FormFactory<TFormData>
```
A function that creates a new `FormFactory<TFormData>` instance.
- `opts`
- Optional form options and a `listen` function to be called with the form state.
### `FormFactory<TFormData>`
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.
```tsx
export type FormFactory<TFormData> = {
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
useField: UseField<TFormData>
Field: FieldComponent<TFormData>
}
```
- `useForm`
- A custom composition that creates and returns a new instance of the `FormApi<TFormData>` class.
- `useField`
- A custom composition that returns an instance of the `FieldApi<TFormData>` class.
- `Field`
- A form field component.

View File

@@ -0,0 +1,6 @@
---
id: fieldApi
title: Field API
---
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

View File

@@ -0,0 +1,6 @@
---
id: formApi
title: Form API
---
Please see [/packages/vue-form/src/useForm.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx)

View File

@@ -0,0 +1,6 @@
---
id: useField
title: useField
---
Please see [/packages/vue-form/src/useField.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx)

View File

@@ -0,0 +1,6 @@
---
id: useForm
title: useForm
---
Please see [/packages/vue-form/src/useForm.tsx](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx)