@tanstack/vue-form 0.24.2 → 0.24.3
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/cjs/useField.cjs +3 -2
- package/dist/cjs/useField.cjs.map +1 -1
- package/dist/cjs/useField.d.cts +5 -7
- package/dist/cjs/useForm.cjs +9 -5
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/cjs/useForm.d.cts +11 -12
- package/dist/esm/useField.d.ts +5 -7
- package/dist/esm/useField.js +3 -2
- package/dist/esm/useField.js.map +1 -1
- package/dist/esm/useForm.d.ts +11 -12
- package/dist/esm/useForm.js +9 -5
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +2 -2
- package/src/useField.tsx +19 -41
- package/src/useForm.tsx +30 -27
package/dist/cjs/useField.cjs
CHANGED
|
@@ -10,8 +10,9 @@ function useField(opts) {
|
|
|
10
10
|
form: opts.form,
|
|
11
11
|
name: opts.name
|
|
12
12
|
});
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const extendedApi = api;
|
|
14
|
+
extendedApi.Field = Field;
|
|
15
|
+
return extendedApi;
|
|
15
16
|
})();
|
|
16
17
|
const fieldState = vueStore.useStore(fieldApi.store, (state) => state);
|
|
17
18
|
let cleanup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ninterface VueFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => {\n api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n VueFieldApi<TParentData, TFormValidator>\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & VueFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\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 { api: fieldApi, state: fieldState } as const\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n fieldOptions: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n >,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >\n state: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n }\n }>\n >,\n) => any\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\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.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":["FieldApi","useStore","onMounted","onUnmounted","watch","defineComponent"],"mappings":";;;;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAIA,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA;AAGT,QAAM,aAAaC,SAAAA,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJC,MAAAA,UAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAEDC,MAAAA,YAAY,MAAM;AACR;EAAA,CACT;AAEDC,MAAA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AA2DO,MAAM,QAAQC,IAAA;AAAA,EACnB,CAWE,cAOA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;;;"}
|
package/dist/cjs/useField.d.cts
CHANGED
|
@@ -2,18 +2,16 @@ import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
|
2
2
|
import { Ref, SetupContext, SlotsType } from 'vue';
|
|
3
3
|
import { UseFieldOptions } from './types.cjs';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Field: FieldComponent<TParentData, TFormValidator>;
|
|
8
|
-
}
|
|
5
|
+
interface VueFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
|
|
6
|
+
Field: FieldComponent<TParentData, TFormValidator>;
|
|
9
7
|
}
|
|
10
8
|
export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => {
|
|
11
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
9
|
+
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
|
|
12
10
|
state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
|
|
13
11
|
};
|
|
14
12
|
export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
|
|
15
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
16
|
-
state: Readonly<Ref<
|
|
13
|
+
readonly api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
|
|
14
|
+
readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TData>>>;
|
|
17
15
|
};
|
|
18
16
|
type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
19
17
|
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>, context: SetupContext<{}, SlotsType<{
|
package/dist/cjs/useForm.cjs
CHANGED
|
@@ -7,7 +7,8 @@ const useField = require("./useField.cjs");
|
|
|
7
7
|
function useForm(opts) {
|
|
8
8
|
const formApi = (() => {
|
|
9
9
|
const api = new formCore.FormApi(opts);
|
|
10
|
-
|
|
10
|
+
const extendedApi = api;
|
|
11
|
+
extendedApi.Field = vue.defineComponent(
|
|
11
12
|
(props, context) => {
|
|
12
13
|
return () => vue.h(
|
|
13
14
|
useField.Field,
|
|
@@ -20,11 +21,14 @@ function useForm(opts) {
|
|
|
20
21
|
inheritAttrs: false
|
|
21
22
|
}
|
|
22
23
|
);
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
extendedApi.useField = (props) => {
|
|
25
|
+
const field = useField.useField({ ...props, form: api });
|
|
26
|
+
return field;
|
|
27
|
+
};
|
|
28
|
+
extendedApi.useStore = (selector) => {
|
|
25
29
|
return vueStore.useStore(api.store, selector);
|
|
26
30
|
};
|
|
27
|
-
|
|
31
|
+
extendedApi.Subscribe = vue.defineComponent(
|
|
28
32
|
(props, context) => {
|
|
29
33
|
const allProps = { ...props, ...context.attrs };
|
|
30
34
|
const selector = allProps.selector ?? ((state) => state);
|
|
@@ -36,7 +40,7 @@ function useForm(opts) {
|
|
|
36
40
|
inheritAttrs: false
|
|
37
41
|
}
|
|
38
42
|
);
|
|
39
|
-
return
|
|
43
|
+
return extendedApi;
|
|
40
44
|
})();
|
|
41
45
|
vue.onMounted(formApi.mount);
|
|
42
46
|
formApi.update(opts);
|
package/dist/cjs/useForm.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\
|
|
1
|
+
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ninterface VueFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n },\n context: SetupContext<\n EmitsOptions,\n SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n >,\n ) => any\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const formApi = (() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n )\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n )\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":["FormApi","defineComponent","h","Field","useField","useStore","onMounted"],"mappings":";;;;;;AA6BO,SAAS,QAGd,MAA+C;AAC/C,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAIA,iBAAmC,IAAI;AAEvD,UAAM,cACJ;AACF,gBAAY,QAAQC,IAAA;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACLC,IAAA;AAAA,UACEC,SAAA;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAEU,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQC,SAAAA,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IAAA;AAEG,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAAC,kBAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,gBAAY,YAAYJ,IAAA;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAOI,SAAA,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAGTC,gBAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;;"}
|
package/dist/cjs/useForm.d.cts
CHANGED
|
@@ -3,16 +3,15 @@ import { NoInfer } from '@tanstack/vue-store';
|
|
|
3
3
|
import { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
|
|
4
4
|
import { FieldComponent, UseField } from './useField.cjs';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}>>) => any;
|
|
16
|
-
}
|
|
6
|
+
interface VueFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
7
|
+
Field: FieldComponent<TFormData, TFormValidator>;
|
|
8
|
+
useField: UseField<TFormData, TFormValidator>;
|
|
9
|
+
useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;
|
|
10
|
+
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
|
11
|
+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
12
|
+
}, context: SetupContext<EmitsOptions, SlotsType<{
|
|
13
|
+
default: NoInfer<FormState<TFormData>>;
|
|
14
|
+
}>>) => any;
|
|
17
15
|
}
|
|
18
|
-
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
|
|
16
|
+
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & VueFormApi<TFormData, TFormValidator>;
|
|
17
|
+
export {};
|
package/dist/esm/useField.d.ts
CHANGED
|
@@ -2,18 +2,16 @@ import { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
|
|
|
2
2
|
import { Ref, SetupContext, SlotsType } from 'vue';
|
|
3
3
|
import { UseFieldOptions } from './types.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Field: FieldComponent<TParentData, TFormValidator>;
|
|
8
|
-
}
|
|
5
|
+
interface VueFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
|
|
6
|
+
Field: FieldComponent<TParentData, TFormValidator>;
|
|
9
7
|
}
|
|
10
8
|
export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => {
|
|
11
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
9
|
+
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
|
|
12
10
|
state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
|
|
13
11
|
};
|
|
14
12
|
export declare function useField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
|
|
15
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
16
|
-
state: Readonly<Ref<
|
|
13
|
+
readonly api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & VueFieldApi<TParentData, TFormValidator>;
|
|
14
|
+
readonly state: Readonly<Ref<import('@tanstack/form-core').FieldState<TData>>>;
|
|
17
15
|
};
|
|
18
16
|
type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;
|
|
19
17
|
export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>, context: SetupContext<{}, SlotsType<{
|
package/dist/esm/useField.js
CHANGED
|
@@ -8,8 +8,9 @@ function useField(opts) {
|
|
|
8
8
|
form: opts.form,
|
|
9
9
|
name: opts.name
|
|
10
10
|
});
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const extendedApi = api;
|
|
12
|
+
extendedApi.Field = Field;
|
|
13
|
+
return extendedApi;
|
|
13
14
|
})();
|
|
14
15
|
const fieldState = useStore(fieldApi.store, (state) => state);
|
|
15
16
|
let cleanup;
|
package/dist/esm/useField.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type {
|
|
1
|
+
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\nimport type { Ref, SetupContext, SlotsType } from 'vue'\nimport type { UseFieldOptions } from './types'\n\ninterface VueFieldApi<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> {\n Field: FieldComponent<TParentData, TFormValidator>\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => {\n api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &\n VueFieldApi<TParentData, TFormValidator>\n state: Readonly<\n Ref<\n FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n >\n >\n}\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n) {\n const fieldApi = (() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n const extendedApi: typeof api & VueFieldApi<TParentData, TFormValidator> =\n api as never\n\n extendedApi.Field = Field as never\n\n return extendedApi\n })()\n\n const fieldState = useStore(fieldApi.store, (state) => state)\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 { api: fieldApi, state: fieldState } as const\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n fieldOptions: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n >,\n context: SetupContext<\n {},\n SlotsType<{\n default: {\n field: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >\n state: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >['state']\n }\n }>\n >,\n) => any\n\nexport const Field = defineComponent(\n <\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n >(\n fieldOptions: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\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.value,\n })\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"names":[],"mappings":";;;AAgDO,SAAS,SAWd,MAOA;AACA,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,UAAM,cACJ;AAEF,gBAAY,QAAQ;AAEb,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,KAAK,MAAe;AAAA,IACvD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AA2DO,MAAM,QAAQ;AAAA,EACnB,CAWE,cAOA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAO;AAExD,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;"}
|
package/dist/esm/useForm.d.ts
CHANGED
|
@@ -3,16 +3,15 @@ import { NoInfer } from '@tanstack/vue-store';
|
|
|
3
3
|
import { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue';
|
|
4
4
|
import { FieldComponent, UseField } from './useField.js';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}>>) => any;
|
|
16
|
-
}
|
|
6
|
+
interface VueFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
|
|
7
|
+
Field: FieldComponent<TFormData, TFormValidator>;
|
|
8
|
+
useField: UseField<TFormData, TFormValidator>;
|
|
9
|
+
useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;
|
|
10
|
+
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
|
11
|
+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
|
12
|
+
}, context: SetupContext<EmitsOptions, SlotsType<{
|
|
13
|
+
default: NoInfer<FormState<TFormData>>;
|
|
14
|
+
}>>) => any;
|
|
17
15
|
}
|
|
18
|
-
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;
|
|
16
|
+
export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator> & VueFormApi<TFormData, TFormValidator>;
|
|
17
|
+
export {};
|
package/dist/esm/useForm.js
CHANGED
|
@@ -5,7 +5,8 @@ import { Field, useField } from "./useField.js";
|
|
|
5
5
|
function useForm(opts) {
|
|
6
6
|
const formApi = (() => {
|
|
7
7
|
const api = new FormApi(opts);
|
|
8
|
-
|
|
8
|
+
const extendedApi = api;
|
|
9
|
+
extendedApi.Field = defineComponent(
|
|
9
10
|
(props, context) => {
|
|
10
11
|
return () => h(
|
|
11
12
|
Field,
|
|
@@ -18,11 +19,14 @@ function useForm(opts) {
|
|
|
18
19
|
inheritAttrs: false
|
|
19
20
|
}
|
|
20
21
|
);
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
extendedApi.useField = (props) => {
|
|
23
|
+
const field = useField({ ...props, form: api });
|
|
24
|
+
return field;
|
|
25
|
+
};
|
|
26
|
+
extendedApi.useStore = (selector) => {
|
|
23
27
|
return useStore(api.store, selector);
|
|
24
28
|
};
|
|
25
|
-
|
|
29
|
+
extendedApi.Subscribe = defineComponent(
|
|
26
30
|
(props, context) => {
|
|
27
31
|
const allProps = { ...props, ...context.attrs };
|
|
28
32
|
const selector = allProps.selector ?? ((state) => state);
|
|
@@ -34,7 +38,7 @@ function useForm(opts) {
|
|
|
34
38
|
inheritAttrs: false
|
|
35
39
|
}
|
|
36
40
|
);
|
|
37
|
-
return
|
|
41
|
+
return extendedApi;
|
|
38
42
|
})();
|
|
39
43
|
onMounted(formApi.mount);
|
|
40
44
|
formApi.update(opts);
|
package/dist/esm/useForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, h, onMounted } from 'vue'\nimport { Field, useField } from './useField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/vue-store'\nimport type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'\nimport type { FieldComponent, UseField } from './useField'\n\ninterface VueFormApi<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => Readonly<Ref<TSelected>>\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n },\n context: SetupContext<\n EmitsOptions,\n SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n >,\n ) => any\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(opts?: FormOptions<TFormData, TFormValidator>) {\n const formApi = (() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n\n const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =\n api as never\n extendedApi.Field = defineComponent(\n (props, context) => {\n return () =>\n h(\n Field as never,\n { ...props, ...context.attrs, form: api },\n context.slots,\n )\n },\n {\n name: 'APIField',\n inheritAttrs: false,\n },\n )\n extendedApi.useField = (props) => {\n const field = useField({ ...props, form: api })\n return field\n }\n extendedApi.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n extendedApi.Subscribe = defineComponent(\n (props, context) => {\n const allProps = { ...props, ...context.attrs }\n const selector = allProps.selector ?? ((state) => state)\n const data = useStore(api.store as never, selector as never)\n return () => context.slots.default!(data.value)\n },\n {\n name: 'Subscribe',\n inheritAttrs: false,\n },\n )\n\n return extendedApi\n })()\n\n onMounted(formApi.mount)\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi\n}\n"],"names":[],"mappings":";;;;AA6BO,SAAS,QAGd,MAA+C;AAC/C,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,UAAM,cACJ;AACF,gBAAY,QAAQ;AAAA,MAClB,CAAC,OAAO,YAAY;AAClB,eAAO,MACL;AAAA,UACE;AAAA,UACA,EAAE,GAAG,OAAO,GAAG,QAAQ,OAAO,MAAM,IAAI;AAAA,UACxC,QAAQ;AAAA,QAAA;AAAA,MAEd;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAEU,gBAAA,WAAW,CAAC,UAAU;AAChC,YAAM,QAAQ,SAAS,EAAE,GAAG,OAAO,MAAM,KAAK;AACvC,aAAA;AAAA,IAAA;AAEG,gBAAA,WAAW,CAAC,aAAa;AAC5B,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,gBAAY,YAAY;AAAA,MACtB,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAGT,YAAU,QAAQ,KAAK;AAGvB,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-form",
|
|
3
|
-
"version": "0.24.
|
|
3
|
+
"version": "0.24.3",
|
|
4
4
|
"description": "Powerful, type-safe forms for Vue.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@tanstack/vue-store": "^0.5.0",
|
|
41
|
-
"@tanstack/form-core": "0.24.
|
|
41
|
+
"@tanstack/form-core": "0.24.3"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@vitejs/plugin-vue": "^5.0.4",
|
package/src/useField.tsx
CHANGED
|
@@ -1,30 +1,17 @@
|
|
|
1
1
|
import { FieldApi } from '@tanstack/form-core'
|
|
2
2
|
import { useStore } from '@tanstack/vue-store'
|
|
3
3
|
import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
|
|
4
|
-
import type {
|
|
5
|
-
DeepKeys,
|
|
6
|
-
DeepValue,
|
|
7
|
-
Narrow,
|
|
8
|
-
Validator,
|
|
9
|
-
} from '@tanstack/form-core'
|
|
4
|
+
import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'
|
|
10
5
|
import type { Ref, SetupContext, SlotsType } from 'vue'
|
|
11
6
|
import type { UseFieldOptions } from './types'
|
|
12
7
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
TParentData,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
| undefined = undefined,
|
|
21
|
-
TFormValidator extends
|
|
22
|
-
| Validator<TParentData, unknown>
|
|
23
|
-
| undefined = undefined,
|
|
24
|
-
TData = DeepValue<TParentData, TName>,
|
|
25
|
-
> {
|
|
26
|
-
Field: FieldComponent<TParentData, TFormValidator>
|
|
27
|
-
}
|
|
8
|
+
interface VueFieldApi<
|
|
9
|
+
TParentData,
|
|
10
|
+
TFormValidator extends
|
|
11
|
+
| Validator<TParentData, unknown>
|
|
12
|
+
| undefined = undefined,
|
|
13
|
+
> {
|
|
14
|
+
Field: FieldComponent<TParentData, TFormValidator>
|
|
28
15
|
}
|
|
29
16
|
|
|
30
17
|
export type UseField<
|
|
@@ -44,7 +31,8 @@ export type UseField<
|
|
|
44
31
|
'form'
|
|
45
32
|
>,
|
|
46
33
|
) => {
|
|
47
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
|
|
34
|
+
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &
|
|
35
|
+
VueFieldApi<TParentData, TFormValidator>
|
|
48
36
|
state: Readonly<
|
|
49
37
|
Ref<
|
|
50
38
|
FieldApi<
|
|
@@ -76,30 +64,20 @@ export function useField<
|
|
|
76
64
|
TFormValidator,
|
|
77
65
|
TData
|
|
78
66
|
>,
|
|
79
|
-
)
|
|
80
|
-
api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
|
|
81
|
-
state: Readonly<
|
|
82
|
-
Ref<
|
|
83
|
-
FieldApi<
|
|
84
|
-
TParentData,
|
|
85
|
-
TName,
|
|
86
|
-
TFieldValidator,
|
|
87
|
-
TFormValidator,
|
|
88
|
-
TData
|
|
89
|
-
>['state']
|
|
90
|
-
>
|
|
91
|
-
>
|
|
92
|
-
} {
|
|
67
|
+
) {
|
|
93
68
|
const fieldApi = (() => {
|
|
94
69
|
const api = new FieldApi({
|
|
95
70
|
...opts,
|
|
96
71
|
form: opts.form,
|
|
97
72
|
name: opts.name,
|
|
98
|
-
}
|
|
73
|
+
})
|
|
74
|
+
|
|
75
|
+
const extendedApi: typeof api & VueFieldApi<TParentData, TFormValidator> =
|
|
76
|
+
api as never
|
|
99
77
|
|
|
100
|
-
|
|
78
|
+
extendedApi.Field = Field as never
|
|
101
79
|
|
|
102
|
-
return
|
|
80
|
+
return extendedApi
|
|
103
81
|
})()
|
|
104
82
|
|
|
105
83
|
const fieldState = useStore(fieldApi.store, (state) => state)
|
|
@@ -121,7 +99,7 @@ export function useField<
|
|
|
121
99
|
},
|
|
122
100
|
)
|
|
123
101
|
|
|
124
|
-
return { api: fieldApi, state: fieldState } as
|
|
102
|
+
return { api: fieldApi, state: fieldState } as const
|
|
125
103
|
}
|
|
126
104
|
|
|
127
105
|
type FieldComponentProps<
|
|
@@ -202,7 +180,7 @@ export const Field = defineComponent(
|
|
|
202
180
|
>,
|
|
203
181
|
context: SetupContext,
|
|
204
182
|
) => {
|
|
205
|
-
const fieldApi = useField({ ...fieldOptions, ...context.attrs }
|
|
183
|
+
const fieldApi = useField({ ...fieldOptions, ...context.attrs })
|
|
206
184
|
|
|
207
185
|
return () =>
|
|
208
186
|
context.slots.default!({
|
package/src/useForm.tsx
CHANGED
|
@@ -7,36 +7,36 @@ import type { NoInfer } from '@tanstack/vue-store'
|
|
|
7
7
|
import type { EmitsOptions, Ref, SetupContext, SlotsType } from 'vue'
|
|
8
8
|
import type { FieldComponent, UseField } from './useField'
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
) =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
interface VueFormApi<
|
|
11
|
+
TFormData,
|
|
12
|
+
TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
|
|
13
|
+
> {
|
|
14
|
+
Field: FieldComponent<TFormData, TFormValidator>
|
|
15
|
+
useField: UseField<TFormData, TFormValidator>
|
|
16
|
+
useStore: <TSelected = NoInfer<FormState<TFormData>>>(
|
|
17
|
+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
|
|
18
|
+
) => Readonly<Ref<TSelected>>
|
|
19
|
+
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(
|
|
20
|
+
props: {
|
|
21
|
+
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
|
|
22
|
+
},
|
|
23
|
+
context: SetupContext<
|
|
24
|
+
EmitsOptions,
|
|
25
|
+
SlotsType<{ default: NoInfer<FormState<TFormData>> }>
|
|
26
|
+
>,
|
|
27
|
+
) => any
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export function useForm<
|
|
31
31
|
TFormData,
|
|
32
32
|
TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
|
|
33
|
-
>(
|
|
34
|
-
opts?: FormOptions<TFormData, TFormValidator>,
|
|
35
|
-
): FormApi<TFormData, TFormValidator> {
|
|
33
|
+
>(opts?: FormOptions<TFormData, TFormValidator>) {
|
|
36
34
|
const formApi = (() => {
|
|
37
35
|
const api = new FormApi<TFormData, TFormValidator>(opts)
|
|
38
36
|
|
|
39
|
-
api
|
|
37
|
+
const extendedApi: typeof api & VueFormApi<TFormData, TFormValidator> =
|
|
38
|
+
api as never
|
|
39
|
+
extendedApi.Field = defineComponent(
|
|
40
40
|
(props, context) => {
|
|
41
41
|
return () =>
|
|
42
42
|
h(
|
|
@@ -50,11 +50,14 @@ export function useForm<
|
|
|
50
50
|
inheritAttrs: false,
|
|
51
51
|
},
|
|
52
52
|
)
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
extendedApi.useField = (props) => {
|
|
54
|
+
const field = useField({ ...props, form: api })
|
|
55
|
+
return field
|
|
56
|
+
}
|
|
57
|
+
extendedApi.useStore = (selector) => {
|
|
55
58
|
return useStore(api.store as never, selector as never) as never
|
|
56
59
|
}
|
|
57
|
-
|
|
60
|
+
extendedApi.Subscribe = defineComponent(
|
|
58
61
|
(props, context) => {
|
|
59
62
|
const allProps = { ...props, ...context.attrs }
|
|
60
63
|
const selector = allProps.selector ?? ((state) => state)
|
|
@@ -67,7 +70,7 @@ export function useForm<
|
|
|
67
70
|
},
|
|
68
71
|
)
|
|
69
72
|
|
|
70
|
-
return
|
|
73
|
+
return extendedApi
|
|
71
74
|
})()
|
|
72
75
|
|
|
73
76
|
onMounted(formApi.mount)
|
|
@@ -75,5 +78,5 @@ export function useForm<
|
|
|
75
78
|
// formApi.useStore((state) => state.isSubmitting)
|
|
76
79
|
formApi.update(opts)
|
|
77
80
|
|
|
78
|
-
return formApi
|
|
81
|
+
return formApi
|
|
79
82
|
}
|