Content-Length: 100605 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1815.patch
thub.com
From 4cc299e4c9944f0529693136ad5e5a72b3548fe1 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 16:53:42 +0500
Subject: [PATCH 01/12] fix linter errrors
---
.../comps/buttonComp/buttonCompConstants.tsx | 16 +++++++++-------
.../src/comps/controls/styleControlConstants.tsx | 2 +-
2 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 7a54ba4280..686e12176d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -73,13 +73,15 @@ export const ButtonCompWrapper = styled.div<{ $disabled: boolean }>`
// The button component is disabled but can respond to drag & select events
${(props) =>
- props.$disabled &&
- `
- cursor: not-allowed;
- button:disabled {
- pointer-events: none;
- }
- `};
+ props.$disabled
+ ? `
+ cursor: not-allowed;
+ button:disabled {
+ pointer-events: none;
+ }
+ `
+ : ""
+ }
`;
/**
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 92b64b7eb4..3025af6666 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -961,7 +961,7 @@ function replaceAndMergeMultipleStyles(
export const ButtonStyle = [
getBackground('primary'),
- ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='lineHeight'),
+ ...STYLING_FIELDS_SEQUENCE,
] as const;
export const DropdownStyle = [
From 2e0ec4091b2cb51ecc28aed8bd51d2a5a97a4153 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 17:25:28 +0500
Subject: [PATCH 02/12] add button disabled styles
---
.../comps/buttonComp/buttonCompConstants.tsx | 11 +++++++
.../comps/comps/buttonComp/scannerComp.tsx | 5 ++--
.../comps/controls/styleControlConstants.tsx | 30 +++++++++++++++++++
.../packages/lowcoder/src/i18n/locales/en.ts | 3 ++
4 files changed, 46 insertions(+), 3 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 686e12176d..c857a9cc10 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -48,6 +48,17 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
: buttonStyle.border} !important;
}
}
+
+ /* Disabled state styling */
+ &:disabled,
+ &.ant-btn-disabled {
+ color: ${buttonStyle.disabledText || buttonStyle.text};
+ background: ${buttonStyle.disabledBackground || buttonStyle.background};
+ border-color: ${
+ buttonStyle.disabledBorder || buttonStyle.border
+ } !important;
+ cursor: not-allowed;
+ }
}
`;
}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 811ed91be3..a4ecd85a6c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -4,11 +4,10 @@ import {
Button100,
ButtonCompWrapper,
buttonRefMethods,
+ ButtonStyleControl,
} from "comps/comps/buttonComp/buttonCompConstants";
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { styleControl } from "comps/controls/styleControl";
-import { DropdownStyle } from "comps/controls/styleControlConstants";
import { withDefault } from "comps/generators";
import { UICompBuilder } from "comps/generators/uiCompBuilder";
import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -127,7 +126,7 @@ const ScannerTmpComp = (function () {
maskClosable: withDefault(BoolControl, true),
onEvent: ScannerEventHandlerControl,
disabled: BoolCodeControl,
- style: styleControl(DropdownStyle, "style"),
+ style: ButtonStyleControl,
viewRef: RefControl,
};
return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 3025af6666..d6670b6f5f 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -959,9 +959,39 @@ function replaceAndMergeMultipleStyles(
return temp;
}
+// Add disabled style constants
+const DISABLED_BACKGROUND = {
+ name: "disabledBackground",
+ label: trans("style.disabledBackground"),
+ color: SECOND_SURFACE_COLOR,
+} as const;
+
+const DISABLED_BORDER = {
+ name: "disabledBorder",
+ label: trans("style.disabledBorder"),
+ depName: "disabledBackground",
+ transformer: backgroundToBorder,
+} as const;
+
+const DISABLED_TEXT = {
+ name: "disabledText",
+ label: trans("style.disabledText"),
+ depName: "disabledBackground",
+ depType: DEP_TYPE.CONTRAST_TEXT,
+ transformer: contrastText,
+} as const;
+
+// Re-export for reuse in other components if needed
+export const DISABLED_STYLE_FIELDS = [
+ DISABLED_BACKGROUND,
+ DISABLED_BORDER,
+ DISABLED_TEXT,
+] as const;
+
export const ButtonStyle = [
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE,
+ ...DISABLED_STYLE_FIELDS,
] as const;
export const DropdownStyle = [
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 44f5f4b1dd..b8836cb4df 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -511,6 +511,9 @@ export const en = {
"tabAccent": "Tab Accent",
"checkedBackground": "Checked Background Color",
"uncheckedBackground": "Unchecked Background Color",
+ "disabledBackground": "Disabled Background Color",
+ "disabledBorder": "Disabled Border Color",
+ "disabledText": "Disabled Text Color",
"uncheckedBorder": "Unchecked Border Color",
"indicatorBackground": "Indicator Background Color",
"tableCellText": "Cell Text",
From ede27eb1304d6bbb9095d1aa057d13faee3e3bfc Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 17:40:59 +0500
Subject: [PATCH 03/12] add disabled styles for togglebtn
---
.../lowcoder/src/comps/controls/styleControlConstants.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index d6670b6f5f..6d7af22ef9 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1013,6 +1013,7 @@ export const ToggleButtonStyle = [
...style,
};
}),
+ ...DISABLED_STYLE_FIELDS,
] as const;
export const TextStyle = [
From 59452d208fc6b2da4878188f2a1fe92b8ddd88b8 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 18:06:56 +0500
Subject: [PATCH 04/12] make a seperate section for disabled
---
.../src/comps/comps/buttonComp/buttonComp.tsx | 4 ++++
.../comps/buttonComp/buttonCompConstants.tsx | 21 ++++++++++++-------
.../comps/controls/styleControlConstants.tsx | 6 +++++-
3 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 70a8de5d83..7c2775e0ed 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -21,6 +21,7 @@ import {
ButtonCompWrapper,
buttonRefMethods,
ButtonStyleControl,
+ DisabledButtonStyleControl,
} from "./buttonCompConstants";
import { RefControl } from "comps/controls/refControl";
import { Tooltip } from "antd";
@@ -133,6 +134,7 @@ const childrenMap = {
prefixIcon: IconControl,
suffixIcon: IconControl,
style: ButtonStyleControl,
+ disabledStyle: DisabledButtonStyleControl,
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
viewRef: RefControl,
tooltip: StringControl
@@ -173,6 +175,7 @@ const ButtonPropertyView = React.memo((props: {
{props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
{props.children.style.getPropertyView()}
+ {props.children.disabledStyle.getPropertyView()}
)}
@@ -212,6 +215,7 @@ const ButtonView = React.memo((props: ToViewReturn) => {
`
- ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{
+ $buttonStyle?: ButtonStyleType;
+ $disabledStyle?: any;
+}>`
+ ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
width: 100%;
height: auto;
display: inline-flex;
@@ -116,6 +119,10 @@ function fixOldData(oldData: any) {
const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
+// Create disabled style control
+const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle, 'disabledStyle');
+export const DisabledButtonStyleControl = migrateOldData(DisabledButtonTmpStyleControl, fixOldData);
+
export const buttonRefMethods = refMethods([
focusWithOptions,
blurMethod,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 6d7af22ef9..9e808f913d 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -991,6 +991,10 @@ export const DISABLED_STYLE_FIELDS = [
export const ButtonStyle = [
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE,
+] as const;
+
+// Create separate disabled style control
+export const DisabledButtonStyle = [
...DISABLED_STYLE_FIELDS,
] as const;
@@ -1013,7 +1017,6 @@ export const ToggleButtonStyle = [
...style,
};
}),
- ...DISABLED_STYLE_FIELDS,
] as const;
export const TextStyle = [
@@ -2321,6 +2324,7 @@ export type InputFieldStyleType = StyleConfigType;
export type SignatureContainerStyleType = StyleConfigType;
export type ColorPickerStyleType = StyleConfigType;
export type ButtonStyleType = StyleConfigType;
+export type DisabledButtonStyleType = StyleConfigType;
export type ToggleButtonStyleType = StyleConfigType;
export type TextStyleType = StyleConfigType;
export type TextContainerStyleType = StyleConfigType;
From 864a887ff3afaa15da7573e8f97886c04b3786c3 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 18:26:10 +0500
Subject: [PATCH 05/12] add disabled styles for toggled button
---
.../lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index 0184fb87ac..f9ee2f089e 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -12,7 +12,7 @@ import { trans } from "i18n";
import styled from "styled-components";
import { ChangeEventHandlerControl } from "../../controls/eventHandlerControl";
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompConstants";
+import { Button100, ButtonCompWrapper, buttonRefMethods, DisabledButtonStyleControl } from "./buttonCompConstants";
import { IconControl } from "comps/controls/iconControl";
import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
import { booleanExposingStateControl } from "comps/controls/codeStateControl";
@@ -63,6 +63,7 @@ const ToggleTmpComp = (function () {
iconPosition: LeftRightControl,
alignment: AlignWithStretchControl,
style: styleControl(ToggleButtonStyle , 'style'),
+ disabledStyle: DisabledButtonStyleControl,
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
showBorder: withDefault(BoolControl, true),
viewRef: RefControl,
@@ -84,6 +85,7 @@ const ToggleTmpComp = (function () {
{
@@ -153,6 +155,7 @@ const ToggleTmpComp = (function () {
)}
+ {children.disabledStyle.getPropertyView()}
))
.setExposeMethodConfigs(buttonRefMethods)
From 56e71f6155f5c1758629b712f76359a7ba73eea3 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 19:26:18 +0500
Subject: [PATCH 06/12] add disabled input styles
---
.../comps/numberInputComp/numberInputComp.tsx | 33 +++++++++++++++--
.../comps/comps/textInputComp/inputComp.tsx | 19 ++++++++--
.../comps/textInputComp/passwordComp.tsx | 15 +++++++-
.../comps/textInputComp/textAreaComp.tsx | 15 +++++++-
.../comps/controls/styleControlConstants.tsx | 35 +++++++++++++++++++
5 files changed, 111 insertions(+), 6 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 7dbacf9005..ae81a01ce6 100644
--- 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 { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import {
disabledPropertyView,
hiddenPropertyView,
@@ -59,7 +59,6 @@ const getStyle = (style: InputLikeStyleType) => {
return css`
border-radius: ${style.radius};
border-width:${style.borderWidth} !important;
- // line-height: ${style.lineHeight} !important;
// still use antd style when disabled
&:not(.ant-input-number-disabled) {
color: ${style.text};
@@ -122,11 +121,36 @@ const getStyle = (style: InputLikeStyleType) => {
const InputNumber = styled(AntdInputNumber)<{
$style: InputLikeStyleType;
+ $disabledStyle?: DisabledInputStyleType;
}>`
box-shadow: ${(props) =>
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
width: 100%;
${(props) => props.$style && getStyle(props.$style)}
+
+ /* Disabled state styling */
+ &:disabled,
+ &.ant-input-number-disabled {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
+ cursor: not-allowed;
+
+ .ant-input-number-input {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ }
+
+ .ant-input-number-handler-wrap {
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
+
+ .ant-input-number-handler span {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ opacity: 0.3;
+ }
+ }
+ }
`;
const FormatterOptions = [
@@ -266,6 +290,7 @@ const childrenMap = {
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
prefixIcon: IconControl,
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+ disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
// validation
required: BoolControl,
showValidationWhenEmpty: BoolControl,
@@ -382,6 +407,7 @@ const CustomInputNumber = (props: RecordConstructorToView) =
stringMode={true}
precision={props.precision}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledInputStyle}
prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
onPressEnter={() => {
@@ -473,6 +499,9 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
+
+ {children.disabledInputStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index cfbdfe0428..2aebed4335 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -1,7 +1,7 @@
import { Input, Section, sectionNames } from "lowcoder-design";
import { BoolControl } from "comps/controls/boolControl";
import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, LabelStyleType, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
import {
NameConfig,
NameConfigPlaceHolder,
@@ -42,10 +42,22 @@ import { EditorContext } from "comps/editorState";
* Input Comp
*/
-const InputStyle = styled(Input)<{$style: InputLikeStyleType}>`
+const InputStyle = styled(Input)<{
+ $style: InputLikeStyleType;
+ $disabledStyle?: DisabledInputStyleType;
+}>`
box-shadow: ${(props) =>
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
${(props) => props.$style && getStyle(props.$style)}
+
+ /* Disabled state styling */
+ &:disabled,
+ &.ant-input-disabled {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
+ cursor: not-allowed;
+ }
`;
const childrenMap = {
@@ -59,6 +71,7 @@ const childrenMap = {
suffixIcon: IconControl,
inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+ disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
tabIndex: NumberControl,
};
@@ -73,6 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
showCount={props.showCount}
allowClear={props.allowClear}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledInputStyle}
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -114,6 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+ {children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 4347043874..15b4352f58 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -26,7 +26,7 @@ import {
import { withMethodExposing } from "../../generators/withMethodExposing";
import { styleControl } from "comps/controls/styleControl";
import styled from "styled-components";
-import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
import {
hiddenPropertyView,
minLengthPropertyView,
@@ -46,10 +46,20 @@ import { NumberControl } from "comps/controls/codeControl";
const PasswordStyle = styled(InputPassword)<{
$style: InputLikeStyleType;
+ $disabledStyle?: DisabledInputStyleType;
}>`
box-shadow: ${(props) =>
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
${(props) => props.$style && getStyle(props.$style)}
+
+ /* Disabled state styling */
+ &:disabled,
+ &.ant-input-disabled {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
+ cursor: not-allowed;
+ }
`;
let PasswordTmpComp = (function () {
@@ -64,6 +74,7 @@ let PasswordTmpComp = (function () {
labelStyle: styleControl(LabelStyle,'labelStyle'),
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+ disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
tabIndex: NumberControl,
};
return new UICompBuilder(childrenMap, (props, dispatch) => {
@@ -78,6 +89,7 @@ let PasswordTmpComp = (function () {
ref={props.viewRef}
visibilityToggle={props.visibilityToggle}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledInputStyle}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
/>
),
@@ -124,6 +136,7 @@ let PasswordTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+ {children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index c8a7582eb8..cf1b6575f7 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -22,7 +22,7 @@ import {
import { withMethodExposing, refMethods } from "../../generators/withMethodExposing";
import { styleControl } from "comps/controls/styleControl";
import styled from "styled-components";
-import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, InputLikeStyle, InputLikeStyleType, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
import { TextArea } from "components/TextArea";
import {
allowClearPropertyView,
@@ -41,10 +41,20 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
const TextAreaStyled = styled(TextArea)<{
$style: InputLikeStyleType;
+ $disabledStyle?: DisabledInputStyleType;
}>`
box-shadow: ${(props) =>
`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
${(props) => props.$style && getStyle(props.$style)}
+
+ /* Disabled state styling */
+ &:disabled,
+ &.ant-input-disabled {
+ color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
+ background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
+ cursor: not-allowed;
+ }
`;
const Wrapper = styled.div<{
@@ -82,6 +92,7 @@ let TextAreaTmpComp = (function () {
textAreaScrollBar: withDefault(BoolControl, false),
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+ disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
tabIndex: NumberControl
};
return new UICompBuilder(childrenMap, (props) => {
@@ -98,6 +109,7 @@ let TextAreaTmpComp = (function () {
allowClear={props.allowClear}
style={{ height: "100% !important", resize: "vertical" }}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledInputStyle}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
/>
@@ -141,6 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
+ {children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 9e808f913d..a6f4feb2a7 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -988,6 +988,35 @@ export const DISABLED_STYLE_FIELDS = [
DISABLED_TEXT,
] as const;
+// Add disabled style constants specifically for text input components
+const DISABLED_INPUT_BACKGROUND = {
+ name: "disabledBackground",
+ label: trans("style.disabledBackground"),
+ color: SECOND_SURFACE_COLOR,
+} as const;
+
+const DISABLED_INPUT_BORDER = {
+ name: "disabledBorder",
+ label: trans("style.disabledBorder"),
+ depName: "disabledInputBackground",
+ transformer: backgroundToBorder,
+} as const;
+
+const DISABLED_INPUT_TEXT = {
+ name: "disabledText",
+ label: trans("style.disabledText"),
+ depName: "disabledInputBackground",
+ depType: DEP_TYPE.CONTRAST_TEXT,
+ transformer: contrastText,
+} as const;
+
+// Re-export for reuse in textInput components
+export const DISABLED_INPUT_STYLE_FIELDS = [
+ DISABLED_INPUT_BACKGROUND,
+ DISABLED_INPUT_BORDER,
+ DISABLED_INPUT_TEXT,
+] as const;
+
export const ButtonStyle = [
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE,
@@ -1259,6 +1288,11 @@ export const InputLikeStyle = [
...ACCENT_VALIDATE,
] as const;
+// Create separate disabled style control for text inputs
+export const DisabledInputStyle = [
+ ...DISABLED_INPUT_STYLE_FIELDS,
+] as const;
+
// added by Mousheng
export const ColorPickerStyle = [
@@ -2325,6 +2359,7 @@ export type SignatureContainerStyleType = StyleConfigType;
export type ButtonStyleType = StyleConfigType;
export type DisabledButtonStyleType = StyleConfigType;
+export type DisabledInputStyleType = StyleConfigType;
export type ToggleButtonStyleType = StyleConfigType;
export type TextStyleType = StyleConfigType;
export type TextContainerStyleType = StyleConfigType;
From 9ad28bb706d06eae0e9ef8176fa716f7e83969b9 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 19:56:11 +0500
Subject: [PATCH 07/12] remove border styles from disables
---
.../comps/buttonComp/buttonCompConstants.tsx | 3 ---
.../comps/numberInputComp/numberInputComp.tsx | 10 ----------
.../src/comps/comps/textInputComp/inputComp.tsx | 1 -
.../comps/comps/textInputComp/passwordComp.tsx | 1 -
.../comps/comps/textInputComp/textAreaComp.tsx | 1 -
.../src/comps/controls/styleControlConstants.tsx | 15 +--------------
6 files changed, 1 insertion(+), 30 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 973f0dc62e..cc907ee1d4 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -54,9 +54,6 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
&.ant-btn-disabled {
color: ${disabledStyle?.disabledText || buttonStyle.text};
background: ${disabledStyle?.disabledBackground || buttonStyle.background};
- border-color: ${
- disabledStyle?.disabledBorder || buttonStyle.border
- } !important;
cursor: not-allowed;
}
}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index ae81a01ce6..bd14c7f647 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -133,7 +133,6 @@ const InputNumber = styled(AntdInputNumber)<{
&.ant-input-number-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
- border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
.ant-input-number-input {
@@ -141,15 +140,6 @@ const InputNumber = styled(AntdInputNumber)<{
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
}
- .ant-input-number-handler-wrap {
- background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
- border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
-
- .ant-input-number-handler span {
- color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
- opacity: 0.3;
- }
- }
}
`;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 2aebed4335..a8cfd8bfb5 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -55,7 +55,6 @@ const InputStyle = styled(Input)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
- border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 15b4352f58..62eaddd8e7 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -57,7 +57,6 @@ const PasswordStyle = styled(InputPassword)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
- border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index cf1b6575f7..a0121743c6 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -52,7 +52,6 @@ const TextAreaStyled = styled(TextArea)<{
&.ant-input-disabled {
color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
- border-color: ${(props) => props.$disabledStyle?.disabledBorder || props.$style.border} !important;
cursor: not-allowed;
}
`;
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index a6f4feb2a7..5523755596 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -966,12 +966,7 @@ const DISABLED_BACKGROUND = {
color: SECOND_SURFACE_COLOR,
} as const;
-const DISABLED_BORDER = {
- name: "disabledBorder",
- label: trans("style.disabledBorder"),
- depName: "disabledBackground",
- transformer: backgroundToBorder,
-} as const;
+
const DISABLED_TEXT = {
name: "disabledText",
@@ -984,7 +979,6 @@ const DISABLED_TEXT = {
// Re-export for reuse in other components if needed
export const DISABLED_STYLE_FIELDS = [
DISABLED_BACKGROUND,
- DISABLED_BORDER,
DISABLED_TEXT,
] as const;
@@ -995,12 +989,6 @@ const DISABLED_INPUT_BACKGROUND = {
color: SECOND_SURFACE_COLOR,
} as const;
-const DISABLED_INPUT_BORDER = {
- name: "disabledBorder",
- label: trans("style.disabledBorder"),
- depName: "disabledInputBackground",
- transformer: backgroundToBorder,
-} as const;
const DISABLED_INPUT_TEXT = {
name: "disabledText",
@@ -1013,7 +1001,6 @@ const DISABLED_INPUT_TEXT = {
// Re-export for reuse in textInput components
export const DISABLED_INPUT_STYLE_FIELDS = [
DISABLED_INPUT_BACKGROUND,
- DISABLED_INPUT_BORDER,
DISABLED_INPUT_TEXT,
] as const;
From 3f516ab8b0004704dc75fd10a6f4dc15f26efa1d Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 20:06:35 +0500
Subject: [PATCH 08/12] add disable styles slider
---
.../comps/numberInputComp/sliderComp.tsx | 1 +
.../numberInputComp/sliderCompConstants.tsx | 36 ++++++++++++++--
.../comps/controls/styleControlConstants.tsx | 43 +++++++++++++++++++
3 files changed, 76 insertions(+), 4 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index e31117cdf3..a1156ec690 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -46,6 +46,7 @@ const SliderBasicComp = (function () {
{...props}
value={props.value.value}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledSliderStyle}
style={{margin: 0}}
$vertical={Boolean(props.vertical) || false}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index ae4c5abd88..1eb0fc74c8 100644
--- 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, lightenColor, sectionNames } from "lowcoder-design";
import { RecordConstructorToComp } from "lowcoder-core";
import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleType, DisabledSliderStyle, DisabledSliderStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import styled, { css } from "styled-components";
import { default as Slider } from "antd/es/slider";
import { darkenColor, fadeColor } from "lowcoder-design";
@@ -15,7 +15,7 @@ import { trans } from "i18n";
import { memo, useCallback, useContext } from "react";
import { EditorContext } from "comps/editorState";
-const getStyle = (style: SliderStyleType, vertical: boolean) => {
+const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: DisabledSliderStyleType) => {
return css`
&.ant-slider:not(.ant-slider-disabled) {
&,
@@ -56,11 +56,35 @@ const getStyle = (style: SliderStyleType, vertical: boolean) => {
margin: ${style.margin} auto !important;
`}
}
+
+ /* Disabled state styling */
+ &.ant-slider-disabled {
+ .ant-slider-rail {
+ background-color: ${disabledStyle?.disabledTrack || lightenColor(style.track, 0.2)} !important;
+ }
+ .ant-slider-track {
+ background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
+ }
+ .ant-slider-handle {
+ background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important;
+ border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important;
+ cursor: not-allowed !important;
+ }
+ ${vertical && css`
+ width: auto;
+ min-height: calc(300px - ${style.margin});
+ margin: ${style.margin} auto !important;
+ `}
+ }
`;
};
-export const SliderStyled = styled(Slider)<{ $style: SliderStyleType, $vertical: boolean }>`
- ${(props) => props.$style && getStyle(props.$style, props.$vertical)}
+export const SliderStyled = styled(Slider)<{
+ $style: SliderStyleType,
+ $vertical: boolean,
+ $disabledStyle?: DisabledSliderStyleType
+}>`
+ ${(props) => props.$style && getStyle(props.$style, props.$vertical, props.$disabledStyle)}
`;
export const SliderWrapper = styled.div<{ $vertical: boolean }>`
@@ -88,6 +112,7 @@ export const SliderChildren = {
prefixIcon: IconControl,
suffixIcon: IconControl,
inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
+ disabledSliderStyle: styleControl(DisabledSliderStyle, 'disabledSliderStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle')
};
@@ -132,6 +157,9 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp
{children.inputFieldStyle.getPropertyView()}
+
+ {children.disabledSliderStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 5523755596..21a90e622e 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1004,6 +1004,43 @@ export const DISABLED_INPUT_STYLE_FIELDS = [
DISABLED_INPUT_TEXT,
] as const;
+// Add disabled style constants specifically for slider components
+const DISABLED_SLIDER_FILL = {
+ name: "disabledFill",
+ label: trans("style.disabledFill"),
+ depName: "fill",
+ transformer: (color: string) => lightenColor(color, 0.3),
+} as const;
+
+const DISABLED_SLIDER_TRACK = {
+ name: "disabledTrack",
+ label: trans("style.disabledTrack"),
+ depName: "track",
+ transformer: (color: string) => lightenColor(color, 0.2),
+} as const;
+
+const DISABLED_SLIDER_THUMB = {
+ name: "disabledThumb",
+ label: trans("style.disabledThumb"),
+ depName: "thumb",
+ transformer: (color: string) => lightenColor(color, 0.25),
+} as const;
+
+const DISABLED_SLIDER_THUMB_BORDER = {
+ name: "disabledThumbBorder",
+ label: trans("style.disabledThumbBorder"),
+ depName: "thumbBorder",
+ transformer: (color: string) => lightenColor(color, 0.25),
+} as const;
+
+// Re-export for reuse in slider components
+export const DISABLED_SLIDER_STYLE_FIELDS = [
+ DISABLED_SLIDER_FILL,
+ DISABLED_SLIDER_TRACK,
+ DISABLED_SLIDER_THUMB,
+ DISABLED_SLIDER_THUMB_BORDER,
+] as const;
+
export const ButtonStyle = [
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE,
@@ -1267,6 +1304,11 @@ export const SliderStyle = [
PADDING,
] as const;
+// Create separate disabled style control for sliders
+export const DisabledSliderStyle = [
+ ...DISABLED_SLIDER_STYLE_FIELDS,
+] as const;
+
export const InputLikeStyle = [
getStaticBackground(SURFACE_COLOR),
BOXSHADOW,
@@ -2362,6 +2404,7 @@ export type ContainerFooterStyleType = StyleConfigType<
typeof ContainerFooterStyle
>;
export type SliderStyleType = StyleConfigType;
+export type DisabledSliderStyleType = StyleConfigType;
export type RatingStyleType = StyleConfigType;
export type SwitchStyleType = StyleConfigType;
export type SelectStyleType = StyleConfigType;
From c9a8de4a153747c8811890aa3b261b44e7660328 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 20:14:18 +0500
Subject: [PATCH 09/12] add disabled styles on range slider fix
---
.../lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
index 74b32347d2..48480bacd9 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx
@@ -65,6 +65,7 @@ const RangeSliderBasicComp = (function () {
range={true}
value={[props.start.value, props.end.value]}
$style={props.inputFieldStyle}
+ $disabledStyle={props.disabledSliderStyle}
style={{ margin: 0 }}
$vertical={Boolean(props.vertical) || false}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
From c9cdee73836193e1d2519654bfe7e0099d462c95 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Thu, 26 Jun 2025 21:46:53 +0500
Subject: [PATCH 10/12] add placeholder styling for input
---
.../textInputComp/textInputConstants.tsx | 19 +++++++++++++++++--
.../comps/controls/styleControlConstants.tsx | 14 ++++++++++++++
2 files changed, 31 insertions(+), 2 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 006d263f39..bacb892bd8 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -315,8 +315,23 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
}
&::-webkit-input-placeholder {
- color: ${style.text};
- opacity: 0.4;
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::-moz-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &:-ms-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
}
.ant-input-show-count-suffix,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 21a90e622e..9633235372 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -244,9 +244,14 @@ export type DepColorConfig = CommonColorConfig & {
transformer: (color: string, ...rest: string[]) => string;
};
+export type PlaceholderConfig = CommonColorConfig & {
+ readonly placeholder?: string;
+};
+
export type SingleColorConfig =
| SimpleColorConfig
| DepColorConfig
+ | PlaceholderConfig
| RadiusConfig
| BorderWidthConfig
| RotationConfig
@@ -1309,11 +1314,19 @@ export const DisabledSliderStyle = [
...DISABLED_SLIDER_STYLE_FIELDS,
] as const;
+const PLACEHOLDER = {
+ name: "placeholder",
+ label: "Placeholder",
+ depName: "text",
+ transformer: (color: string) => lightenColor(color, 0.4),
+} as const;
+
export const InputLikeStyle = [
getStaticBackground(SURFACE_COLOR),
BOXSHADOW,
BOXSHADOWCOLOR,
...STYLING_FIELDS_SEQUENCE.filter((style)=>style.name!=='rotation' && style.name!=='lineHeight'),
+ PLACEHOLDER,
...ACCENT_VALIDATE,
] as const;
@@ -2536,3 +2549,4 @@ export function marginCalculator(margin: string) {
}
export type {ThemeDetail};
+
From 54cc9b92ebfa807bf04a897ef66c31706ab4351f Mon Sep 17 00:00:00 2001
From: FARAN
Date: Fri, 27 Jun 2025 19:55:56 +0500
Subject: [PATCH 11/12] [Fix]: #1466 add disabled styles for the components /
refactor
---
.../comps/buttonComp/buttonCompConstants.tsx | 10 ++--
.../comps/comps/meetingComp/controlButton.tsx | 7 ++-
.../meetingComp/videobuttonCompConstants.tsx | 21 ++++++--
.../comps/numberInputComp/numberInputComp.tsx | 43 ++++++++++++-----
.../comps/comps/textInputComp/inputComp.tsx | 11 +++--
.../comps/textInputComp/textAreaComp.tsx | 11 +++--
.../comps/controls/styleControlConstants.tsx | 48 ++++++++-----------
7 files changed, 89 insertions(+), 62 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index cc907ee1d4..b878eabbdb 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -1,13 +1,13 @@
import { default as Button } from "antd/es/button";
import { styleControl } from "comps/controls/styleControl";
-import { ButtonStyleType, ButtonStyle, DisabledButtonStyle } from "comps/controls/styleControlConstants";
+import { ButtonStyleType, ButtonStyle, DisabledButtonStyle, DisabledButtonStyleType } from "comps/controls/styleControlConstants";
import { migrateOldData } from "comps/generators/simpleGenerators";
import styled, { css } from "styled-components";
import { genActiveColor, genHoverColor } from "lowcoder-design";
import { refMethods } from "comps/generators/withMethodExposing";
import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
-export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any) {
+export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: DisabledButtonStyleType = {} as any) {
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
return css`
@@ -52,8 +52,8 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
/* Disabled state styling */
&:disabled,
&.ant-btn-disabled {
- color: ${disabledStyle?.disabledText || buttonStyle.text};
- background: ${disabledStyle?.disabledBackground || buttonStyle.background};
+ color: ${disabledStyle.disabledText};
+ background: ${disabledStyle.disabledBackground};
cursor: not-allowed;
}
}
@@ -62,7 +62,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle?: any
export const Button100 = styled(Button)<{
$buttonStyle?: ButtonStyleType;
- $disabledStyle?: any;
+ $disabledStyle?: DisabledButtonStyleType;
}>`
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
width: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 0445c94039..17076f1fc9 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -28,7 +28,7 @@ import {
} from "../../generators/withExposing";
import { IForm } from "../formComp/formDataConstants";
import { SimpleNameComp } from "../simpleNameComp";
-import { Button100, ButtonStyleControl } from "./videobuttonCompConstants";
+import { Button100, ButtonStyleControl, DisabledButtonStyleControl } from "./videobuttonCompConstants";
import { RefControl } from "comps/controls/refControl";
import { AutoHeightControl } from "comps/controls/autoHeightControl";
import {
@@ -195,6 +195,7 @@ const childrenMap = {
aspectRatio: withDefault(StringControl, "1 / 1"),
onEvent: ButtonEventHandlerControl,
disabled: BoolCodeControl,
+ disabledStyle: DisabledButtonStyleControl,
loading: BoolCodeControl,
form: SelectFormControl,
sourceMode: dropdownControl(ModeOptions, "standard"),
@@ -267,6 +268,7 @@ let ButtonTmpComp = (function () {
{children.style.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()}
+
)}
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
index 9a7a0d43b0..2ffa2e6cf3 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -1,5 +1,5 @@
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { ButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { ButtonStyle, DisabledButtonStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
import { migrateOldData } from "@lowcoder-ee/comps/generators/simpleGenerators";
import { refMethods } from "@lowcoder-ee/comps/generators/withMethodExposing";
import { blurMethod, clickMethod, focusWithOptions } from "@lowcoder-ee/comps/utils/methodUtils";
@@ -8,7 +8,7 @@ import { genActiveColor, genHoverColor } from "components/colorSelect/colorUtils
import styled, { css } from "styled-components";
// import { genActiveColor, genHoverColor } from "lowcoder-design";
-export function getButtonStyle(buttonStyle: any) {
+export function getButtonStyle(buttonStyle: any, disabledStyle: any) {
const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
return css`
@@ -42,13 +42,20 @@ export function getButtonStyle(buttonStyle: any) {
? activeColor
: buttonStyle.border};
}
+
+ }
+ &:disabled,
+ &.ant-btn-disabled {
+ color: ${disabledStyle.disabledText};
+ background: ${disabledStyle.disabledBackground};
+ cursor: not-allowed;
}
}
`;
}
-export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
- ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
+export const Button100 = styled(Button)<{ $buttonStyle?: any; $disabledStyle?: any }>`
+ ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle, props.$disabledStyle)}
width: 100%;
height: auto;
display: inline-flex;
@@ -98,6 +105,12 @@ export const ButtonStyleControl = migrateOldData(
fixOldData
);
+export const DisabledButtonTmpStyleControl = styleControl(DisabledButtonStyle);
+export const DisabledButtonStyleControl = migrateOldData(
+ DisabledButtonTmpStyleControl,
+ fixOldData
+);
+
export const buttonRefMethods = refMethods([
focusWithOptions,
blurMethod,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index bd14c7f647..cf18eb8a50 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -74,11 +74,7 @@ const getStyle = (style: InputLikeStyleType) => {
&:hover {
border-color: ${style.accent};
}
-
- &::-webkit-input-placeholder {
- color: ${style.text};
- opacity: 0.4;
- }
+
.ant-input-number {
margin: 0;
@@ -92,6 +88,26 @@ const getStyle = (style: InputLikeStyleType) => {
font-weight:${style.textWeight} !important;
font-size:${style.textSize} !important;
font-style:${style.fontStyle} !important;
+
+ &::-webkit-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::-moz-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &:-ms-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
}
.ant-input-number-handler-wrap {
@@ -131,13 +147,14 @@ const InputNumber = styled(AntdInputNumber)<{
/* Disabled state styling */
&:disabled,
&.ant-input-number-disabled {
- color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
- background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
cursor: not-allowed;
.ant-input-number-input {
- color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
- background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
}
}
@@ -280,7 +297,7 @@ const childrenMap = {
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
prefixIcon: IconControl,
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
- disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+ disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
// validation
required: BoolControl,
showValidationWhenEmpty: BoolControl,
@@ -397,7 +414,7 @@ const CustomInputNumber = (props: RecordConstructorToView) =
stringMode={true}
precision={props.precision}
$style={props.inputFieldStyle}
- $disabledStyle={props.disabledInputStyle}
+ $disabledStyle={props.disabledStyle}
prefix={hasIcon(props.prefixIcon) ? props.prefixIcon : props.prefixText.value}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
onPressEnter={() => {
@@ -489,8 +506,8 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
-
- {children.disabledInputStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index a8cfd8bfb5..265c0512d8 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -53,8 +53,9 @@ const InputStyle = styled(Input)<{
/* Disabled state styling */
&:disabled,
&.ant-input-disabled {
- color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
- background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
cursor: not-allowed;
}
`;
@@ -70,7 +71,7 @@ const childrenMap = {
suffixIcon: IconControl,
inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
- disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+ disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
tabIndex: NumberControl,
};
@@ -85,7 +86,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
showCount={props.showCount}
allowClear={props.allowClear}
$style={props.inputFieldStyle}
- $disabledStyle={props.disabledInputStyle}
+ $disabledStyle={props.disabledStyle}
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
@@ -127,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
- {children.disabledInputStyle.getPropertyView()}
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index a0121743c6..ddc2bcc1ab 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -50,8 +50,9 @@ const TextAreaStyled = styled(TextArea)<{
/* Disabled state styling */
&:disabled,
&.ant-input-disabled {
- color: ${(props) => props.$disabledStyle?.disabledText || props.$style.text} !important;
- background: ${(props) => props.$disabledStyle?.disabledBackground || props.$style.background} !important;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
cursor: not-allowed;
}
`;
@@ -91,7 +92,7 @@ let TextAreaTmpComp = (function () {
textAreaScrollBar: withDefault(BoolControl, false),
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
animationStyle: styleControl(AnimationStyle, 'animationStyle'),
- disabledInputStyle: styleControl(DisabledInputStyle, 'disabledInputStyle'),
+ disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
tabIndex: NumberControl
};
return new UICompBuilder(childrenMap, (props) => {
@@ -108,7 +109,7 @@ let TextAreaTmpComp = (function () {
allowClear={props.allowClear}
style={{ height: "100% !important", resize: "vertical" }}
$style={props.inputFieldStyle}
- $disabledStyle={props.disabledInputStyle}
+ $disabledStyle={props.disabledStyle}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
/>
@@ -152,7 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
- {children.disabledInputStyle.getPropertyView()}
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 9633235372..cd1d1150c6 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -978,37 +978,29 @@ const DISABLED_TEXT = {
label: trans("style.disabledText"),
depName: "disabledBackground",
depType: DEP_TYPE.CONTRAST_TEXT,
- transformer: contrastText,
+ transformer: (color: string) => lightenColor(color, 0.8),
+} as const;
+
+
+export const DISABLED_BORDER = {
+ name: "disabledBorder",
+ label: trans("style.disabledBorder"),
+ color: SECOND_SURFACE_COLOR,
} as const;
-// Re-export for reuse in other components if needed
export const DISABLED_STYLE_FIELDS = [
DISABLED_BACKGROUND,
DISABLED_TEXT,
+ DISABLED_BORDER,
] as const;
-// Add disabled style constants specifically for text input components
-const DISABLED_INPUT_BACKGROUND = {
- name: "disabledBackground",
- label: trans("style.disabledBackground"),
- color: SECOND_SURFACE_COLOR,
-} as const;
+// Helper to quickly create a component-specific disabled style list by
+// extending the two generic disabled tokens above.
+export const withDisabled = (
+ extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
-const DISABLED_INPUT_TEXT = {
- name: "disabledText",
- label: trans("style.disabledText"),
- depName: "disabledInputBackground",
- depType: DEP_TYPE.CONTRAST_TEXT,
- transformer: contrastText,
-} as const;
-
-// Re-export for reuse in textInput components
-export const DISABLED_INPUT_STYLE_FIELDS = [
- DISABLED_INPUT_BACKGROUND,
- DISABLED_INPUT_TEXT,
-] as const;
-
// Add disabled style constants specifically for slider components
const DISABLED_SLIDER_FILL = {
name: "disabledFill",
@@ -1052,9 +1044,11 @@ export const ButtonStyle = [
] as const;
// Create separate disabled style control
-export const DisabledButtonStyle = [
- ...DISABLED_STYLE_FIELDS,
-] as const;
+export const DisabledButtonStyle = withDisabled();
+
+
+// For input components
+export const DisabledInputStyle = withDisabled();
export const DropdownStyle = [
getBackground(),
@@ -1330,10 +1324,6 @@ export const InputLikeStyle = [
...ACCENT_VALIDATE,
] as const;
-// Create separate disabled style control for text inputs
-export const DisabledInputStyle = [
- ...DISABLED_INPUT_STYLE_FIELDS,
-] as const;
// added by Mousheng
From b366ecbc8bc00efeb07736c9882b8d0077ed3e41 Mon Sep 17 00:00:00 2001
From: FARAN
Date: Fri, 27 Jun 2025 23:18:14 +0500
Subject: [PATCH 12/12] [Fix]: #1466 add disabled/placeholder style for
components
---
.../src/comps/comps/buttonComp/buttonComp.tsx | 2 +-
.../comps/buttonComp/toggleButtonComp.tsx | 2 +-
.../src/comps/comps/dateComp/dateComp.tsx | 15 ++++++-
.../src/comps/comps/dateComp/dateCompUtil.ts | 39 +++++++++++++++++-
.../comps/comps/dateComp/dateRangeUIView.tsx | 23 ++++++++++-
.../src/comps/comps/dateComp/dateUIView.tsx | 24 ++++++++++-
.../comps/comps/meetingComp/controlButton.tsx | 2 +-
.../comps/numberInputComp/numberInputComp.tsx | 6 +--
.../numberInputComp/sliderCompConstants.tsx | 7 +---
.../comps/selectInputComp/stepControl.tsx | 34 +++++++++++++--
.../comps/comps/textInputComp/inputComp.tsx | 2 +-
.../comps/textInputComp/passwordComp.tsx | 2 +-
.../comps/textInputComp/textAreaComp.tsx | 2 +-
.../comps/controls/styleControlConstants.tsx | 41 +++++++++++--------
.../packages/lowcoder/src/i18n/locales/en.ts | 9 ++--
15 files changed, 165 insertions(+), 45 deletions(-)
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 7c2775e0ed..a6d6f88890 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -175,7 +175,7 @@ const ButtonPropertyView = React.memo((props: {
{props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
{props.children.style.getPropertyView()}
- {props.children.disabledStyle.getPropertyView()}
+ {props.children.disabledStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index f9ee2f089e..654ec6659d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -155,7 +155,7 @@ const ToggleTmpComp = (function () {
)}
- {children.disabledStyle.getPropertyView()}
+ {children.disabledStyle.getPropertyView()}
))
.setExposeMethodConfigs(buttonRefMethods)
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 8068829d82..ea6f37f5a3 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -21,7 +21,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 { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, ChildrenMultiSelectStyle, ChildrenMultiSelectStyleType, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle, DisabledInputStyle, DisabledInputStyleType } from "comps/controls/styleControlConstants";
import { withMethodExposing } from "../../generators/withMethodExposing";
import {
disabledPropertyView,
@@ -81,6 +81,7 @@ const commonChildren = {
format: StringControl,
inputFormat: withDefault(StringControl, DATE_FORMAT),
disabled: BoolCodeControl,
+ disabledStyle: styleControl(DisabledInputStyle, 'disabledStyle'),
onEvent: eventHandlerControl(EventOptions),
showTime: BoolControl,
use12Hours: BoolControl,
@@ -179,11 +180,13 @@ export type DateCompViewProps = Pick<
| "viewRef"
| "timeZone"
| "pickerMode"
+ | "disabledStyle"
> & {
onFocus: () => void;
onBlur: () => void;
$style: DateTimeStyleType;
$childrenInputFieldStyle: ChildrenMultiSelectStyleType;
+ $disabledStyle?: DisabledInputStyleType;
disabledTime: () => ReturnType;
suffixIcon: ReactNode;
placeholder?: string | [string, string];
@@ -264,6 +267,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
$style={props.inputFieldStyle}
$childrenInputFieldStyle={props.childrenInputFieldStyle}
+ $disabledStyle={props.disabledStyle}
disabled={props.disabled}
{...datePickerProps(props)}
hourStep={props.hourStep}
@@ -285,6 +289,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
onBlur={() => props.onEvent("blur")}
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
+ disabledStyle={props.disabledStyle}
/>
),
showValidationWhenEmpty: props.showValidationWhenEmpty,
@@ -366,6 +371,9 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
{children.animationStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()}
+
)}
@@ -457,6 +465,7 @@ let DateRangeTmpCmp = (function () {
viewRef={props.viewRef}
$style={props.inputFieldStyle}
$childrenInputFieldStyle={props.childrenInputFieldStyle}
+ $disabledStyle={props.disabledStyle}
disabled={props.disabled}
{...datePickerProps(props)}
start={tempStartValue?.isValid() ? tempStartValue : null}
@@ -482,6 +491,7 @@ let DateRangeTmpCmp = (function () {
onBlur={() => props.onEvent("blur")}
suffixIcon={hasIcon(props.suffixIcon) && props.suffixIcon}
tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
+ disabledStyle={props.disabledStyle}
/>
);
@@ -579,6 +589,9 @@ let DateRangeTmpCmp = (function () {
{children.childrenInputFieldStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()}
+
)}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
index 63a030cdab..16bc634edf 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateCompUtil.ts
@@ -85,8 +85,23 @@ export const getStyle = (style: DateTimeStyleType) => {
color: ${style.text};
&::-webkit-input-placeholder {
- color: ${style.text};
- opacity: 0.25;
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::-moz-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &:-ms-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
}
}
@@ -132,6 +147,26 @@ export const getMobileStyle = (style: DateTimeStyleType) =>
background-color: ${style.background};
border-radius: ${style.radius};
border-color: ${style.border};
+
+ &::-webkit-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::-moz-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &:-ms-input-placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
+
+ &::placeholder {
+ color: ${style.placeholder};
+ opacity: 1;
+ }
`;
export const dateRefMethods = refMethods([focusMethod, blurMethod]);
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
index c56ddecb6f..65677b63bb 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateRangeUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
import { checkIsMobile } from "util/commonUtils";
import React, { useContext } from "react";
import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
import { EditorContext } from "../../editorState";
import { default as DatePicker } from "antd/es/date-picker";
import { hasIcon } from "comps/utils";
@@ -16,11 +16,28 @@ import { timeZoneOptions } from "./timeZone";
const { RangePicker } = DatePicker;
-const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType}>`
+const RangePickerStyled = styled(RangePicker)<{$style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType}>`
width: 100%;
box-shadow: ${(props) =>
`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
${(props) => props.$style && getStyle(props.$style)}
+
+ &.ant-picker-disabled {
+ cursor: not-allowed;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+ .ant-picker-input > input {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ }
+ .ant-picker-suffix,
+ .ant-picker-clear,
+ .ant-picker-separator {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ }
+ }
`;
const StyledAntdSelect = styled(AntdSelect)`
@@ -46,6 +63,7 @@ export interface DateRangeUIViewProps extends DateCompViewProps {
onPanelChange: (value: any, mode: [string, string]) => void;
onClickDateRangeTimeZone:(value:any)=>void;
tabIndex?: number;
+ $disabledStyle?: DisabledInputStyleType;
}
export const DateRangeUIView = (props: DateRangeUIViewProps) => {
@@ -98,6 +116,7 @@ export const DateRangeUIView = (props: DateRangeUIViewProps) => {
)
)}
+ $disabledStyle={props.$disabledStyle}
/>
);
};
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
index a98a1eaa59..c66ac2a026 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateUIView.tsx
@@ -5,7 +5,7 @@ import { useUIView } from "../../utils/useUIView";
import { checkIsMobile } from "util/commonUtils";
import React, { useContext } from "react";
import styled from "styled-components";
-import type { ChildrenMultiSelectStyleType, DateTimeStyleType } from "../../controls/styleControlConstants";
+import type { ChildrenMultiSelectStyleType, DateTimeStyleType, DisabledInputStyleType } from "../../controls/styleControlConstants";
import { EditorContext } from "../../editorState";
import { default as DatePicker } from "antd/es/date-picker";
import type { DatePickerProps } from "antd/es/date-picker";
@@ -15,10 +15,28 @@ import { timeZoneOptions } from "./timeZone";
import { default as AntdSelect } from "antd/es/select";
import { omit } from "lodash";
-const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType }>`
+const DatePickerStyled = styled(DatePicker)<{ $style: DateTimeStyleType; $disabledStyle?: DisabledInputStyleType; }>`
width: 100%;
box-shadow: ${props=>`${props.$style.boxShadow} ${props.$style.boxShadowColor}`};
${(props) => props.$style && getStyle(props.$style)}
+
+ /* Disabled state styling */
+ &.ant-picker-disabled {
+ cursor: not-allowed;
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+ .ant-picker-input > input {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ }
+ .ant-picker-suffix,
+ .ant-picker-clear,
+ .ant-picker-separator {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ }
+ }
`;
const StyledDiv = styled.div`
@@ -40,6 +58,7 @@ export interface DataUIViewProps extends DateCompViewProps {
onPanelChange: () => void;
onClickDateTimeZone:(value:any)=>void;
tabIndex?: number;
+ $disabledStyle?: DisabledInputStyleType;
}
const DateMobileUIView = React.lazy(() =>
@@ -54,6 +73,7 @@ export const DateUIView = (props: DataUIViewProps) => {
,
{children.style.getPropertyView()}
-
+
{children.disabledStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index cf18eb8a50..15db21305f 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -506,9 +506,9 @@ let NumberInputTmpComp = (function () {
{children.inputFieldStyle.getPropertyView()}
-
- {children.disabledStyle.getPropertyView()}
-
+
+ {children.disabledStyle.getPropertyView()}
+
{children.animationStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index 1eb0fc74c8..c2a45c121a 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -65,11 +65,6 @@ const getStyle = (style: SliderStyleType, vertical: boolean, disabledStyle?: Dis
.ant-slider-track {
background-color: ${disabledStyle?.disabledFill || lightenColor(style.fill, 0.3)} !important;
}
- .ant-slider-handle {
- background-color: ${disabledStyle?.disabledThumb || lightenColor(style.thumb, 0.25)} !important;
- border-color: ${disabledStyle?.disabledThumbBorder || lightenColor(style.thumbBorder, 0.25)} !important;
- cursor: not-allowed !important;
- }
${vertical && css`
width: auto;
min-height: calc(300px - ${style.margin});
@@ -157,7 +152,7 @@ const LayoutSection = memo(({ children }: { children: RecordConstructorToComp
{children.inputFieldStyle.getPropertyView()}
-
+
{children.disabledSliderStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index ca24b74924..9fcfaa6216 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co
import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
import { StepOptionControl } from "comps/controls/optionsControl";
import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants";
+import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType, DisabledStepStyle, DisabledStepStyleType } from "comps/controls/styleControlConstants";
import styled, { css } from "styled-components";
import { UICompBuilder, withDefault } from "../../generators";
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -98,11 +98,12 @@ const StepsChildrenMap = {
animationStyle: styleControl(AnimationStyle ,'animationStyle' ),
showScrollBars: withDefault(BoolControl, false),
minHorizontalWidth: withDefault(RadiusControl, ''),
+ disabledStyle: styleControl(DisabledStepStyle, 'disabledStyle'),
};
let StepControlBasicComp = (function () {
return new UICompBuilder(StepsChildrenMap, (props) => {
- const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
+ const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType, $disabledStyle: DisabledStepStyleType }>`
${props=>props.$animationStyle}
height: 100%;
overflow-y: scroll;
@@ -124,6 +125,30 @@ let StepControlBasicComp = (function () {
border: ${props.style.borderWidth} solid ${props.style.border};
border-radius: ${props.style.radius};
${getBackgroundStyle(props.style)}
+ /* Disabled step styles */
+ .ant-steps-item-disabled {
+ .ant-steps-item-icon {
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ border-color: ${(props) => props.$disabledStyle?.disabledBorder};
+
+ /* When using icon as dot */
+ .ant-steps-icon-dot {
+ background: ${(props) => props.$disabledStyle?.disabledBackground};
+ }
+
+ /* Default icon or custom icon */
+ .ant-steps-icon,
+ > * {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ }
+ }
+
+ .ant-steps-item-title,
+ .ant-steps-item-subtitle,
+ .ant-steps-item-description {
+ color: ${(props) => props.$disabledStyle?.disabledText};
+ }
+ }
.ant-steps-item { padding-top: 5px !important; }
.ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
.ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
@@ -172,7 +197,7 @@ let StepControlBasicComp = (function () {
}
}}
>
-
+
{children.animationStyle.getPropertyView()}
+
+ {children.disabledStyle.getPropertyView()}
+
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 265c0512d8..0a3ca6bf63 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -128,7 +128,7 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
- {children.disabledStyle.getPropertyView()}
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 62eaddd8e7..4b9cf56389 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -135,7 +135,7 @@ let PasswordTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
- {children.disabledInputStyle.getPropertyView()}
+ {children.disabledInputStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index ddc2bcc1ab..049d5d88d7 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -153,7 +153,7 @@ let TextAreaTmpComp = (function () {
{children.style.getPropertyView()}
{children.labelStyle.getPropertyView()}
{children.inputFieldStyle.getPropertyView()}
- {children.disabledStyle.getPropertyView()}
+ {children.disabledStyle.getPropertyView()}
{children.animationStyle.getPropertyView()}
)}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index cd1d1150c6..176afbbfc9 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -994,50 +994,55 @@ export const DISABLED_STYLE_FIELDS = [
DISABLED_BORDER,
] as const;
-// Helper to quickly create a component-specific disabled style list by
-// extending the two generic disabled tokens above.
-export const withDisabled = (
- extra: Extra = [] as unknown as Extra,
-) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
-
-
// Add disabled style constants specifically for slider components
const DISABLED_SLIDER_FILL = {
name: "disabledFill",
label: trans("style.disabledFill"),
depName: "fill",
- transformer: (color: string) => lightenColor(color, 0.3),
+ transformer: (color: string) => lightenColor(color, 0.8),
} as const;
const DISABLED_SLIDER_TRACK = {
name: "disabledTrack",
label: trans("style.disabledTrack"),
depName: "track",
- transformer: (color: string) => lightenColor(color, 0.2),
+ transformer: (color: string) => lightenColor(color, 0.8),
} as const;
const DISABLED_SLIDER_THUMB = {
name: "disabledThumb",
label: trans("style.disabledThumb"),
depName: "thumb",
- transformer: (color: string) => lightenColor(color, 0.25),
+ transformer: (color: string) => lightenColor(color, 0.8),
} as const;
const DISABLED_SLIDER_THUMB_BORDER = {
name: "disabledThumbBorder",
label: trans("style.disabledThumbBorder"),
depName: "thumbBorder",
- transformer: (color: string) => lightenColor(color, 0.25),
+ transformer: (color: string) => lightenColor(color, 0.8),
} as const;
// Re-export for reuse in slider components
export const DISABLED_SLIDER_STYLE_FIELDS = [
DISABLED_SLIDER_FILL,
DISABLED_SLIDER_TRACK,
- DISABLED_SLIDER_THUMB,
- DISABLED_SLIDER_THUMB_BORDER,
] as const;
+// Helper to quickly create a component-specific disabled style list by
+// extending the two generic disabled tokens above.
+export const withDisabled = (
+ extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_STYLE_FIELDS, ...extra] as const;
+
+
+export const withDisabledSlider = (
+ extra: Extra = [] as unknown as Extra,
+) => [...DISABLED_SLIDER_STYLE_FIELDS, ...extra] as const;
+
+
+export const DisabledSliderStyle = withDisabledSlider();
+
export const ButtonStyle = [
getBackground('primary'),
...STYLING_FIELDS_SEQUENCE,
@@ -1050,6 +1055,10 @@ export const DisabledButtonStyle = withDisabled();
// For input components
export const DisabledInputStyle = withDisabled();
+// for step control
+export const DisabledStepStyle = withDisabled();
+
+
export const DropdownStyle = [
getBackground(),
...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
@@ -1303,10 +1312,6 @@ export const SliderStyle = [
PADDING,
] as const;
-// Create separate disabled style control for sliders
-export const DisabledSliderStyle = [
- ...DISABLED_SLIDER_STYLE_FIELDS,
-] as const;
const PLACEHOLDER = {
name: "placeholder",
@@ -1886,6 +1891,7 @@ export const DateTimeStyle = [
...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
getStaticBorder(SECOND_SURFACE_COLOR),
TEXT,
+ PLACEHOLDER,
MARGIN,
PADDING,
BORDER_STYLE,
@@ -2392,6 +2398,7 @@ export type ColorPickerStyleType = StyleConfigType;
export type ButtonStyleType = StyleConfigType;
export type DisabledButtonStyleType = StyleConfigType;
export type DisabledInputStyleType = StyleConfigType;
+export type DisabledStepStyleType = StyleConfigType;
export type ToggleButtonStyleType = StyleConfigType;
export type TextStyleType = StyleConfigType;
export type TextContainerStyleType = StyleConfigType;
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index b8836cb4df..c85c520a70 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -229,6 +229,7 @@ export const en = {
"className": "CSS Class name",
"dataTestId": "Individual ID",
"preventOverwriting": "Prevent overwriting styles",
+ "disabledStyle": "Disabled Style",
"color": "Color",
"horizontalGridCells": "Horizontal Grid Cells",
"verticalGridCells": "Vertical Grid Cells",
@@ -511,9 +512,11 @@ export const en = {
"tabAccent": "Tab Accent",
"checkedBackground": "Checked Background Color",
"uncheckedBackground": "Unchecked Background Color",
- "disabledBackground": "Disabled Background Color",
- "disabledBorder": "Disabled Border Color",
- "disabledText": "Disabled Text Color",
+ "disabledBackground": "Background Color",
+ "disabledBorder": "Border Color",
+ "disabledText": "Text Color",
+ "disabledTrack": "Track Color",
+ "disabledFill": "Fill Color",
"uncheckedBorder": "Unchecked Border Color",
"indicatorBackground": "Indicator Background Color",
"tableCellText": "Cell Text",
--- a PPN by Garber Painting Akron. With Image Size Reduction included!Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/1815.patch
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy