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

package/index.esm.js

@@ -2640,7 +2640,7 @@ class FormField {
   setFieldValidity({
     event
   }) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!this.validations || !this.visibility) {
       this.errors = {};
       this._valid = true;
@@ -2666,14 +2666,16 @@ class FormField {
       }
     });
     this._valid = valid;
-    if (this.validations.availableMessagesByEvent[event]) {
-      const erros2 = {};
-      (_b = this.validations.availableMessagesByEvent[event]) === null || _b === void 0 ? void 0 : _b.forEach(method => {
+    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) {
-          erros2[method] = errors[method];
+          eventMessages[method] = errors[method];
         }
       });
-      this.errors = erros2;
+      this.errors = eventMessages;
+    } else if (event === 'ON_FORM_SUBMIT') {
+      this.errors = errors;
     }
   }
   /**

package/package.json

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

package/src/interfaces/schema.d.ts

@@ -8,10 +8,9 @@ import { TApiEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaForm
  * @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, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaForm
  *   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: ',' } },

package/src/types/schema.d.ts

@@ -657,19 +657,35 @@ 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.
+ *
+ * @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 validations: TValidations = {
- *   ON_FIELD_BLUR: { required: true }
+ *   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 TValidations = {
     methods: TValidationMethods;
-    availableMessagesByEvent: Partial<Record<TEvents, string[]>>;
-    messages: TErrorMessages;
+    eventMessages?: Partial<Record<TEvents, string[]>>;
+    messages?: TErrorMessages;
 };
 /**
  * @type TErrorMessages