Merge branch 'dev' into app_versioning

Author: kamalqureshi

client/VERSION

@@ -1 +1 @@
-2.7.2
+2.7.3

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "type": "module",
   "private": true,
   "workspaces": [

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-sdk-webpack-bundle/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lowcoder-sdk-webpack-bundle",
   "description": "",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "main": "index.jsx",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

client/packages/lowcoder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "type": "module",
   "files": [
     "src",

client/packages/lowcoder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -1,4 +1,4 @@
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
@@ -137,7 +137,8 @@ const childrenMap = {
   disabledStyle: DisabledButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
-  tooltip: StringControl
+  tooltip: StringControl,
+  tabIndex: NumberControl
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -162,8 +163,12 @@ const ButtonPropertyView = React.memo((props: {
               disabledPropertyView(props.children),
               hiddenPropertyView(props.children),
               loadingPropertyView(props.children),
+              props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
             ]
-            : props.children.form.getPropertyView()}
+            : [
+              props.children.form.getPropertyView(),
+              props.children.tabIndex.propertyView({ label: trans("prop.tabIndex") }),
+            ]}
           </Section>
         </>
       )}
@@ -222,6 +227,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
                 (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
               }
               onClick={handleClick}
+              tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
             >
               {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
               {

client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

@@ -11,27 +11,28 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: Disa
   const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background);
   const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background);
   return css`
-    & {
+    &&& {
       border-radius: ${buttonStyle.radius};
       border-width:${buttonStyle.borderWidth};
       margin: ${buttonStyle.margin};
       padding: ${buttonStyle.padding};
       rotate: ${buttonStyle.rotation};
+      --antd-wave-shadow-color: ${buttonStyle.border};
+      border-color: ${buttonStyle.border};
+      color: ${buttonStyle.text};
+      font-size: ${buttonStyle.textSize};
+      font-weight: ${buttonStyle.textWeight};
+      font-family: ${buttonStyle.fontFamily};
+      font-style: ${buttonStyle.fontStyle};
+      text-transform:${buttonStyle.textTransform};
+      text-decoration:${buttonStyle.textDecoration};
+      border-radius: ${buttonStyle.radius};
+      margin: ${buttonStyle.margin};
+      padding: ${buttonStyle.padding};
+
       &:not(:disabled) {
-        --antd-wave-shadow-color: ${buttonStyle.border};
-        border-color: ${buttonStyle.border};
-        color: ${buttonStyle.text};
-        font-size: ${buttonStyle.textSize};
-        font-weight: ${buttonStyle.textWeight};
-        font-family: ${buttonStyle.fontFamily};
-        font-style: ${buttonStyle.fontStyle};
-        text-transform:${buttonStyle.textTransform};
-        text-decoration:${buttonStyle.textDecoration};
         background: ${buttonStyle.background};
-        border-radius: ${buttonStyle.radius};
-        margin: ${buttonStyle.margin};
-        padding: ${buttonStyle.padding};
-
+        
         &:hover,
         &:focus {
           color: ${buttonStyle.text};
@@ -48,14 +49,13 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: Disa
             : buttonStyle.border} !important;
         }
       }
-
-      /* Disabled state styling */
       &:disabled,
-      &.ant-btn-disabled {
-        color: ${disabledStyle.disabledText};
-        background: ${disabledStyle.disabledBackground};
-        border-color: ${disabledStyle.disabledBorder};
-        cursor: not-allowed;
+      &.ant-btn-disabled,
+      &[disabled] {
+        background: ${disabledStyle.disabledBackground} !important;
+        cursor: not-allowed !important;
+        color: ${disabledStyle.disabledText || buttonStyle.text} !important;
+        border-color: ${disabledStyle.disabledBorder || buttonStyle.border} !important;
       }
     }
   `;

client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

@@ -1,6 +1,6 @@
 import { default as Button } from "antd/es/button";
 import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/buttonCompConstants";
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
@@ -91,6 +91,7 @@ const LinkTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     viewRef: RefControl<HTMLElement>,
+    tabIndex: NumberControl,
   };
   return new UICompBuilder(childrenMap, (props) => {  
     // chrome86 bug: button children should not contain only empty span
@@ -105,6 +106,7 @@ const LinkTmpComp = (function () {
           disabled={props.disabled}
           onClick={() => props.onEvent("click")}
           type={"link"}
+          tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
         >
           {hasChildren && (
             <span>
@@ -131,6 +133,7 @@ const LinkTmpComp = (function () {
               {hiddenPropertyView(children)}
               {loadingPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
               <Section name={sectionNames.advanced}>
                 {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

@@ -1,4 +1,4 @@
-import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, NumberControl } from "comps/controls/codeControl";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import {
@@ -68,6 +68,7 @@ const ToggleTmpComp = (function () {
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
     tooltip: StringControl,
+    tabIndex: NumberControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const text = props.showText
@@ -92,6 +93,7 @@ const ToggleTmpComp = (function () {
               props.onEvent("change");
               props.value.onChange(!props.value.value);
             }}
+            tabIndex={typeof props.tabIndex === 'number' ? props.tabIndex : undefined}
           >
             {props.iconPosition === "right" && text}
             {<IconWrapper>{props.value.value ? props.trueIcon : props.falseIcon}</IconWrapper>}
@@ -117,6 +119,7 @@ const ToggleTmpComp = (function () {
               {hiddenPropertyView(children)}
               {loadingPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
             <Section name={sectionNames.advanced}>
               {children.showText.propertyView({ label: trans("toggleButton.showText") })}