@oceanbase/design 0.4.9 → 0.4.10

package/lib/card/style/index.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(style_exports);
 var import_style = require("../../tabs/style");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTableStyle = (padding, token) => {
-  const { componentCls, antCls } = token;
+  const { antCls } = token;
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${tableComponentCls}-wrapper`]: {
@@ -51,18 +51,12 @@ var genTableStyle = (padding, token) => {
           marginRight: padding
         }
       }
-    },
-    [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
-      [`${componentCls}-body`]: {
-        [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
-          marginTop: -token.marginSM
-        }
-      }
     }
   };
 };
 var genCardStyle = (token) => {
-  const { componentCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
+  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
+  const tableComponentCls = `${antCls}-table`;
   return {
     [`${componentCls}`]: {
       // nested Card style
@@ -110,13 +104,18 @@ var genCardStyle = (token) => {
         marginBottom: 0
       }
     },
-    // no body padding card
-    [`${componentCls}${componentCls}-no-body-padding`]: genTableStyle(paddingLG, token),
-    // no body padding small card
-    [`${componentCls}${componentCls}-no-body-padding${componentCls}-small`]: genTableStyle(
-      paddingSM,
-      token
-    )
+    // reduce margin between card title and table
+    [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-body`]: {
+        [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
+          marginTop: -token.marginSM
+        }
+      }
+    },
+    // no body horizontal padding card
+    [`${componentCls}${componentCls}-no-body-horizontal-padding`]: genTableStyle(paddingLG, token),
+    // no body horizontal padding small card
+    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token)
   };
 };
 var style_default = (prefixCls, tabsPrefixCls) => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
-    children: string | number | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<React.ReactNode>;
+    children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     span?: number | "filled" | {
         xxl?: number;
         xl?: number;
@@ -12,9 +12,9 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
     };
     label?: React.ReactNode;
     style?: React.CSSProperties;
+    key?: React.Key;
     className?: string;
     prefixCls?: string;
-    key?: React.Key;
     classNames?: Partial<Record<"label" | "content", string>>;
     styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
     labelStyle?: React.CSSProperties;

package/lib/descriptions/hooks/useItems.js

@@ -58,11 +58,27 @@ function convertItem(props, bordered) {
       title: itemChildren
     }
   };
