@oceanbase/design 0.4.4 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/design.min.js +1 -1
  2. package/es/card/index.d.ts +1 -0
  3. package/es/card/index.js +12 -8
  4. package/es/card/style/index.d.ts +1 -1
  5. package/es/card/style/index.js +9 -6
  6. package/es/config-provider/index.d.ts +6 -1
  7. package/es/config-provider/index.js +3 -1
  8. package/es/descriptions/hooks/useItems.d.ts +11 -3
  9. package/es/form/FormItem.d.ts +1 -1
  10. package/es/radio/index.d.ts +1 -1
  11. package/es/table/index.d.ts +2 -2
  12. package/es/table/index.js +4 -0
  13. package/es/table/style/index.d.ts +3 -2
  14. package/es/table/style/index.js +25 -25
  15. package/es/tabs/index.d.ts +1 -0
  16. package/es/tabs/index.js +2 -2
  17. package/es/tabs/style/index.d.ts +3 -3
  18. package/es/tabs/style/index.js +2 -2
  19. package/es/tag/style/index.d.ts +3 -2
  20. package/es/theme/default.js +3 -0
  21. package/es/theme/style/aliyun.less +33 -33
  22. package/es/theme/style/compact.less +10 -10
  23. package/es/theme/style/dark.less +36 -36
  24. package/es/theme/style/default.less +10 -10
  25. package/lib/card/index.d.ts +1 -0
  26. package/lib/card/index.js +8 -3
  27. package/lib/card/style/index.d.ts +1 -1
  28. package/lib/card/style/index.js +12 -4
  29. package/lib/config-provider/index.d.ts +6 -1
  30. package/lib/config-provider/index.js +2 -0
  31. package/lib/descriptions/hooks/useItems.d.ts +8 -0
  32. package/lib/radio/index.d.ts +1 -1
  33. package/lib/table/index.js +9 -0
  34. package/lib/table/style/index.d.ts +3 -2
  35. package/lib/table/style/index.js +52 -33
  36. package/lib/tabs/index.d.ts +1 -0
  37. package/lib/tabs/index.js +1 -1
  38. package/lib/tabs/style/index.d.ts +3 -3
  39. package/lib/tabs/style/index.js +4 -4
  40. package/lib/tag/style/index.d.ts +3 -2
  41. package/lib/theme/default.js +3 -0
  42. package/lib/theme/style/aliyun.less +33 -33
  43. package/lib/theme/style/compact.less +10 -10
  44. package/lib/theme/style/dark.less +36 -36
  45. package/lib/theme/style/default.less +10 -10
  46. package/package.json +9 -9
@@ -312,9 +312,9 @@
312
312
  @colorFillSecondary: #e2e8f3;
313
313
  @colorFillTertiary: #f3f6fc;
314
314
  @colorFillQuaternary: #f8fafe;
315
- @colorBgSolid: rgb(0, 0, 0);
316
- @colorBgSolidHover: rgba(0, 0, 0, 0.75);
317
- @colorBgSolidActive: rgba(0, 0, 0, 0.95);
315
+ @colorBgSolid: rgb(0,0,0);
316
+ @colorBgSolidHover: rgba(0,0,0,0.75);
317
+ @colorBgSolidActive: rgba(0,0,0,0.95);
318
318
  @colorBgLayout: #f3f6fc;
319
319
  @colorBgContainer: #ffffff;
320
320
  @colorBgElevated: #ffffff;
@@ -420,7 +420,7 @@
420
420
  @colorFillAlter: #f8fafe;
421
421
  @colorBgContainerDisabled: #f3f6fc;
422
422
  @colorBorderBg: #ffffff;
423
- @colorSplit: rgba(13, 63, 155, 0.12);
423
+ @colorSplit: rgba(13,63,155,0.12);
424
424
  @colorTextPlaceholder: #c1cbe0;
425
425
  @colorTextDisabled: #c1cbe0;
426
426
  @colorTextHeading: #132039;
@@ -432,8 +432,8 @@
432
432
  @colorBgTextActive: #cdd5e4;
433
433
  @colorIcon: #8592ad;
434
434
  @colorIconHover: #132039;
435
- @colorErrorOutline: rgba(255, 5, 5, 0.08);
436
- @colorWarningOutline: rgba(255, 164, 19, 0.11);
435
+ @colorErrorOutline: rgba(255,5,5,0.08);
436
+ @colorWarningOutline: rgba(255,164,19,0.11);
437
437
  @fontSizeIcon: 10;
438
438
  @controlOutlineWidth: 2;
439
439
  @controlInteractiveSize: 14;
@@ -442,7 +442,7 @@
442
442
  @controlItemBgActiveHover: #eaf1ff;
