@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.
- package/dist/design.min.js +1 -1
- package/es/card/index.d.ts +1 -0
- package/es/card/index.js +12 -8
- package/es/card/style/index.d.ts +1 -1
- package/es/card/style/index.js +9 -6
- package/es/config-provider/index.d.ts +6 -1
- package/es/config-provider/index.js +3 -1
- package/es/descriptions/hooks/useItems.d.ts +11 -3
- package/es/form/FormItem.d.ts +1 -1
- package/es/radio/index.d.ts +1 -1
- package/es/table/index.d.ts +2 -2
- package/es/table/index.js +4 -0
- package/es/table/style/index.d.ts +3 -2
- package/es/table/style/index.js +25 -25
- package/es/tabs/index.d.ts +1 -0
- package/es/tabs/index.js +2 -2
- package/es/tabs/style/index.d.ts +3 -3
- package/es/tabs/style/index.js +2 -2
- package/es/tag/style/index.d.ts +3 -2
- package/es/theme/default.js +3 -0
- package/es/theme/style/aliyun.less +33 -33
- package/es/theme/style/compact.less +10 -10
- package/es/theme/style/dark.less +36 -36
- package/es/theme/style/default.less +10 -10
- package/lib/card/index.d.ts +1 -0
- package/lib/card/index.js +8 -3
- package/lib/card/style/index.d.ts +1 -1
- package/lib/card/style/index.js +12 -4
- package/lib/config-provider/index.d.ts +6 -1
- package/lib/config-provider/index.js +2 -0
- package/lib/descriptions/hooks/useItems.d.ts +8 -0
- package/lib/radio/index.d.ts +1 -1
- package/lib/table/index.js +9 -0
- package/lib/table/style/index.d.ts +3 -2
- package/lib/table/style/index.js +52 -33
- package/lib/tabs/index.d.ts +1 -0
- package/lib/tabs/index.js +1 -1
- package/lib/tabs/style/index.d.ts +3 -3
- package/lib/tabs/style/index.js +4 -4
- package/lib/tag/style/index.d.ts +3 -2
- package/lib/theme/default.js +3 -0
- package/lib/theme/style/aliyun.less +33 -33
- package/lib/theme/style/compact.less +10 -10
- package/lib/theme/style/dark.less +36 -36
- package/lib/theme/style/default.less +10 -10
- 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,
|
|
316
|
-
@colorBgSolidHover: rgba(0,
|
|
317
|
-
@colorBgSolidActive: rgba(0,
|
|
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,
|
|
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,
|
|
436
|
-
@colorWarningOutline: rgba(255,
|
|
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,
|
|
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,
|
|
499
|
-
0 3px 6px 0 rgba(0,
|
|
500
|
-
0 5px 12px 4px rgba(0,
|
|
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),
|
package/es/theme/style/dark.less
CHANGED
|
@@ -304,22 +304,22 @@
|
|
|
304
304
|
@lime9: #e4f88b;
|
|
305
305
|
@lime-10: #f0fab5;
|
|
306
306
|
@lime10: #f0fab5;
|
|
307
|
-
@colorText: rgba(255,
|
|
308
|
-
@colorTextSecondary: rgba(255,
|
|
309
|
-
@colorTextTertiary: rgba(255,
|
|
310
|
-
@colorTextQuaternary: rgba(255,
|
|
311
|
-
@colorFill: rgba(255,
|
|
312
|
-
@colorFillSecondary: rgba(255,
|
|
313
|
-
@colorFillTertiary: rgba(255,
|
|
314
|
-
@colorFillQuaternary: rgba(255,
|
|
315
|
-
@colorBgSolid: rgba(255,
|
|
316
|
-
@colorBgSolidHover: rgb(255,
|
|
317
|
-
@colorBgSolidActive: rgba(255,
|
|
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,
|
|
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,
|
|
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,
|
|
416
|
-
@colorFillContentHover: rgba(255,
|
|
417
|
-
@colorFillAlter: rgba(255,
|
|
418
|
-
@colorBgContainerDisabled: rgba(255,
|
|
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,
|
|
421
|
-
@colorTextPlaceholder: rgba(255,
|
|
422
|
-
@colorTextDisabled: rgba(255,
|
|
423
|
-
@colorTextHeading: rgba(255,
|
|
424
|
-
@colorTextLabel: rgba(255,
|
|
425
|
-
@colorTextDescription: rgba(255,
|
|
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,
|
|
429
|
-
@colorBgTextActive: rgba(255,
|
|
430
|
-
@colorIcon: rgba(255,
|
|
431
|
-
@colorIconHover: rgba(255,
|
|
432
|
-
@colorErrorOutline: rgba(250,
|
|
433
|
-
@colorWarningOutline: rgba(180,
|
|
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,
|
|
438
|
+
@controlItemBgHover: rgba(255,255,255,0.08);
|
|
439
439
|
@controlItemBgActive: #111a2c;
|
|
440
440
|
@controlItemBgActiveHover: #0f2445;
|
|
441
|
-
@controlItemBgActiveDisabled: rgba(255,
|
|
442
|
-
@controlTmpOutline: rgba(255,
|
|
443
|
-
@controlOutline: rgba(0,
|
|
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,
|
|
507
|
-
0 3px 6px 0 rgba(0,
|
|
508
|
-
0 5px 12px 4px rgba(0,
|
|
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,
|
|
316
|
-
@colorBgSolidHover: rgba(0,
|
|
317
|
-
@colorBgSolidActive: rgba(0,
|
|
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,
|
|
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,
|
|
436
|
-
@colorWarningOutline: rgba(255,
|
|
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,
|
|
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,
|
|
499
|
-
0 3px 6px 0 rgba(0,
|
|
500
|
-
0 5px 12px 4px rgba(0,
|
|
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),
|
package/lib/card/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
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>>;
|
package/lib/card/style/index.js
CHANGED
|
@@ -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,
|
|
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
|
-
|
|
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.
|
|
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
|
}[];
|
package/lib/radio/index.d.ts
CHANGED
|
@@ -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.
|
|
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;
|
package/lib/table/index.js
CHANGED
|
@@ -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 {
|
|
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:
|
|
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;
|
package/lib/table/style/index.js
CHANGED
|
@@ -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
|
-
//
|
|
166
|
-
[`${componentCls}-wrapper
|
|
167
|
-
//
|
|
168
|
-
[`${componentCls}-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
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
|
-
//
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
265
|
+
marginLeft: token.margin + token.marginXL + token.lineWidth * 2 + token.margin
|
|
247
266
|
}
|
|
248
267
|
}
|
|
249
268
|
}
|
package/lib/tabs/index.d.ts
CHANGED
|
@@ -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 {
|
|
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
|
|
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;
|
package/lib/tabs/style/index.js
CHANGED
|
@@ -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
|
-
|
|
23
|
+
genTabsStyle: () => genTabsStyle
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(style_exports);
|
|
26
26
|
var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
|
|
27
|
-
var
|
|
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 [
|
|
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
|
-
|
|
84
|
+
genTabsStyle
|
|
85
85
|
});
|