+
{(name === "radius" ||
- name === "gap" ||
- name === "cardRadius")
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "borderWidth"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "margin"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : (name === "padding" ||
- name === "containerheaderpadding" ||
- name === "containerfooterpadding" ||
- name === "containerbodypadding")
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "textSize"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "textWeight"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "fontFamily"
- ? (
- children[name] as InstanceType
- ).propertyView({
+ name === "gap" ||
+ name === "cardRadius")
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "borderWidth"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
+ preInputNode: ,
+ placeholder: props[name],
})
- : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin"
- ? (
- children[name] as InstanceType
- ).propertyView({
- label: config.label,
- preInputNode: ,
- placeholder: props[name],
- })
- : children[name].propertyView({
- label: config.label,
- panelDefaultColor: props[name],
- // isDep: isDepColorConfig(config),
- isDep: true,
- depMsg: depMsg,
- })}
+ : name === "margin"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : (name === "padding" ||
+ name === "containerheaderpadding" ||
+ name === "containerfooterpadding" ||
+ name === "containerbodypadding")
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "textSize"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "textWeight"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "fontFamily"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "fontStyle"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "backgroundImage" || name === "headerBackgroundImage" || name === "footerBackgroundImage"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "backgroundImageRepeat" || name === "headerBackgroundImageRepeat" || name === "footerBackgroundImageRepeat"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "backgroundImageSize" || name === "headerBackgroundImageSize" || name === "footerBackgroundImageSize"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "backgroundImagePosition" || name === "headerBackgroundImagePosition" || name === "footerBackgroundImagePosition"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : name === "backgroundImageOrigin" || name === "headerBackgroundImageOrigin" || name === "footerBackgroundImageOrigin"
+ ? (
+ children[name] as InstanceType
+ ).propertyView({
+ label: config.label,
+ preInputNode: ,
+ placeholder: props[name],
+ })
+ : children[name].propertyView({
+ label: config.label,
+ panelDefaultColor: props[name],
+ // isDep: isDepColorConfig(config),
+ isDep: true,
+ depMsg: depMsg,
+ })}
);
})}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 5dea81d30..c01fc0d0b 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1,7 +1,7 @@
import { ThemeDetail } from "api/commonSettingApi";
import { darkenColor, isDarkColor, lightenColor, toHex } from "lowcoder-design";
import { trans } from "i18n";
-import { StyleConfigType } from "./styleControl";
+import { StyleConfigType } from "./styleControl";
type SupportPlatform = "pc" | "mobile";
@@ -23,21 +23,21 @@ export type BorderWidthConfig = CommonColorConfig & {
export type BackgroundImageConfig = CommonColorConfig & { readonly backgroundImage: string; };
export type BackgroundImageRepeatConfig = CommonColorConfig & { readonly backgroundImageRepeat: string; };
-export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string;};
+export type BackgroundImageSizeConfig = CommonColorConfig & { readonly backgroundImageSize: string; };
export type BackgroundImagePositionConfig = CommonColorConfig & { readonly backgroundImagePosition: string; };
-export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string;};
+export type BackgroundImageOriginConfig = CommonColorConfig & { readonly backgroundImageOrigin: string; };
export type HeaderBackgroundImageConfig = CommonColorConfig & { readonly headerBackgroundImage: string; };
export type HeaderBackgroundImageRepeatConfig = CommonColorConfig & { readonly headerBackgroundImageRepeat: string; };
-export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string;};
+export type HeaderBackgroundImageSizeConfig = CommonColorConfig & { readonly headerBackgroundImageSize: string; };
export type HeaderBackgroundImagePositionConfig = CommonColorConfig & { readonly headerBackgroundImagePosition: string; };
-export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string;};
+export type HeaderBackgroundImageOriginConfig = CommonColorConfig & { readonly headerBackgroundImageOrigin: string; };
export type FooterBackgroundImageConfig = CommonColorConfig & { readonly footerBackgroundImage: string; };
export type FooterBackgroundImageRepeatConfig = CommonColorConfig & { readonly footerBackgroundImageRepeat: string; };
-export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string;};
+export type FooterBackgroundImageSizeConfig = CommonColorConfig & { readonly footerBackgroundImageSize: string; };
export type FooterBackgroundImagePositionConfig = CommonColorConfig & { readonly footerBackgroundImagePosition: string; };
-export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string;};
+export type FooterBackgroundImageOriginConfig = CommonColorConfig & { readonly footerBackgroundImageOrigin: string; };
export type TextSizeConfig = CommonColorConfig & {
readonly textSize: string;
@@ -51,6 +51,10 @@ export type FontFamilyConfig = CommonColorConfig & {
readonly fontFamily: string;
};
+export type FontStyleConfig = CommonColorConfig & {
+ readonly fontStyle: string;
+}
+
export type ContainerHeaderPaddigConfig = CommonColorConfig & {
readonly containerheaderpadding: string;
};
@@ -63,11 +67,11 @@ export type ContainerFooterPaddigConfig = CommonColorConfig & {
readonly containerfooterpadding: string;
};
-export type MarginConfig = CommonColorConfig & {
- readonly margin: string;
-};
-export type PaddingConfig = CommonColorConfig & {
- readonly padding: string;
+export type MarginConfig = CommonColorConfig & {
+ readonly margin: string;
+};
+export type PaddingConfig = CommonColorConfig & {
+ readonly padding: string;
};
export type DepColorConfig = CommonColorConfig & {
@@ -76,7 +80,7 @@ export type DepColorConfig = CommonColorConfig & {
readonly depType?: DEP_TYPE;
transformer: (color: string, ...rest: string[]) => string;
};
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | FontFamilyConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | BackgroundImageConfig | BackgroundImageRepeatConfig | BackgroundImageSizeConfig | BackgroundImagePositionConfig | BackgroundImageOriginConfig | TextSizeConfig | TextWeightConfig | FontFamilyConfig | FontStyleConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig | HeaderBackgroundImageConfig | HeaderBackgroundImageRepeatConfig | HeaderBackgroundImageSizeConfig | HeaderBackgroundImagePositionConfig | HeaderBackgroundImageOriginConfig | FooterBackgroundImageConfig | FooterBackgroundImageRepeatConfig | FooterBackgroundImageSizeConfig | FooterBackgroundImagePositionConfig | FooterBackgroundImageOriginConfig;
export const defaultTheme: ThemeDetail = {
primary: "#3377FF",
@@ -85,7 +89,7 @@ export const defaultTheme: ThemeDetail = {
canvas: "#F5F5F6",
primarySurface: "#FFFFFF",
borderRadius: "4px",
- margin: "3px",
+ margin: "3px",
padding: "3px",
gridColumns: "24",
textSize: "14px",
@@ -322,61 +326,67 @@ const BACKGROUND_IMAGE_ORIGIN = {
backgroundImageOrigin: "backgroundImageOrigin",
} as const;
-const MARGIN = {
- name: "margin",
- label: trans("style.margin"),
- margin: "margin",
-} as const;
+const MARGIN = {
+ name: "margin",
+ label: trans("style.margin"),
+ margin: "margin",
+} as const;
-const PADDING = {
- name: "padding",
- label: trans("style.padding"),
- padding: "padding",
+const PADDING = {
+ name: "padding",
+ label: trans("style.padding"),
+ padding: "padding",
} as const;
-const TEXT_SIZE = {
+const TEXT_SIZE = {
name: "textSize",
- label: trans("style.textSize"),
- textSize: "textSize",
+ label: trans("style.textSize"),
+ textSize: "textSize",
} as const;
-const TEXT_WEIGHT = {
+const TEXT_WEIGHT = {
name: "textWeight",
- label: trans("style.textWeight"),
- textWeight: "textWeight",
+ label: trans("style.textWeight"),
+ textWeight: "textWeight",
} as const;
-const FONT_FAMILY = {
+const FONT_FAMILY = {
name: "fontFamily",
- label: trans("style.fontFamily"),
- fontFamily: "fontFamily",
+ label: trans("style.fontFamily"),
+ fontFamily: "fontFamily",
} as const;
-const CONTAINERHEADERPADDING = {
- name: "containerheaderpadding",
- label: trans("style.containerheaderpadding"),
- containerheaderpadding: "padding",
+const FONT_STYLE = {
+ name: "fontStyle",
+ label: trans("style.fontStyle"),
+ fontStyle: "fontStyle",
+} as const
+
+const CONTAINERHEADERPADDING = {
+ name: "containerheaderpadding",
+ label: trans("style.containerheaderpadding"),
+ containerheaderpadding: "padding",
} as const;
-const CONTAINERFOOTERPADDING = {
- name: "containerfooterpadding",
- label: trans("style.containerfooterpadding"),
- containerfooterpadding: "padding",
+const CONTAINERFOOTERPADDING = {
+ name: "containerfooterpadding",
+ label: trans("style.containerfooterpadding"),
+ containerfooterpadding: "padding",
} as const;
-const CONTAINERBODYPADDING = {
- name: "containerbodypadding",
- label: trans("style.containerbodypadding"),
- containerbodypadding: "padding",
+const CONTAINERBODYPADDING = {
+ name: "containerbodypadding",
+ label: trans("style.containerbodypadding"),
+ containerbodypadding: "padding",
} as const;
const getStaticBorder = (color: string = SECOND_SURFACE_COLOR) =>
- ({
- name: "border",
- label: trans("style.border"),
- color,
- } as const);
+({
+ name: "border",
+ label: trans("style.border"),
+ color,
+} as const);
const HEADER_BACKGROUND = {
name: "headerBackground",
@@ -439,13 +449,13 @@ function getStaticBackground(color: string) {
}
export const ButtonStyle = [
- ...getBgBorderRadiusByBg("primary"),
+ ...getBgBorderRadiusByBg("primary"),
BORDER_WIDTH,
- TEXT,
+ TEXT,
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
- MARGIN,
+ MARGIN,
PADDING
] as const;
@@ -464,7 +474,7 @@ export const ToggleButtonStyle = [
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -480,8 +490,9 @@ export const TextStyle = [
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
+ FONT_STYLE,
BORDER,
- MARGIN,
+ MARGIN,
PADDING,
{
name: "links",
@@ -491,16 +502,16 @@ export const TextStyle = [
transformer: toSelf,
},
RADIUS,
- BORDER_WIDTH
+ BORDER_WIDTH,
] as const;
-export const MarginStyle = [
- {
- name: "margin",
- label: trans("style.margin"),
- margin: "margin",
- },
-];
+export const MarginStyle = [
+ {
+ name: "margin",
+ label: trans("style.margin"),
+ margin: "margin",
+ },
+];
export const ContainerStyle = [
@@ -508,7 +519,7 @@ export const ContainerStyle = [
getStaticBorder(),
RADIUS,
BORDER_WIDTH,
- MARGIN,
+ MARGIN,
PADDING,
{
name: "background",
@@ -567,7 +578,7 @@ export const ContainerHeaderStyle = [
label: trans("style.backgroundImagePosition"),
headerBackgroundImagePosition: "headerBackgroundImagePosition",
}
- ,{
+ , {
name: "headerBackgroundImageOrigin",
label: trans("style.backgroundImageOrigin"),
headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
@@ -639,7 +650,7 @@ export const ContainerFooterStyle = [
label: trans("style.backgroundImagePosition"),
footerBackgroundImagePosition: "footerBackgroundImagePosition",
}
- ,{
+ , {
name: "footerBackgroundImageOrigin",
label: trans("style.backgroundImageOrigin"),
footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
@@ -662,7 +673,7 @@ export const SliderStyle = [
color: SURFACE_COLOR,
},
TRACK,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -674,7 +685,8 @@ export const InputLikeStyle = [
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
- MARGIN,
+ FONT_STYLE,
+ MARGIN,
PADDING,
...ACCENT_VALIDATE,
] as const;
@@ -691,7 +703,7 @@ export const RatingStyle = [
label: trans("style.unchecked"),
color: SECOND_SURFACE_COLOR,
},
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -715,7 +727,7 @@ export const SwitchStyle = [
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -723,7 +735,7 @@ export const SelectStyle = [
LABEL,
...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
TEXT,
- MARGIN,
+ MARGIN,
PADDING,
...ACCENT_VALIDATE,
] as const;
@@ -732,7 +744,7 @@ const multiSelectCommon = [
LABEL,
...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
TEXT,
- MARGIN,
+ MARGIN,
PADDING,
{
name: "tags",
@@ -784,7 +796,7 @@ export const TabContainerStyle = [
export const ModalStyle = [
...getBgBorderRadiusByBg(),
BORDER_WIDTH,
- MARGIN,
+ MARGIN,
PADDING,
BACKGROUND_IMAGE,
BACKGROUND_IMAGE_REPEAT,
@@ -798,7 +810,7 @@ export const CascaderStyle = [
...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
TEXT,
ACCENT,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -838,7 +850,7 @@ export const CheckboxStyle = [
RADIUS,
STATIC_TEXT,
VALIDATE,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -854,7 +866,7 @@ export const RadioStyle = [
},
STATIC_TEXT,
VALIDATE,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -880,7 +892,7 @@ export const SegmentStyle = [
},
RADIUS,
VALIDATE,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -908,6 +920,7 @@ const LinkTextStyle = [
export const TableStyle = [
MARGIN,
+ PADDING,
...BG_STATIC_BORDER_RADIUS,
{
name: "borderWidth",
@@ -931,6 +944,10 @@ export const TableToolbarStyle = [
export const TableHeaderStyle = [
MARGIN,
+ PADDING,
+ FONT_FAMILY,
+ FONT_STYLE,
+ TEXT,
{
name: "headerBackground",
label: trans("style.tableHeaderBackground"),
@@ -988,7 +1005,8 @@ export const TableColumnStyle = [
TEXT,
TEXT_SIZE,
TEXT_WEIGHT,
- FONT_FAMILY
+ FONT_FAMILY,
+ FONT_STYLE,
] as const;
export const TableColumnLinkStyle = [
@@ -1001,7 +1019,7 @@ export const FileViewerStyle = [
getStaticBackground("#FFFFFF"),
getStaticBorder("#00000000"),
RADIUS,
- MARGIN,
+ MARGIN,
PADDING,
BORDER_WIDTH
] as const;
@@ -1012,7 +1030,7 @@ export const DateTimeStyle = [
LABEL,
...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
TEXT,
- MARGIN,
+ MARGIN,
PADDING,
...ACCENT_VALIDATE,
] as const;
@@ -1027,7 +1045,7 @@ function handleToHoverLink(color: string) {
export const LinkStyle = [
...LinkTextStyle,
- MARGIN,
+ MARGIN,
PADDING,
TEXT_SIZE
] as const;
@@ -1039,7 +1057,7 @@ export const DividerStyle = [
color: lightenColor(SECOND_SURFACE_COLOR, 0.05),
},
BORDER_WIDTH,
- MARGIN,
+ MARGIN,
PADDING,
{
name: "text",
@@ -1063,7 +1081,7 @@ export const ProgressStyle = [
TRACK,
FILL,
SUCCESS,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -1078,7 +1096,7 @@ export const NavigationStyle = [
ACCENT,
getStaticBackground("#FFFFFF00"),
getStaticBorder("#FFFFFF00"),
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -1095,7 +1113,7 @@ export const QRCodeStyle = [
label: trans("color"),
color: "#000000",
},
- MARGIN,
+ MARGIN,
PADDING,
BORDER,
RADIUS,
@@ -1119,7 +1137,7 @@ export const TimeLineStyle = [
label: trans("timeLine.subTitleColor"),
color: "#848484",
},
- MARGIN,
+ MARGIN,
PADDING,
RADIUS
] as const;
@@ -1199,7 +1217,7 @@ export const SignatureStyle = [
label: trans("style.footerIcon"),
color: "#222222",
},
- MARGIN,
+ MARGIN,
PADDING,
BORDER_WIDTH
] as const;
@@ -1213,7 +1231,7 @@ export const LottieStyle = [
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
- MARGIN,
+ MARGIN,
PADDING,
] as const;
/////////////////////
@@ -1225,19 +1243,19 @@ export const CommentStyle = [
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
- MARGIN,
+ MARGIN,
PADDING,
RADIUS,
] as const
export const ResponsiveLayoutRowStyle = [
...BG_STATIC_BORDER_RADIUS,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
export const ResponsiveLayoutColStyle = [
...BG_STATIC_BORDER_RADIUS,
- MARGIN,
+ MARGIN,
PADDING,
] as const;
@@ -1297,9 +1315,9 @@ export const NavLayoutItemActiveStyle = [
export const CarouselStyle = [getBackground("canvas")] as const;
export const RichTextEditorStyle = [
- getStaticBorder(),
- getBackground("primarySurface"),
- RADIUS,
+ getStaticBorder(),
+ getBackground("primarySurface"),
+ RADIUS,
BORDER_WIDTH
] as const;
@@ -1354,43 +1372,36 @@ export type NavLayoutItemHoverStyleType = StyleConfigType
;
export function widthCalculator(margin: string) {
- const marginArr = margin?.trim().replace(/\s+/g,' ').split(" ") || "";
+ const marginArr = margin?.trim().replace(/\s+/g, ' ').split(" ") || "";
if (marginArr.length === 1) {
- return `calc(100% - ${
- parseInt(margin.replace(/[^\d.]/g, "")) * 2 +
+ return `calc(100% - ${parseInt(margin.replace(/[^\d.]/g, "")) * 2 +
(margin.replace(/[0-9]/g, "") || "px")
- })`;
+ })`;
} else if (marginArr.length === 2 || marginArr.length === 3) {
- return `calc(100% - ${
- parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
+ return `calc(100% - ${parseInt(marginArr[1].replace(/[^\d.]/g, "")) * 2 +
(marginArr[1].replace(/[0-9]/g, "") || 'px')
- })`;
+ })`;
} else {
- return `calc(100% - ${
- parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
+ return `calc(100% - ${parseInt(marginArr[1]?.replace(/[^\d.]/g, "") || "0") +
(marginArr[1]?.replace(/[0-9]/g, "") || "px")
- } - ${
- parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
+ } - ${parseInt(marginArr[3]?.replace(/[^\d.]/g, "") || "0") +
(marginArr[3]?.replace(/[0-9]/g, "") || "px")
- })`;
+ })`;
}
}
export function heightCalculator(margin: string) {
const marginArr = margin?.trim().split(" ") || "";
if (marginArr.length === 1 || marginArr.length === 2) {
- return `calc(100% - ${
- parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
+ return `calc(100% - ${parseInt(marginArr[0].replace(/[^\d.]/g, "")) * 2 +
(marginArr[0].replace(/[0-9]/g, "") || 'px')
- })`;
- }else if(marginArr.length >2){
- return `calc(100% - ${
- parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
+ })`;
+ } else if (marginArr.length > 2) {
+ return `calc(100% - ${parseInt(marginArr[0]?.replace(/[^\d.]/g, "") || "0") +
(marginArr[0]?.replace(/[0-9]/g, "") || "px")
- } - ${
- parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
+ } - ${parseInt(marginArr[2]?.replace(/[^\d.]/g, "") || "0") +
(marginArr[2]?.replace(/[0-9]/g, "") || "px")
- })`;
+ })`;
}
}
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 9cc91a970..fc05496d4 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -361,6 +361,7 @@ export const en = {
"textSize": "Text Size",
"textWeight": "Text Weight",
"fontFamily": "Font Family",
+ "fontStyle":"Font Style",
"backgroundImage": "BG Image",
"backgroundImageRepeat": "BG Repeat",
"backgroundImageSize": "BG Size",