443
443
  @controlItemBgActiveDisabled: #cdd5e4;
444
444
  @controlTmpOutline: #f8fafe;
445
- @controlOutline: rgba(22, 99, 255, 0.09);
445
+ @controlOutline: rgba(22,99,255,0.09);
446
446
  @fontWeightStrong: 600;
447
447
  @opacityLoading: 0.65;
448
448
  @linkDecoration: none;
@@ -495,9 +495,9 @@
495
495
  @screenXXLMin: 1600;
496
496
  @boxShadowPopoverArrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
497
497
  @boxShadowCard:
498
- 0 1px 2px -2px rgba(0, 0, 0, 0.16),
499
- 0 3px 6px 0 rgba(0, 0, 0, 0.12),
500
- 0 5px 12px 4px rgba(0, 0, 0, 0.09)
498
+ 0 1px 2px -2px rgba(0,0,0,0.16),
499
+ 0 3px 6px 0 rgba(0,0,0,0.12),
500
+ 0 5px 12px 4px rgba(0,0,0,0.09)
501
501
  ;
502
502
  @boxShadowDrawerRight:
503
503
  -6px 0 16px 0 rgba(0, 0, 0, 0.08),
@@ -304,22 +304,22 @@
304
304
  @lime9: #e4f88b;
305
305
  @lime-10: #f0fab5;
306
306
  @lime10: #f0fab5;
307
- @colorText: rgba(255, 255, 255, 0.85);
308
- @colorTextSecondary: rgba(255, 255, 255, 0.65);
309
- @colorTextTertiary: rgba(255, 255, 255, 0.45);
310
- @colorTextQuaternary: rgba(255, 255, 255, 0.25);
311
- @colorFill: rgba(255, 255, 255, 0.18);
312
- @colorFillSecondary: rgba(255, 255, 255, 0.12);
313
- @colorFillTertiary: rgba(255, 255, 255, 0.08);
314
- @colorFillQuaternary: rgba(255, 255, 255, 0.04);
315
- @colorBgSolid: rgba(255, 255, 255, 0.95);
316
- @colorBgSolidHover: rgb(255, 255, 255);
317
- @colorBgSolidActive: rgba(255, 255, 255, 0.9);
307
+ @colorText: rgba(255,255,255,0.85);
308
+ @colorTextSecondary: rgba(255,255,255,0.65);
309
+ @colorTextTertiary: rgba(255,255,255,0.45);
310
+ @colorTextQuaternary: rgba(255,255,255,0.25);
311
+ @colorFill: rgba(255,255,255,0.18);
312
+ @colorFillSecondary: rgba(255,255,255,0.12);
313
+ @colorFillTertiary: rgba(255,255,255,0.08);
314
+ @colorFillQuaternary: rgba(255,255,255,0.04);
315
+ @colorBgSolid: rgba(255,255,255,0.95);
316
+ @colorBgSolidHover: rgb(255,255,255);
317
+ @colorBgSolidActive: rgba(255,255,255,0.9);
318
318
  @colorBgLayout: #000000;
319
319
  @colorBgContainer: #141414;
320
320
  @colorBgElevated: #1f1f1f;
321
321
  @colorBgSpotlight: #424242;
322
- @colorBgBlur: rgba(255, 255, 255, 0.04);
322
+ @colorBgBlur: rgba(255,255,255,0.04);
323
323
  @colorBorder: #424242;
324
324
  @colorBorderSecondary: #303030;
325
325
  @colorPrimaryBg: #111a2c;
@@ -371,7 +371,7 @@
371
371
  @colorInfoTextActive: #074cad;
372
372
  @colorLinkHover: #0b3b7e;
373
373
  @colorLinkActive: #074cad;
374
- @colorBgMask: rgba(0, 0, 0, 0.45);
374
+ @colorBgMask: rgba(0,0,0,0.45);
375
375
  @colorWhite: #fff;
376
376
  @fontSizeSM: 12;
377
377
  @fontSizeLG: 16;
@@ -412,35 +412,35 @@
412
412
  @borderRadiusSM: 4;
413
413
  @borderRadiusLG: 8;
414
414
  @borderRadiusOuter: 4;
415
- @colorFillContent: rgba(255, 255, 255, 0.12);
416
- @colorFillContentHover: rgba(255, 255, 255, 0.18);
417
- @colorFillAlter: rgba(255, 255, 255, 0.04);
418
- @colorBgContainerDisabled: rgba(255, 255, 255, 0.08);
415
+ @colorFillContent: rgba(255,255,255,0.12);
416
+ @colorFillContentHover: rgba(255,255,255,0.18);
417
+ @colorFillAlter: rgba(255,255,255,0.04);
418
+ @colorBgContainerDisabled: rgba(255,255,255,0.08);
419
419
  @colorBorderBg: #141414;
