easy-forms-core 1.0.2 → 1.0.3

package/dist/easy-form.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tipos de campos soportados
  */
-type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'custom';
+type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom';
 /**
  * Tipos de validaciones soportadas
  */
@@ -206,6 +206,15 @@ interface GroupField extends BaseField {
     type: 'group';
     fields: Field[];
 }
+/**
+ * Campo row
+ */
+interface RowField extends BaseField {
+    type: 'row';
+    fields: Field[];
+    gap?: string | number;
+    align?: 'start' | 'end' | 'center' | 'stretch';
+}
 /**
  * Campo custom
  */
@@ -216,7 +225,7 @@ interface CustomField extends BaseField {
 /**
  * Unión de todos los tipos de campos
  */
-type Field = TextField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | CustomField;
+type Field = TextField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | RowField | CustomField;
 /**
  * Step para formularios wizard
  */
@@ -247,6 +256,7 @@ interface FormColors {
 interface FormSchema {
     fields?: Field[];
     steps?: Step[];
+    initialData?: Record<string, any>;
 }
 /**
  * Componente personalizado para inyección
@@ -320,6 +330,10 @@ declare class EasyForm extends BrowserHTMLElement {
      * Renderiza un grupo de campos
      */
     private renderGroup;
+    /**
+     * Renderiza una fila de campos
+     */
+    private renderRow;
     /**
      * Renderiza un array dinámico
      */
@@ -389,6 +403,14 @@ declare class EasyForm extends BrowserHTMLElement {
      * Establece los colores personalizados
      */
     set colors(value: FormColors | null);
+    /**
+     * Obtiene los datos iniciales
+     */
+    get initialData(): Record<string, any> | null;
+    /**
+     * Establece los datos iniciales
+     */
+    set initialData(value: Record<string, any> | null);
     /**
      * Configura estilos básicos
      */

package/dist/easy-form.js

@@ -61,6 +61,7 @@ var SchemaParser = class {
       "file",
       "array",
       "group",
+      "row",
       "custom"
     ];
     if (!validTypes.includes(field.type)) {
@@ -91,6 +92,13 @@ var SchemaParser = class {
           );
         }
         break;
+      case "row":
+        if (!("fields" in field) || !field.fields || field.fields.length === 0) {
+          throw new Error(
+            `Field "${field.name}" de tipo row debe tener fields`
+          );
+        }
+        break;
     }
   }
   /**
@@ -133,6 +141,9 @@ var SchemaParser = class {
         if (field.type === "group" && "fields" in field) {
           extractFields(field.fields);
         }
+        if (field.type === "row" && "fields" in field) {
+          extractFields(field.fields);
+        }
         if (field.type === "array" && "itemSchema" in field && field.itemSchema.fields) {
           extractFields(field.itemSchema.fields);
         }
@@ -248,6 +259,26 @@ function getBaseStyles(colors) {
       padding: 1rem;
       margin-bottom: 1rem;
     }
+    .easy-form-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin-bottom: 1rem;
+      align-items: stretch;
+    }
+    .easy-form-row > div {
+      flex: 1;
+      min-width: 0;
+    }
+    @media (max-width: 768px) {
+      .easy-form-row {
+        flex-direction: column;
+      }
+      .easy-form-row > div {
+        flex: none;
+        width: 100%;
+      }
+    }
     .easy-form-radio-group {
       display: flex;
       flex-direction: column;
@@ -1086,12 +1117,31 @@ var StateManager = class {
   /**
    * Inicializa el schema
    */
-  initializeSchema(schema) {
+  initializeSchema(schema, initialData) {
     this.schema = this.parser.parse(schema);
-    this.initializeValues();
+    this.initializeValues(initialData);
     this.initializeWizard();
     this.buildDependencyMap();
   }
+  /**
+   * Extrae todos los campos recursivamente (incluyendo groups, rows, arrays)
+   */
+  extractAllFields(fields) {
+    const allFields = [];
+    for (const field of fields) {
+      allFields.push(field);
+      if (field.type === "group" && "fields" in field) {
+        allFields.push(...this.extractAllFields(field.fields));
+      }
+      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;
+  }
   /**
    * Construye el mapa de dependencias para optimizar re-evaluaciones
    */
@@ -1099,7 +1149,8 @@ var StateManager = class {
     this.fieldDependencies.clear();
     this.dependencyCache.clear();
     if (!this.schema) return;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     for (const field of allFields) {
       if (!field.dependencies) continue;
       const observedFields = this.extractObservedFields(field.dependencies);
@@ -1139,15 +1190,28 @@ var StateManager = class {
   /**
    * Inicializa los valores por defecto
    */
-  initializeValues() {
+  initializeValues(initialData) {
     if (!this.schema) return;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const existingValues = { ...this.state.values };
     const values = {};
+    if (initialData) {
+      for (const key in initialData) {
+        const value = initialData[key];
+        if (value !== void 0 && value !== null) {
+          setNestedValue(values, key, value);
+        }
+      }
+    }
     for (const field of allFields) {
-      const existingValue = getNestedValue(existingValues, field.name);
+      const existingValue = getNestedValue(values, field.name);
       if (existingValue !== void 0 && existingValue !== null) {
-        values[field.name] = existingValue;
+        continue;
+      }
+      const prevValue = getNestedValue(existingValues, field.name);
+      if (prevValue !== void 0 && prevValue !== null) {
+        setNestedValue(values, field.name, prevValue);
       } else {
         this.initializeFieldValue(field, values);
       }
@@ -1266,7 +1330,8 @@ var StateManager = class {
    */
   async validateField(fieldName) {
     if (!this.schema) return;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const field = allFields.find((f) => f.name === fieldName);
     if (!field) return;
     if (!this.getFieldVisibility(fieldName)) {
@@ -1311,7 +1376,8 @@ var StateManager = class {
     if (!this.schema) {
       return {};
     }
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const errors = await this.validator.validateForm(
       allFields,
       this.state.values
@@ -1420,7 +1486,8 @@ var StateManager = class {
       return cached.visible;
     }
     if (!this.schema) return true;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const field = allFields.find((f) => f.name === fieldName);
     if (!field || !field.dependencies) {
       return !field?.hidden;
@@ -1441,7 +1508,8 @@ var StateManager = class {
       return cached.enabled;
     }
     if (!this.schema) return true;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const field = allFields.find((f) => f.name === fieldName);
     if (!field) return true;
     if (field.disabled) return false;
@@ -1464,7 +1532,8 @@ var StateManager = class {
       return cached.required;
     }
     if (!this.schema) return false;
-    const allFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields;
+    const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
+    const allFields = this.extractAllFields(topLevelFields);
     const field = allFields.find((f) => f.name === fieldName);
     if (!field) return false;
     const hasRequired = field.validations?.some((v) => v.type === "required") || false;
@@ -2448,7 +2517,7 @@ var EasyForm = class extends BrowserHTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["schema", "theme", "colors"];
+    return ["schema", "theme", "colors", "initialData"];
   }
   /**
    * Obtiene el schema
@@ -2482,6 +2551,9 @@ var EasyForm = class extends BrowserHTMLElement {
     if (name === "schema" && newValue !== oldValue) {
       this.handleSchemaChange();
     }
+    if (name === "initialData" && newValue !== oldValue) {
+      this.handleSchemaChange();
+    }
     if ((name === "theme" || name === "colors") && newValue !== oldValue) {
       this.setupStyles();
     }
@@ -2492,7 +2564,8 @@ var EasyForm = class extends BrowserHTMLElement {
   handleSchemaChange() {
     const schema = this.schema;
     if (schema) {
-      this.stateManager.initializeSchema(schema);
+      const initialData = this.initialData;
+      this.stateManager.initializeSchema(schema, initialData || void 0);
       this.render();
     }
   }
@@ -2519,7 +2592,8 @@ var EasyForm = class extends BrowserHTMLElement {
           this.stateManager.setValueWithoutValidation(key, value);
         }
       }
-      this.stateManager.initializeSchema(schema);
+      const initialData = this.initialData;
+      this.stateManager.initializeSchema(schema, initialData || void 0);
       const wizardState = this.stateManager.getWizardState();
       const newFormElement = document.createElement("form");
       newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
@@ -2616,6 +2690,17 @@ var EasyForm = class extends BrowserHTMLElement {
       }
       return groupElement;
     }
+    if (field.type === "row") {
+      const rowElement = this.renderRow(field);
+      if (!isVisible) {
+        rowElement.style.display = "none";
+        rowElement.classList.add("easy-form-field-hidden");
+      }
+      if (!isEnabled) {
+        rowElement.classList.add("easy-form-field-disabled");
+      }
+      return rowElement;
+    }
     if (field.type === "array") {
       const arrayElement = this.renderArray(field);
       if (!isVisible) {
@@ -2701,6 +2786,36 @@ var EasyForm = class extends BrowserHTMLElement {
     }
     return groupContainer;
   }
+  /**
+   * Renderiza una fila de campos
+   */
+  renderRow(field) {
+    const rowContainer = document.createElement("div");
+    rowContainer.className = "easy-form-row";
+    const rowField = field;
+    rowContainer.style.display = "flex";
+    rowContainer.style.flexWrap = "wrap";
+    rowContainer.style.alignItems = rowField.align || "stretch";
+    if (rowField.gap !== void 0) {
+      const gapValue = typeof rowField.gap === "number" ? `${rowField.gap}px` : rowField.gap;
+      rowContainer.style.gap = gapValue;
+    } else {
+      rowContainer.style.gap = "1rem";
+    }
+    if ("fields" in field && field.fields) {
+      for (const subField of field.fields) {
+        const fieldElement = this.renderField(subField);
+        if (fieldElement) {
+          const fieldWrapper = document.createElement("div");
+          fieldWrapper.style.flex = "1";
+          fieldWrapper.style.minWidth = "0";
+          fieldWrapper.appendChild(fieldElement);
+          rowContainer.appendChild(fieldWrapper);
+        }
+      }
+    }
+    return rowContainer;
+  }
   /**
    * Renderiza un array dinámico
    */
@@ -2966,6 +3081,10 @@ var EasyForm = class extends BrowserHTMLElement {
         const found = this.findFieldInSchema({ fields: field.fields }, name);
         if (found) return found;
       }
+      if (field.type === "row" && "fields" in field) {
+        const found = this.findFieldInSchema({ fields: field.fields }, name);
+        if (found) return found;
+      }
     }
     return null;
   }
@@ -3070,6 +3189,24 @@ var EasyForm = class extends BrowserHTMLElement {
       this.removeAttribute("colors");
     }
   }
+  /**
+   * Obtiene los datos iniciales
+   */
+  get initialData() {
+    const initialDataAttr = this.getAttribute("initialData");
+    if (!initialDataAttr) return null;
+    return parseAttributeValue(initialDataAttr);
+  }
+  /**
+   * Establece los datos iniciales
+   */
+  set initialData(value) {
+    if (value) {
+      this.setAttribute("initialData", attributeValue(value));
+    } else {
+      this.removeAttribute("initialData");
+    }
+  }
   /**
    * Configura estilos básicos
    */