@tanstack/vue-form 1.33.5 → 2.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppForm/Components.lib.js +16 -0
- package/dist/AppForm/VueAppFormApi.public.d.ts +14 -0
- package/dist/AppForm/appFormOptions.public.d.ts +14 -0
- package/dist/AppForm/componentMap.public.d.ts +10 -0
- package/dist/AppForm/contexts.lib.js +18 -0
- package/dist/AppForm/createFormHook.public.d.ts +6 -0
- package/dist/AppForm/createFormHook.public.js +24 -0
- package/dist/AppForm/createFormHookTypes.public.d.ts +15 -0
- package/dist/AppForm/fieldComponentHelpers.lib.js +22 -0
- package/dist/AppForm/getFormHookHelpers.public.d.ts +37 -0
- package/dist/AppForm/getFormHookHelpers.public.js +18 -0
- package/dist/AppForm/initializeAppForm.lib.js +10 -0
- package/dist/FieldGroup/FieldGroupApi.public.d.ts +30 -0
- package/dist/FieldGroup/withFields.lib.js +62 -0
- package/dist/FieldGroup/withFields.public.d.ts +57 -0
- package/dist/FieldGroup/withFields.public.js +8 -0
- package/dist/Subscribe.public.d.ts +15 -0
- package/dist/Subscribe.public.js +22 -0
- package/dist/VueForm/Components.lib.js +94 -0
- package/dist/VueForm/Components.public.d.ts +71 -0
- package/dist/VueForm/VueFormApi.lib.js +26 -0
- package/dist/VueForm/fieldSubscriptions.lib.js +34 -0
- package/dist/VueForm/formApiTypes.public.d.ts +36 -0
- package/dist/VueForm/formType.public.d.ts +32 -0
- package/dist/VueForm/useField.lib.js +44 -0
- package/dist/VueForm/useForm.public.d.ts +8 -0
- package/dist/VueForm/useForm.public.js +10 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +11 -0
- package/dist/vueTypes.lib.d.ts +6 -0
- package/package.json +14 -31
- package/dist/cjs/index.cjs +0 -27
- package/dist/cjs/index.cjs.map +0 -1
- package/dist/cjs/index.d.cts +0 -5
- package/dist/cjs/types.d.cts +0 -9
- package/dist/cjs/useField.cjs +0 -106
- package/dist/cjs/useField.cjs.map +0 -1
- package/dist/cjs/useField.d.cts +0 -54
- package/dist/cjs/useForm.cjs +0 -62
- package/dist/cjs/useForm.cjs.map +0 -1
- package/dist/cjs/useForm.d.cts +0 -23
- package/dist/cjs/useFormGroup.cjs +0 -41
- package/dist/cjs/useFormGroup.cjs.map +0 -1
- package/dist/cjs/useFormGroup.d.cts +0 -37
- package/dist/cjs/useFormId.cjs +0 -31
- package/dist/cjs/useFormId.cjs.map +0 -1
- package/dist/cjs/useFormId.d.cts +0 -7
- package/dist/esm/index.d.ts +0 -5
- package/dist/esm/index.js +0 -15
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/types.d.ts +0 -9
- package/dist/esm/useField.d.ts +0 -54
- package/dist/esm/useField.js +0 -106
- package/dist/esm/useField.js.map +0 -1
- package/dist/esm/useForm.d.ts +0 -23
- package/dist/esm/useForm.js +0 -62
- package/dist/esm/useForm.js.map +0 -1
- package/dist/esm/useFormGroup.d.ts +0 -37
- package/dist/esm/useFormGroup.js +0 -41
- package/dist/esm/useFormGroup.js.map +0 -1
- package/dist/esm/useFormId.d.ts +0 -7
- package/dist/esm/useFormId.js +0 -14
- package/dist/esm/useFormId.js.map +0 -1
- package/src/index.ts +0 -5
- package/src/types.ts +0 -114
- package/src/useField.tsx +0 -550
- package/src/useForm.tsx +0 -360
- package/src/useFormGroup.tsx +0 -532
- package/src/useFormId.ts +0 -24
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { shallow } from "@tanstack/vue-store";
|
|
2
|
+
import { shallowRef, toRaw, watch } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/VueForm/fieldSubscriptions.lib.ts
|
|
5
|
+
function createFieldSelection(fieldApi, selector) {
|
|
6
|
+
const selected = shallowRef(selector(fieldApi.value));
|
|
7
|
+
watch(fieldApi, (field, _previous, onCleanup) => {
|
|
8
|
+
selected.value = selector(field);
|
|
9
|
+
const subscription = field.atom.subscribe(() => {
|
|
10
|
+
const next = selector(field);
|
|
11
|
+
if (!shallow(toRaw(selected.value), next)) selected.value = next;
|
|
12
|
+
});
|
|
13
|
+
onCleanup(() => subscription.unsubscribe());
|
|
14
|
+
}, {
|
|
15
|
+
immediate: true,
|
|
16
|
+
flush: "sync"
|
|
17
|
+
});
|
|
18
|
+
return selected;
|
|
19
|
+
}
|
|
20
|
+
function createValueFieldSubscription(fieldApi) {
|
|
21
|
+
return createFieldSelection(fieldApi, (field) => ({
|
|
22
|
+
value: field.value,
|
|
23
|
+
meta: field.meta
|
|
24
|
+
}));
|
|
25
|
+
}
|
|
26
|
+
function createArrayFieldSubscription(fieldApi) {
|
|
27
|
+
return createFieldSelection(fieldApi, (field) => ({
|
|
28
|
+
length: field.value.length,
|
|
29
|
+
version: field.meta._arrayVersion
|
|
30
|
+
}));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
//#endregion
|
|
34
|
+
export { createArrayFieldSubscription, createValueFieldSubscription };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap } from "../AppForm/componentMap.public.js";
|
|
2
|
+
import { VueTanStackFormComponents } from "./Components.public.js";
|
|
3
|
+
import { AnyFormApi, FormApi, FormErrorTypes } from "@tanstack/form-core";
|
|
4
|
+
import { Component } from "vue";
|
|
5
|
+
//#region src/VueForm/formApiTypes.public.d.ts
|
|
6
|
+
type ExtendedFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TFieldComponents extends Record<string, Component>> = FormApi<TFormData, TFormErrorTypes> & VueTanStackFormComponents<TFormData, TFormErrorTypes, TFieldComponents>;
|
|
7
|
+
type VueFormApi<TFormData, TFormErrorTypes extends FormErrorTypes, TComponents extends AnyVueFormComponentMap = DefaultVueFormComponentMap> = unknown extends TComponents['formComponents'] ? ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> : ExtendedFormApi<TFormData, TFormErrorTypes, TComponents['fieldComponents']> & TComponents['formComponents'];
|
|
8
|
+
/**
|
|
9
|
+
* A Vue form API whose form data and error types are erased.
|
|
10
|
+
*
|
|
11
|
+
* Use it for reusable Vue components that only need core form operations and
|
|
12
|
+
* the `Field`, `ArrayField`, `Subscribe`, or `FormGroup` components common to
|
|
13
|
+
* every Vue form. Field paths and values are not checked against a particular
|
|
14
|
+
* form shape; use `VueFormType` when a component depends on one known form.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```vue
|
|
18
|
+
* <script setup lang="ts">
|
|
19
|
+
* defineProps<{ form: AnyVueFormApi }>()
|
|
20
|
+
* </script>
|
|
21
|
+
*
|
|
22
|
+
* <template>
|
|
23
|
+
* <form.Subscribe
|
|
24
|
+
* :selector="(state) => state.isSubmitting"
|
|
25
|
+
* v-slot="isSubmitting"
|
|
26
|
+
* >
|
|
27
|
+
* <button type="submit" :disabled="isSubmitting">
|
|
28
|
+
* {{ isSubmitting ? 'Saving...' : 'Save' }}
|
|
29
|
+
* </button>
|
|
30
|
+
* </form.Subscribe>
|
|
31
|
+
* </template>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
type AnyVueFormApi = AnyFormApi & VueTanStackFormComponents<any, any, any>;
|
|
35
|
+
//#endregion
|
|
36
|
+
export { AnyVueFormApi, VueFormApi, type VueFormComponentMap };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/componentMap.public.js";
|
|
2
|
+
import { VueFormApi } from "./formApiTypes.public.js";
|
|
3
|
+
import { AppFormOptions } from "../AppForm/appFormOptions.public.js";
|
|
4
|
+
import { AnyFormOptions, FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
|
|
5
|
+
//#region src/VueForm/formType.public.d.ts
|
|
6
|
+
type VueFormTypeErrorTypes<TFormValidators extends FormValidators<any>, TSubmitReturn> = unknown extends TSubmitReturn ? any : ToFormErrorTypes<TFormValidators, TSubmitReturn>;
|
|
7
|
+
/**
|
|
8
|
+
* Derives the Vue form API type represented by a reusable options object.
|
|
9
|
+
*
|
|
10
|
+
* Use it to type props for components that belong to one known form shape. It
|
|
11
|
+
* preserves the inferred form data and any components registered through
|
|
12
|
+
* `appFormOptions`. Options such as `onSubmit` can be defined either in the
|
|
13
|
+
* shared options or when the form is created in the component.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```ts
|
|
17
|
+
* const profileOptions = formOptions({
|
|
18
|
+
* defaultValues: { name: '' },
|
|
19
|
+
* })
|
|
20
|
+
*
|
|
21
|
+
* type ProfileForm = VueFormType<typeof profileOptions>
|
|
22
|
+
*
|
|
23
|
+
* const props = defineProps<{
|
|
24
|
+
* form: ProfileForm
|
|
25
|
+
* }>()
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @typeParam TOptions - The reusable form or app-form options from which the API derives its form data, error, and registered-component types.
|
|
29
|
+
*/
|
|
30
|
+
type VueFormType<TOptions extends AnyFormOptions | AppFormOptions<any, any, any, AnyVueFormComponentMap>> = TOptions extends AppFormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn, infer TComponents> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, TComponents> : TOptions extends FormOptions<infer TFormData, infer TFormValidators, infer TSubmitReturn> ? VueFormApi<TFormData, VueFormTypeErrorTypes<TFormValidators, TSubmitReturn>, DefaultVueFormComponentMap> : never;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { VueFormType };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { useSelector } from "@tanstack/vue-store";
|
|
2
|
+
import { onMounted, onUnmounted, shallowRef, watch, watchEffect } from "vue";
|
|
3
|
+
|
|
4
|
+
//#region src/VueForm/useField.lib.ts
|
|
5
|
+
function useField(options, fieldComponents) {
|
|
6
|
+
const initialOptions = options();
|
|
7
|
+
const resetVersion = useSelector(initialOptions.form._atoms.resetVersion);
|
|
8
|
+
const createField = () => {
|
|
9
|
+
const current = options();
|
|
10
|
+
const field = current.form._getOrCreateFieldApi({
|
|
11
|
+
...current,
|
|
12
|
+
name: current.name
|
|
13
|
+
});
|
|
14
|
+
if (fieldComponents !== null) Object.assign(field, fieldComponents);
|
|
15
|
+
return field;
|
|
16
|
+
};
|
|
17
|
+
const fieldApi = shallowRef(createField());
|
|
18
|
+
watch([
|
|
19
|
+
() => options().form,
|
|
20
|
+
() => options().name,
|
|
21
|
+
resetVersion
|
|
22
|
+
], () => {
|
|
23
|
+
fieldApi.value = createField();
|
|
24
|
+
}, { flush: "sync" });
|
|
25
|
+
watchEffect(() => {
|
|
26
|
+
fieldApi.value._update(options());
|
|
27
|
+
});
|
|
28
|
+
let mounted = false;
|
|
29
|
+
let unregister;
|
|
30
|
+
watch(fieldApi, (field) => {
|
|
31
|
+
if (!mounted) return;
|
|
32
|
+
unregister?.();
|
|
33
|
+
unregister = field._register();
|
|
34
|
+
}, { flush: "sync" });
|
|
35
|
+
onMounted(() => {
|
|
36
|
+
mounted = true;
|
|
37
|
+
unregister = fieldApi.value._register();
|
|
38
|
+
});
|
|
39
|
+
onUnmounted(() => unregister?.());
|
|
40
|
+
return fieldApi;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
//#endregion
|
|
44
|
+
export { useField };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { AnyVueFormComponentMap, DefaultVueFormComponentMap } from "../AppForm/componentMap.public.js";
|
|
2
|
+
import { VueFormApi } from "./formApiTypes.public.js";
|
|
3
|
+
import { FormOptions, FormValidators, ToFormErrorTypes } from "@tanstack/form-core";
|
|
4
|
+
//#region src/VueForm/useForm.public.d.ts
|
|
5
|
+
type UseFormHook<in out TComponents extends AnyVueFormComponentMap> = <TFormData, const TFormValidators extends FormValidators<TFormData>, TSubmitReturn>(options: FormOptions<TFormData, TFormValidators, TSubmitReturn>) => VueFormApi<TFormData, ToFormErrorTypes<TFormValidators, TSubmitReturn>, TComponents>;
|
|
6
|
+
declare const useForm: UseFormHook<DefaultVueFormComponentMap>;
|
|
7
|
+
//#endregion
|
|
8
|
+
export { UseFormHook, useForm };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { initializeForm, useInternalForm } from "./VueFormApi.lib.js";
|
|
2
|
+
|
|
3
|
+
//#region src/VueForm/useForm.public.ts
|
|
4
|
+
function useFormHook(options) {
|
|
5
|
+
return useInternalForm(options, initializeForm);
|
|
6
|
+
}
|
|
7
|
+
const useForm = useFormHook;
|
|
8
|
+
|
|
9
|
+
//#endregion
|
|
10
|
+
export { useForm };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AnyVueFormComponentMap, DefaultVueFormComponentMap, VueFormComponentMap } from "./AppForm/componentMap.public.js";
|
|
2
|
+
import { VueFieldApi, VueFormArrayFieldComponent, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueTanStackFormComponents } from "./VueForm/Components.public.js";
|
|
3
|
+
import { AnyVueFormApi, VueFormApi } from "./VueForm/formApiTypes.public.js";
|
|
4
|
+
import { UseFormHook, useForm } from "./VueForm/useForm.public.js";
|
|
5
|
+
import { AppFormOptions, AppFormOptionsApi } from "./AppForm/appFormOptions.public.js";
|
|
6
|
+
import { VueFormType } from "./VueForm/formType.public.js";
|
|
7
|
+
import { Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource } from "./Subscribe.public.js";
|
|
8
|
+
import { AnyFieldGroupApi, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupFieldComponent, FieldGroupFormState, FieldGroupSubscribeComponent, FieldGroupSubscribeProps } from "./FieldGroup/FieldGroupApi.public.js";
|
|
9
|
+
import { AnyFieldGroupFieldSlot, DefineFieldGroupFn, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupHelper, FieldGroupWithFieldsFn, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, VueFieldGroup, defineFieldGroup } from "./FieldGroup/withFields.public.js";
|
|
10
|
+
import { AppFormComponent, VueAppFormApi } from "./AppForm/VueAppFormApi.public.js";
|
|
11
|
+
import { AppFormHookResult, UseAppFormHook } from "./AppForm/createFormHookTypes.public.js";
|
|
12
|
+
import { createFormHook } from "./AppForm/createFormHook.public.js";
|
|
13
|
+
import { FormHookHelpers, getFormHookHelpers } from "./AppForm/getFormHookHelpers.public.js";
|
|
14
|
+
export * from "@tanstack/form-core";
|
|
15
|
+
export * from "@tanstack/vue-store";
|
|
16
|
+
export { AnyFieldGroupApi, AnyFieldGroupFieldSlot, AnyVueFormApi, AnyVueFormComponentMap, AppFormComponent, AppFormHookResult, AppFormOptions, AppFormOptionsApi, DefaultVueFormComponentMap, DefineFieldGroupFn, FieldGroupApi, FieldGroupArrayFieldComponent, FieldGroupDefinition, FieldGroupFieldBindingForSlot, FieldGroupFieldBindings, FieldGroupFieldBindingsOf, FieldGroupFieldComponent, FieldGroupFieldComponentsOf, FieldGroupFieldData, FieldGroupFieldNameForSlot, FieldGroupFieldNames, FieldGroupFieldSlot, FieldGroupFieldSlotAllows, FieldGroupFieldSlotMode, FieldGroupFieldSlotModeOf, FieldGroupFieldSlotValue, FieldGroupFields, FieldGroupFieldsOf, FieldGroupFieldsPropName, FieldGroupForm, FieldGroupFormState, FieldGroupHelper, FieldGroupSubscribeComponent, FieldGroupSubscribeProps, FieldGroupWithFieldsFn, FormHookHelpers, LooseFieldGroupFieldSlot, StrictFieldGroupFieldSlot, Subscribe, SubscribeComponent, SubscribeProps, SubscribeSource, UseAppFormHook, UseFormHook, VueAppFormApi, VueFieldApi, VueFieldGroup, VueFormApi, VueFormArrayFieldComponent, VueFormComponentMap, VueFormFieldComponent, VueFormFieldProps, VueFormGroupApi, VueFormGroupArrayFieldComponent, VueFormGroupComponent, VueFormGroupFieldComponent, VueFormGroupProps, VueFormGroupSubscribeComponent, VueFormGroupSubscribeProps, VueFormSubscribeComponent, VueFormSubscribeProps, VueFormType, VueTanStackFormComponents, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Subscribe } from "./Subscribe.public.js";
|
|
2
|
+
import { useForm } from "./VueForm/useForm.public.js";
|
|
3
|
+
import { defineFieldGroup } from "./FieldGroup/withFields.public.js";
|
|
4
|
+
import { createFormHook } from "./AppForm/createFormHook.public.js";
|
|
5
|
+
import { getFormHookHelpers } from "./AppForm/getFormHookHelpers.public.js";
|
|
6
|
+
|
|
7
|
+
export * from "@tanstack/form-core"
|
|
8
|
+
|
|
9
|
+
export * from "@tanstack/vue-store"
|
|
10
|
+
|
|
11
|
+
export { Subscribe, createFormHook, defineFieldGroup, getFormHookHelpers, useForm };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, PublicProps, SlotsType } from "vue";
|
|
2
|
+
//#region src/vueTypes.lib.d.ts
|
|
3
|
+
type VueComponentInstance<TProps extends Record<string, any>, TSlots extends Record<string, any>> = CreateComponentPublicInstanceWithMixins<TProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<TSlots>>;
|
|
4
|
+
type VueComponentWithSlots<TProps extends Record<string, any>, TSlots extends Record<string, any>> = new (props: TProps & PublicProps) => VueComponentInstance<TProps, TSlots>;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { VueComponentInstance, VueComponentWithSlots };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-form",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-alpha.1",
|
|
4
4
|
"description": "Powerful, type-safe forms for Vue.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,53 +15,36 @@
|
|
|
15
15
|
"url": "https://github.com/sponsors/tannerlinsley"
|
|
16
16
|
},
|
|
17
17
|
"type": "module",
|
|
18
|
-
"types": "dist/
|
|
19
|
-
"main": "dist/cjs/index.cjs",
|
|
20
|
-
"module": "dist/esm/index.js",
|
|
18
|
+
"types": "./dist/index.d.ts",
|
|
21
19
|
"exports": {
|
|
22
|
-
".":
|
|
23
|
-
"import": {
|
|
24
|
-
"types": "./dist/esm/index.d.ts",
|
|
25
|
-
"default": "./dist/esm/index.js"
|
|
26
|
-
},
|
|
27
|
-
"require": {
|
|
28
|
-
"types": "./dist/cjs/index.d.cts",
|
|
29
|
-
"default": "./dist/cjs/index.cjs"
|
|
30
|
-
}
|
|
31
|
-
},
|
|
20
|
+
".": "./dist/index.js",
|
|
32
21
|
"./package.json": "./package.json"
|
|
33
22
|
},
|
|
34
23
|
"sideEffects": false,
|
|
35
24
|
"files": [
|
|
36
|
-
"dist"
|
|
37
|
-
"src"
|
|
25
|
+
"dist"
|
|
38
26
|
],
|
|
39
27
|
"dependencies": {
|
|
40
|
-
"@tanstack/vue-store": "^0.11.
|
|
41
|
-
"@tanstack/form-core": "
|
|
28
|
+
"@tanstack/vue-store": "^0.11.1",
|
|
29
|
+
"@tanstack/form-core": "2.0.0-alpha.1"
|
|
42
30
|
},
|
|
43
31
|
"devDependencies": {
|
|
44
|
-
"@
|
|
45
|
-
"
|
|
46
|
-
"vue": "^
|
|
32
|
+
"@testing-library/vue": "^8.1.0",
|
|
33
|
+
"@vitejs/plugin-vue": "^6.0.8",
|
|
34
|
+
"unplugin-vue": "^7.2.0",
|
|
35
|
+
"vue": "^3.6.0-rc.2",
|
|
36
|
+
"vue-tsc": "^3.3.9"
|
|
47
37
|
},
|
|
48
38
|
"peerDependencies": {
|
|
49
|
-
"vue": "^3.
|
|
39
|
+
"vue": "^3.6.0-rc.2"
|
|
50
40
|
},
|
|
51
41
|
"scripts": {
|
|
52
42
|
"clean": "premove ./dist ./coverage",
|
|
53
43
|
"test:eslint": "eslint ./src ./tests",
|
|
54
|
-
"test:types": "
|
|
55
|
-
"test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
|
|
56
|
-
"test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
|
|
57
|
-
"test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
|
|
58
|
-
"test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
|
|
59
|
-
"test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js",
|
|
60
|
-
"test:types:ts59": "tsc",
|
|
61
|
-
"fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
|
|
44
|
+
"test:types": "vue-tsc --noEmit",
|
|
62
45
|
"test:lib": "vitest",
|
|
63
46
|
"test:lib:dev": "pnpm run test:lib --watch",
|
|
64
47
|
"test:build": "publint --strict",
|
|
65
|
-
"build": "
|
|
48
|
+
"build": "tsdown"
|
|
66
49
|
}
|
|
67
50
|
}
|
package/dist/cjs/index.cjs
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const formCore = require("@tanstack/form-core");
|
|
4
|
-
const vueStore = require("@tanstack/vue-store");
|
|
5
|
-
const useField = require("./useField.cjs");
|
|
6
|
-
const useForm = require("./useForm.cjs");
|
|
7
|
-
const useFormGroup = require("./useFormGroup.cjs");
|
|
8
|
-
Object.defineProperty(exports, "useSelector", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: () => vueStore.useSelector
|
|
11
|
-
});
|
|
12
|
-
Object.defineProperty(exports, "useStore", {
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: () => vueStore.useStore
|
|
15
|
-
});
|
|
16
|
-
exports.Field = useField.Field;
|
|
17
|
-
exports.useField = useField.useField;
|
|
18
|
-
exports.useForm = useForm.useForm;
|
|
19
|
-
exports.FormGroup = useFormGroup.FormGroup;
|
|
20
|
-
exports.useFormGroup = useFormGroup.useFormGroup;
|
|
21
|
-
Object.keys(formCore).forEach((k) => {
|
|
22
|
-
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: () => formCore[k]
|
|
25
|
-
});
|
|
26
|
-
});
|
|
27
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/cjs/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/cjs/index.d.cts
DELETED
package/dist/cjs/types.d.cts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { DeepKeys, DeepValue, FieldApiOptions, FieldAsyncValidateOrFn, FieldOptions, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
|
|
2
|
-
interface FieldOptionsMode {
|
|
3
|
-
mode?: 'value' | 'array';
|
|
4
|
-
}
|
|
5
|
-
export interface UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta> extends FieldApiOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>, FieldOptionsMode {
|
|
6
|
-
}
|
|
7
|
-
export interface UseFieldOptionsBound<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>> extends FieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, FieldOptionsMode {
|
|
8
|
-
}
|
|
9
|
-
export {};
|
package/dist/cjs/useField.cjs
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const formCore = require("@tanstack/form-core");
|
|
4
|
-
const vueStore = require("@tanstack/vue-store");
|
|
5
|
-
const Vue = require("vue");
|
|
6
|
-
function useField(opts) {
|
|
7
|
-
const fieldApi = (() => {
|
|
8
|
-
const api = new formCore.FieldApi({
|
|
9
|
-
...opts,
|
|
10
|
-
form: opts.form,
|
|
11
|
-
name: opts.name
|
|
12
|
-
});
|
|
13
|
-
return api;
|
|
14
|
-
})();
|
|
15
|
-
const reactiveStateValue = vueStore.useSelector(
|
|
16
|
-
fieldApi.store,
|
|
17
|
-
opts.mode === "array" ? (state) => state.meta._arrayVersion || 0 : (state) => state.value
|
|
18
|
-
);
|
|
19
|
-
const reactiveMetaIsTouched = vueStore.useSelector(
|
|
20
|
-
fieldApi.store,
|
|
21
|
-
(state) => state.meta.isTouched
|
|
22
|
-
);
|
|
23
|
-
const reactiveMetaIsBlurred = vueStore.useSelector(
|
|
24
|
-
fieldApi.store,
|
|
25
|
-
(state) => state.meta.isBlurred
|
|
26
|
-
);
|
|
27
|
-
const reactiveMetaIsDirty = vueStore.useSelector(
|
|
28
|
-
fieldApi.store,
|
|
29
|
-
(state) => state.meta.isDirty
|
|
30
|
-
);
|
|
31
|
-
const reactiveMetaErrorMap = vueStore.useSelector(
|
|
32
|
-
fieldApi.store,
|
|
33
|
-
(state) => state.meta.errorMap
|
|
34
|
-
);
|
|
35
|
-
const reactiveMetaErrorSourceMap = vueStore.useSelector(
|
|
36
|
-
fieldApi.store,
|
|
37
|
-
(state) => state.meta.errorSourceMap
|
|
38
|
-
);
|
|
39
|
-
const reactiveMetaIsValidating = vueStore.useSelector(
|
|
40
|
-
fieldApi.store,
|
|
41
|
-
(state) => state.meta.isValidating
|
|
42
|
-
);
|
|
43
|
-
const fieldState = Vue.computed(() => {
|
|
44
|
-
const trackedValue = reactiveStateValue.value;
|
|
45
|
-
const isTouched = reactiveMetaIsTouched.value;
|
|
46
|
-
const isBlurred = reactiveMetaIsBlurred.value;
|
|
47
|
-
const isDirty = reactiveMetaIsDirty.value;
|
|
48
|
-
const errorMap = reactiveMetaErrorMap.value;
|
|
49
|
-
const errorSourceMap = reactiveMetaErrorSourceMap.value;
|
|
50
|
-
const isValidating = reactiveMetaIsValidating.value;
|
|
51
|
-
return {
|
|
52
|
-
value: opts.mode === "array" ? fieldApi.state.value : trackedValue,
|
|
53
|
-
meta: {
|
|
54
|
-
...fieldApi.state.meta,
|
|
55
|
-
isTouched,
|
|
56
|
-
isBlurred,
|
|
57
|
-
isDirty,
|
|
58
|
-
errorMap,
|
|
59
|
-
errorSourceMap,
|
|
60
|
-
isValidating
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
});
|
|
64
|
-
const extendedFieldApi = Vue.computed(() => {
|
|
65
|
-
const reactiveFieldApi = {
|
|
66
|
-
...fieldApi,
|
|
67
|
-
get state() {
|
|
68
|
-
return fieldState.value;
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
const extendedApi = reactiveFieldApi;
|
|
72
|
-
return extendedApi;
|
|
73
|
-
});
|
|
74
|
-
let cleanup;
|
|
75
|
-
Vue.onMounted(() => {
|
|
76
|
-
cleanup = fieldApi.mount();
|
|
77
|
-
});
|
|
78
|
-
Vue.onUnmounted(() => {
|
|
79
|
-
cleanup();
|
|
80
|
-
});
|
|
81
|
-
Vue.watch(
|
|
82
|
-
() => opts,
|
|
83
|
-
() => {
|
|
84
|
-
fieldApi.update({ ...opts, form: opts.form });
|
|
85
|
-
}
|
|
86
|
-
);
|
|
87
|
-
return {
|
|
88
|
-
api: extendedFieldApi.value,
|
|
89
|
-
get state() {
|
|
90
|
-
return fieldState.value;
|
|
91
|
-
}
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
const Field = Vue.defineComponent(
|
|
95
|
-
(fieldOptions, context) => {
|
|
96
|
-
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
|
97
|
-
return () => context.slots.default({
|
|
98
|
-
field: fieldApi.api,
|
|
99
|
-
state: fieldApi.state
|
|
100
|
-
});
|
|
101
|
-
},
|
|
102
|
-
{ name: "Field", inheritAttrs: false }
|
|
103
|
-
);
|
|
104
|
-
exports.Field = Field;
|
|
105
|
-
exports.useField = useField;
|
|
106
|
-
//# sourceMappingURL=useField.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { computed, defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {\n AnyFieldApi,\n AnyFieldMeta,\n DeepKeys,\n DeepValue,\n FieldAsyncValidateOrFn,\n FieldValidateOrFn,\n FormAsyncValidateOrFn,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type {\n ComponentOptionsMixin,\n CreateComponentPublicInstanceWithMixins,\n EmitsOptions,\n EmitsToProps,\n PublicProps,\n SetupContext,\n SlotsType,\n} from 'vue'\nimport type { UseFieldOptions, UseFieldOptionsBound } from './types'\n\nexport type FieldComponent<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n // This complex type comes from Vue's return type for `DefineSetupFnComponent` but with our own types sprinkled in\n // This allows us to pre-bind some generics while keeping the props type unbound generics for props-based inferencing\n> = new <\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n>(\n props: FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n > &\n EmitsToProps<EmitsOptions> &\n PublicProps,\n) => CreateComponentPublicInstanceWithMixins<\n FieldComponentBoundProps<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n >,\n {},\n {},\n {},\n {},\n ComponentOptionsMixin,\n ComponentOptionsMixin,\n EmitsOptions,\n PublicProps,\n {},\n false,\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n state: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >['state']\n }\n }>\n>\n\nexport interface VueFieldApi<\n TParentData,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> {\n Field: FieldComponent<\n TParentData,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n return api\n })()\n\n // For array mode, only track length changes to avoid re-renders when child properties change\n // See: https://github.com/TanStack/form/issues/1925\n const reactiveStateValue = useSelector(\n fieldApi.store,\n (opts.mode === 'array'\n ? (state) => state.meta._arrayVersion || 0\n : (state) => state.value) as (\n state: typeof fieldApi.state,\n ) => TData | number,\n )\n const reactiveMetaIsTouched = useSelector(\n fieldApi.store,\n (state) => state.meta.isTouched,\n )\n const reactiveMetaIsBlurred = useSelector(\n fieldApi.store,\n (state) => state.meta.isBlurred,\n )\n const reactiveMetaIsDirty = useSelector(\n fieldApi.store,\n (state) => state.meta.isDirty,\n )\n const reactiveMetaErrorMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorMap,\n )\n const reactiveMetaErrorSourceMap = useSelector(\n fieldApi.store,\n (state) => state.meta.errorSourceMap,\n )\n const reactiveMetaIsValidating = useSelector(\n fieldApi.store,\n (state) => state.meta.isValidating,\n )\n\n const fieldState = computed(() => {\n // For array mode, reactiveStateValue is the length (for reactivity tracking),\n // so we need to read it to register the dependency, then return the actual\n // value from fieldApi.\n const trackedValue = reactiveStateValue.value\n // Read all reactive meta refs eagerly so that fieldState recomputes (and\n // dependent renders re-run) whenever any of them change. Without this, a\n // consumer reading `field.getMeta()` or `field.state.meta` from a render\n // function would not re-render on meta updates, since the meta getter\n // would never have registered those dependencies.\n const isTouched = reactiveMetaIsTouched.value\n const isBlurred = reactiveMetaIsBlurred.value\n const isDirty = reactiveMetaIsDirty.value\n const errorMap = reactiveMetaErrorMap.value\n const errorSourceMap = reactiveMetaErrorSourceMap.value\n const isValidating = reactiveMetaIsValidating.value\n return {\n value:\n opts.mode === 'array' ? fieldApi.state.value : (trackedValue as TData),\n meta: {\n ...fieldApi.state.meta,\n isTouched,\n isBlurred,\n isDirty,\n errorMap,\n errorSourceMap,\n isValidating,\n } satisfies AnyFieldMeta,\n } satisfies AnyFieldApi['state']\n })\n\n const extendedFieldApi = computed(() => {\n const reactiveFieldApi = {\n ...fieldApi,\n get state() {\n return fieldState.value\n },\n }\n\n const extendedApi: FieldApi<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n > = reactiveFieldApi as never\n\n return extendedApi\n })\n\n let cleanup!: () => void\n onMounted(() => {\n cleanup = fieldApi.mount()\n })\n\n onUnmounted(() => {\n cleanup()\n })\n\n watch(\n () => opts,\n () => {\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: opts.form } as never)\n },\n )\n\n return {\n api: extendedFieldApi.value,\n get state() {\n return fieldState.value\n },\n } as const\n}\n\nexport type FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n> = UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n>\n\nexport type FieldComponentBoundProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n> = UseFieldOptionsBound<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync\n>\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TData extends DeepValue<TParentData, TName>,\n TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnChangeAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnBlurAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnSubmitAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>,\n TOnDynamicAsync extends\n | undefined\n | FieldAsyncValidateOrFn<TParentData, TName, TData>,\n TFormOnMount extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChange extends undefined | FormValidateOrFn<TParentData>,\n TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,\n TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,\n TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,\n TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,\n TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,\n TParentSubmitMeta,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TFormOnMount,\n TFormOnChange,\n TFormOnChangeAsync,\n TFormOnBlur,\n TFormOnBlurAsync,\n TFormOnSubmit,\n TFormOnSubmitAsync,\n TFormOnDynamic,\n TFormOnDynamicAsync,\n TFormOnServer,\n TParentSubmitMeta\n >,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n return () =>\n context.slots.default!({\n field: fieldApi.api,\n state: fieldApi.state,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useSelector","computed","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AA4LO,SAAS,SAiCd,MAyBA;AACA,QAAM,YAAY,MAAM;AACtB,UAAM,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,WAAO;AAAA,EACT,GAAA;AAIA,QAAM,qBAAqBC,SAAAA;AAAAA,IACzB,SAAS;AAAA,IACR,KAAK,SAAS,UACX,CAAC,UAAU,MAAM,KAAK,iBAAiB,IACvC,CAAC,UAAU,MAAM;AAAA,EAAA;AAIvB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,wBAAwBA,SAAAA;AAAAA,IAC5B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,sBAAsBA,SAAAA;AAAAA,IAC1B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,uBAAuBA,SAAAA;AAAAA,IAC3B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,6BAA6BA,SAAAA;AAAAA,IACjC,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAExB,QAAM,2BAA2BA,SAAAA;AAAAA,IAC/B,SAAS;AAAA,IACT,CAAC,UAAU,MAAM,KAAK;AAAA,EAAA;AAGxB,QAAM,aAAaC,IAAAA,SAAS,MAAM;AAIhC,UAAM,eAAe,mBAAmB;AAMxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,YAAY,sBAAsB;AACxC,UAAM,UAAU,oBAAoB;AACpC,UAAM,WAAW,qBAAqB;AACtC,UAAM,iBAAiB,2BAA2B;AAClD,UAAM,eAAe,yBAAyB;AAC9C,WAAO;AAAA,MACL,OACE,KAAK,SAAS,UAAU,SAAS,MAAM,QAAS;AAAA,MAClD,MAAM;AAAA,QACJ,GAAG,SAAS,MAAM;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AAED,QAAM,mBAAmBA,IAAAA,SAAS,MAAM;AACtC,UAAM,mBAAmB;AAAA,MACvB,GAAG;AAAA,MACH,IAAI,QAAQ;AACV,eAAO,WAAW;AAAA,MACpB;AAAA,IAAA;AAGF,UAAM,cAwBF;AAEJ,WAAO;AAAA,EACT,CAAC;AAED,MAAI;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS,MAAA;AAAA,EACrB,CAAC;AAEDC,MAAAA,YAAY,MAAM;AAChB,YAAA;AAAA,EACF,CAAC;AAEDC,MAAAA;AAAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,KAAK,iBAAiB;AAAA,IACtB,IAAI,QAAQ;AACV,aAAO,WAAW;AAAA,IACpB;AAAA,EAAA;AAEJ;AAgGO,MAAM,QAAQC,IAAAA;AAAAA,EACnB,CAiCE,cAyBA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAE/D,WAAO,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS;AAAA,IAAA,CACjB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAA;AACjC;;;"}
|
package/dist/cjs/useField.d.cts
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { FieldApi, DeepKeys, DeepValue, FieldAsyncValidateOrFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn } from '@tanstack/form-core';
|
|
2
|
-
import { ComponentOptionsMixin, CreateComponentPublicInstanceWithMixins, EmitsOptions, EmitsToProps, PublicProps, SlotsType } from 'vue';
|
|
3
|
-
import { UseFieldOptions, UseFieldOptionsBound } from './types.cjs';
|
|
4
|
-
export type FieldComponent<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = new <TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>>(props: FieldComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync> & EmitsToProps<EmitsOptions> & PublicProps) => CreateComponentPublicInstanceWithMixins<FieldComponentBoundProps<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, SlotsType<{
|
|
5
|
-
default: {
|
|
6
|
-
field: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
|
|
7
|
-
state: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>['state'];
|
|
8
|
-
};
|
|
9
|
-
}>>;
|
|
10
|
-
export interface VueFieldApi<TParentData, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> {
|
|
11
|
-
Field: FieldComponent<TParentData, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
|
|
12
|
-
}
|
|
13
|
-
export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(opts: UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>): {
|
|
14
|
-
readonly api: FieldApi<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
|
|
15
|
-
readonly state: {
|
|
16
|
-
value: TData;
|
|
17
|
-
meta: {
|
|
18
|
-
isTouched: boolean;
|
|
19
|
-
isBlurred: boolean;
|
|
20
|
-
isDirty: boolean;
|
|
21
|
-
errorMap: import('@tanstack/form-core').ValidationErrorMap<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>, import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>, import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>, unknown>;
|
|
22
|
-
errorSourceMap: import('@tanstack/form-core').ValidationErrorMapSource;
|
|
23
|
-
isValidating: boolean;
|
|
24
|
-
_pendingValidationsCount: number;
|
|
25
|
-
_arrayVersion: number;
|
|
26
|
-
errors: (import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnChangeAsync, TFormOnChangeAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnBlur, TFormOnBlur>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnBlurAsync, TFormOnBlurAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnSubmit, TFormOnSubmit>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnSubmitAsync, TFormOnSubmitAsync>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>> | import('@tanstack/form-core').UnwrapOneLevelOfArray<import('@tanstack/form-core').UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>>)[];
|
|
27
|
-
isPristine: boolean;
|
|
28
|
-
isValid: boolean;
|
|
29
|
-
isDefaultValue: boolean;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
export type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta> = UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta>;
|
|
34
|
-
export type FieldComponentBoundProps<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>> = UseFieldOptionsBound<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync>;
|
|
35
|
-
export declare const Field: new <TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TParentSubmitMeta>(props: (UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ({
|
|
36
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
37
|
-
} | {
|
|
38
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
|
39
|
-
})) & import('@vue/runtime-core').VNodeProps & import('@vue/runtime-core').AllowedComponentProps & import('@vue/runtime-core').ComponentCustomProps) => CreateComponentPublicInstanceWithMixins<UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & ({
|
|
40
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
41
|
-
} | {
|
|
42
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
|
43
|
-
}), {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('@vue/runtime-core').ComponentProvideOptions, {
|
|
44
|
-
P: {};
|
|
45
|
-
B: {};
|
|
46
|
-
D: {};
|
|
47
|
-
C: {};
|
|
48
|
-
M: {};
|
|
49
|
-
Defaults: {};
|
|
50
|
-
}, (UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & {
|
|
51
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
|
52
|
-
}) | (UseFieldOptions<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TParentSubmitMeta> & {
|
|
53
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
|
54
|
-
}), {}, {}, {}, {}, {}>;
|
package/dist/cjs/useForm.cjs
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const formCore = require("@tanstack/form-core");
|
|
4
|
-
const vueStore = require("@tanstack/vue-store");
|
|
5
|
-
const Vue = require("vue");
|
|
6
|
-
const useField = require("./useField.cjs");
|
|
7
|
-
const useFormGroup = require("./useFormGroup.cjs");
|
|
8
|
-
const useFormId = require("./useFormId.cjs");
|
|
9
|
-
function useForm(opts) {
|
|
10
|
-
const fallbackFormId = useFormId.useFormId();
|
|
11
|
-
const formApi = (() => {
|
|
12
|
-
const api = new formCore.FormApi({ ...opts, formId: opts?.formId ?? fallbackFormId });
|
|
13
|
-
const extendedApi = api;
|
|
14
|
-
extendedApi.Field = Vue.defineComponent(
|
|
15
|
-
(props, context) => {
|
|
16
|
-
return () => Vue.h(
|
|
17
|
-
useField.Field,
|
|
18
|
-
{ ...props, ...context.attrs, form: api },
|
|
19
|
-
context.slots
|
|
20
|
-
);
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
name: "APIField",
|
|
24
|
-
inheritAttrs: false
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
extendedApi.FormGroup = Vue.defineComponent(
|
|
28
|
-
(props, context) => {
|
|
29
|
-
return () => Vue.h(
|
|
30
|
-
useFormGroup.FormGroup,
|
|
31
|
-
{ ...props, ...context.attrs, form: api },
|
|
32
|
-
context.slots
|
|
33
|
-
);
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
name: "APIFormGroup",
|
|
37
|
-
inheritAttrs: false
|
|
38
|
-
}
|
|
39
|
-
);
|
|
40
|
-
const subscribeToStore = (selector) => vueStore.useSelector(api.store, selector);
|
|
41
|
-
extendedApi.useSelector = subscribeToStore;
|
|
42
|
-
extendedApi.useStore = subscribeToStore;
|
|
43
|
-
extendedApi.Subscribe = Vue.defineComponent(
|
|
44
|
-
(props, context) => {
|
|
45
|
-
const allProps = { ...props, ...context.attrs };
|
|
46
|
-
const selector = allProps.selector ?? ((state) => state);
|
|
47
|
-
const data = vueStore.useSelector(api.store, selector);
|
|
48
|
-
return () => context.slots.default(data.value);
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
name: "Subscribe",
|
|
52
|
-
inheritAttrs: false
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
return extendedApi;
|
|
56
|
-
})();
|
|
57
|
-
Vue.onMounted(formApi.mount);
|
|
58
|
-
formApi.update(opts);
|
|
59
|
-
return formApi;
|
|
60
|
-
}
|
|
61
|
-
exports.useForm = useForm;
|
|
62
|
-
//# sourceMappingURL=useForm.cjs.map
|