easy-forms-core 1.0.3 → 1.0.5

package/README.md

@@ -59,6 +59,55 @@ form.addEventListener('submit', (event) => {
 })
 ```
 
+### Con Rows y Datos Iniciales
+
+```html
+<easy-form 
+  id="form"
+  initialData='{"firstName": "Juan", "lastName": "Pérez", "email": "juan@example.com"}'>
+</easy-form>
+```
+
+```javascript
+import 'easy-forms-core'
+
+const form = document.querySelector('#form')
+
+form.schema = {
+  fields: [
+    {
+      type: 'row',
+      name: 'nameRow',
+      fields: [
+        {
+          type: 'text',
+          name: 'firstName',
+          label: 'Nombre',
+          validations: [{ type: 'required' }]
+        },
+        {
+          type: 'text',
+          name: 'lastName',
+          label: 'Apellido',
+          validations: [{ type: 'required' }]
+        }
+      ],
+      gap: '1rem',
+      align: 'stretch'
+    },
+    {
+      type: 'email',
+      name: 'email',
+      label: 'Email',
+      validations: [
+        { type: 'required' },
+        { type: 'email' }
+      ]
+    }
+  ]
+}
+```
+
 ### React
 
 ```tsx
@@ -104,6 +153,8 @@ const schema = {
 - Steps / wizard forms
 - Formularios anidados
 - Arrays dinámicos
+- **Rows (filas horizontales)** - Agrupa campos en filas
+- **Datos iniciales** - Carga valores iniciales desde datos externos
 - Componentes visuales personalizables
 - Eventos de submit, change y error
 - Testing friendly

package/dist/easy-form.d.ts

@@ -247,6 +247,7 @@ interface FormColors {
     error?: string;
     success?: string;
     text?: string;
+    labelColor?: string;
     border?: string;
     background?: string;
 }

package/dist/easy-form.js

@@ -168,6 +168,7 @@ var defaultColors = {
   error: "#dc3545",
   success: "#28a745",
   text: "#212529",
+  labelColor: "#212529",
   border: "#ddd",
   background: "#ffffff"
 };
@@ -188,6 +189,7 @@ function getBaseStyles(colors) {
       --easy-form-error: ${colors.error};
       --easy-form-success: ${colors.success};
       --easy-form-text: ${colors.text};
+      --easy-form-label-color: ${colors.labelColor};
       --easy-form-border: ${colors.border};
       --easy-form-background: ${colors.background};
     }
@@ -198,7 +200,7 @@ function getBaseStyles(colors) {
       display: block;
       margin-bottom: 0.5rem;
       font-weight: 500;
-      color: var(--easy-form-text);
+      color: var(--easy-form-label-color);
     }
     .easy-form-required {
       color: var(--easy-form-error);
@@ -303,7 +305,7 @@ function getBaseStyles(colors) {
     .easy-form-radio-label {
       cursor: pointer;
       user-select: none;
-      color: var(--easy-form-text);
+      color: var(--easy-form-label-color);
       font-weight: 400;
     }
     .easy-form-label-checkbox,
@@ -316,7 +318,7 @@ function getBaseStyles(colors) {
       padding: 0.5rem;
       border-radius: 6px;
       transition: background-color 0.2s ease;
-      color: var(--easy-form-text);
+      color: var(--easy-form-label-color);
     }
     .easy-form-label-checkbox input[type="checkbox"],
     .easy-form-label-switch input[type="checkbox"] {
@@ -390,6 +392,9 @@ function getThemeSpecificStyles(theme, colors) {
 }
 function getPlanoStyles(_colors) {
   return `
+    .easy-form-label {
+      color: var(--easy-form-label-color);
+    }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       border: none;
       border-bottom: 2px solid var(--easy-form-border);
@@ -422,6 +427,9 @@ function getPlanoStyles(_colors) {
 }
 function getTradicionalStyles(_colors) {
   return `
+    .easy-form-label {
+      color: var(--easy-form-label-color);
+    }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       border: 2px solid var(--easy-form-border);
       border-radius: 4px;
@@ -461,7 +469,7 @@ function getMaterialStyles(_colors) {
       font-size: 0.875rem;
       font-weight: 500;
       margin-bottom: 0.25rem;
-      color: rgba(0, 0, 0, 0.6);
+      color: var(--easy-form-label-color);
     }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       border: none;
@@ -506,6 +514,9 @@ function getMaterialStyles(_colors) {
 }
 function getRoundedShadowStyles(_colors) {
   return `
+    .easy-form-label {
+      color: var(--easy-form-label-color);
+    }
     input:not([type="checkbox"]):not([type="radio"]), textarea, select {
       border: 1px solid var(--easy-form-border);
       border-radius: 12px;