easy-forms-core 1.1.18 → 1.2.0

package/dist/index.d.ts

@@ -494,6 +494,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();
     /**
@@ -634,6 +635,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
      */
@@ -804,9 +810,15 @@ declare class StateManager {
      */
     initializeSchema(schema: FormSchema, initialData?: Record<string, any>): void;
     /**
-     * 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.
      */
     private extractAllFields;
+    /**
+     * 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.
+     */
+    private getArrayItemOnlyFieldNames;
     /**
      * Encuentra el path completo de un campo dentro de grupos
      */

package/dist/index.js

@@ -1174,7 +1174,7 @@ function getPlanoStyles(_colors) {
     }
     .easy-form-array-item {
       border: none;
-      border-bottom: 1px solid var(--easy-form-border);
+      border-bottom: 1px solid var(--easy-form-group-border);
       border-radius: 0;
     }
   `;
@@ -1211,7 +1211,7 @@ function getTradicionalStyles(_colors) {
       border-color: var(--easy-form-primary);
     }
     .easy-form-array-item {
-      border: 2px solid var(--easy-form-border);
+      border: 2px solid var(--easy-form-group-border);
       border-radius: 4px;
       background: #f8f9fa;
     }
@@ -1261,7 +1261,7 @@ function getMaterialStyles(_colors) {
     .easy-form-array-item {
       border: none;
       border-radius: 4px;
-      background: #f5f5f5;
+      background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
     }
   `;
@@ -1306,10 +1306,10 @@ function getRoundedShadowStyles(_colors) {
       box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
     }
     .easy-form-array-item {
-      border: 1px solid var(--easy-form-border);
+      border: 1px solid var(--easy-form-group-border);
       border-radius: 12px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-      background: var(--easy-form-background);
+      background:  var(--easy-form-group-background);
     }
   `;
 }
@@ -1369,7 +1369,7 @@ function getLinesStyles(_colors) {
     }
     .easy-form-array-item {
       border: none;
-      border-bottom: 1px solid var(--easy-form-border);
+      border-bottom: 1px solid var(--easy-form-group-border);
       border-radius: 0;
     }
   `;
@@ -1451,7 +1451,7 @@ function getShadcnStyles(_colors) {
     .easy-form-array-item {
       border: 1.5px solid #e4e4e7;
       border-radius: 8px;
-      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
+      background:  var(--easy-form-group-background);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     }
   `;
@@ -1550,7 +1550,7 @@ function getChakraStyles(_colors) {
       transition: all 0.25s ease;
     }
     .easy-form-array-item:hover {
-      border-color: var(--easy-form-primary);
+      border-color: var(--easy-form-group-border);
       box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
     }
   `;
@@ -1628,9 +1628,9 @@ function getMantineStyles(_colors) {
       transform: translateY(-3px) scale(1.05);
     }
     .easy-form-array-item {
-      border: 1px solid #dee2e6;
+      border: 1px solid var(--easy-form-group-border);
       border-radius: 12px;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
   `;
@@ -1814,9 +1814,9 @@ function getBorderedStyles(_colors) {
       transform: translate(-4px, -4px);
     }
     .easy-form-array-item {
-      border: 3px solid #1a1a1a;
+      border: 3px solid var(--easy-form-group-border);
       border-radius: 0;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
     }
   `;
@@ -1944,7 +1944,7 @@ function getMinimalStyles(_colors) {
     }
     .easy-form-array-item {
       border: none;
-      border-bottom: 1px solid #e5e7eb;
+      border-bottom: 1px solid var(--easy-form-group-border);
       border-radius: 0;
       background: transparent;
       padding-bottom: 1.5rem;
@@ -2689,7 +2689,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 = [];
@@ -2701,12 +2702,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
    */
@@ -2801,7 +2817,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];
       }
@@ -2826,6 +2844,11 @@ var StateManager = class {
         }
       }
     }
+    for (const name of arrayItemOnlyNames) {
+      if (name in values) {
+        delete values[name];
+      }
+    }
     this.state.values = values;
   }
   /**
@@ -5780,6 +5803,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" });
@@ -6095,7 +6119,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)) {
@@ -6105,7 +6131,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) {
@@ -6642,6 +6668,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";
@@ -6899,6 +6926,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) {
@@ -6920,6 +6958,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
    */