@bolttech/form-engine-core 0.0.1-beta.3 → 0.0.1-beta.30
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/README.md +40 -36
- package/index.esm.js +482 -265
- package/package.json +2 -2
- package/src/constants/constants.d.ts +6 -0
- package/src/helpers/SafeSubject.d.ts +11 -0
- package/src/helpers/validation.d.ts +27 -0
- package/src/interfaces/schema.d.ts +30 -8
- package/src/interfaces/state.d.ts +1 -6
- package/src/managers/field.d.ts +23 -54
- package/src/managers/form.d.ts +40 -34
- package/src/managers/formGroup.d.ts +13 -5
- package/src/types/event.d.ts +7 -1
- package/src/types/form.d.ts +6 -11
- package/src/types/schema.d.ts +80 -39
- package/src/types/utility.d.ts +2 -0
- package/src/validations/date.d.ts +1 -0
- package/src/validations/handler.d.ts +2 -2
- package/src/validations/multiple.d.ts +2 -2
- package/src/validations/namedRule.d.ts +22 -0
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bolttech/form-engine-core",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.30",
|
|
4
4
|
"module": "./index.esm.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.esm.js",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@gaignoux/currency": "1.1.0",
|
|
9
|
-
"credit-card-type": "10.0.
|
|
9
|
+
"credit-card-type": "10.0.1",
|
|
10
10
|
"lodash": "4.17.21",
|
|
11
11
|
"rxjs": "7.8.1"
|
|
12
12
|
},
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const DEFAULT_API_DEBOUNCE_TIME = 1000;
|
|
2
|
+
declare const DEFAULT_STATE_REFRESH_TIME = 100;
|
|
3
|
+
declare const TEMPLATE_REGEX_DELIMITATOR: RegExp;
|
|
4
|
+
declare const TEMPLATE_REGEX_OPERATOR_SPLITTER: RegExp;
|
|
5
|
+
declare const TEMPLATE_REGEX_OPERATOR_MATCHER: RegExp;
|
|
6
|
+
export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME, TEMPLATE_REGEX_DELIMITATOR, TEMPLATE_REGEX_OPERATOR_SPLITTER, TEMPLATE_REGEX_OPERATOR_MATCHER };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Subject } from 'rxjs';
|
|
2
|
+
/**
|
|
3
|
+
* Custom RXJS Subject to gracefully handle errors on unsubscribed Subjects
|
|
4
|
+
* that were unmounted due to adapter external handling such as visibility
|
|
5
|
+
*/
|
|
6
|
+
declare class SafeSubject<T> extends Subject<T> {
|
|
7
|
+
private isMounted;
|
|
8
|
+
constructor(isMounted: () => boolean);
|
|
9
|
+
next(value: T): void;
|
|
10
|
+
}
|
|
11
|
+
export { SafeSubject };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { TSchemaValidation, TValidationMethods } from '../types/schema';
|
|
2
|
+
import { TValidationHandler } from '../types/utility';
|
|
3
|
+
/**
|
|
4
|
+
* @internal
|
|
5
|
+
* Handles the validation of a given value based on specified validation methods and rules.
|
|
6
|
+
*
|
|
7
|
+
* @param {string | number | boolean | unknown} value - The value to be validated.
|
|
8
|
+
* @param {TSchemaValidation} validations - The schema validations to be applied.
|
|
9
|
+
* @param {TValidationHandler} methods - The validation handler methods.
|
|
10
|
+
* @param {keyof TValidationMethods} key - The specific key of the validation method to be used.
|
|
11
|
+
* @returns {boolean} - Returns true if the value passes the validation, otherwise false.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* const value = 'example@example.com';
|
|
15
|
+
* const validations = {
|
|
16
|
+
* required: true,
|
|
17
|
+
* customName: { email: true }
|
|
18
|
+
* };
|
|
19
|
+
* const methods = {
|
|
20
|
+
* email: (value) => /\S+@\S+\.\S+/.test(value)
|
|
21
|
+
* };
|
|
22
|
+
* const key = 'required';
|
|
23
|
+
*
|
|
24
|
+
* const isValid = handleValidation(value, validations, methods, key);
|
|
25
|
+
* console.log(isValid); // Output: true
|
|
26
|
+
*/
|
|
27
|
+
export default function handleValidation(value: string | number | boolean | unknown, validations: TSchemaValidation, methods: TValidationHandler, key: keyof TValidationMethods): boolean;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TMapper } from '../types/mapper';
|
|
2
|
+
import { TApiEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
|
|
2
3
|
/**
|
|
3
4
|
* @interface IComponentSchema
|
|
4
5
|
* Represents the schema for a component within a form.
|
|
@@ -6,10 +7,10 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
|
|
|
6
7
|
* @property {string} component - The type of component (e.g., 'input', 'button').
|
|
7
8
|
* @property {TProps} props - The properties of the component.
|
|
8
9
|
* @property {string} name - The name of the component.
|
|
9
|
-
* @property {
|
|
10
|
+
* @property {string} nameToSubmit - The name of the field when submit values (optional).
|
|
11
|
+
* @property {TValidations} [validations] - The validation methods for the component.
|
|
10
12
|
* @property {TVisibility[]} [visibilityConditions] - The visibility conditions for the component.
|
|
11
13
|
* @property {TResetValueMethods[]} [resetValues] - The reset value methods for the component.
|
|
12
|
-
* @property {TErrorMessages} [errorMessages] - The error messages for the component.
|
|
13
14
|
* @property {TApiEvent} [api] - The API configuration for the component.
|
|
14
15
|
* @property {TFormatters} [formatters] - The formatters for the component.
|
|
15
16
|
* @property {TMasks} [masks] - The masks for the component.
|
|
@@ -21,10 +22,26 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
|
|
|
21
22
|
* component: 'input',
|
|
22
23
|
* props: { type: 'text', placeholder: 'Enter your name' },
|
|
23
24
|
* name: 'name',
|
|
24
|
-
*
|
|
25
|
+
* nameToSubmit: 'applicant.firstName',
|
|
26
|
+
* validations: {
|
|
27
|
+
* methods: {
|
|
28
|
+
* required: true,
|
|
29
|
+
* regex: '^([0-9]+)*$',
|
|
30
|
+
* max: 5,
|
|
31
|
+
* },
|
|
32
|
+
* eventMessages: {
|
|
33
|
+
* ON_FIELD_MOUNT: ['required'],
|
|
34
|
+
* ON_FIELD_CHANGE: ['regex', 'required'],
|
|
35
|
+
* ON_FIELD_BLUR: ['max', 'required'],
|
|
36
|
+
* },
|
|
37
|
+
* messages: {
|
|
38
|
+
* default: 'This field is required',
|
|
39
|
+
* regex: 'Only numbers are available.',
|
|
40
|
+
* max: 'Max of 5',
|
|
41
|
+
* },
|
|
42
|
+
* },
|
|
25
43
|
* visibilityConditions: [{ conditions: { field: 'age', value: 18 } }],
|
|
26
44
|
* resetValues: [{ field: 'age', resetTo: '' }],
|
|
27
|
-
* errorMessages: { required: 'This field is required.' },
|
|
28
45
|
* api: { defaultConfig: { config: { method: 'POST', url: 'https://api.example.com/submit' }, events: [{ eventName: 'ON_FORM_SUBMIT' }] } },
|
|
29
46
|
* formatters: { capitalize: true },
|
|
30
47
|
* masks: { currency: { align: 'left', decimal: '.', precision: 2, prefix: '$', thousands: ',' } },
|
|
@@ -36,15 +53,20 @@ interface IComponentSchema {
|
|
|
36
53
|
component: string;
|
|
37
54
|
props?: TProps;
|
|
38
55
|
name: string;
|
|
39
|
-
|
|
56
|
+
nameToSubmit?: string;
|
|
57
|
+
validations?: TValidations;
|
|
40
58
|
api?: TApiEvent;
|
|
41
59
|
visibilityConditions?: TVisibility[];
|
|
42
60
|
resetValues?: TResetValueMethods[];
|
|
43
|
-
errorMessages?: TErrorMessages;
|
|
44
61
|
formatters?: TFormatters;
|
|
45
62
|
masks?: TMasks;
|
|
46
63
|
children?: IComponentSchema[];
|
|
47
64
|
}
|
|
65
|
+
interface IComponentSchemaAsFormField<T> extends IComponentSchema {
|
|
66
|
+
mapper?: TMapper<T>;
|
|
67
|
+
order?: number;
|
|
68
|
+
children?: IComponentSchemaAsFormField<T>[];
|
|
69
|
+
}
|
|
48
70
|
/**
|
|
49
71
|
* @interface IFormSchema
|
|
50
72
|
* Represents the schema for a form.
|
|
@@ -80,4 +102,4 @@ interface IFormSchema {
|
|
|
80
102
|
iVars?: Record<string, unknown>;
|
|
81
103
|
components?: IComponentSchema[];
|
|
82
104
|
}
|
|
83
|
-
export { IFormSchema, IComponentSchema };
|
|
105
|
+
export { IFormSchema, IComponentSchema, IComponentSchemaAsFormField };
|
|
@@ -1,27 +1,22 @@
|
|
|
1
|
-
import { TApiResponse } from '../types/schema';
|
|
2
1
|
/**
|
|
3
2
|
* @interface IState
|
|
4
3
|
* Represents the state of a form component.
|
|
5
4
|
*
|
|
6
5
|
* @property {string[]} errors - The list of error messages.
|
|
7
6
|
* @property {boolean} visibility - The visibility state of the component.
|
|
8
|
-
* @property {TApiResponse} apiResponse - The API response data.
|
|
9
7
|
* @property {Record<string, unknown>} props - The properties of the component.
|
|
10
8
|
*
|
|
11
9
|
* @example
|
|
12
10
|
* ```typescript
|
|
13
11
|
* const state: IState = {
|
|
14
|
-
* errors: ['This field is required.'],
|
|
15
12
|
* visibility: true,
|
|
16
|
-
* apiResponse: { default: { response: null } },
|
|
17
13
|
* props: { type: 'text', value: 'John' }
|
|
18
14
|
* };
|
|
19
15
|
* ```
|
|
20
16
|
*/
|
|
21
17
|
interface IState {
|
|
22
|
-
errors: string[];
|
|
23
18
|
visibility: boolean;
|
|
24
|
-
apiResponse: TApiResponse;
|
|
25
19
|
props: Record<string, unknown>;
|
|
20
|
+
errors: Record<string, unknown>;
|
|
26
21
|
}
|
|
27
22
|
export { IState };
|
package/src/managers/field.d.ts
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { Observable, Subject, Subscription } from 'rxjs';
|
|
2
|
-
import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages,
|
|
3
|
-
import { IComponentSchema } from '../interfaces/schema';
|
|
2
|
+
import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
|
|
3
|
+
import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/schema';
|
|
4
4
|
import { IState } from '../interfaces/state';
|
|
5
|
-
import { TEvents, TMutationEvents, TValueChangeEvent } from '../types/event';
|
|
5
|
+
import { TEvents, TFieldEvent, TMutationEvents, TValueChangeEvent } from '../types/event';
|
|
6
6
|
import { TMapper } from '../types/mapper';
|
|
7
|
+
import { SafeSubject } from '../helpers/SafeSubject';
|
|
7
8
|
/**
|
|
8
9
|
* Represents a form field with observables for managing form state, validations, and API requests.
|
|
9
10
|
*/
|
|
10
11
|
declare class FormField {
|
|
11
12
|
name: string;
|
|
13
|
+
nameToSubmit?: string;
|
|
12
14
|
component: string;
|
|
13
15
|
path?: string;
|
|
14
16
|
children?: string[];
|
|
15
|
-
|
|
17
|
+
originalSchema: IComponentSchemaAsFormField<unknown>;
|
|
18
|
+
validations?: TValidations;
|
|
16
19
|
visibilityConditions?: TVisibility[];
|
|
17
20
|
resetValues?: TResetValueMethods[];
|
|
18
21
|
errorMessages?: TErrorMessages;
|
|
@@ -20,28 +23,27 @@ declare class FormField {
|
|
|
20
23
|
formatters?: TFormatters;
|
|
21
24
|
masks?: TMasks;
|
|
22
25
|
valuePropName?: string;
|
|
23
|
-
errorMessagePropName?: string;
|
|
24
26
|
initialValue?: unknown;
|
|
25
27
|
config: Required<TSchemaFormConfig>;
|
|
26
28
|
mapper: TMapper<unknown>;
|
|
29
|
+
errorsString: string;
|
|
30
|
+
errorsList: string[];
|
|
27
31
|
private _props;
|
|
28
32
|
private _value;
|
|
29
33
|
private _stateValue;
|
|
30
34
|
private _metadata;
|
|
31
35
|
private _visibility;
|
|
32
36
|
private _errors;
|
|
33
|
-
private _errorsString;
|
|
34
37
|
private _api;
|
|
35
38
|
private _valid;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
apiEventQueueSubject$: Subject<{
|
|
39
|
+
private _mounted;
|
|
40
|
+
propsSubject$: SafeSubject<Record<string, unknown>>;
|
|
41
|
+
errorSubject$: SafeSubject<Record<string, unknown>>;
|
|
42
|
+
valueSubject$: SafeSubject<Record<string, unknown>>;
|
|
43
|
+
visibilitySubject$: SafeSubject<boolean>;
|
|
44
|
+
apiSubject$: SafeSubject<TApiResponse>;
|
|
45
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
46
|
+
apiEventQueueSubject$: SafeSubject<{
|
|
45
47
|
event: TEvents;
|
|
46
48
|
}>;
|
|
47
49
|
fieldState$: Observable<IState>;
|
|
@@ -76,7 +78,7 @@ declare class FormField {
|
|
|
76
78
|
* @param {unknown} [options.initialValue] - The initial value of the form field.
|
|
77
79
|
* @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
|
|
78
80
|
*/
|
|
79
|
-
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$,
|
|
81
|
+
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, fieldEventSubject$, dataSubject$, mapper, }: {
|
|
80
82
|
schemaComponent: IComponentSchema;
|
|
81
83
|
config?: TSchemaFormConfig;
|
|
82
84
|
path?: string;
|
|
@@ -94,9 +96,7 @@ declare class FormField {
|
|
|
94
96
|
key: string;
|
|
95
97
|
event: TMutationEvents;
|
|
96
98
|
}>;
|
|
97
|
-
|
|
98
|
-
key: string;
|
|
99
|
-
}>;
|
|
99
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
100
100
|
dataSubject$: Subject<{
|
|
101
101
|
key: string;
|
|
102
102
|
event: TEvents;
|
|
@@ -107,21 +107,6 @@ declare class FormField {
|
|
|
107
107
|
* method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
|
|
108
108
|
*/
|
|
109
109
|
initializeObservers(): void;
|
|
110
|
-
/**
|
|
111
|
-
* Observable function to emit api events debounced and distinct for each event type,
|
|
112
|
-
* avoiding previous events being cancelled by new events if they occur inside the debounce time interval
|
|
113
|
-
*
|
|
114
|
-
* @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
|
|
115
|
-
* @param {number} debounceTimeMs time to wait for each individual event emmited
|
|
116
|
-
* @returns
|
|
117
|
-
*/
|
|
118
|
-
debounceDistinct(keyExtractor: (event: {
|
|
119
|
-
event: TEvents;
|
|
120
|
-
}) => TEvents, debounceTimeMs: number): (source$: Observable<{
|
|
121
|
-
event: TEvents;
|
|
122
|
-
}>) => Observable<{
|
|
123
|
-
event: TEvents;
|
|
124
|
-
}>;
|
|
125
110
|
/**
|
|
126
111
|
* Retrieves the properties associated with the form field.
|
|
127
112
|
*
|
|
@@ -137,16 +122,10 @@ declare class FormField {
|
|
|
137
122
|
/**
|
|
138
123
|
* Retrieves the current state value of the form field.
|
|
139
124
|
*
|
|
140
|
-
* @returns {unknown} - The current state value of the form field.
|
|
125
|
+
* @returns {Record<string,unknown>} - The current state value of the form field.
|
|
141
126
|
*/
|
|
142
|
-
get stateValue(): unknown
|
|
127
|
+
get stateValue(): Record<string, unknown>;
|
|
143
128
|
get metadata(): unknown;
|
|
144
|
-
/**
|
|
145
|
-
* Retrieves the concatenated string of errors associated with the form field.
|
|
146
|
-
*
|
|
147
|
-
* @returns {string} - The concatenated string of errors.
|
|
148
|
-
*/
|
|
149
|
-
get errorsString(): string;
|
|
150
129
|
/**
|
|
151
130
|
* Retrieves the current value of the form field.
|
|
152
131
|
*
|
|
@@ -205,15 +184,12 @@ declare class FormField {
|
|
|
205
184
|
* Mounts the form field by initializing necessary subjects and combining their streams.
|
|
206
185
|
*
|
|
207
186
|
* @param {object} mountOpts - Adapter mount options.
|
|
208
|
-
* @param {string} prop.valuePropName - Adapter value property name.
|
|
209
|
-
* @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
|
|
210
187
|
* @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
|
|
211
188
|
* @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
|
|
212
|
-
* @param {string} prop.errorMessagePropName - error message property name to set errors onto component
|
|
213
189
|
* @returns {void}
|
|
214
190
|
*/
|
|
215
191
|
mountField({ valueSubscription, propsSubscription, }: {
|
|
216
|
-
valueSubscription: (value: unknown) => void;
|
|
192
|
+
valueSubscription: (value: Record<string, unknown>) => void;
|
|
217
193
|
propsSubscription: (payload: Partial<IState>) => void;
|
|
218
194
|
}): void;
|
|
219
195
|
/**
|
|
@@ -224,10 +200,7 @@ declare class FormField {
|
|
|
224
200
|
* @returns {void}
|
|
225
201
|
*/
|
|
226
202
|
emitValue(prop: {
|
|
227
|
-
value: unknown
|
|
228
|
-
_value: unknown;
|
|
229
|
-
_stateValue: unknown;
|
|
230
|
-
};
|
|
203
|
+
value: unknown;
|
|
231
204
|
event: TEvents;
|
|
232
205
|
}): void;
|
|
233
206
|
/**
|
|
@@ -248,10 +221,6 @@ declare class FormField {
|
|
|
248
221
|
setFieldValidity({ event }: {
|
|
249
222
|
event: TEvents;
|
|
250
223
|
}): void;
|
|
251
|
-
/**
|
|
252
|
-
* WIP expensive function to get updated field validity on each event
|
|
253
|
-
*/
|
|
254
|
-
updateValidityFlag(): void;
|
|
255
224
|
/**
|
|
256
225
|
* Formats the field value using the specified formatters, if available.
|
|
257
226
|
*
|
package/src/managers/form.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { IFormField } from './field';
|
|
2
2
|
import { Subject, Subscription } from 'rxjs';
|
|
3
|
-
import { IComponentSchema, IFormSchema } from '../interfaces/schema';
|
|
3
|
+
import { IComponentSchema, IComponentSchemaAsFormField, IFormSchema } from '../interfaces/schema';
|
|
4
4
|
import { TSchemaFormConfig } from '../types/schema';
|
|
5
5
|
import { TSubscribedTemplates } from '../types/template';
|
|
6
|
-
import { TEvents, TMutationEvents } from '../types/event';
|
|
6
|
+
import { TEvents, TFieldEvent, TMutationEvents } from '../types/event';
|
|
7
7
|
import { TFormEntry, TFormValues } from '../types/form';
|
|
8
8
|
import { TMapper } from '../types/mapper';
|
|
9
9
|
/**
|
|
@@ -18,21 +18,17 @@ declare class FormCore {
|
|
|
18
18
|
key: string;
|
|
19
19
|
event: TMutationEvents;
|
|
20
20
|
}>;
|
|
21
|
-
submitSubject$: Subject<TFormValues
|
|
22
|
-
|
|
23
|
-
key: string;
|
|
24
|
-
}>;
|
|
21
|
+
submitSubject$: Subject<TFormValues<Record<string, unknown>>>;
|
|
22
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
25
23
|
dataSubject$: Subject<{
|
|
26
24
|
key: string;
|
|
27
25
|
event: TEvents;
|
|
28
26
|
}>;
|
|
29
|
-
dataCallbackSubscription$: Subscription;
|
|
30
27
|
subscribedTemplates: TSubscribedTemplates[];
|
|
31
28
|
action?: string;
|
|
32
29
|
method?: string;
|
|
33
|
-
config
|
|
34
|
-
mappers: TMapper<unknown
|
|
35
|
-
onSubmit?: (data: TFormValues) => void;
|
|
30
|
+
config: Required<TSchemaFormConfig>;
|
|
31
|
+
mappers: Map<string, TMapper<unknown>>;
|
|
36
32
|
/**
|
|
37
33
|
* Creates an instance of FormCore.
|
|
38
34
|
*
|
|
@@ -42,7 +38,6 @@ declare class FormCore {
|
|
|
42
38
|
* @param {string} [entry.action] - The action attribute of the form.
|
|
43
39
|
* @param {string} [entry.method] - The method attribute of the form.
|
|
44
40
|
* @param {IFormSchema.iVars} [entry.iVars] - The internal variables of the form.
|
|
45
|
-
* @param {(data: TFormValues) => void} [entry.onSubmit] - A callback function to handle form submission.
|
|
46
41
|
* @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
|
|
47
42
|
*/
|
|
48
43
|
constructor(entry: TFormEntry & Omit<IFormSchema, 'components'>);
|
|
@@ -68,14 +63,6 @@ declare class FormCore {
|
|
|
68
63
|
* Subscribes to templates for dynamic updates.
|
|
69
64
|
*/
|
|
70
65
|
subscribeTemplates(): void;
|
|
71
|
-
/**
|
|
72
|
-
*
|
|
73
|
-
* @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
|
|
74
|
-
*/
|
|
75
|
-
subscribeData(callback: (payload: {
|
|
76
|
-
field: string;
|
|
77
|
-
data: TFormValues;
|
|
78
|
-
}) => void): void;
|
|
79
66
|
/**
|
|
80
67
|
* Gets the value of a property from a field.
|
|
81
68
|
*
|
|
@@ -115,7 +102,7 @@ declare class FormCore {
|
|
|
115
102
|
* @param {string} expression - The expression containing parameters.
|
|
116
103
|
* @returns {string[]} An array of extracted parameters.
|
|
117
104
|
*/
|
|
118
|
-
extractParams(expression: string):
|
|
105
|
+
extractParams(expression: string): unknown[];
|
|
119
106
|
/**
|
|
120
107
|
* Replaces expressions marked by ${...} in the expression string with the provided values.
|
|
121
108
|
*
|
|
@@ -123,7 +110,7 @@ declare class FormCore {
|
|
|
123
110
|
* @param {string[]} values - The values to be inserted into the marked expressions.
|
|
124
111
|
* @returns {string} The expression string with the replacements made.
|
|
125
112
|
*/
|
|
126
|
-
replaceExpression(expression: string, values:
|
|
113
|
+
replaceExpression(expression: string, values: unknown[]): string;
|
|
127
114
|
/**
|
|
128
115
|
* Checks if an expression string contains string concatenation within a marked expression.
|
|
129
116
|
*
|
|
@@ -142,15 +129,6 @@ declare class FormCore {
|
|
|
142
129
|
key: string;
|
|
143
130
|
event: TMutationEvents;
|
|
144
131
|
}): void;
|
|
145
|
-
/**
|
|
146
|
-
* Refreshes api observed fields.
|
|
147
|
-
*
|
|
148
|
-
* @param {object} options - Options for refreshing api.
|
|
149
|
-
* @param {string} options.key - The key of the field triggering the update.
|
|
150
|
-
*/
|
|
151
|
-
refreshApi({ key }: {
|
|
152
|
-
key: string;
|
|
153
|
-
}): string;
|
|
154
132
|
/**
|
|
155
133
|
* Validates and collects the names of form fields in the provided schema structure.
|
|
156
134
|
*
|
|
@@ -161,6 +139,15 @@ declare class FormCore {
|
|
|
161
139
|
* @private
|
|
162
140
|
*/
|
|
163
141
|
private static checkIndexes;
|
|
142
|
+
/**
|
|
143
|
+
* @internal
|
|
144
|
+
* Update field visibility accordingly.
|
|
145
|
+
*
|
|
146
|
+
* @param {string} field - Field name to be updated.
|
|
147
|
+
* @param {boolean} hasError - Condition to be used as visibility.
|
|
148
|
+
* @param {boolean|undefined} showOnlyIfTrue - Flag to be considered when update field visibility. If it's true, then considered error, if it's false, always considered the opposite.
|
|
149
|
+
*/
|
|
150
|
+
private setFieldVisibility;
|
|
164
151
|
/**
|
|
165
152
|
* Validates visibility conditions for a given event and updates field visibility accordingly.
|
|
166
153
|
*
|
|
@@ -187,21 +174,28 @@ declare class FormCore {
|
|
|
187
174
|
* Adds a field onto the form instance regardless there is a schema or not
|
|
188
175
|
*
|
|
189
176
|
* @param fieldSchema
|
|
177
|
+
* @param mapperElement
|
|
190
178
|
*/
|
|
191
|
-
addField(fieldSchema
|
|
179
|
+
addField({ fieldSchema, mapperElement, }: {
|
|
180
|
+
fieldSchema: IComponentSchema;
|
|
181
|
+
mapperElement?: TMapper<unknown>;
|
|
182
|
+
}): void;
|
|
183
|
+
removeField({ key }: {
|
|
184
|
+
key: string;
|
|
185
|
+
}): void;
|
|
192
186
|
/**
|
|
193
187
|
* Serializes the schema structure to create form fields.
|
|
194
188
|
*
|
|
195
189
|
* @param {IComponentSchema[]} [struct] - The schema structure to serialize.
|
|
196
190
|
* @param {string} [path] - The path of the parent component.
|
|
197
191
|
*/
|
|
198
|
-
serializeStructure(struct?:
|
|
192
|
+
serializeStructure(struct?: IComponentSchemaAsFormField<unknown>[], path?: string): void;
|
|
199
193
|
/**
|
|
200
194
|
* Refreshes form fields based on changes in the schema structure.
|
|
201
195
|
*
|
|
202
196
|
* @param {IComponentSchema[]} struct - The updated schema structure.
|
|
203
197
|
*/
|
|
204
|
-
refreshFields(struct:
|
|
198
|
+
refreshFields(struct: IComponentSchemaAsFormField<unknown>[]): void;
|
|
205
199
|
/**
|
|
206
200
|
* Gets a form field by its key.
|
|
207
201
|
*
|
|
@@ -221,7 +215,19 @@ declare class FormCore {
|
|
|
221
215
|
*
|
|
222
216
|
* @returns {TFormValues} The current form values.
|
|
223
217
|
*/
|
|
224
|
-
getFormValues(): TFormValues
|
|
218
|
+
getFormValues(): TFormValues<Record<string, unknown>>;
|
|
219
|
+
subscribeFieldEvent({ callback, }: {
|
|
220
|
+
callback: (payload: TFieldEvent) => void;
|
|
221
|
+
}): Subscription;
|
|
222
|
+
/**
|
|
223
|
+
*
|
|
224
|
+
* @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
|
|
225
|
+
*/
|
|
226
|
+
subscribeData(callback: (payload: {
|
|
227
|
+
field: string;
|
|
228
|
+
data: TFormValues<Record<string, unknown>>;
|
|
229
|
+
}) => void): Subscription;
|
|
230
|
+
subscribeOnSubmit(callback: (payload: TFormValues<Record<string, unknown>>) => void): Subscription;
|
|
225
231
|
/**
|
|
226
232
|
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
227
233
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TFormValues } from '../types/form';
|
|
2
2
|
import { TMapper } from '../types/mapper';
|
|
3
|
-
import {
|
|
3
|
+
import { TFormCore } from './form';
|
|
4
4
|
/**
|
|
5
5
|
* Represents a group that manages multiple forms.
|
|
6
6
|
*/
|
|
@@ -18,7 +18,7 @@ declare class FormGroup {
|
|
|
18
18
|
*/
|
|
19
19
|
createFormWithIndex({ index, mappers, }: {
|
|
20
20
|
index: string;
|
|
21
|
-
mappers
|
|
21
|
+
mappers?: TMapper<unknown>[];
|
|
22
22
|
}): void;
|
|
23
23
|
/**
|
|
24
24
|
* Adds a form instance to the form group.
|
|
@@ -40,7 +40,7 @@ declare class FormGroup {
|
|
|
40
40
|
*/
|
|
41
41
|
getForm({ key }: {
|
|
42
42
|
key: string;
|
|
43
|
-
}):
|
|
43
|
+
}): TFormCore | undefined;
|
|
44
44
|
/**
|
|
45
45
|
* Removes a form instance from the form group.
|
|
46
46
|
*
|
|
@@ -56,7 +56,7 @@ declare class FormGroup {
|
|
|
56
56
|
* @param {string} options.formIndex
|
|
57
57
|
* @param {string} options.fieldIndex
|
|
58
58
|
*/
|
|
59
|
-
removeField({ formIndex, fieldIndex }: {
|
|
59
|
+
removeField({ formIndex, fieldIndex, }: {
|
|
60
60
|
formIndex: string;
|
|
61
61
|
fieldIndex: string;
|
|
62
62
|
}): void;
|
|
@@ -79,7 +79,15 @@ declare class FormGroup {
|
|
|
79
79
|
* @param {string[]} indexes form indexes to be submitted
|
|
80
80
|
* @returns
|
|
81
81
|
*/
|
|
82
|
-
submitMultipleFormsByIndex(indexes: string[]):
|
|
82
|
+
submitMultipleFormsByIndex<T>(indexes: string[], callback?: (payload: TFormValues<T>) => void): void;
|
|
83
|
+
onDataSubscription({ ids, callback, }: {
|
|
84
|
+
ids: string[];
|
|
85
|
+
callback: (payload: Record<string, {
|
|
86
|
+
formId: string;
|
|
87
|
+
formField: string;
|
|
88
|
+
values?: TFormValues<Record<string, unknown>>;
|
|
89
|
+
}>) => void;
|
|
90
|
+
}): import("rxjs").Subscription;
|
|
83
91
|
}
|
|
84
92
|
type TFormGroup = FormGroup;
|
|
85
93
|
export { TFormGroup, FormGroup };
|
package/src/types/event.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IFormField } from '../managers';
|
|
1
2
|
/**
|
|
2
3
|
* @type TEvents
|
|
3
4
|
* Represents the different types of events that can occur on form fields.
|
|
@@ -40,4 +41,9 @@ declare enum TMutationEnum {
|
|
|
40
41
|
type TValueChangeEvent = (value: unknown, opts?: {
|
|
41
42
|
props: Record<string, unknown>;
|
|
42
43
|
}) => void;
|
|
43
|
-
|
|
44
|
+
type TFieldEvent = {
|
|
45
|
+
event: TEvents;
|
|
46
|
+
fieldName: string;
|
|
47
|
+
fieldInstance?: IFormField;
|
|
48
|
+
};
|
|
49
|
+
export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent };
|
package/src/types/form.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { IFormSchema } from '../interfaces/schema';
|
|
2
2
|
import { TMapper } from './mapper';
|
|
3
3
|
/**
|
|
4
|
-
* @type TFormValues
|
|
5
|
-
* Represents the values and state of a form.
|
|
4
|
+
* @type TFormValues<T>
|
|
5
|
+
* Represents the values and state of a form. It has a generic type that allows the importer to determine which type values key will return.
|
|
6
6
|
*
|
|
7
|
-
* @property {
|
|
7
|
+
* @property {Generic Type} values - The current values of the form fields.
|
|
8
8
|
* @property {string[]} erroredFields - A list of field names that have errors.
|
|
9
9
|
* @property {boolean} isValid - Indicates whether the form is valid.
|
|
10
10
|
*
|
|
@@ -17,8 +17,8 @@ import { TMapper } from './mapper';
|
|
|
17
17
|
* };
|
|
18
18
|
* ```
|
|
19
19
|
*/
|
|
20
|
-
type TFormValues = {
|
|
21
|
-
values:
|
|
20
|
+
type TFormValues<T> = {
|
|
21
|
+
values: T;
|
|
22
22
|
erroredFields: string[];
|
|
23
23
|
isValid: boolean;
|
|
24
24
|
};
|
|
@@ -41,11 +41,6 @@ type TFormValues = {
|
|
|
41
41
|
*/
|
|
42
42
|
type TFormEntry = Omit<IFormSchema, 'components'> & {
|
|
43
43
|
schema?: IFormSchema;
|
|
44
|
-
|
|
45
|
-
onData?: (payload: {
|
|
46
|
-
field: string;
|
|
47
|
-
data: TFormValues;
|
|
48
|
-
}) => void;
|
|
49
|
-
mappers: TMapper<unknown>[];
|
|
44
|
+
mappers?: TMapper<unknown>[];
|
|
50
45
|
};
|
|
51
46
|
export { TFormValues, TFormEntry };
|