Feb 25, 2024 · Aug 4, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 20, 2023 · Dec 29, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
 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
 .DS_Store
 .DS_Store
diff --git a/README.md b/README.md
 🔎 Submit an issue here on [GitHub](https://github.com/lowcoder-org/lowcoder/issues)

 ## 💻 Deployment Options
 [![Deploy to AWS using Stitch](https://img.shields.io/badge/deploy_with-Stitch-%23E369F7?logo=amazonaws&color=%23E369F7)](https://deploy.stitch.tech/lowcoder/lowcoder)

 You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
 - [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)

 Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
 [Be a Sponsor](https://github.com/sponsors/lowcoder-org)

 Like ...@CHSchuepfer &@spacegoats-io. Thank you very much!!
 Like ... [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
diff --git a/client/VERSION b/client/VERSION
 2.3.0
 2.3.1
diff --git a/client/package.json b/client/package.json
 {
  "name": "lowcoder-root",
  "version": "2.2.0",
  "version": "2.3.1",
  "type": "module",
  "private": true,
  "workspaces": [
  },
  "scripts": {
    "start": "yarn workspace lowcoder start",
    "start-win": "LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
    "start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
    "start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
    "build": "yarn node ./scripts/build.js",
  },
  "dependencies": {
    "@lottiefiles/react-lottie-player": "^3.5.3",
    "@remixicon/react": "^4.1.1",
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.5.1",
    "@types/styled-components": "^5.1.34",
diff --git a/client/packages/lowcoder-cli-template-typescript/package.json b/client/packages/lowcoder-cli-template-typescript/package.json
    "react-dom": "^18.2.0",
    "react-resize-detector": "^7.0.0",
    "typescript": "5.3.3",
    "vite": "^5.0.10"
    "vite": "^4.5.2"
  },
  "keywords": [
    "Lowcoder, Component, Template, Plugin, Demonstrator"
diff --git a/client/packages/lowcoder-cli/package.json b/client/packages/lowcoder-cli/package.json
    "react-dom": "^18.2.0",
    "react-json-view": "^1.21.3",
    "rollup-plugin-external-globals": "^0.7.1",
    "vite": "^4.3.9",
    "vite": "^4.5.2",
    "vite-plugin-css-injected-by-js": "^2.1.1",
    "vite-plugin-svgr": "^2.2.2"
  },
diff --git a/client/packages/lowcoder-comps/README.md b/client/packages/lowcoder-comps/README.md
 # lowcoder comp lib
 # Lowcoder Extra Components

 This is the workspace for Lowcoder Extra Components like Calendar, Image Editor, Mermaid Charts and eCharts.

 ## Local Development preparation

 Navigate your terminal or bash to your /root folder (lowcoder repository) to install Lowcoder Extra Components dependencies and the Lowcoder SDK

 To develop with the Lowcoder Extra Components after you clone the Lowcoder Repository, first make sure the Lowcoder SDK is local built.

 ```bash
 cd client/packages/lowcoder-sdk
 yarn build
 ```

 ## Start

 Startdev server to develop yourcomp lib.
 Now you can start the localdev serverfor Lowcoder Extra Componentsto developand addyourComponent Plugin

 ```bash
 cd client/packages/lowcoder-comps
 yarn start
 ```

 # or
 The local dev server will build for roughly a minute and open then a Browser Window on http://localhost:9000/ with the Lowcoder Component Builder.

 ## Local development

 After the local dev server is started, the Lowcoder Component Builder is prepared. A new browser window should open at http://localhost:9000 This is the Components Preview, which allows you to see your new component in action, as it would work in the Lowcoder Editor.

 Data, methods and properties are visible and interactive, so you can test your Component during development. The view will get automatically refreshed.

 The Lowcoder Component Builder makes the development & publishing of multiple individual components as bundle possible. Find the /src/comps folder in /lowcoder-comps. Here are existing components to find. It is suggested for new components to create a new folder. In the left navigation of the Components Preview you can switch between your components.

 to see your component and include it in the processing on the development server, you have to do the folloiwing steps:

 ### modify /lowcoder-comps/package.json

 ```JSON
 "yournewcomponent": {
    "name": "Your new Component name",
    "icon": "./icons/your-icon.svg",
    "description": "A Component Plugin to ...",
    "category": "itemHandling",
    "layoutInfo": {
        "w": 6,
        "h": 30
    }
 }
 ```

 npm start

 Please choose one category out of:

 - dashboards
 - layout
 - forms
 - collaboration
 - projectmanagement
 - scheduling
 - documents
 - itemHandling
 - multimedia
 - integration

 layoutInfo helps you to define the size (in grid-cells) of your Component in the grid for the very first moment, when a user drags your Component out of the components display on the right side in the Lowcoder Editor.

 ### modify /lowcoder-comps/src/index.ts

 ```JavaScript
 Add your Component for the exported members of Lowcoder Extra Components

 import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
 import { ImageEditorComp } from "./comps/imageEditorComp/index";
 import { CalendarComp } from "./comps/calendarComp/calendarComp";
 import { MermaidComp } from "comps/mermaidComp";

 import { YourComponent } from "comps/yourComponentFolder/yourComponent";

 export default {
  chart: ChartCompWithDefault,
  imageEditor: ImageEditorComp,
  calendar: CalendarComp,
  mermaid: MermaidComp,

  yourcomponent: YourComponent,
 };
 ```
 Now your Plugin should be visibe and displayed in the Lowcoder Component Builder at http://localhost:9000/

 ## Build

 Build current comp lib into a .tgz file thatyou canupload ittothe Lowcoder Comp Market.
 When you finish development and all tests,you canbuild the Componentstouse it in runtime.

 Before build you should change the version in package.json file.
 This will build the current Component Plugins into a .tgz file that you can upload.

 **Before build you should change the version in package.json file.**

 ```bash
 yarn build

 npm run build
 ```

 ## How to publish a Component Plugin

 With the following command you can publish the script to the NPM repository:

 ```bash
 yarn build --publish
 ```

 This command will publis the whole Lowcoder Extra Components bundle to [NPMjs](https://www.npmjs.com/)
 Make sure, you updated the Version of Lowcoder Comps before in /lowcoder-comps/package.json

 ## Contribute your Plugin

 If you wish to contribute your plugin and persist it as general Lowcoder Extra Component, please raise a PR to our /dev branch in the Lowcoder Community-Edition Repository https://github.com/lowcoder-org/lowcoder
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
  },
  "devDependencies": {
    "jest": "29.3.0",
    "vite": "^4.3.9",
    "vite": "^5.0.12",
    "vite-tsconfig-paths": "^3.6.0"
  }
 }
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
      flex-direction: inherit;
    }
    .fc-day-today .fc-daygrid-day-number {
      background-color: ${(props) => props.$theme.primary};
      background-color: ${(props) => props.$theme?.primary ? props.$theme.primary : props.$style.background};
      color: ${(props) =>
        contrastText(props.$theme.primary || "", props.$theme.textDark, props.$theme.textLight)};
        contrastText(props.$theme?.primary || "", props.$theme?.textDark || "#000000", props.$theme?.textLight || "#ffffff")};
    }
    .fc-daygrid-day-events {
      padding: 1px 0 5px 0;
    }
    .fc-day-today.fc-col-header-cell {
      background-color: ${(props) =>
        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
        isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"};
      a {
        color: ${(props) =>
          !isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
          !isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)};
      }
    }
    .fc-col-header-cell-cushion {
diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts
     * broadcast other actions in comp tree structure.
     * used for encapsulate MultiBaseComp
     */
    BROADCAST = "BROADCAST"
    BROADCAST = "BROADCAST",
 }
 type ExtraActionType = "layout" | "delete" | "add" | "modify" | "rename" | "recover" | "upgrade";
 type ActionExtraInfo = {
diff --git a/client/packages/lowcoder-design/src/components/edit.tsx b/client/packages/lowcoder-design/src/components/edit.tsx
  border: none;
  padding: 0 8px 0 4px;
  padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
  color: #ffffff;
  color: #444444;
  line-height: 28px;
  font-size: 14px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,5 +9,3 @@ 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
		.DS_Store
		.DS_Store
Original file line number	Diff line number	Diff line change
Expand Up		@@ -85,6 +85,8 @@ And we mean it... Day by day!
		🔎 Submit an issue here on [GitHub](https://github.com/lowcoder-org/lowcoder/issues)

		## 💻 Deployment Options
		[![Deploy to AWS using Stitch](https://img.shields.io/badge/deploy_with-Stitch-%23E369F7?logo=amazonaws&color=%23E369F7)](https://deploy.stitch.tech/lowcoder/lowcoder)

		You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/) at any time, or use the following resources for self-host Lowcoder on different platforms:
		- [Docker](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)

Expand All		@@ -97,4 +99,4 @@ You can access Lowcoder from [cloud-hosted version](https://app.lowcoder.cloud/)
		Accelerate the growth of Lowcoder and unleash its potential with your Sponsorship – together, we're shaping the future of Lowcode for everyone!
		[Be a Sponsor](https://github.com/sponsors/lowcoder-org)

		Like ...@CHSchuepfer &@spacegoats-io. Thank you very much!!
		Like ... [@spacegoats-io](https://github.com/spacegoats-io), [@Jomedya](https://github.com/Jomedya), [@CHSchuepfer](https://github.com/CHSchuepfer), Thank you very much!!
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		{
		"name": "lowcoder-root",
		"version": "2.2.0",
		"version": "2.3.1",
		"type": "module",
		"private": true,
		"workspaces": [
Expand All		@@ -11,6 +11,7 @@
		},
		"scripts": {
		"start": "yarn workspace lowcoder start",
		"start-win": "LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
		"start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
		"start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
		"build": "yarn node ./scripts/build.js",
Expand DownExpand Up		@@ -70,6 +71,7 @@
		},
		"dependencies": {
		"@lottiefiles/react-lottie-player": "^3.5.3",
		"@remixicon/react": "^4.1.1",
		"@testing-library/react": "^14.1.2",
		"@testing-library/user-event": "^14.5.1",
		"@types/styled-components": "^5.1.34",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,7 +32,7 @@
		"react-dom": "^18.2.0",
		"react-resize-detector": "^7.0.0",
		"typescript": "5.3.3",
		"vite": "^5.0.10"
		"vite": "^4.5.2"
		},
		"keywords": [
		"Lowcoder, Component, Template, Plugin, Demonstrator"
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,7 +33,7 @@
		"react-dom": "^18.2.0",
		"react-json-view": "^1.21.3",
		"rollup-plugin-external-globals": "^0.7.1",
		"vite": "^4.3.9",
		"vite": "^4.5.2",
		"vite-plugin-css-injected-by-js": "^2.1.1",
		"vite-plugin-svgr": "^2.2.2"
		},
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,22 +1,100 @@
		# lowcoder comp lib
		# Lowcoder Extra Components

		This is the workspace for Lowcoder Extra Components like Calendar, Image Editor, Mermaid Charts and eCharts.

		## Local Development preparation

		Navigate your terminal or bash to your /root folder (lowcoder repository) to install Lowcoder Extra Components dependencies and the Lowcoder SDK

		To develop with the Lowcoder Extra Components after you clone the Lowcoder Repository, first make sure the Lowcoder SDK is local built.

		```bash
		cd client/packages/lowcoder-sdk
		yarn build
		```

		## Start

		Startdev server to develop yourcomp lib.
		Now you can start the localdev serverfor Lowcoder Extra Componentsto developand addyourComponent Plugin

		```bash
		cd client/packages/lowcoder-comps
		yarn start
		```

		# or
		The local dev server will build for roughly a minute and open then a Browser Window on http://localhost:9000/ with the Lowcoder Component Builder.

		## Local development

		After the local dev server is started, the Lowcoder Component Builder is prepared. A new browser window should open at http://localhost:9000 This is the Components Preview, which allows you to see your new component in action, as it would work in the Lowcoder Editor.

		Data, methods and properties are visible and interactive, so you can test your Component during development. The view will get automatically refreshed.

		The Lowcoder Component Builder makes the development & publishing of multiple individual components as bundle possible. Find the /src/comps folder in /lowcoder-comps. Here are existing components to find. It is suggested for new components to create a new folder. In the left navigation of the Components Preview you can switch between your components.

		to see your component and include it in the processing on the development server, you have to do the folloiwing steps:

		### modify /lowcoder-comps/package.json

		```JSON
		"yournewcomponent": {
		"name": "Your new Component name",
		"icon": "./icons/your-icon.svg",
		"description": "A Component Plugin to ...",
		"category": "itemHandling",
		"layoutInfo": {
		"w": 6,
		"h": 30
		}
		}
		```

		npm start

		Please choose one category out of:

		- dashboards
		- layout
		- forms
		- collaboration
		- projectmanagement
		- scheduling
		- documents
		- itemHandling
		- multimedia
		- integration

		layoutInfo helps you to define the size (in grid-cells) of your Component in the grid for the very first moment, when a user drags your Component out of the components display on the right side in the Lowcoder Editor.

		### modify /lowcoder-comps/src/index.ts

		```JavaScript
		Add your Component for the exported members of Lowcoder Extra Components

		import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
		import { ImageEditorComp } from "./comps/imageEditorComp/index";
		import { CalendarComp } from "./comps/calendarComp/calendarComp";
		import { MermaidComp } from "comps/mermaidComp";

		import { YourComponent } from "comps/yourComponentFolder/yourComponent";

		export default {
		chart: ChartCompWithDefault,
		imageEditor: ImageEditorComp,
		calendar: CalendarComp,
		mermaid: MermaidComp,

		yourcomponent: YourComponent,
		};
		```
		Now your Plugin should be visibe and displayed in the Lowcoder Component Builder at http://localhost:9000/

		## Build

		Build current comp lib into a .tgz file thatyou canupload ittothe Lowcoder Comp Market.
		When you finish development and all tests,you canbuild the Componentstouse it in runtime.

		Before build you should change the version in package.json file.
		This will build the current Component Plugins into a .tgz file that you can upload.

		Before build you should change the version in package.json file.

		```bash
		yarn build
Expand All		@@ -25,3 +103,18 @@ yarn build

		npm run build
		```

		## How to publish a Component Plugin

		With the following command you can publish the script to the NPM repository:

		```bash
		yarn build --publish
		```

		This command will publis the whole Lowcoder Extra Components bundle to [NPMjs](https://www.npmjs.com/)
		Make sure, you updated the Version of Lowcoder Comps before in /lowcoder-comps/package.json

		## Contribute your Plugin

		If you wish to contribute your plugin and persist it as general Lowcoder Extra Component, please raise a PR to our /dev branch in the Lowcoder Community-Edition Repository https://github.com/lowcoder-org/lowcoder
Original file line number	Diff line number	Diff line change
Expand Up		@@ -69,7 +69,7 @@
		},
		"devDependencies": {
		"jest": "29.3.0",
		"vite": "^4.3.9",
		"vite": "^5.0.12",
		"vite-tsconfig-paths": "^3.6.0"
		}
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -205,9 +205,9 @@ export const Wrapper = styled.div<{
		flex-direction: inherit;
		}
		.fc-day-today .fc-daygrid-day-number {
		background-color: ${(props) => props.$theme.primary};
		background-color: ${(props) => props.$theme?.primary ? props.$theme.primary : props.$style.background};
		color: ${(props) =>
		contrastText(props.$theme.primary \|\| "", props.$theme.textDark, props.$theme.textLight)};
		contrastText(props.$theme?.primary \|\| "", props.$theme?.textDark \|\| "#000000", props.$theme?.textLight \|\| "#ffffff")};
		}
		.fc-daygrid-day-events {
		padding: 1px 0 5px 0;
Expand DownExpand Up		@@ -585,10 +585,10 @@ export const Wrapper = styled.div<{
		}
		.fc-day-today.fc-col-header-cell {
		background-color: ${(props) =>
		isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme.primary!) + "19"};
		isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"};
		a {
		color: ${(props) =>
		!isDarkColor(props.$style.background) && darkenColor(props.$theme.primary!, 0.1)};
		!isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)};
		}
		}
		.fc-col-header-cell-cushion {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -454,7 +454,7 @@ declare enum CompActionTypes {
		* broadcast other actions in comp tree structure.
		* used for encapsulate MultiBaseComp
		*/
		BROADCAST = "BROADCAST"
		BROADCAST = "BROADCAST",
		}
		type ExtraActionType = "layout" \| "delete" \| "add" \| "modify" \| "rename" \| "recover" \| "upgrade";
		type ActionExtraInfo = {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,7 +68,7 @@ const TextInput = styled(Input)<InputProps & { $hasPrefix?: boolean }>`
		border: none;
		padding: 0 8px 0 4px;
		padding-left: ${(props) => (props.$hasPrefix ? "28px" : "4px")};
		color: #ffffff;
		color: #444444;
		line-height: 28px;
		font-size: 14px;

Expand Down