diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx index 4c992874a..e89c0e49f 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx @@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing"; const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>` width: 100%; + font-family:"Montserrat"; ${(props) => props.$style && getStyle(props.$style)} `; diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx index 8152980d5..5a4a22e17 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx @@ -38,6 +38,7 @@ export const getStyle = (style: CheckboxStyleType) => { .ant-checkbox-inner { background-color: ${style.checkedBackground}; border-color: ${style.checkedBackground}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; &::after { border-color: ${style.checked}; @@ -46,6 +47,7 @@ export const getStyle = (style: CheckboxStyleType) => { &::after { border-color: ${style.checkedBackground}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; border-radius: ${style.radius}; } } @@ -54,15 +56,23 @@ export const getStyle = (style: CheckboxStyleType) => { border-radius: ${style.radius}; background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; } &:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner { border-color: ${style.checkedBackground}; + border-width:${!!style.borderWidth ? style.borderWidth : '2px'}; } } + .ant-checkbox-group-item { + font-family:${style.fontFamily}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + font-style:${style.fontStyle}; + } .ant-checkbox-wrapper { padding: ${style.padding}; .ant-checkbox-inner, @@ -73,7 +83,7 @@ export const getStyle = (style: CheckboxStyleType) => { `; }; -const CheckboxGroup = styled(AntdCheckboxGroup)<{ +const CheckboxGroup = styled(AntdCheckboxGroup) <{ $style: CheckboxStyleType; $layout: ValueFromOption; }>` diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx index e1bc7033c..af98eee25 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx @@ -21,6 +21,10 @@ const getStyle = (style: RadioStyleType) => { padding: ${style.padding}; span:not(.ant-radio) { ${EllipsisTextCss}; + font-family:${style.fontFamily}; + font-size:${style.textSize}; + font-weight:${style.textWeight}; + font-style:${style.fontStyle}; } .ant-radio-checked { @@ -37,7 +41,7 @@ const getStyle = (style: RadioStyleType) => { .ant-radio-inner { background-color: ${style.uncheckedBackground}; border-color: ${style.uncheckedBorder}; - + border-width:${style.borderWidth}; &::after { background-color: ${style.checked}; } diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index 86493bf76..c4b0d43ae 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -7,7 +7,7 @@ import { import { BoolControl } from "../../controls/boolControl"; import { LabelControl } from "../../controls/labelControl"; import { BoolCodeControl, StringControl } from "../../controls/codeControl"; -import { PaddingControl } from "../../controls/paddingControl"; +import { PaddingControl } from "../../controls/paddingControl"; import { MarginControl } from "../../controls/marginControl"; import { ControlNode, @@ -65,8 +65,15 @@ export const getStyle = ( height: auto; } .ant-select-selection-search { - padding: ${style.padding}; + padding: ${style.padding}; } + .ant-select-selection-search-input { + font-family:${(style as SelectStyleType).fontFamily} !important; + font-size:${(style as SelectStyleType).textSize} !important; + font-weight:${(style as SelectStyleType).textWeight}; + color:${(style as SelectStyleType).text} !important; + font-style:${(style as SelectStyleType).fontStyle}; + } .ant-select-selector::after, .ant-select-selection-placeholder, .ant-select-selection-item { @@ -88,6 +95,7 @@ export const getStyle = ( .ant-select-selector { background-color: ${style.background}; border-color: ${style.border}; + border-width:${(style as SelectStyleType).borderWidth}; } &.ant-select-focused, @@ -101,18 +109,18 @@ export const getStyle = ( .ant-select-clear { background-color: ${style.background}; color: ${style.text === "#222222" - ? "#8B8FA3" - : isDarkColor(style.text) - ? lightenColor(style.text, 0.2) - : style.text}; + ? "#8B8FA3" + : isDarkColor(style.text) + ? lightenColor(style.text, 0.2) + : style.text}; } .ant-select-clear:hover { color: ${style.text === "#222222" - ? "#8B8FA3" - : isDarkColor(style.text) - ? lightenColor(style.text, 0.1) - : style.text}; + ? "#8B8FA3" + : isDarkColor(style.text) + ? lightenColor(style.text, 0.1) + : style.text}; } &.ant-select-multiple .ant-select-selection-item { @@ -160,7 +168,7 @@ const getDropdownStyle = (style: MultiSelectStyleType) => { `; }; -const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>` +const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleType }>` width: 100%; ${(props) => props.$style && getStyle(props.$style)} @@ -197,7 +205,7 @@ export const SelectChildrenMap = { inputValue: stateComp(""), // user's input value when search showSearch: BoolControl.DEFAULT_TRUE, viewRef: RefControl, - margin: MarginControl, + margin: MarginControl, padding: PaddingControl, ...SelectInputValidationChildren, ...formDataChildren, @@ -235,8 +243,8 @@ export const SelectUIView = ( onSearch={ props.showSearch ? (value) => { - props.dispatch(changeChildAction("inputValue", value, false)); - } + props.dispatch(changeChildAction("inputValue", value, false)); + } : undefined } > @@ -248,6 +256,7 @@ export const SelectUIView = ( label={option.label} disabled={option.disabled} key={option.value} + style={{fontFamily:"Montserrat"}} > {props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 && diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx index d4305a928..8f4ef326b 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx @@ -23,19 +23,21 @@ type SelectEditProps = { options: any[]; }; +const defaultProps: any = {} const SelectEdit = (props: SelectEditProps) => { const [currentValue, setCurrentValue] = useState(props.initialValue); return ( - { props.onChange(val); setCurrentValue(val) }} - onEvent={async (eventName)=>{ - if(eventName==="blur"){ + onEvent={async (eventName) => { + if (eventName === "blur") { props.onChangeEnd() } return [] @@ -66,7 +68,8 @@ export const ColumnSelectComp = (function () { onChange={props.onChange} onChangeEnd={props.onChangeEnd} /> - )}) + ) + }) .setPropertyViewFn((children) => { return ( <> diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 49bbc52ec..30513a9af 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -735,20 +735,23 @@ export const SwitchStyle = [ ] as const; export const SelectStyle = [ - LABEL, - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), - TEXT, - MARGIN, - PADDING, + // LABEL, + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), + + // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + // TEXT, + // MARGIN, + // PADDING, ...ACCENT_VALIDATE, ] as const; const multiSelectCommon = [ - LABEL, - ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), - TEXT, - MARGIN, - PADDING, + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc")]), + // LABEL, + // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"), + // TEXT, + // MARGIN, + // PADDING, { name: "tags", label: trans("style.tags"), @@ -841,7 +844,8 @@ function checkAndUncheck() { } export const CheckboxStyle = [ - LABEL, + // LABEL, + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border'), ...checkAndUncheck(), { name: "checked", @@ -850,15 +854,16 @@ export const CheckboxStyle = [ depType: DEP_TYPE.CONTRAST_TEXT, transformer: contrastText, }, - RADIUS, - STATIC_TEXT, - VALIDATE, - MARGIN, - PADDING, + // RADIUS, + // STATIC_TEXT, + // VALIDATE, + // MARGIN, + // PADDING, ] as const; export const RadioStyle = [ - LABEL, + // LABEL, + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [LABEL, STATIC_TEXT, VALIDATE]).filter((style) => style.name !== 'border' && style.name !== 'radius'), ...checkAndUncheck(), { name: "checked", @@ -867,10 +872,10 @@ export const RadioStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - STATIC_TEXT, - VALIDATE, - MARGIN, - PADDING, + // STATIC_TEXT, + // VALIDATE, + // MARGIN, + // PADDING, ] as const; export const SegmentStyle = [ @@ -1019,7 +1024,7 @@ export const TableColumnLinkStyle = [ export const FileStyle = [ // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR), getStaticBackground(SURFACE_COLOR), - ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]), + ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'border', [getStaticBorder('#00000000')]), // TEXT, ACCENT, MARGIN, PADDING ] as const;