From 72ad4f38c775d07724403771faebd67032617992 Mon Sep 17 00:00:00 2001 From: FalkWolsky Date: Mon, 25 Mar 2024 00:15:39 +0100 Subject: [PATCH 1/3] Fixing Remote Comp Loader --- .../lowcoder/src/comps/comps/remoteComp/loaders.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx index 4353f9fbb..c007ba524 100644 --- a/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx +++ b/client/packages/lowcoder/src/comps/comps/remoteComp/loaders.tsx @@ -14,11 +14,10 @@ async function npmLoader( console.log("remoteInfo: ", remoteInfo); // Falk: removed "packageVersion = "latest" as default value fir packageVersion - to ensure no automatic version jumping. - + const localPackageVersion = remoteInfo.packageVersion || "latest"; const { packageName, packageVersion, compName } = remoteInfo; - const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${packageVersion}/index.js`; - // const entry = `../../../../../public/package/index.js`; - // console.log("Entry", entry); + const entry = `${NPM_PLUGIN_ASSETS_BASE_URL}/${packageName}@${localPackageVersion}/index.js`; + try { const module = await import(/* webpackIgnore: true */ entry); const comp = module.default?.[compName]; From f4006e04bc991abf2fc103f1a000b9630ebb58a2 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Mon, 13 May 2024 03:31:33 +0500 Subject: [PATCH 2/3] border amd color styling fixes --- .../src/comps/comps/dateComp/dateComp.tsx | 7 +++- .../comps/numberInputComp/numberInputComp.tsx | 4 +- .../numberInputComp/sliderCompConstants.tsx | 2 +- .../lowcoder/src/comps/comps/ratingComp.tsx | 2 +- .../selectInputComp/segmentedControl.tsx | 11 ++++-- .../comps/selectInputComp/stepControl.tsx | 4 +- .../comps/comps/textInputComp/inputComp.tsx | 4 +- .../comps/textInputComp/passwordComp.tsx | 2 +- .../comps/textInputComp/textAreaComp.tsx | 2 +- .../comps/comps/treeComp/treeSelectComp.tsx | 4 +- .../comps/controls/styleControlConstants.tsx | 37 ++++++++++++++----- 11 files changed, 54 insertions(+), 25 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 2d485b0d9..f3182b38f 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -50,6 +50,11 @@ import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView"; import { EditorContext } from "comps/editorState"; +const defaultStyle = { + borderStyle: 'solid', + borderWidth: '1px', +} + const EventOptions = [changeEvent, focusEvent, blurEvent] as const; const validationChildren = { @@ -76,7 +81,7 @@ const commonChildren = { suffixIcon: withDefault(IconControl, "/icon:regular/calendar"), ...validationChildren, viewRef: RefControl, - inputFieldStyle:styleControl(DateTimeStyle) + inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle), }; type CommonChildrenType = RecordConstructorToComp; diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx index b504f66d2..cd633ec48 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx @@ -257,11 +257,11 @@ const childrenMap = { allowNull: BoolControl, onEvent: InputEventHandlerControl, viewRef: RefControl, - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle:styleControl(LabelStyle), prefixText : stringExposingStateControl("defaultValue"), prefixIcon: IconControl, - inputFieldStyle:styleControl(InputLikeStyle), + inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) , // validation required: BoolControl, min: UndefinedNumberControl, diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index cdac7348f..ad4c7e206 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -71,7 +71,7 @@ export const SliderChildren = { label: LabelControl, disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)), prefixIcon: IconControl, suffixIcon: IconControl, diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 0f095d5a6..3bf8e8549 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -43,7 +43,7 @@ const RatingBasicComp = (function () { allowHalf: BoolControl, disabled: BoolCodeControl, onEvent: eventHandlerControl(EventOptions), - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)), inputFieldStyle:migrateOldData(styleControl(RatingStyle), fixOldData), ...formDataChildren, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index a73827c2a..a2a473df0 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -25,14 +25,19 @@ import { RefControl } from "comps/controls/refControl"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import { fixOldInputCompData } from "../textInputComp/textInputConstants"; const getStyle = (style: SegmentStyleType) => { return css` - &.ant-segmented:not(.ant-segmented-disabled) { background-color: ${style.background}; + border: ${style?.border}; + border-style: ${style?.borderStyle}; + border-width: ${style?.borderWidth}; + border-radius: ${style?.radius}; + &.ant-segmented:not(.ant-segmented-disabled) { + &, .ant-segmented-item-selected, @@ -79,7 +84,7 @@ const SegmentChildrenMap = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: SelectOptionControl, - style: styleControl(SegmentStyle), + style: withDefault(styleControl(SegmentStyle),{borderWidth:'1px'}), viewRef: RefControl, ...SelectInputValidationChildren, diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 78163c559..f45e300bc 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -7,7 +7,7 @@ import { StepOptionControl } from "comps/controls/optionsControl"; import { styleControl } from "comps/controls/styleControl"; import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; -import { UICompBuilder } from "../../generators"; +import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { selectDivRefMethods, } from "./selectInputConstants"; import { Section, sectionNames } from "lowcoder-design"; @@ -91,7 +91,7 @@ const StepsChildrenMap = { disabled: BoolCodeControl, onEvent: ChangeEventHandlerControl, options: StepOptionControl, - style: styleControl(StepsStyle), + style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}), viewRef: RefControl }; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx index bb81449ac..3e71e3b3d 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx @@ -31,7 +31,7 @@ import { IconControl } from "comps/controls/iconControl"; import { hasIcon } from "comps/utils"; import { InputRef } from "antd/es/input"; import { RefControl } from "comps/controls/refControl"; -import { migrateOldData } from "comps/generators/simpleGenerators"; +import { migrateOldData, withDefault } from "comps/generators/simpleGenerators"; import React, { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -49,7 +49,7 @@ const childrenMap = { viewRef: RefControl, showCount: BoolControl, allowClear: BoolControl, - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), prefixIcon: IconControl, suffixIcon: IconControl, diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx index da4e14211..ca005ea32 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx @@ -57,7 +57,7 @@ let PasswordTmpComp = (function () { validationType: dropdownControl(TextInputValidationOptions, "Regex"), visibilityToggle: BoolControl.DEFAULT_TRUE, prefixIcon: IconControl, - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), inputFieldStyle: styleControl(InputLikeStyle) }; diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index b6e4966fb..530ce4afe 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -71,7 +71,7 @@ let TextAreaTmpComp = (function () { viewRef: RefControl, allowClear: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle: styleControl(LabelStyle), inputFieldStyle: styleControl(InputLikeStyle) }; diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index 2771d1512..0b9f6d3da 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -65,9 +65,9 @@ const childrenMap = { allowClear: BoolControl, showSearch: BoolControl.DEFAULT_TRUE, inputValue: stateComp(""), // search value - style: styleControl(InputFieldStyle), + style: withDefault(styleControl(InputFieldStyle), {borderWidth: '1px'}), labelStyle:styleControl(LabelStyle), - inputFieldStyle:styleControl(TreeSelectStyle), + inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}), viewRef: RefControl, }; diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 177400446..1d5957332 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -899,7 +899,9 @@ export const LabelStyle = [ export const InputFieldStyle = [ getStaticBackground(SURFACE_COLOR), - ...STYLING_FIELDS_CONTAINER_SEQUENCE, + getStaticBorder(), + ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter((style) => ['border'].includes(style.name) === false), + // ...STYLING_FIELDS_CONTAINER_SEQUENCE, ] as const; export const RatingStyle = [ @@ -1062,20 +1064,35 @@ export const RadioStyle = [ HOVER_BACKGROUND_COLOR ] as const; + export const SegmentStyle = [ LABEL, ...STYLING_FIELDS_SEQUENCE.filter((style) => ['border', 'borderWidth'].includes(style.name) === false), + // getStaticBorder(SECOND_SURFACE_COLOR), + { + name: "border", + label: trans("style.border"), + depName: "background", + transformer: backgroundToBorder, + }, + { + name: "borderWidth", + label: trans("style.borderWidth"), + borderWidth: "borderWidth", + }, + + getStaticBackground(SURFACE_COLOR), { name: "indicatorBackground", label: trans("style.indicatorBackground"), color: SURFACE_COLOR, }, - { - name: "background", - label: trans("style.background"), - depName: "indicatorBackground", - transformer: handleToSegmentBackground, - }, + // { + // name: "background", + // label: trans("style.background"), + // depName: "indicatorBackground", + // transformer: toSelf, + // }, { name: "text", label: trans("text"), @@ -1083,6 +1100,7 @@ export const SegmentStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, + VALIDATE, ] as const; @@ -1096,8 +1114,8 @@ export const StepsStyle = [ { name: "titleText", label: trans("title"), - depName: "background", - depType: DEP_TYPE.CONTRAST_TEXT, + depName: "text", + depType: DEP_TYPE.SELF, transformer: contrastText, }, ...STYLING_FIELDS_SEQUENCE.filter((style) => ['background', 'textSize','textDecoration'].includes(style.name) === false), @@ -1268,6 +1286,7 @@ export const IframeStyle = [getBackground(), getStaticBorder("#00000000"), RADIU export const DateTimeStyle = [ ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), + getStaticBorder(SECOND_SURFACE_COLOR), TEXT, MARGIN, PADDING, From 7a16a9d2e54364b4782f2a6b7e91692778db1522 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Mon, 13 May 2024 13:30:01 +0500 Subject: [PATCH 3/3] segment control container styles fixed --- .../src/comps/comps/selectInputComp/segmentedControl.tsx | 7 ------- .../packages/lowcoder/src/comps/controls/labelControl.tsx | 1 + 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx index a2a473df0..8470bd8b1 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx @@ -31,14 +31,7 @@ import { fixOldInputCompData } from "../textInputComp/textInputConstants"; const getStyle = (style: SegmentStyleType) => { return css` - background-color: ${style.background}; - border: ${style?.border}; - border-style: ${style?.borderStyle}; - border-width: ${style?.borderWidth}; - border-radius: ${style?.radius}; &.ant-segmented:not(.ant-segmented-disabled) { - - &, .ant-segmented-item-selected, .ant-segmented-thumb, diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx index 86e32ce77..81a46774e 100644 --- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx @@ -57,6 +57,7 @@ ${(props) => { display: flex; flex-direction: column; height: 100%; + border: ${(props)=>{return props.$style.borderWidth}} ${(props)=>{return props.$style.borderStyle}} ${(props)=>{return props.$style.border}} !important; `; const MainWrapper = styled.div<{