@zat-design/sisyphus-react 3.13.20-beta.4 → 3.13.20-beta.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.
@@ -324,10 +324,7 @@ export var ProSelect = (props, ref) => {
324
324
  allowClear: true,
325
325
  showArrow: true,
326
326
  loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
327
- onChange: handleChange
328
- // optionLabelProp={otherProps?.isDiffChange ? 'label' : 'children'} // 解决warning报错,添加默认值
329
- // optionLabelProp="label" // 解决warning报错,添加默认值
330
- ,
327
+ onChange: handleChange,
331
328
  showSearch: true,
332
329
  filterOption: isFunction(_onSearch) ? false : (input, option) => {
333
330
  var _option$children;
@@ -13,7 +13,8 @@ var Card = props => {
13
13
  label = props.label,
14
14
  icon = props.icon,
15
15
  mode = props.mode,
16
- loading = props.loading;
16
+ loading = props.loading,
17
+ size = props.size;
17
18
  var antIcon = /*#__PURE__*/_jsx(LoadingOutlined, {
18
19
  style: {
19
20
  fontSize: 24
@@ -24,7 +25,7 @@ var Card = props => {
24
25
  className: "pro-tabs-card",
25
26
  children: mode === 'card' ? /*#__PURE__*/_jsxs(_Space, {
26
27
  size: 8,
27
- align: "center",
28
+ align: size === 'small' ? 'start' : 'center',
28
29
  children: [/*#__PURE__*/_jsxs("div", {
29
30
  className: "pro-tabs-card-left",
30
31
  children: [/*#__PURE__*/_jsx("div", {
@@ -60,7 +60,8 @@ var ProTabs = (props, ref) => {
60
60
  icon: itemProps.icon,
61
61
  mode,
62
62
  title: itemProps.title || itemProps.label,
63
- loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading
63
+ loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
64
+ size: rest === null || rest === void 0 ? void 0 : rest.size
64
65
  };
65
66
  return _objectSpread(_objectSpread({}, omit(itemProps, ['total', 'label', 'icon'])), {}, {
66
67
  label: /*#__PURE__*/_jsx(Card, _objectSpread({}, cardItemProps))
@@ -69,7 +70,9 @@ var ProTabs = (props, ref) => {
69
70
  }, [selectList, fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading]);
70
71
  var cls = classNames({
71
72
  'pro-tabs': mode === 'card',
73
+ 'pro-tabs-mode-card': mode === 'card',
72
74
  'pro-tabs-tab': mode !== 'card',
75
+ 'pro-tabs-size-small': (rest === null || rest === void 0 ? void 0 : rest.size) === 'small',
73
76
  [className]: className
74
77
  });
75
78
  var handleChange = key => {
@@ -85,6 +85,11 @@ export interface ProTabsType extends Omit<TabsProps, 'items' | 'onChange'> {
85
85
  service: Service<any, any>;
86
86
  options?: Options<any, any>;
87
87
  };
88
+ /**
89
+ * @description 卡片大小
90
+ * @default default
91
+ */
92
+ size?: 'small' | 'middle' | 'large';
88
93
  [key: string]: any;
89
94
  }
90
95
  export type ProTabsProps = ProTabsType;
@@ -2,6 +2,43 @@
2
2
  @import (reference) '~antd/es/style/themes/index.less';
3
3
 
4
4
  .pro-tabs {
5
+ &.pro-tabs-mode-card {
6
+ &.pro-tabs-size-small {
7
+ .pro-tabs-card {
8
+ .pro-tabs-card-left {
9
+ width: 84px !important;
10
+ }
11
+ .pro-tabs-card-right img {
12
+ width: 24px !important;
13
+ }
14
+ }
15
+ }
16
+ .@{ant-prefix}-tabs-nav-list {
17
+ div[data-node-key='1'] {
18
+ margin-left: 0 !important;
19
+ }
20
+ }
21
+ .@{ant-prefix}-tabs-tab {
22
+ margin-left: 10px !important;
23
+ background: #ffffff !important;
24
+ border-radius: 8px !important;
25
+ &.@{ant-prefix}-tabs-tab-active {
26
+ background: var(--ant-primary-1) !important;
27
+ .pro-tabs-card {
28
+ border-color: var(--ant-primary-color) !important;
29
+ }
30
+ }
31
+ .pro-tabs-card {
32
+ width: 100%;
33
+ padding: 8px 12px !important;
34
+ border: 1px solid #e7e7e7 !important;
35
+ border-radius: 8px !important;
36
+ }
37
+ }
38
+ .@{ant-prefix}-tabs-ink-bar {
39
+ display: none !important;
40
+ }
41
+ }
5
42
  .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
6
43
  padding: 0 !important;
7
44
  }
@@ -35,7 +72,7 @@
35
72
  }
36
73
 
37
74
  .pro-tabs-card {
38
- width: 200px;
75
+ width: 192px;
39
76
  padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
40
77
  border: 1px solid var(--zaui-line, #dddddd);
41
78
  border-left: none;
@@ -47,11 +84,11 @@
47
84
  .pro-tabs-card-left-total {
48
85
  color: var(--zaui-text, #343434);
49
86
  font-weight: 600;
50
- font-size: var(--zaui-font-size-lg-title, 24px);
87
+ font-size: var(--zaui-font-size-lg, 16px);
51
88
  }
52
89
 
53
90
  .pro-tabs-card-left-label {
54
- color: var(--aui-text, #343434);
91
+ color: #626366;
55
92
  font-weight: 400;
56
93
  font-size: var(--zaui-font-size, 14px);
57
94
  }
@@ -332,10 +332,7 @@ var ProSelect = (props, ref) => {
332
332
  allowClear: true,
333
333
  showArrow: true,
334
334
  loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
335
- onChange: handleChange
336
- // optionLabelProp={otherProps?.isDiffChange ? 'label' : 'children'} // 解决warning报错,添加默认值
337
- // optionLabelProp="label" // 解决warning报错,添加默认值
338
- ,
335
+ onChange: handleChange,
339
336
  showSearch: true,
340
337
  filterOption: (0, _lodash.isFunction)(_onSearch) ? false : (input, option) => {
341
338
  var _option$children;
@@ -19,7 +19,8 @@ var Card = props => {
19
19
  label = props.label,
20
20
  icon = props.icon,
21
21
  mode = props.mode,
22
- loading = props.loading;
22
+ loading = props.loading,
23
+ size = props.size;
23
24
  var antIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LoadingOutlined, {
24
25
  style: {
25
26
  fontSize: 24
@@ -30,7 +31,7 @@ var Card = props => {
30
31
  className: "pro-tabs-card",
31
32
  children: mode === 'card' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
32
33
  size: 8,
33
- align: "center",
34
+ align: size === 'small' ? 'start' : 'center',
34
35
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
35
36
  className: "pro-tabs-card-left",
36
37
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -68,7 +68,8 @@ var ProTabs = (props, ref) => {
68
68
  icon: itemProps.icon,
69
69
  mode,
70
70
  title: itemProps.title || itemProps.label,
71
- loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading
71
+ loading: fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading,
72
+ size: rest === null || rest === void 0 ? void 0 : rest.size
72
73
  };
73
74
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _lodash.omit)(itemProps, ['total', 'label', 'icon'])), {}, {
74
75
  label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, (0, _objectSpread2.default)({}, cardItemProps))
@@ -77,7 +78,9 @@ var ProTabs = (props, ref) => {
77
78
  }, [selectList, fetchFunction === null || fetchFunction === void 0 ? void 0 : fetchFunction.loading]);
78
79
  var cls = (0, _classnames.default)({
79
80
  'pro-tabs': mode === 'card',
81
+ 'pro-tabs-mode-card': mode === 'card',
80
82
  'pro-tabs-tab': mode !== 'card',
83
+ 'pro-tabs-size-small': (rest === null || rest === void 0 ? void 0 : rest.size) === 'small',
81
84
  [className]: className
82
85
  });
83
86
  var handleChange = key => {
@@ -85,6 +85,11 @@ export interface ProTabsType extends Omit<TabsProps, 'items' | 'onChange'> {
85
85
  service: Service<any, any>;
86
86
  options?: Options<any, any>;
87
87
  };
88
+ /**
89
+ * @description 卡片大小
90
+ * @default default
91
+ */
92
+ size?: 'small' | 'middle' | 'large';
88
93
  [key: string]: any;
89
94
  }
90
95
  export type ProTabsProps = ProTabsType;
@@ -2,6 +2,43 @@
2
2
  @import (reference) '~antd/es/style/themes/index.less';
3
3
 
4
4
  .pro-tabs {
5
+ &.pro-tabs-mode-card {
6
+ &.pro-tabs-size-small {
7
+ .pro-tabs-card {
8
+ .pro-tabs-card-left {
9
+ width: 84px !important;
10
+ }
11
+ .pro-tabs-card-right img {
12
+ width: 24px !important;
13
+ }
14
+ }
15
+ }
16
+ .@{ant-prefix}-tabs-nav-list {
17
+ div[data-node-key='1'] {
18
+ margin-left: 0 !important;
19
+ }
20
+ }
21
+ .@{ant-prefix}-tabs-tab {
22
+ margin-left: 10px !important;
23
+ background: #ffffff !important;
24
+ border-radius: 8px !important;
25
+ &.@{ant-prefix}-tabs-tab-active {
26
+ background: var(--ant-primary-1) !important;
27
+ .pro-tabs-card {
28
+ border-color: var(--ant-primary-color) !important;
29
+ }
30
+ }
31
+ .pro-tabs-card {
32
+ width: 100%;
33
+ padding: 8px 12px !important;
34
+ border: 1px solid #e7e7e7 !important;
35
+ border-radius: 8px !important;
36
+ }
37
+ }
38
+ .@{ant-prefix}-tabs-ink-bar {
39
+ display: none !important;
40
+ }
41
+ }
5
42
  .@{ant-prefix}-tabs .@{ant-prefix}-tabs-nav-list .@{ant-prefix}-tabs-tab {
6
43
  padding: 0 !important;
7
44
  }
@@ -35,7 +72,7 @@
35
72
  }
36
73
 
37
74
  .pro-tabs-card {
38
- width: 200px;
75
+ width: 192px;
39
76
  padding: calc(9px * var(--zaui-size; 1)) 16px calc(9px * var(--zaui-size; 1)) 24px;
40
77
  border: 1px solid var(--zaui-line, #dddddd);
41
78
  border-left: none;
@@ -47,11 +84,11 @@
47
84
  .pro-tabs-card-left-total {
48
85
  color: var(--zaui-text, #343434);
49
86
  font-weight: 600;
50
- font-size: var(--zaui-font-size-lg-title, 24px);
87
+ font-size: var(--zaui-font-size-lg, 16px);
51
88
  }
52
89
 
53
90
  .pro-tabs-card-left-label {
54
- color: var(--aui-text, #343434);
91
+ color: #626366;
55
92
  font-weight: 400;
56
93
  font-size: var(--zaui-font-size, 14px);
57
94
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zat-design/sisyphus-react",
3
- "version": "3.13.20-beta.4",
3
+ "version": "3.13.20-beta.6",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",