Add properties and CSS controls to components

client/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "start": "yarn workspace lowcoder start",
+    "start-win":"LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
     "start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
     "start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
     "build": "yarn node ./scripts/build.js",

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

@@ -108,6 +108,7 @@ export const columnChildrenMap = {
   textSize: withDefault(RadiusControl, ""),
   textWeight: withDefault(StringControl, "normal"),
   fontFamily: withDefault(StringControl, "sans-serif"),
+  fontStyle: withDefault(StringControl, 'normal'),
   cellColor: CellColorComp,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
   linkColor: withDefault(ColorControl, "#3377ff"),
@@ -155,10 +156,10 @@ export class ColumnComp extends ColumnInitComp {
         )
       );
     }
-    if(action.type === CompActionTypes.CHANGE_VALUE) {
+    if (action.type === CompActionTypes.CHANGE_VALUE) {
       const title = comp.children.title.unevaledValue;
       const dataIndex = comp.children.dataIndex.getView();
-      if(!Boolean(title)) {
+      if (!Boolean(title)) {
         comp.children.title.dispatchChangeValueAction(dataIndex);
       }
     }
@@ -223,10 +224,10 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
-        
+
         {(columnType === 'link' || columnType === 'links') && (
           <>
-            <Divider style={{margin: '12px 0'}} />
+            <Divider style={{ margin: '12px 0' }} />
             {controlItem({}, (
               <div>
                 <b>{"Link Style"}</b>
@@ -243,10 +244,10 @@ export class ColumnComp extends ColumnInitComp {
             })}
           </>
         )}
-        <Divider style={{margin: '12px 0'}} />
+        <Divider style={{ margin: '12px 0' }} />
         {controlItem({}, (
           <div>
-             <b>{"Column Style"}</b>
+            <b>{"Column Style"}</b>
           </div>
         ))}
         {this.children.background.propertyView({
@@ -260,29 +261,34 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.borderWidth.propertyView({
           label: trans('style.borderWidth'),
-          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,	
+          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
           placeholder: '1px',
         })}
         {this.children.radius.propertyView({
           label: trans('style.borderRadius'),
-          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,	
+          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
           placeholder: '3px',
         })}
         {this.children.textSize.propertyView({
           label: trans('style.textSize'),
-          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,	
+          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
           placeholder: '14px',
         })}
         {this.children.textWeight.propertyView({
           label: trans('style.textWeight'),
-          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,	
+          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
           placeholder: 'normal',
         })}
         {this.children.fontFamily.propertyView({
           label: trans('style.fontFamily'),
-          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,	
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
           placeholder: 'sans-serif',
         })}
+        {this.children.fontStyle.propertyView({
+          label: trans('style.fontStyle'),
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+          placeholder: 'normal'
+        })}
         {this.children.textOverflow.getPropertyView()}
         {this.children.cellColor.getPropertyView()}
       </>

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

@@ -51,7 +51,7 @@ const getStyle = (
   style: TableStyleType,
   rowStyle: TableRowStyleType,
   headerStyle: TableHeaderStyleType,
-  toolbarStyle: TableToolbarStyleType
+  toolbarStyle: TableToolbarStyleType,
 ) => {
   const background = genLinerGradient(style.background);
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
@@ -140,7 +140,8 @@ const BackgroundWrapper = styled.div<{
   background: ${(props) => props.$style.background} !important;
   border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
-  padding: unset !important;
+  // padding: unset !important;
+  padding: ${(props) => props.$style.padding} !important
   margin: ${(props) => props.$style.margin} !important;
   overflow: scroll !important;
   ${(props) => props.$style}
@@ -209,18 +210,19 @@ const TableWrapper = styled.div<{
         > .ant-table-thead {
           > tr > th {
             background-color: ${(props) => props.$headerStyle.headerBackground};
+
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
             border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
-            ${(props) => 
-              props.$fixedHeader && `
+            ${(props) =>
+    props.$fixedHeader && `
                 position: sticky;
                 position: -webkit-sticky;
                 top: ${props.$fixedToolbar ? '47px' : '0'};
                 z-index: 99;
               `
-            }
+  }
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
@@ -229,6 +231,8 @@ const TableWrapper = styled.div<{
                 font-size: ${(props) => props.$headerStyle.textSize};
                 font-weight: ${(props) => props.$headerStyle.textWeight};
                 font-family: ${(props) => props.$headerStyle.fontFamily};
+                font-style: ${(props) => props.$headerStyle.fontStyle};
+                color:${(props) => props.$headerStyle.text}
               }
             }
 
@@ -286,8 +290,8 @@ const TableWrapper = styled.div<{
 
         // hide the bottom border of the last row
         ${(props) =>
-          props.$toolbarPosition !== "below" &&
-          `
+    props.$toolbarPosition !== "below" &&
+    `
             tbody > tr:last-child > td {
               border-bottom: unset;
             }
@@ -300,10 +304,10 @@ const TableWrapper = styled.div<{
     }
   }
 
-  ${(props) => 
+  ${(props) =>
     props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
 `;
-  
+
 const TableTh = styled.th<{ width?: number }>`
   overflow: hidden;
 
@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   $background: string;
-  $style: TableColumnStyleType & {rowHeight?: string};
+  $style: TableColumnStyleType & { rowHeight?: string };
   $defaultThemeDetail: ThemeDetail;
   $linkStyle?: TableColumnLinkStyleType;
   $isEditing: boolean;
@@ -348,7 +352,8 @@ const TableTd = styled.td<{
 
     ${(props) => props.$tableSize === 'small' && `
       padding: 1px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
+    font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '14px'};
       line-height: 20px;
       ${!props.$autoHeight && `
@@ -358,7 +363,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'middle' && `
       padding: 8px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '24px'};
       line-height: 24px;
       ${!props.$autoHeight && `
@@ -368,7 +374,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'large' && `
       padding: 16px 16px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '48px'};
       ${!props.$autoHeight && `
         overflow-y: auto;
@@ -444,7 +451,7 @@ const ResizeableTitle = (props: any) => {
       draggableOpts={{ enableUserSelectHack: false }}
       handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
         <TitleResizeHandle
-          ref={ref} 
+          ref={ref}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -519,7 +526,7 @@ function TableCellView(props: {
     const cellColor = cellColorFn({
       currentCell: record[title.toLowerCase()],
     });
-    
+
     const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
       margin: columnStyle.margin || columnsStyle.margin,
@@ -528,8 +535,9 @@ function TableCellView(props: {
       radius: columnStyle.radius || columnsStyle.radius,
       borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
-      textWeight: columnStyle.textWeight || columnsStyle.textWeight,
-      fontFamily: columnStyle.fontFamily || columnsStyle.fontFamily,
+      textWeight: columnsStyle.textWeight || columnStyle.textWeight,
+      fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
+      fontStyle: columnsStyle.fontStyle || columnStyle.fontStyle,
       rowHeight: rowHeight,
     }
     let { background } = style;
@@ -554,7 +562,7 @@ function TableCellView(props: {
       </TableTd>
     );
   }
-
+ 
   return (
     <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
       {tdView}
@@ -804,7 +812,7 @@ export function TableCompView(props: {
 
   return (
     <BackgroundColorContext.Provider value={style.background} >
-      
+
       <BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
         {toolbar.position === "above" && toolbarView}
         <TableWrapper
@@ -826,11 +834,11 @@ export function TableCompView(props: {
                 : "OB_CHILDREN_KEY_PLACEHOLDER",
               fixed: "left",
               onExpand: (expanded) => {
-              if(expanded) {
-                handleChangeEvent('rowExpand')
-              } else {
-                handleChangeEvent('rowShrink')
-              }
+                if (expanded) {
+                  handleChangeEvent('rowExpand')
+                } else {
+                  handleChangeEvent('rowShrink')
+                }
               }
             }}
             rowColorFn={compChildren.rowColor.getView() as any}
@@ -857,14 +865,14 @@ export function TableCompView(props: {
               compChildren.loading.getView()
             }
           />
-          
+
           <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
             {expansion.expandModalView}
           </SlotConfigContext.Provider>
         </TableWrapper>
         {toolbar.position === "below" && toolbarView}
       </BackgroundWrapper>
-      
+
     </BackgroundColorContext.Provider>
   );
 }

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

@@ -210,7 +210,7 @@ const tableChildrenMap = {
   toolbarStyle: styleControl(TableToolbarStyle),
   headerStyle: styleControl(TableHeaderStyle),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
+  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns

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

@@ -311,6 +311,7 @@ export function columnsToAntdFormat(
       status: StatusType;
     }[];
     const title = renderTitle({ title: column.title, editable: column.editable });
+
     return {
       title: column.showTitle ? title : '',
       titleText: column.title,
@@ -326,6 +327,7 @@ export function columnsToAntdFormat(
         radius: column.radius,
         textSize: column.textSize,
         textWeight: column.textWeight,
+        fontStyle:column.fontStyle,
         fontFamily: column.fontFamily,
         borderWidth: column.borderWidth,
       },

client/packages/lowcoder/src/comps/comps/textComp.tsx

@@ -29,6 +29,7 @@ const getStyle = (style: TextStyleType) => {
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
+    font-style:${style.fontStyle} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};
@@ -111,7 +112,7 @@ const VerticalAlignmentOptions = [
 ] as const;
 
 
-let TextTmpComp = (function () {  
+let TextTmpComp = (function () {
 
   const childrenMap = {
     text: stringExposingStateControl(
@@ -123,7 +124,7 @@ let TextTmpComp = (function () {
     horizontalAlignment: alignWithJustifyControl(),
     verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
     style: styleControl(TextStyle),
-    margin: MarginControl,	
+    margin: MarginControl,
     padding: PaddingControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -145,7 +146,7 @@ let TextTmpComp = (function () {
     .setPropertyViewFn((children) => {
       return (
         <>
-        
+
           <Section name={sectionNames.basic}>
             {children.type.propertyView({
               label: trans("value"),
@@ -160,7 +161,7 @@ let TextTmpComp = (function () {
               {hiddenPropertyView(children)}
             </Section>
           )}
-        
+
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <>
               <Section name={sectionNames.layout}>

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

@@ -229,6 +229,7 @@ export function getStyle(style: InputLikeStyleType) {
       font-size: ${style.textSize};
       font-weight: ${style.textWeight};
       font-family: ${style.fontFamily};
+      font-style:${style.fontStyle};
       background-color: ${style.background};
       border-color: ${style.border};
 
@@ -275,10 +276,10 @@ export const inputRefMethods = [
 ];
 
 export function checkMentionListData(data: any) {
-  if(data === "") return {}
-  for(const key in data) {
-    check(data[key], ["array"], key,(node)=>{
-      check(node, ["string"], );
+  if (data === "") return {}
+  for (const key in data) {
+    check(data[key], ["array"], key, (node) => {
+      check(node, ["string"],);
       return node
     })
   }