@bolttech/form-engine-core 1.0.0-beta.4 → 1.0.0-beta.6
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.esm.js +168 -86
- package/package.json +1 -1
- package/src/interfaces/schema.d.ts +1 -0
- package/src/managers/field.d.ts +13 -1
- package/src/managers/form.d.ts +9 -6
- package/src/types/form.d.ts +1 -0
package/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged, distinctUntilChanged, skip } from 'rxjs';
|
|
2
2
|
import creditCardType from 'credit-card-type';
|
|
3
|
-
import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
|
|
3
|
+
import { isNumber as isNumber$1, isFunction, cloneDeep, merge, isEqual, get, isNil, set } from 'lodash';
|
|
4
4
|
import { getCurrencySymbol } from '@gaignoux/currency';
|
|
5
5
|
|
|
6
6
|
var TMutationEnum;
|
|
@@ -2496,9 +2496,11 @@ class FormField {
|
|
|
2496
2496
|
fieldEventSubject$,
|
|
2497
2497
|
dataSubject$,
|
|
2498
2498
|
formValidNotification$,
|
|
2499
|
+
mountSubject$,
|
|
2499
2500
|
mapper,
|
|
2500
2501
|
getFormValues,
|
|
2501
|
-
submitEvent
|
|
2502
|
+
submitEvent,
|
|
2503
|
+
visibility
|
|
2502
2504
|
}) {
|
|
2503
2505
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
2504
2506
|
this.valueSubscription$ = new Subscription();
|
|
@@ -2534,11 +2536,12 @@ class FormField {
|
|
|
2534
2536
|
this.fieldEventSubject$ = fieldEventSubject$;
|
|
2535
2537
|
this.dataSubject$ = dataSubject$;
|
|
2536
2538
|
this.formValidNotification$ = formValidNotification$;
|
|
2537
|
-
this.
|
|
2539
|
+
this.mountSubject$ = mountSubject$;
|
|
2540
|
+
this._props = FormField.filterProps(cloneDeep(schemaComponent.props || {}));
|
|
2538
2541
|
this._metadata = '';
|
|
2539
2542
|
this.errorsString = '';
|
|
2540
2543
|
this.errorsList = [];
|
|
2541
|
-
this._visibility = true;
|
|
2544
|
+
this._visibility = typeof visibility === 'boolean' ? visibility : true;
|
|
2542
2545
|
this._api = {
|
|
2543
2546
|
default: {
|
|
2544
2547
|
response: ((_e = (_d = (_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.defaultConfig) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.fallbackValue) || '',
|
|
@@ -2554,7 +2557,7 @@ class FormField {
|
|
|
2554
2557
|
}, {})
|
|
2555
2558
|
};
|
|
2556
2559
|
this._errors = {};
|
|
2557
|
-
this._mounted =
|
|
2560
|
+
this._mounted = false;
|
|
2558
2561
|
this._valid = false;
|
|
2559
2562
|
this.initializeObservers();
|
|
2560
2563
|
}
|
|
@@ -2564,25 +2567,25 @@ class FormField {
|
|
|
2564
2567
|
initializeObservers() {
|
|
2565
2568
|
var _a;
|
|
2566
2569
|
if (!this.valueSubject$ || this.valueSubject$.closed) {
|
|
2567
|
-
this.valueSubject$ = new SafeSubject(() => this.
|
|
2570
|
+
this.valueSubject$ = new SafeSubject(() => this.mounted);
|
|
2568
2571
|
}
|
|
2569
2572
|
if (!this.errorSubject$ || this.errorSubject$.closed) {
|
|
2570
|
-
this.errorSubject$ = new SafeSubject(() => this.
|
|
2573
|
+
this.errorSubject$ = new SafeSubject(() => this.mounted);
|
|
2571
2574
|
}
|
|
2572
2575
|
if (!this.visibilitySubject$ || this.visibilitySubject$.closed) {
|
|
2573
|
-
this.visibilitySubject$ = new SafeSubject(() => this.
|
|
2576
|
+
this.visibilitySubject$ = new SafeSubject(() => this.mounted);
|
|
2574
2577
|
}
|
|
2575
2578
|
if (!this.apiSubject$ || this.apiSubject$.closed) {
|
|
2576
|
-
this.apiSubject$ = new SafeSubject(() => this.
|
|
2579
|
+
this.apiSubject$ = new SafeSubject(() => this.mounted);
|
|
2577
2580
|
}
|
|
2578
2581
|
if (!this.propsSubject$ || this.propsSubject$.closed) {
|
|
2579
|
-
this.propsSubject$ = new SafeSubject(() => this.
|
|
2582
|
+
this.propsSubject$ = new SafeSubject(() => this.mounted);
|
|
2580
2583
|
}
|
|
2581
2584
|
if (!this.fieldStateSubscription$ || this.fieldStateSubscription$.closed) {
|
|
2582
2585
|
this.fieldStateSubscription$ = new Subscription();
|
|
2583
2586
|
}
|
|
2584
2587
|
if (!this.apiEventQueueSubject$ || this.apiEventQueueSubject$.closed) {
|
|
2585
|
-
this.apiEventQueueSubject$ = new SafeSubject(() => this.
|
|
2588
|
+
this.apiEventQueueSubject$ = new SafeSubject(() => this.mounted);
|
|
2586
2589
|
}
|
|
2587
2590
|
this.fieldState$ = combineLatest({
|
|
2588
2591
|
visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
|
|
@@ -2611,8 +2614,9 @@ class FormField {
|
|
|
2611
2614
|
* @param {Record<string, unknown>} props - The new properties to be set.
|
|
2612
2615
|
*/
|
|
2613
2616
|
set props(props) {
|
|
2614
|
-
|
|
2615
|
-
this.
|
|
2617
|
+
const diffProps = merge(cloneDeep(this.props), props);
|
|
2618
|
+
if (typeof diffProps === 'undefined' || isEqual(diffProps, this.props)) return;
|
|
2619
|
+
this._props = diffProps;
|
|
2616
2620
|
this.propsSubject$.next(this.props);
|
|
2617
2621
|
this.templateSubject$.next({
|
|
2618
2622
|
scope: 'fields',
|
|
@@ -2620,6 +2624,22 @@ class FormField {
|
|
|
2620
2624
|
event: 'ON_PROPS'
|
|
2621
2625
|
});
|
|
2622
2626
|
}
|
|
2627
|
+
static filterProps(props) {
|
|
2628
|
+
if (Array.isArray(props)) {
|
|
2629
|
+
return props.filter(el => typeof el === 'string' && el.includes('${') ? false : true).map(el => FormField.filterProps(el));
|
|
2630
|
+
}
|
|
2631
|
+
if (typeof props === 'object' && props !== null) {
|
|
2632
|
+
return Object.keys(props).reduce((acc, curr) => {
|
|
2633
|
+
const propValue = props[curr];
|
|
2634
|
+
if (typeof propValue === 'string' && propValue.includes('${')) {
|
|
2635
|
+
return acc;
|
|
2636
|
+
}
|
|
2637
|
+
acc[curr] = FormField.filterProps(props[curr]);
|
|
2638
|
+
return acc;
|
|
2639
|
+
}, {});
|
|
2640
|
+
}
|
|
2641
|
+
return props;
|
|
2642
|
+
}
|
|
2623
2643
|
/**
|
|
2624
2644
|
* Retrieves the current state value of the form field.
|
|
2625
2645
|
*
|
|
@@ -2784,6 +2804,17 @@ class FormField {
|
|
|
2784
2804
|
event: 'ON_API_FIELD_RESPONSE'
|
|
2785
2805
|
});
|
|
2786
2806
|
}
|
|
2807
|
+
get mounted() {
|
|
2808
|
+
return this._mounted;
|
|
2809
|
+
}
|
|
2810
|
+
set mounted(mountedStatus) {
|
|
2811
|
+
if (typeof mountedStatus === 'undefined' || mountedStatus === this.mounted) return;
|
|
2812
|
+
this._mounted = mountedStatus;
|
|
2813
|
+
this.mountSubject$.next({
|
|
2814
|
+
key: this.name,
|
|
2815
|
+
status: this.mounted
|
|
2816
|
+
});
|
|
2817
|
+
}
|
|
2787
2818
|
/**
|
|
2788
2819
|
* Mounts the form field by initializing necessary subjects and combining their streams.
|
|
2789
2820
|
*
|
|
@@ -2796,10 +2827,16 @@ class FormField {
|
|
|
2796
2827
|
valueSubscription,
|
|
2797
2828
|
propsSubscription
|
|
2798
2829
|
}) {
|
|
2799
|
-
|
|
2830
|
+
var _a, _b;
|
|
2800
2831
|
this.subscribeValue(valueSubscription);
|
|
2801
2832
|
this.subscribeState(propsSubscription);
|
|
2802
|
-
this.
|
|
2833
|
+
this.mounted = true;
|
|
2834
|
+
this.valueSubject$.next(this.stateValue);
|
|
2835
|
+
this.propsSubject$.next(this.props);
|
|
2836
|
+
this.visibilitySubject$.next(this.visibility);
|
|
2837
|
+
((_b = (_a = this.mapper) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.setErrorMessage) && this.errorSubject$.next({
|
|
2838
|
+
[this.mapper.events.setErrorMessage]: this.errorsString
|
|
2839
|
+
});
|
|
2803
2840
|
}
|
|
2804
2841
|
/**
|
|
2805
2842
|
* Sets the value of the form field and emits associated events.
|
|
@@ -2809,7 +2846,7 @@ class FormField {
|
|
|
2809
2846
|
* @returns {void}
|
|
2810
2847
|
*/
|
|
2811
2848
|
emitValue(prop) {
|
|
2812
|
-
if (!this.visibility) return;
|
|
2849
|
+
if (!this.visibility || !this.mounted) return;
|
|
2813
2850
|
this.value = prop.value;
|
|
2814
2851
|
this.emitEvents({
|
|
2815
2852
|
event: prop.event
|
|
@@ -2831,13 +2868,13 @@ class FormField {
|
|
|
2831
2868
|
if (event === 'ON_FORM_SUBMIT') {
|
|
2832
2869
|
return this.submitEvent();
|
|
2833
2870
|
}
|
|
2834
|
-
this.setFieldValidity({
|
|
2835
|
-
event
|
|
2836
|
-
});
|
|
2837
2871
|
this.validateVisibility({
|
|
2838
2872
|
event,
|
|
2839
2873
|
key: this.name
|
|
2840
2874
|
});
|
|
2875
|
+
this.setFieldValidity({
|
|
2876
|
+
event
|
|
2877
|
+
});
|
|
2841
2878
|
this.resetValue({
|
|
2842
2879
|
event,
|
|
2843
2880
|
key: this.name
|
|
@@ -3037,7 +3074,7 @@ class FormField {
|
|
|
3037
3074
|
* @returns {void}
|
|
3038
3075
|
*/
|
|
3039
3076
|
destroyField() {
|
|
3040
|
-
this.
|
|
3077
|
+
this.mounted = false;
|
|
3041
3078
|
this.valueSubscription$.unsubscribe();
|
|
3042
3079
|
this.visibilitySubject$.unsubscribe();
|
|
3043
3080
|
this.fieldStateSubscription$.unsubscribe();
|
|
@@ -3089,7 +3126,7 @@ class FormCore {
|
|
|
3089
3126
|
* @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
|
|
3090
3127
|
*/
|
|
3091
3128
|
constructor(entry) {
|
|
3092
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j
|
|
3129
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
3093
3130
|
this.templateSubscription$ = new Subscription();
|
|
3094
3131
|
this.mappers = new Map();
|
|
3095
3132
|
this.queuedFieldVisibilityEvents = new Map();
|
|
@@ -3117,40 +3154,71 @@ class FormCore {
|
|
|
3117
3154
|
this.mountSubject$ = new Subject();
|
|
3118
3155
|
this.formValidNotification$ = new Subject();
|
|
3119
3156
|
this.subscribedTemplates = [];
|
|
3120
|
-
this.schema && this.serializeStructure(this.schema.components);
|
|
3121
|
-
this.schema && this.subscribeTemplates();
|
|
3157
|
+
// this.schema && this.serializeStructure(this.schema.components);
|
|
3158
|
+
// this.schema && this.subscribeTemplates();
|
|
3122
3159
|
this.templateSubscription$ = this.templateSubject$.subscribe(this.refreshTemplates.bind(this));
|
|
3123
|
-
this.
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3160
|
+
this.mountSubject$.subscribe(this.mountActions.bind(this));
|
|
3161
|
+
// this.templateSubject$.next({
|
|
3162
|
+
// scope: 'iVars',
|
|
3163
|
+
// event: 'ON_IVARS',
|
|
3164
|
+
// });
|
|
3127
3165
|
/*
|
|
3128
3166
|
only emits event ON_FIELD_MOUNT if does not have initialValue, if has initialValue, initialValues class property setter will
|
|
3129
3167
|
emit the value along with ON_FIELD_MOUNT event
|
|
3130
3168
|
*/
|
|
3131
|
-
const initialValues = entry.initialValues ||
|
|
3132
|
-
this.fields.forEach((field, key) => {
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3140
|
-
|
|
3169
|
+
// const initialValues = entry.initialValues || entry.schema?.initialValues;
|
|
3170
|
+
// this.fields.forEach((field, key) => {
|
|
3171
|
+
// if (
|
|
3172
|
+
// !initialValues ||
|
|
3173
|
+
// (initialValues && !Object.keys(initialValues).includes(key))
|
|
3174
|
+
// ) {
|
|
3175
|
+
// const propValue = field?.props?.[field?.valuePropName || ''];
|
|
3176
|
+
// !field?.value &&
|
|
3177
|
+
// field?.emitValue({
|
|
3178
|
+
// value:
|
|
3179
|
+
// typeof propValue === 'string' && !propValue.includes('${')
|
|
3180
|
+
// ? propValue
|
|
3181
|
+
// : '',
|
|
3182
|
+
// event: 'ON_FIELD_MOUNT',
|
|
3183
|
+
// });
|
|
3184
|
+
// }
|
|
3185
|
+
// this.refreshTemplates({ scope: 'fields', key, event: 'ON_FIELDS' });
|
|
3186
|
+
// });
|
|
3187
|
+
// this.setInitialValues(initialValues);
|
|
3188
|
+
}
|
|
3189
|
+
mountActions({
|
|
3190
|
+
status,
|
|
3191
|
+
key
|
|
3192
|
+
}) {
|
|
3193
|
+
var _a;
|
|
3194
|
+
if (status) {
|
|
3195
|
+
this.subscribeTemplates();
|
|
3141
3196
|
this.refreshTemplates({
|
|
3142
3197
|
scope: 'fields',
|
|
3143
|
-
key,
|
|
3144
3198
|
event: 'ON_FIELDS'
|
|
3145
3199
|
});
|
|
3146
|
-
|
|
3147
|
-
|
|
3200
|
+
this.templateSubject$.next({
|
|
3201
|
+
scope: 'iVars',
|
|
3202
|
+
event: 'ON_IVARS'
|
|
3203
|
+
});
|
|
3204
|
+
if (!this.queuedInitialValues.has(key)) {
|
|
3205
|
+
const field = this.fields.get(key);
|
|
3206
|
+
const propValue = (_a = field === null || field === void 0 ? void 0 : field.props) === null || _a === void 0 ? void 0 : _a[(field === null || field === void 0 ? void 0 : field.valuePropName) || ''];
|
|
3207
|
+
!(field === null || field === void 0 ? void 0 : field.value) ? field.emitValue({
|
|
3208
|
+
value: typeof propValue === 'string' && !propValue.includes('${') ? propValue : '',
|
|
3209
|
+
event: 'ON_FIELD_MOUNT'
|
|
3210
|
+
}) : field.emitEvents({
|
|
3211
|
+
event: 'ON_FIELD_MOUNT'
|
|
3212
|
+
});
|
|
3213
|
+
}
|
|
3214
|
+
this.checkFieldEventQueues(key);
|
|
3215
|
+
}
|
|
3148
3216
|
}
|
|
3149
|
-
|
|
3217
|
+
set initialValues(payload) {
|
|
3150
3218
|
if (payload) {
|
|
3151
3219
|
Object.keys(payload).forEach(key => {
|
|
3152
3220
|
const field = this.fields.get(key);
|
|
3153
|
-
if (!field || !(field === null || field === void 0 ? void 0 : field.visibility)) {
|
|
3221
|
+
if (!field || !(field === null || field === void 0 ? void 0 : field.visibility) || !(field === null || field === void 0 ? void 0 : field.mounted)) {
|
|
3154
3222
|
this.queuedInitialValues.set(key, payload === null || payload === void 0 ? void 0 : payload[key]);
|
|
3155
3223
|
} else {
|
|
3156
3224
|
field.emitValue({
|
|
@@ -3187,6 +3255,7 @@ class FormCore {
|
|
|
3187
3255
|
* @returns {boolean} True if the form is valid; otherwise, false.
|
|
3188
3256
|
*/
|
|
3189
3257
|
get isValid() {
|
|
3258
|
+
if (this.fields.size === 0) return false;
|
|
3190
3259
|
for (const [, field] of this.fields) {
|
|
3191
3260
|
if (!field.valid) return false;
|
|
3192
3261
|
}
|
|
@@ -3293,10 +3362,8 @@ class FormCore {
|
|
|
3293
3362
|
}
|
|
3294
3363
|
const fieldProp = field[property];
|
|
3295
3364
|
let propState;
|
|
3296
|
-
if (Array.isArray(fieldProp)) {
|
|
3297
|
-
propState =
|
|
3298
|
-
} else if (typeof fieldProp === 'object' && !isNil(fieldProp)) {
|
|
3299
|
-
propState = Object.assign({}, fieldProp);
|
|
3365
|
+
if (Array.isArray(fieldProp) || typeof fieldProp === 'object' && !isNil(fieldProp)) {
|
|
3366
|
+
propState = cloneDeep(fieldProp);
|
|
3300
3367
|
} else {
|
|
3301
3368
|
this.config.defaultLogVerbose && console.warn(`invalid template property, skipping evaluation of ${field.name} with ${fieldProp}`);
|
|
3302
3369
|
return;
|
|
@@ -3466,6 +3533,8 @@ class FormCore {
|
|
|
3466
3533
|
* @param {string} field field to check
|
|
3467
3534
|
*/
|
|
3468
3535
|
checkFieldEventQueues(field) {
|
|
3536
|
+
var _a;
|
|
3537
|
+
if (!((_a = this.fields.get(field)) === null || _a === void 0 ? void 0 : _a.mounted)) return;
|
|
3469
3538
|
if (this.queuedFieldVisibilityEvents.has(field)) {
|
|
3470
3539
|
this.setFieldVisibility(Object.assign({
|
|
3471
3540
|
field: field
|
|
@@ -3473,10 +3542,11 @@ class FormCore {
|
|
|
3473
3542
|
this.queuedFieldVisibilityEvents.delete(field);
|
|
3474
3543
|
}
|
|
3475
3544
|
if (this.queuedInitialValues.has(field)) {
|
|
3476
|
-
this.
|
|
3477
|
-
[field]: this.queuedInitialValues.get(field)
|
|
3478
|
-
});
|
|
3545
|
+
const value = this.queuedInitialValues.get(field);
|
|
3479
3546
|
this.queuedInitialValues.delete(field);
|
|
3547
|
+
this.initialValues = {
|
|
3548
|
+
[field]: value
|
|
3549
|
+
};
|
|
3480
3550
|
}
|
|
3481
3551
|
if (this.queuedFieldResetValuesEvents.has(field)) {
|
|
3482
3552
|
this.setResetFieldValue(Object.assign({
|
|
@@ -3506,14 +3576,16 @@ class FormCore {
|
|
|
3506
3576
|
showOnlyIfTrue
|
|
3507
3577
|
}) {
|
|
3508
3578
|
const fieldInstance = this.fields.get(field);
|
|
3509
|
-
if (!fieldInstance) {
|
|
3579
|
+
if (!fieldInstance || !fieldInstance.mounted) {
|
|
3510
3580
|
this.queuedFieldVisibilityEvents.set(field, {
|
|
3511
3581
|
hasError,
|
|
3512
3582
|
showOnlyIfTrue
|
|
3513
3583
|
});
|
|
3514
3584
|
} else {
|
|
3585
|
+
const currentVisibility = fieldInstance.visibility;
|
|
3515
3586
|
const visibility = showOnlyIfTrue ? hasError : !hasError;
|
|
3516
3587
|
fieldInstance.visibility = visibility;
|
|
3588
|
+
if (currentVisibility === visibility) return;
|
|
3517
3589
|
/**
|
|
3518
3590
|
* I was sure I would not require to gambiarra, but..
|
|
3519
3591
|
* in order to ignore an hidden value on a form submit
|
|
@@ -3585,12 +3657,12 @@ class FormCore {
|
|
|
3585
3657
|
key,
|
|
3586
3658
|
value
|
|
3587
3659
|
}) {
|
|
3588
|
-
|
|
3660
|
+
const field = this.fields.get(key);
|
|
3661
|
+
if (!field || !(field === null || field === void 0 ? void 0 : field.mounted)) {
|
|
3589
3662
|
this.queuedFieldResetValuesEvents.set(key, {
|
|
3590
3663
|
value
|
|
3591
3664
|
});
|
|
3592
3665
|
} else {
|
|
3593
|
-
const field = this.fields.get(key);
|
|
3594
3666
|
field.emitValue({
|
|
3595
3667
|
value: value,
|
|
3596
3668
|
event: 'ON_FIELD_CLEARED'
|
|
@@ -3656,7 +3728,8 @@ class FormCore {
|
|
|
3656
3728
|
path,
|
|
3657
3729
|
value
|
|
3658
3730
|
}) {
|
|
3659
|
-
|
|
3731
|
+
const field = this.fields.get(key);
|
|
3732
|
+
if (!field || field.mounted) {
|
|
3660
3733
|
this.queuedFieldResetPropertyEvents.set(key, {
|
|
3661
3734
|
property,
|
|
3662
3735
|
path,
|
|
@@ -3720,7 +3793,7 @@ class FormCore {
|
|
|
3720
3793
|
fieldSchema,
|
|
3721
3794
|
mapperElement
|
|
3722
3795
|
}) {
|
|
3723
|
-
var _a
|
|
3796
|
+
var _a;
|
|
3724
3797
|
if (this.fields.has(fieldSchema.name)) {
|
|
3725
3798
|
throw new Error(`field name ${fieldSchema.name} already defined`);
|
|
3726
3799
|
}
|
|
@@ -3738,23 +3811,29 @@ class FormCore {
|
|
|
3738
3811
|
fieldEventSubject$: this.fieldEventSubject$,
|
|
3739
3812
|
dataSubject$: this.dataSubject$,
|
|
3740
3813
|
formValidNotification$: this.formValidNotification$,
|
|
3814
|
+
mountSubject$: this.mountSubject$,
|
|
3741
3815
|
config: this.config,
|
|
3742
|
-
submitEvent: this.submit.bind(this)
|
|
3816
|
+
submitEvent: this.submit.bind(this),
|
|
3817
|
+
visibility: fieldSchema.visibility
|
|
3743
3818
|
}));
|
|
3744
|
-
this.subscribeTemplates();
|
|
3745
|
-
this.refreshTemplates({
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
});
|
|
3749
|
-
if (!this.queuedInitialValues.has(fieldSchema.name)) {
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3819
|
+
// this.subscribeTemplates();
|
|
3820
|
+
// this.refreshTemplates({
|
|
3821
|
+
// scope: 'fields',
|
|
3822
|
+
// event: 'ON_FIELDS',
|
|
3823
|
+
// });
|
|
3824
|
+
// // if (!this.queuedInitialValues.has(fieldSchema.name)) {
|
|
3825
|
+
// // const field = this.fields.get(fieldSchema.name);
|
|
3826
|
+
// // const propValue = field?.props?.[field?.valuePropName || ''];
|
|
3827
|
+
// // !field?.value &&
|
|
3828
|
+
// // field?.emitValue({
|
|
3829
|
+
// // value:
|
|
3830
|
+
// // typeof propValue === 'string' && !propValue.includes('${')
|
|
3831
|
+
// // ? propValue
|
|
3832
|
+
// // : '',
|
|
3833
|
+
// // event: 'ON_FIELD_MOUNT',
|
|
3834
|
+
// // });
|
|
3835
|
+
// // }
|
|
3836
|
+
// this.checkFieldEventQueues(fieldSchema.name);
|
|
3758
3837
|
}
|
|
3759
3838
|
removeField({
|
|
3760
3839
|
key
|
|
@@ -3800,9 +3879,11 @@ class FormCore {
|
|
|
3800
3879
|
fieldEventSubject$: this.fieldEventSubject$,
|
|
3801
3880
|
dataSubject$: this.dataSubject$,
|
|
3802
3881
|
formValidNotification$: this.formValidNotification$,
|
|
3882
|
+
mountSubject$: this.mountSubject$,
|
|
3803
3883
|
config: this.config,
|
|
3804
3884
|
getFormValues: this.getFormValues.bind(this),
|
|
3805
|
-
submitEvent: this.submit.bind(this)
|
|
3885
|
+
submitEvent: this.submit.bind(this),
|
|
3886
|
+
visibility: structElement.visibility
|
|
3806
3887
|
}));
|
|
3807
3888
|
} else {
|
|
3808
3889
|
currField.children = ((_b = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _b === void 0 ? void 0 : _b.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
|
|
@@ -3882,10 +3963,12 @@ class FormCore {
|
|
|
3882
3963
|
*/
|
|
3883
3964
|
getFormValues() {
|
|
3884
3965
|
const values = {};
|
|
3966
|
+
const metadata = {};
|
|
3885
3967
|
const erroredFields = [];
|
|
3886
3968
|
this.fields.forEach((val, key) => {
|
|
3887
3969
|
if (val.value) {
|
|
3888
3970
|
set(values, val.nameToSubmit || key, val.value);
|
|
3971
|
+
metadata[key] = val.metadata;
|
|
3889
3972
|
}
|
|
3890
3973
|
if (!val.valid) {
|
|
3891
3974
|
erroredFields.push(key);
|
|
@@ -3893,6 +3976,7 @@ class FormCore {
|
|
|
3893
3976
|
});
|
|
3894
3977
|
return {
|
|
3895
3978
|
values,
|
|
3979
|
+
metadata,
|
|
3896
3980
|
erroredFields,
|
|
3897
3981
|
isValid: this.isValid
|
|
3898
3982
|
};
|
|
@@ -3947,18 +4031,6 @@ class FormCore {
|
|
|
3947
4031
|
});
|
|
3948
4032
|
return sub;
|
|
3949
4033
|
}
|
|
3950
|
-
/**
|
|
3951
|
-
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
3952
|
-
*/
|
|
3953
|
-
mounted() {
|
|
3954
|
-
this.fields.forEach(field => {
|
|
3955
|
-
field.emitEvents({
|
|
3956
|
-
event: 'ON_FORM_MOUNT'
|
|
3957
|
-
});
|
|
3958
|
-
});
|
|
3959
|
-
const values = this.getFormValues();
|
|
3960
|
-
this.mountSubject$.next(values);
|
|
3961
|
-
}
|
|
3962
4034
|
/**
|
|
3963
4035
|
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
3964
4036
|
*/
|
|
@@ -3973,6 +4045,7 @@ class FormCore {
|
|
|
3973
4045
|
this.submitSubject$.next(values);
|
|
3974
4046
|
}
|
|
3975
4047
|
destroy() {
|
|
4048
|
+
console.log('removing form');
|
|
3976
4049
|
this.submitSubject$.unsubscribe();
|
|
3977
4050
|
this.templateSubscription$.unsubscribe();
|
|
3978
4051
|
this.fieldEventSubject$.unsubscribe();
|
|
@@ -4103,9 +4176,15 @@ class FormGroup {
|
|
|
4103
4176
|
formIndex,
|
|
4104
4177
|
fieldIndex
|
|
4105
4178
|
}) {
|
|
4106
|
-
var _a
|
|
4107
|
-
|
|
4108
|
-
(
|
|
4179
|
+
var _a;
|
|
4180
|
+
const form = this.forms.get(formIndex);
|
|
4181
|
+
(_a = form === null || form === void 0 ? void 0 : form.fields.get(fieldIndex)) === null || _a === void 0 ? void 0 : _a.destroyField();
|
|
4182
|
+
form === null || form === void 0 ? void 0 : form.fields.delete(fieldIndex);
|
|
4183
|
+
if ((form === null || form === void 0 ? void 0 : form.fields.size) === 0) {
|
|
4184
|
+
this.removeForm({
|
|
4185
|
+
key: formIndex
|
|
4186
|
+
});
|
|
4187
|
+
}
|
|
4109
4188
|
}
|
|
4110
4189
|
/**
|
|
4111
4190
|
* Checks if the specified key already exists in the form group.
|
|
@@ -4136,6 +4215,7 @@ class FormGroup {
|
|
|
4136
4215
|
submitMultipleFormsByIndex(indexes, callback) {
|
|
4137
4216
|
let isValid = true;
|
|
4138
4217
|
let values = {};
|
|
4218
|
+
let metadata = {};
|
|
4139
4219
|
let erroredFields = [];
|
|
4140
4220
|
indexes.forEach(index => {
|
|
4141
4221
|
var _a, _b;
|
|
@@ -4143,12 +4223,14 @@ class FormGroup {
|
|
|
4143
4223
|
const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.getFormValues();
|
|
4144
4224
|
isValid = isValid && ((res === null || res === void 0 ? void 0 : res.isValid) || false);
|
|
4145
4225
|
values = Object.assign(Object.assign({}, values), (res === null || res === void 0 ? void 0 : res.values) || {});
|
|
4226
|
+
metadata = Object.assign(Object.assign({}, metadata), (res === null || res === void 0 ? void 0 : res.metadata) || {});
|
|
4146
4227
|
erroredFields = [...erroredFields, ...((res === null || res === void 0 ? void 0 : res.erroredFields) || [])];
|
|
4147
4228
|
});
|
|
4148
4229
|
isValid && callback && callback({
|
|
4149
4230
|
erroredFields,
|
|
4150
4231
|
isValid,
|
|
4151
|
-
values
|
|
4232
|
+
values,
|
|
4233
|
+
metadata
|
|
4152
4234
|
});
|
|
4153
4235
|
}
|
|
4154
4236
|
onDataSubscription({
|
package/package.json
CHANGED
package/src/managers/field.d.ts
CHANGED
|
@@ -57,6 +57,10 @@ declare class FormField {
|
|
|
57
57
|
event: TEvents;
|
|
58
58
|
}>;
|
|
59
59
|
formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
|
|
60
|
+
mountSubject$: Subject<{
|
|
61
|
+
key: string;
|
|
62
|
+
status: boolean;
|
|
63
|
+
}>;
|
|
60
64
|
validateVisibility: (payload: {
|
|
61
65
|
event: TEvents;
|
|
62
66
|
key: string;
|
|
@@ -90,7 +94,7 @@ declare class FormField {
|
|
|
90
94
|
* @param {TMapper<unknown>} options.mapper, - component generic mapper containing render parameters for adapters
|
|
91
95
|
* @param {() => TFormValues<unknown>} options.getFormValues, - form instance function that builds onData parameter payload from fields
|
|
92
96
|
*/
|
|
93
|
-
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mapper, getFormValues, submitEvent, }: {
|
|
97
|
+
constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mountSubject$, mapper, getFormValues, submitEvent, visibility, }: {
|
|
94
98
|
schemaComponent: IComponentSchema;
|
|
95
99
|
config?: TSchemaFormConfig;
|
|
96
100
|
path?: string;
|
|
@@ -115,8 +119,13 @@ declare class FormField {
|
|
|
115
119
|
event: TEvents;
|
|
116
120
|
}>;
|
|
117
121
|
formValidNotification$: Subject<Pick<TFormValidationPayload, 'fieldTrigger'>>;
|
|
122
|
+
mountSubject$: Subject<{
|
|
123
|
+
key: string;
|
|
124
|
+
status: boolean;
|
|
125
|
+
}>;
|
|
118
126
|
mapper: TMapper<unknown>;
|
|
119
127
|
getFormValues: () => TFormValues<unknown>;
|
|
128
|
+
visibility?: boolean;
|
|
120
129
|
});
|
|
121
130
|
/**
|
|
122
131
|
* method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
|
|
@@ -134,6 +143,7 @@ declare class FormField {
|
|
|
134
143
|
* @param {Record<string, unknown>} props - The new properties to be set.
|
|
135
144
|
*/
|
|
136
145
|
set props(props: Record<string, unknown>);
|
|
146
|
+
static filterProps(props: unknown): unknown;
|
|
137
147
|
/**
|
|
138
148
|
* Retrieves the current state value of the form field.
|
|
139
149
|
*
|
|
@@ -199,6 +209,8 @@ declare class FormField {
|
|
|
199
209
|
* @param {TApiResponse} response - The new API response data to be set.
|
|
200
210
|
*/
|
|
201
211
|
set api(response: TApiResponse);
|
|
212
|
+
get mounted(): boolean;
|
|
213
|
+
set mounted(mountedStatus: boolean);
|
|
202
214
|
/**
|
|
203
215
|
* Mounts the form field by initializing necessary subjects and combining their streams.
|
|
204
216
|
*
|
package/src/managers/form.d.ts
CHANGED
|
@@ -17,7 +17,10 @@ declare class FormCore {
|
|
|
17
17
|
templateSubject$: Subject<TTemplateEvent>;
|
|
18
18
|
templateSubscription$: Subscription;
|
|
19
19
|
submitSubject$: Subject<TFormValues<any>>;
|
|
20
|
-
mountSubject$: Subject<
|
|
20
|
+
mountSubject$: Subject<{
|
|
21
|
+
key: string;
|
|
22
|
+
status: boolean;
|
|
23
|
+
}>;
|
|
21
24
|
fieldEventSubject$: Subject<TFieldEvent>;
|
|
22
25
|
dataSubject$: Subject<{
|
|
23
26
|
key: string;
|
|
@@ -54,7 +57,11 @@ declare class FormCore {
|
|
|
54
57
|
* @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
|
|
55
58
|
*/
|
|
56
59
|
constructor(entry: TFormEntry & Omit<IFormSchema, 'components'>);
|
|
57
|
-
|
|
60
|
+
mountActions({ status, key }: {
|
|
61
|
+
key: string;
|
|
62
|
+
status: boolean;
|
|
63
|
+
}): void;
|
|
64
|
+
set initialValues(payload: Record<string, unknown> | undefined);
|
|
58
65
|
/**
|
|
59
66
|
* Retrieves the internal variables (iVars) of the form.
|
|
60
67
|
*
|
|
@@ -284,10 +291,6 @@ declare class FormCore {
|
|
|
284
291
|
* @param {(payload: TFormValidationPayload) => void} callback callback function to call onValid
|
|
285
292
|
*/
|
|
286
293
|
subscribeFormValidation(callback: (payload: TFormValidationPayload) => void): Subscription;
|
|
287
|
-
/**
|
|
288
|
-
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
289
|
-
*/
|
|
290
|
-
mounted<T>(): void;
|
|
291
294
|
/**
|
|
292
295
|
* Submits the form by triggering form field events and invoking the onSubmit callback.
|
|
293
296
|
*/
|