easy-forms-core 1.0.10 → 1.1.0

package/dist/easy-form.js

@@ -910,7 +910,7 @@ function getLinesStyles(_colors) {
 function getShadcnStyles(_colors) {
   return `
     .easy-form-label {
-      color: #1a1a1a;
+      color: var(--easy-form-label-color);
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.75rem;
@@ -920,21 +920,22 @@ function getShadcnStyles(_colors) {
       border: 1.5px solid #e4e4e7;
       border-radius: 8px;
       padding: 0.75rem 1rem;
-      background: linear-gradient(to bottom, #ffffff, #fafafa);
+      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
+      color: var(--easy-form-text);
       font-size: 0.875rem;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8);
     }
     input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
       border-color: #d4d4d8;
-      background: linear-gradient(to bottom, #ffffff, #f5f5f5);
+      background: linear-gradient(to bottom, var(--easy-form-background), #f5f5f5);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
       transform: translateY(-1px);
     }
     input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
       outline: none;
       border-color: var(--easy-form-primary);
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.12), 0 4px 12px rgba(0, 123, 255, 0.15);
       transform: translateY(-2px);
     }
@@ -958,14 +959,14 @@ function getShadcnStyles(_colors) {
     .easy-form-group {
       border: 1.5px solid #e4e4e7;
       border-radius: 12px;
-      background: linear-gradient(to bottom, #ffffff, #fafafa);
+      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       padding: 1.5rem;
     }
     .easy-form-wizard-step {
       border: 1.5px solid #e4e4e7;
       border-radius: 8px;
-      background: linear-gradient(to bottom, #ffffff, #fafafa);
+      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
     .easy-form-wizard-step:hover {
@@ -983,7 +984,7 @@ function getShadcnStyles(_colors) {
     .easy-form-array-item {
       border: 1.5px solid #e4e4e7;
       border-radius: 8px;
-      background: linear-gradient(to bottom, #ffffff, #fafafa);
+      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     }
   `;
@@ -991,7 +992,7 @@ function getShadcnStyles(_colors) {
 function getChakraStyles(_colors) {
   return `
     .easy-form-label {
-      color: #2d3748;
+      color: var(--easy-form-label-color);
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
@@ -1003,7 +1004,8 @@ function getChakraStyles(_colors) {
       border: 2px solid #cbd5e0;
       border-radius: 6px;
       padding: 0.625rem 0.875rem;
-      background: #ffffff;
+      background: var(--easy-form-background);
+      color: var(--easy-form-text);
       font-size: 0.875rem;
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       font-weight: 500;
@@ -1018,7 +1020,7 @@ function getChakraStyles(_colors) {
       outline: none;
       border-color: var(--easy-form-primary);
       border-width: 2px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2), 0 4px 12px rgba(0, 123, 255, 0.15);
       transform: scale(1.02);
     }
@@ -1054,13 +1056,13 @@ function getChakraStyles(_colors) {
     .easy-form-group {
       border: 2px solid #e2e8f0;
       border-radius: 8px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .easy-form-wizard-step {
       border: 2px solid #e2e8f0;
       border-radius: 6px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     }
     .easy-form-wizard-step:hover {
@@ -1077,7 +1079,7 @@ function getChakraStyles(_colors) {
     .easy-form-array-item {
       border: 2px solid #e2e8f0;
       border-radius: 6px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       transition: all 0.25s ease;
     }
     .easy-form-array-item:hover {
@@ -1089,7 +1091,7 @@ function getChakraStyles(_colors) {
 function getMantineStyles(_colors) {
   return `
     .easy-form-label {
-      color: #495057;
+      color: var(--easy-form-label-color);
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.625rem;
@@ -1098,21 +1100,22 @@ function getMantineStyles(_colors) {
       border: 1px solid #dee2e6;
       border-radius: 12px;
       padding: 0.875rem 1.25rem;
-      background: #ffffff;
+      background: var(--easy-form-background);
+      color: var(--easy-form-text);
       font-size: 0.875rem;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
     input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
       border-color: #adb5bd;
-      background: linear-gradient(to bottom, #ffffff, #f8f9fa);
+      background: linear-gradient(to bottom, var(--easy-form-background), #f8f9fa);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
       transform: translateY(-2px);
     }
     input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
       outline: none;
       border-color: var(--easy-form-primary);
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15), 0 6px 16px rgba(0, 123, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
       transform: translateY(-3px);
     }
@@ -1134,14 +1137,14 @@ function getMantineStyles(_colors) {
     .easy-form-group {
       border: 1px solid #dee2e6;
       border-radius: 16px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
       padding: 1.5rem;
     }
     .easy-form-wizard-step {
       border: 1px solid #dee2e6;
       border-radius: 12px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
     }
@@ -1160,7 +1163,7 @@ function getMantineStyles(_colors) {
     .easy-form-array-item {
       border: 1px solid #dee2e6;
       border-radius: 12px;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
   `;
@@ -1168,7 +1171,7 @@ function getMantineStyles(_colors) {
 function getGlassStyles(_colors) {
   return `
     .easy-form-label {
-      color: rgba(255, 255, 255, 0.95);
+      color: var(--easy-form-label-color);
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.75rem;
@@ -1182,7 +1185,7 @@ function getGlassStyles(_colors) {
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       font-size: 0.875rem;
-      color: rgba(255, 255, 255, 0.95);
+      color: var(--easy-form-text);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
     }
@@ -1209,7 +1212,7 @@ function getGlassStyles(_colors) {
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       border: 2px solid rgba(255, 255, 255, 0.4);
-      color: rgba(255, 255, 255, 0.95);
+      color: var(--easy-form-text);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }
@@ -1238,7 +1241,7 @@ function getGlassStyles(_colors) {
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      color: rgba(255, 255, 255, 0.95);
+      color: var(--easy-form-text);
     }
     .easy-form-wizard-step:hover {
       background: rgba(255, 255, 255, 0.25);
@@ -1266,7 +1269,7 @@ function getGlassStyles(_colors) {
 function getBorderedStyles(_colors) {
   return `
     .easy-form-label {
-      color: #1a1a1a;
+      color: var(--easy-form-label-color);
       font-size: 0.875rem;
       font-weight: 700;
       margin-bottom: 0.75rem;
@@ -1277,7 +1280,8 @@ function getBorderedStyles(_colors) {
       border: 3px solid #1a1a1a;
       border-radius: 0;
       padding: 0.875rem 1.25rem;
-      background: #ffffff;
+      background: var(--easy-form-background);
+      color: var(--easy-form-text);
       font-size: 0.875rem;
       font-weight: 600;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -1318,14 +1322,14 @@ function getBorderedStyles(_colors) {
     .easy-form-group {
       border: 4px solid #1a1a1a;
       border-radius: 0;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
       padding: 2rem;
     }
     .easy-form-wizard-step {
       border: 3px solid #1a1a1a;
       border-radius: 0;
-      background: #ffffff;
+      background: var(--easy-form-background);
       font-weight: 600;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
@@ -1345,7 +1349,7 @@ function getBorderedStyles(_colors) {
     .easy-form-array-item {
       border: 3px solid #1a1a1a;
       border-radius: 0;
-      background: #ffffff;
+      background: var(--easy-form-background);
       box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
     }
   `;
@@ -1353,7 +1357,7 @@ function getBorderedStyles(_colors) {
 function getMinimalStyles(_colors) {
   return `
     .easy-form-label {
-      color: #6b7280;
+      color: var(--easy-form-label-color);
       font-size: 0.75rem;
       font-weight: 500;
       margin-bottom: 0.5rem;
@@ -1366,6 +1370,7 @@ function getMinimalStyles(_colors) {
       border-radius: 0;
       padding: 0.625rem 0;
       background: transparent;
+      color: var(--easy-form-text);
       font-size: 0.9375rem;
       font-weight: 300;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2014,6 +2019,26 @@ var StateManager = class {
     }
     return allFields;
   }
+  /**
+   * Encuentra el path completo de un campo dentro de grupos
+   */
+  findFieldPath(fieldName, fields, parentPath = "") {
+    for (const field of fields) {
+      const currentPath = parentPath ? `${parentPath}.${field.name}` : field.name;
+      if (field.name === fieldName) {
+        return currentPath;
+      }
+      if (field.type === "group" && "fields" in field) {
+        const found = this.findFieldPath(fieldName, field.fields, currentPath);
+        if (found) return found;
+      }
+      if (field.type === "row" && "fields" in field) {
+        const found = this.findFieldPath(fieldName, field.fields, currentPath);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
   /**
    * Construye el mapa de dependencias para optimizar re-evaluaciones
    */
@@ -2196,6 +2221,7 @@ var StateManager = class {
    */
   setValueWithoutValidation(fieldName, value) {
     setNestedValue(this.state.values, fieldName, value);
+    this.invalidateDependencyCache(fieldName);
   }
   /**
    * Valida un campo específico
@@ -2228,6 +2254,13 @@ var StateManager = class {
    */
   getActiveValidations(field) {
     let validations = [...field.validations || []];
+    const isRequired = this.getFieldRequired(field.name);
+    const hasRequiredValidation = validations.some((v) => v.type === "required");
+    if (isRequired && !hasRequiredValidation) {
+      validations = [{ type: "required" }, ...validations];
+    } else if (!isRequired && hasRequiredValidation) {
+      validations = validations.filter((v) => v.type !== "required");
+    }
     if (field.conditionalValidations) {
       for (const conditional of field.conditionalValidations) {
         const conditionMet = this.conditionEngine.evaluateConditions(
@@ -2360,13 +2393,41 @@ var StateManager = class {
     if (!this.schema) return true;
     const topLevelFields = this.schema.isWizard ? this.schema.steps.flatMap((step) => step.fields) : this.schema.fields || [];
     const allFields = this.extractAllFields(topLevelFields);
-    const field = allFields.find((f) => f.name === fieldName);
+    let field = allFields.find((f) => {
+      const fullPath = this.findFieldPath(f.name, topLevelFields);
+      return fullPath === fieldName || f.name === fieldName;
+    });
+    if (!field) {
+      field = allFields.find((f) => f.name === fieldName);
+    }
     if (!field || !field.dependencies) {
       return !field?.hidden;
     }
+    const fieldFullPath = this.findFieldPath(field.name, topLevelFields) || field.name;
+    const groupPath = fieldFullPath.includes(".") ? fieldFullPath.split(".").slice(0, -1).join(".") : "";
+    let valuesContext = { ...this.state.values };
+    if (groupPath && field.dependencies) {
+      const groupValues = getNestedValue(this.state.values, groupPath);
+      if (groupValues && typeof groupValues === "object") {
+        const createRelativeContext = (obj, prefix = "") => {
+          const result2 = {};
+          for (const [key, value] of Object.entries(obj)) {
+            const relativeKey = prefix ? `${prefix}.${key}` : key;
+            if (value && typeof value === "object" && !Array.isArray(value) && value !== null) {
+              Object.assign(result2, createRelativeContext(value, relativeKey));
+            } else {
+              result2[relativeKey] = value;
+            }
+          }
+          return result2;
+        };
+        const relativeContext = createRelativeContext(groupValues);
+        valuesContext = { ...this.state.values, ...relativeContext };
+      }
+    }
     const result = this.conditionEngine.evaluateDependencies(
       field.dependencies,
-      this.state.values
+      valuesContext
     );
     this.dependencyCache.set(fieldName, result);
     return result.visible && !field.hidden;
@@ -2441,7 +2502,15 @@ var BaseInput = class {
    */
   createFieldContainer(input) {
     const container = document.createElement("div");
-    container.className = "easy-form-field";
+    const inputClasses = Array.from(input.classList);
+    const componentContainerClasses = inputClasses.filter(
+      (cls) => cls.startsWith("easy-form-") && cls !== "easy-form-field" && (cls.includes("-container") || cls.includes("-wrapper"))
+    );
+    if (componentContainerClasses.length > 0) {
+      container.className = `easy-form-field ${componentContainerClasses.join(" ")}`;
+    } else {
+      container.className = "easy-form-field";
+    }
     if (this.field.label) {
       const label = document.createElement("label");
       label.className = "easy-form-label";
@@ -2688,7 +2757,18 @@ var MaskEngine = class {
       return value;
     }
     const customMask = this.getCustomMask(mask);
-    const unformatted = this.removeMask(value, mask);
+    const editableTokens = tokens.filter((t) => t.editable);
+    const acceptedTypes = new Set(editableTokens.map((t) => t.type));
+    let unformatted = "";
+    for (const char of value) {
+      if (acceptedTypes.has("any")) {
+        unformatted += char;
+      } else if (acceptedTypes.has("digit") && /\d/.test(char)) {
+        unformatted += char;
+      } else if (acceptedTypes.has("letter") && /[a-zA-Z]/.test(char)) {
+        unformatted += char;
+      }
+    }
     let formatted = formatValue(unformatted, tokens);
     if (customMask.transform) {
       formatted = customMask.transform(formatted);
@@ -2823,7 +2903,9 @@ var TextInput = class extends BaseInput {
     }
     input.value = displayValue;
     this.applyCommonProps(input);
-    if (this.maskEngine && this.field.mask && !this.field.placeholder) {
+    if (this.field.placeholder) {
+      input.placeholder = this.field.placeholder;
+    } else if (this.maskEngine && this.field.mask) {
       const maskPlaceholder = this.maskEngine.getMaskPlaceholder(this.field.mask);
       if (maskPlaceholder) {
         input.placeholder = maskPlaceholder;
@@ -2935,7 +3017,6 @@ var NumberInput = class extends BaseInput {
       input.type = "number";
       input.value = this.value ?? "";
     }
-    input.placeholder = this.field.placeholder || "";
     const numberField = this.field;
     if (!this.maskEngine && input.type === "number") {
       if (numberField.min !== void 0) {
@@ -2949,7 +3030,9 @@ var NumberInput = class extends BaseInput {
       }
     }
     this.applyCommonProps(input);
-    if (this.maskEngine && this.field.mask && !this.field.placeholder) {
+    if (this.field.placeholder) {
+      input.placeholder = this.field.placeholder;
+    } else if (this.maskEngine && this.field.mask) {
       const maskPlaceholder = this.maskEngine.getMaskPlaceholder(this.field.mask);
       if (maskPlaceholder) {
         input.placeholder = maskPlaceholder;