@bolttech/form-engine-core 0.0.1-beta.13 → 0.0.1-beta.15

package/index.esm.js

@@ -2298,7 +2298,7 @@ class FormField {
     dataSubject$,
     mapper
   }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     this.fieldStateSubscription$ = new Subscription();
     this.originalSchema = schemaComponent;
     this.config = {
@@ -2311,14 +2311,14 @@ class FormField {
     this.path = path;
     this.children = children;
     this.validations = schemaComponent.validations;
-    this.errorMessages = schemaComponent.errorMessages;
+    this.errorMessages = (_a = schemaComponent.validations) === null || _a === void 0 ? void 0 : _a.messages;
     this.visibilityConditions = schemaComponent.visibilityConditions;
     this.resetValues = schemaComponent.resetValues;
     this.apiSchema = schemaComponent.api;
     this.formatters = schemaComponent.formatters;
     this.masks = schemaComponent.masks;
     if (mapper.valueChangeEvent) this.valueChangeEvent = mapper.valueChangeEvent;
-    if ((_a = mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) this.valuePropName = mapper.events.setValue;
+    if ((_b = mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) this.valuePropName = mapper.events.setValue;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
@@ -2327,7 +2327,7 @@ class FormField {
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
     this._value = '';
-    this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+    this._stateValue = ((_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue) ? {
       [this.mapper.events.setValue]: ''
     } : {};
     this._metadata = '';
@@ -2337,9 +2337,9 @@ class FormField {
     this._visibility = true;
     this._api = {
       default: {
-        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) || ''
+        response: ((_f = (_e = (_d = this.apiSchema) === null || _d === void 0 ? void 0 : _d.defaultConfig) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.fallbackValue) || ''
       },
-      named: ((_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.configs) && Object.keys((_g = this.apiSchema) === null || _g === void 0 ? void 0 : _g.configs).reduce((acc, curr) => {
+      named: ((_g = this.apiSchema) === null || _g === void 0 ? void 0 : _g.configs) && Object.keys((_h = this.apiSchema) === null || _h === void 0 ? void 0 : _h.configs).reduce((acc, curr) => {
         var _a, _b;
         acc[curr] = {
           response: ((_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b[curr].config.fallbackValue) || ''
@@ -2392,6 +2392,9 @@ class FormField {
     });
     if (!isNil(this.initialValue)) {
       this.value = this.initialValue;
+      this.setFieldValidity({
+        event: 'ON_FORM_SUBMIT'
+      });
     }
   }
   /**
@@ -2529,7 +2532,7 @@ class FormField {
     this.errorsList = Object.values(this.errors);
     this.errorsString = this.errorsList.join(', ');
     /**
-     * if any error receieves a list of errors, set a prop for it, currently only supporting a single string
+     * if any error receives a list of errors, set a prop for it, currently only supporting a single string
      */
     ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && this.errorSubject$.next({
       [this.mapper.events.setErrorMessage]: this.errorsString
@@ -2637,55 +2640,43 @@ class FormField {
   setFieldValidity({
     event
   }) {
-    var _a;
+    var _a, _b, _c, _d;
     if (!this.validations || !this.visibility) {
       this.errors = {};
       this._valid = true;
       return;
     }
-    /*
-      @TODO evaluate if _valid flag needs to be updated on all events, this condition saves resources,
-      currently form submition needs to be controlled with form instance submit property function that
-      will evaluate if all fields are valid regardless the events that triggers error messages
-    */
-    if (!this.validations.events.includes(event) && event !== 'ON_FORM_SUBMIT') return;
     let valid = true;
-    const errors = Object.assign({}, this.errors);
-    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
+    const errors = {};
+    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.methods;
     schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      var _a;
       const error = validations[validationKey](this.value, schemaValidations);
       // setting valid flag
       valid = !error && valid;
       // setting error messages
-      if (((_a = this.validations) === null || _a === void 0 ? void 0 : _a.events.includes(event)) || event === 'ON_FORM_SUBMIT') {
-        if (error && this.errorMessages) {
-          if (validationKey in this.errorMessages) {
-            const messages = this.errorMessages;
-            errors[validationKey] = messages[validationKey];
-          } else if ('default' in this.errorMessages) {
-            errors[validationKey] = this.errorMessages.default;
-          }
-        } else {
-          delete errors[validationKey];
+      if (error && this.errorMessages) {
+        if (validationKey in this.errorMessages) {
+          const messages = this.errorMessages;
+          errors[validationKey] = messages[validationKey];
+        } else if ('default' in this.errorMessages) {
+          errors[validationKey] = this.errorMessages.default;
         }
+      } else {
+        delete errors[validationKey];
       }
     });
     this._valid = valid;
-    this.errors = errors;
-  }
-  /**
-   * WIP expensive function to get updated field validity on each event
-   */
-  updateValidityFlag() {
-    var _a;
-    let valid = true;
-    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
-    schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
-      const error = validations[validationKey](this.value, schemaValidations);
-      valid = !error && valid;
-    });
-    this._valid = valid;
+    if ((_c = (_b = this.validations) === null || _b === void 0 ? void 0 : _b.eventMessages) === null || _c === void 0 ? void 0 : _c[event]) {
+      const eventMessages = {};
+      (_d = this.validations.eventMessages[event]) === null || _d === void 0 ? void 0 : _d.forEach(method => {
+        if (method in errors) {
+          eventMessages[method] = errors[method];
+        }
+      });
+      this.errors = eventMessages;
+    } else if (event === 'ON_FORM_SUBMIT') {
+      this.errors = errors;
+    }
   }
   /**
    * Formats the field value using the specified formatters, if available.
@@ -2956,7 +2947,6 @@ class FormCore {
         validations,
         visibilityConditions,
         resetValues,
-        errorMessages,
         api
       }
     }, key) => {
@@ -2967,7 +2957,6 @@ class FormCore {
         validations,
         visibilityConditions,
         resetValues,
-        errorMessages,
         apiSchema: api
       };
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));

package/package.json

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

package/src/interfaces/schema.d.ts

@@ -1,5 +1,5 @@
 import { TMapper } from '../types/mapper';
-import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
 /**
  * @interface IComponentSchema
  * Represents the schema for a component within a form.
@@ -8,10 +8,9 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
  * @property {TProps} props - The properties of the component.
  * @property {string} name - The name of the component.
  * @property {string} nameToSubmit - The name of the field when submit values (optional).
- * @property {TEvent<TValidationMethods>} [validations] - The validation methods for the component.
+ * @property {TValidations} [validations] - The validation methods for the component.
  * @property {TVisibility[]} [visibilityConditions] - The visibility conditions for the component.
  * @property {TResetValueMethods[]} [resetValues] - The reset value methods for the component.
- * @property {TErrorMessages} [errorMessages] - The error messages for the component.
  * @property {TApiEvent} [api] - The API configuration for the component.
  * @property {TFormatters} [formatters] - The formatters for the component.
  * @property {TMasks} [masks] - The masks for the component.
@@ -24,10 +23,25 @@ import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetV
  *   props: { type: 'text', placeholder: 'Enter your name' },
  *   name: 'name',
  *   nameToSubmit: 'applicant.firstName',
- *   validations: { config: { required: true }, events: [{ eventName: 'ON_FIELD_BLUR' }] },
+ *   validations: {
+ *     methods: {
+ *       required: true,
+ *       regex: '^([0-9]+)*$',
+ *       max: 5,
+ *     },
+ *     eventMessages: {
+ *       ON_FIELD_MOUNT: ['required'],
+ *       ON_FIELD_CHANGE: ['regex', 'required'],
+ *       ON_FIELD_BLUR: ['max', 'required'],
+ *     },
+ *     messages: {
+ *       default: 'This field is required',
+ *       regex: 'Only numbers are available.',
+ *       max: 'Max of 5',
+ *     },
+ *   },
  *   visibilityConditions: [{ conditions: { field: 'age', value: 18 } }],
  *   resetValues: [{ field: 'age', resetTo: '' }],
- *   errorMessages: { required: 'This field is required.' },
  *   api: { defaultConfig: { config: { method: 'POST', url: 'https://api.example.com/submit' }, events: [{ eventName: 'ON_FORM_SUBMIT' }] } },
  *   formatters: { capitalize: true },
  *   masks: { currency: { align: 'left', decimal: '.', precision: 2, prefix: '$', thousands: ',' } },
@@ -40,11 +54,10 @@ interface IComponentSchema {
     props?: TProps;
     name: string;
     nameToSubmit?: string;
-    validations?: TEvent<TValidationMethods>;
+    validations?: TValidations;
     api?: TApiEvent;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
-    errorMessages?: TErrorMessages;
     formatters?: TFormatters;
     masks?: TMasks;
     children?: IComponentSchema[];

package/src/managers/field.d.ts

@@ -1,5 +1,5 @@
 import { Observable, Subject, Subscription } from 'rxjs';
-import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidations, TVisibility } from '../types/schema';
 import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
 import { TEvents, TFieldEvent, TMutationEvents, TValueChangeEvent } from '../types/event';
@@ -15,7 +15,7 @@ declare class FormField {
     path?: string;
     children?: string[];
     originalSchema: IComponentSchemaAsFormField<unknown>;
-    validations?: TEvent<TValidationMethods>;
+    validations?: TValidations;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
     errorMessages?: TErrorMessages;
@@ -221,10 +221,6 @@ declare class FormField {
     setFieldValidity({ event }: {
         event: TEvents;
     }): void;
-    /**
-     * WIP expensive function to get updated field validity on each event
-     */
-    updateValidityFlag(): void;
     /**
      * Formats the field value using the specified formatters, if available.
      *

package/src/types/schema.d.ts

@@ -657,40 +657,36 @@ type TApiConfig = {
 type TProps = Record<string, unknown>;
 /**
  * @type TValidations
- * Represents the validation methods for different events.
+ * Represents the validation configuration for form fields, including methods, event-specific messages, and error messages.
  *
- * @example
- * ```typescript
- * const validations: TValidations = {
- *   ON_FIELD_BLUR: { required: true }
- * };
- * ```
- */
-type TValidations = Partial<Record<TEvents, TValidationMethods>>;
-/**
- * @type TVisibilityConditions
- * Represents the visibility conditions for different events.
- *
- * @example
- * ```typescript
- * const visibilityConditions: TVisibilityConditions = {
- *   ON_FIELD_BLUR: [{ validations: { required: true }, fields: ['fieldName'] }]
- * };
- * ```
- */
-type TVisibilityConditions = Partial<Record<TEvents, TVisibility[]>>;
-/**
- * @type TResetValues
- * Represents the reset value methods for different events.
+ * @property {TValidationMethods} methods - The validation methods to be applied.
+ * @property {Partial<Record<TEvents, string[]>>} eventMessages - The messages to be displayed for specific validation events.
+ * @property {TErrorMessages} messages - The general error messages for validation methods.
  *
  * @example
- * ```typescript
- * const resetValues: TResetValues = {
- *   ON_FIELD_BLUR: [{ validations: { required: true }, fields: ['fieldName'], resettledValue: [''] }]
+ * const validations: TValidations = {
+ *   methods: {
+ *     max: 100,
+ *     required: true,
+ *     regex: '^[a-zA-Z0-9]+$',
+ *   },
+ *   eventMessages: {
+ *     ON_FIELD_MOUNT: ['required'],
+ *     ON_FIELD_CHANGE: ['regex', 'required'],
+ *     ON_FIELD_BLUR: ['max', 'required'],
+ *   },
+ *   messages: {
+ *     default: 'This field is required',
+ *     max: 'Value exceeds the maximum limit',
+ *     regex: 'Value does not match the pattern',
+ *   },
  * };
- * ```
  */
-type TResetValues = Partial<Record<TEvents, TResetValueMethods[]>>;
+type TValidations = {
+    methods: TValidationMethods;
+    eventMessages?: Partial<Record<TEvents, string[]>>;
+    messages?: TErrorMessages;
+};
 /**
  * @type TErrorMessages
  * Represents the error messages for different validation methods.
@@ -750,4 +746,4 @@ type TSchemaFormConfig = {
     defaultAPIdebounceTimeMS?: number;
     defaultStateRefreshTimeMS?: number;
 };
-export { TApiConfig, TErrorMessages, TResetValues, TVisibilityConditions, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TSchemaFormConfig, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };
+export { TApiConfig, TErrorMessages, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TSchemaFormConfig, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };