Rlease v1.1.7

feat(table): table supports expansion control
feat: MariaDB
feat: query library datasource meta hint
feat:  mobile tabbar layout
feat: table edit add date, rate, progress, boolean
feat: table Support data tree
refactor(table): add originalIndex for sortNode() and filterNode()

Author: ggbond2077

client/VERSION

@@ -1 +1 @@
-1.1.6
+1.1.7

client/packages/openblocks-comps/package.json

@@ -7,6 +7,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
+    "mermaid": "^10.0.2",
     "openblocks-cli": "workspace:^",
     "openblocks-sdk": "workspace:^",
     "react": "17",

client/packages/openblocks-comps/src/comps/mermaidComp/index.tsx

@@ -0,0 +1,44 @@
+import {
+  UICompBuilder,
+  Section,
+  withExposingConfigs,
+  stringExposingStateControl,
+  NameConfig,
+  eventHandlerControl,
+  withMethodExposing,
+} from "openblocks-sdk";
+
+import Mermaid from "./mermaid";
+
+const childrenMap = {
+  code: stringExposingStateControl(
+    "code",
+    `graph LR
+   Start --> Stop`
+  ),
+  onEvent: eventHandlerControl([
+    {
+      label: "onChange",
+      value: "change",
+      description: "",
+    },
+  ]),
+};
+
+const CompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const code = props.code.value;
+  return <Mermaid code={code} />;
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">{children.code.propertyView({ label: "code" })}</Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
+
+const AppViewCompTemp = withMethodExposing(CompBase, []);
+
+export const MermaidComp = withExposingConfigs(AppViewCompTemp, [new NameConfig("code", "")]);

client/packages/openblocks-comps/src/comps/mermaidComp/mermaid.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import mermaid from "mermaid";
+
+function escape(str: string): string {
+  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
+  return str
+    .replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
+      return entries[t];
+    })
+    .trim();
+}
+
+export default ({ id = "graphDiv", code = "" }) => {
+  const [svg, setSvg] = useState("");
+
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: false });
+  }, []);
+
+  useEffect(() => {
+    if (!code) return;
+
+    mermaid.mermaidAPI.render(id, escape(code)).then((res) => {
+      setSvg(res.svg);
+    });
+  }, [code, setSvg]);
+
+  return <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>;
+};

client/packages/openblocks-design/src/components/CustomModal.tsx

@@ -35,7 +35,8 @@ const ModalHeaderWrapper = styled.div<{ $draggable?: boolean }>`
   cursor: ${(props) => (props.$draggable ? "move" : "auto")};
   display: flex;
   align-items: center;
-  padding: 16px;
+  line-height: 26px;
+  padding: 11px 16px;
 `;
 
 const ModalHeaderTitle = styled.div`
@@ -44,6 +45,7 @@ const ModalHeaderTitle = styled.div`
   color: #222222;
   flex-grow: 1;
   min-width: 0;
+  height: 16px;
   display: flex;
   align-items: center;
 
@@ -58,6 +60,7 @@ const ModalCloseIcon = styled.div`
   margin-left: 16px;
   width: 16px;
   height: 16px;
+  display: flex;
   cursor: pointer;
   color: ${GreyTextColor};
 
@@ -101,8 +104,8 @@ export const ModalFooterWrapper = styled.div`
     height: 28px;
     margin-top: 12px;
     margin-left: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 11px;
+    padding-right: 11px;
   }
 `;
 
@@ -268,6 +271,7 @@ CustomModal.confirm = (props: {
   bodyStyle?: React.CSSProperties;
   footer?: ReactNode;
   type?: "info" | "warn" | "error" | "success";
+  width?: number | string;
 }): any => {
   const defaultConfirmProps: ModalFuncProps = {
     ...DEFAULT_PROPS,
@@ -317,6 +321,7 @@ CustomModal.confirm = (props: {
         okText={props.okText}
         bodyStyle={{ ...defaultConfirmProps.bodyStyle, ...props.bodyStyle }}
         footer={props.footer}
+        width={props.width}
       />
     ),
   });

client/packages/openblocks-design/src/components/Menu.tsx

@@ -77,6 +77,10 @@ const StyledAntdMenu = styled(AntdMenu)`
   .ant-menu-item:focus-visible {
     box-shadow: unset;
   }
+
+  .ant-menu-item-disabled span {
+    color: #B8B9BF;
+  }
 `;
 
 const MenuItemContentWrapper = styled.div`