Dev -> Main v2.6.2

client/VERSION

@@ -1 +1 @@
-2.6.1
+2.6.2

client/package.json

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

client/packages/lowcoder-comps/package.json

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

client/packages/lowcoder-design/src/components/CustomModal.tsx

@@ -220,10 +220,13 @@ const DEFAULT_PROPS = {
   autoFocusButton: "ok",
 } as const;
 
-function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
+function CustomModalRender(props: Omit<CustomModalProps & ModalFuncProps, "width"> & { width?: string | number }) {
   return (
     <Draggable handle=".handle" disabled={!props.draggable}>
-      <ModalWrapper $width={props.width} $customStyles={props?.customStyles}>
+      <ModalWrapper 
+        $width={props.width}
+        $customStyles={props?.customStyles}
+      >
         <>
           <ModalHeaderWrapper className="handle" $draggable={props.draggable}>
             <ModalHeader
@@ -249,20 +252,21 @@ function CustomModalRender(props: CustomModalProps & ModalFuncProps) {
   );
 }
 
+
 /**
  * an antd modal capsulation
  */
-
 function CustomModal(props: CustomModalProps) {
   return (
     <AntdModal
       {...props}
-      width="fit-content"
-      modalRender={() => <CustomModalRender {...DEFAULT_PROPS} {...props} />}
+      width={typeof props.width === "object" ? undefined : props.width} // Ensure valid type
+      modalRender={() => <CustomModalRender {...props} width={typeof props.width === "object" ? undefined : props.width} />}
     />
   );
 }
 
+
 const TitleIcon = {
   error: <ErrorIcon />,
   warn: <WarningIcon />,
@@ -285,6 +289,8 @@ CustomModal.confirm = (props: {
   customStyles?:React.CSSProperties;
 }): any => {
 
+  const fixedWidth = typeof props.width === "object" ? undefined : props.width;
+
   const defaultConfirmProps: ModalFuncProps = {
     ...DEFAULT_PROPS,
     okText: trans("ok"),
@@ -301,7 +307,7 @@ CustomModal.confirm = (props: {
   };
   // create model
   const model = modalInstance.confirm({
-    width: "fit-content",
+    width: fixedWidth,
     style: props.style,
     centered: true,
     onCancel: () => {

client/packages/lowcoder-design/src/components/keyValueList.tsx

@@ -100,7 +100,7 @@ export const KeyValueList = (props: {
   return (
     <>
       {props.list.map((item, index) => (
-        <IndicatorWrapper key={index}>
+        <IndicatorWrapper key={index} indicatorForAll={props.indicatorForAll}>
           <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
             {item}
             {!props.isStatic &&

client/packages/lowcoder-design/src/icons/index.tsx

@@ -317,6 +317,7 @@ export { ReactComponent as RadioCompIconSmall } from "./v2/radio-button-s.svg";
 export { ReactComponent as RangeSliderCompIconSmall } from "./v2/range-slider-s.svg"; // new
 export { ReactComponent as RatingCompIconSmall } from "./v2/rating-s.svg";
 export { ReactComponent as ResponsiveLayoutCompIconSmall } from "./v2/resposive-layout-s.svg"; // new
+export { ReactComponent as SplitLayoutCompIconSmall } from "./v2/split-layout-s.svg"; // new
 export { ReactComponent as RichTextEditorCompIconSmall } from "./v2/rich-text-editor-s.svg"; // new
 export { ReactComponent as ScannerCompIconSmall } from "./v2/scanner-s.svg";    // new
 export { ReactComponent as ShapesCompIconSmall } from "./v2/shapes-s.svg"; // new
@@ -419,6 +420,7 @@ export { ReactComponent as RadioCompIcon } from "./v2/radio-button-m.svg";
 export { ReactComponent as RangeSliderCompIcon } from "./v2/range-slider-m.svg";
 export { ReactComponent as RatingCompIcon } from "./v2/rating-m.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./v2/resposive-layout-m.svg";
+export { ReactComponent as SplitLayoutCompIcon } from "./v2/split-layout-m.svg";
 export { ReactComponent as RichTextEditorCompIcon } from "./v2/rich-text-editor-m.svg";
 export { ReactComponent as ScannerCompIcon } from "./v2/scanner-m.svg";
 export { ReactComponent as ShapesCompIcon } from "./v2/shapes-m.svg";

client/packages/lowcoder-sdk/package.json

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

client/packages/lowcoder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",
@@ -38,7 +38,7 @@
     "@types/react-virtualized": "^9.21.21",
     "alasql": "^4.6.2",
     "animate.css": "^4.1.1",
-    "antd": "^5.20.0",
+    "antd": "^5.23.4",
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",
@@ -52,6 +52,7 @@
     "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",
     "hotkeys-js": "^3.8.7",
+    "html5-device-mockups": "^3.2.1",
     "immer": "^9.0.7",
     "less": "^4.1.3",
     "lodash": "^4.17.21",
@@ -67,6 +68,7 @@
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^3.0.10",
     "react-colorful": "^5.5.1",
+    "react-device-mockups": "^0.1.12",
     "react-documents": "^1.2.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.4",

client/packages/lowcoder/public/custom_component/custom_component.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <script src="./index_custom_component_files/babel.min.js"></script>
+    <title>Custom Component</title>
+    <script
+      defer="defer"
+      src="./index_custom_component_files/runtime.351a1318.js"
+    ></script>
+    <script
+      defer="defer"
+      src="./index_custom_component_files/main.ca18aca8.js"
+    ></script>
+  </head>
+  <body></body>
+</html>