@bolttech/form-engine-core 0.0.3-beta.4 → 0.0.3-beta.6

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged, distinctUntilChanged } from 'rxjs';
+import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map, distinctUntilKeyChanged, distinctUntilChanged, skip } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import { isNumber as isNumber$1, isFunction, cloneDeep, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -2497,7 +2497,8 @@ class FormField {
     dataSubject$,
     formValidNotification$,
     mapper,
-    getFormValues
+    getFormValues,
+    submitEvent
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.valueSubscription$ = new Subscription();
@@ -2528,6 +2529,7 @@ class FormField {
     this.resetValue = resetValue;
     this.resetProperty = resetProperty;
     this.getFormValues = getFormValues;
+    this.submitEvent = submitEvent;
     this.templateSubject$ = templateSubject$;
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
@@ -2826,6 +2828,9 @@ class FormField {
   emitEvents({
     event
   }) {
+    if (event === 'ON_FORM_SUBMIT') {
+      return this.submitEvent();
+    }
     this.setFieldValidity({
       event
     });
@@ -2893,7 +2898,7 @@ class FormField {
         }
       });
       this.errors = eventMessages;
-    } else if (event === 'ON_FORM_SUBMIT') {
+    } else if (event === 'ON_FIELD_VALIDATION') {
       this.errors = errors;
     }
   }
@@ -3733,7 +3738,8 @@ class FormCore {
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
       formValidNotification$: this.formValidNotification$,
-      config: this.config
+      config: this.config,
+      submitEvent: this.submit.bind(this)
     }));
     this.subscribeTemplates();
     this.refreshTemplates({
@@ -3795,7 +3801,8 @@ class FormCore {
           dataSubject$: this.dataSubject$,
           formValidNotification$: this.formValidNotification$,
           config: this.config,
-          getFormValues: this.getFormValues.bind(this)
+          getFormValues: this.getFormValues.bind(this),
+          submitEvent: this.submit.bind(this)
         }));
       } else {
         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) || [];
@@ -3958,7 +3965,7 @@ class FormCore {
   submit() {
     this.fields.forEach(field => {
       field.emitEvents({
-        event: 'ON_FORM_SUBMIT'
+        event: 'ON_FIELD_VALIDATION'
       });
     });
     if (!this.isValid) return;
@@ -4123,6 +4130,7 @@ class FormGroup {
   /**
    * Prototype submit function to multiple forms
    * @param {string[]} indexes form indexes to be submitted
+   * @param callback
    * @returns
    */
   submitMultipleFormsByIndex(indexes, callback) {
@@ -4196,6 +4204,23 @@ class FormGroup {
     }))).subscribe(callback);
     return sub;
   }
+  onSubmitSubscription({
+    ids,
+    callback
+  }) {
+    const subs = ids.reduce((acc, formId) => {
+      const form = this.forms.get(formId);
+      const sub = form === null || form === void 0 ? void 0 : form.submitSubject$.pipe(map(() => form === null || form === void 0 ? void 0 : form.getFormValues()), startWith(undefined));
+      if (sub) {
+        acc[formId] = sub;
+      } else {
+        this.config.defaultLogVerbose && console.warn(`failed to register form id ${formId}`);
+      }
+      return acc;
+    }, {});
+    const sub = combineLatest(subs).pipe(skip(1)).subscribe(callback);
+    return sub;
+  }
 }
 
 export { FormCore, FormField, FormGroup, TMutationEnum };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "0.0.3-beta.4",
+  "version": "0.0.3-beta.6",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/managers/field.d.ts

@@ -71,6 +71,7 @@ declare class FormField {
     }) => void;
     getFormValues: () => TFormValues<unknown>;
     valueChangeEvent: TValueChangeEvent;
+    submitEvent: () => void;
     /**
      * Creates an instance of FormField.
      *
@@ -89,7 +90,7 @@ declare class FormField {
      * @param {TMapper<unknown>} options.mapper, - component generic mapper containing render parameters for adapters
      * @param {() => TFormValues<unknown>} options.getFormValues, - form instance function that builds onData parameter payload from fields
      */
-    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mapper, getFormValues, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, resetProperty, templateSubject$, fieldEventSubject$, dataSubject$, formValidNotification$, mapper, getFormValues, submitEvent, }: {
         schemaComponent: IComponentSchema;
         config?: TSchemaFormConfig;
         path?: string;
@@ -106,6 +107,7 @@ declare class FormField {
             event: TEvents;
             key: string;
         }) => void;
+        submitEvent: () => void;
         templateSubject$: Subject<TTemplateEvent>;
         fieldEventSubject$: Subject<TFieldEvent>;
         dataSubject$: Subject<{

package/src/managers/formGroup.d.ts

@@ -2,7 +2,7 @@ import { TFormValues } from '../types/form';
 import { TMapper } from '../types/mapper';
 import { TFormCore } from './form';
 import { TSchemaFormConfig } from '../types/schema';
-import { TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload } from '../types/event';
+import { TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload } from '../types/event';
 /**
  * Represents a group that manages multiple forms.
  */
@@ -82,6 +82,7 @@ declare class FormGroup {
     /**
      * Prototype submit function to multiple forms
      * @param {string[]} indexes form indexes to be submitted
+     * @param callback
      * @returns
      */
     submitMultipleFormsByIndex<T>(indexes: string[], callback?: (payload: TFormValues<T>) => void): void;
@@ -93,6 +94,10 @@ declare class FormGroup {
         ids: string[];
         callback: (payload: TFormGroupOnValidEventPayload) => void;
     }): import("rxjs").Subscription;
+    onSubmitSubscription<T>({ ids, callback, }: {
+        ids: string[];
+        callback: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
+    }): import("rxjs").Subscription;
     destroy: () => void;
 }
 type TFormGroup = FormGroup;

package/src/types/event.d.ts

@@ -9,7 +9,7 @@ import { TFormValues } from './form';
  * const event: TEvents = 'ON_FIELD_CHANGE';
  * ```
  */
-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';
+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_FIELD_VALIDATION' | 'ON_FORM_MOUNT' | 'ON_API_FIELD_RESPONSE';
 /**
  * @type TMutationEvents
  * Represents the different types of events that can occur internally that triggers templating.
@@ -76,4 +76,9 @@ type TFormGroupOnValidEventPayload = {
     groupValid: boolean;
     forms: Record<string, boolean>;
 };
-export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormValidationPayload, };
+/**
+ * @type TFormGroupOnSubmitEventPayload
+ * Form Group onSubmit event emitted payload on callback function parameter
+ */
+type TFormGroupOnSubmitEventPayload<T> = Record<string, TFormValues<T> | undefined>;
+export { TEvents, TMutationEvents, TMutationEnum, TValueChangeEvent, TFieldEvent, TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload, TFormGroupOnSubmitEventPayload, TFormValidationPayload, };

package/src/types/mapper.d.ts

@@ -34,6 +34,7 @@ type TComponentPropsMapping = {
     setValue?: string;
     onBlur?: string;
     onClick?: string;
+    onSubmit?: string;
     onFocus?: string;
     onKeyUp?: string;
     onKeyDown?: string;