easy-forms-core 1.1.1 → 1.1.3

package/README.md

@@ -1,6 +1,6 @@
-# EasyForms
+# EasyFormsCore
 
-EasyForms es una librería agnóstica de framework para construir formularios dinámicos a partir de JSON usando Web Components.
+EasyFormsCore es una librería agnóstica de framework para construir formularios dinámicos a partir de JSON usando Web Components.
 
 Permite crear formularios completos únicamente describiendo un schema JSON.
 
@@ -229,6 +229,173 @@ form.schema = { fields: [...] }
 // template ahora es null
 ```
 
+## Personalización de Estilos
+
+EasyFormsCore utiliza variables CSS que puedes sobrescribir para personalizar completamente la apariencia de tus formularios. Todas las variables están definidas en el scope del componente (`:host`), lo que permite un control total sobre los colores y estilos.
+
+### Variables CSS Disponibles
+
+Puedes sobrescribir estas variables CSS para personalizar los colores de tu formulario:
+
+```css
+easy-form {
+  --easy-form-primary: #007bff;        /* Color principal (botones, focus, etc.) */
+  --easy-form-secondary: #6c757d;      /* Color secundario */
+  --easy-form-error: #dc3545;          /* Color de error */
+  --easy-form-success: #28a745;        /* Color de éxito */
+  --easy-form-text: #212529;           /* Color del texto */
+  --easy-form-label-color: #212529;    /* Color de las etiquetas */
+  --easy-form-border: #ddd;            /* Color de los bordes */
+  --easy-form-background: #ffffff;      /* Color de fondo */
+}
+```
+
+### Ejemplo de Personalización de Colores
+
+```html
+<style>
+  easy-form {
+    --easy-form-primary: #8b5cf6;
+    --easy-form-secondary: #64748b;
+    --easy-form-error: #ef4444;
+    --easy-form-success: #10b981;
+    --easy-form-text: #1e293b;
+    --easy-form-label-color: #334155;
+    --easy-form-border: #e2e8f0;
+    --easy-form-background: #ffffff;
+  }
+</style>
+
+<easy-form id="form"></easy-form>
+```
+
+### Sobrescribir Estilos con Clases CSS
+
+Puedes sobrescribir cualquier estilo usando las clases CSS del componente. Todas las clases utilizan el prefijo `easy-form-` para evitar conflictos.
+
+#### Clases Principales
+
+- `.easy-form-field` - Contenedor de cada campo
+- `.easy-form-label` - Etiquetas de los campos
+- `.easy-form-required` - Indicador de campo requerido (asterisco)
+- `.easy-form-input-error` - Input con error
+- `.easy-form-error` - Mensaje de error
+- `.easy-form-description` - Descripción del campo
+- `.easy-form-submit` - Botón de envío
+
+#### Clases de Grupos y Filas
+
+- `.easy-form-group` - Contenedor de grupo de campos
+- `.easy-form-group-label` - Etiqueta del grupo
+- `.easy-form-row` - Fila horizontal de campos
+- `.easy-form-array` - Contenedor de array dinámico
+- `.easy-form-array-item` - Item individual del array
+- `.easy-form-array-add` - Botón para agregar items
+- `.easy-form-array-remove` - Botón para remover items
+
+#### Clases de Wizard/Steps
+
+- `.easy-form-wizard` - Contenedor del wizard
+- `.easy-form-wizard-steps` - Contenedor de los pasos
+- `.easy-form-wizard-step` - Paso individual
+- `.easy-form-wizard-step.active` - Paso activo
+- `.easy-form-wizard-step.completed` - Paso completado
+- `.easy-form-wizard-nav` - Navegación del wizard
+- `.easy-form-wizard-prev` - Botón anterior
+- `.easy-form-wizard-next` - Botón siguiente
+- `.easy-form-wizard-fields` - Contenedor de campos del paso actual
+
+#### Clases de Inputs Especiales
+
+- `.easy-form-radio-group` - Grupo de radio buttons
+- `.easy-form-radio-option` - Opción de radio
+- `.easy-form-radio-label` - Etiqueta de radio
+- `.easy-form-label-checkbox` - Etiqueta de checkbox
+- `.easy-form-label-switch` - Etiqueta de switch
+- `.easy-form-quantity-container` - Contenedor de quantity input
+- `.easy-form-quantity-wrapper` - Wrapper del quantity
+- `.easy-form-quantity-btn` - Botón +/- del quantity
+- `.easy-form-quantity-input` - Input del quantity
+- `.easy-form-accordion-select-container` - Contenedor de accordion select
+- `.easy-form-accordion-item` - Item del accordion
+- `.easy-form-accordion-item.selected` - Item seleccionado
+- `.easy-form-accordion-item.open` - Item abierto
+- `.easy-form-accordion-header` - Header del accordion
+- `.easy-form-accordion-content` - Contenido del accordion
+- `.easy-form-image-grid-container` - Contenedor de image grid
+- `.easy-form-image-grid-item` - Item del grid
+- `.easy-form-image-grid-item.selected` - Item seleccionado
+- `.easy-form-otp-container` - Contenedor de OTP
+- `.easy-form-otp-input` - Input individual de OTP
+
+#### Clases de Estado
+
+- `.easy-form-field-hidden` - Campo oculto
+- `.easy-form-field-disabled` - Campo deshabilitado
+
+### Ejemplo de Sobrescritura de Estilos
+
+```html
+<style>
+  /* Personalizar colores con variables CSS */
+  easy-form {
+    --easy-form-primary: #6366f1;
+    --easy-form-error: #f43f5e;
+  }
+
+  /* Sobrescribir estilos específicos */
+  easy-form .easy-form-label {
+    font-weight: 700;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  easy-form .easy-form-submit {
+    border-radius: 12px;
+    padding: 0.875rem 2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  }
+
+  easy-form .easy-form-submit:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+  }
+
+  /* Personalizar inputs */
+  easy-form input:not([type="checkbox"]):not([type="radio"]),
+  easy-form textarea,
+  easy-form select {
+    border-radius: 8px;
+    border-width: 2px;
+    padding: 0.75rem 1rem;
+    transition: all 0.2s ease;
+  }
+
+  easy-form input:focus,
+  easy-form textarea:focus,
+  easy-form select:focus {
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+  }
+</style>
+
+<easy-form id="form"></easy-form>
+```
+
+### Notas Importantes
+
+1. **Especificidad**: Los estilos del componente tienen especificidad media. Si necesitas sobrescribir estilos con `!important`, puedes hacerlo, pero se recomienda usar variables CSS cuando sea posible.
+
+2. **Shadow DOM**: El componente utiliza Shadow DOM, por lo que los estilos globales no afectan directamente al contenido interno. Debes usar el selector `easy-form` o las variables CSS.
+
+3. **Variables CSS**: Las variables CSS son la forma recomendada de personalizar colores, ya que se propagan correctamente dentro del Shadow DOM.
+
+4. **Temas**: Los temas predefinidos (plano, tradicional, material, etc.) también respetan las variables CSS que definas, por lo que puedes cambiar los colores manteniendo el estilo del tema.
+
 ## Características
 
 - Web Component nativo

package/dist/easy-form.d.ts

@@ -385,6 +385,10 @@ declare class EasyForm extends BrowserHTMLElement {
      * Renderiza el formulario
      */
     private render;
+    /**
+     * Actualiza el overlay de loading sobre el formulario
+     */
+    private updateLoadingOverlay;
     /**
      * Preserva los valores actuales del DOM antes de re-renderizar
      * Retorna un objeto con los valores preservados
@@ -527,6 +531,22 @@ declare class EasyForm extends BrowserHTMLElement {
      * Establece los datos iniciales
      */
     set initialData(value: Record<string, any> | null);
+    /**
+     * Obtiene el estado de loading
+     */
+    get loading(): boolean;
+    /**
+     * Establece el estado de loading
+     */
+    set loading(value: boolean);
+    /**
+     * Obtiene el estado de disabled
+     */
+    get disabled(): boolean;
+    /**
+     * Establece el estado de disabled
+     */
+    set disabled(value: boolean);
     /**
      * Configura estilos básicos
      */

package/dist/easy-form.js

@@ -682,6 +682,53 @@ function getBaseStyles(colors) {
     .easy-form-otp-input:invalid {
       border-color: var(--easy-form-error);
     }
+    /* Loading Overlay (sobre el formulario) */
+    .easy-form-loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.8);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      backdrop-filter: blur(2px);
+      border-radius: inherit;
+    }
+    .easy-form-loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid rgba(0, 0, 0, 0.1);
+      border-top-color: var(--easy-form-primary);
+      border-radius: 50%;
+      animation: easy-form-spin 0.8s linear infinite;
+    }
+    @keyframes easy-form-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    /* Disabled State */
+    .easy-form-disabled,
+    .easy-form-disabled * {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+    .easy-form-disabled input,
+    .easy-form-disabled textarea,
+    .easy-form-disabled select,
+    .easy-form-disabled button {
+      cursor: not-allowed;
+    }
+    .easy-form-input-disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+    form {
+      position: relative;
+    }
   `;
 }
 function getThemeSpecificStyles(theme, colors) {
@@ -4483,7 +4530,7 @@ var EasyForm = class extends BrowserHTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["schema", "template", "template-extend", "theme", "colors", "initialData"];
+    return ["schema", "template", "template-extend", "theme", "colors", "initialData", "loading", "disabled"];
   }
   /**
    * Obtiene el schema
@@ -4592,6 +4639,21 @@ var EasyForm = class extends BrowserHTMLElement {
     if ((name === "theme" || name === "colors") && newValue !== oldValue) {
       this.setupStyles();
     }
+    if (name === "loading" && newValue !== oldValue) {
+      const form = this.shadow.querySelector("form");
+      this.updateLoadingOverlay(form || void 0);
+      if (form) {
+        const inputs = form.querySelectorAll("input, textarea, select, button");
+        inputs.forEach((input) => {
+          if (input instanceof HTMLElement && "disabled" in input) {
+            input.disabled = this.loading;
+          }
+        });
+      }
+    }
+    if (name === "disabled" && newValue !== oldValue) {
+      this.render();
+    }
   }
   /**
    * Maneja el cambio de schema
@@ -4678,6 +4740,9 @@ var EasyForm = class extends BrowserHTMLElement {
       const finalWizardState = this.stateManager.getWizardState();
       const newFormElement = document.createElement("form");
       newFormElement.addEventListener("submit", (e) => this.handleSubmit(e));
+      if (this.disabled || this.loading) {
+        newFormElement.classList.add("easy-form-disabled");
+      }
       if (finalWizardState) {
         this.renderWizard(newFormElement);
       } else {
@@ -4686,6 +4751,9 @@ var EasyForm = class extends BrowserHTMLElement {
         submitButton.type = "submit";
         submitButton.textContent = "Enviar";
         submitButton.className = "easy-form-submit";
+        if (this.disabled || this.loading) {
+          submitButton.disabled = true;
+        }
         newFormElement.appendChild(submitButton);
       }
       const oldForm = this.shadow.querySelector("form");
@@ -4697,10 +4765,33 @@ var EasyForm = class extends BrowserHTMLElement {
         }
       }
       this.shadow.appendChild(newFormElement);
+      if (this.loading) {
+        this.updateLoadingOverlay(newFormElement);
+      }
     } finally {
       this.isRendering = false;
     }
   }
+  /**
+   * Actualiza el overlay de loading sobre el formulario
+   */
+  updateLoadingOverlay(formElement) {
+    const existingOverlay = this.shadow.querySelector(".easy-form-loading-overlay");
+    if (existingOverlay) {
+      existingOverlay.remove();
+    }
+    if (this.loading) {
+      const form = formElement || this.shadow.querySelector("form");
+      if (form) {
+        const overlay = document.createElement("div");
+        overlay.className = "easy-form-loading-overlay";
+        const spinner = document.createElement("div");
+        spinner.className = "easy-form-loading-spinner";
+        overlay.appendChild(spinner);
+        form.appendChild(overlay);
+      }
+    }
+  }
   /**
    * Preserva los valores actuales del DOM antes de re-renderizar
    * Retorna un objeto con los valores preservados
@@ -4809,9 +4900,10 @@ var EasyForm = class extends BrowserHTMLElement {
     const value = this.stateManager.getValue(field.name);
     const errors = this.stateManager.getErrors(field.name);
     const error = errors.length > 0 ? errors[0] : void 0;
+    const isFormDisabled = this.disabled || this.loading;
     const fieldWithDependencies = {
       ...field,
-      disabled: !isEnabled || field.disabled
+      disabled: isFormDisabled || !isEnabled || field.disabled
     };
     const customComponent = getCustomComponent(field.type);
     if (customComponent) {
@@ -4932,11 +5024,15 @@ var EasyForm = class extends BrowserHTMLElement {
       removeButton.type = "button";
       removeButton.textContent = "Eliminar";
       removeButton.className = "easy-form-array-remove";
-      removeButton.addEventListener("click", () => {
-        const newValues = [...values];
-        newValues.splice(i, 1);
-        this.handleFieldChange(field.name, newValues);
-      });
+      if (this.disabled || this.loading) {
+        removeButton.disabled = true;
+      } else {
+        removeButton.addEventListener("click", () => {
+          const newValues = [...values];
+          newValues.splice(i, 1);
+          this.handleFieldChange(field.name, newValues);
+        });
+      }
       itemContainer.appendChild(removeButton);
       itemsContainer.appendChild(itemContainer);
     }
@@ -4945,10 +5041,14 @@ var EasyForm = class extends BrowserHTMLElement {
     addButton.type = "button";
     addButton.textContent = "Agregar";
     addButton.className = "easy-form-array-add";
-    addButton.addEventListener("click", () => {
-      const newValues = [...values, {}];
-      this.handleFieldChange(field.name, newValues);
-    });
+    if (this.disabled || this.loading) {
+      addButton.disabled = true;
+    } else {
+      addButton.addEventListener("click", () => {
+        const newValues = [...values, {}];
+        this.handleFieldChange(field.name, newValues);
+      });
+    }
     arrayContainer.appendChild(addButton);
     return arrayContainer;
   }
@@ -5016,13 +5116,17 @@ var EasyForm = class extends BrowserHTMLElement {
       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();
-        }
-      });
+      if (this.disabled || this.loading) {
+        prevButton.disabled = true;
+      } else {
+        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) {
@@ -5030,34 +5134,38 @@ var EasyForm = class extends BrowserHTMLElement {
       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();
-        for (const field of currentFields2) {
-          if (this.stateManager.getFieldVisibility(field.name)) {
-            await this.stateManager.validateField(field.name);
+      if (this.disabled || this.loading) {
+        nextButton.disabled = true;
+      } else {
+        nextButton.addEventListener("click", async () => {
+          const currentState = this.stateManager.getWizardState();
+          if (!currentState) return;
+          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 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(currentState.currentStep);
-          const moved = this.stateManager.nextStep();
-          if (moved) {
-            this.render();
-            this.emitStepChange();
+          const hasErrors = Object.keys(stepErrors).length > 0;
+          if (!hasErrors) {
+            this.stateManager.completeStep(currentState.currentStep);
+            const moved = this.stateManager.nextStep();
+            if (moved) {
+              this.render();
+              this.emitStepChange();
+            }
+          } else {
+            this.emitError(stepErrors);
           }
-        } else {
-          this.emitError(stepErrors);
-        }
-      });
+        });
+      }
       navContainer.appendChild(nextButton);
     }
     if (wizardState.currentStep === wizardState.totalSteps - 1) {
@@ -5065,27 +5173,31 @@ var EasyForm = class extends BrowserHTMLElement {
       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);
+      if (this.disabled || this.loading) {
+        submitButton.disabled = true;
+      } else {
+        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 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);
-        }
-      });
+          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);
@@ -5432,6 +5544,38 @@ var EasyForm = class extends BrowserHTMLElement {
       this.removeAttribute("initialData");
     }
   }
+  /**
+   * Obtiene el estado de loading
+   */
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  /**
+   * Establece el estado de loading
+   */
+  set loading(value) {
+    if (value) {
+      this.setAttribute("loading", "");
+    } else {
+      this.removeAttribute("loading");
+    }
+  }
+  /**
+   * Obtiene el estado de disabled
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * Establece el estado de disabled
+   */
+  set disabled(value) {
+    if (value) {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
   /**
    * Configura estilos básicos
    */