lowcoder-org · FalkWolsky · Jan 16, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 15, 2024
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -177,4 +177,4 @@ const ColorBlock = styled.div<{ $color: string }>`
   cursor: pointer;
   background-clip: content-box;
   overflow: hidden;
-`;
+`;
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
@@ -197,7 +197,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}
       {colorKey === "margin" && (	
         <div className="config-input">	
-          <Margin $margin={defaultMargin || "3px"}>	
+          <Margin $margin={defaultMargin || "4px"}>	
             <div>	
               <ExpandIcon title="" />	
             </div>	
@@ -215,7 +215,7 @@ export default function ColorPicker(props: ColorConfigProps) {
       )}	
       {colorKey === "padding" && (	
         <div className="config-input">	
-          <Padding $padding={defaultPadding || "3px"}>	
+          <Padding $padding={defaultPadding || "4px"}>	
             <div>	
               <CompressIcon title="" />	
             </div>	

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -16,30 +16,30 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
       margin: ${buttonStyle.margin};	
       padding: ${buttonStyle.padding};
       &:not(:disabled) {
-        // click animation color
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
         color: ${buttonStyle.text};
+        font-size: ${buttonStyle.textSize};
+        font-weight: ${buttonStyle.textWeight};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};	
         padding: ${buttonStyle.padding};
 
-        :hover,
-        :focus {
+        &:hover,
+        &:focus {
           color: ${buttonStyle.text};
           background-color: ${hoverColor};
           border-color: ${buttonStyle.border === buttonStyle.background
             ? hoverColor
-            : buttonStyle.border};
+            : buttonStyle.border} !important;
         }
-
-        :active {
+        &:active {
           color: ${buttonStyle.text};
           background-color: ${activeColor};
           border-color: ${buttonStyle.border === buttonStyle.background
             ? activeColor
-            : buttonStyle.border};
+            : buttonStyle.border} !important;
         }
       }
     }
@@ -54,11 +54,11 @@ export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  gap: 6px; 
   span {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  gap: 6px;
 `;
 
 export const ButtonCompWrapper = styled.div<{ disabled: boolean }>`

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -41,7 +41,11 @@ export const ContainerBaseComp = (function () {
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.layout}>
               {children.container.getPropertyView()}
-            </Section><Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section></>
+            </Section>
+            <Section name={sectionNames.style}>
+              { children.container.stylePropertyView() }
+            </Section>
+            </>
           )}
         </>
       );

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -318,7 +318,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
   const defaultGrid =
     useContext(ThemeContext)?.theme?.gridColumns ||
     defaultTheme?.gridColumns ||
-    "24";
+    "12";
   /////////////////////
   const isDroppable =
     useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;

diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
+import * as ReactDOMClient from 'react-dom/client';
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -59,9 +60,8 @@ const defaultCode = `
   );
 
   const ConnectedComponent = ${trans("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
-
-  const container = document.getElementById("root");
-  const root = createRoot(container);
+  const container = document.getElementById('root');
+  const root = ReactDOMClient.createRoot(container);
   root.render(<ConnectedComponent />);
 
   </script>

diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { stringExposingStateControl } from "comps/controls/codeStateControl";
+import { BooleanStateControl, booleanExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { NameGenerator } from "comps/utils";
-import { Section, sectionNames } from "lowcoder-design";
+import { ControlNode, Section, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
 import React, { useCallback, useContext } from "react";
@@ -33,6 +33,9 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design";
+import { show } from "antd-mobile/es/components/dialog/show";
+import { BoolControl } from "@lowcoder-ee/index.sdk";
+import { Switch } from "antd";
 
 const EVENT_OPTIONS = [
   {
@@ -52,27 +55,40 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   onEvent: eventHandlerControl(EVENT_OPTIONS),
   disabled: BoolCodeControl,
+  showHeader: BooleanStateControl,
   style: styleControl(TabContainerStyle),
 };
 
 type ViewProps = RecordConstructorToView<typeof childrenMap>;
 type TabbedContainerProps = ViewProps & { dispatch: DispatchType };
-
+ 
 const getStyle = (style: TabContainerStyleType) => {
   return css`
     &.ant-tabs {
-      border: 1px solid ${style.border};
+      border: ${style.borderWidth} solid ${style.border};
       border-radius: ${style.radius};
       overflow: hidden;
-      padding: ${style.padding};	
+      padding: ${style.padding};
 
       > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout {
         background-color: ${style.background};
         border-radius: 0;
+
+        background-image: ${style.backgroundImage};
+        background-repeat: ${style.backgroundImageRepeat};
+        background-size: ${style.backgroundImageSize};
+        background-position: ${style.backgroundImagePosition};
+        background-origin: ${style.backgroundImageOrigin};
+
       }
 
       > .ant-tabs-nav {
         background-color: ${style.headerBackground};
+        background-image: ${style.headerBackgroundImage};
+        background-repeat: ${style.headerBackgroundImageRepeat};
+        background-size: ${style.headerBackgroundImageSize};
+        background-position: ${style.headerBackgroundImagePosition};
+        background-origin: ${style.headerBackgroundImageOrigin};
 
         .ant-tabs-tab {
           div {
@@ -96,7 +112,11 @@ const getStyle = (style: TabContainerStyleType) => {
   `;
 };
 
-const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boolean }>`
+const StyledTabs = styled(Tabs)<{ 
+  $style: TabContainerStyleType; 
+  $isMobile?: boolean; 
+  $showHeader?: boolean;
+}>`
   &.ant-tabs {
     height: 100%;
   }
@@ -111,6 +131,7 @@ const StyledTabs = styled(Tabs)<{ $style: TabContainerStyleType; $isMobile?: boo
   }
 
   .ant-tabs-nav {
+    display: ${(props) => (props.$showHeader ? "block" : "none")};
     padding: 0 ${(props) => (props.$isMobile ? 16 : 24)}px;
     background: white;
     margin: 0px;
@@ -158,12 +179,10 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   const editorState = useContext(EditorContext);
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
-  const paddingWidth = isMobile ? 8 : 20;
-
-  // log.debug("TabbedContainer. props: ", props);
+  const showHeader = props.showHeader.value;
+  const paddingWidth = isMobile ? 8 : 0;
 
   const tabItems = visibleTabs.map((tab) => {
-    // log.debug("Tab. tab: ", tab, " containers: ", containers);
     const id = String(tab.id);
     const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
     const containerProps = containers[id].children;
@@ -203,6 +222,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
     <StyledTabs
       activeKey={activeKey}
       $style={style}
+      $showHeader={showHeader}
       onChange={(key) => {
         if (key !== props.selectedTabKey.value) {
           props.selectedTabKey.onChange(key);
@@ -220,6 +240,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   );
 };
 
+
 export const TabbedContainerBaseComp = (function () {
   return new UICompBuilder(childrenMap, (props, dispatch) => {
     return (
@@ -238,11 +259,12 @@ export const TabbedContainerBaseComp = (function () {
             })}
             {children.selectedTabKey.propertyView({ label: trans("prop.defaultValue") })}
           </Section>
-
+        
           {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
+              {children.showHeader.propertyView({ label: trans("prop.showHeader") })}
               {hiddenPropertyView(children)}
             </Section>
           )}
@@ -364,6 +386,8 @@ class TabbedContainerImplComp extends TabbedContainerBaseComp implements IContai
   override autoHeight(): boolean {
     return this.children.autoHeight.getView();
   }
+
+
 }
 
 export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp, [

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -26,6 +26,8 @@ const getStyle = (style: TextStyleType) => {
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
+    font-size: ${style.textSize} !important;
+    font-weight: ${style.textWeight} !important;
     background-color: ${style.background};
     .markdown-body a {
       color: ${style.links};

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -9,8 +9,9 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
 import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
 
 const getStyle = (style: ContainerStyleType) => {
-  return css`
+  return css` 
     border-color: ${style.border};
+    border-width: ${style.borderWidth};
     border-radius: ${style.radius};
     overflow: hidden;
     // margin: ${style.margin};	
@@ -29,32 +30,64 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string }>`
+const HeaderInnerGrid = styled(InnerGrid)<{ 
+  $backgroundColor: string
+  $headerBackgroundImage: string;
+  $headerBackgroundImageRepeat: string;
+  $headerBackgroundImageSize: string;
+  $headerBackgroundImagePosition: string;
+  $headerBackgroundImageOrigin: string;
+ }>`
   overflow: visible;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
+  ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
+  ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
+  ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
+  ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
 `;
 
 const BodyInnerGrid = styled(InnerGrid)<{
   $showBorder: boolean;
   $backgroundColor: string;
   $borderColor: string;
+  $backgroundImage: string;
+  $backgroundImageRepeat: string;
+  $backgroundImageSize: string;
+  $backgroundImagePosition: string;
+  $backgroundImageOrigin: string;
 }>`
   border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   flex: 1;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
+  ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
+  ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
+  ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
+  ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
 `;
 
 const FooterInnerGrid = styled(InnerGrid)<{
   $showBorder: boolean;
   $backgroundColor: string;
   $borderColor: string;
+  $footerBackgroundImage: string;
+  $footerBackgroundImageRepeat: string;
+  $footerBackgroundImageSize: string;
+  $footerBackgroundImagePosition: string;
+  $footerBackgroundImageOrigin: string;
 }>`
   border-top: ${(props) => `${props.$showBorder ? 1 : 0}px solid ${props.$borderColor}`};
   overflow: visible;
   ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
   border-radius: 0;
+  ${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
+  ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
+  ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
+  ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
+  ${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`}
 `;
 
 export type TriContainerProps = TriContainerViewProps & {
@@ -75,7 +108,7 @@ export function TriContainer(props: TriContainerProps) {
   const editorState = useContext(EditorContext);
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
-  const paddingWidth = isMobile ? 7 : 19;
+  const paddingWidth = isMobile ? 8 : 0;
 
   return (
     <div style={{padding: style.margin, height: '100%'}}>
@@ -91,7 +124,13 @@ export function TriContainer(props: TriContainerProps) {
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
             $backgroundColor={style?.headerBackground}
+            $headerBackgroundImage={style?.headerBackgroundImage}
+            $headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
+            $headerBackgroundImageSize={style?.headerBackgroundImageSize}
+            $headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
+            $headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
             style={{padding: style.containerheaderpadding}}
+
           />
         </BackgroundColorContext.Provider>
       )}
@@ -110,6 +149,11 @@ export function TriContainer(props: TriContainerProps) {
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
             $backgroundColor={style?.background}
             $borderColor={style?.border}
+            $backgroundImage={style?.backgroundImage}
+            $backgroundImageRepeat={style?.backgroundImageRepeat}
+            $backgroundImageSize={style?.backgroundImageSize}
+            $backgroundImagePosition={style?.backgroundImagePosition}
+            $backgroundImageOrigin={style?.backgroundImageOrigin}
             style={{padding: style.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>
@@ -126,6 +170,11 @@ export function TriContainer(props: TriContainerProps) {
             containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
             showName={{ top: showHeader || showBody ? 20 : 0 }}
             $backgroundColor={style?.footerBackground}
+            $footerBackgroundImage={style?.footerBackgroundImage}
+            $footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
+            $footerBackgroundImageSize={style?.footerBackgroundImageSize}
+            $footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
+            $footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
             $borderColor={style?.border}
             style={{padding: style.containerfooterpadding}}
           />