@forms.expert/sdk 0.4.7 → 0.4.8
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/core/index.cjs.map +1 -1
- package/dist/core/index.d.cts +1 -1
- package/dist/core/index.d.ts +1 -1
- package/dist/core/index.js.map +1 -1
- package/dist/react/index.cjs +125 -123
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +1 -1
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +125 -123
- package/dist/react/index.js.map +1 -1
- package/dist/vanilla/index.cjs +46 -46
- package/dist/vanilla/index.cjs.map +1 -1
- package/dist/vanilla/index.d.cts +1 -1
- package/dist/vanilla/index.d.ts +1 -1
- package/dist/vanilla/index.global.js +46 -46
- package/dist/vanilla/index.global.js.map +1 -1
- package/dist/vanilla/index.js +36 -36
- package/dist/vanilla/index.js.map +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.d.cts +1 -1
- package/dist/vue/index.d.ts +1 -1
- package/dist/vue/index.js.map +1 -1
- package/package.json +1 -1
package/dist/react/index.d.cts
CHANGED
|
@@ -102,7 +102,7 @@ interface FormStyling {
|
|
|
102
102
|
buttonColor?: string;
|
|
103
103
|
buttonText?: string;
|
|
104
104
|
buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
105
|
-
buttonAlign?: 'left' | 'center' | 'right';
|
|
105
|
+
buttonAlign?: 'left' | 'center' | 'right' | 'inline';
|
|
106
106
|
buttonSize?: 'small' | 'medium' | 'large';
|
|
107
107
|
buttonPaddingX?: number;
|
|
108
108
|
buttonPaddingY?: number;
|
package/dist/react/index.d.ts
CHANGED
|
@@ -102,7 +102,7 @@ interface FormStyling {
|
|
|
102
102
|
buttonColor?: string;
|
|
103
103
|
buttonText?: string;
|
|
104
104
|
buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
105
|
-
buttonAlign?: 'left' | 'center' | 'right';
|
|
105
|
+
buttonAlign?: 'left' | 'center' | 'right' | 'inline';
|
|
106
106
|
buttonSize?: 'small' | 'medium' | 'large';
|
|
107
107
|
buttonPaddingX?: number;
|
|
108
108
|
buttonPaddingY?: number;
|
package/dist/react/index.js
CHANGED
|
@@ -1091,140 +1091,142 @@ function FormsExpertForm({
|
|
|
1091
1091
|
marginBottom: "0.5rem",
|
|
1092
1092
|
color: styling.textColor
|
|
1093
1093
|
}, children: form.config.hostedConfig?.pageTitle || form.config.name }),
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1094
|
+
/* @__PURE__ */ jsxs("div", { style: styling.buttonAlign === "inline" ? { display: "flex", alignItems: "flex-end", gap: "0.75rem", flexWrap: "wrap" } : void 0, children: [
|
|
1095
|
+
/* @__PURE__ */ jsx2("div", { style: styling.buttonAlign === "inline" ? { flex: "1 1 0", minWidth: "180px" } : void 0, children: groupFieldsIntoRows(fields).map((group, idx) => {
|
|
1096
|
+
if (group.type === "single") {
|
|
1097
|
+
return /* @__PURE__ */ jsx2(
|
|
1098
|
+
FormFieldInput,
|
|
1099
|
+
{
|
|
1100
|
+
field: group.field,
|
|
1101
|
+
value: form.values[group.field.name],
|
|
1102
|
+
error: form.errors[group.field.name],
|
|
1103
|
+
onChange: handleChange,
|
|
1104
|
+
onValueChange: (name, val) => form.setValue(name, val),
|
|
1105
|
+
styling,
|
|
1106
|
+
fieldSpacing,
|
|
1107
|
+
labelSpacing,
|
|
1108
|
+
phFontSize
|
|
1109
|
+
},
|
|
1110
|
+
group.field.name
|
|
1111
|
+
);
|
|
1112
|
+
}
|
|
1113
|
+
return /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap", marginBottom: fieldSpacing }, children: group.fields.map((f) => /* @__PURE__ */ jsx2("div", { style: { flex: getWidthPercent(f.width) ? `0 0 calc(${getWidthPercent(f.width)} - 0.75rem)` : "1 1 0", minWidth: "180px" }, children: /* @__PURE__ */ jsx2(
|
|
1097
1114
|
FormFieldInput,
|
|
1098
1115
|
{
|
|
1099
|
-
field:
|
|
1100
|
-
value: form.values[
|
|
1101
|
-
error: form.errors[
|
|
1116
|
+
field: f,
|
|
1117
|
+
value: form.values[f.name],
|
|
1118
|
+
error: form.errors[f.name],
|
|
1102
1119
|
onChange: handleChange,
|
|
1103
1120
|
onValueChange: (name, val) => form.setValue(name, val),
|
|
1104
1121
|
styling,
|
|
1105
|
-
fieldSpacing,
|
|
1122
|
+
fieldSpacing: "0",
|
|
1106
1123
|
labelSpacing,
|
|
1107
1124
|
phFontSize
|
|
1108
|
-
}
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
{
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1125
|
+
}
|
|
1126
|
+
) }, f.name)) }, `row-${idx}`);
|
|
1127
|
+
}) }),
|
|
1128
|
+
form.honeypotEnabled && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: "-9999px", opacity: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off" }) }),
|
|
1129
|
+
form.requiresCaptcha && form.captchaProvider !== "recaptcha" && /* @__PURE__ */ jsx2("div", { ref: captchaContainerRef, style: { marginTop: "1rem" } }),
|
|
1130
|
+
(() => {
|
|
1131
|
+
const btnSizeMap = {
|
|
1132
|
+
small: { px: "0.75rem", py: "0.375rem", fs: "0.875rem" },
|
|
1133
|
+
medium: { px: "1.25rem", py: "0.625rem", fs: "1rem" },
|
|
1134
|
+
large: { px: "1.75rem", py: "0.875rem", fs: "1.125rem" }
|
|
1135
|
+
};
|
|
1136
|
+
const btnSize = btnSizeMap[styling.buttonSize || "medium"];
|
|
1137
|
+
const btnPx = styling.buttonPaddingX != null ? `${styling.buttonPaddingX}px` : btnSize.px;
|
|
1138
|
+
const btnPy = styling.buttonPaddingY != null ? `${styling.buttonPaddingY}px` : btnSize.py;
|
|
1139
|
+
const btnFs = styling.buttonFontSize != null ? `${styling.buttonFontSize}px` : btnSize.fs;
|
|
1140
|
+
const btnBg = styling.buttonGradient || (styling.buttonStyle === "filled" ? btnBgColor : "transparent");
|
|
1141
|
+
const sec = styling.secondaryButton;
|
|
1142
|
+
const secColor = sec?.color || btnBgColor;
|
|
1143
|
+
const secStyle = sec?.enabled ? {
|
|
1144
|
+
display: "inline-flex",
|
|
1145
|
+
alignItems: "center",
|
|
1146
|
+
justifyContent: "center",
|
|
1147
|
+
padding: `${btnPy} ${btnPx}`,
|
|
1148
|
+
fontWeight: 500,
|
|
1149
|
+
fontSize: sec.fontSize != null ? `${sec.fontSize}px` : btnFs,
|
|
1150
|
+
fontFamily: "inherit",
|
|
1151
|
+
borderRadius: btnRadius,
|
|
1152
|
+
cursor: "pointer",
|
|
1153
|
+
textDecoration: sec.style === "link" ? "underline" : "none",
|
|
1154
|
+
background: sec.style === "filled" ? secColor : "transparent",
|
|
1155
|
+
color: sec.textColor || (sec.style === "filled" ? "#ffffff" : secColor),
|
|
1156
|
+
border: sec.style === "outlined" ? `2px solid ${secColor}` : "none",
|
|
1157
|
+
marginTop: sec.marginTop != null ? `${sec.marginTop}px` : void 0,
|
|
1158
|
+
marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0,
|
|
1159
|
+
maxWidth: "100%",
|
|
1160
|
+
boxSizing: "border-box",
|
|
1161
|
+
flexShrink: 1,
|
|
1162
|
+
minWidth: 0,
|
|
1163
|
+
whiteSpace: "nowrap",
|
|
1164
|
+
overflow: "hidden",
|
|
1165
|
+
textOverflow: "ellipsis"
|
|
1166
|
+
} : void 0;
|
|
1167
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1168
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: styling.buttonAlign === "inline" ? void 0 : "1rem", gap: "0.5rem", flexWrap: "wrap" }, children: [
|
|
1169
|
+
sec?.enabled && secStyle && sec.position === "left" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
|
|
1170
|
+
sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
|
|
1171
|
+
/* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
|
|
1172
|
+
sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
|
|
1173
|
+
] }),
|
|
1174
|
+
/* @__PURE__ */ jsxs(
|
|
1175
|
+
"button",
|
|
1176
|
+
{
|
|
1177
|
+
type: "submit",
|
|
1178
|
+
disabled: form.isLoading,
|
|
1179
|
+
className: styling.buttonClassName,
|
|
1180
|
+
style: {
|
|
1181
|
+
...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
|
|
1182
|
+
padding: `${btnPy} ${btnPx}`,
|
|
1183
|
+
fontWeight: 500,
|
|
1184
|
+
fontSize: btnFs,
|
|
1185
|
+
fontFamily: "inherit",
|
|
1186
|
+
borderRadius: btnRadius,
|
|
1187
|
+
cursor: form.isLoading ? "not-allowed" : "pointer",
|
|
1188
|
+
opacity: form.isLoading ? 0.5 : 1,
|
|
1189
|
+
background: btnBg,
|
|
1190
|
+
color: styling.buttonStyle === "filled" ? btnTextColor || "white" : btnBgColor,
|
|
1191
|
+
border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`,
|
|
1192
|
+
maxWidth: "100%",
|
|
1193
|
+
boxSizing: "border-box",
|
|
1194
|
+
flexShrink: 1,
|
|
1195
|
+
minWidth: 0,
|
|
1196
|
+
whiteSpace: "nowrap",
|
|
1197
|
+
overflow: "hidden",
|
|
1198
|
+
textOverflow: "ellipsis",
|
|
1199
|
+
display: "inline-flex",
|
|
1200
|
+
alignItems: "center",
|
|
1201
|
+
justifyContent: "center",
|
|
1202
|
+
gap: "0.5rem"
|
|
1203
|
+
},
|
|
1204
|
+
children: [
|
|
1205
|
+
!form.isLoading && styling.buttonIcon && styling.buttonIconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } }),
|
|
1206
|
+
/* @__PURE__ */ jsx2("span", { children: form.isLoading ? "Submitting..." : resolvedButtonText }),
|
|
1207
|
+
!form.isLoading && styling.buttonIcon && styling.buttonIconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } })
|
|
1208
|
+
]
|
|
1209
|
+
}
|
|
1210
|
+
),
|
|
1211
|
+
sec?.enabled && secStyle && sec.position !== "left" && sec.position !== "below" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginLeft: "auto" }, children: [
|
|
1212
|
+
sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
|
|
1213
|
+
/* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
|
|
1214
|
+
sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
|
|
1215
|
+
] })
|
|
1172
1216
|
] }),
|
|
1173
|
-
/* @__PURE__ */
|
|
1174
|
-
"
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
style: {
|
|
1180
|
-
...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
|
|
1181
|
-
padding: `${btnPy} ${btnPx}`,
|
|
1182
|
-
fontWeight: 500,
|
|
1183
|
-
fontSize: btnFs,
|
|
1184
|
-
fontFamily: "inherit",
|
|
1185
|
-
borderRadius: btnRadius,
|
|
1186
|
-
cursor: form.isLoading ? "not-allowed" : "pointer",
|
|
1187
|
-
opacity: form.isLoading ? 0.5 : 1,
|
|
1188
|
-
background: btnBg,
|
|
1189
|
-
color: styling.buttonStyle === "filled" ? btnTextColor || "white" : btnBgColor,
|
|
1190
|
-
border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`,
|
|
1191
|
-
maxWidth: "100%",
|
|
1192
|
-
boxSizing: "border-box",
|
|
1193
|
-
flexShrink: 1,
|
|
1194
|
-
minWidth: 0,
|
|
1195
|
-
whiteSpace: "nowrap",
|
|
1196
|
-
overflow: "hidden",
|
|
1197
|
-
textOverflow: "ellipsis",
|
|
1198
|
-
display: "inline-flex",
|
|
1199
|
-
alignItems: "center",
|
|
1200
|
-
justifyContent: "center",
|
|
1201
|
-
gap: "0.5rem"
|
|
1202
|
-
},
|
|
1203
|
-
children: [
|
|
1204
|
-
!form.isLoading && styling.buttonIcon && styling.buttonIconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } }),
|
|
1205
|
-
/* @__PURE__ */ jsx2("span", { children: form.isLoading ? "Submitting..." : resolvedButtonText }),
|
|
1206
|
-
!form.isLoading && styling.buttonIcon && styling.buttonIconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } })
|
|
1207
|
-
]
|
|
1208
|
-
}
|
|
1209
|
-
),
|
|
1210
|
-
sec?.enabled && secStyle && sec.position !== "left" && sec.position !== "below" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginLeft: "auto" }, children: [
|
|
1217
|
+
sec?.enabled && secStyle && sec.position === "below" && /* @__PURE__ */ jsx2("div", { style: {
|
|
1218
|
+
display: "flex",
|
|
1219
|
+
justifyContent: sec.align === "center" ? "center" : sec.align === "right" ? "flex-end" : sec.align === "left" ? "flex-start" : btnAlign,
|
|
1220
|
+
marginTop: sec.marginTop != null ? `${sec.marginTop}px` : "0.5rem",
|
|
1221
|
+
marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
|
|
1222
|
+
}, children: /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginTop: 0, marginBottom: 0 }, children: [
|
|
1211
1223
|
sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
|
|
1212
1224
|
/* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
|
|
1213
1225
|
sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
|
|
1214
|
-
] })
|
|
1215
|
-
] })
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
justifyContent: sec.align === "center" ? "center" : sec.align === "right" ? "flex-end" : sec.align === "left" ? "flex-start" : btnAlign,
|
|
1219
|
-
marginTop: sec.marginTop != null ? `${sec.marginTop}px` : "0.5rem",
|
|
1220
|
-
marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
|
|
1221
|
-
}, children: /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginTop: 0, marginBottom: 0 }, children: [
|
|
1222
|
-
sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
|
|
1223
|
-
/* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
|
|
1224
|
-
sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
|
|
1225
|
-
] }) })
|
|
1226
|
-
] });
|
|
1227
|
-
})(),
|
|
1226
|
+
] }) })
|
|
1227
|
+
] });
|
|
1228
|
+
})()
|
|
1229
|
+
] }),
|
|
1228
1230
|
showBranding && /* @__PURE__ */ jsx2(
|
|
1229
1231
|
"div",
|
|
1230
1232
|
{
|