@oceanbase/ui 0.2.36 → 0.2.38

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.
@@ -2,6 +2,7 @@
2
2
  import type { CSSObject } from '@ant-design/cssinjs';
3
3
  import type { FooterToolBarToken } from '@ant-design/pro-layout/es/components/FooterToolbar/style';
4
4
  import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
5
+ export declare const genCompactStyle: (componentCls: string, subComponentCls?: string) => CSSObject;
5
6
  export declare const genOperationStyle: (token: FullToken<any>) => CSSObject;
6
7
  export declare const genFooterToolbarStyle: GenerateStyle<FooterToolBarToken>;
7
8
  declare const _default: (prefixCls: string) => {
@@ -5,30 +5,91 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
5
5
  function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
6
  function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
7
7
  import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
8
- export var genOperationStyle = function genOperationStyle(token) {
8
+ export var genCompactStyle = function genCompactStyle(componentCls) {
9
9
  var _ref;
10
+ var subComponentCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
11
+ return _ref = {}, _defineProperty(_ref, "&".concat(componentCls, "-compact-item:not(").concat(componentCls, "-compact-last-item)").concat(componentCls, "-compact-first-item ").concat(subComponentCls), {
12
+ borderStartEndRadius: 0,
13
+ borderEndEndRadius: 0
14
+ }), _defineProperty(_ref, "&".concat(componentCls, "-compact-item:not(").concat(componentCls, "-compact-first-item):not(").concat(componentCls, "-compact-last-item) ").concat(subComponentCls), {
15
+ borderRadius: 0
16
+ }), _defineProperty(_ref, "&".concat(componentCls, "-compact-item:not(").concat(componentCls, "-compact-first-item)").concat(componentCls, "-compact-last-item ").concat(subComponentCls), {
17
+ borderStartStartRadius: 0,
18
+ borderEndStartRadius: 0
19
+ }), _ref;
20
+ };
21
+ export var genOperationStyle = function genOperationStyle(token) {
22
+ var _$concat, _objectSpread2, _$concat3, _$concat4, _ref2;
10
23
  var antCls = token.antCls,
24
+ iconCls = token.iconCls,
11
25
  fontSize = token.fontSize,
26
+ lineWidth = token.lineWidth,
27
+ borderRadiusLG = token.borderRadiusLG,
28
+ controlHeight = token.controlHeight,
29
+ controlHeightSM = token.controlHeightSM,
12
30
  controlHeightLG = token.controlHeightLG;
13
31
  var height = controlHeightLG;
14
32
  var lineHeight = "".concat(controlHeightLG, "px");
15
- return _ref = {}, _defineProperty(_ref, "".concat(antCls, "-btn"), {
33
+ return _ref2 = {}, _defineProperty(_ref2, "".concat(antCls, "-btn"), _objectSpread({
34
+ // limit min width for icon button
16
35
  minWidth: controlHeightLG,
17
36
  height: height,
18
- fontSize: fontSize
19
- }), _defineProperty(_ref, "".concat(antCls, "-radio-button-wrapper"), {
37
+ fontSize: fontSize,
38
+ borderRadius: borderRadiusLG
39
+ }, genCompactStyle("".concat(antCls, "-btn")))), _defineProperty(_ref2, "".concat(antCls, "-radio-group"), _defineProperty({}, "".concat(antCls, "-radio-button-wrapper"), (_$concat = {
20
40
  height: height,
21
- lineHeight: lineHeight,
41
+ lineHeight: "".concat(height - lineWidth * 2, "px"),
22
42
  fontSize: fontSize
23
- }), _defineProperty(_ref, "".concat(antCls, "-input-wrapper"), {
24
- lineHeight: lineHeight
25
- }), _defineProperty(_ref, "".concat(antCls, "-input"), {
43
+ }, _defineProperty(_$concat, "&:first-child", {
44
+ borderStartStartRadius: borderRadiusLG,
45
+ borderEndStartRadius: borderRadiusLG
46
+ }), _defineProperty(_$concat, "&:last-child", {
47
+ borderStartEndRadius: borderRadiusLG,
48
+ borderEndEndRadius: borderRadiusLG
49
+ }), _$concat))), _defineProperty(_ref2, "".concat(antCls, "-select"), _objectSpread(_objectSpread({
26
50
  height: height,
27
51
  fontSize: fontSize
28
- }), _defineProperty(_ref, "".concat(antCls, "-input-search-button"), {
52
+ }, genCompactStyle("".concat(antCls, "-select"), "".concat(antCls, "-select-selector"))), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(antCls, "-select-selector"), {
53
+ borderRadius: borderRadiusLG
54
+ }), _defineProperty(_objectSpread2, "".concat(antCls, "-select-selection-item"), {
55
+ fontSize: fontSize
56
+ }), _objectSpread2))), _defineProperty(_ref2, "".concat(antCls, "-input-wrapper"), (_$concat3 = {
57
+ fontSize: fontSize
58
+ }, _defineProperty(_$concat3, "".concat(iconCls), {
59
+ fontSize: fontSize
60
+ }), _defineProperty(_$concat3, "".concat(antCls, "-input-affix-wrapper"), {
61
+ borderStartEndRadius: 0,
62
+ borderEndEndRadius: 0
63
+ }), _$concat3)), _defineProperty(_ref2, "".concat(antCls, "-input-affix-wrapper"), (_$concat4 = {
29
64
  height: height,
30
- lineHeight: lineHeight
31
- }), _ref;
65
+ borderRadius: borderRadiusLG
66
+ }, _defineProperty(_$concat4, "&:not(".concat(antCls, "-input-affix-wrapper-lg)"), {
67
+ lineHeight: "".concat(controlHeight - lineWidth * 2, "px")
68
+ }), _defineProperty(_$concat4, "".concat(antCls, "-input"), {
69
+ height: "".concat(controlHeight - lineWidth * 2, "px")
70
+ }), _defineProperty(_$concat4, "".concat(antCls, "-input-lg"), {
71
+ height: controlHeightSM
72
+ }), _defineProperty(_$concat4, "".concat(antCls, "-input-sm"), {
73
+ height: "".concat(controlHeightLG - lineWidth * 2, "px")
74
+ }), _$concat4)), _defineProperty(_ref2, "".concat(antCls, "-input"), _objectSpread({
75
+ height: height,
76
+ fontSize: fontSize,
77
+ borderRadius: borderRadiusLG
78
+ }, genCompactStyle("".concat(antCls, "-input")))), _defineProperty(_ref2, "".concat(antCls, "-input-search-button"), {
79
+ height: height,
80
+ lineHeight: lineHeight,
81
+ borderStartEndRadius: borderRadiusLG,
82
+ borderEndEndRadius: borderRadiusLG
83
+ }), _defineProperty(_ref2, "".concat(antCls, "-input-group-addon"), {
84
+ fontSize: fontSize,
85
+ borderStartEndRadius: borderRadiusLG,
86
+ borderEndEndRadius: borderRadiusLG
87
+ }), _defineProperty(_ref2, "".concat(antCls, "-picker"), _objectSpread(_objectSpread({
88
+ height: height,
89
+ borderRadius: borderRadiusLG
90
+ }, genCompactStyle("".concat(antCls, "-picker"))), {}, _defineProperty({}, "".concat(antCls, "-picker-input>input"), {
91
+ fontSize: fontSize
92
+ }))), _ref2;
32
93
  };
