easy-forms-core 1.1.0 → 1.1.1

package/dist/index.js

@@ -382,7 +382,41 @@ function getBaseStyles(colors) {
     .easy-form-wizard-nav {
       display: flex;
       gap: 1rem;
-      margin-top: 1rem;
+      margin-top: 2rem;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .easy-form-wizard-prev,
+    .easy-form-wizard-next {
+      padding: 0.75rem 1.5rem;
+      background: var(--easy-form-primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+      min-width: 120px;
+    }
+    .easy-form-wizard-prev:hover:not(:disabled),
+    .easy-form-wizard-next:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .easy-form-wizard-prev:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .easy-form-wizard-prev {
+      background: var(--easy-form-secondary);
+      order: 1;
+    }
+    .easy-form-wizard-next {
+      background: var(--easy-form-primary);
+      order: 2;
     }
     .easy-form-array-item {
       padding: 1rem;
@@ -1737,7 +1771,20 @@ var ValidationEngine = class {
     if (!value) {
       return { isValid: true };
     }
-    const regex = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+    let regex;
+    if (pattern instanceof RegExp) {
+      regex = pattern;
+    } else if (typeof pattern === "string") {
+      try {
+        regex = new RegExp(pattern);
+      } catch (e) {
+        console.warn("Invalid regex pattern:", pattern);
+        return { isValid: true };
+      }
+    } else {
+      console.warn("Pattern validation expects string or RegExp, got:", typeof pattern, pattern);
+      return { isValid: true };
+    }
     const isValid = regex.test(String(value));
     return {
       isValid,
@@ -4611,26 +4658,45 @@ var EasyForm = class extends BrowserHTMLElement {
         return;
       }
       const preservedValues = this.preserveCurrentValues();
+      const previousWizardState = this.stateManager.getWizardState();
       if (preservedValues && Object.keys(preservedValues).length > 0) {
         for (const [key, value] of Object.entries(preservedValues)) {
           this.stateManager.setValueWithoutValidation(key, value);
         }
       }
       const initialData = this.initialData;
-      this.stateManager.initializeSchema(schema, initialData || void 0);
-      const wizardState = this.stateManager.getWizardState();
+      const wasWizard = previousWizardState !== null;
+      const isWizard = schema.steps && schema.steps.length > 0;
+      const shouldReinitialize = !previousWizardState || !wasWizard || !isWizard || previousWizardState && schema.steps && previousWizardState.totalSteps !== schema.steps.length;
+      if (shouldReinitialize) {
+        this.stateManager.initializeSchema(schema, initialData || void 0);
+        if (wasWizard && isWizard && previousWizardState) {
+          const wizardState = this.stateManager.getWizardState();
+          if (wizardState && previousWizardState.totalSteps === wizardState.totalSteps) {
+            if (previousWizardState.currentStep >= 0 && previousWizardState.currentStep < wizardState.totalSteps) {
+              this.stateManager.goToStep(previousWizardState.currentStep);
+            }
+            for (const completedStep of previousWizardState.completedSteps) {
+              if (completedStep >= 0 && completedStep < wizardState.totalSteps) {
+                this.stateManager.completeStep(completedStep);
+              }
+            }
+          }
+        }
+      }
+      const finalWizardState = this.stateManager.getWizardState();
       const newFormElement = document.createElement("form");
       newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
-      if (wizardState) {
-        this.renderWizard(newFormElement, wizardState);
+      if (finalWizardState) {
+        this.renderWizard(newFormElement);
       } else {
         this.renderFields(newFormElement, schema.fields || []);
+        const submitButton = document.createElement("button");
+        submitButton.type = "submit";
+        submitButton.textContent = "Enviar";
+        submitButton.className = "easy-form-submit";
+        newFormElement.appendChild(submitButton);
       }
-      const submitButton = document.createElement("button");
-      submitButton.type = "submit";
-      submitButton.textContent = "Enviar";
-      submitButton.className = "easy-form-submit";
-      newFormElement.appendChild(submitButton);
       const oldForm = this.shadow.querySelector("form");
       if (oldForm && oldForm.parentNode === this.shadow && oldForm !== newFormElement) {
         try {
@@ -4919,7 +4985,9 @@ var EasyForm = class extends BrowserHTMLElement {
   /**
    * Renderiza wizard
    */
-  renderWizard(container, wizardState) {
+  renderWizard(container) {
+    const wizardState = this.stateManager.getWizardState();
+    if (!wizardState) return;
     const wizardContainer = document.createElement("div");
     wizardContainer.className = "easy-form-wizard";
     const stepsIndicator = document.createElement("div");
@@ -4952,43 +5020,83 @@ var EasyForm = class extends BrowserHTMLElement {
     wizardContainer.appendChild(fieldsContainer);
     const navContainer = document.createElement("div");
     navContainer.className = "easy-form-wizard-nav";
-    const prevButton = document.createElement("button");
-    prevButton.type = "button";
-    prevButton.textContent = "Anterior";
-    prevButton.className = "easy-form-wizard-prev";
-    prevButton.disabled = wizardState.currentStep === 0;
-    prevButton.addEventListener("click", () => {
-      if (this.stateManager.previousStep()) {
-        this.render();
-        this.emitStepChange();
-      }
-    });
-    navContainer.appendChild(prevButton);
-    const nextButton = document.createElement("button");
-    nextButton.type = "button";
-    nextButton.textContent = wizardState.currentStep === wizardState.totalSteps - 1 ? "Enviar" : "Siguiente";
-    nextButton.className = "easy-form-wizard-next";
-    nextButton.addEventListener("click", async () => {
-      if (wizardState.currentStep === wizardState.totalSteps - 1) {
-        await this.handleSubmit(new Event("submit"));
-      } else {
+    if (wizardState.currentStep > 0) {
+      const prevButton = document.createElement("button");
+      prevButton.type = "button";
+      prevButton.textContent = "Anterior";
+      prevButton.className = "easy-form-wizard-prev";
+      prevButton.addEventListener("click", () => {
+        const currentState = this.stateManager.getWizardState();
+        if (currentState && this.stateManager.previousStep()) {
+          this.render();
+          this.emitStepChange();
+        }
+      });
+      navContainer.appendChild(prevButton);
+    }
+    if (wizardState.currentStep < wizardState.totalSteps - 1) {
+      const nextButton = document.createElement("button");
+      nextButton.type = "button";
+      nextButton.textContent = "Siguiente";
+      nextButton.className = "easy-form-wizard-next";
+      nextButton.addEventListener("click", async () => {
+        const currentState = this.stateManager.getWizardState();
+        if (!currentState) return;
         const currentFields2 = this.stateManager.getCurrentStepFields();
-        const errors = await this.stateManager.validateForm();
-        const hasErrors = currentFields2.some(
-          (f) => errors[f.name] && errors[f.name].length > 0
-        );
+        for (const field of currentFields2) {
+          if (this.stateManager.getFieldVisibility(field.name)) {
+            await this.stateManager.validateField(field.name);
+          }
+        }
+        const allErrors = this.stateManager.getAllErrors();
+        const stepErrors = {};
+        for (const field of currentFields2) {
+          if (allErrors[field.name] && allErrors[field.name].length > 0) {
+            stepErrors[field.name] = allErrors[field.name];
+          }
+        }
+        const hasErrors = Object.keys(stepErrors).length > 0;
         if (!hasErrors) {
-          this.stateManager.completeStep(wizardState.currentStep);
-          if (this.stateManager.nextStep()) {
+          this.stateManager.completeStep(currentState.currentStep);
+          const moved = this.stateManager.nextStep();
+          if (moved) {
             this.render();
             this.emitStepChange();
           }
         } else {
-          this.emitError(errors);
+          this.emitError(stepErrors);
         }
-      }
-    });
-    navContainer.appendChild(nextButton);
+      });
+      navContainer.appendChild(nextButton);
+    }
+    if (wizardState.currentStep === wizardState.totalSteps - 1) {
+      const submitButton = document.createElement("button");
+      submitButton.type = "button";
+      submitButton.textContent = "Enviar";
+      submitButton.className = "easy-form-wizard-next";
+      submitButton.addEventListener("click", async () => {
+        const currentFields2 = this.stateManager.getCurrentStepFields();
+        for (const field of currentFields2) {
+          if (this.stateManager.getFieldVisibility(field.name)) {
+            await this.stateManager.validateField(field.name);
+          }
+        }
+        const allErrors = this.stateManager.getAllErrors();
+        const stepErrors = {};
+        for (const field of currentFields2) {
+          if (allErrors[field.name] && allErrors[field.name].length > 0) {
+            stepErrors[field.name] = allErrors[field.name];
+          }
+        }
+        const hasErrors = Object.keys(stepErrors).length > 0;
+        if (!hasErrors) {
+          await this.handleSubmit(new Event("submit"));
+        } else {
+          this.emitError(stepErrors);
+        }
+      });
+      navContainer.appendChild(submitButton);
+    }
     wizardContainer.appendChild(navContainer);
     container.appendChild(wizardContainer);
   }