easy-forms-core 1.1.5 → 1.1.6

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
@@ -387,6 +402,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
      */
@@ -515,6 +539,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;
@@ -4772,7 +4779,8 @@ var EasyForm = class extends BrowserHTMLElement {
       "disabled",
       "max-attempts",
       "block-duration-minutes",
-      "attempts-storage-key"
+      "attempts-storage-key",
+      "submit-button"
     ];
   }
   /**
@@ -4892,6 +4900,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 +4990,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 +5106,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) {
@@ -5432,14 +5486,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");
@@ -5524,11 +5577,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 +5838,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
    */