-  const { ellipsis = defaultEllipsis, ...restContentProps } = contentProps || {};
+  const { ellipsis = defaultEllipsis, editable, ...restContentProps } = contentProps || {};
   return {
     ...restItemProps,
     // 仅无边框时定制 children
-    children: bordered ? itemChildren : /* @__PURE__ */ import_react.default.createElement(import_typography.default.Text, { ...restContentProps, ellipsis: (0, import_getEllipsisConfig.getEllipsisConfig)(ellipsis, itemChildren) }, itemChildren)
+    children: bordered ? itemChildren : /* @__PURE__ */ import_react.default.createElement(
+      import_typography.default.Text,
+      {
+        ...restContentProps,
+        ellipsis: (0, import_getEllipsisConfig.getEllipsisConfig)(ellipsis, itemChildren),
+        editable: (
+          // disable autoSize by default to avoid over height
+          typeof editable === "object" ? {
+            autoSize: false,
+            ...editable
+          } : editable === true ? {
+            autoSize: false
+          } : editable
+        )
+      },
+      itemChildren
+    )
   };
 }
 function useItems(items, children, bordered) {

package/lib/descriptions/index.js

@@ -44,7 +44,7 @@ __reExport(descriptions_exports, require("antd/es/descriptions"), module.exports
 var Descriptions = ({
   children,
   bordered,
-  layout,
+  layout = "horizontal",
   colon = layout === "vertical" ? false : void 0,
   items,
   prefixCls: customizePrefixCls,
@@ -55,7 +55,10 @@ var Descriptions = ({
   const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
   const typographyPrefixCls = getPrefixCls("typography", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls, typographyPrefixCls);
-  const descriptionsCls = (0, import_classnames.default)(className);
+  const descriptionsCls = (0, import_classnames.default)(className, {
+    [`${prefixCls}-vertical`]: layout === "vertical",
+    [`${prefixCls}-horizontal`]: layout === "horizontal"
+  });
   const newItems = (0, import_useItems.default)(items, children, bordered);
   return wrapSSR(
     /* @__PURE__ */ import_react.default.createElement(

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

@@ -1,9 +1,12 @@
 /// <reference types="react" />
+import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { DescriptionsProps } from '..';
 export type DescriptionsToken = FullToken<'Alert'> & {
     typographyPrefixCls: string;
     typographyComponentCls: string;
 };
+export declare const genVerticalStyle: (size: DescriptionsProps['size'], token: Partial<DescriptionsToken>) => CSSObject;
 export declare const genDescriptionsStyle: GenerateStyle<DescriptionsToken>;
 declare const _default: (prefixCls: string, typographyPrefixCls: string) => {
     wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/lib/descriptions/style/index.js

@@ -20,14 +20,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var style_exports = {};
 __export(style_exports, {
   default: () => style_default,
-  genDescriptionsStyle: () => genDescriptionsStyle
+  genDescriptionsStyle: () => genDescriptionsStyle,
+  genVerticalStyle: () => genVerticalStyle
 });
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genVerticalStyle = (size, token) => {
+  const { componentCls } = token;
+  const paddingMap = {
+    default: {
+      paddingIn: token.paddingXS,
+      paddingOut: token.paddingLG
+    },
+    middle: {
+      paddingIn: token.paddingXXS,
+      paddingOut: token.padding
+    },
+    small: {
+      paddingIn: token.paddingXXS,
+      paddingOut: token.paddingSM
+    }
+  };
+  const paddingConfig = paddingMap[size];
+  return {
+    // vertical Descriptions without border
+    [`&${componentCls}${componentCls}-vertical:not(${componentCls}-bordered)`]: {
+      [`${componentCls}-row:nth-child(2n + 1)`]: {
+        [`& > th, & > td`]: {
+          paddingBottom: paddingConfig.paddingIn
+        }
+      },
+      [`${componentCls}-row:nth-child(2n)`]: {
+        [`& > th, & > td`]: {
+          paddingBottom: paddingConfig.paddingOut
+        }
+      }
+    }
+  };
+};
 var genDescriptionsStyle = (token) => {
   const { componentCls, typographyComponentCls } = token;
   return {
     [`${componentCls}`]: {
+      ...genVerticalStyle("default", token),
       [`${componentCls}-item-container`]: {
         [`${componentCls}-item-content`]: {
           paddingRight: 12,
@@ -35,11 +70,18 @@ var genDescriptionsStyle = (token) => {
           overflow: "hidden",
           [`${typographyComponentCls}-edit-content`]: {
             insetInlineStart: 0,
-            marginTop: 0
+            marginTop: 0,
+            marginBottom: 0
           }
         }
+      },
+      [`${componentCls}-item-container:has(${`${typographyComponentCls}-edit-content`})`]: {
+        alignItems: "center",
+        height: token.fontSize * token.lineHeight
       }
-    }
+    },
+    [`${componentCls}${componentCls}-middle`]: genVerticalStyle("middle", token),
+    [`${componentCls}${componentCls}-small`]: genVerticalStyle("small", token)
   };
 };
 var style_default = (prefixCls, typographyPrefixCls) => {
@@ -56,5 +98,6 @@ var style_default = (prefixCls, typographyPrefixCls) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  genDescriptionsStyle
+  genDescriptionsStyle,
+  genVerticalStyle
 });

package/lib/form/FormItem.d.ts

@@ -1,19 +1,24 @@
-import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
-import type { ReactNode } from 'react';
 import React from 'react';
+import type { ReactNode } from 'react';
+import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { TooltipProps } from '../tooltip';
+declare const AntFormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    useStatus: () => {
+        status?: "" | "success" | "error" | "warning" | "validating";
+        errors: React.ReactNode[];
+        warnings: React.ReactNode[];
+    };
+};
 export type WrapperTooltipProps = Omit<TooltipProps, 'mouseFollow'> & {
     icon?: React.ReactElement;
 };
 export type LabelTooltipType = WrapperTooltipProps | React.ReactNode;
 export interface FormItemProps extends AntFormItemProps {
     tooltip?: WrapperTooltipProps | ReactNode;
+    action?: ReactNode;
 }
-declare const FormItem: (<Values = any>(props: AntFormItemProps<Values>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
-    useStatus: () => {
-        status?: "" | "success" | "warning" | "error" | "validating";
-        errors: ReactNode[];
-        warnings: ReactNode[];
-    };
+type CompoundedComponent = React.FC<FormItemProps> & {
+    useStatus: typeof AntFormItem.useStatus;
 };
+declare const FormItem: CompoundedComponent;
 export default FormItem;

package/lib/form/FormItem.js

@@ -32,13 +32,31 @@ __export(FormItem_exports, {
   default: () => FormItem_default
 });
 module.exports = __toCommonJS(FormItem_exports);
-var import_antd = require("antd");
 var import_react = __toESM(require("react"));
-var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
+var import_antd = require("antd");
+var import_context = require("antd/es/form/context");
 var import_lodash = require("lodash");
+var import_classnames = __toESM(require("classnames"));
+var import_config_provider = __toESM(require("../config-provider"));
+var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
+var import_style = __toESM(require("./style"));
 var AntFormItem = import_antd.Form.Item;
-var Item = ({ children, tooltip, ...restProps }) => {
+var FormItem = ({
+  children,
+  label,
+  tooltip,
+  action,
+  layout,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
   var _a;
+  const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("form", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const formItemCls = (0, import_classnames.default)(className);
+  const { vertical } = (0, import_react.useContext)(import_context.FormContext);
   const typeList = (0, import_useTooltipTypeList.useTooltipTypeList)();
   if (typeof tooltip === "object" && !import_react.default.isValidElement(tooltip)) {
     const { icon, type, overlayInnerStyle, ...restTooltipProps } = tooltip;
@@ -52,16 +70,20 @@ var Item = ({ children, tooltip, ...restProps }) => {
       ...restTooltipProps
     };
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    AntFormItem,
-    {
-      tooltip,
-      required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
-      ...restProps
-    },
-    children
+  return wrapSSR(
+    /* @__PURE__ */ import_react.default.createElement(
+      AntFormItem,
+      {
+        label: action && (vertical || layout === "vertical") ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label, action && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-action` }, action)) : label,
+        tooltip,
+        required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
+        prefixCls: customizePrefixCls,
+        className: formItemCls,
+        ...restProps
+      },
+      children
+    )
   );
 };
-var FormItem = Item;
 FormItem.useStatus = AntFormItem.useStatus;
 var FormItem_default = FormItem;

package/lib/form/index.js

@@ -35,12 +35,22 @@ __export(form_exports, {
 module.exports = __toCommonJS(form_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_FormItem = __toESM(require("./FormItem"));
+var import_style = __toESM(require("./style"));
 __reExport(form_exports, require("antd/es/form"), module.exports);
-var Form = ({ hideRequiredMark, ...restProps }) => {
-  const { form: contextForm } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  return (
+var Form = ({
+  hideRequiredMark,
+  prefixCls: customizePrefixCls,
+  className,
+  ...restProps
+}) => {
+  const { getPrefixCls, form: contextForm } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const prefixCls = getPrefixCls("form", customizePrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const formCls = (0, import_classnames.default)(className);
+  return wrapSSR(
     // @ts-ignore to ignore children type error
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
@@ -51,6 +61,8 @@ var Form = ({ hideRequiredMark, ...restProps }) => {
         ),
         hideRequiredMark,
         preserve: false,
+        prefixCls: customizePrefixCls,
+        className: formCls,
         ...restProps
       }
     )

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+export type FormToken = FullToken<'Form'>;
+export declare const genFormStyle: GenerateStyle<FormToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    hashId: string;
+};
+export default _default;

package/lib/form/style/index.js

@@ -0,0 +1,52 @@
+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/form/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genFormStyle: () => genFormStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genFormStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}${componentCls}-vertical`]: {
+      [`${componentCls}-item:not(${componentCls}-item-horizontal)`]: {
+        [`${componentCls}-item-label > label`]: {
+          width: "100%",
+          [`${componentCls}-item-action`]: {
+            position: "absolute",
+            right: 0
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Form", (token) => {
+    return [genFormStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genFormStyle
+});

package/lib/table/index.d.ts

@@ -17,6 +17,7 @@ export interface TableLocale extends AntTableLocale {
     };
 }
 export interface TableProps<T> extends AntTableProps<T> {
+    innerBordered?: boolean;
     columns?: ColumnsType<T>;
     cancelText?: string;
     collapseText?: string;

package/lib/table/index.js

@@ -50,6 +50,8 @@ function Table(props, ref) {
   const {
     locale: customLocale,
     size,
+    bordered,
+    innerBordered,
     columns,
     footer,
     pagination: customPagination,
@@ -87,7 +89,8 @@ function Table(props, ref) {
     {
       [`${prefixCls}-expandable`]: !(0, import_lodash.isEmpty)(expandable),
       [`${prefixCls}-selectable`]: !!rowSelection,
-      [`${prefixCls}-has-footer`]: !!footer
+      [`${prefixCls}-has-footer`]: !!footer,
+      [`${prefixCls}-inner-bordered`]: innerBordered
     },
     className
   );
@@ -185,6 +188,7 @@ function Table(props, ref) {
           emptyText: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty-wrapper` }, typeof emptyText === "function" ? emptyText() : emptyText)
         },
         size,
+        bordered: bordered || innerBordered,
         columns: newColumns,
         rowClassName: (...args) => {
           return (0, import_classnames.default)(

package/lib/table/style/index.js

@@ -165,10 +165,27 @@ var genTableStyle = (token) => {
     },
     // 带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}${componentCls}-bordered`]: {
+      [`${componentCls}-thead > tr`]: {
+        ["th"]: {
+          backgroundColor: colorFillQuaternary
+        }
+      },
       [`${componentCls}-footer`]: {
         borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
       }
     },
+    // 带边框的表格样式
+    [`${componentCls}-wrapper${componentCls}-inner-bordered ${componentCls}-bordered`]: {
+      [`${componentCls}-container`]: {
+        borderInlineStart: "none",
+        borderTop: "none",
+        [`${componentCls}-thead > tr > th, ${componentCls}-tbody > tr > td`]: {
+          ["&:last-child"]: {
+            borderInlineEnd: "none"
+          }
+        }
+      }
+    },
     // 不带边框的表格样式
     [`${componentCls}-wrapper ${componentCls}:not(${componentCls}-bordered)`]: {
       // 单元格通用样式

package/lib/tree-select/index.d.ts

@@ -1,6 +1,6 @@
 import { TreeSelect as AntTreeSelect } from 'antd';
 import type { TreeSelectProps as AntTreeSelectProps } from 'antd/es/tree-select';
-import { TreeNode as AntTreeNode } from 'rc-tree-select';
+import type { TreeNode as AntTreeNode } from 'rc-tree-select';
 import type { BaseSelectRef } from 'rc-select';
 import React from 'react';
 export * from 'antd/es/tree-select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -41,11 +41,12 @@
   "dependencies": {
     "@ant-design/cssinjs": "^1.23.0",
     "@ctrl/tinycolor": "^4.1.0",
+    "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
-    "@oceanbase/icons": "^0.4.5",
+    "@oceanbase/icons": "^0.4.6",
     "@oceanbase/util": "^0.4.2",
     "ahooks": "^2.10.14",
-    "antd": "^5.24.0",
+    "antd": "^5.24.7",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
@@ -53,17 +54,17 @@
     "rc-util": "^5.44.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/cli": "^7.27.0",
+    "@babel/preset-env": "^7.26.9",
     "antd-token-previewer": "^2.0.8",
     "rc-select": "^14.16.6",
     "rc-slider": "^11.1.8",
-    "rc-table": "^7.50.2",
+    "rc-table": "^7.50.4",
     "rc-tree-select": "^5.27.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "b9a6e4edde09d388777caade3586a12ddf51779e"
+  "gitHead": "db83d4b1d50b50813d9751f4e8c1189badf67820"
 }