pull from dev

Author: MenamAfzaal

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

@@ -158,4 +158,5 @@ export const sectionNames = {
   headerStyle:trans("prop.headerStyle"),
   bodyStyle:trans("prop.bodyStyle"),
   badgeStyle:trans("prop.badgeStyle"),
+  columnStyle:trans("prop.columnStyle"),
 };

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -37,6 +37,7 @@ export const en = {
     headerStyle: 'Header Style',
     bodyStyle: 'Body Style',
     badgeStyle: 'Badge Style',
+    columnStyle: 'Column Style',
   },
   passwordInput: {
     label: "Password:",

client/packages/lowcoder-design/src/i18n/design/locales/zh.ts

@@ -1,4 +1,7 @@
-export const zh = {
+import {en} from "./en";
+
+export const zh: typeof en = {
+    ...en,
     addItem: "添加",
     duplicate: "复制",
     rename: "重命名",
@@ -10,54 +13,64 @@ export const zh = {
     nextStep: "下一步",
     finish: "完成",
     country: {
-      china: "中国",
+        ...en.country,
+        china: "中国",
     },
     notification: {
-      copySuccess: "复制成功",
-      copyFail: "复制失败",
+        ...en.notification,
+        copySuccess: "复制成功",
+        copyFail: "复制失败",
     },
     prop: {
-      basic: "基础",
-      resources: "资源",
-      interaction: "交互",
-      advanced: "高级",
-      validation: "验证",
-      layout: "布局",
-      labelStyle:"标签样式",
-      style: "样式",
-      meetings: "会议",
-      data: "数据",
+        ...en.prop,
+        basic: "基础",
+        resources: "资源",
+        interaction: "交互",
+        advanced: "高级",
+        validation: "验证",
+        layout: "布局",
+        labelStyle:"标签样式",
+        style: "样式",
+        meetings: "会议",
+        data: "数据",
     },
     passwordInput: {
+        ...en.passwordInput,
         label: "密码:",
         placeholder: "请输入密码",
         inconsistentPassword: "两次密码输入不一致",
         confirmPasswordLabel: "确认密码:",
         confirmPasswordPlaceholder: "请再次输入密码",
     },
     verifyCodeInput: {
+        ...en.verifyCodeInput,
         label: "验证码:",
         errorMsg: "验证码应为 {digitNum} 位数字",
         placeholder: "请输入 {digitNum} 位数字验证码",
         sendCode: "发送验证码",
     },
     iconSelect: {
+        ...en.iconSelect,
         title: "选择图标",
         searchPlaceholder: "搜索图标",
     },
     eventHandler: {
+        ...en.eventHandler,
         advanced: "高级",
     },
     comp: {
+        ...en.comp,
         selectedCompsTitle: "已选择 {selectCompNum} 个组件",
         selectedCompsDetail: "点击组件查看其属性",
         batchDelete: "批量删除",
     },
     optionsControl: {
+        ...en.optionsControl,
         optionItemErrorMSg: `发现重复的选项值 "{value}"，只会显示第一项,请更改为唯一值.`,
         emptyList: "无选项",
     },
     container: {
+        ...en.container,
         hintPlaceHolder: "从右侧面板拖动组件",
     },
   };

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

@@ -125,6 +125,7 @@ export { ReactComponent as InviteUserIcon } from "./icon-application-invite-user
 export { ReactComponent as HomeEmptyIcon } from "./icon-application-empty.svg";
 export { ReactComponent as HomeListIcon } from "./icon-application-list.svg";
 export { ReactComponent as HomeCardIcon } from "./icon-application-card.svg";
+export { ReactComponent as APIDocsIcon } from "./remix/instance-line.svg";
 // export { ReactComponent as AllAppIcon } from "./icon-all-app.svg";
 
 
@@ -263,6 +264,7 @@ export { ReactComponent as ChartCompIconSmall } from "./v2/pie-chart-s.svg";
 export { ReactComponent as CheckboxCompIconSmall } from "./v2/checkbox-s.svg";
 export { ReactComponent as ColorPickerCompIconSmall } from "./v2/colorpicker-s.svg"; // new
 export { ReactComponent as CollapsibleContainerCompIconSmall } from "./v2/collapsible-container-s.svg"; // new
+export { ReactComponent as ColumnLayoutCompIconSmall } from "./v2/column-layout-s.svg"; // new
 export { ReactComponent as CommentCompIconSmall } from "./v2/comment-s.svg";
 export { ReactComponent as ContainerCompIconSmall } from "./v2/container-s.svg";
 export { ReactComponent as CustomCompIconSmall } from "./v2/custom-code-s.svg"; // new
@@ -364,6 +366,7 @@ export { ReactComponent as CascaderCompIcon } from "./v2/cascader-m.svg";
 export { ReactComponent as ChartCompIcon } from "./v2/pie-chart-m.svg";
 export { ReactComponent as CheckboxCompIcon } from "./v2/checkbox-m.svg";
 export { ReactComponent as CollapsibleContainerCompIcon } from "./v2/collapsible-container-m.svg";
+export { ReactComponent as ColumnLayoutCompIcon } from "./v2/column-layout-m.svg";
 export { ReactComponent as CommentCompIcon } from "./v2/comment-m.svg";
 export { ReactComponent as ColorPickerCompIcon } from "./v2/colorpicker-m.svg";
 export { ReactComponent as ContainerCompIcon } from "./v2/container-m.svg";

client/packages/lowcoder/package.json

@@ -29,6 +29,7 @@
     "@rjsf/core": "^5.15.1",
     "@rjsf/utils": "^5.15.1",
     "@rjsf/validator-ajv8": "^5.15.1",
+    "@stoplight/elements": "^8.1.3",
     "@types/lodash": "^4.14.194",
     "@types/node": "^16.7.13",
     "@types/react": "^18.2.45",
@@ -128,6 +129,7 @@
     "vite-plugin-checker": "^0.5.1",
     "vite-plugin-dynamic-import": "^1.5.0",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^2.2.2",
     "vite-tsconfig-paths": "^3.6.0"
   }

client/packages/lowcoder/src/app.tsx

@@ -27,8 +27,8 @@ import {
   ADMIN_APP_URL,
   ORG_AUTH_FORGOT_PASSWORD_URL,
   ORG_AUTH_RESET_PASSWORD_URL,
+  API_DOCS_URL,
 } from "constants/routesURL";
-
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Helmet } from "react-helmet";
@@ -123,10 +123,43 @@ 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")} />
+          <meta name="keywords" content="Lowcoder, Applications, App Builder, Internal Applications, Websites, Dashboards, Data Visualization, Customer Applications, CRM, ERP, eCommerce, VideoMeeting, Rapid Development" />
+          <meta name="author" content="Lowcoder Software LTD" />
+          <meta name="robots" content="index, follow" />
+
+          
+          <meta key="og:title" property="og:title" content={this.props.brandName} />
+          <meta key="og:description" property="og:description" content={trans("productDesc")} />
+          <meta key="og:image" property="og:image" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png" />
+          <meta key="og:url" property="og:url" content={window.location.href} />
+          <meta key="og:type" property="og:type" content="website" />
+
+          <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
+          <meta key="twitter:title" name="twitter:title" content={this.props.brandName} />
+          <meta key="twitter:description" name="twitter:description" content={trans("productDesc")} />
+          <meta key="twitter:image" name="twitter:image" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png" />
+
+          <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+          <meta key="mobile-web-app-capable" name="mobile-web-app-capable" content="yes" />
+          <meta key="theme-color" name="theme-color" content="#b480de" />
+
+          <meta key="apple-mobile-web-app-capable" name="apple-mobile-web-app-capable" content="yes" />
+          <meta key="apple-mobile-web-app-status-bar-style" name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+          <meta key="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content={this.props.brandName} />
+          <link key="apple-touch-icon" rel="apple-touch-icon" href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png" />
+          <link key="apple-touch-startup-image" rel="apple-touch-startup-image" href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png" />
+
+          <meta key="application-name" name="application-name" content={this.props.brandName} />
+          <meta key="msapplication-TileColor" name="msapplication-TileColor" content="#b480de" />
+          <meta key="msapplication-TileImage" name="msapplication-TileImage" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20150.png" />
+          {/* }<meta key="msapplication-config" name="msapplication-config" content="https://www.yourdomain.com/path/to/browserconfig.xml" />, */}
+
+          <link rel="canonical" href={window.location.href} />
           {isLowCoderDomain && [
             // Adding Support for iframely to be able to embedd the component explorer in the docu
-            <meta key="iframely:title" property="iframely:title" content="Lowcoder" />,
-            <meta key="iframely:description" property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />,
+            <meta key="iframely:title" property="iframely:title" content={this.props.brandName} />,
+            <meta key="iframely:description" property="iframely:description" content={trans("productDesc")} />,
+
             <link key="preconnect-googleapis" rel="preconnect" href="https://fonts.googleapis.com" />,
             <link key="preconnect-gstatic" rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />,
             <link key="font-ubuntu" href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet" />,
@@ -176,6 +209,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
                 SETTING,
                 MARKETPLACE_URL,
                 ADMIN_APP_URL,
+                API_DOCS_URL,
               ]}
               // component={ApplicationListPage}
               component={LazyApplicationHome}
@@ -189,7 +223,6 @@ class AppIndex extends React.Component<AppIndexProps, any> {
             <LazyRoute path={`${COMPONENT_DOC_URL}/:name`} component={LazyComponentDoc} />
             <LazyRoute path={`/playground/:name/:dsl`} component={LazyComponentPlayground} />
             <Redirect to={`${COMPONENT_DOC_URL}/input`} path="/components" />
-
             {developEnv() && (
               <>
                 <LazyRoute path="/debug_comp/:name" component={LazyDebugComp} />

client/packages/lowcoder/src/assets/images/marketplaceHeaderImage.jpg

@@ -131,17 +131,19 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       {status === "toSave" && !isEditing && <EditableChip />}
       {normalView}
       {/* overlay on normal view to handle double click for editing */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-        }}
-        onDoubleClick={enterEditFn}
-      >
-      </div>
+      {editable && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+          }}
+          onDoubleClick={enterEditFn}
+        >
+        </div>
+      )}
     </ColumnTypeView>
   );
 }