@tanstack/vue-form 0.2.2 → 0.3.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/package.json +2 -2
- package/src/tests/useField.test.tsx +9 -9
- package/src/tests/useForm.test.tsx +9 -3
- package/src/useField.tsx +24 -21
- package/src/useForm.tsx +15 -4
- package/build/legacy/createFormFactory.cjs +0 -42
- package/build/legacy/createFormFactory.cjs.map +0 -1
- package/build/legacy/createFormFactory.d.cts +0 -12
- package/build/legacy/createFormFactory.d.ts +0 -12
- package/build/legacy/createFormFactory.js +0 -17
- package/build/legacy/createFormFactory.js.map +0 -1
- package/build/legacy/formContext.cjs +0 -46
- package/build/legacy/formContext.cjs.map +0 -1
- package/build/legacy/formContext.d.cts +0 -14
- package/build/legacy/formContext.d.ts +0 -14
- package/build/legacy/formContext.js +0 -19
- package/build/legacy/formContext.js.map +0 -1
- package/build/legacy/index.cjs +0 -33
- package/build/legacy/index.cjs.map +0 -1
- package/build/legacy/index.d.cts +0 -7
- package/build/legacy/index.d.ts +0 -7
- package/build/legacy/index.js +0 -7
- package/build/legacy/index.js.map +0 -1
- package/build/legacy/types.cjs +0 -19
- package/build/legacy/types.cjs.map +0 -1
- package/build/legacy/types.d.cts +0 -4
- package/build/legacy/types.d.ts +0 -4
- package/build/legacy/types.js +0 -1
- package/build/legacy/types.js.map +0 -1
- package/build/legacy/useField.cjs +0 -71
- package/build/legacy/useField.cjs.map +0 -1
- package/build/legacy/useField.d.cts +0 -35
- package/build/legacy/useField.d.ts +0 -35
- package/build/legacy/useField.js +0 -52
- package/build/legacy/useField.js.map +0 -1
- package/build/legacy/useForm.cjs +0 -70
- package/build/legacy/useForm.cjs.map +0 -1
- package/build/legacy/useForm.d.cts +0 -20
- package/build/legacy/useForm.d.ts +0 -20
- package/build/legacy/useForm.js +0 -45
- package/build/legacy/useForm.js.map +0 -1
- package/build/lib/createFormFactory.d.ts +0 -9
- package/build/lib/createFormFactory.d.ts.map +0 -1
- package/build/lib/createFormFactory.js +0 -12
- package/build/lib/formContext.d.ts +0 -12
- package/build/lib/formContext.d.ts.map +0 -1
- package/build/lib/formContext.js +0 -12
- package/build/lib/index.d.ts +0 -6
- package/build/lib/index.d.ts.map +0 -1
- package/build/lib/index.js +0 -5
- package/build/lib/tests/useField.test.d.ts +0 -3
- package/build/lib/tests/useField.test.d.ts.map +0 -1
- package/build/lib/tests/useField.test.jsx +0 -109
- package/build/lib/tests/useForm.test.d.ts +0 -3
- package/build/lib/tests/useForm.test.d.ts.map +0 -1
- package/build/lib/tests/useForm.test.jsx +0 -71
- package/build/lib/tests/utils.d.ts +0 -2
- package/build/lib/tests/utils.d.ts.map +0 -1
- package/build/lib/tests/utils.js +0 -5
- package/build/lib/types.d.ts +0 -3
- package/build/lib/types.d.ts.map +0 -1
- package/build/lib/types.js +0 -1
- package/build/lib/useField.d.ts +0 -33
- package/build/lib/useField.d.ts.map +0 -1
- package/build/lib/useField.jsx +0 -39
- package/build/lib/useForm.d.ts +0 -17
- package/build/lib/useForm.d.ts.map +0 -1
- package/build/lib/useForm.jsx +0 -35
- package/build/modern/createFormFactory.cjs +0 -42
- package/build/modern/createFormFactory.cjs.map +0 -1
- package/build/modern/createFormFactory.d.cts +0 -12
- package/build/modern/createFormFactory.d.ts +0 -12
- package/build/modern/createFormFactory.js +0 -17
- package/build/modern/createFormFactory.js.map +0 -1
- package/build/modern/formContext.cjs +0 -46
- package/build/modern/formContext.cjs.map +0 -1
- package/build/modern/formContext.d.cts +0 -14
- package/build/modern/formContext.d.ts +0 -14
- package/build/modern/formContext.js +0 -19
- package/build/modern/formContext.js.map +0 -1
- package/build/modern/index.cjs +0 -33
- package/build/modern/index.cjs.map +0 -1
- package/build/modern/index.d.cts +0 -7
- package/build/modern/index.d.ts +0 -7
- package/build/modern/index.js +0 -7
- package/build/modern/index.js.map +0 -1
- package/build/modern/types.cjs +0 -19
- package/build/modern/types.cjs.map +0 -1
- package/build/modern/types.d.cts +0 -4
- package/build/modern/types.d.ts +0 -4
- package/build/modern/types.js +0 -1
- package/build/modern/types.js.map +0 -1
- package/build/modern/useField.cjs +0 -71
- package/build/modern/useField.cjs.map +0 -1
- package/build/modern/useField.d.cts +0 -35
- package/build/modern/useField.d.ts +0 -35
- package/build/modern/useField.js +0 -52
- package/build/modern/useField.js.map +0 -1
- package/build/modern/useForm.cjs +0 -70
- package/build/modern/useForm.cjs.map +0 -1
- package/build/modern/useForm.d.cts +0 -20
- package/build/modern/useForm.d.ts +0 -20
- package/build/modern/useForm.js +0 -45
- package/build/modern/useForm.js.map +0 -1
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FieldApi, DeepKeys, FieldOptions, Narrow, DeepValue } from '@tanstack/form-core';
|
2
|
-
import { SetupContext, Ref } from 'vue-demi';
|
3
|
-
|
4
|
-
declare module '@tanstack/form-core' {
|
5
|
-
interface FieldApi<TData, TFormData> {
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
7
|
-
}
|
8
|
-
}
|
9
|
-
interface UseFieldOptions<TData, TFormData> extends FieldOptions<TData, TFormData> {
|
10
|
-
mode?: 'value' | 'array';
|
11
|
-
}
|
12
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
13
|
-
name: Narrow<TField>;
|
14
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
15
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): {
|
16
|
-
api: FieldApi<TData, TFormData>;
|
17
|
-
state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>;
|
18
|
-
};
|
19
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
20
|
-
type FieldComponent<TParentData, TFormData> = <TField>(fieldOptions: {
|
21
|
-
children?: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
22
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
23
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
24
|
-
index: number;
|
25
|
-
} : {
|
26
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
27
|
-
index?: never;
|
28
|
-
}), context: SetupContext) => any;
|
29
|
-
declare const Field: <TData, TFormData>(props: UseFieldOptions<TData, TFormData> & ({
|
30
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
31
|
-
} | {
|
32
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
33
|
-
})) => any;
|
34
|
-
|
35
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField };
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { FieldApi, DeepKeys, FieldOptions, Narrow, DeepValue } from '@tanstack/form-core';
|
2
|
-
import { SetupContext, Ref } from 'vue-demi';
|
3
|
-
|
4
|
-
declare module '@tanstack/form-core' {
|
5
|
-
interface FieldApi<TData, TFormData> {
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
7
|
-
}
|
8
|
-
}
|
9
|
-
interface UseFieldOptions<TData, TFormData> extends FieldOptions<TData, TFormData> {
|
10
|
-
mode?: 'value' | 'array';
|
11
|
-
}
|
12
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
13
|
-
name: Narrow<TField>;
|
14
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
15
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): {
|
16
|
-
api: FieldApi<TData, TFormData>;
|
17
|
-
state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>;
|
18
|
-
};
|
19
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
20
|
-
type FieldComponent<TParentData, TFormData> = <TField>(fieldOptions: {
|
21
|
-
children?: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
22
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
23
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
24
|
-
index: number;
|
25
|
-
} : {
|
26
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
27
|
-
index?: never;
|
28
|
-
}), context: SetupContext) => any;
|
29
|
-
declare const Field: <TData, TFormData>(props: UseFieldOptions<TData, TFormData> & ({
|
30
|
-
[x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
|
31
|
-
} | {
|
32
|
-
[x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
|
33
|
-
})) => any;
|
34
|
-
|
35
|
-
export { Field, FieldComponent, FieldValue, UseField, UseFieldOptions, useField };
|
package/build/legacy/useField.js
DELETED
@@ -1,52 +0,0 @@
|
|
1
|
-
// src/useField.tsx
|
2
|
-
import {
|
3
|
-
FieldApi
|
4
|
-
} from "@tanstack/form-core";
|
5
|
-
import { useStore } from "@tanstack/vue-store";
|
6
|
-
import {
|
7
|
-
defineComponent,
|
8
|
-
onMounted,
|
9
|
-
onUnmounted,
|
10
|
-
watch
|
11
|
-
} from "vue-demi";
|
12
|
-
import { provideFormContext, useFormContext } from "./formContext.js";
|
13
|
-
function useField(opts) {
|
14
|
-
const { formApi, parentFieldName } = useFormContext();
|
15
|
-
const fieldApi = (() => {
|
16
|
-
const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
|
17
|
-
const api = new FieldApi({ ...opts, form: formApi, name });
|
18
|
-
api.Field = Field;
|
19
|
-
return api;
|
20
|
-
})();
|
21
|
-
const fieldState = useStore(fieldApi.store, (state) => state);
|
22
|
-
let cleanup;
|
23
|
-
onMounted(() => {
|
24
|
-
cleanup = fieldApi.mount();
|
25
|
-
});
|
26
|
-
onUnmounted(() => {
|
27
|
-
cleanup();
|
28
|
-
});
|
29
|
-
watch(
|
30
|
-
() => opts,
|
31
|
-
() => {
|
32
|
-
fieldApi.update({ ...opts, form: formApi });
|
33
|
-
}
|
34
|
-
);
|
35
|
-
return { api: fieldApi, state: fieldState };
|
36
|
-
}
|
37
|
-
var Field = defineComponent(
|
38
|
-
(fieldOptions, context) => {
|
39
|
-
const fieldApi = useField({ ...fieldOptions, ...context.attrs });
|
40
|
-
provideFormContext({
|
41
|
-
formApi: fieldApi.api.form,
|
42
|
-
parentFieldName: fieldApi.api.name
|
43
|
-
});
|
44
|
-
return () => context.slots.default(fieldApi.api, fieldApi.state.value);
|
45
|
-
},
|
46
|
-
{ name: "Field", inheritAttrs: false }
|
47
|
-
);
|
48
|
-
export {
|
49
|
-
Field,
|
50
|
-
useField
|
51
|
-
};
|
52
|
-
//# sourceMappingURL=useField.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import {\n type DeepKeys,\n type DeepValue,\n FieldApi,\n type FieldOptions,\n type Narrow,\n} from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport {\n type SetupContext,\n defineComponent,\n type Ref,\n onMounted,\n onUnmounted,\n watch,\n} from 'vue-demi'\nimport { provideFormContext, useFormContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport interface UseFieldOptions<TData, TFormData>\n extends FieldOptions<TData, TFormData> {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): {\n api: FieldApi<TData, TFormData>\n state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>\n} {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const fieldApi = (() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as never })\n\n api.Field = Field as never\n\n return api\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: formApi } as never)\n },\n )\n\n return { api: fieldApi, state: fieldState } as never\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>(\n fieldOptions: {\n children?: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n } & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n > &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n }),\n context: SetupContext,\n) => any\n\nexport const Field = defineComponent(\n <TData, TFormData>(\n fieldOptions: UseFieldOptions<TData, TFormData>,\n context: SetupContext,\n ) => {\n const fieldApi = useField({ ...fieldOptions, ...context.attrs })\n\n provideFormContext({\n formApi: fieldApi.api.form,\n parentFieldName: fieldApi.api.name,\n } as never)\n\n return () => context.slots.default!(fieldApi.api, fieldApi.state.value)\n },\n { name: 'Field', inheritAttrs: false },\n)\n"],"mappings":";AAAA;AAAA,EAGE;AAAA,OAGK;AACP,SAAS,gBAAgB;AACzB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB,sBAAsB;AAqB5C,SAAS,SACd,MAIA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AACtB,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,SAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAoB,CAAC;AAExE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,GAAG;AAEH,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAE5D,MAAI;AACJ,YAAU,MAAM;AACd,cAAU,SAAS,MAAM;AAAA,EAC3B,CAAC;AAED,cAAY,MAAM;AAChB,YAAQ;AAAA,EACV,CAAC;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,IACrD;AAAA,EACF;AAEA,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAqDO,IAAM,QAAQ;AAAA,EACnB,CACE,cACA,YACG;AACH,UAAM,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,MAAM,CAAC;AAE/D,uBAAmB;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAChC,CAAU;AAEV,WAAO,MAAM,QAAQ,MAAM,QAAS,SAAS,KAAK,SAAS,MAAM,KAAK;AAAA,EACxE;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;","names":[]}
|
package/build/legacy/useForm.cjs
DELETED
@@ -1,70 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __export = (target, all) => {
|
7
|
-
for (var name in all)
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
-
};
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
-
for (let key of __getOwnPropNames(from))
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
-
|
20
|
-
// src/useForm.tsx
|
21
|
-
var useForm_exports = {};
|
22
|
-
__export(useForm_exports, {
|
23
|
-
useForm: () => useForm
|
24
|
-
});
|
25
|
-
module.exports = __toCommonJS(useForm_exports);
|
26
|
-
var import_form_core = require("@tanstack/form-core");
|
27
|
-
var import_vue_store = require("@tanstack/vue-store");
|
28
|
-
var import_useField = require("./useField.cjs");
|
29
|
-
var import_formContext = require("./formContext.cjs");
|
30
|
-
var import_vue_demi = require("vue-demi");
|
31
|
-
function useForm(opts) {
|
32
|
-
const formApi = (() => {
|
33
|
-
const api = new import_form_core.FormApi(opts);
|
34
|
-
api.Provider = (0, import_vue_demi.defineComponent)(
|
35
|
-
(_, context) => {
|
36
|
-
(0, import_formContext.provideFormContext)({ formApi });
|
37
|
-
return () => context.slots.default();
|
38
|
-
},
|
39
|
-
{ name: "Provider" }
|
40
|
-
);
|
41
|
-
api.provideFormContext = () => {
|
42
|
-
(0, import_formContext.provideFormContext)({ formApi });
|
43
|
-
};
|
44
|
-
api.Field = import_useField.Field;
|
45
|
-
api.useField = import_useField.useField;
|
46
|
-
api.useStore = (selector) => {
|
47
|
-
return (0, import_vue_store.useStore)(api.store, selector);
|
48
|
-
};
|
49
|
-
api.Subscribe = (0, import_vue_demi.defineComponent)(
|
50
|
-
(props, context) => {
|
51
|
-
const allProps = { ...props, ...context.attrs };
|
52
|
-
const selector = allProps.selector ?? ((state) => state);
|
53
|
-
const data = (0, import_vue_store.useStore)(api.store, selector);
|
54
|
-
return () => context.slots.default(data.value);
|
55
|
-
},
|
56
|
-
{
|
57
|
-
name: "Subscribe",
|
58
|
-
inheritAttrs: false
|
59
|
-
}
|
60
|
-
);
|
61
|
-
return api;
|
62
|
-
})();
|
63
|
-
formApi.update(opts);
|
64
|
-
return formApi;
|
65
|
-
}
|
66
|
-
// Annotate the CommonJS export names for ESM import in node:
|
67
|
-
0 && (module.exports = {
|
68
|
-
useForm
|
69
|
-
});
|
70
|
-
//# sourceMappingURL=useForm.cjs.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport { defineComponent } from 'vue-demi'\nimport type { NoInfer } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: Record<string, any> & {}) => any\n provideFormContext: () => void\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const formApi = (() => {\n const api = new FormApi<TData>(opts)\n\n api.Provider = defineComponent(\n (_, context) => {\n provideFormContext({ formApi })\n return () => context.slots.default!()\n },\n { name: 'Provider' },\n )\n api.provideFormContext = () => {\n provideFormContext({ formApi })\n }\n api.Field = Field as never\n api.useField = useField as never\n api.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n api.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 api\n })()\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi as never\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0D;AAC1D,uBAAyB;AACzB,sBAAoE;AACpE,yBAAmC;AACnC,sBAAgC;AAmBzB,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,eAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,mDAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,iDAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,iBAAO,2BAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,gBAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,WAAO,2BAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
-
import { FieldComponent, UseField } from './useField.cjs';
|
3
|
-
import { NoInfer } from './types.cjs';
|
4
|
-
import 'vue-demi';
|
5
|
-
|
6
|
-
declare module '@tanstack/form-core' {
|
7
|
-
interface FormApi<TFormData> {
|
8
|
-
Provider: (props: Record<string, any> & {}) => any;
|
9
|
-
provideFormContext: () => void;
|
10
|
-
Field: FieldComponent<TFormData, TFormData>;
|
11
|
-
useField: UseField<TFormData>;
|
12
|
-
useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
|
13
|
-
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
14
|
-
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
15
|
-
}) => any;
|
16
|
-
}
|
17
|
-
}
|
18
|
-
declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
|
19
|
-
|
20
|
-
export { useForm };
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
|
2
|
-
import { FieldComponent, UseField } from './useField.js';
|
3
|
-
import { NoInfer } from './types.js';
|
4
|
-
import 'vue-demi';
|
5
|
-
|
6
|
-
declare module '@tanstack/form-core' {
|
7
|
-
interface FormApi<TFormData> {
|
8
|
-
Provider: (props: Record<string, any> & {}) => any;
|
9
|
-
provideFormContext: () => void;
|
10
|
-
Field: FieldComponent<TFormData, TFormData>;
|
11
|
-
useField: UseField<TFormData>;
|
12
|
-
useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
|
13
|
-
Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
|
14
|
-
selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
|
15
|
-
}) => any;
|
16
|
-
}
|
17
|
-
}
|
18
|
-
declare function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData>;
|
19
|
-
|
20
|
-
export { useForm };
|
package/build/legacy/useForm.js
DELETED
@@ -1,45 +0,0 @@
|
|
1
|
-
// src/useForm.tsx
|
2
|
-
import { FormApi } from "@tanstack/form-core";
|
3
|
-
import { useStore } from "@tanstack/vue-store";
|
4
|
-
import { Field, useField } from "./useField.js";
|
5
|
-
import { provideFormContext } from "./formContext.js";
|
6
|
-
import { defineComponent } from "vue-demi";
|
7
|
-
function useForm(opts) {
|
8
|
-
const formApi = (() => {
|
9
|
-
const api = new FormApi(opts);
|
10
|
-
api.Provider = defineComponent(
|
11
|
-
(_, context) => {
|
12
|
-
provideFormContext({ formApi });
|
13
|
-
return () => context.slots.default();
|
14
|
-
},
|
15
|
-
{ name: "Provider" }
|
16
|
-
);
|
17
|
-
api.provideFormContext = () => {
|
18
|
-
provideFormContext({ formApi });
|
19
|
-
};
|
20
|
-
api.Field = Field;
|
21
|
-
api.useField = useField;
|
22
|
-
api.useStore = (selector) => {
|
23
|
-
return useStore(api.store, selector);
|
24
|
-
};
|
25
|
-
api.Subscribe = defineComponent(
|
26
|
-
(props, context) => {
|
27
|
-
const allProps = { ...props, ...context.attrs };
|
28
|
-
const selector = allProps.selector ?? ((state) => state);
|
29
|
-
const data = useStore(api.store, selector);
|
30
|
-
return () => context.slots.default(data.value);
|
31
|
-
},
|
32
|
-
{
|
33
|
-
name: "Subscribe",
|
34
|
-
inheritAttrs: false
|
35
|
-
}
|
36
|
-
);
|
37
|
-
return api;
|
38
|
-
})();
|
39
|
-
formApi.update(opts);
|
40
|
-
return formApi;
|
41
|
-
}
|
42
|
-
export {
|
43
|
-
useForm
|
44
|
-
};
|
45
|
-
//# sourceMappingURL=useForm.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport { defineComponent } from 'vue-demi'\nimport type { NoInfer } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: Record<string, any> & {}) => any\n provideFormContext: () => void\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const formApi = (() => {\n const api = new FormApi<TData>(opts)\n\n api.Provider = defineComponent(\n (_, context) => {\n provideFormContext({ formApi })\n return () => context.slots.default!()\n },\n { name: 'Provider' },\n )\n api.provideFormContext = () => {\n provideFormContext({ formApi })\n }\n api.Field = Field as never\n api.useField = useField as never\n api.useStore = (selector) => {\n return useStore(api.store as never, selector as never) as never\n }\n api.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 api\n })()\n\n // formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi as never\n}\n"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAS,gBAAgB;AACzB,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAmBzB,SAAS,QAAe,MAA2C;AACxE,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,2BAAmB,EAAE,QAAQ,CAAC;AAC9B,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,yBAAmB,EAAE,QAAQ,CAAC;AAAA,IAChC;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,QAAI,YAAY;AAAA,MACd,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,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import type { FormApi, FormOptions } from '@tanstack/form-core';
|
2
|
-
import { type UseField, type FieldComponent } from './useField';
|
3
|
-
export type FormFactory<TFormData> = {
|
4
|
-
useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>;
|
5
|
-
useField: UseField<TFormData>;
|
6
|
-
Field: FieldComponent<TFormData, TFormData>;
|
7
|
-
};
|
8
|
-
export declare function createFormFactory<TFormData>(defaultOpts?: FormOptions<TFormData>): FormFactory<TFormData>;
|
9
|
-
//# sourceMappingURL=createFormFactory.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"createFormFactory.d.ts","sourceRoot":"","sources":["../../src/createFormFactory.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAmB,MAAM,YAAY,CAAA;AAGhF,MAAM,MAAM,WAAW,CAAC,SAAS,IAAI;IACnC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9D,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,KAAK,EAAE,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;CAC5C,CAAA;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EACzC,WAAW,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GACnC,WAAW,CAAC,SAAS,CAAC,CASxB"}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import { Field, useField } from './useField';
|
2
|
-
import { useForm } from './useForm';
|
3
|
-
export function createFormFactory(defaultOpts) {
|
4
|
-
return {
|
5
|
-
useForm: (opts) => {
|
6
|
-
const formOptions = Object.assign({}, defaultOpts, opts);
|
7
|
-
return useForm(formOptions);
|
8
|
-
},
|
9
|
-
useField: useField,
|
10
|
-
Field: Field,
|
11
|
-
};
|
12
|
-
}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import type { FormApi } from '@tanstack/form-core';
|
2
|
-
export type FormContext = {
|
3
|
-
formApi: FormApi<any>;
|
4
|
-
parentFieldName?: string;
|
5
|
-
} | null;
|
6
|
-
export declare const formContext: unique symbol;
|
7
|
-
export declare function provideFormContext(val: FormContext): void;
|
8
|
-
export declare function useFormContext(): {
|
9
|
-
formApi: FormApi<any>;
|
10
|
-
parentFieldName?: string | undefined;
|
11
|
-
};
|
12
|
-
//# sourceMappingURL=formContext.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"formContext.d.ts","sourceRoot":"","sources":["../../src/formContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAGlD,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,GAAG,IAAI,CAAA;AAER,eAAO,MAAM,WAAW,eAAwB,CAAA;AAEhD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,WAAW,QAElD;AAED,wBAAgB,cAAc;;;EAQ7B"}
|
package/build/lib/formContext.js
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
import { inject, provide } from 'vue-demi';
|
2
|
-
export const formContext = Symbol('FormContext');
|
3
|
-
export function provideFormContext(val) {
|
4
|
-
provide(formContext, val);
|
5
|
-
}
|
6
|
-
export function useFormContext() {
|
7
|
-
const formApi = inject(formContext);
|
8
|
-
if (!formApi) {
|
9
|
-
throw new Error(`You are trying to use the form API outside of a form!`);
|
10
|
-
}
|
11
|
-
return formApi;
|
12
|
-
}
|
package/build/lib/index.d.ts
DELETED
package/build/lib/index.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}
|
package/build/lib/index.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useField.test.d.ts","sourceRoot":"","sources":["../../../src/tests/useField.test.tsx"],"names":[],"mappings":";AAGA,OAAO,2BAA2B,CAAA"}
|
@@ -1,109 +0,0 @@
|
|
1
|
-
/// <reference lib="dom" />
|
2
|
-
import { defineComponent } from 'vue-demi';
|
3
|
-
import { render, waitFor } from '@testing-library/vue';
|
4
|
-
import '@testing-library/jest-dom';
|
5
|
-
import { createFormFactory, provideFormContext, } from '../index';
|
6
|
-
import userEvent from '@testing-library/user-event';
|
7
|
-
import { sleep } from './utils';
|
8
|
-
const user = userEvent.setup();
|
9
|
-
describe('useField', () => {
|
10
|
-
it('should allow to set default value', async () => {
|
11
|
-
const formFactory = createFormFactory();
|
12
|
-
const Comp = defineComponent(() => {
|
13
|
-
const form = formFactory.useForm();
|
14
|
-
provideFormContext({ formApi: form });
|
15
|
-
return () => (<form.Field name="firstName" defaultValue="FirstName">
|
16
|
-
{(field) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
|
17
|
-
</form.Field>);
|
18
|
-
});
|
19
|
-
const { getByTestId } = render(Comp);
|
20
|
-
const input = getByTestId('fieldinput');
|
21
|
-
await waitFor(() => expect(input).toHaveValue('FirstName'));
|
22
|
-
});
|
23
|
-
it('should not validate on change if isTouched is false', async () => {
|
24
|
-
const error = 'Please enter a different value';
|
25
|
-
const formFactory = createFormFactory();
|
26
|
-
const Comp = defineComponent(() => {
|
27
|
-
const form = formFactory.useForm();
|
28
|
-
provideFormContext({ formApi: form });
|
29
|
-
return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
|
30
|
-
{(field) => (<div>
|
31
|
-
<input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.setValue(e.target.value)}/>
|
32
|
-
<p>{field.getMeta().error}</p>
|
33
|
-
</div>)}
|
34
|
-
</form.Field>);
|
35
|
-
});
|
36
|
-
const { getByTestId, queryByText } = render(Comp);
|
37
|
-
const input = getByTestId('fieldinput');
|
38
|
-
await user.type(input, 'other');
|
39
|
-
expect(queryByText(error)).not.toBeInTheDocument();
|
40
|
-
});
|
41
|
-
it('should validate on change if isTouched is true', async () => {
|
42
|
-
const error = 'Please enter a different value';
|
43
|
-
const formFactory = createFormFactory();
|
44
|
-
const Comp = defineComponent(() => {
|
45
|
-
const form = formFactory.useForm();
|
46
|
-
provideFormContext({ formApi: form });
|
47
|
-
return () => (<form.Field name="firstName" onChange={(value) => (value === 'other' ? error : undefined)}>
|
48
|
-
{(field) => (<div>
|
49
|
-
<input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
|
50
|
-
<p>{field.getMeta().error}</p>
|
51
|
-
</div>)}
|
52
|
-
</form.Field>);
|
53
|
-
});
|
54
|
-
const { getByTestId, getByText, queryByText } = render(Comp);
|
55
|
-
const input = getByTestId('fieldinput');
|
56
|
-
expect(queryByText(error)).not.toBeInTheDocument();
|
57
|
-
await user.type(input, 'other');
|
58
|
-
expect(getByText(error)).toBeInTheDocument();
|
59
|
-
});
|
60
|
-
it('should validate async on change', async () => {
|
61
|
-
const error = 'Please enter a different value';
|
62
|
-
const formFactory = createFormFactory();
|
63
|
-
const Comp = defineComponent(() => {
|
64
|
-
const form = formFactory.useForm();
|
65
|
-
provideFormContext({ formApi: form });
|
66
|
-
return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsync={async () => {
|
67
|
-
await sleep(10);
|
68
|
-
return error;
|
69
|
-
}}>
|
70
|
-
{(field) => (<div>
|
71
|
-
<input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
|
72
|
-
<p>{field.getMeta().error}</p>
|
73
|
-
</div>)}
|
74
|
-
</form.Field>);
|
75
|
-
});
|
76
|
-
const { getByTestId, getByText, queryByText } = render(Comp);
|
77
|
-
const input = getByTestId('fieldinput');
|
78
|
-
expect(queryByText(error)).not.toBeInTheDocument();
|
79
|
-
await user.type(input, 'other');
|
80
|
-
await waitFor(() => getByText(error));
|
81
|
-
expect(getByText(error)).toBeInTheDocument();
|
82
|
-
});
|
83
|
-
it('should validate async on change with debounce', async () => {
|
84
|
-
const mockFn = vi.fn();
|
85
|
-
const error = 'Please enter a different value';
|
86
|
-
const formFactory = createFormFactory();
|
87
|
-
const Comp = defineComponent(() => {
|
88
|
-
const form = formFactory.useForm();
|
89
|
-
provideFormContext({ formApi: form });
|
90
|
-
return () => (<form.Field name="firstName" defaultMeta={{ isTouched: true }} onChangeAsyncDebounceMs={100} onChangeAsync={async () => {
|
91
|
-
mockFn();
|
92
|
-
await sleep(10);
|
93
|
-
return error;
|
94
|
-
}}>
|
95
|
-
{(field) => (<div>
|
96
|
-
<input data-testid="fieldinput" name={field.name} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>
|
97
|
-
<p>{field.getMeta().error}</p>
|
98
|
-
</div>)}
|
99
|
-
</form.Field>);
|
100
|
-
});
|
101
|
-
const { getByTestId, getByText } = render(<Comp />);
|
102
|
-
const input = getByTestId('fieldinput');
|
103
|
-
await user.type(input, 'other');
|
104
|
-
// mockFn will have been called 5 times without onChangeAsyncDebounceMs
|
105
|
-
expect(mockFn).toHaveBeenCalledTimes(0);
|
106
|
-
await waitFor(() => getByText(error));
|
107
|
-
expect(getByText(error)).toBeInTheDocument();
|
108
|
-
});
|
109
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useForm.test.d.ts","sourceRoot":"","sources":["../../../src/tests/useForm.test.tsx"],"names":[],"mappings":";AAGA,OAAO,2BAA2B,CAAA"}
|
@@ -1,71 +0,0 @@
|
|
1
|
-
/// <reference lib="dom" />
|
2
|
-
import { defineComponent, ref } from 'vue-demi';
|
3
|
-
import { render, waitFor } from '@testing-library/vue';
|
4
|
-
import '@testing-library/jest-dom';
|
5
|
-
import { createFormFactory, provideFormContext, useForm, } from '../index';
|
6
|
-
import userEvent from '@testing-library/user-event';
|
7
|
-
const user = userEvent.setup();
|
8
|
-
describe('useForm', () => {
|
9
|
-
it('preserved field state', async () => {
|
10
|
-
const formFactory = createFormFactory();
|
11
|
-
const Comp = defineComponent(() => {
|
12
|
-
const form = formFactory.useForm();
|
13
|
-
provideFormContext({ formApi: form });
|
14
|
-
return () => (<form.Field name="firstName" defaultValue="">
|
15
|
-
{(field) => (<input data-testid={'fieldinput'} value={field.state.value} onBlur={field.handleBlur} onInput={(e) => field.handleChange(e.target.value)}/>)}
|
16
|
-
</form.Field>);
|
17
|
-
});
|
18
|
-
const { getByTestId, queryByText } = render(Comp);
|
19
|
-
const input = getByTestId('fieldinput');
|
20
|
-
expect(queryByText('FirstName')).not.toBeInTheDocument();
|
21
|
-
await user.type(input, 'FirstName');
|
22
|
-
expect(input).toHaveValue('FirstName');
|
23
|
-
});
|
24
|
-
it('should allow default values to be set', async () => {
|
25
|
-
const formFactory = createFormFactory();
|
26
|
-
const Comp = defineComponent(() => {
|
27
|
-
const form = formFactory.useForm({
|
28
|
-
defaultValues: {
|
29
|
-
firstName: 'FirstName',
|
30
|
-
lastName: 'LastName',
|
31
|
-
},
|
32
|
-
});
|
33
|
-
form.provideFormContext();
|
34
|
-
return () => (<form.Field name="firstName" defaultValue="">
|
35
|
-
{(field) => <p>{field.state.value}</p>}
|
36
|
-
</form.Field>);
|
37
|
-
});
|
38
|
-
const { findByText, queryByText } = render(Comp);
|
39
|
-
expect(await findByText('FirstName')).toBeInTheDocument();
|
40
|
-
expect(queryByText('LastName')).not.toBeInTheDocument();
|
41
|
-
});
|
42
|
-
it('should handle submitting properly', async () => {
|
43
|
-
const Comp = defineComponent(() => {
|
44
|
-
const submittedData = ref();
|
45
|
-
const form = useForm({
|
46
|
-
defaultValues: {
|
47
|
-
firstName: 'FirstName',
|
48
|
-
},
|
49
|
-
onSubmit: (data) => {
|
50
|
-
submittedData.value = data;
|
51
|
-
},
|
52
|
-
});
|
53
|
-
form.provideFormContext();
|
54
|
-
return () => (<form.Provider>
|
55
|
-
<form.Field name="firstName">
|
56
|
-
{(field) => {
|
57
|
-
return (<input value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} placeholder={'First name'}/>);
|
58
|
-
}}
|
59
|
-
</form.Field>
|
60
|
-
<button onClick={form.handleSubmit}>Submit</button>
|
61
|
-
{submittedData.value && (<p>Submitted data: {submittedData.value.firstName}</p>)}
|
62
|
-
</form.Provider>);
|
63
|
-
});
|
64
|
-
const { findByPlaceholderText, getByText } = render(Comp);
|
65
|
-
const input = await findByPlaceholderText('First name');
|
66
|
-
await user.clear(input);
|
67
|
-
await user.type(input, 'OtherName');
|
68
|
-
await user.click(getByText('Submit'));
|
69
|
-
await waitFor(() => expect(getByText('Submitted data: OtherName')).toBeInTheDocument());
|
70
|
-
});
|
71
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/tests/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD"}
|
package/build/lib/tests/utils.js
DELETED
package/build/lib/types.d.ts
DELETED
package/build/lib/types.d.ts.map
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,CAAA;AAEvD,MAAM,MAAM,cAAc,GAAG,CAAC,CAAA"}
|
package/build/lib/types.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export {};
|