@aloudata/aloudata-design 0.2.0-beta.20 → 0.2.0-beta.21

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.
@@ -44,8 +44,15 @@
44
44
  border-radius: @border-radius-base;
45
45
  text-shadow: @text-shadow;
46
46
 
47
+ &:focus {
48
+ background-color: @B40;
49
+ border-color: @B40;
50
+ box-shadow: none;
51
+ border-radius: @border-radius-base;
52
+ text-shadow: @text-shadow;
53
+ }
54
+
47
55
  &:hover,
48
- &:focus,
49
56
  &:active,
50
57
  &.ant-btn-loading {
51
58
  background-color: @B20;
@@ -57,6 +64,7 @@
57
64
  background-color: @NL90;
58
65
  border-color: transparent;
59
66
  color: @NL80;
67
+ cursor: default;
60
68
 
61
69
  &:hover,
62
70
  &:focus,
@@ -75,13 +83,15 @@
75
83
  text-shadow: @text-shadow;
76
84
  box-shadow: unset;
77
85
 
78
- &:hover {
79
- background-color: @SC20;
80
- border-color: @SC20;
86
+ &:focus {
87
+ background-color: @SC40;
88
+ border-color: @SC40;
81
89
  color: @ND0;
90
+ text-shadow: @text-shadow;
91
+ box-shadow: unset;
82
92
  }
83
93
 
84
- &:focus,
94
+ &:hover,
85
95
  &:active,
86
96
  &.ant-btn-loading {
87
97
  background-color: @SC20;
@@ -93,6 +103,7 @@
93
103
  background-color: @NL90;
94
104
  border-color: transparent;
95
105
  color: @NL80;
106
+ cursor: default;
96
107
 
97
108
  &:hover,
98
109
  &:focus,
@@ -112,8 +123,16 @@
112
123
  border-radius: @border-radius-base;
113
124
  text-shadow: @text-shadow;
114
125
 
126
+ &:focus {
127
+ background-color: @BG100;
128
+ border-color: @NL90;
129
+ color: @NL30;
130
+ box-shadow: none;
131
+ border-radius: @border-radius-base;
132
+ text-shadow: @text-shadow;
133
+ }
134
+
115
135
  &:hover,
116
- &:focus,
117
136
  &:active,
118
137
  &.ant-btn-loading {
119
138
  background-color: @NL97;
@@ -125,6 +144,7 @@
125
144
  background-color: @BG100;
126
145
  border-color: @NL90;
127
146
  color: @NL80;
147
+ cursor: default;
128
148
 
129
149
  &:hover,
130
150
  &:focus,
@@ -144,8 +164,16 @@
144
164
  border-radius: @border-radius-base;
145
165
  text-shadow: @text-shadow;
146
166
 
167
+ &:focus {
168
+ background-color: @BG100;
169
+ border-color: @BG100;
170
+ color: @NL30;
171
+ box-shadow: none;
172
+ border-radius: @border-radius-base;
173
+ text-shadow: @text-shadow;
174
+ }
175
+
147
176
  &:hover,
148
- &:focus,
149
177
  &:active,
150
178
  &.ant-btn-loading {
151
179
  background-color: @NL97;
@@ -157,6 +185,7 @@
157
185
  background-color: transparent;
158
186
  border-color: transparent;
159
187
  color: @NL80;
188
+ cursor: default;
160
189
 
161
190
  &:hover,
162
191
  &:focus,
@@ -177,8 +206,17 @@
177
206
  border-radius: @border-radius-base;
178
207
  text-shadow: @text-shadow;
179
208
 
209
+ &:focus {
210
+ background-color: @BG100;
211
+ border-color: @BG100;
212
+ color: @B40;
213
+ font-weight: 400;
214
+ box-shadow: none;
215
+ border-radius: @border-radius-base;
216
+ text-shadow: @text-shadow;
217
+ }
218
+
180
219
  &:hover,
181
- &:focus,
182
220
  &:active,
183
221
  &.ant-btn-loading {
184
222
  background-color: @BG100;
@@ -190,6 +228,7 @@
190
228
  background-color: transparent;
191
229
  border-color: transparent;
192
230
  color: @NL80;
231
+ cursor: default;
193
232
 
194
233
  &:hover,
195
234
  &:focus,
@@ -1,5 +1,6 @@
1
1
  import React, { ReactNode } from 'react';
2
- import type { InputProps, InputRef } from 'antd/lib/input/Input';
2
+ import type { InputProps } from 'antd/lib/input/Input';
3
+ import type { InputRef } from 'rc-input';
3
4
  interface IShowCountProps {
4
5
  formatter: (args: {
5
6
  count: number;
@@ -26,6 +26,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
26
26
  };
27
27
 
28
28
  return /*#__PURE__*/React.createElement(AntdInput, _objectSpread(_objectSpread({}, rest), {}, {
29
+ // @ts-ignore
29
30
  ref: ref,
30
31
  size: getInputSize(size),
31
32
  bordered: true,
@@ -88,9 +88,10 @@
88
88
  height: 22px;
89
89
  }
90
90
  }
91
- }
92
- .@{ald-iconfont-css-prefix} {
93
- &.@{ald-iconfont-css-prefix}-close-circle, &.ant-clear-icon {
94
- .ald-iconfont('\e616');
91
+
92
+ .ant-input-suffix {
93
+ .anticon-close-circle.ant-input-clear-icon {
94
+ .ald-iconfont('\e616');
95
+ }
95
96
  }
96
97
  }
@@ -113,7 +113,19 @@ export var Select = function Select(props, ref) {
113
113
  activeIndex = _useState10[0],
114
114
  setActiveIndex = _useState10[1];
115
115
 
116
- var _useState11 = useState([]),
116
+ var initOptionChecked = function initOptionChecked() {
117
+ if (Array.isArray(value)) {
118
+ return value;
119
+ }
120
+
121
+ if (value === null) {
122
+ return [];
123
+ }
124
+
125
+ return [value];
126
+ };
127
+
128
+ var _useState11 = useState(initOptionChecked()),
117
129
  _useState12 = _slicedToArray(_useState11, 2),
118
130
  optionChecked = _useState12[0],
119
131
  setOptionChecked = _useState12[1]; // Exhibition value (tempvalue + value);
@@ -93,7 +93,7 @@ var OptionsList = function OptionsList(props, ref) {
93
93
  }, [selected]); // 部分选中
94
94
  // 全部列表选项选中
95
95
 
96
- var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length); // ”全部“选项是否选中
96
+ var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length) || (selected === null || selected === void 0 ? void 0 : selected.length) === ZERO_LENGTH; // ”全部“选项是否选中
97
97
 
98
98
  var allOptionChecked = isAllChecked && Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH; // 点击全选
99
99
 
@@ -175,8 +175,10 @@ var Selector = function Selector(props, ref) {
175
175
  return [].concat(_toConsumableArray(prev), [curr, ',']);
176
176
  }, []);
177
177
 
178
- if (Array.isArray(value) && value.length === filteredOptions.length && !isEmpty(value)) {
179
- return /*#__PURE__*/React.createElement("span", null, "\u5168\u90E8");
178
+ if (Array.isArray(value) && (value.length === filteredOptions.length || isEmpty(value))) {
179
+ return /*#__PURE__*/React.createElement("span", {
180
+ className: "multipleAll"
181
+ }, "\u5168\u90E8");
180
182
  }
181
183
 
182
184
  var renderItem = function renderItem(valueItem) {
@@ -243,7 +245,7 @@ var Selector = function Selector(props, ref) {
243
245
  }, /*#__PURE__*/React.createElement("div", {
244
246
  className: classnames("".concat(prefix, "-values-wrapper")),
245
247
  ref: selectValuesRef
246
- }, multiple ? renderMultipleValue() : renderSingleValue(), renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
248
+ }, multiple ? renderMultipleValue() : renderSingleValue(), !multiple && renderPlaceHolder())), /*#__PURE__*/React.createElement("div", {
247
249
  "aria-hidden": "true",
248
250
  className: classnames("".concat(prefix, "-arrow"), _defineProperty({}, "".concat(prefix, "-arrow-focused"), visible)),
249
251
  onClick: showClose ? onAllClearClick : undefined
@@ -293,6 +293,7 @@
293
293
 
294
294
  &-values-wrapper {
295
295
  line-height: 26px;
296
+ font-size: 12px;
296
297
  }
297
298
 
298
299
  &-selector-label {
@@ -472,7 +473,7 @@
472
473
  border-color: @NL90;
473
474
  // background-color: @BG100;
474
475
  border-radius: 4px;
475
-
476
+ box-shadow: none;
476
477
  // &::after {
477
478
  // // border-color: @B40;
478
479
  // }
@@ -44,8 +44,15 @@
44
44
  border-radius: @border-radius-base;
45
45
  text-shadow: @text-shadow;
46
46
 
47
+ &:focus {
48
+ background-color: @B40;
49
+ border-color: @B40;
50
+ box-shadow: none;
51
+ border-radius: @border-radius-base;
52
+ text-shadow: @text-shadow;
53
+ }
54
+
47
55
  &:hover,
48
- &:focus,
49
56
  &:active,
50
57
  &.ant-btn-loading {
51
58
  background-color: @B20;
@@ -57,6 +64,7 @@
57
64
  background-color: @NL90;
58
65
  border-color: transparent;
59
66
  color: @NL80;
67
+ cursor: default;
60
68
 
61
69
  &:hover,
62
70
  &:focus,
@@ -75,13 +83,15 @@
75
83
  text-shadow: @text-shadow;
76
84
  box-shadow: unset;
77
85
 
78
- &:hover {
79
- background-color: @SC20;
80
- border-color: @SC20;
86
+ &:focus {
87
+ background-color: @SC40;
88
+ border-color: @SC40;
81
89
  color: @ND0;
90
+ text-shadow: @text-shadow;
91
+ box-shadow: unset;
82
92
  }
83
93
 
84
- &:focus,
94
+ &:hover,
85
95
  &:active,
86
96
  &.ant-btn-loading {
87
97
  background-color: @SC20;
@@ -93,6 +103,7 @@
93
103
  background-color: @NL90;
94
104
  border-color: transparent;
95
105
  color: @NL80;
106
+ cursor: default;
96
107
 
97
108
  &:hover,
98
109
  &:focus,
@@ -112,8 +123,16 @@
112
123
  border-radius: @border-radius-base;
113
124
  text-shadow: @text-shadow;
114
125
 
126
+ &:focus {
127
+ background-color: @BG100;
128
+ border-color: @NL90;
129
+ color: @NL30;
130
+ box-shadow: none;
131
+ border-radius: @border-radius-base;
132
+ text-shadow: @text-shadow;
133
+ }
134
+
115
135
  &:hover,
116
- &:focus,
117
136
  &:active,
118
137
  &.ant-btn-loading {
119
138
  background-color: @NL97;
@@ -125,6 +144,7 @@
125
144
  background-color: @BG100;
126
145
  border-color: @NL90;
127
146
  color: @NL80;
147
+ cursor: default;
128
148
 
129
149
  &:hover,
130
150
  &:focus,
@@ -144,8 +164,16 @@
144
164
  border-radius: @border-radius-base;
145
165
  text-shadow: @text-shadow;
146
166
 
167
+ &:focus {
168
+ background-color: @BG100;
169
+ border-color: @BG100;
170
+ color: @NL30;
171
+ box-shadow: none;
172
+ border-radius: @border-radius-base;
173
+ text-shadow: @text-shadow;
174
+ }
175
+
147
176
  &:hover,
148
- &:focus,
149
177
  &:active,
150
178
  &.ant-btn-loading {
151
179
  background-color: @NL97;
@@ -157,6 +185,7 @@
157
185
  background-color: transparent;
158
186
  border-color: transparent;
159
187
  color: @NL80;
188
+ cursor: default;
160
189
 
161
190
  &:hover,
162
191
  &:focus,
@@ -177,8 +206,17 @@
177
206
  border-radius: @border-radius-base;
178
207
  text-shadow: @text-shadow;
179
208
 
209
+ &:focus {
210
+ background-color: @BG100;
211
+ border-color: @BG100;
212
+ color: @B40;
213
+ font-weight: 400;
214
+ box-shadow: none;
215
+ border-radius: @border-radius-base;
216
+ text-shadow: @text-shadow;
217
+ }
218
+
180
219
  &:hover,
181
- &:focus,
182
220
  &:active,
183
221
  &.ant-btn-loading {
184
222
  background-color: @BG100;
@@ -190,6 +228,7 @@
190
228
  background-color: transparent;
191
229
  border-color: transparent;
192
230
  color: @NL80;
231
+ cursor: default;
193
232
 
194
233
  &:hover,
195
234
  &:focus,
@@ -1,5 +1,6 @@
1
1
  import React, { ReactNode } from 'react';
2
- import type { InputProps, InputRef } from 'antd/lib/input/Input';
2
+ import type { InputProps } from 'antd/lib/input/Input';
3
+ import type { InputRef } from 'rc-input';
3
4
  interface IShowCountProps {
4
5
  formatter: (args: {
5
6
  count: number;
@@ -37,6 +37,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
37
37
  };
38
38
 
39
39
  return /*#__PURE__*/_react.default.createElement(_Input.default, _objectSpread(_objectSpread({}, rest), {}, {
40
+ // @ts-ignore
40
41
  ref: ref,
41
42
  size: getInputSize(size),
42
43
  bordered: true,
@@ -88,9 +88,10 @@
88
88
  height: 22px;
89
89
  }
90
90
  }
91
- }
92
- .@{ald-iconfont-css-prefix} {
93
- &.@{ald-iconfont-css-prefix}-close-circle, &.ant-clear-icon {
94
- .ald-iconfont('\e616');
91
+
92
+ .ant-input-suffix {
93
+ .anticon-close-circle.ant-input-clear-icon {
94
+ .ald-iconfont('\e616');
95
+ }
95
96
  }
96
97
  }
@@ -139,7 +139,19 @@ var Select = function Select(props, ref) {
139
139
  activeIndex = _useState10[0],
140
140
  setActiveIndex = _useState10[1];
141
141
 
142
- var _useState11 = (0, _react.useState)([]),
142
+ var initOptionChecked = function initOptionChecked() {
143
+ if (Array.isArray(value)) {
144
+ return value;
145
+ }
146
+
147
+ if (value === null) {
148
+ return [];
149
+ }
150
+
151
+ return [value];
152
+ };
153
+
154
+ var _useState11 = (0, _react.useState)(initOptionChecked()),
143
155
  _useState12 = _slicedToArray(_useState11, 2),
144
156
  optionChecked = _useState12[0],
145
157
  setOptionChecked = _useState12[1]; // Exhibition value (tempvalue + value);
@@ -110,7 +110,7 @@ var OptionsList = function OptionsList(props, ref) {
110
110
  }, [selected]); // 部分选中
111
111
  // 全部列表选项选中
112
112
 
113
- var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length); // ”全部“选项是否选中
113
+ var isAllChecked = isChecked && (selected === null || selected === void 0 ? void 0 : selected.length) === (filterflattenOptions === null || filterflattenOptions === void 0 ? void 0 : filterflattenOptions.length) || (selected === null || selected === void 0 ? void 0 : selected.length) === ZERO_LENGTH; // ”全部“选项是否选中
114
114
 
115
115
  var allOptionChecked = isAllChecked && Array.isArray(optionChecked) && optionChecked.length === ZERO_LENGTH; // 点击全选
116
116
 
@@ -197,8 +197,10 @@ var Selector = function Selector(props, ref) {
197
197
  return [].concat(_toConsumableArray(prev), [curr, ',']);
198
198
  }, []);
199
199
 
200
- if (Array.isArray(value) && value.length === filteredOptions.length && !(0, _lodash.isEmpty)(value)) {
201
- return /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8");
200
+ if (Array.isArray(value) && (value.length === filteredOptions.length || (0, _lodash.isEmpty)(value))) {
201
+ return /*#__PURE__*/_react.default.createElement("span", {
202
+ className: "multipleAll"
203
+ }, "\u5168\u90E8");
202
204
  }
203
205
 
204
206
  var renderItem = function renderItem(valueItem) {
@@ -265,7 +267,7 @@ var Selector = function Selector(props, ref) {
265
267
  }, /*#__PURE__*/_react.default.createElement("div", {
266
268
  className: (0, _classnames3.default)("".concat(prefix, "-values-wrapper")),
267
269
  ref: selectValuesRef
268
- }, multiple ? renderMultipleValue() : renderSingleValue(), renderPlaceHolder())), /*#__PURE__*/_react.default.createElement("div", {
270
+ }, multiple ? renderMultipleValue() : renderSingleValue(), !multiple && renderPlaceHolder())), /*#__PURE__*/_react.default.createElement("div", {
269
271
  "aria-hidden": "true",
270
272
  className: (0, _classnames3.default)("".concat(prefix, "-arrow"), _defineProperty({}, "".concat(prefix, "-arrow-focused"), visible)),
271
273
  onClick: showClose ? onAllClearClick : undefined
@@ -293,6 +293,7 @@
293
293
 
294
294
  &-values-wrapper {
295
295
  line-height: 26px;
296
+ font-size: 12px;
296
297
  }
297
298
 
298
299
  &-selector-label {
@@ -472,7 +473,7 @@
472
473
  border-color: @NL90;
473
474
  // background-color: @BG100;
474
475
  border-radius: 4px;
475
-
476
+ box-shadow: none;
476
477
  // &::after {
477
478
  // // border-color: @B40;
478
479
  // }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aloudata/aloudata-design",
3
- "version": "0.2.0-beta.20",
3
+ "version": "0.2.0-beta.21",
4
4
  "scripts": {
5
5
  "start": "dumi dev",
6
6
  "docs:build": "dumi build",
@@ -53,6 +53,7 @@
53
53
  "antd": "^4.18.6",
54
54
  "classnames": "^2.3.1",
55
55
  "lodash": "^4.17.21",
56
+ "rc-input": "^0.0.1-alpha.6",
56
57
  "rc-menu": "^9.3.2",
57
58
  "rc-overflow": "^1.2.3",
58
59
  "rc-resize-observer": "^1.2.0",