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

package/index.esm.js

@@ -1,6 +1,6 @@
 import { Subject, Subscription, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
 import creditCardType from 'credit-card-type';
-import { isNumber as isNumber$1, isNil, isEqual, get, set } from 'lodash';
+import { isNumber as isNumber$1, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
 
 var TMutationEnum;
@@ -142,7 +142,7 @@ function traverseObject(obj, path) {
           if (typeof item === 'object') {
             result.push(...traverseObject(item, `${path ? `${path}.` : ``}${key}.${index}`));
           } else if (typeof item === 'string') {
-            if (String(item).includes('$')) {
+            if (String(item).includes('${')) {
               // const extractedPath = item.replace(/\$|{|}/g, '').split('.');
               const extractedOriginPath = `${path ? `${path}.` : ``}${key}`.split('.');
               result.push(Object.assign(Object.assign({
@@ -158,7 +158,7 @@ function traverseObject(obj, path) {
       } else if (typeof value === 'object') {
         result.push(...traverseObject(value, `${path ? `${path}.` : ``}${key}`));
       } else if (typeof value === 'string') {
-        if (value.includes('$')) {
+        if (value.includes('${')) {
           // const extractedPath = value.replace(/\$|{|}/g, '').split('.');
           const destinationPath = `${path ? `${path}.` : ``}${key}`.split('.');
           result.push(Object.assign(Object.assign({
@@ -2298,7 +2298,7 @@ class FormField {
     dataSubject$,
     mapper
   }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
     this.originalSchema = schemaComponent;
     this.config = {
@@ -2326,10 +2326,6 @@ class FormField {
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
-    this._value = '';
-    this._stateValue = ((_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue) ? {
-      [this.mapper.events.setValue]: ''
-    } : {};
     this._metadata = '';
     this.errorsString = '';
     this.errorsList = [];
@@ -2337,9 +2333,9 @@ class FormField {
     this._visibility = true;
     this._api = {
       default: {
-        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) || ''
+        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) || ''
       },
-      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) => {
+      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) => {
         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) || ''
@@ -2351,6 +2347,7 @@ class FormField {
     this._valid = false;
     this._mounted = true;
     this.initializeObservers();
+    this.value = this.initialValue || '';
   }
   /**
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
@@ -2390,12 +2387,6 @@ class FormField {
     }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
-    if (!isNil(this.initialValue)) {
-      this.value = this.initialValue;
-      this.setFieldValidity({
-        event: 'ON_FORM_SUBMIT'
-      });
-    }
   }
   /**
    * Retrieves the properties associated with the form field.
@@ -2498,6 +2489,23 @@ class FormField {
   set visibility(visible) {
     if (typeof visible === 'undefined' || visible === this.visibility) return;
     this._visibility = visible;
+    /**
+     * I was sure I would not require to gambiarra, but..
+     * in order to ignore an hidden value on a form submit
+     * or revalidate it when it comes back to visibility
+     * I needed to...
+     * I don't recommend setting private properties like this
+     * this will force the field to be valid when it's hidden
+     * and trigger the validation when it's visible
+     */
+    if (!this.visibility) {
+      this.value = '';
+      this._valid = true;
+    } else {
+      this.setFieldValidity({
+        event: 'ON_FIELD_MOUNT'
+      });
+    }
     this.visibilitySubject$.next(this.visibility);
     this.templateSubject$.next({
       key: this.name,
@@ -2640,7 +2648,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 +2674,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;
     }
   }
   /**
@@ -3209,16 +3219,10 @@ class FormCore {
         const error = validations[validationKey](field.value, structElement.validations);
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach(fieldKey => {
-            if (!this.fields.has(fieldKey)) console.warn(`failed to update visibility onto field ${fieldKey}`);else {
-              this.fields.get(fieldKey).visibility = !error;
-              if (error) this.fields.get(fieldKey).value = '';
-            }
+            if (!this.fields.has(fieldKey)) console.warn(`failed to update visibility onto field ${fieldKey}`);else this.fields.get(fieldKey).visibility = !error;
           });
         } else if (structElement.fields) {
-          if (!this.fields.has(structElement.fields)) console.warn(`failed to update visibility onto field ${structElement.fields}`);else {
-            this.fields.get(structElement.fields).visibility = !error;
-            if (error) this.fields.get(structElement.fields).value = '';
-          }
+          if (!this.fields.has(structElement.fields)) console.warn(`failed to update visibility onto field ${structElement.fields}`);else this.fields.get(structElement.fields).visibility = !error;
         }
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "0.0.1-beta.14",
+  "version": "0.0.1-beta.16",
   "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