easy-forms-core 1.0.2 → 1.0.3

package/dist/index.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>;
 }
 /**
  * Estado del formulario
@@ -369,6 +379,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
      */
@@ -438,6 +452,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
      */
@@ -464,7 +486,11 @@ declare class StateManager {
     /**
      * Inicializa el schema
      */
-    initializeSchema(schema: FormSchema): void;
+    initializeSchema(schema: FormSchema, initialData?: Record<string, any>): void;
+    /**
+     * Extrae todos los campos recursivamente (incluyendo groups, rows, arrays)
+     */
+    private extractAllFields;
     /**
      * Construye el mapa de dependencias para optimizar re-evaluaciones
      */
@@ -825,4 +851,4 @@ declare function registerComponents(components: Record<string, CustomComponent>)
  */
 declare function getCustomComponent(type: string): CustomComponent | undefined;
 
-export { type ArrayField, type BaseField, type BaseValidation, type ChangeEventDetail, type CheckboxField, type ComponentRegistry, ConditionEngine, type ConditionOperator, type CustomComponent, type CustomField, type CustomMask, type CustomValidation, type DateField, EasyForm, type EmailValidation, type ErrorEventDetail, type Field, type FieldCondition, type FieldDependencies, type FieldType, type FileField, type FormColors, type FormSchema, type FormState, type FormTheme, type GroupField, type MaskConfig, MaskEngine, type MaxLengthValidation, type MaxValidation, type MinLengthValidation, type MinValidation, type NumberField, PREDEFINED_MASKS, type PatternValidation, type PredefinedMask, type RadioField, type RequiredValidation, SchemaParser, type SelectField, StateManager, type Step, type StepChangeEventDetail, type SubmitEventDetail, type SwitchField, type TextField, type TextareaField, type Validation, ValidationEngine, type ValidationType, type WizardState, attributeValue, createInput, generateId, getColors, getCustomComponent, getNestedValue, getPredefinedMask, getThemeStyles, isValidEmail, parseAttributeValue, registerComponent, registerComponents, sanitizeId, setNestedValue };
+export { type ArrayField, type BaseField, type BaseValidation, type ChangeEventDetail, type CheckboxField, type ComponentRegistry, ConditionEngine, type ConditionOperator, type CustomComponent, type CustomField, type CustomMask, type CustomValidation, type DateField, EasyForm, type EmailValidation, type ErrorEventDetail, type Field, type FieldCondition, type FieldDependencies, type FieldType, type FileField, type FormColors, type FormSchema, type FormState, type FormTheme, type GroupField, type MaskConfig, MaskEngine, type MaxLengthValidation, type MaxValidation, type MinLengthValidation, type MinValidation, type NumberField, PREDEFINED_MASKS, type PatternValidation, type PredefinedMask, type RadioField, type RequiredValidation, type RowField, SchemaParser, type SelectField, StateManager, type Step, type StepChangeEventDetail, type SubmitEventDetail, type SwitchField, type TextField, type TextareaField, type Validation, ValidationEngine, type ValidationType, type WizardState, attributeValue, createInput, generateId, getColors, getCustomComponent, getNestedValue, getPredefinedMask, getThemeStyles, isValidEmail, parseAttributeValue, registerComponent, registerComponents, sanitizeId, setNestedValue };

package/dist/index.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;
@@ -1092,12 +1123,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
    */
@@ -1105,7 +1155,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);
@@ -1145,15 +1196,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);
       }
@@ -1272,7 +1336,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)) {
@@ -1317,7 +1382,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
@@ -1426,7 +1492,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;
@@ -1447,7 +1514,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;
@@ -1470,7 +1538,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;
@@ -2454,7 +2523,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
@@ -2488,6 +2557,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();
     }
@@ -2498,7 +2570,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();
     }
   }
@@ -2525,7 +2598,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));
@@ -2622,6 +2696,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) {
@@ -2707,6 +2792,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
    */
@@ -2972,6 +3087,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;
   }
@@ -3076,6 +3195,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
    */