Hotfixes to main

.gitignore

@@ -9,3 +9,4 @@ client/node_modules/
 client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
 client/packages/lowcoder-plugin-demo/yarn.lock
 client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
+application-dev.yml

client/package.json

@@ -35,6 +35,7 @@
     "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
+    "@types/simplebar": "^5.3.3",
     "@types/stylis": "^4.0.2",
     "@types/tern": "0.23.4",
     "@types/ua-parser-js": "^0.7.36",
@@ -79,6 +80,8 @@
     "chalk": "4",
     "number-precision": "^1.6.0",
     "react-player": "^2.11.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "simplebar": "^6.2.5",
     "tui-image-editor": "^3.15.3"
   }
 }

client/packages/lowcoder-comps/package.json

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

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

@@ -120,7 +120,9 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
 
   const handleOnMapScriptLoad = () => {
     setMapScriptLoaded(true);
-    loadGoogleMapData();
+    setTimeout(() => {
+      loadGoogleMapData();
+    })
   }
 
   useEffect(() => {

client/packages/lowcoder-design/package.json

@@ -13,7 +13,9 @@
     "react-virtualized": "^9.22.3",
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "simplebar": "^6.2.5",
+    "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^23.0.2",
@@ -23,6 +25,7 @@
     "@rollup/plugin-typescript": "^9.0.2",
     "@rollup/plugin-url": "^8.0.1",
     "@svgr/rollup": "^6.5.1",
+    "@types/simplebar": "^5.3.3",
     "rollup": "^2",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-polyfill-node": "^0.11.0",

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

@@ -1,8 +1,11 @@
 import React from "react";
 import SimpleBar from "simplebar-react";
+import 'simplebar-react/dist/simplebar.min.css';
 import styled from "styled-components";
+import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's DebouncedFunc type
 
-const ScrollBarWrapper = styled.div`
+
+const ScrollBarWrapper = styled.div<{ hidePlaceholder?: boolean }>`
   min-height: 0;
   height: 100%;
   width: 100%;
@@ -33,19 +36,39 @@ const ScrollBarWrapper = styled.div`
     top: 10px;
     bottom: 10px;
   }
+
+  ${props => props.hidePlaceholder && `
+    .simplebar-placeholder {
+      display: none !important;
+    }
+  `}
 `;
 
-interface IProps extends SimpleBar.Props {
+// .simplebar-placeholder { added by Falk Wolsky to hide the placeholder - as it doubles the vertical space of a Module on a page
+
+interface IProps {
   children: React.ReactNode;
   className?: string;
   height?: string;
+  style?: React.CSSProperties; // Add this line to include a style prop
+  scrollableNodeProps?: {
+    onScroll: DebouncedFunc<(e: any) => void>;
+  };
+  hidePlaceholder?: boolean;
+  hideScrollbar?: boolean;
 }
 
-export const ScrollBar = (props: IProps) => {
-  const { height = "100%", className, children, ...otherProps } = props;
-  return (
+export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar = false, ...otherProps }: IProps) => {
+  // You can now use the style prop directly or pass it to SimpleBar
+  const combinedStyle = { ...style, height }; // Example of combining height with passed style
+
+  return hideScrollbar ? (
+    <ScrollBarWrapper className={className}>
+      {children}
+    </ScrollBarWrapper>
+  ) : (
     <ScrollBarWrapper className={className}>
-      <SimpleBar forceVisible="y" style={{ height: height }} {...otherProps}>
+      <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
         {children}
       </SimpleBar>
     </ScrollBarWrapper>

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

@@ -290,7 +290,7 @@ export { ReactComponent as WidthIcon } from "./icon-width.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./icon-responsive-layout-comp.svg";
 export { ReactComponent as TextSizeIcon } from "./remix/font-size-2.svg";
 export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg";
-export { ReactComponent as TextWeigthIcon } from "./remix/bold.svg";
+export { ReactComponent as TextWeightIcon } from "./remix/bold.svg";
 export { ReactComponent as BorderWidthIcon } from "./remix/expand-width-line.svg";
 export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";
 export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg";

client/packages/lowcoder-sdk/package.json

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

client/packages/lowcoder/index.html

@@ -4,13 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"/>
     <meta lang="en" name="description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
-    <meta name="theme-color" content="#000000" />
-    <meta property="iframely:title" content="Lowcoder" />
-    <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
-    <!-- Added Montserrat google font link to test font family style property for components -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <meta name="theme-color" content="#000000" />    
     <style>
       html,
       body {

client/packages/lowcoder/package.json

@@ -93,7 +93,7 @@
     "rehype-sanitize": "^5.0.1",
     "remark-gfm": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "simplebar-react": "2.3.6",
+    "simplebar-react": "^3.2.4",
     "sql-formatter": "^8.2.0",
     "styled-components": "^6.1.6",
     "stylis": "^4.1.1",

client/packages/lowcoder/src/app.tsx

@@ -96,6 +96,10 @@ class AppIndex extends React.Component<AppIndexProps, any> {
   render() {
     const isTemplate = hasQueryParam("template");
     const pathname = history.location.pathname;
+
+    // we check if we are on the public cloud
+    const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
+
     // make sure all users in this app have checked login info
     if (!this.props.isFetchUserFinished) {
       const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname);
@@ -107,6 +111,21 @@ class AppIndex extends React.Component<AppIndexProps, any> {
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
           <meta name="description" content={trans("productDesc")} />
+
+          {isLowCoderDomain && (
+            <>
+              {/* setting Meta Attributes to be able for embedding via iframely */}
+              <meta property="iframely:title" content="Lowcoder" />
+              <meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
+
+              <link rel="preconnect" href="https://fonts.googleapis.com"/>
+              <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous"/>
+              <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet"/>
+              {/* embedding analytics of Cleabits */}
+              <script src="https://tag.clearbitscripts.com/v1/pk_931b51e405557300e6a7c470e8247d5f/tags.js" referrerPolicy="strict-origin-when-cross-origin"></script>
+            </>
+          )}
+
         </Helmet>
         <SystemWarning />
         <Router history={history}>

client/packages/lowcoder/src/components/CompName.tsx

@@ -112,6 +112,13 @@ export const CompName = (props: Iprops) => {
 
 
   if (compInfo.isRemote) {
+    items.push({
+      text: trans("history.currentVersion") + ": " + compInfo.packageVersion,
+      onClick: () => {
+
+      },
+    });
+
     items.push({
       text: trans("comp.menuUpgradeToLatest"),
       onClick: () => {

client/packages/lowcoder/src/comps/comps/allComp.test.tsx

@@ -72,7 +72,7 @@ Object.keys(QueryMap).forEach((key) => {
 
 function logDiff(comp: any, newComp: any, prefix?: string) {
   if (_.isNil(comp.children)) {
-    console.info(`diff. comp.${prefix}: `, comp, ` newComp.${prefix}: `, newComp);
+    // console.info(`diff. comp.${prefix}: `, comp, ` newComp.${prefix}: `, newComp);
     return;
   }
   Object.keys(comp.children).forEach((key) => {

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -215,17 +215,11 @@ export function ListView(props: Props) {
     <BackgroundColorContext.Provider value={style.background}>
       <ListViewWrapper $style={style} $paddingWidth={paddingWidth}>
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
-          {scrollbars ? (
-            <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }}>
-              <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
-                <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
-              </ReactResizeDetector>}</>
-            </ScrollBar>
-          ) : (
+          <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
             <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
               <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
             </ReactResizeDetector>}</>
-          )}
+          </ScrollBar>
         </BodyWrapper>
         <FooterWrapper>
           <Pagination size="small" itemRender={pageItemRender} {...pageInfo.pagination} />

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

@@ -505,6 +505,7 @@ class ModuleTmpComp extends ModuleCompBase {
 const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   const appId = comp.children.appId.getView();
   const error = comp.children.error.getView();
+  const scrollbars = comp.children.scrollbars.getView();
 
   const moduleExternalState: ExternalEditorContextState = useMemo(
     () => ({
@@ -530,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ScrollBar style={{ height: comp.children.scrollbars.getView() ? "100%" : "auto", margin: "0px", padding: "0px" }}>
+        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
           <ExternalEditorContext.Provider value={moduleExternalState}>
            {comp.moduleRootComp.getView()}
           </ExternalEditorContext.Provider>

client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx

@@ -96,8 +96,7 @@ function ModuleLayoutView(props: IProps) {
   };
 
   return (
-    <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
-      <CanvasView
+    <CanvasView
       layout={layout}
       items={items}
       positionParams={{ ...positionParams, cols: parseInt(defaultGrid) }}
@@ -106,7 +105,6 @@ function ModuleLayoutView(props: IProps) {
       onLayoutChange={onLayoutChange}
       extraHeight="0px"
     />
-    </ScrollBar>
   );
 }
 
@@ -118,26 +116,28 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
     const rowCount = this.children.containerRowCount.getView();
     return (
       <div>
-        <ModuleLayoutView
-        positionParams={this.children.positionParams.getView()}
-        containerSize={this.children.containerSize.getView()}
-        containerView={this.children.container.containerView({
-          rowCount,
-          isRowCountLocked,
-          onRowCountChange: (rowCount) => {
-            this.children.containerRowCount.dispatchChangeValueAction(rowCount);
-          },
-        })}
-        onPositionParamsChange={(params) => {
-          setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
-        }}
-        onLayoutChange={(layout) => {
-          this.children.containerSize.dispatchChangeValueAction({
-            height: layout[moduleContainerId].h,
-            width: layout[moduleContainerId].w,
-          });
-        }}
-      />
+        <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} hidePlaceholder={false}>
+          <ModuleLayoutView
+            positionParams={this.children.positionParams.getView()}
+            containerSize={this.children.containerSize.getView()}
+            containerView={this.children.container.containerView({
+              rowCount,
+              isRowCountLocked,
+              onRowCountChange: (rowCount) => {
+                this.children.containerRowCount.dispatchChangeValueAction(rowCount);
+              },
+            })}
+            onPositionParamsChange={(params) => {
+              setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
+            }}
+            onLayoutChange={(layout) => {
+              this.children.containerSize.dispatchChangeValueAction({
+                height: layout[moduleContainerId].h,
+                width: layout[moduleContainerId].w,
+              });
+            }}
+          />
+        </ScrollBar>
       </div>
     );
   }

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

@@ -52,6 +52,8 @@ import {
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { migrateOldData } from "comps/generators/simpleGenerators";
+import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 const getStyle = (style: InputLikeStyleType) => {
   return css`
@@ -372,7 +374,7 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
   );
 };
 
-const NumberInputTmpComp = (function () {
+let NumberInputTmpComp = (function () {
   return new UICompBuilder(childrenMap, (props) => {
     return props.label({
       required: props.required,
@@ -434,6 +436,8 @@ const NumberInputTmpComp = (function () {
     .build();
 })();
 
+NumberInputTmpComp = migrateOldData(NumberInputTmpComp, fixOldInputCompData);
+
 const NumberInputTmp2Comp = withMethodExposing(
   NumberInputTmpComp,
   refMethods([

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

@@ -30,7 +30,7 @@ const getStyle = (style: SliderStyleType) => {
         }
         .ant-slider-handle {
           background-color: ${style.thumb};
-          border-color: ${style.thumbBoder};
+          border-color: ${style.thumbBorder};
         }
       }
       &:hover {
@@ -39,7 +39,7 @@ const getStyle = (style: SliderStyleType) => {
         }
       }
       .ant-slider-handle:focus {
-        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBoder, 0.08), 0.12)};
+        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
       }
     }
   `;

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -22,6 +22,8 @@ import { ValueFromOption } from "lowcoder-design";
 import { EllipsisTextCss } from "lowcoder-design";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
+import { migrateOldData } from "comps/generators/simpleGenerators";
+import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 
 export const getStyle = (style: CheckboxStyleType) => {
   return css`
@@ -126,7 +128,7 @@ const CheckboxGroup = styled(AntdCheckboxGroup) <{
   }}
 `;
 
-const CheckboxBasicComp = (function () {
+let CheckboxBasicComp = (function () {
   const childrenMap = {
     defaultValue: arrayStringExposingStateControl("defaultValue"),
     value: arrayStringExposingStateControl("value"),
@@ -176,6 +178,8 @@ const CheckboxBasicComp = (function () {
     .build();
 })();
 
+CheckboxBasicComp = migrateOldData(CheckboxBasicComp, fixOldInputCompData);
+
 export const CheckboxComp = withExposingConfigs(CheckboxBasicComp, [
   new NameConfig("value", trans("selectInput.valueDesc")),
   SelectInputInvalidConfig,