easy-forms-core 1.1.11 → 1.1.13

package/dist/easy-form.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tipos de campos soportados
  */
-type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom' | 'quantity' | 'accordion-select' | 'image-grid-select' | 'otp' | 'file-drop' | 'map' | 'rating' | 'slider';
+type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom' | 'quantity' | 'accordion-select' | 'image-grid-select' | 'otp' | 'file-drop' | 'map' | 'rating' | 'slider' | 'colorpicker';
 /**
  * Tipos de validaciones soportadas
  */
@@ -248,6 +248,14 @@ interface SliderField extends BaseField {
     step?: number;
     showValue?: boolean;
 }
+/**
+ * Campo colorpicker (selección de color hex)
+ */
+interface ColorpickerField extends BaseField {
+    type: 'colorpicker';
+    /** Valor por defecto en hex (ej. #6366f1). Default: #000000 */
+    defaultValue?: string;
+}
 /**
  * Campo array
  */
@@ -332,7 +340,7 @@ interface OTPField extends BaseField {
 /**
  * Unión de todos los tipos de campos
  */
-type Field = TextField | PasswordField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | FileDropField | MapField | RatingField | SliderField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
+type Field = TextField | PasswordField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | FileDropField | MapField | RatingField | SliderField | ColorpickerField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
 /**
  * Step para formularios wizard
  */
@@ -357,6 +365,10 @@ interface FormColors {
     labelColor?: string;
     border?: string;
     background?: string;
+    /** Fondo del contenedor .easy-form-group */
+    groupBackground?: string;
+    /** Color del título .easy-form-group-label */
+    groupTitle?: string;
 }
 /**
  * Template names available

package/dist/easy-form.js

@@ -63,6 +63,7 @@ var SchemaParser = class {
       "map",
       "rating",
       "slider",
+      "colorpicker",
       "array",
       "group",
       "row",
@@ -109,6 +110,16 @@ var SchemaParser = class {
           );
         }
         break;
+      case "colorpicker":
+        if ("defaultValue" in field && field.defaultValue != null) {
+          const hex = /^#[0-9A-Fa-f]{6}$/;
+          if (!hex.test(String(field.defaultValue))) {
+            throw new Error(
+              `Field "${field.name}" de tipo colorpicker debe tener defaultValue en formato hex (#RRGGBB)`
+            );
+          }
+        }
+        break;
     }
   }
   /**
@@ -178,6 +189,11 @@ var SchemaParser = class {
           defaults.max = 5;
         }
         break;
+      case "colorpicker":
+        if (!("defaultValue" in field) || field.defaultValue == null) {
+          defaults.defaultValue = "#000000";
+        }
+        break;
     }
     return { ...defaults, ...field };
   }
@@ -222,7 +238,9 @@ var defaultColors = {
   text: "#212529",
   labelColor: "#212529",
   border: "#ddd",
-  background: "#ffffff"
+  background: "#ffffff",
+  groupBackground: "#f8f9fa",
+  groupTitle: "#212529"
 };
 function getColors(colors) {
   return { ...defaultColors, ...colors };
@@ -244,6 +262,8 @@ function getBaseStyles(colors) {
       --easy-form-label-color: ${colors.labelColor};
       --easy-form-border: ${colors.border};
       --easy-form-background: ${colors.background};
+      --easy-form-group-background: ${colors.groupBackground};
+      --easy-form-group-title: ${colors.groupTitle};
     }
     .easy-form-field {
       margin-bottom: 1rem;
@@ -311,6 +331,46 @@ function getBaseStyles(colors) {
       min-width: 2rem;
       font-weight: 500;
     }
+    .easy-form-color-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .easy-form-color-wrapper input[type="color"] {
+      width: 2.2rem;
+      height: 2.2rem;
+      min-width: 2.2rem;
+      min-height: 2.2rem;
+      padding: 0 !important;
+      margin: 0;
+      cursor: pointer;
+      border: 1px solid var(--easy-form-border);
+      border-radius: 2px;
+      background: transparent;
+      flex-shrink: 0;
+    }
+    .easy-form-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+    .easy-form-color-wrapper input[type="color"]::-webkit-color-swatch {
+      border: none;
+      border-radius: 1px;
+    }
+    .easy-form-color-wrapper input[type="color"]::-moz-color-swatch {
+      border: none;
+      border-radius: 1px;
+    }
+    .easy-form-color-text {
+      flex: 1;
+      min-width: 0;
+      color: var(--easy-form-text);
+      background: var(--easy-form-background);
+      border: 1px solid var(--easy-form-border);
+      border-radius: 4px;
+      padding: 0.5rem 0.75rem;
+      font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
+      font-size: 0.875rem;
+    }
     .easy-form-rating {
       display: inline-flex;
       gap: 0.25rem;
@@ -431,7 +491,7 @@ function getBaseStyles(colors) {
     .easy-form-submit-wrapper .easy-form-submit {
       min-width: 100px;
     }
-    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
+    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select {
       width: 100%;
       padding: 0.5rem;
       font-size: 1rem;
@@ -459,6 +519,14 @@ function getBaseStyles(colors) {
     .easy-form-group {
       padding: 1rem;
       margin-bottom: 1rem;
+      background: var(--easy-form-group-background);
+    }
+    .easy-form-group-label {
+      color: var(--easy-form-group-title);
+      font-weight: 600;
+      font-size: 1rem;
+      margin-bottom: 0.75rem;
+      margin-top: 0;
     }
     .easy-form-row {
       display: flex;
@@ -1031,6 +1099,7 @@ function getPlanoStyles(_colors) {
       border: none;
       border-bottom: 1px solid var(--easy-form-border);
       border-radius: 0;
+      background: transparent;
     }
     .easy-form-wizard-step {
       border: none;
@@ -1065,7 +1134,7 @@ function getTradicionalStyles(_colors) {
     .easy-form-group {
       border: 2px solid var(--easy-form-border);
       border-radius: 4px;
-      background: #f8f9fa;
+      background: var(--easy-form-group-background);
     }
     .easy-form-wizard-step {
       border: 2px solid var(--easy-form-border);
@@ -1115,7 +1184,7 @@ function getMaterialStyles(_colors) {
     .easy-form-group {
       border: none;
       border-radius: 4px;
-      background: #f5f5f5;
+      background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
     }
     .easy-form-wizard-step {
@@ -1160,7 +1229,7 @@ function getRoundedShadowStyles(_colors) {
       border: 1px solid var(--easy-form-border);
       border-radius: 16px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
     }
     .easy-form-wizard-step {
       border: 1px solid var(--easy-form-border);
@@ -1214,6 +1283,7 @@ function getLinesStyles(_colors) {
       border-bottom: 2px solid var(--easy-form-border);
       border-radius: 0;
       padding-bottom: 1rem;
+      background: transparent;
     }
     .easy-form-wizard-step {
       border: none;
@@ -1290,7 +1360,7 @@ function getShadcnStyles(_colors) {
     .easy-form-group {
       border: 1.5px solid #e4e4e7;
       border-radius: 12px;
-      background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
+      background: var(--easy-form-group-background);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       padding: 1.5rem;
     }
@@ -1387,7 +1457,7 @@ function getChakraStyles(_colors) {
     .easy-form-group {
       border: 2px solid #e2e8f0;
       border-radius: 8px;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .easy-form-wizard-step {
@@ -1468,7 +1538,7 @@ function getMantineStyles(_colors) {
     .easy-form-group {
       border: 1px solid #dee2e6;
       border-radius: 16px;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-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;
     }
@@ -1559,7 +1629,7 @@ function getGlassStyles(_colors) {
     .easy-form-group {
       border: 2px solid rgba(255, 255, 255, 0.4);
       border-radius: 20px;
-      background: rgba(255, 255, 255, 0.15);
+      background: var(--easy-form-group-background);
       backdrop-filter: blur(20px) saturate(180%);
       -webkit-backdrop-filter: blur(20px) saturate(180%);
       box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -1653,7 +1723,7 @@ function getBorderedStyles(_colors) {
     .easy-form-group {
       border: 4px solid #1a1a1a;
       border-radius: 0;
-      background: var(--easy-form-background);
+      background: var(--easy-form-group-background);
       box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
       padding: 2rem;
     }
@@ -2696,6 +2766,9 @@ var StateManager = class {
             }
           }
           break;
+        case "colorpicker":
+          values[field.name] = field.defaultValue ?? "#000000";
+          break;
         default:
           values[field.name] = null;
       }
@@ -4934,6 +5007,66 @@ var SliderInput = class extends BaseInput {
   }
 };
 
+// src/components/inputs/color-input.ts
+var HEX_REGEX = /^#?([0-9A-Fa-f]{6})$/;
+function toHex(value) {
+  const m = value.match(HEX_REGEX);
+  if (m) return `#${m[1].toLowerCase()}`;
+  if (/^[0-9A-Fa-f]{6}$/.test(value)) return `#${value.toLowerCase()}`;
+  return "#000000";
+}
+var ColorInput = class extends BaseInput {
+  render() {
+    const colorField = this.field;
+    const defaultValue = colorField.defaultValue ?? "#000000";
+    const currentValue = this.value != null && typeof this.value === "string" ? toHex(this.value) : defaultValue;
+    const wrapper = document.createElement("div");
+    wrapper.className = "easy-form-color-wrapper";
+    const colorPicker = document.createElement("input");
+    colorPicker.type = "color";
+    colorPicker.value = currentValue;
+    colorPicker.setAttribute("value", currentValue);
+    colorPicker.setAttribute("aria-label", this.field.label || "Color");
+    colorPicker.id = `${this.getFieldId()}-picker`;
+    if (this.field.disabled) colorPicker.setAttribute("disabled", "true");
+    const textInput = document.createElement("input");
+    textInput.type = "text";
+    textInput.value = currentValue;
+    textInput.setAttribute("aria-label", `${this.field.label || "Color"} (hex)`);
+    textInput.placeholder = "#000000";
+    textInput.className = "easy-form-color-text";
+    this.applyCommonProps(textInput);
+    const syncFromPicker = () => {
+      const value = colorPicker.value || "#000000";
+      const hex = toHex(value);
+      textInput.value = hex;
+      this.onChange(hex);
+    };
+    const syncFromText = () => {
+      const raw = textInput.value.trim();
+      const value = raw.startsWith("#") ? raw : `#${raw}`;
+      if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+        const hex = toHex(value);
+        colorPicker.value = hex;
+        this.onChange(hex);
+      }
+    };
+    colorPicker.addEventListener("input", syncFromPicker);
+    colorPicker.addEventListener("change", () => {
+      syncFromPicker();
+      this.onBlur();
+    });
+    textInput.addEventListener("input", syncFromText);
+    textInput.addEventListener("blur", () => {
+      syncFromText();
+      this.onBlur();
+    });
+    wrapper.appendChild(colorPicker);
+    wrapper.appendChild(textInput);
+    return this.createFieldContainer(wrapper);
+  }
+};
+
 // src/components/inputs/index.ts
 function createInput(field, value, error, onChange, onBlur) {
   switch (field.type) {
@@ -4966,6 +5099,8 @@ function createInput(field, value, error, onChange, onBlur) {
       return new RatingInput(field, value, error, onChange, onBlur).render();
     case "slider":
       return new SliderInput(field, value, error, onChange, onBlur).render();
+    case "colorpicker":
+      return new ColorInput(field, value, error, onChange, onBlur).render();
     case "quantity":
       return new QuantityInput(field, value, error, onChange, onBlur).render();
     case "accordion-select":