@bolttech/form-engine-core 0.0.1-beta.7 → 0.0.1-beta.8

package/index.esm.js

@@ -2309,7 +2309,6 @@ class FormField {
     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.setErrorMessage) this.errorMessagePropName = mapper.events.setErrorMessage;
     this.mapper = mapper;
     this.validateVisibility = validateVisibility;
     this.resetValue = resetValue;
@@ -2318,8 +2317,12 @@ class FormField {
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
     this._value = '';
-    this._stateValue = '';
+    this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+      [this.mapper.events.setValue]: ''
+    } : {};
     this._metadata = '';
+    this.errorsString = '';
+    this.errorsList = [];
     this.initialValue = initialValue;
     this._visibility = true;
     this._api = {
@@ -2335,7 +2338,6 @@ class FormField {
       }, {})
     };
     this._errors = {};
-    this._errorsString = '';
     this._valid = false;
     this.initializeObservers();
   }
@@ -2343,6 +2345,7 @@ class FormField {
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
    */
   initializeObservers() {
+    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new Subject();
     }
@@ -2365,10 +2368,11 @@ class FormField {
       this.apiEventQueueSubject$ = new Subject();
     }
     this.fieldState$ = combineLatest({
-      errors: this.errorSubject$.pipe(startWith([])),
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
-      apiResponse: this.apiSubject$.pipe(startWith(this._api)),
-      props: this.propsSubject$.pipe(startWith(this._props))
+      props: this.propsSubject$.pipe(startWith(this._props)),
+      errors: this.errorSubject$.pipe(startWith(Object.assign({}, ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && {
+        [this.mapper.events.setErrorMessage]: this.errorsString
+      })))
     });
     !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(groupBy(({
       event
@@ -2404,7 +2408,7 @@ class FormField {
   /**
    * Retrieves the current state value of the form field.
    *
-   * @returns {unknown} - The current state value of the form field.
+   * @returns {Record<string,unknown>} - The current state value of the form field.
    */
   get stateValue() {
     return this._stateValue;
@@ -2412,14 +2416,6 @@ class FormField {
   get metadata() {
     return this._metadata;
   }
-  /**
-   * Retrieves the concatenated string of errors associated with the form field.
-   *
-   * @returns {string} - The concatenated string of errors.
-   */
-  get errorsString() {
-    return this._errorsString;
-  }
   /**
    * Retrieves the current value of the form field.
    *
@@ -2434,6 +2430,7 @@ class FormField {
    * @param {unknown} value - The new value to be set.
    */
   set value(value) {
+    var _a, _b, _c;
     /*
       too much unstable, if the valueChangeEvent parses the template event
       value, might occur unexpected results
@@ -2453,14 +2450,19 @@ class FormField {
     if (typeof val === 'undefined' || val === null) return;
     if (typeof val === 'object' && '_value' in val && '_metadata' in val) {
       this._value = this.formatValue(val['_value']);
-      this._stateValue = this.maskValue(this.formatValue(val['_value']));
+      this._stateValue = ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) ? {
+        [this.mapper.events.setValue]: this.maskValue(this.formatValue(val['_value']))
+      } : {};
       this._metadata = val._metadata;
     } else {
       this._value = this.formatValue(val);
-      this._stateValue = this.maskValue(this.formatValue(val));
+      this._stateValue = ((_b = this.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) ? {
+        [(_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue]: this.maskValue(this.formatValue(val))
+      } : {};
+      this.maskValue(this.formatValue(val));
       this._metadata = val;
     }
-    this.valueSubject$.next(this._stateValue);
+    this.stateValue && this.valueSubject$.next(this.stateValue);
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_VALUE'
@@ -2510,10 +2512,17 @@ class FormField {
    * @param {TErrorMessages} errors - The new error messages to be set.
    */
   set errors(errors) {
+    var _a;
     if (typeof errors === 'undefined' || isEqual(errors, this.errors)) return;
     this._errors = errors;
-    this._errorsString = Object.values(this.errors).join(', ');
-    this.errorSubject$.next(Object.values(this.errors));
+    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
+     */
+    ((_a = this.mapper.events) === null || _a === void 0 ? void 0 : _a.setErrorMessage) && this.errorSubject$.next({
+      [this.mapper.events.setErrorMessage]: this.errorsString
+    });
     this.templateSubject$.next({
       key: this.name,
       event: 'ON_PROPS'
@@ -2549,11 +2558,8 @@ class FormField {
    * Mounts the form field by initializing necessary subjects and combining their streams.
    *
    * @param {object} mountOpts - Adapter mount options.
-   * @param {string} prop.valuePropName - Adapter value property name.
-   * @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
    * @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
    * @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
-   * @param {string} prop.errorMessagePropName - error message property name to set errors onto component
    * @returns {void}
    */
   mountField({
@@ -2649,10 +2655,6 @@ class FormField {
     });
     this._valid = valid;
     this.errors = errors;
-    // remove later
-    if (this.errorMessagePropName) this.props = Object.assign(Object.assign({}, this.props), {
-      [this.errorMessagePropName]: this.errorsString
-    });
   }
   /**
    * WIP expensive function to get updated field validity on each event

package/package.json

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

package/src/interfaces/state.d.ts

@@ -1,27 +1,22 @@
-import { TApiResponse } from '../types/schema';
 /**
  * @interface IState
  * Represents the state of a form component.
  *
  * @property {string[]} errors - The list of error messages.
  * @property {boolean} visibility - The visibility state of the component.
- * @property {TApiResponse} apiResponse - The API response data.
  * @property {Record<string, unknown>} props - The properties of the component.
  *
  * @example
  * ```typescript
  * const state: IState = {
- *   errors: ['This field is required.'],
  *   visibility: true,
- *   apiResponse: { default: { response: null } },
  *   props: { type: 'text', value: 'John' }
  * };
  * ```
  */
 interface IState {
-    errors: string[];
     visibility: boolean;
-    apiResponse: TApiResponse;
     props: Record<string, unknown>;
+    errors: Record<string, unknown>;
 }
 export { IState };

package/src/managers/field.d.ts

@@ -21,22 +21,22 @@ declare class FormField {
     formatters?: TFormatters;
     masks?: TMasks;
     valuePropName?: string;
-    errorMessagePropName?: string;
     initialValue?: unknown;
     config: Required<TSchemaFormConfig>;
     mapper: TMapper<unknown>;
+    errorsString: string;
+    errorsList: string[];
     private _props;
     private _value;
     private _stateValue;
     private _metadata;
     private _visibility;
     private _errors;
-    private _errorsString;
     private _api;
     private _valid;
     propsSubject$: Subject<Record<string, unknown>>;
-    errorSubject$: Subject<string[]>;
-    valueSubject$: Subject<unknown>;
+    errorSubject$: Subject<Record<string, unknown>>;
+    valueSubject$: Subject<Record<string, unknown>>;
     visibilitySubject$: Subject<boolean>;
     apiSubject$: Subject<TApiResponse>;
     fieldEventSubject$: Subject<TFieldEvent>;
@@ -119,16 +119,10 @@ declare class FormField {
     /**
      * Retrieves the current state value of the form field.
      *
-     * @returns {unknown} - The current state value of the form field.
+     * @returns {Record<string,unknown>} - The current state value of the form field.
      */
-    get stateValue(): unknown;
+    get stateValue(): Record<string, unknown>;
     get metadata(): unknown;
-    /**
-     * Retrieves the concatenated string of errors associated with the form field.
-     *
-     * @returns {string} - The concatenated string of errors.
-     */
-    get errorsString(): string;
     /**
      * Retrieves the current value of the form field.
      *
@@ -187,15 +181,12 @@ declare class FormField {
      * Mounts the form field by initializing necessary subjects and combining their streams.
      *
      * @param {object} mountOpts - Adapter mount options.
-     * @param {string} prop.valuePropName - Adapter value property name.
-     * @param {(event: unknown) => unknown} prop.valueChangeEvent - Adapter change event handler function
      * @param {(value: unknown) => unknown} prop.valueSubscription - Adapter value change function
      * @param {(payload: Partial<IState>) => unknown} prop.propsSubscription - Adapter prop change function
-     * @param {string} prop.errorMessagePropName - error message property name to set errors onto component
      * @returns {void}
      */
     mountField({ valueSubscription, propsSubscription, }: {
-        valueSubscription: (value: unknown) => void;
+        valueSubscription: (value: Record<string, unknown>) => void;
         propsSubscription: (payload: Partial<IState>) => void;
     }): void;
     /**
@@ -206,10 +197,7 @@ declare class FormField {
      * @returns {void}
      */
     emitValue(prop: {
-        value: unknown | {
-            _value: unknown;
-            _stateValue: unknown;
-        };
+        value: unknown;
         event: TEvents;
     }): void;
     /**

package/src/managers/form.d.ts

@@ -18,7 +18,7 @@ declare class FormCore {
         key: string;
         event: TMutationEvents;
     }>;
-    submitSubject$: Subject<TFormValues>;
+    submitSubject$: Subject<TFormValues<Record<string, unknown>>>;
     fieldEventSubject$: Subject<TFieldEvent>;
     dataSubject$: Subject<{
         key: string;
@@ -30,7 +30,7 @@ declare class FormCore {
     method?: string;
     config: Required<TSchemaFormConfig>;
     mappers?: TMapper<unknown>[];
-    onSubmit?: (data: TFormValues) => void;
+    onSubmit?: (data: TFormValues<Record<string, unknown>>) => void;
     /**
      * Creates an instance of FormCore.
      *
@@ -72,7 +72,7 @@ declare class FormCore {
      */
     subscribeData(callback: (payload: {
         field: string;
-        data: TFormValues;
+        data: TFormValues<Record<string, unknown>>;
     }) => void): void;
     /**
      * Gets the value of a property from a field.
@@ -216,7 +216,7 @@ declare class FormCore {
      *
      * @returns {TFormValues} The current form values.
      */
-    getFormValues(): TFormValues;
+    getFormValues(): TFormValues<Record<string, unknown>>;
     subscribeFieldEvent({ callback, }: {
         callback: (payload: TFieldEvent) => void;
     }): Subscription;

package/src/types/form.d.ts

@@ -1,10 +1,10 @@
 import { IFormSchema } from '../interfaces/schema';
 import { TMapper } from './mapper';
 /**
- * @type TFormValues
- * Represents the values and state of a form.
+ * @type TFormValues<T>
+ * Represents the values and state of a form. It has a generic type that allows the importer to determine which type values key will return.
  *
- * @property {Record<string, unknown>} values - The current values of the form fields.
+ * @property {Generic Type} values - The current values of the form fields.
  * @property {string[]} erroredFields - A list of field names that have errors.
  * @property {boolean} isValid - Indicates whether the form is valid.
  *
@@ -17,8 +17,8 @@ import { TMapper } from './mapper';
  * };
  * ```
  */
-type TFormValues = {
-    values: Record<string, unknown>;
+type TFormValues<T> = {
+    values: T;
     erroredFields: string[];
     isValid: boolean;
 };
@@ -41,10 +41,10 @@ type TFormValues = {
  */
 type TFormEntry = Omit<IFormSchema, 'components'> & {
     schema?: IFormSchema;
-    onSubmit?: (data: TFormValues) => void;
-    onData?: (payload: {
+    onSubmit?: <T>(data: TFormValues<T>) => void;
+    onData?: <T>(payload: {
         field: string;
-        data: TFormValues;
+        data: TFormValues<T>;
     }) => void;
     mappers?: TMapper<unknown>[];
 };