@bgroup/wise-form 1.0.6 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bgroup/wise-form",
-    "version": "1.0.6",
+    "version": "1.0.9",
     "description": "Wise Form - A reactive form library",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/formulas/variants/conditional.ts

@@ -1,208 +1,161 @@
 import type { FormulaManager } from '..';
 import { conditionsTypes } from '../helpers/condition-types';
 import { EvaluationsManager } from '../helpers/evaluations';
-import {
-    EvaluatedFormula,
-    FormulaObserver,
-    IComplexCondition,
-    IConditionalField,
-} from '../types/formulas';
+import { EvaluatedFormula, FormulaObserver, IComplexCondition, IConditionalField } from '../types/formulas';
 import { parse } from 'mathjs';
 
 export class FormulaConditional {
-    #plugin: any;
-    #specs: FormulaObserver;
-    #emptyValue: undefined;
-    get formula() {
-        return this.#specs.formula;
-    }
-    get base() {
-        const formula = <IComplexCondition>this.#specs.formula;
-        return formula.base;
-    }
-    #value: string | number | undefined | 0;
-    get value() {
-        return this.#value;
-    }
-    get name() {
-        return this.#specs.name;
-    }
-    /**
-     *  Represents the fields defined in the plugin settings
-     */
-    get fields() {
-        const formula = <IComplexCondition>this.formula;
-        return typeof formula?.fields === 'string'
-            ? [formula?.fields]
-            : formula?.fields;
-    }
+  #plugin: any;
+  #specs: FormulaObserver;
+  #emptyValue: undefined;
+  get formula() {
+    return this.#specs.formula;
+  }
+  get base() {
+    const formula = <IComplexCondition>this.#specs.formula;
+    return formula.base;
+  }
+  #value: string | number | undefined | 0;
+  get value() {
+    return this.#value;
+  }
+  get name() {
+    return this.#specs.name;
+  }
+  /**
+   *  Represents the fields defined in the plugin settings
+   */
+  get fields() {
+    const formula = <IComplexCondition>this.formula;
+    return typeof formula?.fields === 'string' ? [formula?.fields] : formula?.fields;
+  }
+
+  get conditions() {
+    if (typeof this.#specs.formula === 'string') return;
+    const formula = this.#specs.formula as IComplexCondition;
+    return formula.conditions;
+  }
+
+  /**
+   * FormField type
+   */
+  #fields: any;
+
+  #parent: FormulaManager;
+  #ceil: boolean;
+  #round: boolean;
+  #isNotListenToChanges = false;
+  constructor(parent, plugin, specs) {
+    this.#parent = parent;
+    this.#plugin = plugin;
+    this.#specs = specs;
+    this.#round = specs.round;
+    this.#ceil = specs.ceil;
+    this.#emptyValue = specs.emptyValue;
+
+    if (specs.isNotListenToChanges) this.#isNotListenToChanges = specs.isNotListenToChanges;
+  }
+
+  initialize() {
+    try {
+      const { form } = this.#plugin;
+
+      if (!this.fields) {
+        throw new Error(`Fields not found in formula ${this.name}`);
+      }
+      const fields = this.fields.map(name => {
+        const formula = this.#plugin.formulas.get(name);
+        if (formula) return formula;
+        const field = form.getField(name);
+        return field;
+      });
+      this.#fields = fields;
+      if (this.name === 'costoTotalGrafico') {
+        console.log('fields', fields);
+      }
+      if (!this.#isNotListenToChanges)
+        fields.forEach(field => {
+          if (!field) {
+            throw new Error(`Field ${this.name} not found in form ${form.name}`);
+          }
+          field.on('change', this.calculate.bind(this));
+        });
+    } catch (e) {}
+  }
+
+  evaluate() {
+    const formula = <IComplexCondition>this.#specs.formula;
+    let evaluatedFormula: any = { formula: formula.base }; // Use the base formula by default
+    if (formula.conditions) {
+      const conditionsArray = Array.isArray(formula.conditions) ? formula.conditions : [formula.conditions];
+      for (const condition of conditionsArray) {
+        let conditionMet = false;
+        if (condition.conditions) {
+          // If there are nested conditions, all must be met
+          conditionMet = condition.conditions.every(subCondition => {
+            const fieldValues = subCondition.fields.map(fieldName => {
+              const field = this.#fields.find(f => f.name === fieldName);
+              return field ? field.value : this.#emptyValue;
+            });
+            return EvaluationsManager.validateAll(subCondition.condition, fieldValues, subCondition.value);
+          });
+        } else {
+          const fieldValues = condition.fields.map(fieldName => {
+            const field = this.#fields.find(f => f.name === fieldName);
+            return field ? field.value : this.#emptyValue;
+          });
+          const conditionType = !!condition.type && conditionsTypes[condition.type] ? conditionsTypes[condition.type] : conditionsTypes.some;
+          // Check if any of the specified fields meet the condition
+          conditionMet = EvaluationsManager[conditionType](condition.condition, fieldValues, condition.value);
+        }
 
-    get conditions() {
-        if (typeof this.#specs.formula === 'string') return;
-        const formula = this.#specs.formula as IComplexCondition;
-        return formula.conditions;
+        if (conditionMet) {
+          evaluatedFormula.formula = condition.formula;
+          evaluatedFormula.fi = condition;
+          break;
+        }
+      }
     }
+    return evaluatedFormula;
+  }
 
+  async calculate() {
     /**
-     * FormField type
+     * the formula is taken from the evaluate method since the conditions are evaluated there and
+     * can change the formula to be applied
      */
-    #fields: any;
-
-    #parent: FormulaManager;
-    #ceil: boolean;
-    #round: boolean;
-    #isNotListenToChanges = false;
-    constructor(parent, plugin, specs) {
-        this.#parent = parent;
-        this.#plugin = plugin;
-        this.#specs = specs;
-        this.#round = specs.round;
-        this.#ceil = specs.ceil;
-        this.#emptyValue = specs.emptyValue;
-
-        if (specs.isNotListenToChanges)
-            this.#isNotListenToChanges = specs.isNotListenToChanges;
+    const model = this.#plugin.form.getField(this.name);
+    const formula = this.evaluate();
+
+    if (!formula.formula) {
+      this.#value = this.#emptyValue !== undefined ? this.#emptyValue : '';
+      model && model.set({ value: this.#value });
+      this.#parent.trigger('change');
+      return this.#value;
     }
+    // todo: Review if this section can be replaced by formulaManager.variables property.
+    const { tokens } = this.#parent.getParser(formula);
+    const variables = tokens.filter(token => token.type === 'variable').map(item => item.value);
 
-    initialize() {
-        try {
-            const { form } = this.#plugin;
-
-            if (!this.fields) {
-                throw new Error(`Fields not found in formula ${this.name}`);
-            }
-            const fields = this.fields.map((name) => {
-                const formula = this.#plugin.formulas.get(name);
-                if (formula) return formula;
-                const field = form.getField(name);
-                return field;
-            });
-            this.#fields = fields;
-            if (this.name === 'costoTotalGrafico') {
-                console.log('fields', fields);
-            }
-            if (!this.#isNotListenToChanges)
-                fields.forEach((field) => {
-                    if (!field) {
-                        throw new Error(
-                            `Field ${this.name} not found in form ${form.name}`
-                        );
-                    }
-                    field.on('change', this.calculate.bind(this));
-                });
-        } catch (e) {}
-    }
+    const params = await this.#parent.getParams(variables);
 
-    evaluate() {
-        const formula = <IComplexCondition>this.#specs.formula;
-        let evaluatedFormula: any = { formula: formula.base }; // Use the base formula by default
-        if (formula.conditions) {
-            const conditionsArray = Array.isArray(formula.conditions) ? formula.conditions : [formula.conditions];
-            for (const condition of conditionsArray) {
-                let conditionMet = false;
-                if (condition.conditions) {
-                    // If there are nested conditions, all must be met
-                    conditionMet = condition.conditions.every(
-                        (subCondition) => {
-                            const fieldValues = subCondition.fields.map(
-                                (fieldName) => {
-                                    const field = this.#fields.find(
-                                        (f) => f.name === fieldName
-                                    );
-                                    return field
-                                        ? field.value
-                                        : this.#emptyValue;
-                                }
-                            );
-                            return EvaluationsManager.validateAll(
-                                subCondition.condition,
-                                fieldValues,
-                                subCondition.value
-                            );
-                        }
-                    );
-                } else {
-                    const fieldValues = condition.fields.map((fieldName) => {
-                        const field = this.#fields.find(
-                            (f) => f.name === fieldName
-                        );
-                        return field ? field.value : this.#emptyValue;
-                    });
-                    const conditionType =
-                        !!condition.type && conditionsTypes[condition.type]
-                            ? conditionsTypes[condition.type]
-                            : conditionsTypes.some;
-                    // Check if any of the specified fields meet the condition
-                    conditionMet = EvaluationsManager[conditionType](
-                        condition.condition,
-                        fieldValues,
-                        condition.value
-                    );
-                }
-
-                if (conditionMet) {
-                    evaluatedFormula.formula = condition.formula;
-                    evaluatedFormula.fi = condition;
-                    break;
-                }
-            }
-        }
-        return evaluatedFormula;
-    }
+    try {
+      const keys = Object.keys(params);
+      let result = keys.length === 1 ? params[keys[0]] : parse(formula.formula as string).evaluate(params);
 
-    async calculate() {
-        /**
-         * the formula is taken from the evaluate method since the conditions are evaluated there and
-         * can change the formula to be applied
-         */
-        const model = this.#plugin.form.getField(this.name);
-        const formula = this.evaluate();
-
-        if (!formula.formula) {
-            this.#value =
-                this.#emptyValue !== undefined ? this.#emptyValue : '';
-            model && model.set({ value: this.#value });
-            this.#parent.trigger('change');
-            return this.#value;
-        }
-        // todo: Review if this section can be replaced by formulaManager.variables property.
-        const { tokens } = this.#parent.getParser(formula);
-        const variables = tokens
-            .filter((token) => token.type === 'variable')
-            .map((item) => item.value);
-
-        const params = await this.#parent.getParams(variables);
-
-        try {
-            const keys = Object.keys(params);
-            let result =
-                keys.length === 1
-                    ? params[keys[0]]
-                    : parse(formula.formula as string).evaluate(params);
-
-            const isInvalidResult = [
-                -Infinity,
-                Infinity,
-                undefined,
-                null,
-                NaN,
-            ].includes(result);
-            if (this.#round && !isInvalidResult) result = Math.round(result);
-            if (this.#ceil && !isInvalidResult) result = Math.ceil(result);
-            this.#value =
-                isInvalidResult || typeof result === 'object'
-                    ? this.#emptyValue
-                    : Number(result.toFixed(2));
-
-            this.#parent.trigger('change');
-
-            model && model.set({ value: this.#value });
-            return this.#value;
-        } catch (e) {
-            console.log('formula', this.name, formula.formula, params);
-            console.error(e);
-            throw new Error('Error calculating the formula');
-        }
+      const isInvalidResult = [-Infinity, Infinity, undefined, null, NaN].includes(result);
+      if (this.#round && !isInvalidResult) result = Math.round(result);
+      if (this.#ceil && !isInvalidResult) result = Math.ceil(result);
+      this.#value = isInvalidResult || typeof result === 'object' ? this.#emptyValue : Number(Number(result).toFixed(2));
+
+      this.#parent.trigger('change');
+
+      model && model.set({ value: this.#value });
+      return this.#value;
+    } catch (e) {
+      console.log('formula', this.name, formula.formula, params);
+      console.error(e);
+      throw new Error('Error calculating the formula');
     }
+  }
 }
-

package/src/models/callback-manager.ts

@@ -33,7 +33,7 @@ export class CallbackManager {
 
   initialize() {
     const instance = this.#field;
-    const checkField = async settings => {
+    const checkField = async (settings, index) => {
       const dependency = this.#model.getField(this.#model.getFieldName(settings.field));
       await dependency.isReady;
       const required = ['field', 'callback'];
@@ -47,6 +47,12 @@ export class CallbackManager {
         throw new Error(`${settings.callback} is not  a registered callback ${settings.name}`);
       }
 
+      // Asignar un ID único a cada configuración de callback para tracking individual
+      if (!settings.__callbackId) {
+        const instanceName = (instance as any).name || 'unknown';
+        settings.__callbackId = `${instanceName}_${settings.callback}_${settings.field}_${index}_${Date.now()}`;
+      }
+
       // saved in listener array to be able to remove the listener if is required.
       const event = settings.event || 'value.change';
       const caller = () => this.executeCallback(settings);
@@ -61,12 +67,18 @@ export class CallbackManager {
 
   /**
    * Generates a unique execution key for tracking callback recursion.
-   * Format: "callbackName:fieldName:dependencyName"
+   * Uses the unique __callbackId from settings if available, otherwise falls back to name-based key.
    */
-  #getExecutionKey(callbackName: string, fieldName: string, dependencyName?: string): string {
+  #getExecutionKey(settings: any, fieldName: string): string {
+    // Si el settings tiene un __callbackId único, usarlo para permitir múltiples callbacks del mismo tipo
+    if (settings?.__callbackId) {
+      return settings.__callbackId;
+    }
+    // Fallback para compatibilidad con código legacy
+    const callbackName = settings?.callback || 'unknown';
     const fieldNameStr = fieldName || 'unknown';
-    const dependencyNameStr = dependencyName || 'unknown';
-    return `${callbackName}:${fieldNameStr}:${dependencyNameStr}`;
+    const dependencyFieldName = typeof settings?.field === 'string' ? settings.field : settings?.field?.field || 'unknown';
+    return `${callbackName}:${fieldNameStr}:${dependencyFieldName}`;
   }
 
   executeCallback = async settings => {
@@ -84,7 +96,7 @@ export class CallbackManager {
     const fieldName = (this.#field as { name?: string })?.name || 'unknown';
     const dependencyFieldName = typeof settings.field === 'string' ? settings.field : settings.field?.field || 'unknown';
 
-    const executionKey = this.#getExecutionKey(callbackName, fieldName, dependencyFieldName);
+    const executionKey = this.#getExecutionKey(settings, fieldName);
 
     // Check if already executing (prevent concurrent executions)
     if (currentlyExecutingCallbacks.has(executionKey)) {
@@ -105,6 +117,7 @@ export class CallbackManager {
         `\n  Dependency: ${dependencyFieldName}`,
         `\n  Current depth: ${currentDepth + 1}`,
         `\n  Execution key: ${executionKey}`,
+        `\n  Callback ID: ${settings?.__callbackId || 'N/A'}`,
         `\n  This indicates a circular dependency in callbacks. Please review the form configuration.`
       );
       return;

package/src/models/field.ts

@@ -33,20 +33,78 @@ export class FormField extends ReactiveModel<IFormField> {
   get disabled() {
     if (typeof this.#disabled !== 'object' || !this.#disabled?.fields) return this.#disabled;
 
-    const validate = field => {
-      if (typeof field !== 'object') return !this.#parent.form.getField(field).value;
-      const { name, value } = field;
-      const fieldInstance = this.#parent.getField(name);
+    const { action, operator = 'or' } = this.#disabled;
+    const isEnableAction = action === 'enable';
+
+    const validate = fieldSettings => {
+      // 1. Get the target field instance
+      const name = typeof fieldSettings === 'string' ? fieldSettings : fieldSettings.name;
+      const fieldInstance = this.#parent.form.getField(name);
+
+      // If field dependency is missing, we can't evaluate. 
       if (!fieldInstance) return false;
-      if (field.hasOwnProperty('condition')) {
-        const compare = this.evaluations[field.condition](fieldInstance.value, field.value);
-        return compare;
+
+      // 2. Determine the value to check from that field
+      let currentValue;
+      if (typeof fieldSettings === 'object' && fieldSettings.property) {
+        // Access specific property (e.g. 'entries', 'length', 'value')
+        const props = fieldInstance.getProperties();
+        const propPath = fieldSettings.property.split('.');
+        
+        let val: any = props; 
+        // If property is 'value', start from fieldInstance.value
+        if (propPath[0] === 'value') {
+           val = fieldInstance.value;
+           propPath.shift(); // consume 'value'
+        }
+        
+        // Traverse path safely
+        for (const p of propPath) {
+            if (val === undefined || val === null) break;
+            val = val[p];
+        }
+        currentValue = val;
+      } else {
+        // Default: use the field's main value
+        currentValue = fieldInstance.value;
+      }
+
+      // 3. Simple boolean check if settings is just a string
+      if (typeof fieldSettings !== 'object') {
+        return !currentValue; 
+      }
+
+      // 4. Determine comparison value
+      let comparisonValue = fieldSettings.value;
+      if (fieldSettings.valueFromField) {
+        const compareField = this.#parent.form.getField(fieldSettings.valueFromField);
+        comparisonValue = compareField ? compareField.value : undefined;
       }
-      const { value: fieldValue } = fieldInstance;
-      return value !== fieldValue;
+
+      // 5. Evaluate condition
+      const condition = fieldSettings.condition;
+      if (condition && this.evaluations[condition]) {
+        return this.evaluations[condition](currentValue, comparisonValue);
+      }
+
+      // Default behavior
+      return currentValue !== comparisonValue; 
     };
 
-    return this.#disabled.fields.some(validate);
+    const results = this.#disabled.fields.map(validate);
+
+    let conditionsMet = false;
+    if (operator === 'and') {
+        conditionsMet = results.every(r => r === true);
+    } else {
+        conditionsMet = results.some(r => r === true);
+    }
+
+    if (isEnableAction) {
+        return !conditionsMet;
+    }
+
+    return conditionsMet;
   }
 
   set disabled(value) {
@@ -184,34 +242,34 @@ export class FormField extends ReactiveModel<IFormField> {
       if (typeof props.disabled !== 'object') {
         throw new Error(`The disabled property of the field ${props.name} must be a boolean or an object`);
       }
-      if (!props.disabled.fields && !props.disabled.mode) {
-        throw new Error(`The disabled property of the field ${props.name} must have a fields property or a mode defined`);
-      }
-
       if (props.disabled.mode) {
         // posible modes : create, update;
         this.#disabled = this.#parent.form.mode === props.disabled.mode;
         return;
       }
 
-      let allValid;
-      props.disabled.fields.forEach(item => {
-        const name = typeof item === 'string' ? item : item.name;
-
-        const instance = this.#parent.form.getField(name);
-        allValid = instance;
-        if (!allValid) return;
-        instance.on('change', this.#listenSiblings);
-        instance.on('value.change', this.#listenSiblings);
-        this.#listeningItems.set(name, {
-          item: instance,
-          listener: this.#listenSiblings,
-        });
-      });
+      if (props.disabled.fields && Array.isArray(props.disabled.fields)) {
+        props.disabled.fields.forEach(item => {
+          const namesToListen: string[] = [];
+          if (typeof item === 'string') {
+            namesToListen.push(item);
+          } else {
+            if (item.name) namesToListen.push(item.name);
+            if (item.valueFromField) namesToListen.push(item.valueFromField);
+          }
 
-      if (!allValid) {
-        const fieldName = this.getProperties().name || 'unknown';
-        throw new Error(`the field ${allValid} does not exist in the form ${(this.#parent as any).name}, field passed in invalid settings of field "${fieldName}"`);
+          namesToListen.forEach(name => {
+            const instance = this.#parent.form.getField(name);
+            if (!instance) return;
+            
+            instance.on('change', this.#listenSiblings);
+            instance.on('value.change', this.#listenSiblings);
+            this.#listeningItems.set(name, {
+              item: instance,
+              listener: this.#listenSiblings,
+            });
+          });
+        });
       }
       this.#disabled = props.disabled;
     }

package/src/models/types/disabled.ts

@@ -1,8 +1,15 @@
 export type TDisabledSettings = {
 	name: string;
 	value: any;
+	condition?: string;
+	property?: string;
+	operator?: 'and' | 'or';
+	valueFromField?: string;
 };
+
 export interface IDisabled {
 	fields: string[] | TDisabledSettings[];
+	action?: 'enable' | 'disable';
+	operator?: 'and' | 'or'; // Operator for the top-level list of fields/conditions
 }