420
- @colorSplit: rgba(253, 253, 253, 0.12);
421
- @colorTextPlaceholder: rgba(255, 255, 255, 0.25);
422
- @colorTextDisabled: rgba(255, 255, 255, 0.25);
423
- @colorTextHeading: rgba(255, 255, 255, 0.85);
424
- @colorTextLabel: rgba(255, 255, 255, 0.65);
425
- @colorTextDescription: rgba(255, 255, 255, 0.45);
420
+ @colorSplit: rgba(253,253,253,0.12);
421
+ @colorTextPlaceholder: rgba(255,255,255,0.25);
422
+ @colorTextDisabled: rgba(255,255,255,0.25);
423
+ @colorTextHeading: rgba(255,255,255,0.85);
424
+ @colorTextLabel: rgba(255,255,255,0.65);
425
+ @colorTextDescription: rgba(255,255,255,0.45);
426
426
  @colorTextLightSolid: #fff;
427
427
  @colorHighlight: #d73333;
428
- @colorBgTextHover: rgba(255, 255, 255, 0.12);
429
- @colorBgTextActive: rgba(255, 255, 255, 0.18);
430
- @colorIcon: rgba(255, 255, 255, 0.45);
431
- @colorIconHover: rgba(255, 255, 255, 0.85);
432
- @colorErrorOutline: rgba(250, 20, 40, 0.1);
433
- @colorWarningOutline: rgba(180, 93, 0, 0.15);
428
+ @colorBgTextHover: rgba(255,255,255,0.12);
429
+ @colorBgTextActive: rgba(255,255,255,0.18);
430
+ @colorIcon: rgba(255,255,255,0.45);
431
+ @colorIconHover: rgba(255,255,255,0.85);
432
+ @colorErrorOutline: rgba(250,20,40,0.1);
433
+ @colorWarningOutline: rgba(180,93,0,0.15);
434
434
  @fontSizeIcon: 12;
435
435
  @lineWidthFocus: 3;
436
436
  @controlOutlineWidth: 2;
437
437
  @controlInteractiveSize: 16;
438
- @controlItemBgHover: rgba(255, 255, 255, 0.08);
438
+ @controlItemBgHover: rgba(255,255,255,0.08);
439
439
  @controlItemBgActive: #111a2c;
440
440
  @controlItemBgActiveHover: #0f2445;
441
- @controlItemBgActiveDisabled: rgba(255, 255, 255, 0.18);
442
- @controlTmpOutline: rgba(255, 255, 255, 0.04);
443
- @controlOutline: rgba(0, 60, 180, 0.15);
441
+ @controlItemBgActiveDisabled: rgba(255,255,255,0.18);
442
+ @controlTmpOutline: rgba(255,255,255,0.04);
443
+ @controlOutline: rgba(0,60,180,0.15);
444
444
  @fontWeightStrong: 600;
445
445
  @opacityLoading: 0.65;
446
446
  @linkDecoration: none;
@@ -503,9 +503,9 @@
503
503
  @screenXXLMin: 1600;
504
504
  @boxShadowPopoverArrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
505
505
  @boxShadowCard:
506
- 0 1px 2px -2px rgba(0, 0, 0, 0.16),
507
- 0 3px 6px 0 rgba(0, 0, 0, 0.12),
508
- 0 5px 12px 4px rgba(0, 0, 0, 0.09)
506
+ 0 1px 2px -2px rgba(0,0,0,0.16),
507
+ 0 3px 6px 0 rgba(0,0,0,0.12),
508
+ 0 5px 12px 4px rgba(0,0,0,0.09)
509
509
  ;
510
510
  @boxShadowDrawerRight:
511
511
  -6px 0 16px 0 rgba(0, 0, 0, 0.08),
@@ -312,9 +312,9 @@
312
312
  @colorFillSecondary: #e2e8f3;
313
313
  @colorFillTertiary: #f3f6fc;
314
314
  @colorFillQuaternary: #f8fafe;
315
- @colorBgSolid: rgb(0, 0, 0);
316
- @colorBgSolidHover: rgba(0, 0, 0, 0.75);
317
- @colorBgSolidActive: rgba(0, 0, 0, 0.95);
315
+ @colorBgSolid: rgb(0,0,0);
316
+ @colorBgSolidHover: rgba(0,0,0,0.75);
317
+ @colorBgSolidActive: rgba(0,0,0,0.95);
318
318
  @colorBgLayout: #f3f6fc;
319
319
  @colorBgContainer: #ffffff;
320
320
  @colorBgElevated: #ffffff;
