easy-forms-core 1.1.6 → 1.1.8

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

@@ -361,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();
     /**
@@ -449,6 +454,21 @@ 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;
+    /**
+     * Aplica estado disabled/loading a un clone de slot: deshabilita elementos
+     * interactivos y añade clase para estilos. Respeta el estado del formulario.
+     */
+    private applySlotDisabledState;
     /**
      * Renderiza campos normales
      */

package/dist/easy-form.js

@@ -741,14 +741,20 @@ function getBaseStyles(colors) {
     }
     /* Disabled State */
     .easy-form-disabled,
-    .easy-form-disabled * {
+    .easy-form-disabled *,
+    .easy-form-slot-disabled,
+    .easy-form-slot-disabled * {
       pointer-events: none;
       opacity: 0.6;
     }
     .easy-form-disabled input,
     .easy-form-disabled textarea,
     .easy-form-disabled select,
-    .easy-form-disabled button {
+    .easy-form-disabled button,
+    .easy-form-slot-disabled input,
+    .easy-form-slot-disabled textarea,
+    .easy-form-slot-disabled select,
+    .easy-form-slot-disabled button {
       cursor: not-allowed;
     }
     .easy-form-input-disabled {
@@ -4763,6 +4769,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" });
@@ -5207,6 +5218,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;
@@ -5214,6 +5235,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") {
@@ -5244,16 +5267,110 @@ 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;
+  }
+  /**
+   * Aplica estado disabled/loading a un clone de slot: deshabilita elementos
+   * interactivos y añade clase para estilos. Respeta el estado del formulario.
+   */
+  applySlotDisabledState(slotElement) {
+    if (!this.disabled && !this.loading) return;
+    slotElement.classList.add("easy-form-slot-disabled");
+    const interactives = slotElement.querySelectorAll(
+      "input, textarea, select, button"
+    );
+    interactives.forEach((el) => {
+      if ("disabled" in el) el.disabled = true;
+    });
+  }
   /**
    * 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) {
+          this.applySlotDisabledState(slotElement);
+          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) {
+          this.applySlotDisabledState(slotElement);
+          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) {
+        this.applySlotDisabledState(slotElement);
+        container.appendChild(slotElement);
+      }
+    }
   }
   /**
    * Renderiza un campo
@@ -5511,12 +5628,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";