easy-forms-core 1.1.13 → 1.1.14

package/dist/easy-form.d.ts

@@ -273,6 +273,10 @@ interface GroupField extends BaseField {
     fields: Field[];
     /** Dirección del layout del grupo (override del formulario) */
     direction?: 'vertical' | 'horizontal';
+    /** Si true, el grupo se puede colapsar como acordeón */
+    collapsible?: boolean;
+    /** Si collapsible, estado inicial: true = abierto, false = cerrado (default: true) */
+    defaultOpen?: boolean;
 }
 /**
  * Campo row
@@ -369,6 +373,8 @@ interface FormColors {
     groupBackground?: string;
     /** Color del título .easy-form-group-label */
     groupTitle?: string;
+    /** Color del borde .easy-form-group */
+    groupBorder?: string;
 }
 /**
  * Template names available

package/dist/easy-form.js

@@ -240,7 +240,8 @@ var defaultColors = {
   border: "#ddd",
   background: "#ffffff",
   groupBackground: "#f8f9fa",
-  groupTitle: "#212529"
+  groupTitle: "#212529",
+  groupBorder: "#ddd"
 };
 function getColors(colors) {
   return { ...defaultColors, ...colors };
@@ -264,6 +265,7 @@ function getBaseStyles(colors) {
       --easy-form-background: ${colors.background};
       --easy-form-group-background: ${colors.groupBackground};
       --easy-form-group-title: ${colors.groupTitle};
+      --easy-form-group-border: ${colors.groupBorder};
     }
     .easy-form-field {
       margin-bottom: 1rem;
@@ -520,6 +522,8 @@ function getBaseStyles(colors) {
       padding: 1rem;
       margin-bottom: 1rem;
       background: var(--easy-form-group-background);
+      border: 1px solid var(--easy-form-group-border);
+      border-radius: 4px;
     }
     .easy-form-group-label {
       color: var(--easy-form-group-title);
@@ -528,6 +532,50 @@ function getBaseStyles(colors) {
       margin-bottom: 0.75rem;
       margin-top: 0;
     }
+    .easy-form-group-collapsible {
+      border: 1px solid var(--easy-form-group-border);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    .easy-form-group-collapsible .easy-form-group-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      background: var(--easy-form-group-background);
+      color: var(--easy-form-group-title);
+      font-weight: 600;
+      font-size: 1rem;
+      user-select: none;
+      transition: background-color 0.2s ease;
+    }
+    .easy-form-group-collapsible .easy-form-group-header:hover {
+      background: rgba(0, 0, 0, 0.03);
+    }
+    .easy-form-group-collapsible .easy-form-group-header:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--easy-form-primary);
+    }
+    .easy-form-group-collapsible .easy-form-group-chevron {
+      flex-shrink: 0;
+      margin-left: 0.5rem;
+      transition: transform 0.2s ease;
+      color: var(--easy-form-secondary);
+    }
+    .easy-form-group-collapsible.easy-form-group-collapsed .easy-form-group-chevron {
+      transform: rotate(-90deg); /* \u25BC \u2192 \u25B6 cuando colapsado */
+    }
+    .easy-form-group-collapsible .easy-form-group-content {
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+      padding: 0 1rem 1rem 1rem;
+    }
+    .easy-form-group-collapsible.easy-form-group-collapsed .easy-form-group-content {
+      max-height: 0 !important;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
     .easy-form-row {
       display: flex;
       flex-wrap: wrap;
@@ -1097,7 +1145,7 @@ function getPlanoStyles(_colors) {
     }
     .easy-form-group {
       border: none;
-      border-bottom: 1px solid var(--easy-form-border);
+      border-bottom: 1px solid var(--easy-form-group-border);
       border-radius: 0;
       background: transparent;
     }
@@ -1132,7 +1180,7 @@ function getTradicionalStyles(_colors) {
       font-weight: 500;
     }
     .easy-form-group {
-      border: 2px solid var(--easy-form-border);
+      border: 2px solid var(--easy-form-group-border);
       border-radius: 4px;
       background: var(--easy-form-group-background);
     }
@@ -1226,7 +1274,7 @@ function getRoundedShadowStyles(_colors) {
       transform: translateY(-2px);
     }
     .easy-form-group {
-      border: 1px solid var(--easy-form-border);
+      border: 1px solid var(--easy-form-group-border);
       border-radius: 16px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       background: var(--easy-form-group-background);
@@ -1280,7 +1328,7 @@ function getLinesStyles(_colors) {
     }
     .easy-form-group {
       border: none;
-      border-bottom: 2px solid var(--easy-form-border);
+      border-bottom: 2px solid var(--easy-form-group-border);
       border-radius: 0;
       padding-bottom: 1rem;
       background: transparent;
@@ -1358,7 +1406,7 @@ function getShadcnStyles(_colors) {
       box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
     }
     .easy-form-group {
-      border: 1.5px solid #e4e4e7;
+      border: 1.5px solid var(--easy-form-group-border);
       border-radius: 12px;
       background: var(--easy-form-group-background);
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -1455,7 +1503,7 @@ function getChakraStyles(_colors) {
       transform: none;
     }
     .easy-form-group {
-      border: 2px solid #e2e8f0;
+      border: 2px solid var(--easy-form-group-border);
       border-radius: 8px;
       background: var(--easy-form-group-background);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -1536,7 +1584,7 @@ function getMantineStyles(_colors) {
       box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
     }
     .easy-form-group {
-      border: 1px solid #dee2e6;
+      border: 1px solid var(--easy-form-group-border);
       border-radius: 16px;
       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);
@@ -1627,7 +1675,7 @@ function getGlassStyles(_colors) {
       transform: translateY(-1px) scale(0.98);
     }
     .easy-form-group {
-      border: 2px solid rgba(255, 255, 255, 0.4);
+      border: 2px solid var(--easy-form-group-border);
       border-radius: 20px;
       background: var(--easy-form-group-background);
       backdrop-filter: blur(20px) saturate(180%);
@@ -1721,7 +1769,7 @@ function getBorderedStyles(_colors) {
       box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
     }
     .easy-form-group {
-      border: 4px solid #1a1a1a;
+      border: 4px solid var(--easy-form-group-border);
       border-radius: 0;
       background: var(--easy-form-group-background);
       box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
@@ -1833,7 +1881,7 @@ function getMinimalStyles(_colors) {
     }
     .easy-form-group {
       border: none;
-      border-bottom: 1px solid #e5e7eb;
+      border-bottom: 1px solid var(--easy-form-group-border);
       border-radius: 0;
       background: transparent;
       padding-bottom: 2rem;
@@ -6395,21 +6443,84 @@ var EasyForm = class extends BrowserHTMLElement {
    * Renderiza un grupo de campos
    */
   renderGroup(field) {
-    const groupContainer = document.createElement("div");
     const groupField = field;
     const dir = groupField.direction ?? "vertical";
+    const collapsible = groupField.collapsible === true;
+    const defaultOpen = groupField.defaultOpen !== false;
+    const groupContainer = document.createElement("div");
     groupContainer.className = `easy-form-group easy-form-direction-${dir}`;
-    if (field.label) {
-      const label = document.createElement("h3");
-      label.className = "easy-form-group-label";
-      label.textContent = field.label;
-      groupContainer.appendChild(label);
-    }
-    if ("fields" in field && field.fields) {
-      for (const subField of field.fields) {
-        const fieldElement = this.renderField(subField);
-        if (fieldElement) {
-          groupContainer.appendChild(fieldElement);
+    if (collapsible) {
+      groupContainer.classList.add("easy-form-group-collapsible");
+      if (!defaultOpen) {
+        groupContainer.classList.add("easy-form-group-collapsed");
+      }
+      const header = document.createElement("button");
+      header.type = "button";
+      header.className = "easy-form-group-header";
+      header.setAttribute("aria-expanded", String(defaultOpen));
+      const groupContentId = `easy-form-group-${(field.name || "group").replace(/[^a-z0-9]/gi, "-")}-content`;
+      header.setAttribute("aria-controls", groupContentId);
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = field.label || "Grupo";
+      const chevron = document.createElement("span");
+      chevron.className = "easy-form-group-chevron";
+      chevron.setAttribute("aria-hidden", "true");
+      chevron.textContent = "\u25BC";
+      header.appendChild(labelSpan);
+      header.appendChild(chevron);
+      groupContainer.appendChild(header);
+      const content = document.createElement("div");
+      content.id = groupContentId;
+      content.className = "easy-form-group-content";
+      if ("fields" in field && field.fields) {
+        for (const subField of field.fields) {
+          const fieldElement = this.renderField(subField);
+          if (fieldElement) {
+            content.appendChild(fieldElement);
+          }
+        }
+      }
+      groupContainer.appendChild(content);
+      const setContentHeight = (open) => {
+        if (open) {
+          content.style.maxHeight = content.scrollHeight + "px";
+        } else {
+          content.style.maxHeight = "0";
+        }
+      };
+      if (defaultOpen) {
+        requestAnimationFrame(() => setContentHeight(true));
+      } else {
+        content.style.maxHeight = "0";
+      }
+      header.addEventListener("click", () => {
+        const isCollapsed = groupContainer.classList.contains("easy-form-group-collapsed");
+        if (isCollapsed) {
+          groupContainer.classList.remove("easy-form-group-collapsed");
+          header.setAttribute("aria-expanded", "true");
+          setContentHeight(true);
+        } else {
+          content.style.maxHeight = content.scrollHeight + "px";
+          requestAnimationFrame(() => {
+            groupContainer.classList.add("easy-form-group-collapsed");
+            header.setAttribute("aria-expanded", "false");
+            setContentHeight(false);
+          });
+        }
+      });
+    } else {
+      if (field.label) {
+        const label = document.createElement("h3");
+        label.className = "easy-form-group-label";
+        label.textContent = field.label;
+        groupContainer.appendChild(label);
+      }
+      if ("fields" in field && field.fields) {
+        for (const subField of field.fields) {
+          const fieldElement = this.renderField(subField);
+          if (fieldElement) {
+            groupContainer.appendChild(fieldElement);
+          }
         }
       }
     }