33
94
  export var genFooterToolbarStyle = function genFooterToolbarStyle(token) {
34
95
  var componentCls = token.componentCls,
@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
29
29
  export declare const THEME_LIGHT = "light";
30
30
  declare const ThemeTypes: ["dark", "light"];
31
31
  export type ThemeType = (typeof ThemeTypes)[number];
32
- declare const supportedLanguages: ("ruby" | "css" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
32
+ declare const supportedLanguages: ("ruby" | "css" | "java" | "json" | "bash" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
33
33
  export type LanguageType = (typeof supportedLanguages)[number] | 'html';
34
34
  export interface HighlightProps extends LocaleWrapperProps {
35
35
  /**
@@ -7,7 +7,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
7
7
  import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
8
8
  import { genOperationStyle, genFooterToolbarStyle } from "../../FooterToolbar/style";
9
9
  export var genPageContainerStyle = function genPageContainerStyle(token) {
10
- var _$concat$concat, _$concat, _objectSpread2;
10
+ var _$concat$concat, _$concat2, _objectSpread2;
11
11
  var antCls = token.antCls,
12
12
  proComponentsCls = token.proComponentsCls,
13
13
  componentCls = token.componentCls,
@@ -18,12 +18,12 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
18
18
  paddingLG = token.paddingLG;
19
19
  var height = controlHeightLG;
20
20
  var lineHeight = "".concat(controlHeightLG, "px");
21
- return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(componentCls), (_$concat = {
21
+ return _objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(componentCls), (_$concat2 = {
22
22
  minHeight: '100vh',
23
23
  backgroundColor: colorBgLayout
24
- }, _defineProperty(_$concat, "".concat(proComponentsCls, "-grid-content"), {
24
+ }, _defineProperty(_$concat2, "".concat(proComponentsCls, "-grid-content"), {
25
25
  minHeight: 'auto'
26
- }), _defineProperty(_$concat, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
26
+ }), _defineProperty(_$concat2, "".concat(componentCls, "-warp-page-header,").concat(componentCls, "-wrap-page-header"), (_$concat$concat = {
27
27
  // 减小内容区左右两侧间距
28
28
  paddingInlineStart: "".concat(paddingLG, "px !important"),
29
29
  paddingInlineEnd: "".concat(paddingLG, "px !important"),
@@ -42,13 +42,16 @@ export var genPageContainerStyle = function genPageContainerStyle(token) {
42
42
  marginBlock: 0
43
43
  }, genOperationStyle(token))), _defineProperty(_$concat$concat, "".concat(antCls, "-page-header-footer"), {
44
44
  marginBlockStart: 0
45
- }), _$concat$concat)), _defineProperty(_$concat, "".concat(componentCls, "-children-container"), {
45
+ }), _$concat$concat)), _defineProperty(_$concat2, "".concat(componentCls, "-children-container"), _defineProperty({
46
46
  paddingInline: paddingLG,
47
47
  paddingBlockStart: 0,
48
48
  paddingBlockEnd: paddingLG
49
- }), _defineProperty(_$concat, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
49
+ }, "& > ".concat(antCls, "-tabs-top:not(").concat(antCls, "-tabs-card):first-child"), {
50
+ // equal to page header paddingBlockEnd
51
+ marginTop: -padding
52
+ })), _defineProperty(_$concat2, "".concat(antCls, "-page-header:not(").concat(antCls, "-page-header-has-breadcrumb)"), _defineProperty({}, "".concat(antCls, "-page-header-heading"), {
50
53
  paddingBlockStart: 0
51
- })), _$concat)), _defineProperty(_objectSpread2, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
54
+ })), _$concat2)), _defineProperty(_objectSpread2, "".concat(componentCls, "-no-page-header"), _defineProperty({}, "".concat(componentCls, "-children-container"), {
52
55
  paddingBlockStart: paddingLG
53
56
  })), _defineProperty(_objectSpread2, "".concat(componentCls, "-with-footer "), {
54
57
  paddingBottom: 64
@@ -42,8 +42,8 @@
42
42
  margin-right: -1px;
43
43
 
44
44
  .@{prefixCls}-select-selector {
45
- border-top-right-radius: 0;
46
- border-bottom-right-radius: 0;
45
+ border-top-right-radius: 0 !important;
46
+ border-bottom-right-radius: 0 !important;
47
47
 
48
48
  &:hover {
49
49
  z-index: 1;
@@ -2,6 +2,7 @@
2
2
  import type { CSSObject } from '@ant-design/cssinjs';
3
3
  import type { FooterToolBarToken } from '@ant-design/pro-layout/es/components/FooterToolbar/style';
4
4
  import type { FullToken, GenerateStyle } from '@oceanbase/design/es/theme';
5
+ export declare const genCompactStyle: (componentCls: string, subComponentCls?: string) => CSSObject;
5
6
  export declare const genOperationStyle: (token: FullToken<any>) => CSSObject;
6
7
  export declare const genFooterToolbarStyle: GenerateStyle<FooterToolBarToken>;
7
8
  declare const _default: (prefixCls: string) => {
@@ -20,39 +20,134 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  var style_exports = {};
21
21
  __export(style_exports, {
22
22
  default: () => style_default,
23
+ genCompactStyle: () => genCompactStyle,
23
24
  genFooterToolbarStyle: () => genFooterToolbarStyle,
24
25
  genOperationStyle: () => genOperationStyle
25
26
  });
26
27
  module.exports = __toCommonJS(style_exports);
27
28
  var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
29
+ var genCompactStyle = (componentCls, subComponentCls = "") => {
30
+ return {
31
+ [`&${componentCls}-compact-item:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item ${subComponentCls}`]: {
32
+ borderStartEndRadius: 0,
33
+ borderEndEndRadius: 0
34
+ },
35
+ [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item) ${subComponentCls}`]: {
36
+ borderRadius: 0
37
+ },
38
+ [`&${componentCls}-compact-item:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item ${subComponentCls}`]: {
39
+ borderStartStartRadius: 0,
40
+ borderEndStartRadius: 0
41
+ }
42
+ };
43
+ };
28
44
  var genOperationStyle = (token) => {
29
- const { antCls, fontSize, controlHeightLG } = token;
45
+ const {
46
+ antCls,
47
+ iconCls,
48
+ fontSize,
49
+ lineWidth,
50
+ borderRadiusLG,
51
+ controlHeight,
52
+ controlHeightSM,
53
+ controlHeightLG
54
+ } = token;
30
55
  const height = controlHeightLG;
31
56
  const lineHeight = `${controlHeightLG}px`;
32
57
  return {
33
58
  // Button
34
59
  [`${antCls}-btn`]: {
60
+ // limit min width for icon button
35
61
  minWidth: controlHeightLG,
36
62
  height,
37
- fontSize
63
+ fontSize,
64
+ borderRadius: borderRadiusLG,
65
+ // Button in Space.Compact
66
+ ...genCompactStyle(`${antCls}-btn`)
38
67
  },
39
68
  // Radio.Button
40
- [`${antCls}-radio-button-wrapper`]: {
69
+ [`${antCls}-radio-group`]: {
70
+ [`${antCls}-radio-button-wrapper`]: {
71
+ height,
72
+ lineHeight: `${height - lineWidth * 2}px`,
73
+ fontSize,
74
+ [`&:first-child`]: {
75
+ borderStartStartRadius: borderRadiusLG,
76
+ borderEndStartRadius: borderRadiusLG
77
+ },
78
+ [`&:last-child`]: {
79
+ borderStartEndRadius: borderRadiusLG,
80
+ borderEndEndRadius: borderRadiusLG
81
+ }
82
+ }
83
+ },
84
+ // Select
85
+ [`${antCls}-select`]: {
41
86
  height,
42
- lineHeight,
43
- fontSize
87
+ fontSize,
88
+ // Select in Space.Compact
89
+ ...genCompactStyle(`${antCls}-select`, `${antCls}-select-selector`),
90
+ [`${antCls}-select-selector`]: {
91
+ borderRadius: borderRadiusLG
92
+ },
93
+ [`${antCls}-select-selection-item`]: {
94
+ fontSize
95
+ }
44
96
  },
45
97
  // Input
46
98
  [`${antCls}-input-wrapper`]: {
47
- lineHeight
99
+ fontSize,
100
+ [`${iconCls}`]: {
101
+ fontSize
102
+ },
103
+ [`${antCls}-input-affix-wrapper`]: {
104
+ borderStartEndRadius: 0,
105
+ borderEndEndRadius: 0
106
+ }
107
+ },
108
+ [`${antCls}-input-affix-wrapper`]: {
109
+ height,
110
+ borderRadius: borderRadiusLG,
111
+ [`&:not(${antCls}-input-affix-wrapper-lg)`]: {
112
+ lineHeight: `${controlHeight - lineWidth * 2}px`
113
+ },
114
+ // avoid to conflict with `${antCls}-input-affix-wrapper` height
115
+ [`${antCls}-input`]: {
116
+ height: `${controlHeight - lineWidth * 2}px`
117
+ },
118
+ [`${antCls}-input-lg`]: {
119
+ height: controlHeightSM
120
+ },
121
+ [`${antCls}-input-sm`]: {
122
+ height: `${controlHeightLG - lineWidth * 2}px`
123
+ }
48
124
  },
49
125
  [`${antCls}-input`]: {
50
126
  height,
51
- fontSize
127
+ fontSize,
128
+ borderRadius: borderRadiusLG,
129
+ // Input in Space.Compact
130
+ ...genCompactStyle(`${antCls}-input`)
52
131
  },
53
132
  [`${antCls}-input-search-button`]: {
54
133
  height,
55
- lineHeight
134
+ lineHeight,
135
+ borderStartEndRadius: borderRadiusLG,
136
+ borderEndEndRadius: borderRadiusLG
137
+ },
138
+ [`${antCls}-input-group-addon`]: {
139
+ fontSize,
140
+ borderStartEndRadius: borderRadiusLG,
141
+ borderEndEndRadius: borderRadiusLG
142
+ },
143
+ // set large DatePicker, TimePicker and RangePicker style
144
+ [`${antCls}-picker`]: {
145
+ height,
146
+ borderRadius: borderRadiusLG,
147
+ ...genCompactStyle(`${antCls}-picker`),
148
+ [`${antCls}-picker-input>input`]: {
149
+ fontSize
150
+ }
56
151
  }
57
152
  };
58
153
  };
@@ -77,6 +172,7 @@ var style_default = (prefixCls) => {
77
172
  };
78
173
  // Annotate the CommonJS export names for ESM import in node:
79
174
  0 && (module.exports = {
175
+ genCompactStyle,
80
176
  genFooterToolbarStyle,
81
177
  genOperationStyle
82
178
  });
@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
29
29
  export declare const THEME_LIGHT = "light";
30
30
  declare const ThemeTypes: ["dark", "light"];
31
31
  export type ThemeType = (typeof ThemeTypes)[number];
32
- declare const supportedLanguages: ("ruby" | "css" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "json" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
32
+ declare const supportedLanguages: ("ruby" | "css" | "java" | "json" | "bash" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
33
33
  export type LanguageType = (typeof supportedLanguages)[number] | 'html';
34
34
  export interface HighlightProps extends LocaleWrapperProps {
35
35
  /**
@@ -75,7 +75,12 @@ var genPageContainerStyle = (token) => {
75
75
  [`${componentCls}-children-container`]: {
76
76
  paddingInline: paddingLG,
77
77
  paddingBlockStart: 0,
78
- paddingBlockEnd: paddingLG
78
+ paddingBlockEnd: paddingLG,
79
+ // set top tabs style when it is PageContainer's first child
80
+ [`& > ${antCls}-tabs-top:not(${antCls}-tabs-card):first-child`]: {
81
+ // equal to page header paddingBlockEnd
82
+ marginTop: -padding
83
+ }
79
84
  },
80
85
  // remove paddingBlockStart for page header without breadcrumb
81
86
  [`${antCls}-page-header:not(${antCls}-page-header-has-breadcrumb)`]: {
@@ -42,8 +42,8 @@
42
42
  margin-right: -1px;
43
43
 
44
44
  .@{prefixCls}-select-selector {
45
- border-top-right-radius: 0;
46
- border-bottom-right-radius: 0;
45
+ border-top-right-radius: 0 !important;
46
+ border-bottom-right-radius: 0 !important;
47
47
 
48
48
  &:hover {
49
49
  z-index: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oceanbase/ui",
3
- "version": "0.2.36",
3
+ "version": "0.2.38",
4
4
  "description": "The UI library based on OceanBase Design",
5
5
  "keywords": [
6
6
  "oceanbase",
@@ -37,7 +37,7 @@
37
37
  "@ant-design/cssinjs": "^1.17.2",
38
38
  "@ant-design/pro-components": "^2.6.43",
39
39
  "@ant-design/pro-layout": "^7.17.16",
40
- "@oceanbase/design": "^0.2.35",
40
+ "@oceanbase/design": "^0.2.37",
41
41
  "@oceanbase/icons": "^0.2.10",
42
42
  "@oceanbase/util": "^0.2.13",
43
43
  "ahooks": "^2.10.14",
@@ -65,5 +65,5 @@
65
65
  "react": ">=16.9.0",
66
66
  "react-dom": ">=16.9.0"
67
67
  },
68
- "gitHead": "fba4db2117ba5b298781da29aaeb987480681217"
68
+ "gitHead": "70d1c902db4f5380a0f4f0a167c6367190ed0711"
69
69
  }