@bolttech/form-engine-core 0.0.1-beta.4 → 0.0.1-beta.41
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 +548 -285
- 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 +24 -54
- package/src/managers/form.d.ts +56 -35
- package/src/managers/formGroup.d.ts +13 -5
- package/src/types/event.d.ts +8 -2
- package/src/types/form.d.ts +6 -11
- package/src/types/schema.d.ts +82 -40
- 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.41",
|
|
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,28 @@ 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$:
|
|
39
|
+
private _mounted;
|
|
40
|
+
propsSubject$: SafeSubject<Record<string, unknown>>;
|
|
41
|
+
errorSubject$: SafeSubject<Record<string, unknown>>;
|
|
42
|
+
valueSubject$: SafeSubject<Record<string, unknown>>;
|
|
43
|
+
valueSubscription$: Subscription;
|
|
44
|
+
visibilitySubject$: SafeSubject<boolean>;
|
|
45
|
+
apiSubject$: SafeSubject<TApiResponse>;
|
|
46
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
47
|
+
apiEventQueueSubject$: SafeSubject<{
|
|
45
48
|
event: TEvents;
|
|
46
49
|
}>;
|
|
47
50
|
fieldState$: Observable<IState>;
|
|
@@ -76,7 +79,7 @@ declare class FormField {
|
|
|
76
79
|
* @param {unknown} [options.initialValue] - The initial value of the form field.
|
|
77
80
|
* @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
|
|
78
81
|
*/
|
|
79
|
-
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$,
|
|
82
|
+
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, fieldEventSubject$, dataSubject$, mapper, }: {
|
|
80
83
|
schemaComponent: IComponentSchema;
|
|
81
84
|
config?: TSchemaFormConfig;
|
|
82
85
|
path?: string;
|
|
@@ -94,9 +97,7 @@ declare class FormField {
|
|
|
94
97
|
key: string;
|
|
95
98
|
event: TMutationEvents;
|
|
96
99
|
}>;
|
|
97
|
-
|
|
98
|
-
key: string;
|
|
99
|
-
}>;
|
|
100
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
100
101
|
dataSubject$: Subject<{
|
|
101
102
|
key: string;
|
|
102
103
|
event: TEvents;
|
|
@@ -107,21 +108,6 @@ declare class FormField {
|
|
|
107
108
|
* method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
|
|
108
109
|
*/
|
|
109
110
|
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
111
|
/**
|
|
126
112
|
* Retrieves the properties associated with the form field.
|
|
127
113
|
*
|
|
@@ -137,16 +123,10 @@ declare class FormField {
|
|
|
137
123
|
/**
|
|
138
124
|
* Retrieves the current state value of the form field.
|
|
139
125
|
*
|
|
140
|
-
* @returns {unknown} - The current state value of the form field.
|
|
126
|
+
* @returns {Record<string,unknown>} - The current state value of the form field.
|
|
141
127
|
*/
|
|
142
|
-
get stateValue(): unknown
|
|
128
|
+
get stateValue(): Record<string, unknown>;
|
|
143
129
|
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
130
|
/**
|
|
151
131
|
* Retrieves the current value of the form field.
|
|
152
132
|
*
|
|
@@ -205,15 +185,12 @@ declare class FormField {
|
|
|
205
185
|
* Mounts the form field by initializing necessary subjects and combining their streams.
|
|
206
186
|
*
|
|
207
187
|
* @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
188
|
* @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
|
|
211
189
|
* @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
190
|
* @returns {void}
|
|
214
191
|
*/
|
|
215
192
|
mountField({ valueSubscription, propsSubscription, }: {
|
|
216
|
-
valueSubscription: (value: unknown) => void;
|
|
193
|
+
valueSubscription: (value: Record<string, unknown>) => void;
|
|
217
194
|
propsSubscription: (payload: Partial<IState>) => void;
|
|
218
195
|
}): void;
|
|
219
196
|
/**
|
|
@@ -224,10 +201,7 @@ declare class FormField {
|
|
|
224
201
|
* @returns {void}
|
|
225
202
|
*/
|
|
226
203
|
emitValue(prop: {
|
|
227
|
-
value: unknown
|
|
228
|
-
_value: unknown;
|
|
229
|
-
_stateValue: unknown;
|
|
230
|
-
};
|
|
204
|
+
value: unknown;
|
|
231
205
|
event: TEvents;
|
|
232
206
|
}): void;
|
|
233
207
|
/**
|
|
@@ -248,10 +222,6 @@ declare class FormField {
|
|
|
248
222
|
setFieldValidity({ event }: {
|
|
249
223
|
event: TEvents;
|
|
250
224
|
}): void;
|
|
251
|
-
/**
|
|
252
|
-
* WIP expensive function to get updated field validity on each event
|
|
253
|
-
*/
|
|
254
|
-
updateValidityFlag(): void;
|
|
255
225
|
/**
|
|
256
226
|
* Formats the field value using the specified formatters, if available.
|
|
257
227
|
*
|
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,19 @@ declare class FormCore {
|
|
|
18
18
|
key: string;
|
|
19
19
|
event: TMutationEvents;
|
|
20
20
|
}>;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
templateSubscription: Subscription;
|
|
22
|
+
submitSubject$: Subject<TFormValues<any>>;
|
|
23
|
+
mountSubject$: Subject<TFormValues<any>>;
|
|
24
|
+
fieldEventSubject$: Subject<TFieldEvent>;
|
|
25
25
|
dataSubject$: Subject<{
|
|
26
26
|
key: string;
|
|
27
27
|
event: TEvents;
|
|
28
28
|
}>;
|
|
29
|
-
dataCallbackSubscription$: Subscription;
|
|
30
29
|
subscribedTemplates: TSubscribedTemplates[];
|
|
31
30
|
action?: string;
|
|
32
31
|
method?: string;
|
|
33
|
-
config
|
|
34
|
-
mappers: TMapper<unknown
|
|
35
|
-
onSubmit?: (data: TFormValues) => void;
|
|
32
|
+
config: Required<TSchemaFormConfig>;
|
|
33
|
+
mappers: Map<string, TMapper<unknown>>;
|
|
36
34
|
/**
|
|
37
35
|
* Creates an instance of FormCore.
|
|
38
36
|
*
|
|
@@ -42,7 +40,6 @@ declare class FormCore {
|
|
|
42
40
|
* @param {string} [entry.action] - The action attribute of the form.
|
|
43
41
|
* @param {string} [entry.method] - The method attribute of the form.
|
|
44
42
|
* @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
43
|
* @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
|
|
47
44
|
*/
|
|
48
45
|
constructor(entry: TFormEntry & Omit<IFormSchema, 'components'>);
|
|
@@ -68,14 +65,6 @@ declare class FormCore {
|
|
|
68
65
|
* Subscribes to templates for dynamic updates.
|
|
69
66
|
*/
|
|
70
67
|
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
68
|
/**
|
|
80
69
|
* Gets the value of a property from a field.
|
|
81
70
|
*
|
|
@@ -115,7 +104,7 @@ declare class FormCore {
|
|
|
115
104
|
* @param {string} expression - The expression containing parameters.
|
|
116
105
|
* @returns {string[]} An array of extracted parameters.
|
|
117
106
|
*/
|
|
118
|
-
extractParams(expression: string):
|
|
107
|
+
extractParams(expression: string): unknown[];
|
|
119
108
|
/**
|
|
120
109
|
* Replaces expressions marked by ${...} in the expression string with the provided values.
|
|
121
110
|
*
|
|
@@ -123,7 +112,7 @@ declare class FormCore {
|
|
|
123
112
|
* @param {string[]} values - The values to be inserted into the marked expressions.
|
|
124
113
|
* @returns {string} The expression string with the replacements made.
|
|
125
114
|
*/
|
|
126
|
-
replaceExpression(expression: string, values:
|
|
115
|
+
replaceExpression(expression: string, values: unknown[]): string;
|
|
127
116
|
/**
|
|
128
117
|
* Checks if an expression string contains string concatenation within a marked expression.
|
|
129
118
|
*
|
|
@@ -142,15 +131,6 @@ declare class FormCore {
|
|
|
142
131
|
key: string;
|
|
143
132
|
event: TMutationEvents;
|
|
144
133
|
}): 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
134
|
/**
|
|
155
135
|
* Validates and collects the names of form fields in the provided schema structure.
|
|
156
136
|
*
|
|
@@ -161,6 +141,15 @@ declare class FormCore {
|
|
|
161
141
|
* @private
|
|
162
142
|
*/
|
|
163
143
|
private static checkIndexes;
|
|
144
|
+
/**
|
|
145
|
+
* @internal
|
|
146
|
+
* Update field visibility accordingly.
|
|
147
|
+
*
|
|
148
|
+
* @param {string} field - Field name to be updated.
|
|
149
|
+
* @param {boolean} hasError - Condition to be used as visibility.
|
|
150
|
+
* @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.
|
|
151
|
+
*/
|
|
152
|
+
private setFieldVisibility;
|
|
164
153
|
/**
|
|
165
154
|
* Validates visibility conditions for a given event and updates field visibility accordingly.
|
|
166
155
|
*
|
|
@@ -172,6 +161,14 @@ declare class FormCore {
|
|
|
172
161
|
event: TEvents;
|
|
173
162
|
key: string;
|
|
174
163
|
}): void;
|
|
164
|
+
/**
|
|
165
|
+
* @internal
|
|
166
|
+
* Update field value and emit change and cleared event.
|
|
167
|
+
*
|
|
168
|
+
* @param {string} key - Field name to be updated.
|
|
169
|
+
* @param {unknown} value - Value to be inserted into field.
|
|
170
|
+
*/
|
|
171
|
+
private setResetFieldValue;
|
|
175
172
|
/**
|
|
176
173
|
* Resets field values based on reset conditions defined in the schema.
|
|
177
174
|
*
|
|
@@ -187,21 +184,28 @@ declare class FormCore {
|
|
|
187
184
|
* Adds a field onto the form instance regardless there is a schema or not
|
|
188
185
|
*
|
|
189
186
|
* @param fieldSchema
|
|
187
|
+
* @param mapperElement
|
|
190
188
|
*/
|
|
191
|
-
addField(fieldSchema
|
|
189
|
+
addField({ fieldSchema, mapperElement, }: {
|
|
190
|
+
fieldSchema: IComponentSchema;
|
|
191
|
+
mapperElement?: TMapper<unknown>;
|
|
192
|
+
}): void;
|
|
193
|
+
removeField({ key }: {
|
|
194
|
+
key: string;
|
|
195
|
+
}): void;
|
|
192
196
|
/**
|
|
193
197
|
* Serializes the schema structure to create form fields.
|
|
194
198
|
*
|
|
195
199
|
* @param {IComponentSchema[]} [struct] - The schema structure to serialize.
|
|
196
200
|
* @param {string} [path] - The path of the parent component.
|
|
197
201
|
*/
|
|
198
|
-
serializeStructure(struct?:
|
|
202
|
+
serializeStructure(struct?: IComponentSchemaAsFormField<unknown>[], path?: string): void;
|
|
199
203
|
/**
|
|
200
204
|
* Refreshes form fields based on changes in the schema structure.
|
|
201
205
|
*
|
|
202
206
|
* @param {IComponentSchema[]} struct - The updated schema structure.
|
|
203
207
|
*/
|
|
204
|
-
refreshFields(struct:
|
|
208
|
+
refreshFields(struct: IComponentSchemaAsFormField<unknown>[]): void;
|
|
205
209
|
/**
|
|
206
210
|
* Gets a form field by its key.
|
|
207
211
|
*
|
|
@@ -221,11 +225,28 @@ declare class FormCore {
|
|
|
221
225
|
*
|
|
222
226
|
* @returns {TFormValues} The current form values.
|
|
223
227
|
*/
|
|
224
|
-
getFormValues(): TFormValues
|
|
228
|
+
getFormValues<T>(): TFormValues<T>;
|
|
229
|
+
subscribeFieldEvent({ callback, }: {
|
|
230
|
+
callback: (payload: TFieldEvent) => void;
|
|
231
|
+
}): Subscription;
|
|
232
|
+
subscribeOnMount<T>(callback: (payload: TFormValues<T>) => void): Subscription;
|
|
233
|
+
/**
|
|
234
|
+
*
|
|
235
|
+
* @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
|
|
236
|
+
*/
|
|
237
|
+
subscribeData<T>(callback: (payload: {
|
|
238
|
+
field: string;
|
|
239
|
+
data: TFormValues<T>;
|
|
240
|
+
}) => void): Subscription;
|
|
241
|
+
subscribeOnSubmit<T>(callback: (payload: TFormValues<T>) => void): Subscription;
|
|
242
|
+
/**
|
|
243
|
+
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
244
|
+
*/
|
|
245
|
+
mounted<T>(): void;
|
|
225
246
|
/**
|
|
226
247
|
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
227
248
|
*/
|
|
228
|
-
submit(): void;
|
|
249
|
+
submit<T>(): void;
|
|
229
250
|
destroy(): void;
|
|
230
251
|
}
|
|
231
252
|
type TFormCore = FormCore;
|
|
@@ -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<T>({ ids, callback, }: {
|
|
84
|
+
ids: string[];
|
|
85
|
+
callback: (payload: Record<string, {
|
|
86
|
+
formId: string;
|
|
87
|
+
formField: string;
|
|
88
|
+
values?: TFormValues<T>;
|
|
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.
|
|
@@ -7,7 +8,7 @@
|
|
|
7
8
|
* const event: TEvents = 'ON_FIELD_CHANGE';
|
|
8
9
|
* ```
|
|
9
10
|
*/
|
|
10
|
-
type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIELD_FOCUS' | 'ON_FIELD_CLICK' | 'ON_FIELD_KEYUP' | 'ON_FIELD_KEYDOWN' | 'ON_FORM_SUBMIT' | 'ON_API_FIELD_RESPONSE';
|
|
11
|
+
type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_CHANGE' | 'ON_FIELD_BLUR' | 'ON_FIELD_FOCUS' | 'ON_FIELD_CLICK' | 'ON_FIELD_KEYUP' | 'ON_FIELD_KEYDOWN' | 'ON_FIELD_CLEARED' | 'ON_FORM_SUBMIT' | 'ON_FORM_MOUNT' | 'ON_API_FIELD_RESPONSE';
|
|
11
12
|
/**
|
|
12
13
|
* @type TMutationEvents
|
|
13
14
|
* Represents the different types of events that can occur internally that triggers templating.
|
|
@@ -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 };
|