easy-forms-core 1.1.12 → 1.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/easy-form.d.ts +4 -0
  2. package/dist/easy-form.js +23 -9
  3. package/dist/easy-form.js.map +1 -1
  4. package/dist/index.d.ts +4 -0
  5. package/dist/index.js +23 -9
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/easy-form.d.ts CHANGED
@@ -365,6 +365,10 @@ interface FormColors {
365
365
  labelColor?: string;
366
366
  border?: string;
367
367
  background?: string;
368
+ /** Fondo del contenedor .easy-form-group */
369
+ groupBackground?: string;
370
+ /** Color del título .easy-form-group-label */
371
+ groupTitle?: string;
368
372
  }
369
373
  /**
370
374
  * Template names available
package/dist/easy-form.js CHANGED
@@ -238,7 +238,9 @@ var defaultColors = {
238
238
  text: "#212529",
239
239
  labelColor: "#212529",
240
240
  border: "#ddd",
241
- background: "#ffffff"
241
+ background: "#ffffff",
242
+ groupBackground: "#f8f9fa",
243
+ groupTitle: "#212529"
242
244
  };
243
245
  function getColors(colors) {
244
246
  return { ...defaultColors, ...colors };
@@ -260,6 +262,8 @@ function getBaseStyles(colors) {
260
262
  --easy-form-label-color: ${colors.labelColor};
261
263
  --easy-form-border: ${colors.border};
262
264
  --easy-form-background: ${colors.background};
265
+ --easy-form-group-background: ${colors.groupBackground};
266
+ --easy-form-group-title: ${colors.groupTitle};
263
267
  }
264
268
  .easy-form-field {
265
269
  margin-bottom: 1rem;
@@ -515,6 +519,14 @@ function getBaseStyles(colors) {
515
519
  .easy-form-group {
516
520
  padding: 1rem;
517
521
  margin-bottom: 1rem;
522
+ background: var(--easy-form-group-background);
523
+ }
524
+ .easy-form-group-label {
525
+ color: var(--easy-form-group-title);
526
+ font-weight: 600;
527
+ font-size: 1rem;
528
+ margin-bottom: 0.75rem;
529
+ margin-top: 0;
518
530
  }
519
531
  .easy-form-row {
520
532
  display: flex;
@@ -1087,6 +1099,7 @@ function getPlanoStyles(_colors) {
1087
1099
  border: none;
1088
1100
  border-bottom: 1px solid var(--easy-form-border);
1089
1101
  border-radius: 0;
1102
+ background: transparent;
1090
1103
  }
1091
1104
  .easy-form-wizard-step {
1092
1105
  border: none;
@@ -1121,7 +1134,7 @@ function getTradicionalStyles(_colors) {
1121
1134
  .easy-form-group {
1122
1135
  border: 2px solid var(--easy-form-border);
1123
1136
  border-radius: 4px;
1124
- background: #f8f9fa;
1137
+ background: var(--easy-form-group-background);
1125
1138
  }
1126
1139
  .easy-form-wizard-step {
1127
1140
  border: 2px solid var(--easy-form-border);
@@ -1171,7 +1184,7 @@ function getMaterialStyles(_colors) {
1171
1184
  .easy-form-group {
1172
1185
  border: none;
1173
1186
  border-radius: 4px;
1174
- background: #f5f5f5;
1187
+ background: var(--easy-form-group-background);
1175
1188
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
1176
1189
  }
1177
1190
  .easy-form-wizard-step {
@@ -1216,7 +1229,7 @@ function getRoundedShadowStyles(_colors) {
1216
1229
  border: 1px solid var(--easy-form-border);
1217
1230
  border-radius: 16px;
1218
1231
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1219
- background: var(--easy-form-background);
1232
+ background: var(--easy-form-group-background);
1220
1233
  }
1221
1234
  .easy-form-wizard-step {
1222
1235
  border: 1px solid var(--easy-form-border);
@@ -1270,6 +1283,7 @@ function getLinesStyles(_colors) {
1270
1283
  border-bottom: 2px solid var(--easy-form-border);
1271
1284
  border-radius: 0;
1272
1285
  padding-bottom: 1rem;
1286
+ background: transparent;
1273
1287
  }
1274
1288
  .easy-form-wizard-step {
1275
1289
  border: none;
@@ -1346,7 +1360,7 @@ function getShadcnStyles(_colors) {
1346
1360
  .easy-form-group {
1347
1361
  border: 1.5px solid #e4e4e7;
1348
1362
  border-radius: 12px;
1349
- background: linear-gradient(to bottom, var(--easy-form-background), #fafafa);
1363
+ background: var(--easy-form-group-background);
1350
1364
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1351
1365
  padding: 1.5rem;
1352
1366
  }
@@ -1443,7 +1457,7 @@ function getChakraStyles(_colors) {
1443
1457
  .easy-form-group {
1444
1458
  border: 2px solid #e2e8f0;
1445
1459
  border-radius: 8px;
1446
- background: var(--easy-form-background);
1460
+ background: var(--easy-form-group-background);
1447
1461
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1448
1462
  }
1449
1463
  .easy-form-wizard-step {
@@ -1524,7 +1538,7 @@ function getMantineStyles(_colors) {
1524
1538
  .easy-form-group {
1525
1539
  border: 1px solid #dee2e6;
1526
1540
  border-radius: 16px;
1527
- background: var(--easy-form-background);
1541
+ background: var(--easy-form-group-background);
1528
1542
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
1529
1543
  padding: 1.5rem;
1530
1544
  }
@@ -1615,7 +1629,7 @@ function getGlassStyles(_colors) {
1615
1629
  .easy-form-group {
1616
1630
  border: 2px solid rgba(255, 255, 255, 0.4);
1617
1631
  border-radius: 20px;
1618
- background: rgba(255, 255, 255, 0.15);
1632
+ background: var(--easy-form-group-background);
1619
1633
  backdrop-filter: blur(20px) saturate(180%);
1620
1634
  -webkit-backdrop-filter: blur(20px) saturate(180%);
1621
1635
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
@@ -1709,7 +1723,7 @@ function getBorderedStyles(_colors) {
1709
1723
  .easy-form-group {
1710
1724
  border: 4px solid #1a1a1a;
1711
1725
  border-radius: 0;
1712
- background: var(--easy-form-background);
1726
+ background: var(--easy-form-group-background);
1713
1727
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
1714
1728
  padding: 2rem;
1715
1729
  }