easy-forms-core 1.1.5 → 1.1.7

package/README.md

@@ -108,6 +108,68 @@ form.schema = {
 }
 ```
 
+### Slots con inserción por fila (row)
+
+Puedes insertar contenido HTML personalizado en posiciones concretas del formulario usando **hijos directos** del componente con el atributo `row`. El índice es 0-based (cada campo o fila del schema cuenta como una posición). Usa `row="-1"` para insertar al final, antes del botón de envío.
+
+| Valor   | Comportamiento |
+|--------|-----------------|
+| `row="0"` | Antes del primer campo |
+| `row="1"` | Entre el primer y el segundo campo |
+| `row="-1"` | Al final del formulario (antes del submit) |
+| Sin `row` o valor inválido | Se trata como `-1` (al final) |
+
+**HTML Vanilla**
+
+```html
+<easy-form id="form">
+  <div row="0">Mensaje al inicio</div>
+  <div row="2">Mensaje después del segundo campo</div>
+  <div row="-1">Mensaje al final</div>
+</easy-form>
+```
+
+```javascript
+import 'easy-forms-core'
+
+const form = document.querySelector('#form')
+form.schema = {
+  fields: [
+    { type: 'text', name: 'name', label: 'Nombre' },
+    { type: 'email', name: 'email', label: 'Email' },
+    { type: 'textarea', name: 'message', label: 'Mensaje' }
+  ]
+}
+```
+
+**React**
+
+```tsx
+import 'easy-forms-core'
+
+function MyForm() {
+  return (
+    <easy-form schema={{ fields: [...] }}>
+      <div row="0">Contenido al inicio</div>
+      <div row="-1">Contenido al final</div>
+    </easy-form>
+  )
+}
+```
+
+**Vue**
+
+```vue
+<template>
+  <easy-form :schema="schema">
+    <div row="0">Contenido al inicio</div>
+    <div row="-1">Contenido al final</div>
+  </easy-form>
+</template>
+```
+
+Los slots son solo visuales: los inputs dentro de un slot **no** forman parte del estado ni del envío del formulario. En formularios por pasos (wizard), el índice `row` es relativo al paso actual.
+
 ### React
 
 ```tsx
@@ -407,6 +469,7 @@ Puedes sobrescribir cualquier estilo usando las clases CSS del componente. Todas
 - Formularios anidados
 - Arrays dinámicos
 - **Rows (filas horizontales)** - Agrupa campos en filas
+- **Slots (row)** - Inserta contenido HTML en posiciones concretas del formulario
 - **Datos iniciales** - Carga valores iniciales desde datos externos
 - Componentes visuales personalizables
 - Eventos de submit, change y error

package/dist/easy-form.d.ts

