Merge branch 'dev' into feature/aliyun-oss

lowcoder-org · Mar 12, 2024 · ff909c5 · ff909c5
2 parents 02393ac + 8471891
commit ff909c5
Show file tree

Hide file tree

Showing 140 changed files with 3,359 additions and 1,133 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-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/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,
@@ -258,6 +258,7 @@ const childrenMap = {
   onEvent: InputEventHandlerControl,
   viewRef: RefControl<HTMLInputElement>,
   style: styleControl(InputLikeStyle),
+  labelStyle:styleControl(LabelStyle),
   prefixIcon: IconControl,
 
   // validation
@@ -380,6 +381,7 @@ let NumberInputTmpComp = (function () {
       required: props.required,
       children: <CustomInputNumber {...props} />,
       style: props.style,
+      labelStyle:props.labelStyle,
       ...validate(props),
     });
   })
@@ -427,9 +429,14 @@ let 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>
+          </>
         )}
       </>
     ))

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";
@@ -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>
       </>
     )}
   </>

diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -10,7 +10,7 @@ import { UICompBuilder, withDefault } from "../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 import { styleControl } from "comps/controls/styleControl";
-import { RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
+import { LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -44,6 +44,7 @@ const RatingBasicComp = (function () {
     disabled: BoolCodeControl,
     onEvent: eventHandlerControl(EventOptions),
     style: migrateOldData(styleControl(RatingStyle), fixOldData),
+    labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -64,6 +65,7 @@ const RatingBasicComp = (function () {
 
     return props.label({
       style: props.style,
+      labelStyle: props.labelStyle,
       children: (
         <RateStyled
           count={props.max}
@@ -93,14 +95,14 @@ const RatingBasicComp = (function () {
 
           {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <><Section name={sectionNames.interaction}>
-                {children.onEvent.getPropertyView()}
-                {disabledPropertyView(children)}
-                {hiddenPropertyView(children)}
-              </Section>
+              {children.onEvent.getPropertyView()}
+              {disabledPropertyView(children)}
+              {hiddenPropertyView(children)}
+            </Section>
               <Section name={sectionNames.advanced}>
-              {children.allowHalf.propertyView({
-                label: trans("rating.allowHalf"),
-              })}
+                {children.allowHalf.propertyView({
+                  label: trans("rating.allowHalf"),
+                })}
               </Section>
             </>
           )}
@@ -110,9 +112,14 @@ const RatingBasicComp = (function () {
           )}
 
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
-            </Section>
+            <>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.labelStyle}>
+                {children.labelStyle.getPropertyView()}
+              </Section>
+            </>
           )}
         </>
       );
@@ -144,6 +151,6 @@ const getStyle = (style: RatingStyleType) => {
   `;
 };
 
-export const RateStyled = styled(Rate)<{ $style: RatingStyleType }>`
+export const RateStyled = styled(Rate) <{ $style: RatingStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -21,6 +21,7 @@ let CascaderBasicComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       style: props.style,
+      labelStyle:props.labelStyle,
       children: (
         <CascaderStyle
           ref={props.viewRef}