Merge branch 'dev' into subscription-handling

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.4.12
+2.4.13

client/package.json

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

client/packages/lowcoder-cli-template-typescript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "scripts": {
     "start": "NODE_OPTIONS=--max_old_space_size=6144 vite",
@@ -22,7 +22,9 @@
     }
   },
   "dependencies": {
+    "@observablehq/inspector": "^5.0.1",
     "@observablehq/runtime": "^4.8.2",
+    "@observablehq/stdlib": "^5.8.8",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "lowcoder-cli": "^0.0.30",

client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types'
-import { Runtime, Inspector } from '@observablehq/runtime';
+import { Runtime } from '@observablehq/runtime';
+import { Inspector } from "@observablehq/inspector";
+import { Library } from "@observablehq/stdlib";
+
+const library = new Library();
 
 function Chart(props) {
   const [chartRef, setChartRef] = React.useState();
@@ -16,21 +20,20 @@ function Chart(props) {
     main.variable().define('translateXtoY', function() {
       return x => 50 * Math.sin((Math.PI / 50) * x - (1 / 2) * Math.PI) + 50;
     });
-    main.variable().define('d3', ['require'], function(require) {
-      return require('https://d3js.org/d3.v5.min.js');
+    main.variable().define('d3', [], function() {
+      return Library.require('https://d3js.org/d3.v5.min.js');
     });
 
     // Define the HillChart class
-    main.variable().define('HillChart', ['d3', 'DOM', 'translateXtoY'], function(d3, DOM, translateXtoY) {
+    main.variable().define('HillChart', ['d3', 'translateXtoY'], function(d3, translateXtoY) {
       return class HillChart {
         constructor(chart_height, chart_width, items) {
           this.chart_height = chart_height;
           this.chart_width = chart_width;
           this.items = items;
-      
-          this.svg = d3.select(DOM.svg(this.chart_width, this.chart_height)).attr('viewBox', `-20 -20 ${this.chart_width + 80} ${this.chart_height + 20}`);
+
+          this.svg = d3.select(library.DOM.svg(this.chart_width, this.chart_height)).attr('viewBox', `-20 -20 ${this.chart_width + 80} ${this.chart_height + 20}`);
         }
-        
 
         render() {
           const xScale = d3

client/packages/lowcoder/package.json

@@ -86,6 +86,7 @@
     "react-sortable-hoc": "^2.0.0",
     "react-test-renderer": "^18.1.0",
     "react-use": "^17.3.2",
+    "react-webcam": "^7.2.0",
     "really-relaxed-json": "^0.3.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-saga": "^1.1.3",

client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx

@@ -220,11 +220,13 @@ function useCodeMirror(
   const showLineNum = props.showLineNum ?? getStyle(props.styleName).showLineNum;
 
   const handleChange = useCallback(
-    debounce((state: EditorState) => {
+    (state: EditorState) => {
       window.clearTimeout(isTypingRef.current);
-      isTypingRef.current = window.setTimeout(() => (isTypingRef.current = 0), 100);
-      onChange?.(state);
-    }, 1000)
+      isTypingRef.current = window.setTimeout(() => {
+        isTypingRef.current = 0;
+        onChange?.(state);
+      }, 500);
+    }
     , [onChange]
   );
 

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

@@ -576,8 +576,8 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
 
           <Slider 
             style={{ width: "90%", margin: "8px 5% 0 5%"}}
-            min={6}  // Define the minimum value for the slider
-            max={20} // Define the maximum value for the slider
+            min={4}  // Define the minimum value for the slider
+            max={100} // Define the maximum value for the slider
             value={parseInt(gridRowHeight || "8")}
             onChange={(value) => setGridRowHeight(value.toString())}
             onChangeComplete={(value) => gridSizeInputBlur(value.toString())}

client/packages/lowcoder/src/components/layout/SideBarSection.tsx

@@ -24,9 +24,9 @@ export const SideBarSection = (props: SideBarSectionProps) => {
   const user = useSelector<AppState, User>(getUser);
   const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
   const currentPath = useLocation().pathname;
-
+  const isShow = props.items.map(item => item.visible ? item.visible({ user: user, applications: applications }) : true).includes(true);
   return (
-    <Wrapper className={CNSidebarSection} style={props.style}>
+    <Wrapper className={ isShow ? CNSidebarSection : ''} style={props.style}>
       {props.title}
       {props.items
         .filter((item) =>

client/packages/lowcoder/src/components/table/columnTypeView.tsx

@@ -38,7 +38,7 @@ const ColumnTypeHoverView = styled.div<{
   max-height: 150px;
   max-width: 300px;
   overflow: auto;
-  background: inherit;
+  background: #fafafa;
   z-index: 3;
   padding: ${(props) => props.$padding};
   top: ${(props) => `${props.$adjustTop || 0}px`};

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

@@ -216,7 +216,7 @@ const childrenMap = {
   lowcoderCompVersion: withDefault(StringControl, 'latest'),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   gridColumns: RangeControl.closed(8, 48, 24),
-  gridRowHeight: RangeControl.closed(6, 20, 8),
+  gridRowHeight: RangeControl.closed(4, 100, 8),
   gridRowCount: withDefault(NumberControl, DEFAULT_ROW_COUNT),
   gridPaddingX: withDefault(NumberControl, 20),
   gridPaddingY: withDefault(NumberControl, 20),