@@ -307,6 +307,19 @@ interface FormColors {
  * Template names available
  */
 type TemplateName = 'login' | 'register' | 'otp' | 'contact' | 'password-reset' | 'password-change' | 'profile' | 'checkout' | 'feedback' | 'subscription' | 'booking' | 'review';
+/**
+ * Configuración del botón de submit
+ */
+interface SubmitButtonConfig {
+    /** Si false, no se muestra el botón (submit programático) */
+    visible?: boolean;
+    /** Texto del botón (default: "Enviar") */
+    text?: string;
+    /** Ancho del botón: "auto", "100%", "200px", etc. (default: "auto") */
+    width?: string;
+    /** Alineación: "left" | "center" | "right" (default: "left") */
+    align?: 'left' | 'center' | 'right';
+}
 /**
  * Schema del formulario
  */
@@ -314,6 +327,8 @@ interface FormSchema {
     fields?: Field[];
     steps?: Step[];
     initialData?: Record<string, any>;
+    /** Configuración del botón de submit (también puede definirse vía atributo submit-button) */
+    submitButton?: SubmitButtonConfig;
 }
 /**
  * Componente personalizado para inyección
@@ -346,6 +361,11 @@ declare class EasyForm extends BrowserHTMLElement {
     private isRendering;
     private attemptsLock;
     private lockCountdownInterval;
+    /**
+     * Plantillas de slots basados en atributo `row` en el light DOM.
+     * Se inicializan una sola vez y se clonan en cada render.
+     */
+    private slotTemplates;
     static get observedAttributes(): string[];
     constructor();
     /**
@@ -387,6 +407,15 @@ declare class EasyForm extends BrowserHTMLElement {
      */
     get attemptsStorageKey(): string | null;
     set attemptsStorageKey(value: string | null);
+    /**
+     * Configuración del botón de submit (desde atributo o schema)
+     */
+    get submitButton(): SubmitButtonConfig | null;
+    set submitButton(value: SubmitButtonConfig | null);
+    /**
+     * Obtiene la configuración efectiva del botón submit (atributo > schema > defaults)
+     */
+    private getSubmitButtonConfig;
     /**
      * Se llama cuando el componente se conecta al DOM
      */
@@ -425,6 +454,16 @@ declare class EasyForm extends BrowserHTMLElement {
      * Retorna un objeto con los valores preservados
      */
     private preserveCurrentValues;
+    /**
+     * Inicializa las plantillas de slots a partir del light DOM.
+     * Cualquier hijo directo que sea HTMLElement se considera slot; si tiene atributo `row` se usa para la posición, si no se inserta al final (-1).
+     */
+    private initializeSlotTemplates;
+    /**
+     * Obtiene clones de slots agrupados por índice de fila efectivo.
+     * Cualquier valor inválido o fuera de rango se normaliza a -1 (final del formulario).
+     */
+    private getSlotClonesByRow;
     /**
      * Renderiza campos normales
      */
@@ -515,6 +554,11 @@ declare class EasyForm extends BrowserHTMLElement {
      * Retorna los milisegundos restantes del bloqueo, o 0 si no está bloqueado.
      */
     getRemainingBlockTimeMs(): number;
+    /**
+     * Dispara el submit del formulario programáticamente.
+     * Útil cuando el botón submit está oculto (visible: false).
+     */
+    requestSubmit(): void;
     /**
      * Limpia todos los valores del formulario
      */

package/dist/easy-form.js

@@ -265,6 +265,13 @@ function getBaseStyles(colors) {
     .easy-form-submit:active {
       transform: scale(0.98);
     }
+    .easy-form-submit-wrapper {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    .easy-form-submit-wrapper .easy-form-submit {
+      min-width: 100px;
+    }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       width: 100%;
       padding: 0.5rem;
@@ -4756,6 +4763,11 @@ var EasyForm = class extends BrowserHTMLElement {
     this.isRendering = false;
     this.attemptsLock = null;
     this.lockCountdownInterval = null;
+    /**
+     * Plantillas de slots basados en atributo `row` en el light DOM.
+     * Se inicializan una sola vez y se clonan en cada render.
+     */
+    this.slotTemplates = null;
     this.dependencyRenderTimeout = null;
     this.stateManager = new StateManager();
     this.shadow = this.attachShadow({ mode: "open" });
@@ -4772,7 +4784,8 @@ var EasyForm = class extends BrowserHTMLElement {
       "disabled",
       "max-attempts",
       "block-duration-minutes",
-      "attempts-storage-key"
+      "attempts-storage-key",
+      "submit-button"
     ];
   }
   /**
@@ -4892,6 +4905,41 @@ var EasyForm = class extends BrowserHTMLElement {
       this.removeAttribute("attempts-storage-key");
     }
   }
+  /**
+   * Configuración del botón de submit (desde atributo o schema)
+   */
+  get submitButton() {
+    const attr = this.getAttribute("submit-button");
+    if (attr) {
+      try {
+        return parseAttributeValue(attr);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+  set submitButton(value) {
+    if (value && typeof value === "object") {
+      this.setAttribute("submit-button", attributeValue(value));
+    } else {
+      this.removeAttribute("submit-button");
+    }
+  }
+  /**
+   * Obtiene la configuración efectiva del botón submit (atributo > schema > defaults)
+   */
+  getSubmitButtonConfig(schema) {
+    const fromAttr = this.submitButton;
+    const fromSchema = schema?.submitButton;
+    const merged = { ...fromSchema, ...fromAttr };
+    return {
+      visible: merged.visible ?? true,
+      text: merged.text ?? "Enviar",
+      width: merged.width ?? "auto",
+      align: merged.align ?? "left"
+    };
+  }
   /**
    * Se llama cuando el componente se conecta al DOM
    */
@@ -4947,6 +4995,9 @@ var EasyForm = class extends BrowserHTMLElement {
       this.setupAttemptsLock();
       this.updateLockOverlay();
     }
+    if (name === "submit-button" && newValue !== oldValue) {
+      this.render();
+    }
   }
   /**
    * Configura el AttemptsLock según los atributos actuales
@@ -5060,17 +5111,25 @@ var EasyForm = class extends BrowserHTMLElement {
         newFormElement.classList.add("easy-form-disabled");
       }
       if (finalWizardState) {
-        this.renderWizard(newFormElement);
+        this.renderWizard(newFormElement, schema);
       } else {
         this.renderFields(newFormElement, schema.fields || []);
-        const submitButton = document.createElement("button");
-        submitButton.type = "submit";
-        submitButton.textContent = "Enviar";
-        submitButton.className = "easy-form-submit";
-        if (this.disabled || this.loading) {
-          submitButton.disabled = true;
+        const submitConfig = this.getSubmitButtonConfig(schema);
+        if (submitConfig.visible) {
+          const submitWrapper = document.createElement("div");
+          submitWrapper.className = "easy-form-submit-wrapper";
+          submitWrapper.style.textAlign = submitConfig.align;
+          const submitButton = document.createElement("button");
+          submitButton.type = "submit";
+          submitButton.textContent = submitConfig.text;
+          submitButton.className = "easy-form-submit";
+          submitButton.style.width = submitConfig.width;
+          if (this.disabled || this.loading) {
+            submitButton.disabled = true;
+          }
+          submitWrapper.appendChild(submitButton);
+          newFormElement.appendChild(submitWrapper);
         }
-        newFormElement.appendChild(submitButton);
       }
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
@@ -5153,6 +5212,16 @@ var EasyForm = class extends BrowserHTMLElement {
    * Retorna un objeto con los valores preservados
    */
   preserveCurrentValues() {
+    let currentSchema = null;
+    const templateName = this.template;
+    if (templateName) {
+      currentSchema = this.getSchemaFromTemplate(templateName);
+    } else {
+      currentSchema = this.schema;
+    }
+    if (!currentSchema) {
+      return {};
+    }
     const form = this.shadow.querySelector("form");
     const preservedValues = {};
     if (!form) return preservedValues;
@@ -5160,6 +5229,8 @@ var EasyForm = class extends BrowserHTMLElement {
     for (const input of inputs) {
       const name = input.getAttribute("name");
       if (!name) continue;
+      const belongsToSchema = this.findFieldInSchema(currentSchema, name) !== null;
+      if (!belongsToSchema) continue;
       let value;
       if (input instanceof HTMLInputElement) {
         if (input.type === "checkbox") {
@@ -5190,16 +5261,93 @@ var EasyForm = class extends BrowserHTMLElement {
     }
     return preservedValues;
   }
+  /**
+   * Inicializa las plantillas de slots a partir del light DOM.
+   * Cualquier hijo directo que sea HTMLElement se considera slot; si tiene atributo `row` se usa para la posición, si no se inserta al final (-1).
+   */
+  initializeSlotTemplates() {
+    if (this.slotTemplates !== null) return;
+    const elements = [];
+    for (const child of Array.from(this.children)) {
+      if (child instanceof HTMLElement) {
+        elements.push(child);
+      }
+    }
+    if (elements.length === 0) {
+      this.slotTemplates = [];
+      return;
+    }
+    this.slotTemplates = elements.map((el) => {
+      const raw = el.hasAttribute("row") ? el.getAttribute("row") : null;
+      const parsed = raw != null && raw !== "" ? Number(raw) : NaN;
+      const row = Number.isFinite(parsed) ? parsed : null;
+      return {
+        template: el.cloneNode(true),
+        row
+      };
+    });
+  }
+  /**
+   * Obtiene clones de slots agrupados por índice de fila efectivo.
+   * Cualquier valor inválido o fuera de rango se normaliza a -1 (final del formulario).
+   */
+  getSlotClonesByRow(totalRows) {
+    this.initializeSlotTemplates();
+    const result = /* @__PURE__ */ new Map();
+    if (!this.slotTemplates || this.slotTemplates.length === 0) {
+      return result;
+    }
+    for (const { template, row } of this.slotTemplates) {
+      let effectiveRow = typeof row === "number" ? row : -1;
+      if (!Number.isFinite(effectiveRow)) {
+        effectiveRow = -1;
+      }
+      if (effectiveRow < 0 || effectiveRow >= totalRows) {
+        effectiveRow = -1;
+      }
+      const clone = template.cloneNode(true);
+      const existing = result.get(effectiveRow) ?? [];
+      existing.push(clone);
+      result.set(effectiveRow, existing);
+    }
+    return result;
+  }
   /**
    * Renderiza campos normales
    */
   renderFields(container, fields) {
-    for (const field of fields) {
+    if (fields.length === 0) {
+      const slotClones = this.getSlotClonesByRow(0);
+      const endSlots2 = slotClones.get(-1);
+      if (endSlots2 && endSlots2.length > 0) {
+        for (const slotElement of endSlots2) {
+          container.appendChild(slotElement);
+        }
+      }
+      return;
+    }
+    const totalRows = fields.length;
+    const slotClonesByRow = this.getSlotClonesByRow(totalRows);
+    for (let rowIndex = 0; rowIndex < fields.length; rowIndex++) {
+      const slotsForRow = slotClonesByRow.get(rowIndex);
+      if (slotsForRow && slotsForRow.length > 0) {
+        for (const slotElement of slotsForRow) {
+          container.appendChild(slotElement);
+        }
+        slotClonesByRow.delete(rowIndex);
+      }
+      const field = fields[rowIndex];
       const fieldElement = this.renderField(field);
       if (fieldElement) {
         container.appendChild(fieldElement);
       }
     }
+    const endSlots = slotClonesByRow.get(-1);
+    if (endSlots && endSlots.length > 0) {
+      for (const slotElement of endSlots) {
+        container.appendChild(slotElement);
+      }
+    }
   }
   /**
    * Renderiza un campo
@@ -5432,14 +5580,13 @@ var EasyForm = class extends BrowserHTMLElement {
   /**
    * Renderiza wizard
    */
-  renderWizard(container) {
+  renderWizard(container, schema) {
     const wizardState = this.stateManager.getWizardState();
     if (!wizardState) return;
     const wizardContainer = document.createElement("div");
     wizardContainer.className = "easy-form-wizard";
     const stepsIndicator = document.createElement("div");
     stepsIndicator.className = "easy-form-wizard-steps";
-    const schema = this.schema;
     if (schema?.steps) {
       for (let i = 0; i < schema.steps.length; i++) {
         const stepEl = document.createElement("div");
@@ -5458,12 +5605,7 @@ var EasyForm = class extends BrowserHTMLElement {
     const fieldsContainer = document.createElement("div");
     fieldsContainer.className = "easy-form-wizard-fields";
     const currentFields = this.stateManager.getCurrentStepFields();
-    for (const field of currentFields) {
-      const fieldElement = this.renderField(field);
-      if (fieldElement) {
-        fieldsContainer.appendChild(fieldElement);
-      }
-    }
+    this.renderFields(fieldsContainer, currentFields);
     wizardContainer.appendChild(fieldsContainer);
     const navContainer = document.createElement("div");
     navContainer.className = "easy-form-wizard-nav";
@@ -5524,11 +5666,13 @@ var EasyForm = class extends BrowserHTMLElement {
       }
       navContainer.appendChild(nextButton);
     }
-    if (wizardState.currentStep === wizardState.totalSteps - 1) {
+    const submitConfig = this.getSubmitButtonConfig(schema);
+    if (wizardState.currentStep === wizardState.totalSteps - 1 && submitConfig.visible) {
       const submitButton = document.createElement("button");
       submitButton.type = "button";
-      submitButton.textContent = "Enviar";
+      submitButton.textContent = submitConfig.text;
       submitButton.className = "easy-form-wizard-next";
+      submitButton.style.width = submitConfig.width;
       if (this.disabled || this.loading) {
         submitButton.disabled = true;
       } else {
@@ -5783,6 +5927,17 @@ var EasyForm = class extends BrowserHTMLElement {
   getRemainingBlockTimeMs() {
     return this.attemptsLock?.getRemainingBlockTimeMs() ?? 0;
   }
+  /**
+   * Dispara el submit del formulario programáticamente.
+   * Útil cuando el botón submit está oculto (visible: false).
+   */
+  requestSubmit() {
+    const form = this.shadow.querySelector("form");
+    if (form && typeof form.requestSubmit === "function") {
+      ;
+      form.requestSubmit();
+    }
+  }
   /**
    * Limpia todos los valores del formulario
    */