@oceanbase/design 0.4.0 → 0.4.2

package/lib/theme/style/dark.less

@@ -312,6 +312,9 @@
 @colorFillSecondary: rgba(255, 255, 255, 0.12);
 @colorFillTertiary: rgba(255, 255, 255, 0.08);
 @colorFillQuaternary: rgba(255, 255, 255, 0.04);
+@colorBgSolid: rgba(255, 255, 255, 0.95);
+@colorBgSolidHover: rgb(255, 255, 255);
+@colorBgSolidActive: rgba(255, 255, 255, 0.9);
 @colorBgLayout: #000000;
 @colorBgContainer: #141414;
 @colorBgElevated: #1f1f1f;
@@ -339,6 +342,7 @@
 @colorSuccessTextActive: #0e845d;
 @colorErrorBg: #2b1416;
 @colorErrorBgHover: #44191a;
+@colorErrorBgFilledHover: #421a1b;
 @colorErrorBgActive: #591f1f;
 @colorErrorBorder: #591f1f;
 @colorErrorBorderHover: #7b2525;
@@ -428,7 +432,7 @@
 @colorErrorOutline: rgba(250, 20, 40, 0.1);
 @colorWarningOutline: rgba(180, 93, 0, 0.15);
 @fontSizeIcon: 12;
-@lineWidthFocus: 4;
+@lineWidthFocus: 3;
 @controlOutlineWidth: 2;
 @controlInteractiveSize: 16;
 @controlItemBgHover: rgba(255, 255, 255, 0.08);

package/lib/theme/style/default.less

@@ -312,6 +312,9 @@
 @colorFillSecondary: #e2e8f3;
 @colorFillTertiary: #f3f6fc;
 @colorFillQuaternary: #f8fafe;
+@colorBgSolid: rgb(0, 0, 0);
+@colorBgSolidHover: rgba(0, 0, 0, 0.75);
+@colorBgSolidActive: rgba(0, 0, 0, 0.95);
 @colorBgLayout: #f3f6fc;
 @colorBgContainer: #ffffff;
 @colorBgElevated: #ffffff;
@@ -339,6 +342,7 @@
 @colorSuccessTextActive: #00b378;
 @colorErrorBg: #ffebeb;
 @colorErrorBgHover: #ffd6d6;
+@colorErrorBgFilledHover: #ffd7d3;
 @colorErrorBgActive: #ffbcb5;
 @colorErrorBorder: #ffb3b3;
 @colorErrorBorderHover: #ff7575;
@@ -372,22 +376,22 @@
 @fontSizeSM: 12;
 @fontSizeLG: 16;
 @fontSizeXL: 20;
-@fontSizeHeading1: 32;
-@fontSizeHeading2: 24;
-@fontSizeHeading3: 20;
-@fontSizeHeading4: 16;
-@fontSizeHeading5: 14;
+@fontSizeHeading1: 38;
+@fontSizeHeading2: 30;
+@fontSizeHeading3: 24;
+@fontSizeHeading4: 20;
+@fontSizeHeading5: 16;
 @lineHeight: 1.5714285714285714;
 @lineHeightLG: 1.5;
 @lineHeightSM: 1.6666666666666667;
 @fontHeight: 22;
 @fontHeightLG: 24;
 @fontHeightSM: 20;
-@lineHeightHeading1: 1.25;
-@lineHeightHeading2: 1.3333333333333333;
-@lineHeightHeading3: 1.4;
-@lineHeightHeading4: 1.5;
-@lineHeightHeading5: 1.5714285714285714;
+@lineHeightHeading1: 1.2105263157894737;
+@lineHeightHeading2: 1.2666666666666666;
+@lineHeightHeading3: 1.3333333333333333;
+@lineHeightHeading4: 1.4;
+@lineHeightHeading5: 1.5;
 @sizeXXL: 48;
 @sizeXL: 32;
 @sizeLG: 24;
@@ -410,6 +414,7 @@
 @borderRadiusOuter: 4;
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@lineWidthFocus: 3;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f8fafe;
@@ -430,7 +435,6 @@
 @colorErrorOutline: rgba(255, 5, 5, 0.08);
 @colorWarningOutline: rgba(255, 164, 19, 0.11);
 @fontSizeIcon: 12;
