easy-forms-core 1.0.8 → 1.0.10
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.
- package/dist/easy-form.d.ts +45 -1
- package/dist/easy-form.js +688 -1
- package/dist/easy-form.js.map +1 -1
- package/dist/index.d.ts +45 -1
- package/dist/index.js +688 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/easy-form.js
CHANGED
|
@@ -662,6 +662,18 @@ function getThemeSpecificStyles(theme, colors) {
|
|
|
662
662
|
return getRoundedShadowStyles(colors);
|
|
663
663
|
case "lines":
|
|
664
664
|
return getLinesStyles(colors);
|
|
665
|
+
case "shadcn":
|
|
666
|
+
return getShadcnStyles(colors);
|
|
667
|
+
case "chakra":
|
|
668
|
+
return getChakraStyles(colors);
|
|
669
|
+
case "mantine":
|
|
670
|
+
return getMantineStyles(colors);
|
|
671
|
+
case "glass":
|
|
672
|
+
return getGlassStyles(colors);
|
|
673
|
+
case "bordered":
|
|
674
|
+
return getBorderedStyles(colors);
|
|
675
|
+
case "minimal":
|
|
676
|
+
return getMinimalStyles(colors);
|
|
665
677
|
default:
|
|
666
678
|
return getPlanoStyles(colors);
|
|
667
679
|
}
|
|
@@ -895,6 +907,579 @@ function getLinesStyles(_colors) {
|
|
|
895
907
|
}
|
|
896
908
|
`;
|
|
897
909
|
}
|
|
910
|
+
function getShadcnStyles(_colors) {
|
|
911
|
+
return `
|
|
912
|
+
.easy-form-label {
|
|
913
|
+
color: #1a1a1a;
|
|
914
|
+
font-size: 0.875rem;
|
|
915
|
+
font-weight: 600;
|
|
916
|
+
margin-bottom: 0.75rem;
|
|
917
|
+
letter-spacing: -0.01em;
|
|
918
|
+
}
|
|
919
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
920
|
+
border: 1.5px solid #e4e4e7;
|
|
921
|
+
border-radius: 8px;
|
|
922
|
+
padding: 0.75rem 1rem;
|
|
923
|
+
background: linear-gradient(to bottom, #ffffff, #fafafa);
|
|
924
|
+
font-size: 0.875rem;
|
|
925
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
926
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8);
|
|
927
|
+
}
|
|
928
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
929
|
+
border-color: #d4d4d8;
|
|
930
|
+
background: linear-gradient(to bottom, #ffffff, #f5f5f5);
|
|
931
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
|
|
932
|
+
transform: translateY(-1px);
|
|
933
|
+
}
|
|
934
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
935
|
+
outline: none;
|
|
936
|
+
border-color: var(--easy-form-primary);
|
|
937
|
+
background: #ffffff;
|
|
938
|
+
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.12), 0 4px 12px rgba(0, 123, 255, 0.15);
|
|
939
|
+
transform: translateY(-2px);
|
|
940
|
+
}
|
|
941
|
+
.easy-form-submit {
|
|
942
|
+
border-radius: 8px;
|
|
943
|
+
font-weight: 600;
|
|
944
|
+
background: linear-gradient(135deg, var(--easy-form-primary) 0%, #0056b3 100%);
|
|
945
|
+
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
946
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
947
|
+
letter-spacing: 0.01em;
|
|
948
|
+
}
|
|
949
|
+
.easy-form-submit:hover {
|
|
950
|
+
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
951
|
+
transform: translateY(-2px);
|
|
952
|
+
background: linear-gradient(135deg, #0056b3 0%, var(--easy-form-primary) 100%);
|
|
953
|
+
}
|
|
954
|
+
.easy-form-submit:active {
|
|
955
|
+
transform: translateY(0);
|
|
956
|
+
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
|
|
957
|
+
}
|
|
958
|
+
.easy-form-group {
|
|
959
|
+
border: 1.5px solid #e4e4e7;
|
|
960
|
+
border-radius: 12px;
|
|
961
|
+
background: linear-gradient(to bottom, #ffffff, #fafafa);
|
|
962
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
963
|
+
padding: 1.5rem;
|
|
964
|
+
}
|
|
965
|
+
.easy-form-wizard-step {
|
|
966
|
+
border: 1.5px solid #e4e4e7;
|
|
967
|
+
border-radius: 8px;
|
|
968
|
+
background: linear-gradient(to bottom, #ffffff, #fafafa);
|
|
969
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
970
|
+
}
|
|
971
|
+
.easy-form-wizard-step:hover {
|
|
972
|
+
border-color: #d4d4d8;
|
|
973
|
+
transform: translateY(-2px);
|
|
974
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
975
|
+
}
|
|
976
|
+
.easy-form-wizard-step.active {
|
|
977
|
+
border-color: var(--easy-form-primary);
|
|
978
|
+
background: linear-gradient(135deg, var(--easy-form-primary) 0%, #0056b3 100%);
|
|
979
|
+
color: white;
|
|
980
|
+
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
|
981
|
+
transform: translateY(-2px);
|
|
982
|
+
}
|
|
983
|
+
.easy-form-array-item {
|
|
984
|
+
border: 1.5px solid #e4e4e7;
|
|
985
|
+
border-radius: 8px;
|
|
986
|
+
background: linear-gradient(to bottom, #ffffff, #fafafa);
|
|
987
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
988
|
+
}
|
|
989
|
+
`;
|
|
990
|
+
}
|
|
991
|
+
function getChakraStyles(_colors) {
|
|
992
|
+
return `
|
|
993
|
+
.easy-form-label {
|
|
994
|
+
color: #2d3748;
|
|
995
|
+
font-size: 0.875rem;
|
|
996
|
+
font-weight: 600;
|
|
997
|
+
margin-bottom: 0.5rem;
|
|
998
|
+
text-transform: uppercase;
|
|
999
|
+
letter-spacing: 0.05em;
|
|
1000
|
+
font-size: 0.75rem;
|
|
1001
|
+
}
|
|
1002
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
1003
|
+
border: 2px solid #cbd5e0;
|
|
1004
|
+
border-radius: 6px;
|
|
1005
|
+
padding: 0.625rem 0.875rem;
|
|
1006
|
+
background: #ffffff;
|
|
1007
|
+
font-size: 0.875rem;
|
|
1008
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1009
|
+
font-weight: 500;
|
|
1010
|
+
}
|
|
1011
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
1012
|
+
border-color: var(--easy-form-primary);
|
|
1013
|
+
background: #f7fafc;
|
|
1014
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
|
1015
|
+
transform: scale(1.02);
|
|
1016
|
+
}
|
|
1017
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
1018
|
+
outline: none;
|
|
1019
|
+
border-color: var(--easy-form-primary);
|
|
1020
|
+
border-width: 2px;
|
|
1021
|
+
background: #ffffff;
|
|
1022
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2), 0 4px 12px rgba(0, 123, 255, 0.15);
|
|
1023
|
+
transform: scale(1.02);
|
|
1024
|
+
}
|
|
1025
|
+
input:not([type="checkbox"]):not([type="radio"]):disabled, textarea:disabled, select:disabled {
|
|
1026
|
+
background: #edf2f7;
|
|
1027
|
+
border-color: #e2e8f0;
|
|
1028
|
+
cursor: not-allowed;
|
|
1029
|
+
opacity: 0.6;
|
|
1030
|
+
}
|
|
1031
|
+
.easy-form-submit {
|
|
1032
|
+
border-radius: 6px;
|
|
1033
|
+
font-weight: 600;
|
|
1034
|
+
background: var(--easy-form-primary);
|
|
1035
|
+
text-transform: uppercase;
|
|
1036
|
+
letter-spacing: 0.05em;
|
|
1037
|
+
font-size: 0.875rem;
|
|
1038
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1039
|
+
box-shadow: 0 4px 6px rgba(0, 123, 255, 0.25);
|
|
1040
|
+
}
|
|
1041
|
+
.easy-form-submit:hover {
|
|
1042
|
+
background: #0056b3;
|
|
1043
|
+
box-shadow: 0 6px 12px rgba(0, 123, 255, 0.35);
|
|
1044
|
+
transform: translateY(-2px) scale(1.02);
|
|
1045
|
+
}
|
|
1046
|
+
.easy-form-submit:active {
|
|
1047
|
+
transform: translateY(0) scale(0.98);
|
|
1048
|
+
}
|
|
1049
|
+
.easy-form-submit:disabled {
|
|
1050
|
+
opacity: 0.4;
|
|
1051
|
+
cursor: not-allowed;
|
|
1052
|
+
transform: none;
|
|
1053
|
+
}
|
|
1054
|
+
.easy-form-group {
|
|
1055
|
+
border: 2px solid #e2e8f0;
|
|
1056
|
+
border-radius: 8px;
|
|
1057
|
+
background: #ffffff;
|
|
1058
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
1059
|
+
}
|
|
1060
|
+
.easy-form-wizard-step {
|
|
1061
|
+
border: 2px solid #e2e8f0;
|
|
1062
|
+
border-radius: 6px;
|
|
1063
|
+
background: #ffffff;
|
|
1064
|
+
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1065
|
+
}
|
|
1066
|
+
.easy-form-wizard-step:hover {
|
|
1067
|
+
border-color: var(--easy-form-primary);
|
|
1068
|
+
transform: scale(1.05);
|
|
1069
|
+
}
|
|
1070
|
+
.easy-form-wizard-step.active {
|
|
1071
|
+
border-color: var(--easy-form-primary);
|
|
1072
|
+
background: var(--easy-form-primary);
|
|
1073
|
+
color: white;
|
|
1074
|
+
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
|
|
1075
|
+
transform: scale(1.05);
|
|
1076
|
+
}
|
|
1077
|
+
.easy-form-array-item {
|
|
1078
|
+
border: 2px solid #e2e8f0;
|
|
1079
|
+
border-radius: 6px;
|
|
1080
|
+
background: #ffffff;
|
|
1081
|
+
transition: all 0.25s ease;
|
|
1082
|
+
}
|
|
1083
|
+
.easy-form-array-item:hover {
|
|
1084
|
+
border-color: var(--easy-form-primary);
|
|
1085
|
+
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
|
|
1086
|
+
}
|
|
1087
|
+
`;
|
|
1088
|
+
}
|
|
1089
|
+
function getMantineStyles(_colors) {
|
|
1090
|
+
return `
|
|
1091
|
+
.easy-form-label {
|
|
1092
|
+
color: #495057;
|
|
1093
|
+
font-size: 0.875rem;
|
|
1094
|
+
font-weight: 600;
|
|
1095
|
+
margin-bottom: 0.625rem;
|
|
1096
|
+
}
|
|
1097
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
1098
|
+
border: 1px solid #dee2e6;
|
|
1099
|
+
border-radius: 12px;
|
|
1100
|
+
padding: 0.875rem 1.25rem;
|
|
1101
|
+
background: #ffffff;
|
|
1102
|
+
font-size: 0.875rem;
|
|
1103
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1104
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
1105
|
+
}
|
|
1106
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
1107
|
+
border-color: #adb5bd;
|
|
1108
|
+
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
|
|
1109
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
1110
|
+
transform: translateY(-2px);
|
|
1111
|
+
}
|
|
1112
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
1113
|
+
outline: none;
|
|
1114
|
+
border-color: var(--easy-form-primary);
|
|
1115
|
+
background: #ffffff;
|
|
1116
|
+
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);
|
|
1117
|
+
transform: translateY(-3px);
|
|
1118
|
+
}
|
|
1119
|
+
.easy-form-submit {
|
|
1120
|
+
border-radius: 12px;
|
|
1121
|
+
font-weight: 600;
|
|
1122
|
+
background: linear-gradient(135deg, var(--easy-form-primary) 0%, #0056b3 100%);
|
|
1123
|
+
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
1124
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1125
|
+
}
|
|
1126
|
+
.easy-form-submit:hover {
|
|
1127
|
+
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
1128
|
+
transform: translateY(-3px) scale(1.02);
|
|
1129
|
+
}
|
|
1130
|
+
.easy-form-submit:active {
|
|
1131
|
+
transform: translateY(-1px) scale(0.98);
|
|
1132
|
+
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
1133
|
+
}
|
|
1134
|
+
.easy-form-group {
|
|
1135
|
+
border: 1px solid #dee2e6;
|
|
1136
|
+
border-radius: 16px;
|
|
1137
|
+
background: #ffffff;
|
|
1138
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
1139
|
+
padding: 1.5rem;
|
|
1140
|
+
}
|
|
1141
|
+
.easy-form-wizard-step {
|
|
1142
|
+
border: 1px solid #dee2e6;
|
|
1143
|
+
border-radius: 12px;
|
|
1144
|
+
background: #ffffff;
|
|
1145
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1146
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
|
|
1147
|
+
}
|
|
1148
|
+
.easy-form-wizard-step:hover {
|
|
1149
|
+
background: linear-gradient(to bottom, #ffffff, #f8f9fa);
|
|
1150
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
1151
|
+
transform: translateY(-2px);
|
|
1152
|
+
}
|
|
1153
|
+
.easy-form-wizard-step.active {
|
|
1154
|
+
border-color: var(--easy-form-primary);
|
|
1155
|
+
background: linear-gradient(135deg, var(--easy-form-primary) 0%, #0056b3 100%);
|
|
1156
|
+
color: white;
|
|
1157
|
+
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
1158
|
+
transform: translateY(-3px) scale(1.05);
|
|
1159
|
+
}
|
|
1160
|
+
.easy-form-array-item {
|
|
1161
|
+
border: 1px solid #dee2e6;
|
|
1162
|
+
border-radius: 12px;
|
|
1163
|
+
background: #ffffff;
|
|
1164
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
1165
|
+
}
|
|
1166
|
+
`;
|
|
1167
|
+
}
|
|
1168
|
+
function getGlassStyles(_colors) {
|
|
1169
|
+
return `
|
|
1170
|
+
.easy-form-label {
|
|
1171
|
+
color: rgba(255, 255, 255, 0.95);
|
|
1172
|
+
font-size: 0.875rem;
|
|
1173
|
+
font-weight: 600;
|
|
1174
|
+
margin-bottom: 0.75rem;
|
|
1175
|
+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
1176
|
+
}
|
|
1177
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
1178
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
1179
|
+
border-radius: 16px;
|
|
1180
|
+
padding: 0.875rem 1.25rem;
|
|
1181
|
+
background: rgba(255, 255, 255, 0.15);
|
|
1182
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1183
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1184
|
+
font-size: 0.875rem;
|
|
1185
|
+
color: rgba(255, 255, 255, 0.95);
|
|
1186
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1187
|
+
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);
|
|
1188
|
+
}
|
|
1189
|
+
input:not([type="checkbox"]):not([type="radio"])::placeholder, textarea::placeholder, select::placeholder {
|
|
1190
|
+
color: rgba(255, 255, 255, 0.6);
|
|
1191
|
+
}
|
|
1192
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
1193
|
+
border-color: rgba(255, 255, 255, 0.6);
|
|
1194
|
+
background: rgba(255, 255, 255, 0.25);
|
|
1195
|
+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.1);
|
|
1196
|
+
transform: translateY(-2px);
|
|
1197
|
+
}
|
|
1198
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
1199
|
+
outline: none;
|
|
1200
|
+
border-color: rgba(255, 255, 255, 0.8);
|
|
1201
|
+
background: rgba(255, 255, 255, 0.3);
|
|
1202
|
+
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.3), 0 16px 32px rgba(0, 123, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 30px rgba(0, 123, 255, 0.2);
|
|
1203
|
+
transform: translateY(-3px) scale(1.02);
|
|
1204
|
+
}
|
|
1205
|
+
.easy-form-submit {
|
|
1206
|
+
border-radius: 16px;
|
|
1207
|
+
font-weight: 600;
|
|
1208
|
+
background: rgba(255, 255, 255, 0.2);
|
|
1209
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1210
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1211
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
1212
|
+
color: rgba(255, 255, 255, 0.95);
|
|
1213
|
+
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);
|
|
1214
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1215
|
+
}
|
|
1216
|
+
.easy-form-submit:hover {
|
|
1217
|
+
background: rgba(255, 255, 255, 0.3);
|
|
1218
|
+
border-color: rgba(255, 255, 255, 0.6);
|
|
1219
|
+
box-shadow: 0 12px 32px rgba(0, 123, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 40px rgba(0, 123, 255, 0.3);
|
|
1220
|
+
transform: translateY(-3px) scale(1.05);
|
|
1221
|
+
}
|
|
1222
|
+
.easy-form-submit:active {
|
|
1223
|
+
transform: translateY(-1px) scale(0.98);
|
|
1224
|
+
}
|
|
1225
|
+
.easy-form-group {
|
|
1226
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
1227
|
+
border-radius: 20px;
|
|
1228
|
+
background: rgba(255, 255, 255, 0.15);
|
|
1229
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1230
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1231
|
+
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
1232
|
+
padding: 2rem;
|
|
1233
|
+
}
|
|
1234
|
+
.easy-form-wizard-step {
|
|
1235
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
1236
|
+
border-radius: 16px;
|
|
1237
|
+
background: rgba(255, 255, 255, 0.15);
|
|
1238
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1239
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1240
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1241
|
+
color: rgba(255, 255, 255, 0.95);
|
|
1242
|
+
}
|
|
1243
|
+
.easy-form-wizard-step:hover {
|
|
1244
|
+
background: rgba(255, 255, 255, 0.25);
|
|
1245
|
+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1);
|
|
1246
|
+
transform: translateY(-2px);
|
|
1247
|
+
}
|
|
1248
|
+
.easy-form-wizard-step.active {
|
|
1249
|
+
border-color: rgba(255, 255, 255, 0.8);
|
|
1250
|
+
background: rgba(0, 123, 255, 0.3);
|
|
1251
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1252
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1253
|
+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4), 0 16px 32px rgba(0, 123, 255, 0.3), 0 0 40px rgba(0, 123, 255, 0.2);
|
|
1254
|
+
transform: translateY(-3px) scale(1.05);
|
|
1255
|
+
}
|
|
1256
|
+
.easy-form-array-item {
|
|
1257
|
+
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
1258
|
+
border-radius: 16px;
|
|
1259
|
+
background: rgba(255, 255, 255, 0.15);
|
|
1260
|
+
backdrop-filter: blur(20px) saturate(180%);
|
|
1261
|
+
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
1262
|
+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
1263
|
+
}
|
|
1264
|
+
`;
|
|
1265
|
+
}
|
|
1266
|
+
function getBorderedStyles(_colors) {
|
|
1267
|
+
return `
|
|
1268
|
+
.easy-form-label {
|
|
1269
|
+
color: #1a1a1a;
|
|
1270
|
+
font-size: 0.875rem;
|
|
1271
|
+
font-weight: 700;
|
|
1272
|
+
margin-bottom: 0.75rem;
|
|
1273
|
+
text-transform: uppercase;
|
|
1274
|
+
letter-spacing: 0.1em;
|
|
1275
|
+
}
|
|
1276
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
1277
|
+
border: 3px solid #1a1a1a;
|
|
1278
|
+
border-radius: 0;
|
|
1279
|
+
padding: 0.875rem 1.25rem;
|
|
1280
|
+
background: #ffffff;
|
|
1281
|
+
font-size: 0.875rem;
|
|
1282
|
+
font-weight: 600;
|
|
1283
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1284
|
+
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1285
|
+
}
|
|
1286
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
1287
|
+
border-color: var(--easy-form-primary);
|
|
1288
|
+
box-shadow: 6px 6px 0 rgba(0, 123, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
1289
|
+
transform: translate(-2px, -2px);
|
|
1290
|
+
}
|
|
1291
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
1292
|
+
outline: none;
|
|
1293
|
+
border-color: var(--easy-form-primary);
|
|
1294
|
+
border-width: 4px;
|
|
1295
|
+
box-shadow: 8px 8px 0 rgba(0, 123, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 123, 255, 0.1);
|
|
1296
|
+
transform: translate(-4px, -4px);
|
|
1297
|
+
}
|
|
1298
|
+
.easy-form-submit {
|
|
1299
|
+
border-radius: 0;
|
|
1300
|
+
font-weight: 700;
|
|
1301
|
+
border: 4px solid #1a1a1a;
|
|
1302
|
+
background: var(--easy-form-primary);
|
|
1303
|
+
color: #ffffff;
|
|
1304
|
+
text-transform: uppercase;
|
|
1305
|
+
letter-spacing: 0.1em;
|
|
1306
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1307
|
+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
|
|
1308
|
+
}
|
|
1309
|
+
.easy-form-submit:hover {
|
|
1310
|
+
background: #0056b3;
|
|
1311
|
+
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
|
|
1312
|
+
transform: translate(-2px, -2px);
|
|
1313
|
+
}
|
|
1314
|
+
.easy-form-submit:active {
|
|
1315
|
+
transform: translate(0, 0);
|
|
1316
|
+
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
|
|
1317
|
+
}
|
|
1318
|
+
.easy-form-group {
|
|
1319
|
+
border: 4px solid #1a1a1a;
|
|
1320
|
+
border-radius: 0;
|
|
1321
|
+
background: #ffffff;
|
|
1322
|
+
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
|
|
1323
|
+
padding: 2rem;
|
|
1324
|
+
}
|
|
1325
|
+
.easy-form-wizard-step {
|
|
1326
|
+
border: 3px solid #1a1a1a;
|
|
1327
|
+
border-radius: 0;
|
|
1328
|
+
background: #ffffff;
|
|
1329
|
+
font-weight: 600;
|
|
1330
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1331
|
+
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
|
|
1332
|
+
}
|
|
1333
|
+
.easy-form-wizard-step:hover {
|
|
1334
|
+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15);
|
|
1335
|
+
transform: translate(-2px, -2px);
|
|
1336
|
+
}
|
|
1337
|
+
.easy-form-wizard-step.active {
|
|
1338
|
+
border-color: var(--easy-form-primary);
|
|
1339
|
+
border-width: 4px;
|
|
1340
|
+
background: var(--easy-form-primary);
|
|
1341
|
+
color: white;
|
|
1342
|
+
box-shadow: 8px 8px 0 rgba(0, 123, 255, 0.3);
|
|
1343
|
+
transform: translate(-4px, -4px);
|
|
1344
|
+
}
|
|
1345
|
+
.easy-form-array-item {
|
|
1346
|
+
border: 3px solid #1a1a1a;
|
|
1347
|
+
border-radius: 0;
|
|
1348
|
+
background: #ffffff;
|
|
1349
|
+
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
|
|
1350
|
+
}
|
|
1351
|
+
`;
|
|
1352
|
+
}
|
|
1353
|
+
function getMinimalStyles(_colors) {
|
|
1354
|
+
return `
|
|
1355
|
+
.easy-form-label {
|
|
1356
|
+
color: #6b7280;
|
|
1357
|
+
font-size: 0.75rem;
|
|
1358
|
+
font-weight: 500;
|
|
1359
|
+
margin-bottom: 0.5rem;
|
|
1360
|
+
text-transform: uppercase;
|
|
1361
|
+
letter-spacing: 0.15em;
|
|
1362
|
+
}
|
|
1363
|
+
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
|
|
1364
|
+
border: none;
|
|
1365
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1366
|
+
border-radius: 0;
|
|
1367
|
+
padding: 0.625rem 0;
|
|
1368
|
+
background: transparent;
|
|
1369
|
+
font-size: 0.9375rem;
|
|
1370
|
+
font-weight: 300;
|
|
1371
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1372
|
+
position: relative;
|
|
1373
|
+
}
|
|
1374
|
+
input:not([type="checkbox"]):not([type="radio"])::after, textarea::after, select::after {
|
|
1375
|
+
content: '';
|
|
1376
|
+
position: absolute;
|
|
1377
|
+
bottom: 0;
|
|
1378
|
+
left: 0;
|
|
1379
|
+
width: 0;
|
|
1380
|
+
height: 2px;
|
|
1381
|
+
background: var(--easy-form-primary);
|
|
1382
|
+
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1383
|
+
}
|
|
1384
|
+
input:not([type="checkbox"]):not([type="radio"]):hover, textarea:hover, select:hover {
|
|
1385
|
+
border-bottom-color: #d1d5db;
|
|
1386
|
+
padding-left: 0.5rem;
|
|
1387
|
+
}
|
|
1388
|
+
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus, select:focus {
|
|
1389
|
+
outline: none;
|
|
1390
|
+
border-bottom-color: var(--easy-form-primary);
|
|
1391
|
+
border-bottom-width: 2px;
|
|
1392
|
+
padding-bottom: calc(0.625rem - 1px);
|
|
1393
|
+
padding-left: 0;
|
|
1394
|
+
background: linear-gradient(to bottom, transparent 98%, rgba(0, 123, 255, 0.05) 100%);
|
|
1395
|
+
}
|
|
1396
|
+
.easy-form-submit {
|
|
1397
|
+
border-radius: 0;
|
|
1398
|
+
font-weight: 300;
|
|
1399
|
+
border: none;
|
|
1400
|
+
border-bottom: 2px solid var(--easy-form-primary);
|
|
1401
|
+
background: transparent;
|
|
1402
|
+
color: var(--easy-form-primary);
|
|
1403
|
+
padding: 0.75rem 0;
|
|
1404
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1405
|
+
text-transform: uppercase;
|
|
1406
|
+
letter-spacing: 0.2em;
|
|
1407
|
+
font-size: 0.75rem;
|
|
1408
|
+
position: relative;
|
|
1409
|
+
overflow: hidden;
|
|
1410
|
+
}
|
|
1411
|
+
.easy-form-submit::before {
|
|
1412
|
+
content: '';
|
|
1413
|
+
position: absolute;
|
|
1414
|
+
bottom: 0;
|
|
1415
|
+
left: -100%;
|
|
1416
|
+
width: 100%;
|
|
1417
|
+
height: 2px;
|
|
1418
|
+
background: var(--easy-form-primary);
|
|
1419
|
+
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1420
|
+
}
|
|
1421
|
+
.easy-form-submit:hover {
|
|
1422
|
+
background: linear-gradient(to bottom, rgba(0, 123, 255, 0.03), transparent);
|
|
1423
|
+
padding-left: 1rem;
|
|
1424
|
+
}
|
|
1425
|
+
.easy-form-submit:hover::before {
|
|
1426
|
+
left: 0;
|
|
1427
|
+
}
|
|
1428
|
+
.easy-form-group {
|
|
1429
|
+
border: none;
|
|
1430
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1431
|
+
border-radius: 0;
|
|
1432
|
+
background: transparent;
|
|
1433
|
+
padding-bottom: 2rem;
|
|
1434
|
+
margin-bottom: 2rem;
|
|
1435
|
+
}
|
|
1436
|
+
.easy-form-wizard-step {
|
|
1437
|
+
border: none;
|
|
1438
|
+
border-bottom: 2px solid #e5e7eb;
|
|
1439
|
+
border-radius: 0;
|
|
1440
|
+
background: transparent;
|
|
1441
|
+
font-weight: 300;
|
|
1442
|
+
text-transform: uppercase;
|
|
1443
|
+
letter-spacing: 0.15em;
|
|
1444
|
+
font-size: 0.75rem;
|
|
1445
|
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1446
|
+
position: relative;
|
|
1447
|
+
}
|
|
1448
|
+
.easy-form-wizard-step::after {
|
|
1449
|
+
content: '';
|
|
1450
|
+
position: absolute;
|
|
1451
|
+
bottom: -2px;
|
|
1452
|
+
left: 0;
|
|
1453
|
+
width: 0;
|
|
1454
|
+
height: 2px;
|
|
1455
|
+
background: var(--easy-form-primary);
|
|
1456
|
+
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
1457
|
+
}
|
|
1458
|
+
.easy-form-wizard-step:hover {
|
|
1459
|
+
color: var(--easy-form-primary);
|
|
1460
|
+
padding-left: 0.5rem;
|
|
1461
|
+
}
|
|
1462
|
+
.easy-form-wizard-step:hover::after {
|
|
1463
|
+
width: 100%;
|
|
1464
|
+
}
|
|
1465
|
+
.easy-form-wizard-step.active {
|
|
1466
|
+
border-bottom-color: var(--easy-form-primary);
|
|
1467
|
+
color: var(--easy-form-primary);
|
|
1468
|
+
font-weight: 500;
|
|
1469
|
+
}
|
|
1470
|
+
.easy-form-wizard-step.active::after {
|
|
1471
|
+
width: 100%;
|
|
1472
|
+
}
|
|
1473
|
+
.easy-form-array-item {
|
|
1474
|
+
border: none;
|
|
1475
|
+
border-bottom: 1px solid #e5e7eb;
|
|
1476
|
+
border-radius: 0;
|
|
1477
|
+
background: transparent;
|
|
1478
|
+
padding-bottom: 1.5rem;
|
|
1479
|
+
margin-bottom: 1.5rem;
|
|
1480
|
+
}
|
|
1481
|
+
`;
|
|
1482
|
+
}
|
|
898
1483
|
|
|
899
1484
|
// src/utils/masks.ts
|
|
900
1485
|
var PREDEFINED_MASKS = {
|
|
@@ -4498,12 +5083,114 @@ var EasyForm = class extends BrowserHTMLElement {
|
|
|
4498
5083
|
this.customComponents = { ...this.customComponents, ...components };
|
|
4499
5084
|
registerComponents(components);
|
|
4500
5085
|
}
|
|
5086
|
+
/**
|
|
5087
|
+
* Resetea el formulario a sus valores iniciales
|
|
5088
|
+
*/
|
|
5089
|
+
reset() {
|
|
5090
|
+
this.stateManager.reset();
|
|
5091
|
+
this.render();
|
|
5092
|
+
}
|
|
5093
|
+
/**
|
|
5094
|
+
* Limpia todos los valores del formulario
|
|
5095
|
+
*/
|
|
5096
|
+
clear() {
|
|
5097
|
+
const schema = this.schema;
|
|
5098
|
+
const templateName = this.template;
|
|
5099
|
+
let currentSchema = null;
|
|
5100
|
+
if (templateName) {
|
|
5101
|
+
currentSchema = this.getSchemaFromTemplate(templateName);
|
|
5102
|
+
} else {
|
|
5103
|
+
currentSchema = schema;
|
|
5104
|
+
}
|
|
5105
|
+
if (currentSchema) {
|
|
5106
|
+
this.stateManager.initializeSchema(currentSchema, {});
|
|
5107
|
+
this.render();
|
|
5108
|
+
}
|
|
5109
|
+
}
|
|
5110
|
+
/**
|
|
5111
|
+
* Obtiene todos los valores del formulario
|
|
5112
|
+
*/
|
|
5113
|
+
getValues() {
|
|
5114
|
+
return this.stateManager.getState().values;
|
|
5115
|
+
}
|
|
5116
|
+
/**
|
|
5117
|
+
* Obtiene el valor de un campo específico
|
|
5118
|
+
*/
|
|
5119
|
+
getValue(fieldName) {
|
|
5120
|
+
return this.stateManager.getValue(fieldName);
|
|
5121
|
+
}
|
|
5122
|
+
/**
|
|
5123
|
+
* Establece el valor de un campo específico
|
|
5124
|
+
*/
|
|
5125
|
+
async setValue(fieldName, value) {
|
|
5126
|
+
await this.stateManager.setValue(fieldName, value);
|
|
5127
|
+
this.render();
|
|
5128
|
+
}
|
|
5129
|
+
/**
|
|
5130
|
+
* Establece múltiples valores a la vez
|
|
5131
|
+
*/
|
|
5132
|
+
async setValues(values) {
|
|
5133
|
+
for (const [fieldName, value] of Object.entries(values)) {
|
|
5134
|
+
await this.stateManager.setValue(fieldName, value);
|
|
5135
|
+
}
|
|
5136
|
+
this.render();
|
|
5137
|
+
}
|
|
5138
|
+
/**
|
|
5139
|
+
* Valida el formulario completo
|
|
5140
|
+
*/
|
|
5141
|
+
async validate() {
|
|
5142
|
+
const errors = await this.stateManager.validateForm();
|
|
5143
|
+
this.render();
|
|
5144
|
+
if (Object.keys(errors).length > 0) {
|
|
5145
|
+
this.emitError(errors);
|
|
5146
|
+
}
|
|
5147
|
+
return errors;
|
|
5148
|
+
}
|
|
5149
|
+
/**
|
|
5150
|
+
* Valida un campo específico
|
|
5151
|
+
*/
|
|
5152
|
+
async validateField(fieldName) {
|
|
5153
|
+
await this.stateManager.validateField(fieldName);
|
|
5154
|
+
this.updateSingleField(fieldName);
|
|
5155
|
+
return this.stateManager.getErrors(fieldName);
|
|
5156
|
+
}
|
|
5157
|
+
/**
|
|
5158
|
+
* Obtiene todos los errores del formulario
|
|
5159
|
+
*/
|
|
5160
|
+
getErrors() {
|
|
5161
|
+
return this.stateManager.getAllErrors();
|
|
5162
|
+
}
|
|
5163
|
+
/**
|
|
5164
|
+
* Obtiene los errores de un campo específico
|
|
5165
|
+
*/
|
|
5166
|
+
getFieldErrors(fieldName) {
|
|
5167
|
+
return this.stateManager.getErrors(fieldName);
|
|
5168
|
+
}
|
|
5169
|
+
/**
|
|
5170
|
+
* Verifica si el formulario es válido
|
|
5171
|
+
*/
|
|
5172
|
+
isValid() {
|
|
5173
|
+
return this.stateManager.getState().isValid;
|
|
5174
|
+
}
|
|
4501
5175
|
/**
|
|
4502
5176
|
* Obtiene el tema del formulario
|
|
4503
5177
|
*/
|
|
4504
5178
|
get theme() {
|
|
4505
5179
|
const themeAttr = this.getAttribute("theme");
|
|
4506
|
-
|
|
5180
|
+
const validThemes = [
|
|
5181
|
+
"plano",
|
|
5182
|
+
"tradicional",
|
|
5183
|
+
"material",
|
|
5184
|
+
"rounded-shadow",
|
|
5185
|
+
"lines",
|
|
5186
|
+
"shadcn",
|
|
5187
|
+
"chakra",
|
|
5188
|
+
"mantine",
|
|
5189
|
+
"glass",
|
|
5190
|
+
"bordered",
|
|
5191
|
+
"minimal"
|
|
5192
|
+
];
|
|
5193
|
+
if (themeAttr && validThemes.includes(themeAttr)) {
|
|
4507
5194
|
return themeAttr;
|
|
4508
5195
|
}
|
|
4509
5196
|
return "plano";
|