easy-forms-core 1.1.17 → 1.1.19

package/dist/easy-form.js

@@ -95,6 +95,22 @@ var SchemaParser = class {
             `Field "${field.name}" de tipo array debe tener itemSchema`
           );
         }
+        if ("minItems" in field) {
+          const min = field.minItems;
+          if (min < 0) {
+            throw new Error(
+              `Field "${field.name}" de tipo array: minItems debe ser >= 0`
+            );
+          }
+          if ("maxItems" in field) {
+            const max = field.maxItems;
+            if (min > max) {
+              throw new Error(
+                `Field "${field.name}" de tipo array: minItems (${min}) no puede ser mayor que maxItems (${max})`
+              );
+            }
+          }
+        }
         break;
       case "group":
         if (!("fields" in field) || !field.fields || field.fields.length === 0) {
@@ -1158,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;
     }
   `;
@@ -1195,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;
     }
@@ -1245,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);
     }
   `;
@@ -1290,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);
     }
   `;
 }
@@ -1353,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;
     }
   `;
@@ -1435,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);
     }
   `;
@@ -1534,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);
     }
   `;
@@ -1612,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);
     }
   `;
@@ -1798,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);
     }
   `;
@@ -1928,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;
@@ -2784,6 +2800,26 @@ var StateManager = class {
         values[key] = existingValues[key];
       }
     }
+    for (const field of topLevelFields) {
+      if (field.type === "array" && "minItems" in field && "itemSchema" in field) {
+        const arrayField = field;
+        const minItems = arrayField.minItems ?? 0;
+        if (minItems >= 1 && arrayField.itemSchema?.fields?.length) {
+          const arr = getNestedValue(values, field.name);
+          if (Array.isArray(arr) && arr.length < minItems) {
+            const padded = [...arr];
+            for (let i = arr.length; i < minItems; i++) {
+              const item = {};
+              for (const subField of arrayField.itemSchema.fields) {
+                this.initializeFieldValue(subField, item);
+              }
+              padded.push(item);
+            }
+            setNestedValue(values, field.name, padded);
+          }
+        }
+      }
+    }
     this.state.values = values;
   }
   /**
@@ -2805,9 +2841,25 @@ var StateManager = class {
             values[field.name] = null;
           }
           break;
-        case "array":
-          values[field.name] = [];
+        case "array": {
+          const arrayField = field;
+          const minItems = arrayField.minItems ?? 0;
+          const itemFields = arrayField.itemSchema?.fields;
+          if (minItems >= 1 && itemFields?.length) {
+            const arr = [];
+            for (let i = 0; i < minItems; i++) {
+              const item = {};
+              for (const subField of itemFields) {
+                this.initializeFieldValue(subField, item);
+              }
+              arr.push(item);
+            }
+            values[field.name] = arr;
+          } else {
+            values[field.name] = [];
+          }
           break;
+        }
         case "group":
           values[field.name] = {};
           if ("fields" in field) {
@@ -2856,6 +2908,19 @@ var StateManager = class {
   getValue(fieldName) {
     return getNestedValue(this.state.values, fieldName);
   }
+  /**
+   * Crea un ítem nuevo con valores por defecto para un campo array
+   */
+  createDefaultArrayItem(arrayField) {
+    const itemSchema = arrayField.itemSchema;
+    const itemFields = itemSchema?.fields;
+    if (!itemFields?.length) return {};
+    const item = {};
+    for (const subField of itemFields) {
+      this.initializeFieldValue(subField, item);
+    }
+    return item;
+  }
   /**
    * Establece un valor
    */
@@ -6576,6 +6641,8 @@ var EasyForm = class extends BrowserHTMLElement {
     }
     const values = this.stateManager.getValue(field.name) || [];
     const arrayField = field;
+    const minItems = arrayField.minItems ?? 0;
+    const maxItems = arrayField.maxItems ?? Infinity;
     const itemsContainer = document.createElement("div");
     itemsContainer.className = "easy-form-array-items";
     for (let i = 0; i < values.length; i++) {
@@ -6597,7 +6664,8 @@ var EasyForm = class extends BrowserHTMLElement {
       removeButton.type = "button";
       removeButton.textContent = "Eliminar";
       removeButton.className = "easy-form-array-remove";
-      if (this.disabled || this.loading) {
+      const atMinItems = values.length <= minItems;
+      if (this.disabled || this.loading || atMinItems) {
         removeButton.disabled = true;
       } else {
         removeButton.addEventListener("click", () => {
@@ -6614,11 +6682,13 @@ var EasyForm = class extends BrowserHTMLElement {
     addButton.type = "button";
     addButton.textContent = "Agregar";
     addButton.className = "easy-form-array-add";
-    if (this.disabled || this.loading) {
+    const atMaxItems = values.length >= maxItems;
+    if (this.disabled || this.loading || atMaxItems) {
       addButton.disabled = true;
     } else {
       addButton.addEventListener("click", () => {
-        const newValues = [...values, {}];
+        const newItem = this.stateManager.createDefaultArrayItem(field);
+        const newValues = [...values, newItem];
         this.handleFieldChange(field.name, newValues);
       });
     }