feat: add border-width option in styling

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx

@@ -100,6 +100,7 @@ export const columnChildrenMap = {
   background: withDefault(ColorControl, ""),
   text: withDefault(ColorControl, ""),
   border: withDefault(ColorControl, ""),
+  borderWidth: withDefault(RadiusControl, ""),
   radius: withDefault(RadiusControl, ""),
   textSize: withDefault(RadiusControl, ""),
   cellColor: CellColorComp, 
@@ -212,6 +213,11 @@ export class ColumnComp extends ColumnInitComp {
         {this.children.border.propertyView({
           label: trans('style.border')
         })}
+        {this.children.borderWidth.propertyView({
+          label: trans('style.borderWidth'),
+          preInputNode: <StyledIcon as={IconRadius} title="" />,	
+          placeholder: '1px',
+        })}
         {this.children.radius.propertyView({
           label: trans('style.borderRadius'),
           preInputNode: <StyledIcon as={IconRadius} title="" />,	

client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

@@ -273,6 +273,7 @@ const TableTd = styled.td<{
   }
   background: ${(props) => props.background} !important;
   border-color: ${(props) => props.$style.border} !important;
+  border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
 
   > div > div {
@@ -405,6 +406,7 @@ function TableCellView(props: {
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
       radius: columnStyle.radius || columnsStyle.radius,
+      borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
     }
     let { background } = style;

client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

@@ -322,6 +322,7 @@ export function columnsToAntdFormat(
         border: column.border,
         radius: column.radius,
         textSize: column.textSize,
+        borderWidth: column.borderWidth,
       },
       cellColorFn: column.cellColor,
       onWidthResize: column.onWidthResize,

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -29,6 +29,7 @@ import {
   MarginConfig,
   PaddingConfig,
   TextSizeConfig,
+  BorderWidthConfig,
 } from "./styleControlConstants";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
@@ -43,6 +44,10 @@ function isRadiusConfig(config: SingleColorConfig): config is RadiusConfig {
   return config.hasOwnProperty("radius");
 }
 
+function isBorderWidthConfig(config: SingleColorConfig): config is BorderWidthConfig {
+  return config.hasOwnProperty("borderWidth");
+}
+
 function isTextSizeConfig(config: SingleColorConfig): config is TextSizeConfig {
   return config.hasOwnProperty("textSize");
 }
@@ -67,7 +72,9 @@ function isEmptyColor(color: string) {
 function isEmptyRadius(radius: string) {
   return _.isEmpty(radius);
 }
-
+function isEmptyBorderWidth(borderWidth: string) {
+  return _.isEmpty(borderWidth);
+}
 function isEmptyTextSize(textSize: string) {
   return _.isEmpty(textSize);
 }
@@ -97,6 +104,10 @@ function calcColors<ColorMap extends Record<string, string>>(
       res[name] = props[name];	
       return;	
     }
+    if (!isEmptyBorderWidth(props[name]) && isBorderWidthConfig(config)) {	
+      res[name] = props[name];	
+      return;	
+    }
     if (!isEmptyTextSize(props[name]) && isTextSizeConfig(config)) {	
       res[name] = props[name];	
       return;	
@@ -123,6 +134,9 @@ function calcColors<ColorMap extends Record<string, string>>(
     if (isRadiusConfig(config)) {
       res[name] = themeWithDefault[config.radius];
     }
+    if (isBorderWidthConfig(config)) {
+      res[name] = '1px';
+    }
     if (isTextSizeConfig(config)) {
       // TODO: remove default textSize after added in theme in backend.
       res[name] = themeWithDefault[config.textSize] || '14px';
@@ -261,7 +275,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
   colorConfigs.map((config) => {
     const name: Names<T> = config.name;
     if (	
-      name === "radius" ||	
+      name === "radius" ||
+      name === "borderWidth" ||
       name === "cardRadius" ||
       name === "textSize"
     ) {	
@@ -350,7 +365,8 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                 return controlItem(
                   { filterText: config.label },
                   <div key={index}>	
-                    {(name === "radius" ||	
+                    {(name === "radius" ||
+                    name === "borderWidth" ||
                     name === "gap" ||	
                     name === "cardRadius")
                       ? (	

client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

@@ -17,6 +17,10 @@ export type RadiusConfig = CommonColorConfig & {
   readonly radius: string;
 };
 
+export type BorderWidthConfig = CommonColorConfig & {
+  readonly borderWidth: string;
+};
+
 export type TextSizeConfig = CommonColorConfig & {
   readonly textSize: string;
 };
@@ -46,7 +50,7 @@ export type DepColorConfig = CommonColorConfig & {
   readonly depType?: DEP_TYPE;
   transformer: (color: string, ...rest: string[]) => string;
 };
-export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
+export type SingleColorConfig = SimpleColorConfig | DepColorConfig | RadiusConfig | BorderWidthConfig | TextSizeConfig | MarginConfig | PaddingConfig | ContainerHeaderPaddigConfig | ContainerFooterPaddigConfig | ContainerBodyPaddigConfig;
 
 export const defaultTheme: ThemeDetail = {
   primary: "#3377FF",
@@ -253,6 +257,12 @@ const RADIUS = {
   radius: "borderRadius",
 } as const;
 
+const BORDER_WIDTH = {
+  name: "borderWidth",
+  label: trans("style.borderWidth"),
+  borderWidth: "borderWidth",
+} as const;
+
 const MARGIN = {	
   name: "margin",	
   label: trans("style.margin"),	
@@ -705,6 +715,7 @@ export const TableRowStyle = [
 export const TableColumnStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder(),
+  BORDER_WIDTH,
   RADIUS,
   TEXT,
   TEXT_SIZE,

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -318,9 +318,9 @@ export const en = {
     staticText: "Static text",
     accent: "Accent",
     validate: "Validation message",
-    border: "Border",
+    border: "Border color",
     borderRadius: "Border radius",
-    borderwidth: "Border width",
+    borderWidth: "Border width",
     background: "Background",
     headerBackground: "Header background",
     footerBackground: "Footer background",
@@ -362,7 +362,7 @@ export const en = {
     containerfooterpadding: "Footer Padding",
     containerbodypadding: "Body Padding",
     minWidth: "Minimum Width",
-    textSize: "Text Size",
+    textSize: "Text size",
   },
   export: {
     hiddenDesc: "If true, the component is hidden",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -300,8 +300,9 @@ style: {
     staticText: "静态文本",
     accent: "强调色",
     validate: "验证消息",
-    border: "边框",
+    border: "边框颜色",
     borderRadius: "边框半径",
+    borderWidth: "边框宽度",
     background: "背景",
     headerBackground: "头部背景",
     footerBackground: "底部背景",