@oceanbase/design 0.4.2 → 0.4.3

package/es/_util/genStyle.js

@@ -27,7 +27,7 @@ export var genLargeStyle = function genLargeStyle(token) {
     controlHeightLG = token.controlHeightLG;
   var height = controlHeightLG;
   var lineHeight = "".concat(controlHeightLG, "px");
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(antCls, "-btn"), _objectSpread({
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(antCls, "-btn"), _objectSpread({
     // limit min width for icon button
     minWidth: controlHeightLG,
     height: height,
@@ -50,7 +50,10 @@ export var genLargeStyle = function genLargeStyle(token) {
     borderRadius: borderRadiusLG
   }), "".concat(antCls, "-select-selection-item"), {
     fontSize: fontSize
-  }))), "".concat(antCls, "-input-wrapper"), _defineProperty(_defineProperty({
+  }))), "".concat(antCls, "-select-multiple ").concat(antCls, "-select-selection-wrap"), {
+    // ref: https://github.com/oceanbase/oceanbase-design/pull/881
+    height: '100%'
+  }), "".concat(antCls, "-input-wrapper"), _defineProperty(_defineProperty({
     fontSize: fontSize
   }, "".concat(iconCls), {
     fontSize: fontSize

package/es/config-provider/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "theme", "locale", "navigate", "hideOnSinglePage", "form", "spin", "table", "tabs", "injectStaticFunction", "styleProviderProps", "appProps"];
+var _excluded = ["children", "theme", "locale", "navigate", "hideOnSinglePage", "collapse", "form", "spin", "table", "tabs", "injectStaticFunction", "styleProviderProps", "appProps"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,12 +11,13 @@ import React from 'react';
 import { App, ConfigProvider as AntConfigProvider } from 'antd';
 import { StyleProvider } from '@ant-design/cssinjs';
 import StyleContext from '@ant-design/cssinjs/es/StyleContext';
+import { CaretRightOutlined } from '@oceanbase/icons';
+import aliyunTheme from '@oceanbase/aliyun-theme';
 import { merge } from 'lodash';
 import StaticFunction from "../static-function";
 import themeConfig from "../theme";
 import defaultTheme, { fontFamilyEn } from "../theme/default";
 import darkTheme from "../theme/dark";
-import aliyunTheme from '@oceanbase/aliyun-theme';
 import DefaultRenderEmpty from "./DefaultRenderEmpty";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ var ConfigProvider = function ConfigProvider(_ref) {
     locale = _ref.locale,
     navigate = _ref.navigate,
     hideOnSinglePage = _ref.hideOnSinglePage,
+    collapse = _ref.collapse,
     form = _ref.form,
     spin = _ref.spin,
     table = _ref.table,
@@ -63,6 +65,14 @@ var ConfigProvider = function ConfigProvider(_ref) {
   var mergedLocale = merge({}, parentContext.locale, locale);
   return /*#__PURE__*/_jsx(AntConfigProvider, _objectSpread(_objectSpread({
     locale: mergedLocale,
+    collapse: merge({}, {
+      expandIcon: function expandIcon(_ref2) {
+        var isActive = _ref2.isActive;
+        return /*#__PURE__*/_jsx(CaretRightOutlined, {
+          rotate: isActive ? 90 : 0
+        });
+      }
+    }, parentContext.collapse, collapse),
     form: merge({}, {
       requiredMark: 'optional'
     }, parentContext.form, form),

package/es/descriptions/hooks/useItems.d.ts

@@ -10,11 +10,11 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
         sm?: number;
         xs?: number;
     };
-    className?: string;
+    label?: React.ReactNode;
     style?: React.CSSProperties;
-    prefixCls?: string;
     key?: React.Key;
-    label?: React.ReactNode;
+    className?: string;
+    prefixCls?: string;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/es/table/style/index.js

@@ -4,6 +4,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genTableStyle = function genTableStyle(token) {
+  var _ref;
   var antCls = token.antCls,
     componentCls = token.componentCls,
     colorText = token.colorText,
@@ -17,12 +18,13 @@ export var genTableStyle = function genTableStyle(token) {
     padding = token.padding,
     marginLG = token.marginLG,
     marginXS = token.marginXS;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-wrapper ").concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "".concat(componentCls, "-wrapper ").concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     color: colorText,
     backgroundColor: colorBgBase,
     borderRadius: borderRadiusLG
   }, "".concat(componentCls, "-footer"), {
-    borderBottom: "1px solid ".concat(colorBorderSecondary)
+    borderBottom: "1px solid ".concat(colorBorderSecondary),
+    borderRadius: 0
   }), "".concat(componentCls, "-thead, ").concat(componentCls, "-tbody"), _defineProperty({}, 'td, th', _defineProperty(_defineProperty({}, "&".concat(componentCls, "-row-expand-icon-cell"), {
     backgroundColor: colorBgBase,
     padding: "".concat(token.paddingSM, "px ").concat(token.paddingXS, "px")
@@ -70,14 +72,24 @@ export var genTableStyle = function genTableStyle(token) {
     borderRadius: 0
   }), "".concat(componentCls, "-empty-wrapper"), {
     minHeight: 'auto'
-  })))), "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-expandable):not(").concat(componentCls, "-has-footer) ").concat(componentCls, ":not(").concat(componentCls, "-bordered):not(").concat(componentCls, "-empty)"), {
-    borderBottom: "1px solid ".concat(colorBorderSecondary),
-    borderRadius: 0
-  }), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-scroll-horizontal, ").concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-fixed-header"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:nth-child(2n + 1):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(antCls, "-descriptions-row) > td"), {
+  })))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-scroll-horizontal, ").concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-fixed-header"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:nth-child(2n + 1):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(antCls, "-descriptions-row) > td"), {
     backgroundColor: colorFillQuaternary
   }), "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row):not(").concat(antCls, "-descriptions-row) > td"), {
     backgroundColor: colorBgBase
-  }))), "".concat(componentCls, "-wrapper").concat(componentCls, "-expandable"), _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row)"), _defineProperty(_defineProperty({}, '& > td', {
+  }))), "".concat(componentCls, "-wrapper ").concat(componentCls).concat(componentCls, "-bordered"), _defineProperty({}, "".concat(componentCls, "-footer"), {
+    borderRadius: "0px 0px ".concat(token.borderRadiusLG, "px ").concat(token.borderRadiusLG, "px")
+  })), "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-has-footer) ").concat(componentCls).concat(componentCls, "-bordered"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-container"), {
+    borderRadius: token.borderRadiusLG
+  }), "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:last-child >*:first-child", {
+    borderEndStartRadius: token.borderRadiusLG
+  }), "tr:last-child >*:last-child", {
+    borderEndEndRadius: token.borderRadiusLG
+  }))), "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-expandable):not(").concat(componentCls, "-has-footer) ").concat(componentCls, ":not(").concat(componentCls, "-bordered):not(").concat(componentCls, "-empty)"), {
+    borderBottom: "1px solid ".concat(colorBorderSecondary),
+    borderRadius: 0
+  }), "".concat(componentCls, "-wrapper:not(").concat(componentCls, "-expandable)"), _defineProperty({}, "".concat(componentCls, ":not(").concat(componentCls, "-bordered)"), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty({}, "tr:not(".concat(componentCls, "-measure-row) > td"), {
+    border: 'none'
+  })))), "".concat(componentCls, "-wrapper").concat(componentCls, "-expandable"), _defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty({}, "".concat(componentCls, "-tbody"), _defineProperty(_defineProperty({}, "tr:nth-child(2n):not(".concat(componentCls, "-placeholder):not(").concat(componentCls, "-row-selected):not(").concat(componentCls, "-expanded-row)"), _defineProperty(_defineProperty({}, '& > td', {
     backgroundColor: colorBgBase
   }), '&:hover', {
     td: {
@@ -110,9 +122,11 @@ export var genTableStyle = function genTableStyle(token) {
   }, "".concat(componentCls, "-batch-operation-selection-count"), {
     margin: "0 ".concat(marginXS, "px"),
     color: colorLink
-  }))))), "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
+  }))))), _defineProperty(_defineProperty(_ref, "".concat(antCls, "-popover").concat(componentCls, "-batch-operation-selection-popover"), _defineProperty({}, "".concat(antCls, "-popover-inner"), {
     padding: 0
-  }));
+  })), "".concat(antCls, "-popover, ").concat(antCls, "-tooltip"), _defineProperty({}, "".concat(componentCls, " ").concat(componentCls, "-tbody"), _defineProperty({}, "".concat(componentCls, "-empty-wrapper"), {
+    minHeight: 'auto'
+  })));
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('Table', function (token) {

package/es/theme/default.js

@@ -96,6 +96,9 @@ var defaultTheme = {
       fontHeight: 20,
       lastItemColor: '#5c6b8a'
     },
+    Collapse: {
+      colorBorder: '#E2E8F3'
+    },
     InputNumber: {
       handleVisible: true
     },

package/lib/_util/genStyle.js

@@ -91,6 +91,10 @@ var genLargeStyle = (token) => {
         fontSize
       }
     },
+    [`${antCls}-select-multiple ${antCls}-select-selection-wrap`]: {
+      // ref: https://github.com/oceanbase/oceanbase-design/pull/881
+      height: "100%"
+    },
     // Input
     [`${antCls}-input-wrapper`]: {
       fontSize,

package/lib/config-provider/index.js

@@ -37,12 +37,13 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_StyleContext = __toESM(require("@ant-design/cssinjs/es/StyleContext"));
+var import_icons = require("@oceanbase/icons");
+var import_aliyun_theme = __toESM(require("@oceanbase/aliyun-theme"));
 var import_lodash = require("lodash");
 var import_static_function = __toESM(require("../static-function"));
 var import_theme = __toESM(require("../theme"));
 var import_default = __toESM(require("../theme/default"));
 var import_dark = __toESM(require("../theme/dark"));
-var import_aliyun_theme = __toESM(require("@oceanbase/aliyun-theme"));
 var import_DefaultRenderEmpty = __toESM(require("./DefaultRenderEmpty"));
 __reExport(config_provider_exports, require("./navigate"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/context"), module.exports);
@@ -59,6 +60,7 @@ var ConfigProvider = ({
   locale,
   navigate,
   hideOnSinglePage,
+  collapse,
   form,
   spin,
   table,
@@ -89,6 +91,14 @@ var ConfigProvider = ({
     import_antd.ConfigProvider,
     {
       locale: mergedLocale,
+      collapse: (0, import_lodash.merge)(
+        {},
+        {
+          expandIcon: ({ isActive }) => /* @__PURE__ */ import_react.default.createElement(import_icons.CaretRightOutlined, { rotate: isActive ? 90 : 0 })
+        },
+        parentContext.collapse,
+        collapse
+      ),
       form: (0, import_lodash.merge)(
         {},
         {

package/lib/descriptions/hooks/useItems.d.ts

@@ -10,11 +10,11 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
         sm?: number;
         xs?: number;
     };
-    className?: string;
+    label?: React.ReactNode;
     style?: React.CSSProperties;
-    prefixCls?: string;
     key?: React.Key;
-    label?: React.ReactNode;
+    className?: string;
+    prefixCls?: string;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/lib/table/style/index.js

@@ -47,7 +47,8 @@ var genTableStyle = (token) => {
       backgroundColor: colorBgBase,
       borderRadius: borderRadiusLG,
       [`${componentCls}-footer`]: {
-        borderBottom: `1px solid ${colorBorderSecondary}`
+        borderBottom: `1px solid ${colorBorderSecondary}`,
+        borderRadius: 0
       },
       // 单元格通用样式
       [`${componentCls}-thead, ${componentCls}-tbody`]: {
@@ -140,11 +141,6 @@ var genTableStyle = (token) => {
         }
       }
     },
-    // 非可展开表格、带 footer 表格、空表格、带边框表格: 底部添加分隔线
-    [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]: {
-      borderBottom: `1px solid ${colorBorderSecondary}`,
-      borderRadius: 0
-    },
     // 滚动表格样式
     // 由于滚动表格会在 tbody 下最前面多一个 tr 元素，因此需要设置相反的斑马条样式
     // .ant-table-scroll-horizontal: 水平滚动
@@ -160,6 +156,43 @@ var genTableStyle = (token) => {
         }
       }
     },
+    // 带边框的表格样式
+    [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
+      [`${componentCls}-footer`]: {
+        borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
+      }
+    },
+    // 带边框但不带 footer 的表格样式
+    [`${componentCls}-wrapper:not(${componentCls}-has-footer) ${componentCls}${componentCls}-bordered`]: {
+      // 表格容器设置圆角
+      [`${componentCls}-container`]: {
+        borderRadius: token.borderRadiusLG
+      },
+      [`${componentCls}-tbody`]: {
+        // 最后一行左右单元格增加圆角
+        [`tr:last-child >*:first-child`]: {
+          borderEndStartRadius: token.borderRadiusLG
+        },
+        [`tr:last-child >*:last-child`]: {
+          borderEndEndRadius: token.borderRadiusLG
+        }
+      }
+    },
+    // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线
+    [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]: {
+      borderBottom: `1px solid ${colorBorderSecondary}`,
+      borderRadius: 0
+    },
+    // 去掉非展开表格的边框
+    [`${componentCls}-wrapper:not(${componentCls}-expandable)`]: {
+      [`${componentCls}:not(${componentCls}-bordered)`]: {
+        [`${componentCls}-tbody`]: {
+          [`tr:not(${componentCls}-measure-row) > td`]: {
+            border: "none"
+          }
+        }
+      }
+    },
     // 可展开表格样式
     [`${componentCls}-wrapper${componentCls}-expandable`]: {
       [`${componentCls}`]: {
@@ -253,6 +286,14 @@ var genTableStyle = (token) => {
       [`${antCls}-popover-inner`]: {
         padding: 0
       }
+    },
+    // Popover、Tooltip 等弹出层中的表格空状态高度设为自动，避免高度过大撑高弹出层
+    [`${antCls}-popover, ${antCls}-tooltip`]: {
+      [`${componentCls} ${componentCls}-tbody`]: {
+        [`${componentCls}-empty-wrapper`]: {
+          minHeight: "auto"
+        }
+      }
     }
   };
 };

package/lib/theme/default.js

@@ -112,6 +112,9 @@ var defaultTheme = {
       fontHeight: 20,
       lastItemColor: "#5c6b8a"
     },
+    Collapse: {
+      colorBorder: "#E2E8F3"
+    },
     InputNumber: {
       handleVisible: true
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -30,14 +30,19 @@
     "README.md",
     "LICENSE"
   ],
+  "sideEffects": [
+    "**/*.less",
+    "**/*.css",
+    "es/index.js"
+  ],
   "scripts": {
     "build": "father build && cp src/style/reset.css dist/"
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.22.0",
     "@oceanbase/aliyun-theme": "^0.1.6",
-    "@oceanbase/icons": "^0.4.1",
-    "@oceanbase/util": "^0.4.1",
+    "@oceanbase/icons": "^0.4.2",
+    "@oceanbase/util": "^0.4.2",
     "ahooks": "^2.10.14",
     "antd": "^5.22.1",
     "classnames": "^2.5.1",
@@ -60,5 +65,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "67c1567aad182c4b3b7ecb421928fa3c87f321e0"
+  "gitHead": "c2d5b32ba8c8a2ec90de8477cfa0bb808b616cb7"
 }