Merge branch 'dev' into add-appconfig-query

lowcoder-org · Mar 16, 2024 · 40bec08 · 40bec08
2 parents 278ad55 + ec9c177
commit 40bec08
Show file tree

Hide file tree

Showing 165 changed files with 3,805 additions and 1,304 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ client/node_modules/
 client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
+application-dev.yml
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "license": "MIT",
   "dependencies": {

diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
@@ -120,7 +120,9 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
 
   const handleOnMapScriptLoad = () => {
     setMapScriptLoaded(true);
-    loadGoogleMapData();
+    setTimeout(() => {
+      loadGoogleMapData();
+    })
   }
 
   useEffect(() => {

diff --git a/client/packages/lowcoder-design/src/components/Label.tsx b/client/packages/lowcoder-design/src/components/Label.tsx
@@ -5,7 +5,6 @@ export const labelCss: any = css`
   user-select: none;
 
   font-size: 13px;
-  color: #222222;
 
   &:hover {
     cursor: default;

diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -142,6 +142,7 @@ export const sectionNames = {
   validation: trans("prop.validation"),
   layout: trans("prop.layout"),
   style: trans("prop.style"),
+  labelStyle:trans("prop.labelStyle"),
   data: trans("prop.data"),
   meetings : trans("prop.meetings"), // added by Falk Wolsky
 };
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -22,6 +22,7 @@ export const en = {
     advanced: "Advanced",
     validation: "Validation",
     layout: "Layout",
+    labelStyle:"Label Style",
     style: "Style",
     meetings : "Meeting Settings",
     data: "Data",

diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts b/client/packages/lowcoder-design/src/i18n/design/locales/zh.ts
@@ -22,6 +22,7 @@ export const zh = {
       advanced: "高级",
       validation: "验证",
       layout: "布局",
+      labelStyle:"标签样式",
       style: "样式",
       meetings: "会议",
       data: "数据",

diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -290,7 +290,7 @@ export { ReactComponent as WidthIcon } from "./icon-width.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./icon-responsive-layout-comp.svg";
 export { ReactComponent as TextSizeIcon } from "./remix/font-size-2.svg";
 export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg";
-export { ReactComponent as TextWeigthIcon } from "./remix/bold.svg";
+export { ReactComponent as TextWeightIcon } from "./remix/bold.svg";
 export { ReactComponent as BorderWidthIcon } from "./remix/expand-width-line.svg";
 export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";
 export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg";

diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -5,6 +5,7 @@ import { styleControl } from "comps/controls/styleControl";
 import {
   InputLikeStyle,
   InputLikeStyleType,
+  LabelStyle,
 } from "comps/controls/styleControlConstants";
 import {
   NameConfig,
@@ -73,6 +74,7 @@ const childrenMap = {
   viewRef: RefControl<InputRef>,
   allowClear: BoolControl.DEFAULT_TRUE,
   style: styleControl(InputLikeStyle),
+  labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
   items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -276,8 +278,9 @@ let AutoCompleteCompBase = (function () {
           </ConfigProvider>
         </>
       ),
-      // style: props.style,
-      // ...validateState,
+      style: props.style,
+      labelStyle:props.labelStyle,
+      ...validateState,
     });
   })
     .setPropertyViewFn((children) => {
@@ -335,6 +338,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.labelStyle}>
+            {children.labelStyle.getPropertyView()}
+          </Section>
         </>
       );
     })

diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, depsConfig, withExposingConfigs } from "../../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
+import { DateTimeStyle, DateTimeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "../../generators/withMethodExposing";
 import {
   disabledPropertyView,
@@ -72,6 +72,7 @@ const commonChildren = {
   minuteStep: RangeControl.closed(1, 60, 1),
   secondStep: RangeControl.closed(1, 60, 1),
   style: styleControl(DateTimeStyle),
+  labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
   suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
   ...validationChildren,
   viewRef: RefControl<CommonPickerMethods>,
@@ -159,12 +160,13 @@ export type DateCompViewProps = Pick<
 
 export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
   let time = dayjs(null);
-  if(props.value.value !== '') {
+  if (props.value.value !== '') {
     time = dayjs(props.value.value, DateParser);
   }
   return props.label({
     required: props.required,
     style: props.style,
+    labelStyle:props.labelStyle,
     children: (
       <DateUIView
         viewRef={props.viewRef}
@@ -212,11 +214,11 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
 
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.validation}>
-              {requiredPropertyView(children)}
-              {dateValidationFields(children)}
-              {timeValidationFields(children)}
-              {children.customRule.propertyView({})}
-            </Section>
+            {requiredPropertyView(children)}
+            {dateValidationFields(children)}
+            {timeValidationFields(children)}
+            {children.customRule.propertyView({})}
+          </Section>
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
@@ -234,19 +236,24 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
             {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
           </Section>
         )}
-        
+
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
-           <><Section name={sectionNames.advanced}>
+          <><Section name={sectionNames.advanced}>
             {timeFields(children, isMobile)}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
           </Section></>
         )}
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
 
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <Section name={sectionNames.style}>
-            {children.style.getPropertyView()}
-          </Section>
+          <>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.labelStyle}>
+              {children.labelStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     );
@@ -264,10 +271,10 @@ export const dateRangeControl = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     let start = dayjs(null);
     let end = dayjs(null);
-    if(props.start.value !== '') {
+    if (props.start.value !== '') {
       start = dayjs(props.start.value, DateParser);
     }
-    if(props.end.value !== '') {
+    if (props.end.value !== '') {
       end = dayjs(props.end.value, DateParser);
     }
 
@@ -310,12 +317,13 @@ export const dateRangeControl = (function () {
     return props.label({
       required: props.required,
       style: props.style,
+      labelStyle:props.labelStyle,
       children: children,
       ...(startResult.validateStatus !== "success"
         ? startResult
         : endResult.validateStatus !== "success"
-        ? endResult
-        : startResult),
+          ? endResult
+          : startResult),
     });
   })
     .setPropertyViewFn((children) => {
@@ -337,11 +345,11 @@ export const dateRangeControl = (function () {
 
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.validation}>
-                {requiredPropertyView(children)}
-                {dateValidationFields(children)}
-                {timeValidationFields(children)}
-                {children.customRule.propertyView({})}
-              </Section>
+              {requiredPropertyView(children)}
+              {dateValidationFields(children)}
+              {timeValidationFields(children)}
+              {children.customRule.propertyView({})}
+            </Section>
               <Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
@@ -358,7 +366,7 @@ export const dateRangeControl = (function () {
               {children.placeholder.propertyView({ label: trans("date.placeholderText") })}
             </Section>
           )}
-          
+
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
             <><Section name={sectionNames.advanced}>
               {timeFields(children, isMobile)}
@@ -368,9 +376,14 @@ export const dateRangeControl = (function () {
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}
 
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-            <Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
-            </Section>
+            <>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.labelStyle}>
+                {children.labelStyle.getPropertyView()}
+              </Section>
+            </>
           )}
 
         </>

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -30,7 +30,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
 import { RefControl } from "../../controls/refControl";
 import { styleControl } from "comps/controls/styleControl";
-import { InputLikeStyle, InputLikeStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -52,6 +52,8 @@ import {
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { migrateOldData } from "comps/generators/simpleGenerators";
+import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 const getStyle = (style: InputLikeStyleType) => {
   return css`
@@ -256,6 +258,7 @@ const childrenMap = {
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
   style: styleControl(InputLikeStyle),
+  labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
 
   // validation
@@ -372,12 +375,13 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
   );
 };
 
-const NumberInputTmpComp = (function () {
+let NumberInputTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       required: props.required,
       children: <CustomInputNumber {...props} />,
       style: props.style,
+      labelStyle:props.labelStyle,
       ...validate(props),
     });
   })
