@bolttech/form-engine-core 1.0.2-beta.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +2327 -0
- package/index.esm.js +154 -82
- package/package.json +9 -10
- package/index.esm.d.ts +0 -1
- package/src/constants/constants.d.ts +0 -10
- package/src/formatters/creditCard.d.ts +0 -23
- package/src/formatters/custom.d.ts +0 -29
- package/src/formatters/handler.d.ts +0 -2
- package/src/formatters/regex.d.ts +0 -47
- package/src/formatters/splitter.d.ts +0 -17
- package/src/formatters/string.d.ts +0 -88
- package/src/helpers/SafeSubject.d.ts +0 -11
- package/src/helpers/creditCard.d.ts +0 -95
- package/src/helpers/helpers.d.ts +0 -67
- package/src/helpers/validation.d.ts +0 -27
- package/src/index.d.ts +0 -10
- package/src/interfaces/schema.d.ts +0 -112
- package/src/interfaces/state.d.ts +0 -22
- package/src/managers/field.d.ts +0 -326
- package/src/managers/form.d.ts +0 -346
- package/src/managers/formGroup.d.ts +0 -110
- package/src/managers/index.d.ts +0 -3
- package/src/masks/creditCard.d.ts +0 -60
- package/src/masks/generic.d.ts +0 -39
- package/src/masks/handler.d.ts +0 -2
- package/src/masks/string.d.ts +0 -99
- package/src/types/event.d.ts +0 -109
- package/src/types/form.d.ts +0 -55
- package/src/types/mapper.d.ts +0 -95
- package/src/types/schema.d.ts +0 -835
- package/src/types/template.d.ts +0 -50
- package/src/types/utility.d.ts +0 -6
- package/src/validations/creditCard.d.ts +0 -52
- package/src/validations/custom.d.ts +0 -25
- package/src/validations/date.d.ts +0 -79
- package/src/validations/document.d.ts +0 -25
- package/src/validations/handler.d.ts +0 -2
- package/src/validations/length.d.ts +0 -39
- package/src/validations/list.d.ts +0 -32
- package/src/validations/logical.d.ts +0 -75
- package/src/validations/multiple.d.ts +0 -31
- package/src/validations/namedRule.d.ts +0 -22
- package/src/validations/number.d.ts +0 -145
- package/src/validations/object.d.ts +0 -44
- package/src/validations/regex.d.ts +0 -217
- package/src/validations/string.d.ts +0 -53
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { Subject } from 'rxjs';
|
|
2
|
-
import { TFormEntry, TFormValues } from '../types/form';
|
|
3
|
-
import { TMapper } from '../types/mapper';
|
|
4
|
-
import { TFormCore } from './form';
|
|
5
|
-
import { TSchemaFormConfig } from '../types/schema';
|
|
6
|
-
import { TFormDataPayload, TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload, TFormSubmitPayload, TFormValidationPayload } from '../types/event';
|
|
7
|
-
/**
|
|
8
|
-
* Represents a group that manages multiple forms.
|
|
9
|
-
*/
|
|
10
|
-
declare class FormGroup<ComponentElementType> {
|
|
11
|
-
forms: Map<string, TFormCore>;
|
|
12
|
-
config: Required<TSchemaFormConfig>;
|
|
13
|
-
dataSubject$: Subject<TFormDataPayload>;
|
|
14
|
-
formValidSubject$: Subject<TFormValidationPayload>;
|
|
15
|
-
submitSubject$: Subject<TFormSubmitPayload<unknown>>;
|
|
16
|
-
mappers?: TMapper<ComponentElementType>[];
|
|
17
|
-
/**
|
|
18
|
-
* Creates an instance of FormGroup.
|
|
19
|
-
*/
|
|
20
|
-
constructor(entry?: {
|
|
21
|
-
mappers?: TMapper<ComponentElementType>[];
|
|
22
|
-
config?: TSchemaFormConfig;
|
|
23
|
-
});
|
|
24
|
-
/**
|
|
25
|
-
* Creates an empty form with given index
|
|
26
|
-
*
|
|
27
|
-
* @param {string} options.index
|
|
28
|
-
* @param {TMapper<unknown>} options.mappers
|
|
29
|
-
*/
|
|
30
|
-
createFormWithIndex({ index, mappers, }: {
|
|
31
|
-
index: string;
|
|
32
|
-
mappers?: TMapper<unknown>[];
|
|
33
|
-
}): void;
|
|
34
|
-
/**
|
|
35
|
-
* Adds a form instance to the form group.
|
|
36
|
-
*
|
|
37
|
-
* @param {object} options - Options for adding a form.
|
|
38
|
-
* @param {string} options.key - The key associated with the form instance.
|
|
39
|
-
* @param {TFormCore} options.formInstance - The instance of the form to add.
|
|
40
|
-
*/
|
|
41
|
-
addForm({ key, params }: {
|
|
42
|
-
key: string;
|
|
43
|
-
params: TFormEntry;
|
|
44
|
-
}): void;
|
|
45
|
-
/**
|
|
46
|
-
* Retrieves a form instance from the form group.
|
|
47
|
-
*
|
|
48
|
-
* @param {object} options - Options for retrieving a form.
|
|
49
|
-
* @param {string} options.key - The key associated with the form instance.
|
|
50
|
-
* @returns {TFormCore | undefined} The instance of the form, if found; otherwise, undefined.
|
|
51
|
-
*/
|
|
52
|
-
getForm({ key }: {
|
|
53
|
-
key: string;
|
|
54
|
-
}): TFormCore | undefined;
|
|
55
|
-
/**
|
|
56
|
-
* Removes a form instance from the form group.
|
|
57
|
-
*
|
|
58
|
-
* @param {object} options - Options for removing a form.
|
|
59
|
-
* @param {string} options.key - The key associated with the form instance to remove.
|
|
60
|
-
*/
|
|
61
|
-
removeForm({ key }: {
|
|
62
|
-
key: string;
|
|
63
|
-
}): void;
|
|
64
|
-
/**
|
|
65
|
-
* removes a field given a form and field index
|
|
66
|
-
*
|
|
67
|
-
* @param {string} options.formIndex
|
|
68
|
-
* @param {string} options.fieldIndex
|
|
69
|
-
*/
|
|
70
|
-
removeField({ formIndex, fieldIndex, }: {
|
|
71
|
-
formIndex: string;
|
|
72
|
-
fieldIndex: string;
|
|
73
|
-
}): void;
|
|
74
|
-
/**
|
|
75
|
-
* Checks if the specified key already exists in the form group.
|
|
76
|
-
*
|
|
77
|
-
* @param {object} options - Options for checking the key.
|
|
78
|
-
* @param {string} options.key - The key to check.
|
|
79
|
-
* @throws {Error} Throws an error if the key already exists in the form group.
|
|
80
|
-
*/
|
|
81
|
-
checkIndexes({ key }: {
|
|
82
|
-
key: string;
|
|
83
|
-
}): void;
|
|
84
|
-
/**
|
|
85
|
-
* Prints the form group instance to the console.
|
|
86
|
-
*/
|
|
87
|
-
printFormGroupInstance(): void;
|
|
88
|
-
/**
|
|
89
|
-
* Prototype submit function to multiple forms
|
|
90
|
-
* @param {string[]} indexes form indexes to be submitted
|
|
91
|
-
* @param callback
|
|
92
|
-
* @returns
|
|
93
|
-
*/
|
|
94
|
-
submitMultipleFormsByIndex<T>(indexes: string[], callback?: (payload: TFormValues<T>) => void): void;
|
|
95
|
-
onDataSubscription<T>({ ids, callback, }: {
|
|
96
|
-
ids: string[];
|
|
97
|
-
callback: (payload: TFormGroupOnDataEventPayload<T>) => void;
|
|
98
|
-
}): import("rxjs").Subscription;
|
|
99
|
-
onValidSubscription({ ids, callback, }: {
|
|
100
|
-
ids: string[];
|
|
101
|
-
callback: (payload: TFormGroupOnValidEventPayload) => void;
|
|
102
|
-
}): import("rxjs").Subscription;
|
|
103
|
-
onSubmitSubscription<T>({ ids, callback, }: {
|
|
104
|
-
ids: string[];
|
|
105
|
-
callback: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
|
|
106
|
-
}): import("rxjs").Subscription;
|
|
107
|
-
destroy: () => void;
|
|
108
|
-
}
|
|
109
|
-
type TFormGroup<T> = FormGroup<T>;
|
|
110
|
-
export { TFormGroup, FormGroup };
|
package/src/managers/index.d.ts
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Applies a secure mask to a credit card number, hiding most of its digits.
|
|
3
|
-
*
|
|
4
|
-
* @param value - The credit card number to be masked.
|
|
5
|
-
* @returns The masked credit card number.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```typescript
|
|
9
|
-
* import { secureCreditCard } from './path/to/creditCardFunctions';
|
|
10
|
-
*
|
|
11
|
-
* const maskedCardNumber = secureCreditCard('1234567890123456');
|
|
12
|
-
* console.log(maskedCardNumber); // Output: '1xxxxxxxxxxxx456'
|
|
13
|
-
* ```
|
|
14
|
-
*/
|
|
15
|
-
export declare const secureCreditCard: (value: string) => string;
|
|
16
|
-
/**
|
|
17
|
-
* Formats a credit card number by inserting spaces every four characters.
|
|
18
|
-
*
|
|
19
|
-
* @param value - The credit card number to be formatted.
|
|
20
|
-
* @returns The formatted credit card number.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```typescript
|
|
24
|
-
* import { card } from './path/to/creditCardFunctions';
|
|
25
|
-
*
|
|
26
|
-
* const formattedCardNumber = card('1234567890123456');
|
|
27
|
-
* console.log(formattedCardNumber); // Output: '1234 5678 9012 3456'
|
|
28
|
-
* ```
|
|
29
|
-
*/
|
|
30
|
-
export declare const card: (value: string) => string;
|
|
31
|
-
/**
|
|
32
|
-
* Formats a credit card expiration date (MM/YY).
|
|
33
|
-
*
|
|
34
|
-
* @param value - The expiration date to be formatted (in MMYY or MM/YY format).
|
|
35
|
-
* @returns The formatted expiration date.
|
|
36
|
-
*
|
|
37
|
-
* @example
|
|
38
|
-
* ```typescript
|
|
39
|
-
* import { cardDate } from './path/to/creditCardFunctions';
|
|
40
|
-
*
|
|
41
|
-
* const formattedCardDate = cardDate('1223');
|
|
42
|
-
* console.log(formattedCardDate); // Output: '12/23'
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
export declare const cardDate: (value: string) => string;
|
|
46
|
-
/**
|
|
47
|
-
* Formats a credit card FEIN (Federal Employer Identification Number) in a specific format.
|
|
48
|
-
*
|
|
49
|
-
* @param value - The FEIN to be formatted.
|
|
50
|
-
* @returns The formatted FEIN.
|
|
51
|
-
*
|
|
52
|
-
* @example
|
|
53
|
-
* ```typescript
|
|
54
|
-
* import { fein } from './path/to/creditCardFunctions';
|
|
55
|
-
*
|
|
56
|
-
* const formattedFEIN = fein('123456789');
|
|
57
|
-
* console.log(formattedFEIN); // Output: '12-3456789'
|
|
58
|
-
* ```
|
|
59
|
-
*/
|
|
60
|
-
export declare const fein: (value: string) => string;
|
package/src/masks/generic.d.ts
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { TMasks } from '../types/schema';
|
|
2
|
-
/**
|
|
3
|
-
* Applies multiple generic masks to a string based on the provided mask configuration.
|
|
4
|
-
*
|
|
5
|
-
* @param value - The value to be masked.
|
|
6
|
-
* @param masks - An object containing the mask configuration.
|
|
7
|
-
* @returns The masked value.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```typescript
|
|
11
|
-
* import maskValue from './path/to/maskFunctions';
|
|
12
|
-
*
|
|
13
|
-
* const masks = {
|
|
14
|
-
* generic: [
|
|
15
|
-
* { from: 2, to: 4, mask: '*' },
|
|
16
|
-
* { from: 7, to: 9, mask: '#' }
|
|
17
|
-
* ]
|
|
18
|
-
* };
|
|
19
|
-
*
|
|
20
|
-
* const maskedValue = maskValue('123456789', masks);
|
|
21
|
-
* console.log(maskedValue); // Output: '1**45###9'
|
|
22
|
-
*
|
|
23
|
-
* // Using from a JSON config
|
|
24
|
-
* const config = {
|
|
25
|
-
* value: 'abcdefghij',
|
|
26
|
-
* masks: {
|
|
27
|
-
* generic: [
|
|
28
|
-
* { from: 3, to: 6, mask: '*' },
|
|
29
|
-
* { from: 8, to: 10, mask: '#' }
|
|
30
|
-
* ]
|
|
31
|
-
* }
|
|
32
|
-
* };
|
|
33
|
-
*
|
|
34
|
-
* const maskedValue = maskValue(config.value, config.masks);
|
|
35
|
-
* console.log(maskedValue); // Output: 'ab***gh###'
|
|
36
|
-
* ```
|
|
37
|
-
*/
|
|
38
|
-
declare const _default: (value: string, masks: TMasks) => string;
|
|
39
|
-
export default _default;
|
package/src/masks/handler.d.ts
DELETED
package/src/masks/string.d.ts
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { TMasks } from '../types/schema';
|
|
2
|
-
/**
|
|
3
|
-
* Replaces all characters in a string with a specified replacement string or character.
|
|
4
|
-
*
|
|
5
|
-
* @param value - The value to be masked.
|
|
6
|
-
* @param masks - An object containing the mask configuration.
|
|
7
|
-
* @returns The masked value.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```typescript
|
|
11
|
-
* import { replaceAll } from './path/to/maskFunctions';
|
|
12
|
-
*
|
|
13
|
-
* const masks = { replaceAll: '*' };
|
|
14
|
-
*
|
|
15
|
-
* const maskedValue = replaceAll('12345', masks);
|
|
16
|
-
* console.log(maskedValue); // Output: '*****'
|
|
17
|
-
*
|
|
18
|
-
* // Using from a JSON config
|
|
19
|
-
* const config = {
|
|
20
|
-
* value: 'hello',
|
|
21
|
-
* masks: { replaceAll: '*' }
|
|
22
|
-
* };
|
|
23
|
-
*
|
|
24
|
-
* const maskedValue = replaceAll(config.value, config.masks);
|
|
25
|
-
* console.log(maskedValue); // Output: '*****'
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export declare const replaceAll: (value: string | number, masks: TMasks) => unknown;
|
|
29
|
-
/**
|
|
30
|
-
* Formats a numeric value as a currency string based on the provided mask configuration.
|
|
31
|
-
*
|
|
32
|
-
* @param value - The numeric value to be formatted.
|
|
33
|
-
* @param masks - An object containing the mask configuration.
|
|
34
|
-
* @returns The formatted currency string.
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```typescript
|
|
38
|
-
* import { currency } from './path/to/maskFunctions';
|
|
39
|
-
*
|
|
40
|
-
* const masks = {
|
|
41
|
-
* currency: {
|
|
42
|
-
* align: 'right',
|
|
43
|
-
* decimal: ',',
|
|
44
|
-
* precision: 2,
|
|
45
|
-
* prefix: 'USD',
|
|
46
|
-
* thousands: '.'
|
|
47
|
-
* }
|
|
48
|
-
* };
|
|
49
|
-
*
|
|
50
|
-
* const formattedValue = currency(12345.67, masks);
|
|
51
|
-
* console.log(formattedValue); // Output: '12.345,67 $'
|
|
52
|
-
*
|
|
53
|
-
* // Using from a JSON config
|
|
54
|
-
* const config = {
|
|
55
|
-
* value: 9876.54,
|
|
56
|
-
* masks: {
|
|
57
|
-
* currency: {
|
|
58
|
-
* align: 'right',
|
|
59
|
-
* decimal: ',',
|
|
60
|
-
* precision: 2,
|
|
61
|
-
* prefix: 'EUR',
|
|
62
|
-
* thousands: '.'
|
|
63
|
-
* }
|
|
64
|
-
* }
|
|
65
|
-
* };
|
|
66
|
-
*
|
|
67
|
-
* const formattedValue = currency(config.value, config.masks);
|
|
68
|
-
* console.log(formattedValue); // Output: '9.876,54 €'
|
|
69
|
-
*
|
|
70
|
-
* PS: To unCurrency this value, usage onlyFloatNumber formatter
|
|
71
|
-
* ```
|
|
72
|
-
*/
|
|
73
|
-
export declare const currency: (value: string | number, masks: TMasks) => unknown;
|
|
74
|
-
/**
|
|
75
|
-
* Applies a custom mask to a string based on the provided mask configuration.
|
|
76
|
-
*
|
|
77
|
-
* @param value - The value to be masked.
|
|
78
|
-
* @param masks - An object containing the mask configuration.
|
|
79
|
-
* @returns The masked value.
|
|
80
|
-
*
|
|
81
|
-
* @example
|
|
82
|
-
* ```typescript
|
|
83
|
-
* import { custom } from './path/to/maskFunctions';
|
|
84
|
-
*
|
|
85
|
-
* const masks = { custom: '##-##' };
|
|
86
|
-
*
|
|
87
|
-
* const maskedValue = custom('123456', masks);
|
|
88
|
-
* console.log(maskedValue); // Output: '12-34'
|
|
89
|
-
*
|
|
90
|
-
* // Using from a JSON config
|
|
91
|
-
* const config = {
|
|
92
|
-
* masks: { custom: '###-###' }
|
|
93
|
-
* };
|
|
94
|
-
*
|
|
95
|
-
* const maskedValue = custom(config.value, config.masks);
|
|
96
|
-
* console.log(maskedValue); // Output: '987-654'
|
|
97
|
-
* ```
|
|
98
|
-
*/
|
|
99
|
-
export declare const custom: (value: string, masks: TMasks) => string;
|
package/src/types/event.d.ts
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import { IFormField } from '../managers';
|
|
2
|
-
import { TFormValues } from './form';
|
|
3
|
-
/**
|
|
4
|
-
* @type TEvents
|
|
5
|
-
* Represents the different types of events that can occur on form fields.
|
|
6
|
-
*
|
|
7
|
-
* @example
|
|
8
|
-
* ```typescript
|
|
9
|
-
* const event: TEvents = 'ON_FIELD_CHANGE';
|
|
10
|
-
* ```
|
|
11
|
-
*/
|
|
12
|
-
type TEvents = 'ON_FIELD_MOUNT' | 'ON_FIELD_UNMOUNT' | '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_FIELD_VALIDATION' | 'ON_FORM_MOUNT' | 'ON_API_FIELD_REQUEST' | 'ON_API_FIELD_RESPONSE';
|
|
13
|
-
/**
|
|
14
|
-
* @type TMutationEvents
|
|
15
|
-
* Represents the different types of events that can occur internally that triggers templating.
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```typescript
|
|
19
|
-
* const event: TMutationEvents = 'ON_VALUE';
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
type TMutationEvents = 'ON_VALUE' | 'ON_PROPS' | 'ON_VISIBILITY' | 'ON_API_REQUEST' | 'ON_API_RESPONSE' | 'ON_IVARS' | 'ON_FIELDS' | 'ON_RESET' | 'ON_FORM';
|
|
23
|
-
declare enum TMutationEnum {
|
|
24
|
-
ON_VALUE = "value",
|
|
25
|
-
ON_PROPS = "props",
|
|
26
|
-
ON_VISIBILITY = "visibility",
|
|
27
|
-
ON_API = "api",
|
|
28
|
-
ON_IVARS = "iVars",
|
|
29
|
-
ON_FIELDS = "fields"
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* @type TValueChangeEvent
|
|
33
|
-
* Represents the custom change handle function to perform value changes.
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```typescript
|
|
37
|
-
* handleChangeEvent (value, opts) {
|
|
38
|
-
* return value
|
|
39
|
-
* }
|
|
40
|
-
* ```
|
|
41
|
-
*/
|
|
42
|
-
type TValueChangeEvent = (value: unknown, opts?: {
|
|
43
|
-
props: Record<string, unknown>;
|
|
44
|
-
}) => void;
|
|
45
|
-
/**
|
|
46
|
-
* @type TFieldEvent
|
|
47
|
-
* Event emitted on all basic form events, except onData
|
|
48
|
-
*/
|
|
49
|
-
type TFieldEvent = {
|
|
50
|
-
event: TEvents;
|
|
51
|
-
fieldName: string;
|
|
52
|
-
fieldInstance?: IFormField;
|
|
53
|
-
};
|
|
54
|
-
/**
|
|
55
|
-
* @type TFormDataPayload
|
|
56
|
-
* Event emitted to formGroup instance to capture onData form events
|
|
57
|
-
*/
|
|
58
|
-
type TFormDataPayload = {
|
|
59
|
-
formIndex: string;
|
|
60
|
-
fieldIndex: string;
|
|
61
|
-
event: TEvents;
|
|
62
|
-
};
|
|
63
|
-
/**
|
|
64
|
-
* @type TFormSubmitPayload
|
|
65
|
-
* Event emitted to formGroup instance to capture onSubmit form events
|
|
66
|
-
*/
|
|
67
|
-
type TFormSubmitPayload<T> = {
|
|
68
|
-
formIndex: string;
|
|
69
|
-
values: TFormValues<T>;
|
|
70
|
-
};
|
|
71
|
-
/**
|
|
72
|
-
* @type TFormValidationPayload
|
|
73
|
-
* Form onValid event emmited payload on callback function parameter
|
|
74
|
-
*/
|
|
75
|
-
type TFormValidationPayload = {
|
|
76
|
-
formIndex: string;
|
|
77
|
-
valid: boolean;
|
|
78
|
-
};
|
|
79
|
-
/**
|
|
80
|
-
* @type TFieldValidationPayload
|
|
81
|
-
* field event emmited payload on field validation
|
|
82
|
-
*/
|
|
83
|
-
type TFieldValidationPayload = {
|
|
84
|
-
fieldTrigger: string;
|
|
85
|
-
};
|
|
86
|
-
type TFormDataValues<T> = {
|
|
87
|
-
formId: string;
|
|
88
|
-
formField: string;
|
|
89
|
-
values?: TFormValues<T>;
|
|
90
|
-
};
|
|
91
|
-
/**
|
|
92
|
-
* @type TFormGroupOnDataEventPayload
|
|
93
|
-
* Form Group onData event emitted payload on callback function parameter
|
|
94
|
-
*/
|
|
95
|
-
type TFormGroupOnDataEventPayload<T> = Record<string, TFormDataValues<T>>;
|
|
96
|
-
/**
|
|
97
|
-
* @type TFormGroupOnValidEventPayload
|
|
98
|
-
* Form Group onValid event emitted payload on callback function parameter
|
|
99
|
-
*/
|
|
100
|
-
type TFormGroupOnValidEventPayload = {
|
|
101
|
-
groupValid: boolean;
|
|
102
|
-
forms: Record<string, boolean>;
|
|
103
|
-
};
|
|
104
|
-
/**
|
|
105
|
-
* @type TFormGroupOnSubmitEventPayload
|
|
106
|
-
* Form Group onSubmit event emitted payload on callback function parameter
|
|
107
|
-
*/
|
|
108
|
-
type TFormGroupOnSubmitEventPayload<T> = Record<string, TFormValues<T> | undefined>;
|
|
109
|
-
export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormDataPayload, TFormDataValues, TFormSubmitPayload, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TFormValidationPayload, TFieldValidationPayload, };
|
package/src/types/form.d.ts
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Subject } from 'rxjs';
|
|
2
|
-
import { IFormSchema } from '../interfaces/schema';
|
|
3
|
-
import { TMapper } from './mapper';
|
|
4
|
-
import { TFormDataPayload, TFormSubmitPayload, TFormValidationPayload } from './event';
|
|
5
|
-
/**
|
|
6
|
-
* @type TFormValues<T>
|
|
7
|
-
* 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.
|
|
8
|
-
*
|
|
9
|
-
* @property {Generic Type} values - The current values of the form fields.
|
|
10
|
-
* @property {string[]} erroredFields - A list of field names that have errors.
|
|
11
|
-
* @property {boolean} isValid - Indicates whether the form is valid.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```typescript
|
|
15
|
-
* const formValues: TFormValues = {
|
|
16
|
-
* values: { name: 'John', age: 30 },
|
|
17
|
-
* erroredFields: ['email'],
|
|
18
|
-
* isValid: false
|
|
19
|
-
* };
|
|
20
|
-
* ```
|
|
21
|
-
*/
|
|
22
|
-
type TFormValues<T> = {
|
|
23
|
-
values: T;
|
|
24
|
-
metadata: unknown;
|
|
25
|
-
erroredFields: string[];
|
|
26
|
-
isValid: boolean;
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* @type TFormEntry
|
|
30
|
-
* Represents the entry configuration for a form.
|
|
31
|
-
*
|
|
32
|
-
* @property {IFormSchema} [schema] - The schema defining the structure and behavior of the form.
|
|
33
|
-
* @property {Record<string, unknown>} [initialValues] - The initial values for the form fields.
|
|
34
|
-
* @property {(data: TFormValues) => void} [onSubmit] - Callback function to handle form submission.
|
|
35
|
-
* @property {Subject<TFormDataPayload>} [dataSubject$] - data subject passed from formGroup instance
|
|
36
|
-
* @property {Subject<TFormValidationPayload>} [formValidSubject$] - formValid subject passed from formGroup instance
|
|
37
|
-
* @property {Subject<TFormSubmitPayload<unknown>>} [submitSubject$] - submit subject passed from formGroup instance
|
|
38
|
-
*
|
|
39
|
-
* @example
|
|
40
|
-
* ```typescript
|
|
41
|
-
* const formEntry: TFormEntry = {
|
|
42
|
-
* schema: [{ component: 'input', props: {}, name: 'name' }],
|
|
43
|
-
* initialValues: { name: 'John' },
|
|
44
|
-
* onSubmit: (data) => { console.log(data); }
|
|
45
|
-
* };
|
|
46
|
-
* ```
|
|
47
|
-
*/
|
|
48
|
-
type TFormEntry = Omit<IFormSchema, 'components'> & {
|
|
49
|
-
schema?: IFormSchema;
|
|
50
|
-
mappers?: TMapper<unknown>[];
|
|
51
|
-
dataSubject$?: Subject<TFormDataPayload>;
|
|
52
|
-
formValidSubject$?: Subject<TFormValidationPayload>;
|
|
53
|
-
submitSubject$?: Subject<TFormSubmitPayload<unknown>>;
|
|
54
|
-
};
|
|
55
|
-
export { TFormValues, TFormEntry };
|
package/src/types/mapper.d.ts
DELETED
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { TValueChangeEvent } from './event';
|
|
2
|
-
import { OneOf } from './utility';
|
|
3
|
-
/**
|
|
4
|
-
* @type TComponentPropsMapping
|
|
5
|
-
* Represents the mapping of component properties for various events and actions.
|
|
6
|
-
*
|
|
7
|
-
* @property {string} [getValue] - Function to get the value.
|
|
8
|
-
* @property {string} [setValue] - Function to set the value.
|
|
9
|
-
* @property {string} [onBlur] - Function to handle the blur event.
|
|
10
|
-
* @property {string} [onClick] - Function to handle the click event.
|
|
11
|
-
* @property {string} [onFocus] - Function to handle the focus event.
|
|
12
|
-
* @property {string} [onKeyUp] - Function to handle the keyup event.
|
|
13
|
-
* @property {string} [onKeyDown] - Function to handle the keydown event.
|
|
14
|
-
* @property {string} [setErrorMessage] - Function to set the error message.
|
|
15
|
-
* @property {string} [setErrorState] - Function to set the error state.
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* ```typescript
|
|
19
|
-
* const componentProps: TComponentPropsMapping = {
|
|
20
|
-
* getValue: 'getValueFunction',
|
|
21
|
-
* setValue: 'setValueFunction',
|
|
22
|
-
* onBlur: 'handleBlur',
|
|
23
|
-
* onClick: 'handleClick',
|
|
24
|
-
* onFocus: 'handleFocus',
|
|
25
|
-
* onKeyUp: 'handleKeyUp',
|
|
26
|
-
* onKeyDown: 'handleKeyDown',
|
|
27
|
-
* setErrorMessage: 'setErrorMessageFunction',
|
|
28
|
-
* setErrorState: 'setErrorStateFunction'
|
|
29
|
-
* };
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
type TComponentPropsMapping = {
|
|
33
|
-
getValue?: string;
|
|
34
|
-
setValue?: string;
|
|
35
|
-
onBlur?: string;
|
|
36
|
-
onClick?: string;
|
|
37
|
-
onSubmit?: string;
|
|
38
|
-
onFocus?: string;
|
|
39
|
-
onKeyUp?: string;
|
|
40
|
-
onKeyDown?: string;
|
|
41
|
-
setErrorMessage?: string;
|
|
42
|
-
setErrorState?: string;
|
|
43
|
-
};
|
|
44
|
-
/**
|
|
45
|
-
* @type TMapper
|
|
46
|
-
* Represents the mapping of a component, including the component type,
|
|
47
|
-
* name, events, and an optional function to handle value changes.
|
|
48
|
-
*
|
|
49
|
-
* @property {ElementType} component - The type of the component.
|
|
50
|
-
* @property {string} componentName - The name of the component.
|
|
51
|
-
* @property {TComponentPropsMapping} [events] - Mapping event properties for the component.
|
|
52
|
-
* @property {TValueChangeEvent} [valueChangeEvent] - Optional function to handle value changes.
|
|
53
|
-
*
|
|
54
|
-
* @example
|
|
55
|
-
* ```typescript
|
|
56
|
-
* const mappers: TMapper[] = [
|
|
57
|
-
* {
|
|
58
|
-
* component: InputElement,
|
|
59
|
-
* componentName: 'input',
|
|
60
|
-
* events: {
|
|
61
|
-
* getValue: 'onChange2',
|
|
62
|
-
* onBlur: 'onBlur2',
|
|
63
|
-
* onFocus: 'onFocus2',
|
|
64
|
-
* }
|
|
65
|
-
* },
|
|
66
|
-
* {
|
|
67
|
-
* component: Container,
|
|
68
|
-
* componentName: 'row',
|
|
69
|
-
* },
|
|
70
|
-
* {
|
|
71
|
-
* component: Dropdown,
|
|
72
|
-
* componentName: 'dropdown',
|
|
73
|
-
* valueChangeEvent: (event: {
|
|
74
|
-
* id: string;
|
|
75
|
-
* label: string;
|
|
76
|
-
* value: string;
|
|
77
|
-
* }) => ({ _value: event.value, _stateValue: event.id }),
|
|
78
|
-
* },
|
|
79
|
-
* {
|
|
80
|
-
* component: DatePicker,
|
|
81
|
-
* componentName: 'datepicker',
|
|
82
|
-
* valueChangeEvent: (event: string) => event,
|
|
83
|
-
* },
|
|
84
|
-
* ];
|
|
85
|
-
* ```
|
|
86
|
-
*/
|
|
87
|
-
type TMapper<T> = {
|
|
88
|
-
componentName: string;
|
|
89
|
-
events?: TComponentPropsMapping;
|
|
90
|
-
valueChangeEvent?: TValueChangeEvent;
|
|
91
|
-
} & OneOf<{
|
|
92
|
-
component: T;
|
|
93
|
-
asynccomponent: T;
|
|
94
|
-
}>;
|
|
95
|
-
export { TMapper, TComponentPropsMapping };
|