diff --git a/.github/workflows/publish-lowcoder-cli.yml b/.github/workflows/publish-lowcoder-cli.yml
index 2aadbe488..f7b325e6f 100644
--- a/.github/workflows/publish-lowcoder-cli.yml
+++ b/.github/workflows/publish-lowcoder-cli.yml
@@ -9,7 +9,7 @@ on:
jobs:
publish-package:
- if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+ if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-comps.yml b/.github/workflows/publish-lowcoder-comps.yml
index 27ffb60f9..a83425cf5 100644
--- a/.github/workflows/publish-lowcoder-comps.yml
+++ b/.github/workflows/publish-lowcoder-comps.yml
@@ -9,7 +9,7 @@ on:
jobs:
publish-package:
- if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+ if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-core.yml b/.github/workflows/publish-lowcoder-core.yml
index 34222ad56..7fb0b1cd7 100644
--- a/.github/workflows/publish-lowcoder-core.yml
+++ b/.github/workflows/publish-lowcoder-core.yml
@@ -9,7 +9,7 @@ on:
jobs:
publish-package:
- if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+ if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-sdk.yml b/.github/workflows/publish-lowcoder-sdk.yml
index d9385b7d9..a597071ba 100644
--- a/.github/workflows/publish-lowcoder-sdk.yml
+++ b/.github/workflows/publish-lowcoder-sdk.yml
@@ -9,7 +9,7 @@ on:
jobs:
publish-package:
- if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+ if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
runs-on: ubuntu-latest
steps:
- name: Checkout repository
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index a1fb8182d..16166e3f2 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -57,6 +57,17 @@ import log from "loglevel";
import { DisabledContext } from "comps/generators/uiCompBuilder";
import { LoadingOutlined } from "@ant-design/icons";
import { messageInstance } from "lowcoder-design";
+import { styled } from "styled-components";
+
+const FormWrapper = styled.div`
+ height: 100%;
+ .ant-spin-nested-loading {
+ height: 100%;
+ .ant-spin-container {
+ height: 100%;
+ }
+ }
+`;
const eventOptions = [submitEvent] as const;
@@ -172,12 +183,18 @@ const FormBaseComp = (function () {
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
return (
-
- }
- />
-
+
+
+ }
+ />
+
+
);
})
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index ac113e849..39a392ad4 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -106,7 +106,7 @@ export const columnChildrenMap = {
borderWidth: withDefault(RadiusControl, ""),
radius: withDefault(RadiusControl, ""),
textSize: withDefault(RadiusControl, ""),
- textWeight: withDefault(StringControl, "regular"),
+ textWeight: withDefault(StringControl, "normal"),
fontFamily: withDefault(StringControl, "sans-serif"),
cellColor: CellColorComp,
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
@@ -276,7 +276,7 @@ export class ColumnComp extends ColumnInitComp {
{this.children.textWeight.propertyView({
label: trans('style.textWeight'),
preInputNode: ,
- placeholder: 'regular',
+ placeholder: 'normal',
})}
{this.children.fontFamily.propertyView({
label: trans('style.fontFamily'),
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index a398f0060..729e8f6b9 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -212,9 +212,6 @@ const TableWrapper = styled.div<{
border-color: ${(props) => props.$headerStyle.border};
border-width: ${(props) => props.$headerStyle.borderWidth};
color: ${(props) => props.$headerStyle.headerText};
- font-size: ${(props) => props.$headerStyle.textSize};
- font-weight: ${(props) => props.$headerStyle.textWeight};
- font-family: ${(props) => props.$headerStyle.fontFamily};
border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
${(props) =>
props.$fixedHeader && `
@@ -227,6 +224,12 @@ const TableWrapper = styled.div<{
> div {
margin: ${(props) => props.$headerStyle.margin};
+
+ &, .ant-table-column-title > div {
+ font-size: ${(props) => props.$headerStyle.textSize};
+ font-weight: ${(props) => props.$headerStyle.textWeight};
+ font-family: ${(props) => props.$headerStyle.fontFamily};
+ }
}
&:last-child {
@@ -516,7 +519,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,
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index afd010959..06a5ad955 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo
import { eventHandlerControl } from "comps/controls/eventHandlerControl";
import { TabsOptionControl } from "comps/controls/optionsControl";
import { styleControl } from "comps/controls/styleControl";
-import { TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
import { addMapChildAction } from "comps/generators/sameTypeMap";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
@@ -33,9 +33,6 @@ 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 = [
{
@@ -57,38 +54,52 @@ const childrenMap = {
disabled: BoolCodeControl,
showHeader: withDefault(BooleanStateControl, "true"),
style: styleControl(TabContainerStyle),
+ headerStyle: styleControl(ContainerHeaderStyle),
+ bodyStyle: styleControl(ContainerBodyStyle),
};
type ViewProps = RecordConstructorToView;
type TabbedContainerProps = ViewProps & { dispatch: DispatchType };
-const getStyle = (style: TabContainerStyleType) => {
+const getStyle = (
+ style: TabContainerStyleType,
+ headerStyle: ContainerHeaderStyleType,
+ bodyStyle: ContainerBodyStyleType,
+) => {
return css`
&.ant-tabs {
+ overflow: hidden;
border: ${style.borderWidth} solid ${style.border};
border-radius: ${style.radius};
- overflow: hidden;
padding: ${style.padding};
+ background-color: ${style.background};
+ background-image: ${style.backgroundImage};
+ background-repeat: ${style.backgroundImageRepeat};
+ background-size: ${style.backgroundImageSize};
+ background-position: ${style.backgroundImagePosition};
+ background-origin: ${style.backgroundImageOrigin};
+
+ > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
+ height: 100%;
+ .react-grid-layout {
+ border-radius: 0;
+ background-color: ${bodyStyle.background || 'transparent'};
+ background-image: ${bodyStyle.backgroundImage};
+ background-repeat: ${bodyStyle.backgroundImageRepeat};
+ background-size: ${bodyStyle.backgroundImageSize};
+ background-position: ${bodyStyle.backgroundImagePosition};
+ background-origin: ${bodyStyle.backgroundImageOrigin};
- > .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};
+ background-color: ${headerStyle.headerBackground || 'transparent'};
+ background-image: ${headerStyle.headerBackgroundImage};
+ background-repeat: ${headerStyle.headerBackgroundImageRepeat};
+ background-size: ${headerStyle.headerBackgroundImageSize};
+ background-position: ${headerStyle.headerBackgroundImagePosition};
+ background-origin: ${headerStyle.headerBackgroundImageOrigin};
.ant-tabs-tab {
div {
@@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => {
};
const StyledTabs = styled(Tabs)<{
- $style: TabContainerStyleType;
+ $style: TabContainerStyleType;
+ $headerStyle: ContainerHeaderStyleType;
+ $bodyStyle: ContainerBodyStyleType;
$isMobile?: boolean;
$showHeader?: boolean;
}>`
@@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{
margin-right: -24px;
}
- ${(props) => props.$style && getStyle(props.$style)}
+ ${(props) => props.$style && getStyle(
+ props.$style,
+ props.$headerStyle,
+ props.$bodyStyle,
+ )}
`;
const ContainerInTab = (props: ContainerBaseProps) => {
@@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => {
};
const TabbedContainer = (props: TabbedContainerProps) => {
- let { tabs, containers, dispatch, style } = props;
+ let {
+ tabs,
+ containers,
+ dispatch,
+ style,
+ headerStyle,
+ bodyStyle,
+ } = props;
const visibleTabs = tabs.filter((tab) => !tab.hidden);
const selectedTab = visibleTabs.find((tab) => tab.key === props.selectedTabKey.value);
@@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
key: tab.key,
forceRender: true,
children: (
-
+
{
{
if (key !== props.selectedTabKey.value) {
@@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
{children.style.getPropertyView()}
+ {children.showHeader.getView() && (
+
+ { children.headerStyle.getPropertyView() }
+
+ )}
+
+ { children.bodyStyle.getPropertyView() }
+
>
)}
>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index 613baf94e..eea06d569 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -18,6 +18,12 @@ const getStyle = (style: ContainerStyleType) => {
padding: ${style.padding};
// width: ${widthCalculator(style.margin)};
// height: ${heightCalculator(style.margin)};
+ ${style.background && `background-color: ${style.background};`}
+ ${style.backgroundImage && `background-image: ${style.backgroundImage};`}
+ ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
+ ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
+ ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
+ ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`}
`;
};
@@ -130,7 +136,7 @@ export function TriContainer(props: TriContainerProps) {
minHeight="46px"
containerPadding={[paddingWidth, 3]}
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
- $backgroundColor={headerStyle?.headerBackground}
+ $backgroundColor={headerStyle?.headerBackground || 'transparent'}
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
@@ -154,7 +160,7 @@ export function TriContainer(props: TriContainerProps) {
(showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
}
hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
- $backgroundColor={bodyStyle?.background}
+ $backgroundColor={bodyStyle?.background || 'transparent'}
$borderColor={style?.border}
$borderWidth={style?.borderWidth}
$backgroundImage={bodyStyle?.backgroundImage}
@@ -177,7 +183,7 @@ export function TriContainer(props: TriContainerProps) {
minHeight={showBody ? "47px" : "46px"}
containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
showName={{ top: showHeader || showBody ? 20 : 0 }}
- $backgroundColor={footerStyle?.footerBackground}
+ $backgroundColor={footerStyle?.footerBackground || 'transparent'}
$footerBackgroundImage={footerStyle?.footerBackgroundImage}
$footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
$footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index 6a1391171..669c450e3 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -393,7 +393,7 @@ function calcColors>(
}
if (isTextWeightConfig(config)) {
// TODO: remove default textWeight after added in theme in backend.
- res[name] = themeWithDefault[config.textWeight] || 'regular';
+ res[name] = themeWithDefault[config.textWeight] || 'normal';
}
if (isFontFamilyConfig(config)) {
res[name] = themeWithDefault[config.fontFamily] || 'sans-serif';
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 2ebd7a28a..5dea81d30 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -510,6 +510,38 @@ export const ContainerStyle = [
BORDER_WIDTH,
MARGIN,
PADDING,
+ {
+ name: "background",
+ label: trans("style.background"),
+ depName: "background",
+ depType: DEP_TYPE.SELF,
+ transformer: toSelf,
+ },
+ {
+ name: "backgroundImage",
+ label: trans("style.backgroundImage"),
+ backgroundImage: "backgroundImage",
+ },
+ {
+ name: "backgroundImageRepeat",
+ label: trans("style.backgroundImageRepeat"),
+ backgroundImageRepeat: "backgroundImageRepeat",
+ },
+ {
+ name: "backgroundImageSize",
+ label: trans("style.backgroundImageSize"),
+ backgroundImageSize: "backgroundImageSize",
+ },
+ {
+ name: "backgroundImagePosition",
+ label: trans("style.backgroundImagePosition"),
+ backgroundImagePosition: "backgroundImagePosition",
+ },
+ {
+ name: "backgroundImageOrigin",
+ label: trans("style.backgroundImageOrigin"),
+ backgroundImageOrigin: "backgroundImageOrigin",
+ },
] as const;
export const ContainerHeaderStyle = [
@@ -732,9 +764,6 @@ export const MultiSelectStyle = [
] as const;
export const TabContainerStyle = [
- ...BG_STATIC_BORDER_RADIUS,
- BORDER_WIDTH,
- HEADER_BACKGROUND,
{
name: "tabText",
label: trans("style.tabText"),
@@ -749,83 +778,7 @@ export const TabContainerStyle = [
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
- MARGIN,
- PADDING,
- {
- name: "headerBackgroundImage",
- label: trans("style.headerBackgroundImage"),
- headerBackgroundImage: "headerBackgroundImage",
- },
- {
- name: "headerBackgroundImageRepeat",
- label: trans("style.headerBackgroundImageRepeat"),
- headerBackgroundImageRepeat: "headerBackgroundImageRepeat",
- },
- {
- name: "headerBackgroundImageSize",
- label: trans("style.headerBackgroundImageSize"),
- headerBackgroundImageSize: "headerBackgroundImageSize",
- },
- {
- name: "headerBackgroundImagePosition",
- label: trans("style.headerBackgroundImagePosition"),
- headerBackgroundImagePosition: "headerBackgroundImagePosition",
- }
- ,{
- name: "headerBackgroundImageOrigin",
- label: trans("style.headerBackgroundImageOrigin"),
- headerBackgroundImageOrigin: "headerBackgroundImageOrigin",
- },
- {
- name: "backgroundImage",
- label: trans("style.backgroundImage"),
- backgroundImage: "backgroundImage",
- },
- {
- name: "backgroundImageRepeat",
- label: trans("style.backgroundImageRepeat"),
- backgroundImageRepeat: "backgroundImageRepeat",
- },
- {
- name: "backgroundImageSize",
- label: trans("style.backgroundImageSize"),
- backgroundImageSize: "backgroundImageSize",
- },
- {
- name: "backgroundImagePosition",
- label: trans("style.backgroundImagePosition"),
- backgroundImagePosition: "backgroundImagePosition",
- },
- {
- name: "backgroundImageOrigin",
- label: trans("style.backgroundImageOrigin"),
- backgroundImageOrigin: "backgroundImageOrigin",
- },
- {
- name: "footerBackgroundImage",
- label: trans("style.footerBackgroundImage"),
- footerBackgroundImage: "footerBackgroundImage",
- },
- {
- name: "footerBackgroundImageRepeat",
- label: trans("style.footerBackgroundImageRepeat"),
- footerBackgroundImageRepeat: "footerBackgroundImageRepeat",
- },
- {
- name: "footerBackgroundImageSize",
- label: trans("style.footerBackgroundImageSize"),
- footerBackgroundImageSize: "footerBackgroundImageSize",
- },
- {
- name: "footerBackgroundImagePosition",
- label: trans("style.footerBackgroundImagePosition"),
- footerBackgroundImagePosition: "footerBackgroundImagePosition",
- }
- ,{
- name: "footerBackgroundImageOrigin",
- label: trans("style.footerBackgroundImageOrigin"),
- footerBackgroundImageOrigin: "footerBackgroundImageOrigin",
- }
+ ...ContainerStyle,
] as const;
export const ModalStyle = [