Merge branch 'dev' into dependabot/npm_and_yarn/server/node-service/dev/ali-oss-6.22.0

Author: FalkWolsky

README.md

@@ -7,25 +7,32 @@
     <p>
         Create software applications (internal and customer-facing!) and Meeting/Collaboration tools for your Company and your Customers with minimal coding experience. 
     </p>
-    <h3 style="margin-top: 0">Lowcoder is the best Retool, Appsmith or Tooljet Alternative.</h3>
+    <h3 style="margin-top: 0">We think, Lowcoder is simply better than Retool, Appsmith Tooljet, Outsystems or Mendix.</h3>
 </div>
+---
 
-<img src="https://1167272343-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjNgeI0mUzgw6Re92iTOw%2Fuploads%2FnwXJC1XBqP2MvTQitPyo%2FApp%20Editor%20%7C%20Main%20Screeen%20clean.png?alt=media&token=e5fba81b-82a7-4c0e-a15d-baa781d5b13a"/>
-
+## 🎥 Lowcoder Intro Video  
+<div align="center">
+    <a href="https://www.youtube.com/watch?v=AQo0iFWUWiU" target="_blank">
+        <img src="https://img.youtube.com/vi/AQo0iFWUWiU/maxresdefault.jpg" alt="Lowcoder Intro Video" width="100%">
+    </a>
+    <p><i>Click the image above to watch the video on YouTube</i> 📺</p>
+</div>
 
+---
 ## 📢 Use Lowcoder in 3 steps
 1. Connect to any data sources or APIs.
-2. Build flexible and responsive UI with 100+ components and free layout / design possibilities.
+2. Build flexible and responsive UI with 120+ components and free layout / design possibilities.
 3. Share with colleagues and customers.
 
 ## 💡 Why Lowcoder
 One platform for everything instead so many different softwares. (like Website Builders, CMS, CRM, POS, ERP, Dashboards & Data Story Visualization, Collaboration Tools).
 
 It's cumbersome to create a single app. You had to design user interfaces, write code in multiple languages and frameworks, and understand how all of that code works together.
 
-NewGen Lowcode Platforms like Retool and others are great for their simplicity and flexibility - like Lowcoder too, but they can also be limited in different ways, especially when it comes to "external" applications for everyone.
+NewGen Lowcode Platforms like Retool and others are great for their simplicity and flexibility - like Lowcoder too, but they can also be limited in different ways, especially when it comes to "external" applications for everyone - because their pricing focusses to internal apps and "pay per User".
 
-Lowcoder wants to take a step forward. More specifically, Lowcoder is:
+With Lowcoder we did a step forward. More specifically, Lowcoder is:
 - An all-in-one IDE to create internal or customer-facing (external) apps.
 - A place to create, build and share building blocks of web applications and whole websites.
 - The tool and community to support your business, and lower the cost and time to develop interactive applications.
