apply theme styles on container comps

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx

@@ -20,7 +20,6 @@ import {
 import { PageLayout } from "../pageLayoutComp/pageLayout";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
@@ -30,8 +29,7 @@ export const ContainerBaseComp = (function () {
 
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
 
-    const [siderCollapsed, setSiderCollapsed] = useState(false);
-    useMergeCompStyles(props as Record<string, any>, dispatch);    
+    const [siderCollapsed, setSiderCollapsed] = useState(false);  
 
     return (
       <DisabledContext.Provider value={props.disabled}>

client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx

@@ -26,6 +26,7 @@ const getStyle = (style: ContainerStyleType) => {
   return css`
     border-color: ${style.border};
     border-width: ${style.borderWidth};
+    border-style: ${style.borderStyle};
     border-radius: ${style.radius};
     overflow: hidden;
     padding: ${style.padding};

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

@@ -10,7 +10,7 @@ import {
   ContainerFooterStyle,
 } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, valueComp } from "comps/generators/simpleGenerators";
 import { NameGenerator } from "comps/utils";
 import { fromRecord, Node } from "lowcoder-core";
 import { nodeIsRecord } from "lowcoder-core";
@@ -57,6 +57,7 @@ const childrenMap = {
   siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
   bodyStyle: styleControl(ContainerBodyStyle , 'bodyStyle'),
   footerStyle: styleControl(ContainerFooterStyle , 'footerStyle'),
+  appliedThemeId: valueComp<string>(''),
 };
 
 // Compatible with old style data 2022-8-15

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

@@ -9,7 +9,7 @@ import {
   ContainerFooterStyle,
 } from "comps/controls/styleControlConstants";
 import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, valueComp } from "comps/generators/simpleGenerators";
 import { NameGenerator } from "comps/utils";
 import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core";
 import { nodeIsRecord } from "lowcoder-core";
@@ -45,6 +45,7 @@ const childrenMap = {
   headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'),
   bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'),
   footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'),
+  appliedThemeId: valueComp<string>(''), // for comp containing container, comps's appliedThemeId will always be empty so maintaining here
 };
 
 // Compatible with old style data 2022-8-15

client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx

@@ -20,7 +20,7 @@ import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuild
 const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
-    border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
+    border: ${(style.borderWidth ? style.borderWidth : "0px")} ${(style.borderStyle ? style.borderStyle : "solid")} ${style.border};
     color: ${style.text};
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
@@ -76,7 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
   display: flex;
   flex-flow: column;
   height: 100%;
-  border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border};
+  border: ${(props) => props.$style.borderWidth} ${(props) => (props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border};
   border-radius: ${(props) => props.$style.radius};
   background-color: ${(props) => props.$style.background};
   padding: ${(props) => props.$style.padding};

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

@@ -867,7 +867,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const appSettingsComp = editorState?.getAppSettingsComp();
       const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
       const { themeId } = theme || {}; 
-      const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
+      const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {};
       const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
         ? theme?.theme
         : undefined;
@@ -879,7 +879,6 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
       const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
         ? props as ColorMap
         : {} as ColorMap;
-      
 
       return calcColors(
         styleProps,

client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

@@ -273,7 +273,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             settingsKey: 'borderStyle',
             name: trans('themeDetail.borderStyle'),
             desc: trans('themeDetail.borderStyleDesc'),
-            type: "radius",
+            type: "borderStyle",
             value: this.state.theme.borderStyle,
           }
         ]
@@ -466,6 +466,16 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                   }}
                                 />
                               }
+                              {layoutSettingsItem.type == "borderStyle" && 
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  borderStyle={layoutSettingsItem.value}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                />
+                              }
                               {layoutSettingsItem.type == "margin" && 
                                 <ThemeSettingsSelector
                                   themeSettingKey={layoutSettingsItem.settingsKey}