@aloudata/aloudata-design 0.4.8-beta.10 → 0.4.8-beta.12

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.
@@ -5,5 +5,6 @@ declare const DoubleCircleIcon: (props: {
5
5
  size?: number | undefined;
6
6
  innerColor?: string | undefined;
7
7
  children: React.ReactNode;
8
+ type?: "error" | "success" | "warning" | "info" | undefined;
8
9
  }) => JSX.Element;
9
10
  export default DoubleCircleIcon;
@@ -1,3 +1,4 @@
1
+ import classnames from 'classnames';
1
2
  import React from 'react';
2
3
  import "./style/index.less";
3
4
  var INNER_SIZE_RATIO = 0.75; // 外面有两个圆,中间是个图标
@@ -6,7 +7,9 @@ var DoubleCircleIcon = function DoubleCircleIcon(props) {
6
7
  var outColor = props.outColor,
7
8
  size = props.size,
8
9
  innerColor = props.innerColor,
9
- children = props.children;
10
+ children = props.children,
11
+ _props$type = props.type,
12
+ type = _props$type === void 0 ? 'info' : _props$type;
10
13
  var innerSize;
11
14
 
12
15
  if (size) {
@@ -19,7 +22,7 @@ var DoubleCircleIcon = function DoubleCircleIcon(props) {
19
22
  width: size,
20
23
  height: size
21
24
  },
22
- className: 'icon'
25
+ className: classnames('ald-double-circle-icon', "ald-double-circle-icon-".concat(type))
23
26
  }, /*#__PURE__*/React.createElement("div", {
24
27
  style: {
25
28
  background: innerColor,
@@ -1,6 +1,6 @@
1
1
  @import '../../style/index.less';
2
2
 
3
- .icon {
3
+ .ald-double-circle-icon {
4
4
  font-family: 'PingFang SC';
5
5
  display: inline-flex;
6
6
  align-items: center;
@@ -21,3 +21,35 @@
21
21
  background-color: @B90;
22
22
  }
23
23
  }
24
+
25
+ .ald-double-circle-icon-info {
26
+ background-color: @B95;
27
+
28
+ .inner {
29
+ background-color: @B90;
30
+ }
31
+ }
32
+
33
+ .ald-double-circle-icon-success{
34
+ background-color: @SA95;
35
+
36
+ .inner {
37
+ background-color: @SA90;
38
+ }
39
+ }
40
+
41
+ .ald-double-circle-icon-error {
42
+ background-color: @SC95;
43
+
44
+ .inner {
45
+ background-color: @SC90;
46
+ }
47
+ }
48
+
49
+ .ald-double-circle-icon-warning {
50
+ background-color: @SB95;
51
+
52
+ .inner {
53
+ background-color: @SB90;
54
+ }
55
+ }
@@ -26,20 +26,11 @@
26
26
  background-color: @NL97;
27
27
  }
28
28
 
29
- .ant-dropdown-menu-submenu-title {
30
- padding: 8px 24px 8px 12px;
31
- line-height: 20px;
32
- border-radius: 6px;
33
-
34
- .ant-dropdown-menu-submenu-expand-icon {
35
- right: 12px;
36
- }
37
- }
38
29
 
39
30
  .ant-dropdown-menu-item {
40
31
  padding: 8px 12px;
41
32
  line-height: 20px;
42
- border-radius: 6px;
33
+ border-radius: 0;
43
34
  }
44
35
 
45
36
  .ant-dropdown-menu-item,
@@ -59,6 +50,16 @@
59
50
  }
60
51
  }
61
52
 
53
+ .ant-dropdown-menu-submenu-title {
54
+ padding: 8px 24px 8px 12px;
55
+ line-height: 20px;
56
+ border-radius: 0 !important;
57
+
58
+ .ant-dropdown-menu-submenu-expand-icon {
59
+ right: 12px;
60
+ }
61
+ }
62
+
62
63
  .ald-submenu.ant-dropdown-menu-submenu-popup {
63
64
  padding: 0;
64
65
  border: none;
@@ -9,21 +9,21 @@
9
9
  @input-height-large: 36px;
10
10
  @input-padding-large: 5px 13px;
11
11
  @input-font-size-large: 16px;
12
- @input-border-radius-large: 8px;
12
+ @input-border-radius-large: 6px;
13
13
  @input-prefix-margin-right-large: 8px;
14
14
  @input-clear-icon-large: 20px;
15
15
  // size===middle
16
16
  @input-height-middle: 32px;
17
17
  @input-padding-middle: 5px 11px;
18
18
  @input-font-size-middle: 14px;
19
- @input-border-radius-middle: 6px;
19
+ @input-border-radius-middle: 4px;
20
20
  @input-prefix-margin-right-middle: 8px;
21
21
  @input-clear-icon-middle: 16px;
22
22
  // size===small
23
23
  @input-height-small: 28px;
24
24
  @input-padding-small: 5px 9px;
25
25
  @input-font-size-small: 12px;
26
- @input-border-radius-small: 6px;
26
+ @input-border-radius-small: 4px;
27
27
  @input-prefix-margin-right-small: 4px;
28
28
  @input-clear-icon-small: 14px;
29
29
  //custom status
@@ -34,7 +34,7 @@
34
34
  @input-bg-color: @BG100;
35
35
  // active status
36
36
  @input-active-border-color: @B40;
37
- @input-box-shadow-active: @shadow-xs;
37
+ // @input-box-shadow-active: @shadow-xs;
38
38
  // disabled status
39
39
  @input-disabled-border-color: @BG60;
40
40
  @input-disabled-bg-color: @BG90;
@@ -47,7 +47,7 @@
47
47
  background-color: @input-bg-color;
48
48
  border-color: @input-border-color;
49
49
  border-radius: @input-border-radius-middle;
50
- box-shadow: @shadow-xs;
50
+ // box-shadow: @shadow-xs;
51
51
  caret-color: @B60;
52
52
 
53
53
  &::placeholder {
@@ -67,7 +67,7 @@
67
67
  &:hover,
68
68
  &-focused {
69
69
  border-color: @input-active-border-color;
70
- box-shadow: @input-box-shadow-active;
70
+ // box-shadow: @input-box-shadow-active;
71
71
  }
72
72
 
73
73
  &[disabled].ald-input {
@@ -112,7 +112,7 @@
112
112
  &:focus,
113
113
  &-focused {
114
114
  border-color: @input-active-border-color;
115
- box-shadow: @input-box-shadow-active;
115
+ // box-shadow: @input-box-shadow-active;
116
116
  }
117
117
 
118
118
  .ant-input {
@@ -155,12 +155,12 @@
155
155
  .ant-input-affix-wrapper-focused {
156
156
  &.ant-input-password {
157
157
  border-color: @input-active-border-color;
158
- box-shadow: @input-box-shadow-active;
158
+ // box-shadow: @input-box-shadow-active;
159
159
  }
160
160
 
161
161
  &:hover {
162
162
  border-color: @input-active-border-color;
163
- box-shadow: @input-box-shadow-active;
163
+ // box-shadow: @input-box-shadow-active;
164
164
  }
165
165
 
166
166
  .ant-input:hover {
@@ -16,11 +16,14 @@ export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'canc
16
16
  cancelButtonProps?: IButtonProps;
17
17
  okButtonProps?: IButtonProps;
18
18
  okType?: ButtonType;
19
+ paddingLess?: boolean;
19
20
  }
20
- export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType'> {
21
+ export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType' | 'icon'> {
21
22
  cancelButtonProps?: IButtonProps;
22
23
  okButtonProps?: IButtonProps;
23
24
  okType?: ButtonType;
25
+ subTitle?: React.ReactNode;
26
+ icon?: React.ReactElement;
24
27
  }
25
28
  declare const OriginModal: IModalInterface;
26
29
  export declare type ModalFunc = (props: ModalFuncProps) => {
@@ -1,10 +1,10 @@
1
1
  var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
2
- _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title"],
3
- _excluded3 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
4
- _excluded4 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
5
- _excluded5 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"],
6
- _excluded6 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "className", "width"],
7
- _excluded7 = ["icon", "okButtonProps", "cancelButtonProps", "okType", "width"];
2
+ _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess"],
3
+ _excluded3 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
4
+ _excluded4 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
5
+ _excluded5 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
6
+ _excluded6 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
7
+ _excluded7 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "className", "okText", "cancelText"];
8
8
 
9
9
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
10
10
 
@@ -25,6 +25,7 @@ import useModal from 'antd/lib/modal/useModal/index';
25
25
  import classNames from 'classnames';
26
26
  import React from 'react';
27
27
  import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
28
+ import DoubleCircleIcon from "../DoubleCircleIcon";
28
29
  import theme from "../style/themes/default/themeColor.module.less"; // export type { ModalProps, ModalFuncProps };
29
30
 
30
31
  export var destroyFns = [];
@@ -54,6 +55,21 @@ function getButtonProps(buttonProps, defaultBtnType, okType) {
54
55
  });
55
56
  }
56
57
 
58
+ var ModalTitle = function ModalTitle(_ref) {
59
+ var icon = _ref.icon,
60
+ title = _ref.title,
61
+ subTitle = _ref.subTitle;
62
+ return /*#__PURE__*/React.createElement("div", {
63
+ className: 'ald-modal-title-container'
64
+ }, icon, /*#__PURE__*/React.createElement("div", {
65
+ className: 'ald-modal-text-container'
66
+ }, title && /*#__PURE__*/React.createElement("div", {
67
+ className: 'title'
68
+ }, title), subTitle && /*#__PURE__*/React.createElement("div", {
69
+ className: 'subTitle'
70
+ }, subTitle)));
71
+ };
72
+
57
73
  var OriginModal = function OriginModal(props) {
58
74
  var className = props.className,
59
75
  children = props.children,
@@ -66,24 +82,32 @@ var OriginModal = function OriginModal(props) {
66
82
  _props$cancelButtonPr = props.cancelButtonProps,
67
83
  cancelButtonProps = _props$cancelButtonPr === void 0 ? {} : _props$cancelButtonPr,
68
84
  _props$okText = props.okText,
69
- okText = _props$okText === void 0 ? "确定" : _props$okText,
85
+ okText = _props$okText === void 0 ? '确定' : _props$okText,
70
86
  _props$cancelText = props.cancelText,
71
- cancelText = _props$cancelText === void 0 ? "取消" : _props$cancelText,
87
+ cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
72
88
  icon = props.icon,
73
89
  title = props.title,
90
+ paddingLess = props.paddingLess,
74
91
  restProps = _objectWithoutProperties(props, _excluded2);
75
92
 
76
93
  return /*#__PURE__*/React.createElement(AntdModal, _extends({}, restProps, {
77
- title: /*#__PURE__*/React.createElement("div", {
78
- className: 'ald-modal-title-container'
79
- }, icon, /*#__PURE__*/React.createElement("div", {
80
- className: 'ald-modal-text-container'
81
- }, title && /*#__PURE__*/React.createElement("div", {
82
- className: 'title'
83
- }, title), subTitle && /*#__PURE__*/React.createElement("div", {
84
- className: 'subTitle'
85
- }, subTitle))),
86
- className: classNames('ald-modal', className),
94
+ title: ModalTitle({
95
+ icon: icon,
96
+ title: title,
97
+ subTitle: subTitle
98
+ }) // title={
99
+ // <div className={'ald-modal-title-container'}>
100
+ // {icon}
101
+ // <div className={'ald-modal-text-container'}>
102
+ // {title && <div className={'title'}>{title}</div>}
103
+ // {subTitle && <div className={'subTitle'}>{subTitle}</div>}
104
+ // </div>
105
+ // </div>
106
+ // }
107
+ ,
108
+ className: classNames('ald-modal', className, {
109
+ 'ald-modal-padding-less': paddingLess
110
+ }),
87
111
  okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
88
112
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary'),
89
113
  okText: okText,
@@ -101,114 +125,188 @@ OriginModal.useModal = useModal;
101
125
  var Modal = OriginModal;
102
126
 
103
127
  Modal.info = function infoFn(props) {
104
- var icon = props.icon,
105
- _props$okButtonProps2 = props.okButtonProps,
128
+ var _props$okButtonProps2 = props.okButtonProps,
106
129
  okButtonProps = _props$okButtonProps2 === void 0 ? {} : _props$okButtonProps2,
107
130
  _props$cancelButtonPr2 = props.cancelButtonProps,
108
131
  cancelButtonProps = _props$cancelButtonPr2 === void 0 ? {} : _props$cancelButtonPr2,
109
132
  okType = props.okType,
110
133
  width = props.width,
134
+ title = props.title,
135
+ subTitle = props.subTitle,
136
+ _props$okText2 = props.okText,
137
+ okText = _props$okText2 === void 0 ? '确定' : _props$okText2,
138
+ _props$cancelText2 = props.cancelText,
139
+ cancelText = _props$cancelText2 === void 0 ? '取消' : _props$cancelText2,
140
+ className = props.className,
111
141
  restProps = _objectWithoutProperties(props, _excluded3);
112
142
 
113
- return AntdModal.success(_objectSpread({
143
+ return AntdModal.info(_objectSpread({
114
144
  okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
115
145
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
116
146
  width: width || DEFAULT_WIDTH,
117
- icon: icon || /*#__PURE__*/React.createElement(InfoCircleLine, {
118
- size: 16,
119
- fill: theme.B40,
120
- className: "ald-modal-close"
121
- })
147
+ className: classNames('ald-modal', className),
148
+ title: ModalTitle({
149
+ icon: /*#__PURE__*/React.createElement(DoubleCircleIcon, {
150
+ type: "info"
151
+ }, /*#__PURE__*/React.createElement(InfoCircleLine, {
152
+ size: 16,
153
+ fill: theme.B40,
154
+ className: "ald-modal-close"
155
+ })),
156
+ title: title,
157
+ subTitle: subTitle
158
+ }),
159
+ okText: okText,
160
+ cancelText: cancelText
122
161
  }, restProps));
123
162
  };
124
163
 
125
164
  Modal.success = function successFn(props) {
126
- var icon = props.icon,
127
- _props$okButtonProps3 = props.okButtonProps,
165
+ var _props$okButtonProps3 = props.okButtonProps,
128
166
  okButtonProps = _props$okButtonProps3 === void 0 ? {} : _props$okButtonProps3,
129
167
  _props$cancelButtonPr3 = props.cancelButtonProps,
130
168
  cancelButtonProps = _props$cancelButtonPr3 === void 0 ? {} : _props$cancelButtonPr3,
131
169
  okType = props.okType,
132
170
  width = props.width,
171
+ title = props.title,
172
+ subTitle = props.subTitle,
173
+ _props$okText3 = props.okText,
174
+ okText = _props$okText3 === void 0 ? '确定' : _props$okText3,
175
+ _props$cancelText3 = props.cancelText,
176
+ cancelText = _props$cancelText3 === void 0 ? '取消' : _props$cancelText3,
177
+ className = props.className,
133
178
  restProps = _objectWithoutProperties(props, _excluded4);
134
179
 
135
180
  return AntdModal.success(_objectSpread({
136
181
  okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
137
182
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
138
183
  width: width || DEFAULT_WIDTH,
139
- icon: icon || /*#__PURE__*/React.createElement(CheckCircleDuotone, {
140
- fill: [theme.SA40, theme.ND0],
141
- size: 16,
142
- theme: "multi-color"
143
- })
184
+ className: classNames('ald-modal', className),
185
+ title: ModalTitle({
186
+ icon: /*#__PURE__*/React.createElement(DoubleCircleIcon, {
187
+ type: "success"
188
+ }, /*#__PURE__*/React.createElement(CheckCircleDuotone, {
189
+ fill: [theme.SA40, theme.ND0],
190
+ size: 16,
191
+ theme: "multi-color"
192
+ })),
193
+ title: title,
194
+ subTitle: subTitle
195
+ }),
196
+ okText: okText,
197
+ cancelText: cancelText
144
198
  }, restProps));
145
199
  };
146
200
 
147
201
  Modal.error = function errorFn(props) {
148
- var icon = props.icon,
149
- _props$okButtonProps4 = props.okButtonProps,
202
+ var _props$okButtonProps4 = props.okButtonProps,
150
203
  okButtonProps = _props$okButtonProps4 === void 0 ? {} : _props$okButtonProps4,
151
204
  _props$cancelButtonPr4 = props.cancelButtonProps,
152
205
  cancelButtonProps = _props$cancelButtonPr4 === void 0 ? {} : _props$cancelButtonPr4,
153
206
  okType = props.okType,
154
207
  width = props.width,
208
+ title = props.title,
209
+ subTitle = props.subTitle,
210
+ _props$okText4 = props.okText,
211
+ okText = _props$okText4 === void 0 ? '确定' : _props$okText4,
212
+ _props$cancelText4 = props.cancelText,
213
+ cancelText = _props$cancelText4 === void 0 ? '取消' : _props$cancelText4,
214
+ className = props.className,
155
215
  restProps = _objectWithoutProperties(props, _excluded5);
156
216
 
157
- return AntdModal.success(_objectSpread({
217
+ return AntdModal.error(_objectSpread({
158
218
  okButtonProps: getButtonProps(okButtonProps, 'dangerous', okType),
159
219
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
160
220
  width: width || DEFAULT_WIDTH,
161
- icon: icon || /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
162
- fill: [theme.SC40, theme.ND0],
163
- size: 16,
164
- theme: "multi-color"
165
- })
221
+ className: classNames('ald-modal', className),
222
+ title: ModalTitle({
223
+ icon: /*#__PURE__*/React.createElement(DoubleCircleIcon, {
224
+ type: "error"
225
+ }, /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
226
+ fill: [theme.SC40, theme.ND0],
227
+ size: 16,
228
+ theme: "multi-color"
229
+ })),
230
+ title: title,
231
+ subTitle: subTitle
232
+ }),
233
+ okText: okText,
234
+ cancelText: cancelText
166
235
  }, restProps));
167
236
  };
168
237
 
169
238
  Modal.warning = function modalWarn(props) {
170
- var icon = props.icon,
171
- _props$okButtonProps5 = props.okButtonProps,
239
+ var _props$okButtonProps5 = props.okButtonProps,
172
240
  okButtonProps = _props$okButtonProps5 === void 0 ? {} : _props$okButtonProps5,
173
241
  _props$cancelButtonPr5 = props.cancelButtonProps,
174
242
  cancelButtonProps = _props$cancelButtonPr5 === void 0 ? {} : _props$cancelButtonPr5,
175
243
  okType = props.okType,
176
- className = props.className,
177
244
  width = props.width,
245
+ title = props.title,
246
+ subTitle = props.subTitle,
247
+ _props$okText5 = props.okText,
248
+ okText = _props$okText5 === void 0 ? '确定' : _props$okText5,
249
+ _props$cancelText5 = props.cancelText,
250
+ cancelText = _props$cancelText5 === void 0 ? '取消' : _props$cancelText5,
251
+ className = props.className,
178
252
  restProps = _objectWithoutProperties(props, _excluded6);
179
253
 
180
- return AntdModal.success(_objectSpread({
254
+ return AntdModal.warning(_objectSpread({
181
255
  okButtonProps: getButtonProps(okButtonProps, 'dangerous', okType),
182
256
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
183
257
  width: width || DEFAULT_WIDTH,
184
- className: classNames('ald-modal-warning', className),
185
- icon: icon || /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
186
- fill: [theme.SB40, theme.ND0],
187
- theme: "multi-color",
188
- size: 16
189
- })
258
+ // className: classNames('ald-modal-warning', className),
259
+ className: classNames('ald-modal ald-modal-warning', className),
260
+ title: ModalTitle({
261
+ icon: /*#__PURE__*/React.createElement(DoubleCircleIcon, {
262
+ type: "warning"
263
+ }, /*#__PURE__*/React.createElement(AlertTriangleDuotone, {
264
+ fill: [theme.SB40, theme.ND0],
265
+ theme: "multi-color",
266
+ size: 16
267
+ })),
268
+ title: title,
269
+ subTitle: subTitle
270
+ }),
271
+ okText: okText,
272
+ cancelText: cancelText
190
273
  }, restProps));
191
274
  };
192
275
 
193
276
  Modal.confirm = function confirmFn(props) {
194
- var icon = props.icon,
195
- _props$okButtonProps6 = props.okButtonProps,
277
+ var _props$okButtonProps6 = props.okButtonProps,
196
278
  okButtonProps = _props$okButtonProps6 === void 0 ? {} : _props$okButtonProps6,
197
279
  _props$cancelButtonPr6 = props.cancelButtonProps,
198
280
  cancelButtonProps = _props$cancelButtonPr6 === void 0 ? {} : _props$cancelButtonPr6,
199
281
  okType = props.okType,
200
282
  width = props.width,
283
+ title = props.title,
284
+ subTitle = props.subTitle,
285
+ className = props.className,
286
+ _props$okText6 = props.okText,
287
+ okText = _props$okText6 === void 0 ? '确定' : _props$okText6,
288
+ _props$cancelText6 = props.cancelText,
289
+ cancelText = _props$cancelText6 === void 0 ? '取消' : _props$cancelText6,
201
290
  restProps = _objectWithoutProperties(props, _excluded7);
202
291
 
203
- return AntdModal.success(_objectSpread({
292
+ return AntdModal.confirm(_objectSpread({
204
293
  okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
205
294
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary', okType),
206
295
  width: width || DEFAULT_WIDTH,
207
- icon: icon || /*#__PURE__*/React.createElement(InfoCircleLine, {
208
- size: 16,
209
- fill: theme.SB40,
210
- className: "ald-modal-close"
211
- })
296
+ className: classNames('ald-modal', className),
297
+ title: ModalTitle({
298
+ icon: /*#__PURE__*/React.createElement(DoubleCircleIcon, {
299
+ type: "info"
300
+ }, /*#__PURE__*/React.createElement(InfoCircleLine, {
301
+ size: 16,
302
+ fill: theme.B40,
303
+ className: "ald-modal-close"
304
+ })),
305
+ title: title,
306
+ subTitle: subTitle
307
+ }),
308
+ okText: okText,
309
+ cancelText: cancelText
212
310
  }, restProps));
213
311
  };
214
312
 
@@ -68,6 +68,15 @@
68
68
  margin-inline-start: 12px;
69
69
  }
70
70
  }
71
+
72
+ }
73
+
74
+ .ald-modal-padding-less{
75
+ .ant-modal-content {
76
+ .ant-modal-body{
77
+ margin: 0 -24px;
78
+ }
79
+ }
71
80
  }
72
81
 
73
82
  .ant-modal-confirm {
@@ -82,8 +91,22 @@
82
91
  margin-left: 28px;
83
92
  }
84
93
  }
94
+
85
95
  }
86
96
 
97
+ .ant-modal-confirm-body{
98
+ display: block;
99
+
100
+ > span.anticon{
101
+ display: none;
102
+
103
+ +.ant-modal-confirm-title+.ant-modal-confirm-content{
104
+ margin-left: 0;
105
+ margin-top: 16px;
106
+ }
107
+ }
108
+ }
109
+
87
110
  .ant-modal-confirm-btns {
88
111
  margin-block-start: 16px;
89
112
  }
@@ -70,8 +70,10 @@ export default function RadioGroup(props) {
70
70
  }
71
71
  }, /*#__PURE__*/React.createElement("div", {
72
72
  className: getWrapperClass()
73
- }, children, radioGroupStyle === 'filled' && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
74
- className: "ald-radio-filled-slider",
73
+ }, children, (radioGroupStyle === 'filled' || radioGroupStyle === 'filter') && type !== 'radio' ? /*#__PURE__*/React.createElement("div", {
74
+ className: classNames('ald-radio-filled-slider ', {
75
+ 'ald-radio-filled-slider-filter': radioGroupStyle === 'filter'
76
+ }),
75
77
  ref: sliderRef
76
78
  }) : null));
77
79
  }
@@ -37,6 +37,8 @@ export default function Radio(props) {
37
37
  otherClass = 'ald-radio-button-wrapper-filled';
38
38
  } else if (groupContext.radioGroupStyle === 'border') {
39
39
  otherClass = 'ald-radio-button-wrapper-border';
40
+ } else if (groupContext.radioGroupStyle === 'filter') {
41
+ otherClass = 'ald-radio-button-wrapper-filter';
40
42
  } else {
41
43
  otherClass = 'ald-radio-button-wrapper-border-primary';
42
44
  }
@@ -45,6 +47,8 @@ export default function Radio(props) {
45
47
  otherClass = 'ald-radio-icon-button-wrapper-filled';
46
48
  } else if (groupContext.radioGroupStyle === 'border') {
47
49
  otherClass = 'ald-radio-icon-button-wrapper-border';
50
+ } else if (groupContext.radioGroupStyle === 'filter') {
51
+ otherClass = 'ald-radio-icon-button-wrapper-filter';
48
52
  } else {
49
53
  otherClass = 'ald-radio-icon-button-wrapper-border-primary';
50
54
  }
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary';
2
+ export declare type TRadioGroupStyle = 'border' | 'filled' | 'borderPrimary' | 'filter';
3
3
  export declare type TRadioSize = 'large' | 'middle' | 'small' | 'default';
4
4
  export declare type TRadioType = 'radio' | 'button' | 'iconButton';
5
5
  export interface IRadioGroupProps {
@@ -12,7 +12,7 @@
12
12
  @radio-button-padding-middle: 12px;
13
13
 
14
14
  // Radio组件基础样式
15
- [class^="ald-radio"] {
15
+ [class^='ald-radio'] {
16
16
  box-sizing: border-box;
17
17
  }
18
18
 
@@ -120,7 +120,9 @@
120
120
  .ald-radio-button-wrapper-border-primary,
121
121
  .ald-radio-button-wrapper-border,
122
122
  .ald-radio-icon-button-wrapper-border,
123
- .ald-radio-icon-button-wrapper-border-primary {
123
+ .ald-radio-icon-button-wrapper-border-primary,
124
+ .ald-radio-button-wrapper-filter,
125
+ .ald-radio-icon-button-wrapper-filter {
124
126
  &.ald-radio-label.ald-radio-wrapper-disabled {
125
127
  opacity: 0.5;
126
128
 
@@ -167,6 +169,11 @@
167
169
  transition: width, left, height 0.3s, 0.3s, 0.3s ease;
168
170
  }
169
171
 
172
+ .ald-radio-filled-slider-filter {
173
+ background: @B90;
174
+ border: 0;
175
+ }
176
+
170
177
  // button状态下的样式
171
178
  .ald-radio-group-button,
172
179
  .ald-radio-group-icon-button {
@@ -241,34 +248,37 @@
241
248
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border,
242
249
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
243
250
  background: @BG80;
244
- transition: background 0.5s ease;
251
+ transition: background 0.3s ease;
245
252
 
246
253
  .ald-radio-desc {
247
254
  position: relative;
248
255
  color: @NL0;
249
- transition: text-shadow 0.5s ease;
256
+ transition: text-shadow 0.3s ease, color 0.3s ease;
250
257
  }
251
258
  }
252
259
 
253
260
  .ald-radio-wrapper-checked.ald-radio-button-wrapper-border-primary,
254
261
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-border-primary {
255
262
  background: @B40;
256
- transition: background 0.5s ease;
263
+ transition: background 0.3s ease;
257
264
 
258
265
  .ald-radio-desc {
259
266
  position: relative;
260
267
  color: @ND0;
261
- transition: text-shadow 0.5s ease;
268
+ transition: text-shadow 0.3s ease, color 0.3s ease;
262
269
  }
263
270
  }
264
271
 
265
272
  // filled样式的button
266
- .ald-radio-button-wrapper-filled {
273
+ .ald-radio-button-wrapper-filled,
274
+ .ald-radio-button-wrapper-filter {
267
275
  padding: 0 @radio-button-padding;
268
276
  }
269
277
 
270
278
  .ald-radio-button-wrapper-filled,
271
- .ald-radio-icon-button-wrapper-filled {
279
+ .ald-radio-icon-button-wrapper-filled,
280
+ .ald-radio-button-wrapper-filter,
281
+ .ald-radio-icon-button-wrapper-filter {
272
282
  position: relative;
273
283
  display: flex;
274
284
  align-items: center;
@@ -300,21 +310,41 @@
300
310
  }
301
311
 
302
312
  .ald-radio-desc {
303
- font-weight: 400;
313
+ font-weight: 600;
304
314
  }
305
315
  }
306
316
 
317
+ .ald-radio-button-wrapper-filter,
318
+ .ald-radio-icon-button-wrapper-filter {
319
+ background-color: @BG100;
320
+ }
321
+
307
322
  .ald-radio-wrapper-checked.ald-radio-button-wrapper-filled,
308
323
  .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filled {
309
324
  position: relative;
310
325
 
311
326
  .ald-radio-desc {
312
327
  position: relative;
313
- font-weight: 400;
328
+ font-weight: 600;
329
+ z-index: 2;
330
+ color: @NL0;
331
+ }
332
+ }
333
+
334
+ .ald-radio-wrapper-checked.ald-radio-button-wrapper-filter,
335
+ .ald-radio-wrapper-checked.ald-radio-icon-button-wrapper-filter {
336
+ position: relative;
337
+ border-radius: @border-radius-middle;
338
+ background-color: @B90;
339
+
340
+ .ald-radio-desc {
341
+ position: relative;
342
+ font-weight: 600;
314
343
  z-index: 2;
315
344
  color: @NL0;
316
345
  }
317
346
  }
347
+
318
348
  // 各种大小
319
349
  &.ald-radio-group-middle {
320
350
  height: @radio-group-height-middle;
@@ -325,8 +355,15 @@
325
355
  }
326
356
  }
327
357
 
328
- .ald-radio-icon-button-wrapper-filled {
358
+ .ald-radio-icon-button-wrapper-filled,
359
+ .ald-radio-icon-button-wrapper-filter {
329
360
  padding: 0 @radio-icon-button-padding-middle;
361
+
362
+ &.ald-radio-label {
363
+ .ald-radio-desc {
364
+ font-size: @font-size-middle + 1;
365
+ }
366
+ }
330
367
  }
331
368
 
332
369
  .ald-radio-button-wrapper-border,
@@ -335,8 +372,9 @@
335
372
  }
336
373
 
337
374
  .ald-radio-icon-button-wrapper-border,
338
- .ald-radio-icon-button-wrapper-border-primary {
339
- padding: 0 @radio-icon-button-padding-middle - 1;
375
+ .ald-radio-icon-button-wrapper-border-primary,
376
+ .ald-radio-icon-button-wrapper-filter {
377
+ padding: 0 @radio-icon-button-padding-middle;
340
378
 
341
379
  &.ald-radio-label .ald-radio-desc {
342
380
  font-size: 14px;
@@ -358,8 +396,15 @@
358
396
  }
359
397
  }
360
398
 
361
- .ald-radio-icon-button-wrapper-filled {
399
+ .ald-radio-icon-button-wrapper-filled,
400
+ .ald-radio-icon-button-wrapper-filter {
362
401
  padding: 0 @radio-icon-button-padding-small;
402
+
403
+ &.ald-radio-label {
404
+ .ald-radio-desc {
405
+ font-size: 14px;
406
+ }
407
+ }
363
408
  }
364
409
 
365
410
  .ald-radio-button-wrapper-border,
@@ -369,7 +414,7 @@
369
414
 
370
415
  .ald-radio-icon-button-wrapper-border,
371
416
  .ald-radio-icon-button-wrapper-border-primary {
372
- padding: 0 @radio-icon-button-padding-small - 1;
417
+ padding: 0 @radio-icon-button-padding-small;
373
418
 
374
419
  &.ald-radio-label .ald-radio-desc {
375
420
  font-size: 14px;
@@ -396,6 +441,11 @@
396
441
  }
397
442
  }
398
443
 
444
+ .ald-radio-button-wrapper-filter,
445
+ .ald-radio-icon-button-wrapper-filter {
446
+ border-radius: @border-radius-small;
447
+ }
448
+
399
449
  .ald-radio-filled-slider {
400
450
  border-radius: @border-radius-small;
401
451
  }
@@ -410,8 +460,15 @@
410
460
  }
411
461
  }
412
462
 
413
- .ald-radio-icon-button-wrapper-filled {
463
+ .ald-radio-icon-button-wrapper-filled,
464
+ .ald-radio-icon-button-wrapper-filter {
414
465
  padding: 0 @radio-icon-button-padding-large;
466
+
467
+ &.ald-radio-label {
468
+ .ald-radio-desc {
469
+ font-size: 20px;
470
+ }
471
+ }
415
472
  }
416
473
 
417
474
  .ald-radio-button-wrapper-border,
@@ -448,6 +505,11 @@
448
505
  }
449
506
  }
450
507
 
508
+ .ald-radio-button-wrapper-filter,
509
+ .ald-radio-icon-button-wrapper-filter {
510
+ border-radius: @border-radius-large;
511
+ }
512
+
451
513
  .ald-radio-filled-slider {
452
514
  border-radius: @border-radius-large;
453
515
  }
@@ -6,7 +6,7 @@
6
6
  */
7
7
  &:hover,&.ald-select-open{
8
8
  border-color:@B40;
9
- box-shadow: @shadow-drop;
9
+ // box-shadow: @shadow-drop;
10
10
  }
11
11
 
12
12
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.4.8-beta.10",
3
+ "version": "0.4.8-beta.12",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",