-@lineWidthFocus: 4;
 @controlOutlineWidth: 2;
 @controlInteractiveSize: 16;
 @controlItemBgHover: #f3f6fc;

package/lib/tooltip/MouseTooltip.js

@@ -49,6 +49,7 @@ var MouseTooltip = ({
   mouseLeaveDelay = 0.1,
   ...restProps
 }) => {
+  var _a, _b;
   const { token } = import_theme.default.useToken();
   const [visible, setVisible] = (0, import_react.useState)(false);
   const { color: textColor, ...restOverlayInnerStyle } = overlayInnerStyle || {};
@@ -95,10 +96,10 @@ var MouseTooltip = ({
         boxShadow: token.boxShadowSecondary,
         borderRadius: token.borderRadius,
         // @ts-ignore
-        color: textColor || token.Tooltip.colorTextLightSolid || token.colorTextLightSolid,
+        color: textColor || ((_a = token.Tooltip) == null ? void 0 : _a.colorTextLightSolid) || token.colorTextLightSolid,
         backgroundColor: (
           // @ts-ignore
-          backgroundColor || token.Tooltip.colorBgSpotlight || token.colorBgSpotlight
+          backgroundColor || ((_b = token.Tooltip) == null ? void 0 : _b.colorBgSpotlight) || token.colorBgSpotlight
         ),
         left: isOverWidth ? clientX - tooltipWidth - offset : clientX + offset,
         top: isOverHeight ? clientY - tooltipHeight - offset : clientY + offset,

package/lib/tooltip/index.js

@@ -66,7 +66,8 @@ var Tooltip = import_react.default.forwardRef(
     const { prefixCls: customizePrefixCls } = restProps;
     const prefixCls = getPrefixCls("tooltip", customizePrefixCls);
     const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
-    const tooltipCls = (0, import_classnames.default)(className, hashId);
+    const tooltipCls = (0, import_classnames.default)(className);
+    const mouseTooltipCls = (0, import_classnames.default)(prefixCls, className, hashId);
     const [innerOpen, setInnerOpen] = (0, import_react.useState)(open ?? visible ?? defaultOpen ?? defaultVisible);
     const noTitle = !title && !overlay && title !== 0;
     const newOpen = open ?? visible ?? (noTitle ? false : innerOpen);
@@ -93,7 +94,7 @@ var Tooltip = import_react.default.forwardRef(
             color: typeItem == null ? void 0 : typeItem.color,
             ...overlayInnerStyle
           },
-          className: tooltipCls,
+          className: mouseTooltipCls,
           overlay,
           ...restProps
         },

package/lib/tooltip/style/index.js

@@ -28,13 +28,22 @@ var genTooltipStyle = (token) => {
   const { componentCls } = token;
   return {
     [componentCls]: {
+      maxWidth: 300,
+      [`${componentCls}-inner`]: {
+        maxHeight: 250,
+        overflow: "auto"
+      },
       [`${componentCls}-close-icon-wrap`]: {
         display: "flex",
         justifyContent: "space-between",
         alignItems: "flex-start",
         wordBreak: "break-all",
         [`${componentCls}-close-icon`]: {
-          cursor: "pointer"
+          cursor: "pointer",
+          color: token.colorIcon,
+          "&:hover": {
+            color: token.colorIconHover
+          }
         }
       }
     }

package/lib/typography/Link.js

@@ -36,16 +36,28 @@ module.exports = __toCommonJS(Link_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Link_exports, require("antd/es/typography/Link"), module.exports);
 var { Link: AntLink } = import_antd.Typography;
 var Link = import_react.default.forwardRef(
-  ({ prefixCls: customizePrefixCls, children, ...restProps }, ref) => {
+  ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(AntLink, { ref, prefixCls: customizePrefixCls, ...restProps }, children)
+      /* @__PURE__ */ import_react.default.createElement(
+        AntLink,
+        {
+          ref,
+          editable,
+          prefixCls: customizePrefixCls,
+          className: typographyCls,
+          ...restProps
+        },
+        children
+      )
     );
   }
 );

package/lib/typography/Paragraph.js

@@ -36,16 +36,28 @@ module.exports = __toCommonJS(Paragraph_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Paragraph_exports, require("antd/es/typography/Paragraph"), module.exports);
 var { Paragraph: AntParagraph } = import_antd.Typography;
 var Paragraph = import_react.default.forwardRef(
-  ({ prefixCls: customizePrefixCls, children, ...restProps }, ref) => {
+  ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(AntParagraph, { ref, prefixCls: customizePrefixCls, ...restProps }, children)
+      /* @__PURE__ */ import_react.default.createElement(
+        AntParagraph,
+        {
+          ref,
+          editable,
+          prefixCls: customizePrefixCls,
+          className: typographyCls,
+          ...restProps
+        },
+        children
+      )
     );
   }
 );

package/lib/typography/Text.js

@@ -36,16 +36,28 @@ module.exports = __toCommonJS(Text_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Text_exports, require("antd/es/typography/Text"), module.exports);
 var { Text: AntText } = import_antd.Typography;
 var Text = import_react.default.forwardRef(
-  ({ prefixCls: customizePrefixCls, children, ...restProps }, ref) => {
+  ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(AntText, { ref, prefixCls: customizePrefixCls, ...restProps }, children)
+      /* @__PURE__ */ import_react.default.createElement(
+        AntText,
+        {
+          ref,
+          editable,
+          prefixCls: customizePrefixCls,
+          className: typographyCls,
+          ...restProps
+        },
+        children
+      )
     );
   }
 );

package/lib/typography/Title.js

@@ -36,16 +36,28 @@ module.exports = __toCommonJS(Title_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_useClassName = __toESM(require("./hooks/useClassName"));
 var import_style = __toESM(require("./style"));
 __reExport(Title_exports, require("antd/es/typography/Title"), module.exports);
 var { Title: AntTitle } = import_antd.Typography;
 var Title = import_react.default.forwardRef(
-  ({ prefixCls: customizePrefixCls, children, ...restProps }, ref) => {
+  ({ editable, prefixCls: customizePrefixCls, className, children, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("typography", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const typographyCls = (0, import_useClassName.default)(prefixCls, className, editable);
     return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(AntTitle, { ref, prefixCls: customizePrefixCls, ...restProps }, children)
+      /* @__PURE__ */ import_react.default.createElement(
+        AntTitle,
+        {
+          ref,
+          editable,
+          prefixCls: customizePrefixCls,
+          className: typographyCls,
+          ...restProps
+        },
+        children
+      )
     );
   }
 );

package/lib/typography/hooks/useClassName.d.ts

@@ -0,0 +1,3 @@
+import type { BlockProps } from 'antd/es/typography/Base';
+declare const useClassName: (prefixCls: string, className: string, editable?: BlockProps['editable']) => string;
+export default useClassName;

package/lib/typography/hooks/useClassName.js

@@ -0,0 +1,46 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/typography/hooks/useClassName.ts
+var useClassName_exports = {};
+__export(useClassName_exports, {
+  default: () => useClassName_default
+});
+module.exports = __toCommonJS(useClassName_exports);
+var import_classnames = __toESM(require("classnames"));
+var useClassName = (prefixCls, className, editable) => {
+  var _a;
+  const typographyCls = (0, import_classnames.default)(
+    {
+      [`${prefixCls}-editable-text`]: typeof editable === "object" && ((_a = editable == null ? void 0 : editable.triggerType) == null ? void 0 : _a.includes("text"))
+    },
+    className
+  );
+  return typographyCls;
+};
+var useClassName_default = useClassName;

package/lib/typography/style/index.js

@@ -25,7 +25,8 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTypographyStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, controlHeight, fontSize, lineHeight } = token;
+  const marginOffset = (controlHeight - fontSize * lineHeight) / 2;
   return {
     // inherit color and lineHeight from parent instead of fixed colorText
     [`span${componentCls}`]: {
@@ -37,6 +38,53 @@ var genTypographyStyle = (token) => {
       lineHeight: "inherit",
       color: "inherit",
       fontSize: "inherit"
+    },
+    [`${componentCls}`]: {
+      [`${componentCls}-edit`]: {
+        fontSize: token.fontSize
+      }
+    },
+    [`${componentCls}${componentCls}-editable-text:not(${componentCls}-edit-content)`]: {
+      "&:hover": {
+        background: token.colorBgContainer,
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+        borderRadius: token.borderRadius,
+        position: "relative",
+        insetInlineStart: -token.paddingSM,
+        padding: `${marginOffset - token.lineWidth}px ${token.paddingSM - token.lineWidth}px`
+      },
+      "div&:hover": {
+        height: token.controlHeight,
+        marginTop: -marginOffset,
+        marginBottom: `calc(1em - ${marginOffset}px)`
+      },
+      "span&:hover": {
+        display: "inline-block",
+        height: token.controlHeight,
+        marginTop: -marginOffset,
+        marginBottom: -marginOffset
+      },
+      "h1&:hover, h2&:hover, h3&:hover, h4&:hover, h5&:hover": {
+        marginTop: `${-marginOffset}px !important`,
+        marginBottom: `${-marginOffset}px !important`
+      }
+    },
+    [`${componentCls}${componentCls}-edit-content`]: {
+      [`${componentCls}-div&`]: {
+        insetInlineStart: -token.paddingSM,
+        marginTop: -marginOffset,
+        marginBottom: `calc(1em - ${marginOffset}px)`
+      },
+      [`${componentCls}-span&`]: {
+        insetInlineStart: -token.paddingSM,
+        marginTop: -marginOffset,
+        marginBottom: -marginOffset
+      },
+      [`${componentCls}-h1&, ${componentCls}-h2&, ${componentCls}-h3&, ${componentCls}-h4&, ${componentCls}-h5&`]: {
+        insetInlineStart: -token.paddingSM,
+        marginTop: `${-marginOffset}px !important`,
+        marginBottom: `${-marginOffset}px !important`
+      }
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -31,16 +31,15 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "father build",
-    "postbuild": "cp src/style/reset.css dist/"
+    "build": "father build && cp src/style/reset.css dist/"
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.21.1",
+    "@ant-design/cssinjs": "^1.22.0",
     "@oceanbase/aliyun-theme": "^0.1.6",
-    "@oceanbase/icons": "^0.4.0",
-    "@oceanbase/util": "^0.4.0",
+    "@oceanbase/icons": "^0.4.1",
+    "@oceanbase/util": "^0.4.1",
     "ahooks": "^2.10.14",
-    "antd": "^5.20.6",
+    "antd": "^5.22.1",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -49,16 +48,17 @@
     "react-sticky-mouse-tooltip": "^0.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/cli": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
     "antd-token-previewer": "^2.0.8",
-    "rc-select": "^14.15.1",
-    "rc-table": "^7.47.1",
-    "rc-tree-select": "^5.22.1"
+    "rc-select": "^14.16.3",
+    "rc-slider": "^11.1.7",
+    "rc-table": "^7.48.1",
+    "rc-tree-select": "^5.24.4"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "6b8b9e3df994419ff6a6c79cc607c0b4692e4189"
+  "gitHead": "67c1567aad182c4b3b7ecb421928fa3c87f321e0"
 }

package/es/reset.css

@@ -1,10 +0,0 @@
-/* 引入 antd/dist/reset.css，以重置基本样式，保证原生元素遵从 antd 规范样式 */
-/* ref: https://ant.design/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4 */
-@import '~antd/dist/reset.css';
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}

package/lib/reset.css

@@ -1,10 +0,0 @@
-/* 引入 antd/dist/reset.css，以重置基本样式，保证原生元素遵从 antd 规范样式 */
-/* ref: https://ant.design/docs/react/migration-v5-cn#%E6%8A%80%E6%9C%AF%E8%B0%83%E6%95%B4 */
-@import '~antd/dist/reset.css';
-
-pre,
-code,
-kbd,
-samp {
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-}