@@ -34,9 +41,9 @@ Lowcoder wants to take a step forward. More specifically, Lowcoder is:
 - The only platform which has extensibility plugin architecture [Check Community Contributions](https://www.npmjs.com/search?q=lowcoder-comp)
 
 ## 🪄 Features
-- **Visual UI builder** with 100+ built-in components. Save 90% of time to build apps.
+- **Visual UI builder** with 120+ built-in components. Save 90% of time to build apps.
 - **Modules** for reusable (!) embedable component sets in the UI builder.
-- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](https://lowcoder.cloud/about), [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk)
+- **Embed Lowcoder Apps as native parts of any Website** instead of iFrame (!). [Demo](http://demo-lowcoder.42web.io/ecommerce/), [Docu](https://docs.lowcoder.cloud/lowcoder-documentation/lowcoder-extension/native-embed-sdk)
 - **Video Meeting Components** to create your own individual Web-Meeting tool.
 - **Query Library** for reusable data queries of your data sources.
 - **Custom components** to develop own components and use them in the UI builder.
@@ -107,7 +114,3 @@ Accelerate the growth of Lowcoder and unleash its potential with your Sponsorshi
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)
 
 Like ...  [@Darkjamin](https://github.com/Darkjamin), [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
-
-## Intro Video
-
-[![Watch the video](https://i.ytimg.com/vi/s4ltAqS0hzM/maxresdefault.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AH-CYAC0AWKAgwIABABGD0gSShyMA8=&rs=AOn4CLAlPOIFdtauythoBKNPXhi6XGwlDQ)](https://youtu.be/s4ltAqS0hzM?feature=shared)

client/VERSION

@@ -1 +1 @@
-2.6.0
+2.6.3

client/package.json

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

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.6.1",
+  "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/Loading.tsx

@@ -74,6 +74,7 @@ type LoadingProps = {
   size?: number; // circle's size
   className?: string;
   style?: CSSProperties;
+  compHeight?: number;
 };
 
 export const Loading = (props: LoadingProps) => {
@@ -92,7 +93,11 @@ export const Loading = (props: LoadingProps) => {
           <Load2 {...loadingProps} />
         </Container>
       </ContainerX> */}
-      <StyledSkeleton active style={{height: '100%', animationDuration: '2s'}} />
+      <StyledSkeleton
+        active
+        paragraph={{rows: props.compHeight ? Math.floor((props.compHeight * 8) / 35) : 4}}
+        style={{height: '100%', animationDuration: '2s'}}
+      />
     </LoadingWrapper>
   );
 };

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

@@ -159,7 +159,9 @@ export const ControlPropertyViewWrapper = (
           <ToolTipLabel
             title={tooltip}
             label={label}
-            overlayInnerStyle={labelTooltipOverlayInnerStyle}
+            styles={{
+              body: labelTooltipOverlayInnerStyle,
+            }}
           />
         </LabelWrapper>
       )}

client/packages/lowcoder-design/src/components/iconSelect/index.tsx

@@ -363,10 +363,12 @@ export const IconSelectBase = (props: {
       onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
-      overlayInnerStyle={{
-        border: "none",
-        boxShadow: "none",
-        background: "transparent",
+      styles={{
+        body: {
+          border: "none",
+          boxShadow: "none",
+          background: "transparent",
+        }
       }}
       // when dragging is allowed, always re-location to avoid the popover exceeds the screen
       destroyTooltipOnHide

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

@@ -73,34 +73,52 @@ const AddBtn = styled(TacoButton)`
   }
 `;
 
+const IndicatorWrapper = ({
+  indicatorForAll,
+  children,
+}: {
+  indicatorForAll?: boolean;
+  children: ReactNode,
+}) => {
+  if (indicatorForAll) {
+    return (
+      <BranchDiv $type={"inline"}>
+        {children}
+      </BranchDiv>
+    )
+  }
+  return (<>{children}</>);
+};
+
 export const KeyValueList = (props: {
   list: ReactNode[];
   onAdd: () => void;
   onDelete: (item: ReactNode, index: number) => void;
   isStatic?: boolean;
   indicatorForAll?: boolean;
 }) => {
-  let IndicatorWrapper = ({children}: any) => (<>{children}</>);
-  if(props.indicatorForAll) IndicatorWrapper = BranchDiv;
-  return <>
-    {props.list.map((item, index) => (
-      <IndicatorWrapper $type={"inline"} key={index}>
-        <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
-          {item}
-          {!props.isStatic &&
-            <DelIcon
-              onClick={() => props.list.length > 1 && props.onDelete(item, index)}
-              $forbidden={props.list.length === 1}
-            />
-          }
-        </KeyValueListItem>
-      </IndicatorWrapper>
-    ))}
-    {!props.isStatic && 
-    <AddBtn onClick={props.onAdd}>
-      <AddIcon />
-      {trans("addItem")}
-    </AddBtn>
-    }
-  </>
+  return (
+    <>
+      {props.list.map((item, index) => (
+        <IndicatorWrapper key={index} indicatorForAll={props.indicatorForAll}>
+          <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
+            {item}
+            {!props.isStatic &&
+              <DelIcon
+                onClick={() => props.list.length > 1 && props.onDelete(item, index)}
+                $forbidden={props.list.length === 1}
+              />
+            }
+          </KeyValueListItem>
+        </IndicatorWrapper>
+      ))}
+      {!props.isStatic && (
+        <AddBtn onClick={props.onAdd}>
+          <AddIcon />
+          {trans("addItem")}
+        </AddBtn>
+
+      )}
+    </>
+  )
 };

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

@@ -64,7 +64,6 @@ const SimplePopover = (props: {
   );
   return (
     <Popover
-      overlayInnerStyle={{padding: 0}}
       align={{
         offset: [-12, 0, 0, 0],
       }}
@@ -74,7 +73,10 @@ const SimplePopover = (props: {
       open={visible}
       onOpenChange={setVisible}
       placement="left"
-      overlayStyle={{ width: "310px" }}
+      styles={{
+        root: { width: "310px" },
+        body: { padding: 0 }
+      }}
     >
       {props.children}
     </Popover>
@@ -101,16 +103,18 @@ const CustomPopover = (props: {
   );
   return (
     <Popover
-      overlayInnerStyle={{padding: 0}}
       content={contentWithBox}
       trigger="click"
       open={visible}
       onOpenChange={setVisible}
       placement={props.type === "query" ? "top" : "left"}
-      overlayStyle={{ width: "310px" }}
       align={{
         offset: [-12, 0, 0, 0],
       }}
+      styles={{
+        root: { width: "310px" },
+        body: { padding: 0 }
+      }}
     >
       {props.children}
     </Popover>
@@ -167,8 +171,10 @@ const EditPopover = (props: EditPopoverProps) => {
   return (
     <Popover
       arrow={false}
-      overlayStyle={{paddingTop: '15px'}}
-      overlayInnerStyle={{padding: 0}}
+      styles={{
+        root: { paddingTop: '15px' },
+        body: { padding: 0 }
+      }}
       content={() => (
         <>
           <Wedge />

client/packages/lowcoder-design/src/components/shapeSelect/index.tsx

@@ -444,10 +444,12 @@ export const ShapeSelectBase = (props: {
       onOpenChange={setVisible}
       getPopupContainer={parent ? () => parent : undefined}
       // hide the original background when dragging the popover is allowed
-      overlayInnerStyle={{
-        border: "none",
-        boxShadow: "none",
-        background: "transparent",
+      styles={{
+        body: {
+          border: "none",
+          boxShadow: "none",
+          background: "transparent",
+        }
       }}
       // when dragging is allowed, always re-location to avoid the popover exceeds the screen
       destroyTooltipOnHide

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

@@ -155,7 +155,7 @@ export const UnderlineCss = css`
 `;
 
 function Tooltip(props: TooltipProps) {
-  return <AntdTooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
+  return <AntdTooltip color="#2c2c2c2" styles={{ body: overlayInnerCss }} {...props} />;
 }
 
 const Label = styled.div<{ $border?: boolean }>`
@@ -181,7 +181,9 @@ function ToolTipLabel(
     <AntdTooltip
       color="#2c2c2c"
       title={title && <TooltipTitleWrapper><>{title}</></TooltipTitleWrapper>}
-      overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
+      styles={{
+        body: { maxWidth: "232px", whiteSpace: "break-spaces" }
+      }}
       arrow={{
         pointAtCenter: true
       }}

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";