@@ -420,7 +420,7 @@
420
420
  @colorFillAlter: #f8fafe;
421
421
  @colorBgContainerDisabled: #f3f6fc;
422
422
  @colorBorderBg: #ffffff;
423
- @colorSplit: rgba(13, 63, 155, 0.12);
423
+ @colorSplit: rgba(13,63,155,0.12);
424
424
  @colorTextPlaceholder: #c1cbe0;
425
425
  @colorTextDisabled: #c1cbe0;
426
426
  @colorTextHeading: #132039;
@@ -432,8 +432,8 @@
432
432
  @colorBgTextActive: #cdd5e4;
433
433
  @colorIcon: #8592ad;
434
434
  @colorIconHover: #132039;
435
- @colorErrorOutline: rgba(255, 5, 5, 0.08);
436
- @colorWarningOutline: rgba(255, 164, 19, 0.11);
435
+ @colorErrorOutline: rgba(255,5,5,0.08);
436
+ @colorWarningOutline: rgba(255,164,19,0.11);
437
437
  @fontSizeIcon: 12;
438
438
  @controlOutlineWidth: 2;
439
439
  @controlInteractiveSize: 16;
@@ -442,7 +442,7 @@
442
442
  @controlItemBgActiveHover: #eaf1ff;
443
443
  @controlItemBgActiveDisabled: #cdd5e4;
444
444
  @controlTmpOutline: #f8fafe;
445
- @controlOutline: rgba(22, 99, 255, 0.09);
445
+ @controlOutline: rgba(22,99,255,0.09);
446
446
  @fontWeightStrong: 600;
447
447
  @opacityLoading: 0.65;
448
448
  @linkDecoration: none;
@@ -495,9 +495,9 @@
495
495
  @screenXXLMin: 1600;
496
496
  @boxShadowPopoverArrow: 2px 2px 5px rgba(0, 0, 0, 0.05);
497
497
  @boxShadowCard:
498
- 0 1px 2px -2px rgba(0, 0, 0, 0.16),
499
- 0 3px 6px 0 rgba(0, 0, 0, 0.12),
500
- 0 5px 12px 4px rgba(0, 0, 0, 0.09)
498
+ 0 1px 2px -2px rgba(0,0,0,0.16),
499
+ 0 3px 6px 0 rgba(0,0,0,0.12),
500
+ 0 5px 12px 4px rgba(0,0,0,0.09)
501
501
  ;
502
502
  @boxShadowDrawerRight:
503
503
  -6px 0 16px 0 rgba(0, 0, 0, 0.08),
@@ -12,5 +12,6 @@ export interface CardProps extends AntCardProps {
12
12
  declare const _default: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
13
13
  Grid: React.FC<import("antd/es/card").CardGridProps>;
14
14
  Meta: React.FC<import("antd/es/card").CardMetaProps>;
15
+ genTableStyle: (padding: number, token: Partial<import("./style").CardToken>) => import("@ant-design/cssinjs").CSSObject;
15
16
  };
16
17
  export default _default;
