@oceanbase/design 0.4.16 → 1.0.0-alpha.0

package/lib/result/style/index.js

@@ -24,7 +24,6 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var import_genStyle = require("../../_util/genStyle");
 var genResultStyle = (token) => {
   const { componentCls } = token;
   return {
@@ -38,9 +37,6 @@ var genResultStyle = (token) => {
         maxWidth: 600,
         margin: "0px auto"
       },
-      [`${componentCls}-extra`]: {
-        ...(0, import_genStyle.genLargeStyle)(token)
-      },
       [`${componentCls}-content`]: {
         maxWidth: 1e3,
         margin: "0px auto",

package/lib/table/style/index.js

@@ -72,21 +72,6 @@ var genTableStyle = (token) => {
       },
       // body 样式
       [`${componentCls}-tbody`]: {
-        // 斑马纹样式
-        [`tr:nth-child(2n + 1):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${antCls}-descriptions-row) > td`]: {
-          backgroundColor: colorBgBase
-        },
-        [`tr:nth-child(2n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row):not(${antCls}-descriptions-row) > td`]: {
-          backgroundColor: colorFillQuaternary
-        },
-        // hover 行样式
-        [`tr:not(${componentCls}-placeholder):not(${componentCls}-expanded-row):not(${antCls}-descriptions-row):hover > td`]: {
-          backgroundColor: `${colorPrimaryBg} !important`
-        },
-        // 选中行样式
-        [`tr${componentCls}-row-selected > td`]: {
-          backgroundColor: `${colorPrimaryBg} !important`
-        },
         [`${componentCls}-tbody-virtual-scrollbar ${componentCls}-tbody-virtual-scrollbar-thumb`]: {
           background: `${token.colorFillSecondary} !important`
         },
@@ -152,28 +137,8 @@ var genTableStyle = (token) => {
         }
       }
     },
-    // 滚动表格样式
-    // 由于滚动表格会在 tbody 下最前面多一个 tr 元素，因此需要设置相反的斑马条样式
-    // .ant-table-scroll-horizontal: 水平滚动
-    // .ant-table-fixed-header: 垂直滚动
-    [`${componentCls}-wrapper ${componentCls}${componentCls}-scroll-horizontal, ${componentCls}-wrapper ${componentCls}${componentCls}-fixed-header`]: {
-      [`${componentCls}-tbody`]: {
-        // 斑马纹样式
-        [`tr:nth-child(2n + 1):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${antCls}-descriptions-row) > td`]: {
-          backgroundColor: colorFillQuaternary
-        },
-        [`tr:nth-child(2n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row):not(${antCls}-descriptions-row) > td`]: {
-          backgroundColor: colorBgBase
-        }
-      }
-    },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
-      [`${componentCls}-thead > tr`]: {
-        ["th"]: {
-          backgroundColor: colorFillQuaternary
-        }
-      },
       [`${componentCls}-footer`]: {
         borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
       }
@@ -227,37 +192,15 @@ var genTableStyle = (token) => {
     //       },
     //     },
     //   },
-    // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线，并去掉底部圆角
+    // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 去掉底部圆角
     [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]: {
-      borderBottom: `1px solid ${colorBorderSecondary}`,
       borderBottomLeftRadius: 0,
       borderBottomRightRadius: 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}`]: {
         [`${componentCls}-tbody`]: {
-          // 去掉斑马纹
-          [`tr:nth-child(n):not(${componentCls}-placeholder):not(${componentCls}-row-selected):not(${componentCls}-expanded-row)`]: {
-            ["& > td"]: {
-              backgroundColor: colorBgBase
-            },
-            ["&:hover"]: {
-              td: {
-                backgroundColor: colorPrimaryBg
-              }
-            }
-          },
           [`${componentCls}-expanded-row > td`]: {
             // 除内嵌子表格外，设置其他内嵌元素样式
             [`& > *:not(${componentCls}-wrapper):not(${componentCls}-expanded-row-fixed)`]: {

package/lib/tabs/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
+import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition, TabsRef } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
+import { genTabsStyle } from './style';
+import TabPane from './TabPane';
 import type { TabPaneProps } from './TabPane';
 import type { BadgeProps } from '../badge';
 export * from 'antd/es/tabs';
@@ -17,13 +19,13 @@ export type Tab = {
     badge?: BadgeType;
 } & (AntTab | AntTabOptional);
 export interface TabsProps extends Omit<AntTabsProps, 'items'> {
+    divider?: boolean;
     items?: Tab[];
 }
 export type TabsPosition = AntTabsPosition;
-declare const Tabs: {
-    ({ children, items, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    TabPane: React.FC<TabPaneProps>;
-    genTabsStyle: (token: Partial<import("./style").TabsToken>) => import("@ant-design/cssinjs").CSSObject;
-    displayName: string;
+type CompoundedComponent = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<TabsRef>> & {
+    TabPane: typeof TabPane;
+    genTabsStyle: typeof genTabsStyle;
 };
+declare const Tabs: CompoundedComponent;
 export default Tabs;

package/lib/tabs/index.js

@@ -33,9 +33,9 @@ __export(tabs_exports, {
   default: () => tabs_default
 });
 module.exports = __toCommonJS(tabs_exports);
-var import_util = require("@oceanbase/util");
-var import_antd = require("antd");
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_util = require("@oceanbase/util");
 var import_classnames = __toESM(require("classnames"));
 var import_badge = __toESM(require("../badge"));
 var import_config_provider = __toESM(require("../config-provider"));
@@ -46,67 +46,73 @@ __reExport(tabs_exports, require("antd/es/tabs"), module.exports);
 var isReactNode = (item) => {
   return import_react.default.isValidElement(item);
 };
-var Tabs = ({
-  children,
-  items,
-  type,
-  tabPosition,
-  prefixCls: customizePrefixCls,
-  className,
-  ...restProps
-}) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const prefixCls = getPrefixCls("tabs", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const tabsCls = (0, import_classnames.default)(className);
-  const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
-  const dividerList = (items == null ? void 0 : items.filter((item) => item.divider)) || [];
-  const renderBadge = (0, import_react.useCallback)(
-    (badge) => {
-      if (typeof badge === "object" && !isReactNode(badge)) {
-        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge, className: (0, import_classnames.default)(`${prefixCls}-tab-badge`, badge.className) });
+var Tabs = import_react.default.forwardRef(
+  ({
+    children,
+    divider = false,
+    items,
+    type,
+    tabPosition,
+    prefixCls: customizePrefixCls,
+    className,
+    ...restProps
+  }, ref) => {
+    const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const prefixCls = getPrefixCls("tabs", customizePrefixCls);
+    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const tabsCls = (0, import_classnames.default)(className, {
+      [`${prefixCls}-no-divider`]: !divider
+    });
+    const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
+    const dividerList = (items == null ? void 0 : items.filter((item) => item.divider)) || [];
+    const renderBadge = (0, import_react.useCallback)(
+      (badge) => {
+        if (typeof badge === "object" && !isReactNode(badge)) {
+          return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge, className: (0, import_classnames.default)(`${prefixCls}-tab-badge`, badge.className) });
+        }
+        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { className: `${prefixCls}-tab-badge`, count: badge });
+      },
+      [prefixCls]
+    );
+    let newItems = (0, import_useLegacyItems.default)(items, children);
+    newItems = newItems == null ? void 0 : newItems.map((item) => {
+      if (!(0, import_util.isNullValue)(item.divider)) {
+        return {
+          ...item,
+          key: `divider-${dividerList == null ? void 0 : dividerList.indexOf(item)}`,
+          label: /* @__PURE__ */ import_react.default.createElement(
+            import_antd.Divider,
+            {
+              type: isHorizontal ? "vertical" : "horizontal",
+              className: `${prefixCls}-divider`
+            }
+          ),
+          disabled: true
+        };
+      } else if (!(0, import_util.isNullValue)(item.tag) || !(0, import_util.isNullValue)(item.badge)) {
+        return {
+          ...item,
+          label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, item.badge && renderBadge(item.badge), !(0, import_util.isNullValue)(item.tag) && /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
+        };
       }
-      return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { className: `${prefixCls}-tab-badge`, count: badge });
-    },
-    [prefixCls]
-  );
-  let newItems = (0, import_useLegacyItems.default)(items, children);
-  newItems = newItems == null ? void 0 : newItems.map((item) => {
-    if (!(0, import_util.isNullValue)(item.divider)) {
-      return {
-        ...item,
-        key: `divider-${dividerList == null ? void 0 : dividerList.indexOf(item)}`,
-        label: /* @__PURE__ */ import_react.default.createElement(
-          import_antd.Divider,
-          {
-            type: isHorizontal ? "vertical" : "horizontal",
-            className: `${prefixCls}-divider`
-          }
-        ),
-        disabled: true
-      };
-    } else if (!(0, import_util.isNullValue)(item.tag) || !(0, import_util.isNullValue)(item.badge)) {
-      return {
-        ...item,
-        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, item.badge && renderBadge(item.badge), !(0, import_util.isNullValue)(item.tag) && /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
-      };
-    }
-    return item;
-  });
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Tabs,
-      {
-        items: newItems,
-        type,
-        tabPosition,
-        prefixCls: customizePrefixCls,
-        className: tabsCls,
-        ...restProps
-      }
-    )
-  );
-};
+      return item;
+    });
+    return wrapSSR(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Tabs,
+        {
+          ref,
+          items: newItems,
+          type,
+          tabPosition,
+          prefixCls: customizePrefixCls,
+          className: tabsCls,
+          ...restProps
+        }
+      )
+    );
+  }
+);
 Tabs.TabPane = import_TabPane.default;
 Tabs.genTabsStyle = import_style.genTabsStyle;
 if (process.env.NODE_ENV !== "production") {

package/lib/tabs/style/index.js

@@ -28,10 +28,12 @@ var genTabsStyle = (token) => {
   const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary, colorFillQuaternary } = token;
   return {
     [componentCls]: {
-      [`&${componentCls}-top, &${componentCls}-bottom`]: {
-        [`${componentCls}-nav::before`]: {
-          // 页签位置为 top 和 bottom 时，去掉分割线
-          border: "none"
+      [`&${componentCls}-no-divider`]: {
+        // divider prop work for top and bottom tabs
+        [`&${componentCls}-top, &${componentCls}-bottom`]: {
+          [`${componentCls}-nav::before`]: {
+            border: "none"
+          }
         }
       },
       [`${componentCls}-tab`]: {

package/lib/theme/default.js

@@ -24,22 +24,27 @@ __export(default_exports, {
 });
 module.exports = __toCommonJS(default_exports);
 var import_format = require("./util/format");
+var colorPrimary = "#0D6CF2";
+var colorPrimarySecondary = "#598CF3";
+var colorText = "#132039";
+var colorTextSecondary = "#5c6b8a";
+var colorFillSecondary = "#E2E8F3";
+var colorFillTertiary = "#F3F6FC";
+var colorFillQuaternary = "#F8FAFE";
+var colorBorderSecondary = colorFillSecondary;
 var tagColorBorder = "#cdd5e466";
 var fontFamilyEn = `Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'`;
 var defaultTheme = {
   token: {
     fontFamily: `-apple-system, 'Noto Sans', BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
     fontFamilyCode: `Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
-    colorPrimaryBg: "#EAF1FF",
-    colorPrimary: "#006AFF",
-    colorPrimaryBgHover: "#EAF1FF",
-    colorPrimaryBorder: "#b3ccff",
-    colorPrimaryBorderHover: "#5189FB",
-    colorPrimaryHover: "#5189fb",
-    colorPrimaryActive: "#004CE6",
-    colorPrimaryTextHover: "#5189FB",
-    colorPrimaryText: "#006AFF",
-    colorPrimaryTextActive: "#004CE6",
+    borderRadius: 4,
+    borderRadiusLG: 8,
+    borderRadiusSM: 2,
+    fontSize: 13,
+    fontSizeSM: 11,
+    colorPrimary,
+    colorInfo: colorPrimary,
     colorSuccess: "#0ac185",
     colorSuccessBg: "#EEF8F5",
     colorSuccessBgHover: "#dbf0e9",
@@ -70,29 +75,19 @@ var defaultTheme = {
     colorErrorText: "#ff1a1a",
     colorErrorTextActive: "#CC0000",
     colorError: "#F93939",
-    colorInfo: "#006AFF",
-    colorInfoBg: "#EAF1FF",
-    colorInfoBgHover: "#EAF1FF",
-    colorInfoBorder: "#B3CCFF",
-    colorInfoBorderHover: "#5189FB",
-    colorInfoHover: "#5189FB",
-    colorInfoActive: "#004CE6",
-    colorInfoTextHover: "#5189FB",
-    colorInfoText: "#006AFF",
-    colorInfoTextActive: "#004CE6",
     colorTextBase: "#000000",
-    colorText: "#132039",
-    colorTextSecondary: "#5c6b8a",
+    colorText,
+    colorTextSecondary,
     colorTextQuaternary: "#c1cbe0",
     colorTextTertiary: "#8592AD",
     colorBgBase: "#ffffff",
     colorBgContainer: "#ffffff",
-    colorBgLayout: "#f3f6fc",
+    colorBgLayout: colorFillQuaternary,
     colorBorder: "#CDD5E4",
-    colorBorderSecondary: "#E2E8F3",
-    colorFillQuaternary: "#F8FAFE",
-    colorFillTertiary: "#f3f6fc",
-    colorFillSecondary: "#e2e8f3",
+    colorBorderSecondary,
+    colorFillQuaternary,
+    colorFillTertiary,
+    colorFillSecondary,
     colorFill: "#cdd5e4",
     colorBgMask: "rgba(19, 32, 57, 0.45)",
     colorBgElevated: "#ffffff",
@@ -100,58 +95,87 @@ var defaultTheme = {
     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)",
     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)",
     boxShadowTertiary: "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)",
-    borderRadius: 6,
     wireframe: false,
     // Remove focus outline
     lineWidthFocus: 0
   },
   components: {
+    Badge: {
+      colorInfo: colorPrimarySecondary
+    },
     Breadcrumb: {
       fontSize: 12,
       // @ts-ignore
       // fontHeight is internal token
       fontHeight: 20,
-      lastItemColor: "#5c6b8a"
+      lastItemColor: colorTextSecondary
     },
     Collapse: {
-      colorBorder: "#E2E8F3"
+      colorBorder: colorBorderSecondary
     },
     InputNumber: {
       handleVisible: true
     },
+    Progress: {
+      defaultColor: colorPrimarySecondary
+    },
     Radio: {
       // temporarily fix style for checked disabled Radio.Button
-      controlItemBgActiveDisabled: "#e2e8f3"
+      controlItemBgActiveDisabled: colorFillSecondary
     },
     Select: {
       // work for all multiple select component, including Select, TreeSelect and Cascader and so on
-      multipleItemBg: "#F8FAFE",
+      multipleItemBg: colorFillQuaternary,
       multipleItemBorderColor: tagColorBorder,
       multipleItemBorderColorDisabled: tagColorBorder
     },
     Slider: {
-      trackBg: "#006AFF",
+      trackBg: colorPrimary,
       trackHoverBg: "#5189fb",
       trackBgDisabled: "#b3ccff",
-      handleColor: "#006AFF",
+      handleColor: colorPrimary,
       handleActiveColor: "#5189fb",
       handleColorDisabled: "#b3ccff"
     },
     Tabs: {
-      horizontalItemGutter: 24
+      horizontalItemGutter: 24,
+      itemActiveColor: colorText,
+      itemSelectedColor: colorText,
+      itemHoverColor: colorText
     },
     Tag: {
-      defaultColor: "#5c6b8a",
+      defaultColor: colorTextSecondary,
       colorBorder: tagColorBorder
     },
     Table: {
+      cellFontSize: 12,
+      headerSplitColor: "transparent",
       cellPaddingBlock: 12,
+      cellPaddingInline: 16,
       cellPaddingBlockMD: 8,
-      cellPaddingBlockSM: 4
+      cellPaddingBlockSM: 4,
+      rowHoverBg: colorFillQuaternary,
+      rowSelectedBg: colorFillQuaternary,
+      rowSelectedHoverBg: colorFillTertiary
     },
     Tooltip: {
       colorBgSpotlight: "#ffffff",
-      colorTextLightSolid: "#132039"
+      colorTextLightSolid: colorText
+    },
+    Card: {
+      borderRadiusLG: 8
+    },
+    Menu: {
+      paddingContentVertical: 0,
+      itemHeight: 30,
+      itemBorderRadius: 4,
+      // 80 means 50% opacity
+      itemSelectedBg: colorFillSecondary + "80",
+      itemHoverBg: colorFillSecondary + "80",
+      itemColor: colorTextSecondary,
+      itemSelectedColor: colorText,
+      itemMarginBlock: 6,
+      groupTitleFontSize: 11
     }
   }
 };