@oceanbase/ui 0.4.6 → 0.4.8

package/lib/ProCard/index.js

@@ -0,0 +1,88 @@
+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/ProCard/index.tsx
+var ProCard_exports = {};
+__export(ProCard_exports, {
+  default: () => ProCard_default
+});
+module.exports = __toCommonJS(ProCard_exports);
+var import_react = __toESM(require("react"));
+var import_pro_components = require("@ant-design/pro-components");
+var import_design = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_style = __toESM(require("./style"));
+var ProCard = ({
+  title,
+  tabs,
+  headerBordered,
+  bodyStyle,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("pro-card", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const zeroPaddingList = [0, "0", "0px"];
+  const noBodyPadding = zeroPaddingList.includes(bodyStyle == null ? void 0 : bodyStyle.padding);
+  const proCardCls = (0, import_classnames.default)(
+    {
+      [`${prefixCls}-has-title`]: !!title,
+      [`${prefixCls}-no-body-padding`]: noBodyPadding,
+      [`${prefixCls}-no-divider`]: !headerBordered,
+      [`${prefixCls}-contain-tabs`]: !!tabs
+    },
+    className
+  );
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(
+      import_pro_components.ProCard,
+      {
+        prefixCls: customizePrefixCls,
+        title,
+        tabs: typeof tabs === "object" ? {
+          size: "large",
+          ...tabs
+        } : tabs,
+        headerBordered,
+        bodyStyle,
+        className: proCardCls,
+        ...restProps
+      }
+    )
+  );
+};
+if (process.env.NODE_ENV !== "production") {
+  ProCard.displayName = import_pro_components.ProCard.displayName;
+}
+ProCard.isProCard = import_pro_components.ProCard.isProCard;
+ProCard.Divider = import_pro_components.ProCard.Divider;
+ProCard.TabPane = import_pro_components.ProCard.TabPane;
+ProCard.Group = import_pro_components.ProCard.Group;
+var ProCard_default = ProCard;

package/lib/ProCard/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export declare const genProCardStyle: GenerateStyle<OBToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/ProCard/style/index.js

@@ -0,0 +1,92 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ProCard/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genProCardStyle: () => genProCardStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_design = require("@oceanbase/design");
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genProCardStyle = (token) => {
+  const { componentCls, antCls, prefixCls } = token;
+  const tabsComponentCls = `${antCls}-tabs`;
+  const tabsPrefixCls = `${prefixCls}-tabs`;
+  return {
+    // follow Card style
+    // need add `div` to make style work
+    [`div${componentCls}`]: {
+      borderRadius: token.borderRadiusLG
+    },
+    [`${componentCls}:not(${componentCls}-border)`]: {
+      boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)"
+    },
+    [`${componentCls}:not(${componentCls}-size-small)`]: {
+      [`${componentCls}-body`]: {
+        paddingBlock: token.paddingLG
+      },
+      [`&${componentCls}-has-title${componentCls}-no-divider`]: {
+        [`${componentCls}-body`]: {
+          paddingBlockStart: token.padding
+        }
+      }
+    },
+    // no body padding card
+    [`${componentCls}${componentCls}-no-body-padding:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-header`]: {
+        paddingBlockEnd: token.padding
+      },
+      ...import_design.Card.genTableStyle(token.paddingLG, token)
+    },
+    // no body padding small card
+    [`${componentCls}${componentCls}-no-body-padding${componentCls}-size-small:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-header`]: {
+        paddingBlockEnd: token.paddingXS
+      },
+      ...import_design.Card.genTableStyle(token.paddingSM, token)
+    },
+    // custom ProCard tabs style
+    [`${componentCls}`]: {
+      [`${componentCls}-tabs`]: {
+        [`${tabsComponentCls}-top, ${tabsComponentCls}-bottom`]: {
+          [`>${tabsComponentCls}-nav ${tabsComponentCls}-nav-list`]: {
+            marginBlockStart: 0,
+            paddingInlineStart: token.marginLG
+          }
+        },
+        ...import_design.Tabs.genTabsStyle({
+          ...token,
+          componentCls: tabsComponentCls,
+          prefixCls: tabsPrefixCls
+        })
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("ProCard", (token) => {
+    return [genProCardStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genProCardStyle
+});

package/lib/ProTable/index.js

@@ -41,11 +41,17 @@ var import_style = __toESM(require("../LightFilter/style"));
 var import_style2 = __toESM(require("./style"));
 var ProTable = ({
   form,
+  headerTitle,
+  options,
+  optionsRender,
+  toolbar,
+  toolBarRender,
   expandable,
   rowSelection,
   pagination: customPagination,
   footer,
   locale,
+  cardProps: outerCardProps,
   prefixCls: customizePrefixCls,
   tableClassName,
   className,
@@ -69,6 +75,8 @@ var ProTable = ({
   const { wrapSSR } = (0, import_style2.default)(prefixCls);
   const proTableCls = (0, import_classnames.default)(className);
   const { emptyText = /* @__PURE__ */ import_react.default.createElement(import_design.Empty, { image: import_design.Empty.PRESENTED_IMAGE_SIMPLE }), ...restLocale } = locale || {};
+  const cardProps = typeof outerCardProps === "boolean" ? {} : outerCardProps;
+  const proCardCls = getPrefixCls("pro-card", customizePrefixCls);
   return tableWrapSSR(
     lightFilterWrapSSR(
       wrapSSR(
@@ -81,6 +89,23 @@ var ProTable = ({
               requiredMark: false,
               ...form
             },
+            headerTitle,
+            options,
+            optionsRender,
+            toolbar,
+            toolBarRender,
+            cardProps: {
+              ...cardProps,
+              className: (0, import_classnames.default)(
+                {
+                  [`${proCardCls}-has-title`]: !!headerTitle || options || options === void 0 || optionsRender || toolbar || toolBarRender,
+                  [`${proCardCls}-no-divider`]: !(cardProps == null ? void 0 : cardProps.headerBordered),
+                  [`${proCardCls}-no-padding`]: true,
+                  [`${proCardCls}-contain-tabs`]: !!(cardProps == null ? void 0 : cardProps.tabs)
+                },
+                cardProps == null ? void 0 : cardProps.className
+              )
+            },
             expandable: expandable ? {
               columnWidth: 32,
               ...expandable

package/lib/ProTable/style/index.js

@@ -23,9 +23,11 @@ __export(style_exports, {
   genProTableStyle: () => genProTableStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_design = require("@oceanbase/design");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genProTableStyle = (token) => {
   const { antCls, componentCls, proComponentsCls } = token;
+  const proCardComponentCls = `${proComponentsCls}-card`;
   return {
     [`${componentCls}`]: {
       [`${proComponentsCls}-query-filter-actions`]: {
@@ -33,6 +35,18 @@ var genProTableStyle = (token) => {
         [`${antCls}-space${antCls}-space-horizontal${antCls}-space-align-center`]: {
           flexDirection: "row-reverse"
         }
+      },
+      [`${proCardComponentCls}${proCardComponentCls}-no-padding`]: {
+        [`${proCardComponentCls}-body`]: {
+          paddingInline: 0,
+          [`${componentCls}-list-toolbar-container`]: {
+            paddingInline: token.paddingLG
+          }
+        },
+        ...import_design.Card.genTableStyle(token.paddingLG, {
+          ...token,
+          componentCls: proCardComponentCls
+        })
       }
     }
   };

package/lib/TagSelect/style/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken } from '@oceanbase/design/es/theme';
 export type TagSelectToken = FullToken<any>;
-export declare const genTagSelectStyle: GenerateStyle<TagSelectToken>;
+export declare const genTagSelectStyle: (token: TagSelectToken) => CSSObject;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
     hashId: string;

package/lib/_util/genComponentStyleHook.js

@@ -40,7 +40,7 @@ function genComponentStyleHook(componentName, styleFn) {
     const { getPrefixCls, iconPrefixCls } = import_react.default.useContext(import_design.ConfigProvider.ConfigContext);
     const rootPrefixCls = getPrefixCls();
     const componentCls = `.${prefixCls}`;
-    return (0, import_pro_components.useStyle)(componentName, (token) => {
+    return (0, import_pro_components.useStyle)(`OB-${componentName}`, (token) => {
       const mergedToken = {
         ...token,
         componentCls,

package/lib/index.d.ts

@@ -40,6 +40,8 @@ export { default as FooterToolbar } from './FooterToolbar';
 export type { FooterToolbarProps } from './FooterToolbar';
 export { default as ProTable } from './ProTable';
 export type { ProTableProps } from './ProTable';
+export { default as ProCard } from './ProCard';
+export type { ProCardProps } from './ProCard';
 export { default as LightFilter } from './LightFilter';
 export type { LightFilterProps } from './LightFilter';
 export { default as Password } from './Password';

package/lib/index.js

@@ -53,6 +53,7 @@ __export(src_exports, {
   PageContainer: () => import_PageContainer.default,
   PageLoading: () => import_PageLoading.default,
   Password: () => import_Password.default,
+  ProCard: () => import_ProCard.default,
   ProTable: () => import_ProTable.default,
   Ranger: () => import_Ranger.default,
   SideTip: () => import_SideTip.default,
@@ -87,6 +88,7 @@ var import_PageContainer = __toESM(require("./PageContainer"));
 var import_PageLoading = __toESM(require("./PageLoading"));
 var import_FooterToolbar = __toESM(require("./FooterToolbar"));
 var import_ProTable = __toESM(require("./ProTable"));
+var import_ProCard = __toESM(require("./ProCard"));
 var import_LightFilter = __toESM(require("./LightFilter"));
 var import_Password = __toESM(require("./Password"));
 var import_Ranger = __toESM(require("./Ranger"));
@@ -122,6 +124,7 @@ var import_BackgroundTaskManager = __toESM(require("./BackgroundTaskManager"));
   PageContainer,
   PageLoading,
   Password,
+  ProCard,
   ProTable,
   Ranger,
   SideTip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -40,10 +40,10 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.22.1",
-    "@ant-design/pro-components": "^2.8.2",
+    "@ant-design/pro-components": "^2.8.3",
     "@antv/g6": "3.4.10",
-    "@oceanbase/design": "^0.4.5",
-    "@oceanbase/icons": "^0.4.3",
+    "@oceanbase/design": "^0.4.7",
+    "@oceanbase/icons": "^0.4.4",
     "@oceanbase/util": "^0.4.2",
     "ahooks": "^2.10.14",
     "classnames": "^2.5.1",
@@ -56,20 +56,20 @@
     "moment": "^2.30.1",
     "path-to-regexp": "^7.2.0",
     "randexp": "^0.5.3",
-    "rc-picker": "^4.8.3",
-    "rc-util": "^5.44.2",
+    "rc-picker": "^4.9.2",
+    "rc-util": "^5.44.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-json-view": "^1.21.3",
     "react-split-pane": "^0.1.92",
     "screenfull": "^6.0.2"
   },
   "devDependencies": {
-    "@ant-design/pro-form": "^2.31.2",
-    "@ant-design/pro-layout": "^7.21.2"
+    "@ant-design/pro-form": "^2.31.3",
+    "@ant-design/pro-layout": "^7.22.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "400af7f5551196d8e70774caf43a70d3fb5de617"
+  "gitHead": "9e1061a0ca29c3bc94c066f8920be6af39d44249"
 }