@@ -425,15 +429,22 @@ const NumberInputTmpComp = (function () {
         )}
 
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
+          <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.labelStyle}>
+            {children.labelStyle.getPropertyView()}
+          </Section>
+          </>
         )}
       </>
     ))
     .build();
 })();
 
+NumberInputTmpComp = migrateOldData(NumberInputTmpComp, fixOldInputCompData);
+
 const NumberInputTmp2Comp = withMethodExposing(
   NumberInputTmpComp,
   refMethods([

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -15,6 +15,7 @@ const RangeSliderBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
+      labelStyle: props.labelStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {
@@ -28,7 +29,7 @@ const RangeSliderBasicComp = (function () {
             range={true}
             value={[props.start.value, props.end.value]}
             $style={props.style}
-            style={{margin: 0}}
+            style={{ margin: 0 }}
             onChange={([start, end]) => {
               props.start.onChange(start);
               props.end.onChange(end);

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -19,6 +19,7 @@ const SliderBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <SliderWrapper
           onMouseDown={(e: any) => {

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
+import { LabelStyle, SliderStyle, SliderStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
@@ -30,7 +30,7 @@ const getStyle = (style: SliderStyleType) => {
         }
         .ant-slider-handle {
           background-color: ${style.thumb};
-          border-color: ${style.thumbBoder};
+          border-color: ${style.thumbBorder};
         }
       }
       &:hover {
@@ -39,7 +39,7 @@ const getStyle = (style: SliderStyleType) => {
         }
       }
       .ant-slider-handle:focus {
-        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBoder, 0.08), 0.12)};
+        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
       }
     }
   `;
@@ -67,6 +67,7 @@ export const SliderChildren = {
   disabled: BoolCodeControl,
   onEvent: ChangeEventHandlerControl,
   style: styleControl(SliderStyle),
+  labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
   prefixIcon: IconControl,
   suffixIcon: IconControl,
 };
@@ -96,6 +97,9 @@ export const SliderPropertyView = (
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
         </Section>
+        <Section name={sectionNames.labelStyle}>
+          {children.labelStyle.getPropertyView()}
+        </Section>
       </>
     )}
   </>