easy-forms-core 1.1.19 → 1.2.0

package/dist/easy-form.d.ts

@@ -445,6 +445,7 @@ declare class EasyForm extends BrowserHTMLElement {
      * Se inicializan una sola vez y se clonan en cada render.
      */
     private slotTemplates;
+    private skipPreserveValuesOnNextRender;
     static get observedAttributes(): string[];
     constructor();
     /**
@@ -585,6 +586,11 @@ declare class EasyForm extends BrowserHTMLElement {
      */
     private handleFieldChange;
     private dependencyRenderTimeout;
+    /**
+     * Re-renderiza un campo array cuando se añaden o eliminan ítems.
+     * Retorna true si se reemplazó, false si no se encontró el contenedor.
+     */
+    private rerenderArrayField;
     /**
      * Re-renderiza campos dependientes
      */

package/dist/easy-form.js

@@ -2683,7 +2683,8 @@ var StateManager = class {
     this.buildDependencyMap();
   }
   /**
-   * Extrae todos los campos recursivamente (incluyendo groups, rows, arrays)
+   * Extrae todos los campos recursivamente (incluyendo groups, rows).
+   * Los campos de array.itemSchema NO se incluyen como top-level: viven dentro de cada ítem.
    */
   extractAllFields(fields) {
     const allFields = [];
@@ -2695,12 +2696,27 @@ var StateManager = class {
       if (field.type === "row" && "fields" in field) {
         allFields.push(...this.extractAllFields(field.fields));
       }
-      if (field.type === "array" && "itemSchema" in field && field.itemSchema.fields) {
-        allFields.push(...this.extractAllFields(field.itemSchema.fields));
-      }
     }
     return allFields;
   }
+  /**
+   * Devuelve los nombres de campos que solo existen dentro de itemSchema de arrays
+   * y NO como campos top-level. Estos NO deben aparecer como claves en la raíz de values.
+   */
+  getArrayItemOnlyFieldNames(fields) {
+    const topLevelNames = new Set(fields.map((f) => f.name));
+    const arrayItemNames = /* @__PURE__ */ new Set();
+    for (const field of fields) {
+      if (field.type === "array" && "itemSchema" in field && field.itemSchema?.fields) {
+        for (const sub of field.itemSchema.fields) {
+          if (!topLevelNames.has(sub.name)) {
+            arrayItemNames.add(sub.name);
+          }
+        }
+      }
+    }
+    return arrayItemNames;
+  }
   /**
    * Encuentra el path completo de un campo dentro de grupos
    */
@@ -2795,7 +2811,9 @@ var StateManager = class {
         this.initializeFieldValue(field, values);
       }
     }
+    const arrayItemOnlyNames = this.getArrayItemOnlyFieldNames(topLevelFields);
     for (const key in existingValues) {
+      if (arrayItemOnlyNames.has(key)) continue;
       if (!(key in values)) {
         values[key] = existingValues[key];
       }
@@ -2820,6 +2838,11 @@ var StateManager = class {
         }
       }
     }
+    for (const name of arrayItemOnlyNames) {
+      if (name in values) {
+        delete values[name];
+      }
+    }
     this.state.values = values;
   }
   /**
@@ -5771,6 +5794,7 @@ var EasyForm = class extends BrowserHTMLElement {
      * Se inicializan una sola vez y se clonan en cada render.
      */
     this.slotTemplates = null;
+    this.skipPreserveValuesOnNextRender = false;
     this.dependencyRenderTimeout = null;
     this.stateManager = new StateManager();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -6086,7 +6110,9 @@ var EasyForm = class extends BrowserHTMLElement {
         }
         return;
       }
-      const preservedValues = this.preserveCurrentValues();
+      const isArrayRefresh = this.skipPreserveValuesOnNextRender;
+      const preservedValues = isArrayRefresh ? {} : this.preserveCurrentValues();
+      this.skipPreserveValuesOnNextRender = false;
       const previousWizardState = this.stateManager.getWizardState();
       if (preservedValues && Object.keys(preservedValues).length > 0) {
         for (const [key, value] of Object.entries(preservedValues)) {
@@ -6096,7 +6122,7 @@ var EasyForm = class extends BrowserHTMLElement {
       const initialData = this.initialData;
       const wasWizard = previousWizardState !== null;
       const isWizard = schema.steps && schema.steps.length > 0;
-      const shouldReinitialize = !previousWizardState || !wasWizard || !isWizard || previousWizardState && schema.steps && previousWizardState.totalSteps !== schema.steps.length;
+      const shouldReinitialize = !isArrayRefresh && (!previousWizardState || !wasWizard || !isWizard || previousWizardState && schema.steps && previousWizardState.totalSteps !== schema.steps.length);
       if (shouldReinitialize) {
         this.stateManager.initializeSchema(schema, initialData || void 0);
         if (wasWizard && isWizard && previousWizardState) {
@@ -6633,6 +6659,7 @@ var EasyForm = class extends BrowserHTMLElement {
   renderArray(field) {
     const arrayContainer = document.createElement("div");
     arrayContainer.className = "easy-form-array";
+    arrayContainer.setAttribute("data-field-name", field.name);
     if (field.label) {
       const label = document.createElement("label");
       label.className = "easy-form-label";
@@ -6890,6 +6917,17 @@ var EasyForm = class extends BrowserHTMLElement {
    */
   async handleFieldChange(fieldName, value) {
     await this.stateManager.setValue(fieldName, value);
+    const schema = this.schema;
+    if (schema) {
+      const field = this.findFieldInSchema(schema, fieldName);
+      if (field?.type === "array") {
+        const replaced = this.rerenderArrayField(field);
+        if (!replaced) {
+          this.skipPreserveValuesOnNextRender = true;
+          requestAnimationFrame(() => this.render());
+        }
+      }
+    }
     const dependentFields = this.stateManager.getDependentFields(fieldName);
     if (dependentFields.length > 0) {
       if (this.dependencyRenderTimeout) {
@@ -6911,6 +6949,19 @@ var EasyForm = class extends BrowserHTMLElement {
     });
     this.dispatchEvent(changeEvent);
   }
+  /**
+   * Re-renderiza un campo array cuando se añaden o eliminan ítems.
+   * Retorna true si se reemplazó, false si no se encontró el contenedor.
+   */
+  rerenderArrayField(field) {
+    const arrayContainer = this.shadow.querySelector(
+      `[data-field-name="${field.name}"].easy-form-array`
+    );
+    if (!arrayContainer?.parentNode) return false;
+    const newArrayElement = this.renderArray(field);
+    arrayContainer.parentNode.replaceChild(newArrayElement, arrayContainer);
+    return true;
+  }
   /**
    * Re-renderiza campos dependientes
    */