@tanstack/form-core 1.19.5 → 1.21.0
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/EventClient.cjs +13 -0
- package/dist/cjs/EventClient.cjs.map +1 -0
- package/dist/cjs/EventClient.d.cts +52 -0
- package/dist/cjs/FieldGroupApi.cjs +20 -0
- package/dist/cjs/FieldGroupApi.cjs.map +1 -1
- package/dist/cjs/FieldGroupApi.d.cts +7 -2
- package/dist/cjs/FormApi.cjs +68 -3
- package/dist/cjs/FormApi.cjs.map +1 -1
- package/dist/cjs/FormApi.d.cts +11 -2
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/index.d.cts +1 -0
- package/dist/esm/EventClient.d.ts +52 -0
- package/dist/esm/EventClient.js +13 -0
- package/dist/esm/EventClient.js.map +1 -0
- package/dist/esm/FieldGroupApi.d.ts +7 -2
- package/dist/esm/FieldGroupApi.js +20 -0
- package/dist/esm/FieldGroupApi.js.map +1 -1
- package/dist/esm/FormApi.d.ts +11 -2
- package/dist/esm/FormApi.js +68 -3
- package/dist/esm/FormApi.js.map +1 -1
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -2
- package/src/EventClient.ts +73 -0
- package/src/FieldGroupApi.ts +52 -1
- package/src/FormApi.ts +123 -5
- package/src/index.ts +1 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const devtoolsEventClient = require("@tanstack/devtools-event-client");
|
|
4
|
+
class FormEventClient extends devtoolsEventClient.EventClient {
|
|
5
|
+
constructor() {
|
|
6
|
+
super({
|
|
7
|
+
pluginId: "form-devtools"
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
const formEventClient = new FormEventClient();
|
|
12
|
+
exports.formEventClient = formEventClient;
|
|
13
|
+
//# sourceMappingURL=EventClient.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EventClient.cjs","sources":["../../src/EventClient.ts"],"sourcesContent":["import { EventClient } from '@tanstack/devtools-event-client'\n\nimport type { AnyFormOptions, AnyFormState } from './FormApi'\n\ntype ExtractEventNames<T> = T extends `${string}:${infer EventName}`\n ? EventName\n : never\n\nexport type BroadcastFormState = {\n id: string\n state: AnyFormState\n options: AnyFormOptions\n}\n\nexport type BroadcastFormSubmissionState =\n | {\n id: string\n submissionAttempt: number\n successful: false\n stage: 'validateAllFields' | 'validate'\n errors: any[]\n }\n | {\n id: string\n submissionAttempt: number\n successful: false\n stage: 'inflight'\n onError: unknown\n }\n | {\n id: string\n submissionAttempt: number\n successful: true\n }\n\nexport type BroadcastFormUnmounted = {\n id: string\n}\n\nexport type RequestFormState = {\n id: string\n}\n\nexport type RequestFormReset = {\n id: string\n}\n\nexport type RequestFormForceReset = {\n id: string\n}\n\ntype EventMap = {\n 'form-devtools:form-state-change': BroadcastFormState\n 'form-devtools:form-submission-state-change': BroadcastFormSubmissionState\n 'form-devtools:form-unmounted': BroadcastFormUnmounted\n 'form-devtools:request-form-state': RequestFormState\n 'form-devtools:request-form-reset': RequestFormReset\n 'form-devtools:request-form-force-submit': RequestFormForceReset\n}\n\nexport type EventClientEventMap = keyof EventMap\n\nexport type EventClientEventNames = ExtractEventNames<EventClientEventMap>\n\nclass FormEventClient extends EventClient<EventMap> {\n constructor() {\n super({\n pluginId: 'form-devtools',\n })\n }\n}\n\nexport const formEventClient = new FormEventClient()\n"],"names":["EventClient"],"mappings":";;;AAgEA,MAAM,wBAAwBA,oBAAAA,YAAsB;AAAA,EAClD,cAAc;AACZ,UAAM;AAAA,MACJ,UAAU;AAAA,IAAA,CACX;AAAA,EACH;AACF;AAEO,MAAM,kBAAkB,IAAI,gBAAA;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { EventClient } from '@tanstack/devtools-event-client';
|
|
2
|
+
import { AnyFormOptions, AnyFormState } from './FormApi.cjs';
|
|
3
|
+
type ExtractEventNames<T> = T extends `${string}:${infer EventName}` ? EventName : never;
|
|
4
|
+
export type BroadcastFormState = {
|
|
5
|
+
id: string;
|
|
6
|
+
state: AnyFormState;
|
|
7
|
+
options: AnyFormOptions;
|
|
8
|
+
};
|
|
9
|
+
export type BroadcastFormSubmissionState = {
|
|
10
|
+
id: string;
|
|
11
|
+
submissionAttempt: number;
|
|
12
|
+
successful: false;
|
|
13
|
+
stage: 'validateAllFields' | 'validate';
|
|
14
|
+
errors: any[];
|
|
15
|
+
} | {
|
|
16
|
+
id: string;
|
|
17
|
+
submissionAttempt: number;
|
|
18
|
+
successful: false;
|
|
19
|
+
stage: 'inflight';
|
|
20
|
+
onError: unknown;
|
|
21
|
+
} | {
|
|
22
|
+
id: string;
|
|
23
|
+
submissionAttempt: number;
|
|
24
|
+
successful: true;
|
|
25
|
+
};
|
|
26
|
+
export type BroadcastFormUnmounted = {
|
|
27
|
+
id: string;
|
|
28
|
+
};
|
|
29
|
+
export type RequestFormState = {
|
|
30
|
+
id: string;
|
|
31
|
+
};
|
|
32
|
+
export type RequestFormReset = {
|
|
33
|
+
id: string;
|
|
34
|
+
};
|
|
35
|
+
export type RequestFormForceReset = {
|
|
36
|
+
id: string;
|
|
37
|
+
};
|
|
38
|
+
type EventMap = {
|
|
39
|
+
'form-devtools:form-state-change': BroadcastFormState;
|
|
40
|
+
'form-devtools:form-submission-state-change': BroadcastFormSubmissionState;
|
|
41
|
+
'form-devtools:form-unmounted': BroadcastFormUnmounted;
|
|
42
|
+
'form-devtools:request-form-state': RequestFormState;
|
|
43
|
+
'form-devtools:request-form-reset': RequestFormReset;
|
|
44
|
+
'form-devtools:request-form-force-submit': RequestFormForceReset;
|
|
45
|
+
};
|
|
46
|
+
export type EventClientEventMap = keyof EventMap;
|
|
47
|
+
export type EventClientEventNames = ExtractEventNames<EventClientEventMap>;
|
|
48
|
+
declare class FormEventClient extends EventClient<EventMap> {
|
|
49
|
+
constructor();
|
|
50
|
+
}
|
|
51
|
+
export declare const formEventClient: FormEventClient;
|
|
52
|
+
export {};
|
|
@@ -22,6 +22,26 @@ class FieldGroupApi {
|
|
|
22
22
|
);
|
|
23
23
|
return utils.concatenatePaths(formMappedPath, restOfPath);
|
|
24
24
|
};
|
|
25
|
+
this.getFormFieldOptions = (props) => {
|
|
26
|
+
const newProps = { ...props };
|
|
27
|
+
const validators = newProps.validators;
|
|
28
|
+
newProps.name = this.getFormFieldName(props.name);
|
|
29
|
+
if (validators && (validators.onChangeListenTo || validators.onBlurListenTo)) {
|
|
30
|
+
const newValidators = { ...validators };
|
|
31
|
+
const remapListenTo = (listenTo) => {
|
|
32
|
+
if (!listenTo) return void 0;
|
|
33
|
+
return listenTo.map(
|
|
34
|
+
(localFieldName) => this.getFormFieldName(localFieldName)
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
newValidators.onChangeListenTo = remapListenTo(
|
|
38
|
+
validators.onChangeListenTo
|
|
39
|
+
);
|
|
40
|
+
newValidators.onBlurListenTo = remapListenTo(validators.onBlurListenTo);
|
|
41
|
+
newProps.validators = newValidators;
|
|
42
|
+
}
|
|
43
|
+
return newProps;
|
|
44
|
+
};
|
|
25
45
|
this.mount = () => {
|
|
26
46
|
const cleanup = this.store.mount();
|
|
27
47
|
return cleanup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroupApi.cjs","sources":["../../src/FieldGroupApi.ts"],"sourcesContent":["import { Derived } from '@tanstack/store'\nimport { concatenatePaths, getBy, makePathArray } from './utils'\nimport type { Updater } from './utils'\nimport type {\n FormApi,\n FormAsyncValidateOrFn,\n FormValidateOrFn,\n} from './FormApi'\nimport type { AnyFieldMeta, AnyFieldMetaBase } from './FieldApi'\nimport type {\n DeepKeys,\n DeepKeysOfType,\n DeepValue,\n FieldsMap,\n} from './util-types'\nimport type {\n FieldManipulator,\n UpdateMetaOptions,\n ValidationCause,\n} from './types'\n\nexport type AnyFieldGroupApi = FieldGroupApi<\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n>\n\nexport interface FieldGroupState<in out TFieldGroupData> {\n /**\n * The current values of the field group\n */\n values: TFieldGroupData\n}\n\n/**\n * An object representing the options for a field group.\n */\nexport interface FieldGroupOptions<\n in out TFormData,\n in out TFieldGroupData,\n in out TFields extends\n | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n | FieldsMap<TFormData, TFieldGroupData>,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta = never,\n> {\n form:\n | FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >\n | FieldGroupApi<\n any,\n TFormData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n TSubmitMeta\n >\n /**\n * The path to the field group data.\n */\n fields: TFields\n /**\n * The expected subsetValues that the form must provide.\n */\n defaultValues?: TFieldGroupData\n /**\n * onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props\n */\n onSubmitMeta?: TSubmitMeta\n}\n\nexport class FieldGroupApi<\n in out TFormData,\n in out TFieldGroupData,\n in out TFields extends\n | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n | FieldsMap<TFormData, TFieldGroupData>,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta = never,\n> implements FieldManipulator<TFieldGroupData, TSubmitMeta>\n{\n /**\n * The form that called this field group.\n */\n readonly form: FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >\n\n readonly fieldsMap: TFields\n\n /**\n * Get the true name of the field. Not required within `Field` or `AppField`.\n * @private\n */\n getFormFieldName = <TField extends DeepKeys<TFieldGroupData>>(\n subfield: TField,\n ): DeepKeys<TFormData> => {\n if (typeof this.fieldsMap === 'string') {\n return concatenatePaths(this.fieldsMap, subfield)\n }\n\n const firstAccessor = makePathArray(subfield)[0]\n if (typeof firstAccessor !== 'string') {\n // top-level arrays cannot be mapped\n return ''\n }\n\n const restOfPath = subfield.slice(firstAccessor.length)\n const formMappedPath =\n // TFields is either a string or this. See guard above.\n (this.fieldsMap as FieldsMap<TFormData, TFieldGroupData>)[\n firstAccessor as keyof TFieldGroupData\n ]\n\n return concatenatePaths(formMappedPath, restOfPath)\n }\n\n store: Derived<FieldGroupState<TFieldGroupData>>\n\n get state() {\n return this.store.state\n }\n\n /**\n * Constructs a new `FieldGroupApi` instance with the given form options.\n */\n constructor(\n opts: FieldGroupOptions<\n TFormData,\n TFieldGroupData,\n TFields,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >,\n ) {\n if (opts.form instanceof FieldGroupApi) {\n const group = opts.form\n this.form = group.form as never\n\n // the DeepKey is already namespaced, so we need to ensure that we reference\n // the form and not the group\n if (typeof opts.fields === 'string') {\n this.fieldsMap = group.getFormFieldName(opts.fields) as TFields\n } else {\n // TypeScript has a tough time with generics being a union for some reason\n const fields = {\n ...(opts.fields as FieldsMap<TFormData, TFieldGroupData>),\n }\n for (const key in fields) {\n fields[key] = group.getFormFieldName(fields[key]) as never\n }\n this.fieldsMap = fields as never\n }\n } else {\n this.form = opts.form\n this.fieldsMap = opts.fields\n }\n\n this.store = new Derived({\n deps: [this.form.store],\n fn: ({ currDepVals }) => {\n const currFormStore = currDepVals[0]\n let values: TFieldGroupData\n if (typeof this.fieldsMap === 'string') {\n // all values live at that name, so we can directly fetch it\n values = getBy(currFormStore.values, this.fieldsMap)\n } else {\n // we need to fetch the values from all places where they were mapped from\n values = {} as never\n const fields: Record<keyof TFieldGroupData, string> = this\n .fieldsMap as never\n for (const key in fields) {\n values[key] = getBy(currFormStore.values, fields[key])\n }\n }\n\n return {\n values,\n }\n },\n })\n }\n\n /**\n * Mounts the field group instance to listen to value changes.\n */\n mount = () => {\n const cleanup = this.store.mount()\n\n return cleanup\n }\n\n /**\n * Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type.\n */\n validateArrayFieldsStartingFrom = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n cause: ValidationCause,\n ) => {\n return this.form.validateArrayFieldsStartingFrom(\n this.getFormFieldName(field),\n index,\n cause,\n )\n }\n\n /**\n * Validates a specified field in the form using the correct handlers for a given validation type.\n */\n validateField = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n cause: ValidationCause,\n ) => {\n return this.form.validateField(this.getFormFieldName(field), cause)\n }\n\n /**\n * Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.\n */\n handleSubmit(): Promise<void>\n handleSubmit(submitMeta: TSubmitMeta): Promise<void>\n async handleSubmit(submitMeta?: TSubmitMeta): Promise<void> {\n // cast is required since the implementation isn't one of the two overloads\n return this.form.handleSubmit(submitMeta as any)\n }\n\n /**\n * Gets the value of the specified field.\n */\n getFieldValue = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n ): DeepValue<TFieldGroupData, TField> => {\n return this.form.getFieldValue(this.getFormFieldName(field)) as DeepValue<\n TFieldGroupData,\n TField\n >\n }\n\n /**\n * Gets the metadata of the specified field.\n */\n getFieldMeta = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.getFieldMeta(this.getFormFieldName(field))\n }\n\n /**\n * Updates the metadata of the specified field.\n */\n setFieldMeta = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n updater: Updater<AnyFieldMetaBase>,\n ) => {\n return this.form.setFieldMeta(this.getFormFieldName(field), updater)\n }\n\n /**\n * Sets the value of the specified field and optionally updates the touched state.\n */\n setFieldValue = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n updater: Updater<DeepValue<TFieldGroupData, TField>>,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.setFieldValue(\n this.getFormFieldName(field) as never,\n updater as never,\n opts,\n )\n }\n\n /**\n * Delete a field and its subfields.\n */\n deleteField = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.deleteField(this.getFormFieldName(field))\n }\n\n /**\n * Pushes a value into an array field.\n */\n pushFieldValue = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.pushFieldValue(\n this.getFormFieldName(field),\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Insert a value into an array field at the specified index.\n */\n insertFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.insertFieldValue(\n this.getFormFieldName(field),\n index,\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Replaces a value into an array field at the specified index.\n */\n replaceFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.replaceFieldValue(\n this.getFormFieldName(field),\n index,\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Removes a value from an array field at the specified index.\n */\n removeFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.removeFieldValue(this.getFormFieldName(field), index, opts)\n }\n\n /**\n * Swaps the values at the specified indices within an array field.\n */\n swapFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n index1: number,\n index2: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.swapFieldValues(\n this.getFormFieldName(field),\n index1,\n index2,\n opts,\n )\n }\n\n /**\n * Moves the value at the first specified index to the second specified index within an array field.\n */\n moveFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n index1: number,\n index2: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.moveFieldValues(\n this.getFormFieldName(field),\n index1,\n index2,\n opts,\n )\n }\n\n clearFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.clearFieldValues(this.getFormFieldName(field), opts)\n }\n\n /**\n * Resets the field value and meta to default state\n */\n resetField = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.resetField(this.getFormFieldName(field))\n }\n\n validateAllFields = (cause: ValidationCause) =>\n this.form.validateAllFields(cause)\n}\n"],"names":["concatenatePaths","makePathArray","opts","Derived","getBy"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FieldGroupApi.cjs","sources":["../../src/FieldGroupApi.ts"],"sourcesContent":["import { Derived } from '@tanstack/store'\nimport { concatenatePaths, getBy, makePathArray } from './utils'\nimport type { Updater } from './utils'\nimport type {\n FormApi,\n FormAsyncValidateOrFn,\n FormValidateOrFn,\n} from './FormApi'\nimport type { AnyFieldMetaBase, FieldOptions } from './FieldApi'\nimport type {\n DeepKeys,\n DeepKeysOfType,\n DeepValue,\n FieldsMap,\n} from './util-types'\nimport type {\n FieldManipulator,\n UpdateMetaOptions,\n ValidationCause,\n} from './types'\n\nexport type AnyFieldGroupApi = FieldGroupApi<\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n>\n\nexport interface FieldGroupState<in out TFieldGroupData> {\n /**\n * The current values of the field group\n */\n values: TFieldGroupData\n}\n\n/**\n * An object representing the options for a field group.\n */\nexport interface FieldGroupOptions<\n in out TFormData,\n in out TFieldGroupData,\n in out TFields extends\n | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n | FieldsMap<TFormData, TFieldGroupData>,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta = never,\n> {\n form:\n | FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >\n | FieldGroupApi<\n any,\n TFormData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n TSubmitMeta\n >\n /**\n * The path to the field group data.\n */\n fields: TFields\n /**\n * The expected subsetValues that the form must provide.\n */\n defaultValues?: TFieldGroupData\n /**\n * onSubmitMeta, the data passed from the handleSubmit handler, to the onSubmit function props\n */\n onSubmitMeta?: TSubmitMeta\n}\n\nexport class FieldGroupApi<\n in out TFormData,\n in out TFieldGroupData,\n in out TFields extends\n | DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>\n | FieldsMap<TFormData, TFieldGroupData>,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnDynamic extends undefined | FormValidateOrFn<TFormData>,\n in out TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta = never,\n> implements FieldManipulator<TFieldGroupData, TSubmitMeta>\n{\n /**\n * The form that called this field group.\n */\n readonly form: FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >\n\n readonly fieldsMap: TFields\n\n /**\n * Get the true name of the field. Not required within `Field` or `AppField`.\n * @private\n */\n getFormFieldName = <TField extends DeepKeys<TFieldGroupData>>(\n subfield: TField,\n ): DeepKeys<TFormData> => {\n if (typeof this.fieldsMap === 'string') {\n return concatenatePaths(this.fieldsMap, subfield)\n }\n\n const firstAccessor = makePathArray(subfield)[0]\n if (typeof firstAccessor !== 'string') {\n // top-level arrays cannot be mapped\n return ''\n }\n\n const restOfPath = subfield.slice(firstAccessor.length)\n const formMappedPath =\n // TFields is either a string or this. See guard above.\n (this.fieldsMap as FieldsMap<TFormData, TFieldGroupData>)[\n firstAccessor as keyof TFieldGroupData\n ]\n\n return concatenatePaths(formMappedPath, restOfPath)\n }\n\n /**\n * Get the field options with the true form DeepKeys for validators\n * @private\n */\n getFormFieldOptions = <\n TOptions extends FieldOptions<\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >,\n >(\n props: TOptions,\n ): TOptions => {\n const newProps = { ...props }\n const validators = newProps.validators\n\n newProps.name = this.getFormFieldName(props.name)\n\n if (\n validators &&\n (validators.onChangeListenTo || validators.onBlurListenTo)\n ) {\n const newValidators = { ...validators }\n\n const remapListenTo = (listenTo: DeepKeys<any>[] | undefined) => {\n if (!listenTo) return undefined\n return listenTo.map((localFieldName) =>\n this.getFormFieldName(localFieldName),\n )\n }\n\n newValidators.onChangeListenTo = remapListenTo(\n validators.onChangeListenTo,\n )\n newValidators.onBlurListenTo = remapListenTo(validators.onBlurListenTo)\n\n newProps.validators = newValidators\n }\n\n return newProps\n }\n\n store: Derived<FieldGroupState<TFieldGroupData>>\n\n get state() {\n return this.store.state\n }\n\n /**\n * Constructs a new `FieldGroupApi` instance with the given form options.\n */\n constructor(\n opts: FieldGroupOptions<\n TFormData,\n TFieldGroupData,\n TFields,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnDynamic,\n TOnDynamicAsync,\n TOnServer,\n TSubmitMeta\n >,\n ) {\n if (opts.form instanceof FieldGroupApi) {\n const group = opts.form\n this.form = group.form as never\n\n // the DeepKey is already namespaced, so we need to ensure that we reference\n // the form and not the group\n if (typeof opts.fields === 'string') {\n this.fieldsMap = group.getFormFieldName(opts.fields) as TFields\n } else {\n // TypeScript has a tough time with generics being a union for some reason\n const fields = {\n ...(opts.fields as FieldsMap<TFormData, TFieldGroupData>),\n }\n for (const key in fields) {\n fields[key] = group.getFormFieldName(fields[key]) as never\n }\n this.fieldsMap = fields as never\n }\n } else {\n this.form = opts.form\n this.fieldsMap = opts.fields\n }\n\n this.store = new Derived({\n deps: [this.form.store],\n fn: ({ currDepVals }) => {\n const currFormStore = currDepVals[0]\n let values: TFieldGroupData\n if (typeof this.fieldsMap === 'string') {\n // all values live at that name, so we can directly fetch it\n values = getBy(currFormStore.values, this.fieldsMap)\n } else {\n // we need to fetch the values from all places where they were mapped from\n values = {} as never\n const fields: Record<keyof TFieldGroupData, string> = this\n .fieldsMap as never\n for (const key in fields) {\n values[key] = getBy(currFormStore.values, fields[key])\n }\n }\n\n return {\n values,\n }\n },\n })\n }\n\n /**\n * Mounts the field group instance to listen to value changes.\n */\n mount = () => {\n const cleanup = this.store.mount()\n\n return cleanup\n }\n\n /**\n * Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type.\n */\n validateArrayFieldsStartingFrom = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n cause: ValidationCause,\n ) => {\n return this.form.validateArrayFieldsStartingFrom(\n this.getFormFieldName(field),\n index,\n cause,\n )\n }\n\n /**\n * Validates a specified field in the form using the correct handlers for a given validation type.\n */\n validateField = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n cause: ValidationCause,\n ) => {\n return this.form.validateField(this.getFormFieldName(field), cause)\n }\n\n /**\n * Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.\n */\n handleSubmit(): Promise<void>\n handleSubmit(submitMeta: TSubmitMeta): Promise<void>\n async handleSubmit(submitMeta?: TSubmitMeta): Promise<void> {\n // cast is required since the implementation isn't one of the two overloads\n return this.form.handleSubmit(submitMeta as any)\n }\n\n /**\n * Gets the value of the specified field.\n */\n getFieldValue = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n ): DeepValue<TFieldGroupData, TField> => {\n return this.form.getFieldValue(this.getFormFieldName(field)) as DeepValue<\n TFieldGroupData,\n TField\n >\n }\n\n /**\n * Gets the metadata of the specified field.\n */\n getFieldMeta = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.getFieldMeta(this.getFormFieldName(field))\n }\n\n /**\n * Updates the metadata of the specified field.\n */\n setFieldMeta = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n updater: Updater<AnyFieldMetaBase>,\n ) => {\n return this.form.setFieldMeta(this.getFormFieldName(field), updater)\n }\n\n /**\n * Sets the value of the specified field and optionally updates the touched state.\n */\n setFieldValue = <TField extends DeepKeys<TFieldGroupData>>(\n field: TField,\n updater: Updater<DeepValue<TFieldGroupData, TField>>,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.setFieldValue(\n this.getFormFieldName(field) as never,\n updater as never,\n opts,\n )\n }\n\n /**\n * Delete a field and its subfields.\n */\n deleteField = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.deleteField(this.getFormFieldName(field))\n }\n\n /**\n * Pushes a value into an array field.\n */\n pushFieldValue = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.pushFieldValue(\n this.getFormFieldName(field),\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Insert a value into an array field at the specified index.\n */\n insertFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.insertFieldValue(\n this.getFormFieldName(field),\n index,\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Replaces a value into an array field at the specified index.\n */\n replaceFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n value: DeepValue<TFieldGroupData, TField> extends any[]\n ? DeepValue<TFieldGroupData, TField>[number]\n : never,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.replaceFieldValue(\n this.getFormFieldName(field),\n index,\n // since unknown doesn't extend an array, it types `value` as never.\n value as never,\n opts,\n )\n }\n\n /**\n * Removes a value from an array field at the specified index.\n */\n removeFieldValue = async <\n TField extends DeepKeysOfType<TFieldGroupData, any[]>,\n >(\n field: TField,\n index: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.removeFieldValue(this.getFormFieldName(field), index, opts)\n }\n\n /**\n * Swaps the values at the specified indices within an array field.\n */\n swapFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n index1: number,\n index2: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.swapFieldValues(\n this.getFormFieldName(field),\n index1,\n index2,\n opts,\n )\n }\n\n /**\n * Moves the value at the first specified index to the second specified index within an array field.\n */\n moveFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n index1: number,\n index2: number,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.moveFieldValues(\n this.getFormFieldName(field),\n index1,\n index2,\n opts,\n )\n }\n\n clearFieldValues = <TField extends DeepKeysOfType<TFieldGroupData, any[]>>(\n field: TField,\n opts?: UpdateMetaOptions,\n ) => {\n return this.form.clearFieldValues(this.getFormFieldName(field), opts)\n }\n\n /**\n * Resets the field value and meta to default state\n */\n resetField = <TField extends DeepKeys<TFieldGroupData>>(field: TField) => {\n return this.form.resetField(this.getFormFieldName(field))\n }\n\n validateAllFields = (cause: ValidationCause) =>\n this.form.validateAllFields(cause)\n}\n"],"names":["concatenatePaths","makePathArray","opts","Derived","getBy"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Derived } from '@tanstack/store';
|
|
2
2
|
import { Updater } from './utils.cjs';
|
|
3
3
|
import { FormApi, FormAsyncValidateOrFn, FormValidateOrFn } from './FormApi.cjs';
|
|
4
|
-
import {
|
|
4
|
+
import { AnyFieldMetaBase, FieldOptions } from './FieldApi.cjs';
|
|
5
5
|
import { DeepKeys, DeepKeysOfType, DeepValue, FieldsMap } from './util-types.cjs';
|
|
6
6
|
import { FieldManipulator, UpdateMetaOptions, ValidationCause } from './types.cjs';
|
|
7
7
|
export type AnyFieldGroupApi = FieldGroupApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
|
|
@@ -40,6 +40,11 @@ export declare class FieldGroupApi<in out TFormData, in out TFieldGroupData, in
|
|
|
40
40
|
* @private
|
|
41
41
|
*/
|
|
42
42
|
getFormFieldName: <TField extends DeepKeys<TFieldGroupData>>(subfield: TField) => DeepKeys<TFormData>;
|
|
43
|
+
/**
|
|
44
|
+
* Get the field options with the true form DeepKeys for validators
|
|
45
|
+
* @private
|
|
46
|
+
*/
|
|
47
|
+
getFormFieldOptions: <TOptions extends FieldOptions<any, any, any, any, any, any, any, any, any, any, any, any>>(props: TOptions) => TOptions;
|
|
43
48
|
store: Derived<FieldGroupState<TFieldGroupData>>;
|
|
44
49
|
get state(): FieldGroupState<TFieldGroupData>;
|
|
45
50
|
/**
|
|
@@ -70,7 +75,7 @@ export declare class FieldGroupApi<in out TFormData, in out TFieldGroupData, in
|
|
|
70
75
|
/**
|
|
71
76
|
* Gets the metadata of the specified field.
|
|
72
77
|
*/
|
|
73
|
-
getFieldMeta: <TField extends DeepKeys<TFieldGroupData>>(field: TField) => AnyFieldMeta | undefined;
|
|
78
|
+
getFieldMeta: <TField extends DeepKeys<TFieldGroupData>>(field: TField) => import('./FieldApi.cjs').AnyFieldMeta | undefined;
|
|
74
79
|
/**
|
|
75
80
|
* Updates the metadata of the specified field.
|
|
76
81
|
*/
|
package/dist/cjs/FormApi.cjs
CHANGED
|
@@ -5,6 +5,7 @@ const utils = require("./utils.cjs");
|
|
|
5
5
|
const ValidationLogic = require("./ValidationLogic.cjs");
|
|
6
6
|
const standardSchemaValidator = require("./standardSchemaValidator.cjs");
|
|
7
7
|
const metaHelper = require("./metaHelper.cjs");
|
|
8
|
+
const EventClient = require("./EventClient.cjs");
|
|
8
9
|
function getDefaultFormState(defaultState) {
|
|
9
10
|
return {
|
|
10
11
|
values: defaultState.values ?? {},
|
|
@@ -39,9 +40,17 @@ class FormApi {
|
|
|
39
40
|
const cleanup = () => {
|
|
40
41
|
cleanupFieldMetaDerived();
|
|
41
42
|
cleanupStoreDerived();
|
|
43
|
+
EventClient.formEventClient.emit("form-unmounted", {
|
|
44
|
+
id: this._formId
|
|
45
|
+
});
|
|
42
46
|
};
|
|
43
47
|
this.options.listeners?.onMount?.({ formApi: this });
|
|
44
48
|
const { onMount } = this.options.validators || {};
|
|
49
|
+
EventClient.formEventClient.emit("form-state-change", {
|
|
50
|
+
id: this._formId,
|
|
51
|
+
state: this.store.state,
|
|
52
|
+
options: this.options
|
|
53
|
+
});
|
|
45
54
|
if (!onMount) return cleanup;
|
|
46
55
|
this.validateSync("mount");
|
|
47
56
|
return cleanup;
|
|
@@ -623,6 +632,8 @@ class FormApi {
|
|
|
623
632
|
listeners: {},
|
|
624
633
|
formListeners: {}
|
|
625
634
|
};
|
|
635
|
+
this._formId = opts?.formId ?? crypto.randomUUID();
|
|
636
|
+
this._devtoolsSubmissionOverride = false;
|
|
626
637
|
this.baseStore = new store.Store(
|
|
627
638
|
getDefaultFormState({
|
|
628
639
|
...opts?.defaultState,
|
|
@@ -772,12 +783,40 @@ class FormApi {
|
|
|
772
783
|
});
|
|
773
784
|
this.handleSubmit = this.handleSubmit.bind(this);
|
|
774
785
|
this.update(opts || {});
|
|
786
|
+
this.store.subscribe(() => {
|
|
787
|
+
EventClient.formEventClient.emit("form-state-change", {
|
|
788
|
+
id: this._formId,
|
|
789
|
+
state: this.store.state,
|
|
790
|
+
options: this.options
|
|
791
|
+
});
|
|
792
|
+
});
|
|
793
|
+
EventClient.formEventClient.on("request-form-state", (e) => {
|
|
794
|
+
if (e.payload.id === this._formId) {
|
|
795
|
+
EventClient.formEventClient.emit("form-state-change", {
|
|
796
|
+
id: this._formId,
|
|
797
|
+
state: this.store.state,
|
|
798
|
+
options: this.options
|
|
799
|
+
});
|
|
800
|
+
}
|
|
801
|
+
});
|
|
802
|
+
EventClient.formEventClient.on("request-form-reset", (e) => {
|
|
803
|
+
if (e.payload.id === this._formId) {
|
|
804
|
+
this.reset();
|
|
805
|
+
}
|
|
806
|
+
});
|
|
807
|
+
EventClient.formEventClient.on("request-form-force-submit", (e) => {
|
|
808
|
+
if (e.payload.id === this._formId) {
|
|
809
|
+
this._devtoolsSubmissionOverride = true;
|
|
810
|
+
this.handleSubmit();
|
|
811
|
+
this._devtoolsSubmissionOverride = false;
|
|
812
|
+
}
|
|
813
|
+
});
|
|
775
814
|
}
|
|
776
815
|
get state() {
|
|
777
816
|
return this.store.state;
|
|
778
817
|
}
|
|
779
|
-
|
|
780
|
-
return this.
|
|
818
|
+
formId() {
|
|
819
|
+
return this._formId;
|
|
781
820
|
}
|
|
782
821
|
/**
|
|
783
822
|
* @private
|
|
@@ -811,7 +850,7 @@ class FormApi {
|
|
|
811
850
|
}
|
|
812
851
|
);
|
|
813
852
|
});
|
|
814
|
-
if (!this.state.canSubmit) return;
|
|
853
|
+
if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) return;
|
|
815
854
|
const submitMetaArg = submitMeta ?? this.options.onSubmitMeta;
|
|
816
855
|
this.baseStore.setState((d) => ({ ...d, isSubmitting: true }));
|
|
817
856
|
const done = () => {
|
|
@@ -825,6 +864,13 @@ class FormApi {
|
|
|
825
864
|
formApi: this,
|
|
826
865
|
meta: submitMetaArg
|
|
827
866
|
});
|
|
867
|
+
EventClient.formEventClient.emit("form-submission-state-change", {
|
|
868
|
+
id: this._formId,
|
|
869
|
+
submissionAttempt: this.state.submissionAttempts,
|
|
870
|
+
successful: false,
|
|
871
|
+
stage: "validateAllFields",
|
|
872
|
+
errors: Object.values(this.state.fieldMeta).map((meta) => meta.errors).flat()
|
|
873
|
+
});
|
|
828
874
|
return;
|
|
829
875
|
}
|
|
830
876
|
await this.validate("submit");
|
|
@@ -835,6 +881,13 @@ class FormApi {
|
|
|
835
881
|
formApi: this,
|
|
836
882
|
meta: submitMetaArg
|
|
837
883
|
});
|
|
884
|
+
EventClient.formEventClient.emit("form-submission-state-change", {
|
|
885
|
+
id: this._formId,
|
|
886
|
+
submissionAttempt: this.state.submissionAttempts,
|
|
887
|
+
successful: false,
|
|
888
|
+
stage: "validate",
|
|
889
|
+
errors: this.state.errors
|
|
890
|
+
});
|
|
838
891
|
return;
|
|
839
892
|
}
|
|
840
893
|
store.batch(() => {
|
|
@@ -861,6 +914,11 @@ class FormApi {
|
|
|
861
914
|
isSubmitSuccessful: true
|
|
862
915
|
// Set isSubmitSuccessful to true on successful submission
|
|
863
916
|
}));
|
|
917
|
+
EventClient.formEventClient.emit("form-submission-state-change", {
|
|
918
|
+
id: this._formId,
|
|
919
|
+
submissionAttempt: this.state.submissionAttempts,
|
|
920
|
+
successful: true
|
|
921
|
+
});
|
|
864
922
|
done();
|
|
865
923
|
});
|
|
866
924
|
} catch (err) {
|
|
@@ -869,6 +927,13 @@ class FormApi {
|
|
|
869
927
|
isSubmitSuccessful: false
|
|
870
928
|
// Ensure isSubmitSuccessful is false if an error occurs
|
|
871
929
|
}));
|
|
930
|
+
EventClient.formEventClient.emit("form-submission-state-change", {
|
|
931
|
+
id: this._formId,
|
|
932
|
+
submissionAttempt: this.state.submissionAttempts,
|
|
933
|
+
successful: false,
|
|
934
|
+
stage: "inflight",
|
|
935
|
+
onError: err
|
|
936
|
+
});
|
|
872
937
|
done();
|
|
873
938
|
throw err;
|
|
874
939
|
}
|