@oceanbase/ui 1.0.0-alpha.8 → 1.0.0-alpha.9

package/es/BasicLayout/style/index.js

@@ -46,7 +46,7 @@ export var genBasicLayoutStyle = function genBasicLayoutStyle(token) {
       '100%': {
         backgroundRepeat: 'no-repeat',
         backgroundSize: '100% 100%',
-        borderRadius: 8
+        borderRadius: token.borderRadiusLG
       }
     }
   }, "".concat(componentCls, "-banner-wrapper"), {

package/es/DateRanger/style/index.js

@@ -9,7 +9,6 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     colorBgContainer = token.colorBgContainer,
     colorBorder = token.colorBorder,
     borderRadius = token.borderRadius,
-    colorPrimaryBorderHover = token.colorPrimaryBorderHover,
     colorTextSecondary = token.colorTextSecondary,
     colorFillSecondary = token.colorFillSecondary,
     colorFill = token.colorFill;
@@ -37,12 +36,12 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
   }), "".concat(antCls, "-picker-input > input"), {
     cursor: 'pointer'
   })), '&:hover', {
-    borderColor: colorPrimaryBorderHover
+    borderColor: token.colorPrimaryHover
   })), "".concat(componentCls, "-wrapper-has-jumper"), {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   }), "".concat(componentCls, "-play"), {
-    padding: '4px 11px 4px'
+    padding: '3px 11px 3px'
   }), "".concat(componentCls, "-picker-input"), {
     maxWidth: 125
   }), "".concat(componentCls, "-date-picker"), _defineProperty(_defineProperty({}, "".concat(antCls, "-select-selector"), {
@@ -59,7 +58,7 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     gap: 4,
     backgroundColor: colorBgContainer,
     backgroundClip: 'padding-box',
-    borderRadius: 8,
+    borderRadius: token.borderRadiusMD,
     outline: 'none',
     boxShadow: '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)'
   }, "".concat(antCls, "-dropdown-menu"), {
@@ -85,24 +84,25 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     color: colorTextSecondary,
     transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
     '&:hover': {
-      borderColor: colorPrimaryBorderHover,
+      borderColor: token.colorPrimaryHover,
       '&::before': {
-        backgroundColor: colorPrimaryBorderHover
+        backgroundColor: token.colorPrimaryHover
       }
     }
   }))), "".concat(componentCls, "-label"), {
+    fontSize: token.fontSizeSM,
     backgroundColor: colorFillSecondary,
     color: colorTextSecondary,
     display: 'inline-block',
-    width: 60,
+    width: 52,
     padding: '4px 0',
-    borderRadius: 4,
+    borderRadius: token.borderRadiusSM,
     lineHeight: 1,
     textAlign: 'center'
   }), "".concat(componentCls, "-back-radio-focused"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-wrapper"), {
-    borderRightColor: colorPrimaryBorderHover
+    borderRightColor: token.colorPrimaryHover
   }), "".concat(componentCls, "-playback-control"), _defineProperty({}, "".concat(antCls, "-radio-button-wrapper:first-child"), _defineProperty({}, "+ ".concat(antCls, "-radio-button-wrapper::before"), {
-    backgroundColor: colorPrimaryBorderHover
+    backgroundColor: token.colorPrimaryHover
   })))), "".concat(componentCls, "-history-menu-item"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-menu-text-btn-wrapper"), {
     justifyContent: 'space-between',
     height: 0,

package/es/Dialog/style/index.js

@@ -21,7 +21,7 @@ export var genDialogStyle = function genDialogStyle(token) {
     boxSizing: 'content-box',
     color: '#eee',
     backgroundColor: 'rgba(65, 74, 77, 1)',
-    borderRadius: 8,
+    borderRadius: token.borderRadiusLG,
     boxShadow: boxShadowSecondary,
     transition: 'visibility 0.2s ease-in-out, opacity 0.2s linear'
   }, "".concat(componentCls, "-header"), _defineProperty(_defineProperty(_defineProperty({

package/es/PageContainer/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 = ["prefixCls", "className", "title", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
+var _excluded = ["prefixCls", "className", "title", "subTitle", "onBack", "backIcon", "breadcrumb", "extra", "header", "content", "extraContent", "tabList", "tabBarExtraContent", "footerToolBarProps", "locale", "loading"];
 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; }
@@ -54,7 +54,12 @@ var DocumentIcon = function DocumentIcon(_ref) {
 var PageContainer = function PageContainer(_ref2) {
   var customizePrefixCls = _ref2.prefixCls,
     className = _ref2.className,
-    title = _ref2.title,
+    titleProp = _ref2.title,
+    subTitleProp = _ref2.subTitle,
+    onBackProp = _ref2.onBack,
+    backIconProp = _ref2.backIcon,
+    breadcrumbProp = _ref2.breadcrumb,
+    extraProp = _ref2.extra,
     header = _ref2.header,
     content = _ref2.content,
     extraContent = _ref2.extraContent,
@@ -74,16 +79,24 @@ var PageContainer = function PageContainer(_ref2) {
     token = _theme$useToken.token;
   var _ref3 = header || {},
     reload = _ref3.reload,
-    subTitle = _ref3.subTitle,
-    document = _ref3.document,
-    breadcrumb = _ref3.breadcrumb,
+    _ref3$title = _ref3.title,
+    title = _ref3$title === void 0 ? titleProp : _ref3$title,
+    _ref3$subTitle = _ref3.subTitle,
+    subTitle = _ref3$subTitle === void 0 ? subTitleProp : _ref3$subTitle,
+    _ref3$onBack = _ref3.onBack,
+    onBack = _ref3$onBack === void 0 ? onBackProp : _ref3$onBack,
     _ref3$backIcon = _ref3.backIcon,
-    backIcon = _ref3$backIcon === void 0 ? /*#__PURE__*/_jsx(Button, {
+    backIcon = _ref3$backIcon === void 0 ? backIconProp || /*#__PURE__*/_jsx(Button, {
       style: {
         fontSize: token.fontSizeLG
       },
       icon: /*#__PURE__*/_jsx(ArrowLeftOutlined, {})
-    }) : _ref3$backIcon;
+    }) : _ref3$backIcon,
+    document = _ref3.document,
+    _ref3$breadcrumb = _ref3.breadcrumb,
+    breadcrumb = _ref3$breadcrumb === void 0 ? breadcrumbProp : _ref3$breadcrumb,
+    _ref3$extra = _ref3.extra,
+    extra = _ref3$extra === void 0 ? extraProp : _ref3$extra;
   var reloadProps = isObject(reload) && ! /*#__PURE__*/React.isValidElement(reload) ? reload : {};
   var reloadCls = classNames("".concat(rootPrefixCls, "-page-header-heading-reload"), reloadProps.className);
   var documentLink = typeof document === 'string' ? document : undefined;
@@ -113,8 +126,11 @@ var PageContainer = function PageContainer(_ref2) {
       }) : document]
     })]
   });
-  var newHeader = header && _objectSpread(_objectSpread({}, header), {}, {
+  var newHeader = (header || title || newSubTitle || onBack || breadcrumb || extra) && _objectSpread(_objectSpread({}, header), {}, {
+    title: title,
     subTitle: newSubTitle,
+    onBack: onBack,
+    backIcon: backIcon,
     breadcrumb: breadcrumb && _objectSpread({
       itemRender: function itemRender(route, params, routes, paths) {
         return /*#__PURE__*/_jsx(ItemRender, {
@@ -125,9 +141,9 @@ var PageContainer = function PageContainer(_ref2) {
         });
       }
     }, breadcrumb),
-    backIcon: backIcon
+    extra: extra
   });
-  var noHasHeader = !title && ['title', 'subTitle', 'extra', 'tags', 'avatar', 'backIcon', 'breadcrumb'].every(function (item) {
+  var noHasHeader = ['title', 'subTitle', 'onBack', 'breadcrumb', 'extra', 'tags', 'avatar'].every(function (item) {
     return !(newHeader !== null && newHeader !== void 0 && newHeader[item]);
   }) && !content && !extraContent && !tabList && !tabBarExtraContent;
   var pageContainerCls = classNames(_defineProperty({}, "".concat(prefixCls, "-no-page-header"), noHasHeader), className);

package/es/PageContainer/style/index.js

@@ -56,15 +56,23 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
     marginBlock: 0
   }), "".concat(antCls, "-page-header-heading-extra"), {
     marginBlock: 0
-  }), "".concat(antCls, "-page-header-footer"), {
+  }), "".concat(antCls, "-page-header-footer"), _defineProperty({
     marginBlockStart: 0
-  })), "".concat(componentCls, "-children-container"), _defineProperty({
+  }, "".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
+    left: -token.paddingXL,
+    right: -token.paddingXL
+  }))), "".concat(componentCls, "-children-container"), _defineProperty(_defineProperty({
     paddingInline: token.paddingXL,
     paddingBlockStart: 0,
     paddingBlockEnd: padding
   }, "& > ".concat(antCls, "-tabs-top:not(").concat(antCls, "-tabs-card):first-child"), {
     // equal to page header paddingBlockEnd
     marginTop: -padding
+  }), "& > ".concat(antCls, "-tabs-top > ").concat(antCls, "-tabs-nav::before"), {
+    borderBottom: "1px solid ".concat(token.colorBorderSecondary),
+    left: -token.paddingXL,
+    right: -token.paddingXL
   }))), "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
     paddingBlockStart: paddingLG
   })), "".concat(componentCls, "-with-footer "), {

package/es/Ranger/style/index.js

@@ -24,7 +24,7 @@ export var genRangerStyle = function genRangerStyle(token) {
     }
   }), "".concat(antCls, "-select-arrow"), {
     zIndex: 1
-  }))), "".concat(componentCls, "-show-range"), _defineProperty({}, "".concat(componentCls, "-quick-picker.").concat(componentCls, "-quick-picker-select"), _defineProperty(_defineProperty({
+  }))), "".concat(componentCls, "-show-range"), _defineProperty({}, "".concat(componentCls, "-quick-picker").concat(componentCls, "-quick-picker-select"), _defineProperty(_defineProperty({
     marginRight: -1
   }, "".concat(antCls, "-select-selector"), {
     borderTopRightRadius: '0 !important',

package/es/_util/genComponentStyleHook.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { AliasToken } from '@oceanbase/design/es/theme/interface';
 import type { ProAliasToken } from '@ant-design/pro-components';
-export interface OBToken extends ProAliasToken {
+export interface OBToken extends ProAliasToken, AliasToken {
     /** Wrap component class with `.` prefix */
     componentCls: string;
     /** Origin prefix which do not have `.` prefix */

package/lib/BasicLayout/style/index.js

@@ -69,7 +69,7 @@ var genBasicLayoutStyle = (token) => {
       "100%": {
         backgroundRepeat: "no-repeat",
         backgroundSize: "100% 100%",
-        borderRadius: 8
+        borderRadius: token.borderRadiusLG
       }
     },
     [`${componentCls}-banner-wrapper`]: {

package/lib/DateRanger/style/index.js

@@ -31,7 +31,6 @@ var genDateRangerStyle = (token) => {
     colorBgContainer,
     colorBorder,
     borderRadius,
-    colorPrimaryBorderHover,
     colorTextSecondary,
     colorFillSecondary,
     colorFill
@@ -64,7 +63,7 @@ var genDateRangerStyle = (token) => {
           }
         },
         "&:hover": {
-          borderColor: colorPrimaryBorderHover
+          borderColor: token.colorPrimaryHover
         }
       },
       [`${componentCls}-wrapper-has-jumper`]: {
@@ -72,7 +71,7 @@ var genDateRangerStyle = (token) => {
         borderBottomRightRadius: 0
       },
       [`${componentCls}-play`]: {
-        padding: "4px 11px 4px"
+        padding: "3px 11px 3px"
       },
       [`${componentCls}-picker-input`]: {
         maxWidth: 125
@@ -96,7 +95,7 @@ var genDateRangerStyle = (token) => {
       gap: 4,
       backgroundColor: colorBgContainer,
       backgroundClip: "padding-box",
-      borderRadius: 8,
+      borderRadius: token.borderRadiusMD,
       outline: "none",
       boxShadow: "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)",
       [`${antCls}-dropdown-menu`]: {
@@ -131,32 +130,33 @@ var genDateRangerStyle = (token) => {
           color: colorTextSecondary,
           transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
           "&:hover": {
-            borderColor: colorPrimaryBorderHover,
+            borderColor: token.colorPrimaryHover,
             "&::before": {
-              backgroundColor: colorPrimaryBorderHover
+              backgroundColor: token.colorPrimaryHover
             }
           }
         }
       }
     },
     [`${componentCls}-label`]: {
+      fontSize: token.fontSizeSM,
       backgroundColor: colorFillSecondary,
       color: colorTextSecondary,
       display: "inline-block",
-      width: 60,
+      width: 52,
       padding: "4px 0",
-      borderRadius: 4,
+      borderRadius: token.borderRadiusSM,
       lineHeight: 1,
       textAlign: "center"
     },
     [`${componentCls}-back-radio-focused`]: {
       [`${componentCls}-wrapper`]: {
-        borderRightColor: colorPrimaryBorderHover
+        borderRightColor: token.colorPrimaryHover
       },
       [`${componentCls}-playback-control`]: {
         [`${antCls}-radio-button-wrapper:first-child`]: {
           [`+ ${antCls}-radio-button-wrapper::before`]: {
-            backgroundColor: colorPrimaryBorderHover
+            backgroundColor: token.colorPrimaryHover
           }
         }
       }

package/lib/Dialog/style/index.js

@@ -43,7 +43,7 @@ var genDialogStyle = (token) => {
       boxSizing: "content-box",
       color: "#eee",
       backgroundColor: "rgba(65, 74, 77, 1)",
-      borderRadius: 8,
+      borderRadius: token.borderRadiusLG,
       boxShadow: boxShadowSecondary,
       transition: "visibility 0.2s ease-in-out, opacity 0.2s linear",
       [`${componentCls}-header`]: {

package/lib/PageContainer/index.js

@@ -72,8 +72,14 @@ var DocumentIcon = ({ className }) => {
 var PageContainer = ({
   prefixCls: customizePrefixCls,
   className,
-  /* compatible with title prop */
-  title,
+  /* compatible with title, title, subTitle, onBack, backIcon, extra prop */
+  title: titleProp,
+  subTitle: subTitleProp,
+  onBack: onBackProp,
+  backIcon: backIconProp,
+  breadcrumb: breadcrumbProp,
+  extra: extraProp,
+  // this is divider for above //
   header,
   content,
   extraContent,
@@ -91,10 +97,13 @@ var PageContainer = ({
   const { token } = import_design.theme.useToken();
   const {
     reload,
-    subTitle,
+    title = titleProp,
+    subTitle = subTitleProp,
+    onBack = onBackProp,
+    backIcon = backIconProp || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { style: { fontSize: token.fontSizeLG }, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, {}) }),
     document,
-    breadcrumb,
-    backIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_design.Button, { style: { fontSize: token.fontSizeLG }, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowLeftOutlined, {}) })
+    breadcrumb = breadcrumbProp,
+    extra = extraProp
   } = header || {};
   const reloadProps = (0, import_lodash.isObject)(reload) && !import_react.default.isValidElement(reload) ? reload : {};
   const reloadCls = (0, import_classnames.default)(
@@ -126,16 +135,19 @@ var PageContainer = ({
       ) }) : document
     ] })
   ] });
-  const newHeader = header && {
+  const newHeader = (header || title || newSubTitle || onBack || breadcrumb || extra) && {
     ...header,
+    title,
     subTitle: newSubTitle,
+    onBack,
+    backIcon,
     breadcrumb: breadcrumb && {
       itemRender: (route, params, routes, paths) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ItemRender.default, { route, params, routes, paths }),
       ...breadcrumb
     },
-    backIcon
+    extra
   };
-  const noHasHeader = !title && ["title", "subTitle", "extra", "tags", "avatar", "backIcon", "breadcrumb"].every(
+  const noHasHeader = ["title", "subTitle", "onBack", "breadcrumb", "extra", "tags", "avatar"].every(
     (item) => !(newHeader == null ? void 0 : newHeader[item])
   ) && !content && !extraContent && !tabList && !tabBarExtraContent;
   const pageContainerCls = (0, import_classnames.default)(

package/lib/PageContainer/style/index.js

@@ -89,7 +89,12 @@ var genPageContainerStyle = (token) => {
           marginBlock: 0
         },
         [`${antCls}-page-header-footer`]: {
-          marginBlockStart: 0
+          marginBlockStart: 0,
+          [`${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+            borderBottom: `1px solid ${token.colorBorderSecondary}`,
+            left: -token.paddingXL,
+            right: -token.paddingXL
+          }
         }
       },
       [`${componentCls}-children-container`]: {
@@ -100,6 +105,11 @@ var genPageContainerStyle = (token) => {
         [`& > ${antCls}-tabs-top:not(${antCls}-tabs-card):first-child`]: {
           // equal to page header paddingBlockEnd
           marginTop: -padding
+        },
+        [`& > ${antCls}-tabs-top > ${antCls}-tabs-nav::before`]: {
+          borderBottom: `1px solid ${token.colorBorderSecondary}`,
+          left: -token.paddingXL,
+          right: -token.paddingXL
         }
       }
     },

package/lib/Ranger/style/index.js

@@ -54,7 +54,7 @@ var genRangerStyle = (token) => {
       }
     },
     [`${componentCls}-show-range`]: {
-      [`${componentCls}-quick-picker.${componentCls}-quick-picker-select`]: {
+      [`${componentCls}-quick-picker${componentCls}-quick-picker-select`]: {
         marginRight: -1,
         [`${antCls}-select-selector`]: {
           borderTopRightRadius: "0 !important",

package/lib/_util/genComponentStyleHook.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { AliasToken } from '@oceanbase/design/es/theme/interface';
 import type { ProAliasToken } from '@ant-design/pro-components';
-export interface OBToken extends ProAliasToken {
+export interface OBToken extends ProAliasToken, AliasToken {
     /** Wrap component class with `.` prefix */
     componentCls: string;
     /** Origin prefix which do not have `.` prefix */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -38,7 +38,7 @@
     "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/pro-components": "^2.8.10",
     "@inline-svg-unique-id/react": "^1.2.3",
-    "@oceanbase/design": "^1.0.0-alpha.8",
+    "@oceanbase/design": "^1.0.0-alpha.9",
     "@oceanbase/icons": "^1.0.0-alpha.0",
     "@oceanbase/util": "^1.0.0-alpha.2",
     "ahooks": "^2.10.14",
@@ -67,5 +67,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "bf92d8043456556eac797dbd6197288c5695504d"
+  "gitHead": "b208f8aa2f982a955a827e14b58796e934cac016"
 }