package/lib/card/index.js CHANGED
@@ -45,8 +45,9 @@ var Card = import_react.default.forwardRef(
45
45
  ({
46
46
  children,
47
47
  size,
48
- divided = true,
48
+ title,
49
49
  tabList,
50
+ divided: outerDivided,
50
51
  prefixCls: customizePrefixCls,
51
52
  bodyStyle,
52
53
  styles,
@@ -54,7 +55,8 @@ var Card = import_react.default.forwardRef(
54
55
  ...restProps
55
56
  }, ref) => {
56
57
  var _a;
57
- const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
58
+ const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
59
+ const divided = outerDivided ?? (contextCard == null ? void 0 : contextCard.divided) ?? true;
58
60
  const prefixCls = getPrefixCls("card", customizePrefixCls);
59
61
  const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
60
62
  const { wrapSSR } = (0, import_style.default)(prefixCls, tabsPrefixCls);
@@ -62,6 +64,7 @@ var Card = import_react.default.forwardRef(
62
64
  const noBodyPadding = zeroPaddingList.includes(bodyStyle == null ? void 0 : bodyStyle.padding) || zeroPaddingList.includes((_a = styles == null ? void 0 : styles.body) == null ? void 0 : _a.padding);
63
65
  const cardCls = (0, import_classnames.default)(
64
66
  {
67
+ [`${prefixCls}-has-title`]: !!title,
65
68
  [`${prefixCls}-no-divider`]: !divided,
66
69
  [`${prefixCls}-no-body-padding`]: noBodyPadding
67
70
  },
@@ -82,6 +85,7 @@ var Card = import_react.default.forwardRef(
82
85
  {
83
86
  ref,
84
87
  size,
88
+ title,
85
89
  tabList: newTabList,
86
90
  prefixCls: customizePrefixCls,
87
91
  bodyStyle,
@@ -99,7 +103,8 @@ if (process.env.NODE_ENV !== "production") {
99
103
  }
100
104
  var card_default = Object.assign(Card, {
101
105
  Grid: import_antd.Card.Grid,
102
- Meta: import_antd.Card.Meta
106
+ Meta: import_antd.Card.Meta,
107
+ genTableStyle: import_style.genTableStyle
103
108
  });
104
109
  // Annotate the CommonJS export names for ESM import in node:
105
110
  0 && (module.exports = {
@@ -5,7 +5,7 @@ export type CardToken = FullToken<'Card'> & {
5
5
  tabsComponentCls: string;
6
6
  tabsPrefixCls: string;
7
7
  };
8
- export declare const genTableStyle: (padding: number, token: CardToken) => CSSObject;
8
+ export declare const genTableStyle: (padding: number, token: Partial<CardToken>) => CSSObject;
9
9
  export declare const genCardStyle: GenerateStyle<CardToken>;
10
10
  declare const _default: (prefixCls: string, tabsPrefixCls: string) => {
11
11
  wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(style_exports);
27
27
  var import_style = require("../../tabs/style");
28
28
  var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
29
29
  var genTableStyle = (padding, token) => {
30
- const { antCls } = token;
30
+ const { componentCls, antCls } = token;
31
31
  const tableComponentCls = `${antCls}-table`;
32
32
  return {
33
33
  [`${tableComponentCls}-wrapper`]: {
@@ -51,11 +51,18 @@ var genTableStyle = (padding, token) => {
51
51
  marginRight: padding
52
52
  }
53
53
  }
54
+ },
55
+ [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
56
+ [`${componentCls}-body`]: {
57
+ [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
58
+ marginTop: -token.marginSM
59
+ }
60
+ }
54
61
  }
55
62
  };
56
63
  };
57
64
  var genCardStyle = (token) => {
58
- const { componentCls, tabsComponentCls, tabsPrefixCls, padding, paddingSM, paddingLG } = token;
65
+ const { componentCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
59
66
  return {
60
67
  [`${componentCls}`]: {
61
68
  // nested Card style
@@ -65,7 +72,8 @@ var genCardStyle = (token) => {
65
72
  },
66
73
  [`${componentCls}${componentCls}-no-divider`]: {
67
74
  [`${componentCls}-head`]: {
68
- borderBottom: "none"
75
+ // should not remove border-bottom to avoid tabs inkbar display correctly
76
+ borderBottomColor: "transparent"
69
77
  }
70
78
  },
71
79
  [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
@@ -84,7 +92,7 @@ var genCardStyle = (token) => {
84
92
  }
85
93
  },
86
94
  [`${componentCls}${componentCls}-contain-tabs`]: {
87
- [`${componentCls}-head`]: (0, import_style.genTagStyle)({
95
+ [`${componentCls}-head`]: (0, import_style.genTabsStyle)({
88
96
  ...token,
89
97
  componentCls: tabsComponentCls,
90
98
  prefixCls: tabsPrefixCls
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ConfigProvider as AntConfigProvider } from 'antd';
3
3
  import type { ConfigProviderProps as AntConfigProviderProps, ConfigConsumerProps as AntConfigConsumerProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
4
- import type { ComponentStyleConfig } from 'antd/es/config-provider/context';
4
+ import type { ComponentStyleConfig, CardConfig as AntCardConfig } from 'antd/es/config-provider/context';
5
5
  import type { AppProps } from 'antd/es/app';
6
6
  import type { PaginationConfig } from 'antd/es/pagination';
7
7
  import type { SpinIndicator } from 'antd/es/spin';
@@ -17,6 +17,9 @@ export interface ThemeConfig extends AntThemeConfig {
17
17
  isDark?: boolean;
18
18
  isAliyun?: boolean;
19
19
  }
20
+ export type CardConfig = AntCardConfig & {
21
+ divided?: boolean;
22
+ };
20
23
  export type SpinConfig = ComponentStyleConfig & {
21
24
  indicator?: SpinIndicator;
22
25
  };
@@ -27,6 +30,7 @@ export interface ConfigConsumerProps extends AntConfigConsumerProps {
27
30
  theme?: ThemeConfig;
28
31
  navigate?: NavigateFunction;
29
32
  hideOnSinglePage?: boolean;
33
+ card?: CardConfig;
30
34
  spin?: SpinConfig;
31
35
  table?: TableConfig;
32
36
  builtInApp?: boolean;
@@ -37,6 +41,7 @@ export interface ConfigProviderProps extends AntConfigProviderProps {
37
41
  locale?: Locale;
38
42
  navigate?: NavigateFunction;
39
43
  hideOnSinglePage?: boolean;
44
+ card?: CardConfig;
40
45
  pagination?: PaginationConfig;
41
46
  spin?: SpinConfig;
42
47
  table?: TableConfig;
@@ -60,6 +60,7 @@ var ConfigProvider = ({
60
60
  locale,
61
61
  navigate,
62
62
  hideOnSinglePage,
63
+ card,
63
64
  collapse,
64
65
  form,
65
66
  spin,
@@ -91,6 +92,7 @@ var ConfigProvider = ({
91
92
  import_antd.ConfigProvider,
92
93
  {
93
94
  locale: mergedLocale,
95
+ card: (0, import_lodash.merge)({}, parentContext.card, card),
94
96
  collapse: (0, import_lodash.merge)(
95
97
  {},
96
98
  {
@@ -15,6 +15,14 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
15
15
  label?: React.ReactNode;
16
16
  className?: string;
17
17
  key?: React.Key;
18
+ classNames?: {
19
+ label?: string;
20
+ content?: string;
21
+ };
22
+ styles?: {
23
+ label?: React.CSSProperties;
24
+ content?: React.CSSProperties;
25
+ };
18
26
  labelStyle?: React.CSSProperties;
19
27
  contentStyle?: React.CSSProperties;
20
28
  }[];
@@ -2,7 +2,7 @@ import type { RadioProps as AntRadioProps, RadioRef } from 'antd/es/radio';
2
2
  import React from 'react';
3
3
  export * from 'antd/es/radio';
4
4
  declare const Radio: React.ForwardRefExoticComponent<AntRadioProps & React.RefAttributes<RadioRef>> & {
5
- Group: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("antd").RadioGroupProps & React.RefAttributes<HTMLDivElement>>>;
5
+ Group: React.NamedExoticComponent<import("antd").RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
6
6
  Button: React.ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & React.RefAttributes<RadioRef>>;
7
7
  };
8
8
  export default Radio;
@@ -53,6 +53,7 @@ function Table(props, ref) {
53
53
  footer,
54
54
  pagination: customPagination,
55
55
  rowSelection,
56
+ rowClassName,
56
57
  toolAlertRender,
57
58
  toolOptionsRender,
58
59
  toolSelectedContent,
@@ -183,6 +184,14 @@ function Table(props, ref) {
183
184
  emptyText: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-empty-wrapper` }, typeof emptyText === "function" ? emptyText() : emptyText)
184
185
  },
185
186
  columns: newColumns,
187
+ rowClassName: (...args) => {
188
+ return (0, import_classnames.default)(
189
+ typeof rowClassName === "function" ? rowClassName(...args) : rowClassName,
190
+ {
191
+ [`${prefixCls}-expand-row-by-click`]: expandable == null ? void 0 : expandable.expandRowByClick
192
+ }
193
+ );
194
+ },
186
195
  expandable: expandable ? {
187
196
  columnWidth: 32,
188
197
  ...expandable
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
- import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
2
+ import type { CSSObject } from '@ant-design/cssinjs';
3
+ import type { FullToken } from 'antd/es/theme/internal';
3
4
  export type TableToken = FullToken<'Table'>;
4
- export declare const genTableStyle: GenerateStyle<TableToken>;
5
+ export declare const genTableStyle: (token: TableToken) => CSSObject;
5
6
  declare const _default: (prefixCls: string) => {
6
7
  wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
7
8
  hashId: string;
@@ -50,19 +50,6 @@ var genTableStyle = (token) => {
50
50
  borderBottom: `1px solid ${colorBorderSecondary}`,
51
51
  borderRadius: 0
52
52
  },
53
- // 单元格通用样式
54
- [`${componentCls}-thead, ${componentCls}-tbody`]: {
55
- ["td, th"]: {
56
- [`&${componentCls}-row-expand-icon-cell`]: {
57
- backgroundColor: colorBgBase,
58
- padding: `${token.paddingSM}px ${token.paddingXS}px`
59
- },
60
- // 内容第一列,左侧间距减小为 8px
61
- [`&:not(:first-child):not(${componentCls}-selection-column):not(${componentCls}-row-expand-icon-cell)`]: {
62
- paddingLeft: token.paddingXS
63
- }
64
- }
65
- },
66
53
  // head 样式
67
54
  [`${componentCls}-thead > tr`]: {
68
55
  ["th"]: {
@@ -99,6 +86,10 @@ var genTableStyle = (token) => {
99
86
  [`${componentCls}-tbody-virtual-scrollbar ${componentCls}-tbody-virtual-scrollbar-thumb`]: {
100
87
  background: `${token.colorFillSecondary} !important`
101
88
  },
89
+ // expandRowByClick 行样式
90
+ [`tr${componentCls}-expand-row-by-click`]: {
91
+ cursor: "pointer"
92
+ },
102
93
  // 去掉可展开行在展开时的底部 border
103
94
  [`tr > td:has(${componentCls}-row-expand-icon-expanded)`]: {
104
95
  borderBottom: "none",
@@ -162,26 +153,48 @@ var genTableStyle = (token) => {
162
153
  borderRadius: `0px 0px ${token.borderRadiusLG}px ${token.borderRadiusLG}px`
163
154
  }
164
155
  },
165
- // 带边框但不带 footer 的表格样式
166
- [`${componentCls}-wrapper:not(${componentCls}-has-footer) ${componentCls}${componentCls}-bordered`]: {
167
- // 表格容器设置圆角
168
- [`${componentCls}-container`]: {
169
- borderRadius: token.borderRadiusLG
170
- },
171
- [`${componentCls}-tbody`]: {
172
- // 最后一行左右单元格增加圆角
173
- [`tr:last-child >*:first-child`]: {
174
- borderEndStartRadius: token.borderRadiusLG
175
- },
176
- [`tr:last-child >*:last-child`]: {
177
- borderEndEndRadius: token.borderRadiusLG
156
+ // 不带边框的表格样式
157
+ [`${componentCls}-wrapper ${componentCls}:not(${componentCls}-bordered)`]: {
158
+ // 单元格通用样式
159
+ [`${componentCls}-thead, ${componentCls}-tbody`]: {
160
+ ["td, th"]: {
161
+ [`&${componentCls}-row-expand-icon-cell`]: {
162
+ backgroundColor: colorBgBase,
163
+ // 设置 paddingRight 即可
164
+ paddingRight: token.paddingXS
165
+ },
166
+ // 紧跟在选择列或展开列后的第一列,左侧间距减小为 8px
167
+ [`&${componentCls}-selection-column, &${componentCls}-row-expand-icon-cell`]: {
168
+ [`& + td, & + th`]: {
169
+ paddingLeft: token.paddingXS
170
+ }
171
+ }
178
172
  }
179
173
  }
180
174
  },
181
- // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线
175
+ // 以下样式在 https://design.oceanbase.com/components/table#table-demo-rowspan 场景下还存在问题,先注释掉
176
+ // 带边框、不带 footer、没有行列合并的表格样式
177
+ // [`${componentCls}-wrapper:not(${componentCls}-has-footer):not(${componentCls}-has-on-cell) ${componentCls}${componentCls}-bordered`]:
178
+ // {
179
+ // // 表格容器设置圆角
180
+ // [`${componentCls}-container`]: {
181
+ // borderRadius: token.borderRadiusLG,
182
+ // },
183
+ // [`${componentCls}-tbody`]: {
184
+ // // 最后一行左右单元格增加圆角
185
+ // [`tr:last-child >*:first-child`]: {
186
+ // borderEndStartRadius: token.borderRadiusLG,
187
+ // },
188
+ // [`tr:last-child >*:last-child`]: {
189
+ // borderEndEndRadius: token.borderRadiusLG,
190
+ // },
191
+ // },
192
+ // },
193
+ // 非可展开表格、不带 footer 表格、非空表格、不带边框表格: 底部添加分隔线,并去掉底部圆角
182
194
  [`${componentCls}-wrapper:not(${componentCls}-expandable):not(${componentCls}-has-footer) ${componentCls}:not(${componentCls}-bordered):not(${componentCls}-empty)`]: {
183
195
  borderBottom: `1px solid ${colorBorderSecondary}`,
184
- borderRadius: 0
196
+ borderBottomLeftRadius: 0,
197
+ borderBottomRightRadius: 0
185
198
  },
186
199
  // 去掉非展开表格的边框
187
200
  [`${componentCls}-wrapper:not(${componentCls}-expandable)`]: {
@@ -208,9 +221,15 @@ var genTableStyle = (token) => {
208
221
  }
209
222
  }
210
223
  },
224
+ [`${componentCls}-expanded-row > td`]: {
225
+ // 除内嵌子表格外,设置其他内嵌元素样式
226
+ [`& > *:not(${componentCls}-wrapper)`]: {
227
+ marginLeft: token.marginXL + token.lineWidth * 2
228
+ }
229
+ },
211
230
  // 嵌套子表格和父表格第一列对齐
212
231
  [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
213
- marginLeft: token.marginXS + token.lineWidth * 2
232
+ marginLeft: token.margin + token.lineWidth * 2
214
233
  }
215
234
  }
216
235
  },
@@ -218,7 +237,7 @@ var genTableStyle = (token) => {
218
237
  [`${componentCls}-tbody`]: {
219
238
  // 嵌套子表格和父表格第一列对齐
220
239
  [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
221
- marginLeft: token.marginXS + token.lineWidth * 2 + token.margin
240
+ marginLeft: token.margin + token.lineWidth * 2 + token.margin
222
241
  }
223
242
  }
224
243
  }
@@ -230,12 +249,12 @@ var genTableStyle = (token) => {
230
249
  [`${componentCls}-expanded-row > td`]: {
231
250
  // 除内嵌子表格外,设置其他内嵌元素样式
232
251
  [`& > *:not(${componentCls}-wrapper)`]: {
233
- marginLeft: token.marginLG + token.marginXL + token.lineWidth * 2
252
+ marginLeft: token.marginXL + token.marginXL + token.lineWidth * 2
234
253
  }
235
254
  },
236
255
  // 嵌套子表格和父表格第一列对齐
237
256
  [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
238
- marginLeft: token.marginXS + token.marginXL + token.lineWidth * 2
257
+ marginLeft: token.margin + token.marginXL + token.lineWidth * 2
239
258
  }
240
259
  }
241
260
  },
@@ -243,7 +262,7 @@ var genTableStyle = (token) => {
243
262
  [`${componentCls}-tbody`]: {
244
263
  // 嵌套子表格和父表格第一列对齐
245
264
  [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
246
- marginLeft: token.marginXS + token.marginXL + token.lineWidth * 2 + token.margin
265
+ marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
247
266
  }
248
267
  }
249
268
  }
@@ -19,6 +19,7 @@ export type TabsPosition = AntTabsPosition;
19
19
  declare const Tabs: {
20
20
  ({ children, items, type, tabPosition, prefixCls: customizePrefixCls, className, ...restProps }: TabsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
21
21
  TabPane: React.FC<TabPaneProps>;
22
+ genTabsStyle: (token: Partial<import("./style").TabsToken>) => import("@ant-design/cssinjs").CSSObject;
22
23
  displayName: string;
23
24
  };
24
25
  export default Tabs;
package/lib/tabs/index.js CHANGED
@@ -87,7 +87,6 @@ var Tabs = ({
87
87
  items: newItems,
88
88
  type,
89
89
  tabPosition,
90
- tabBarGutter: !type || type === "line" ? isHorizontal ? 24 : 0 : void 0,
91
90
  prefixCls: customizePrefixCls,
92
91
  className: tabsCls,
93
92
  ...restProps
@@ -96,6 +95,7 @@ var Tabs = ({
96
95
  );
97
96
  };
98
97
  Tabs.TabPane = import_TabPane.default;
98
+ Tabs.genTabsStyle = import_style.genTabsStyle;
99
99
  if (process.env.NODE_ENV !== "production") {
100
100
  Tabs.displayName = import_antd.Tabs.displayName;
101
101
  }
@@ -1,8 +1,8 @@
1
1
  /// <reference types="react" />
2
- import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
2
+ import type { CSSObject } from '@ant-design/cssinjs';
3
+ import type { FullToken } from 'antd/es/theme/internal';
3
4
  export type TabsToken = FullToken<'Tabs'>;
4
- export type CardToken = FullToken<'Card'>;
5
- export declare const genTagStyle: GenerateStyle<TabsToken | CardToken>;
5
+ export declare const genTabsStyle: (token: Partial<TabsToken>) => CSSObject;
6
6
  declare const _default: (prefixCls: string) => {
7
7
  wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
8
8
  hashId: string;
@@ -20,11 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  var style_exports = {};
21
21
  __export(style_exports, {
22
22
  default: () => style_default,
23
- genTagStyle: () => genTagStyle
23
+ genTabsStyle: () => genTabsStyle
24
24
  });
25
25
  module.exports = __toCommonJS(style_exports);
26
26
  var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
27
- var genTagStyle = (token) => {
27
+ var genTabsStyle = (token) => {
28
28
  const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary } = token;
29
29
  return {
30
30
  [componentCls]: {
@@ -75,11 +75,11 @@ var genTagStyle = (token) => {
75
75
  };
76
76
  var style_default = (prefixCls) => {
77
77
  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Tabs", (token) => {
78
- return [genTagStyle(token)];
78
+ return [genTabsStyle(token)];
79
79
  });
80
80
  return useStyle(prefixCls);
81
81
  };
82
82
  // Annotate the CommonJS export names for ESM import in node:
83
83
  0 && (module.exports = {
84
- genTagStyle
84
+ genTabsStyle
85
85
  });