@forms.expert/sdk 0.4.1 → 0.4.3
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 +2 -0
- package/dist/core/index.d.ts +2 -0
- package/dist/core/index.js.map +1 -1
- package/dist/react/index.cjs +5 -4
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.d.cts +2 -0
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.js +5 -4
- package/dist/react/index.js.map +1 -1
- package/dist/vanilla/index.cjs +14 -13
- package/dist/vanilla/index.cjs.map +1 -1
- package/dist/vanilla/index.d.cts +2 -0
- package/dist/vanilla/index.d.ts +2 -0
- package/dist/vanilla/index.global.js +14 -13
- package/dist/vanilla/index.global.js.map +1 -1
- package/dist/vanilla/index.js +14 -13
- package/dist/vanilla/index.js.map +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.d.cts +2 -0
- package/dist/vue/index.d.ts +2 -0
- package/dist/vue/index.js.map +1 -1
- package/package.json +1 -1
package/dist/react/index.d.cts
CHANGED
|
@@ -95,6 +95,8 @@ interface FormStyling {
|
|
|
95
95
|
fieldLayout?: 'stacked' | 'inline';
|
|
96
96
|
fieldBorderStyle?: 'full' | 'bottom';
|
|
97
97
|
fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
98
|
+
fieldPaddingX?: number;
|
|
99
|
+
fieldPaddingY?: number;
|
|
98
100
|
buttonColor?: string;
|
|
99
101
|
buttonText?: string;
|
|
100
102
|
buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
package/dist/react/index.d.ts
CHANGED
|
@@ -95,6 +95,8 @@ interface FormStyling {
|
|
|
95
95
|
fieldLayout?: 'stacked' | 'inline';
|
|
96
96
|
fieldBorderStyle?: 'full' | 'bottom';
|
|
97
97
|
fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
|
98
|
+
fieldPaddingX?: number;
|
|
99
|
+
fieldPaddingY?: number;
|
|
98
100
|
buttonColor?: string;
|
|
99
101
|
buttonText?: string;
|
|
100
102
|
buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
|
package/dist/react/index.js
CHANGED
|
@@ -1058,7 +1058,7 @@ function FormsExpertForm({
|
|
|
1058
1058
|
form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
|
|
1059
1059
|
form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
|
|
1060
1060
|
form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
|
|
1061
|
-
form[data-fe-scope="${formScopeId}"] input:focus,
|
|
1061
|
+
form[data-fe-scope="${formScopeId}"] input:not([type="checkbox"]):not([type="radio"]):focus,
|
|
1062
1062
|
form[data-fe-scope="${formScopeId}"] textarea:focus,
|
|
1063
1063
|
form[data-fe-scope="${formScopeId}"] select:focus {
|
|
1064
1064
|
outline: none !important;
|
|
@@ -1109,7 +1109,7 @@ function FormsExpertForm({
|
|
|
1109
1109
|
group.field.name
|
|
1110
1110
|
);
|
|
1111
1111
|
}
|
|
1112
|
-
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: "
|
|
1112
|
+
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(
|
|
1113
1113
|
FormFieldInput,
|
|
1114
1114
|
{
|
|
1115
1115
|
field: f,
|
|
@@ -1282,9 +1282,10 @@ function FormFieldInput({
|
|
|
1282
1282
|
const fontSize = getFontSize(styling.fontSize);
|
|
1283
1283
|
const isInline = styling.labelPosition === "left" || styling.fieldLayout === "inline";
|
|
1284
1284
|
const isBottomBorder = styling.fieldBorderStyle === "bottom";
|
|
1285
|
+
const fieldPadding = styling.fieldPaddingX != null || styling.fieldPaddingY != null ? `${styling.fieldPaddingY ?? 8}px ${styling.fieldPaddingX ?? 12}px` : "0.5rem 0.75rem";
|
|
1285
1286
|
const inputStyle = {
|
|
1286
1287
|
width: "100%",
|
|
1287
|
-
padding:
|
|
1288
|
+
padding: fieldPadding,
|
|
1288
1289
|
border: isBottomBorder ? "none" : `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
|
|
1289
1290
|
...isBottomBorder ? { borderBottom: `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } : {},
|
|
1290
1291
|
borderRadius: isBottomBorder ? 0 : fieldRadius,
|
|
@@ -1334,7 +1335,7 @@ function FormFieldInput({
|
|
|
1334
1335
|
checked: Boolean(value),
|
|
1335
1336
|
onChange,
|
|
1336
1337
|
required: field.required,
|
|
1337
|
-
style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0 }
|
|
1338
|
+
style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0, backgroundColor: "transparent" }
|
|
1338
1339
|
}
|
|
1339
1340
|
),
|
|
1340
1341
|
/* @__PURE__ */ jsxs("div", { children: [
|