@kdcloudjs/kdesign 1.2.1 → 1.3.0
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/CHANGELOG.md +48 -0
- package/dist/kdesign-complete.less +84 -65
- package/dist/kdesign.css +80 -86
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +197 -146
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +8 -8
- package/dist/kdesign.min.js.map +1 -1
- package/es/badge/style/index.css +3 -4
- package/es/badge/style/index.less +3 -4
- package/es/badge/style/token.less +1 -0
- package/es/button/style/index.css +3 -3
- package/es/button/style/token.less +3 -3
- package/es/carousel/displayList.js +8 -4
- package/es/carousel/fadeList.js +9 -5
- package/es/carousel/slideList.js +6 -3
- package/es/carousel/style/index.css +35 -45
- package/es/carousel/style/index.less +50 -42
- package/es/checkbox/checkbox.js +4 -2
- package/es/collapse/panel.js +1 -1
- package/es/config-provider/compDefaultProps.d.ts +1 -0
- package/es/config-provider/compDefaultProps.js +2 -1
- package/es/dropdown/style/index.css +5 -5
- package/es/form/Field.d.ts +2 -1
- package/es/form/Field.js +39 -22
- package/es/form/Form.js +7 -2
- package/es/form/hooks/useForm.js +1 -0
- package/es/form/interface.d.ts +5 -0
- package/es/input-number/inputNumber.d.ts +1 -0
- package/es/input-number/inputNumber.js +3 -2
- package/es/locale/locale.d.ts +1 -0
- package/es/locale/zh-CN.d.ts +1 -0
- package/es/locale/zh-CN.js +2 -1
- package/es/menu/subMenu.js +6 -2
- package/es/popconfirm/style/index.css +5 -5
- package/es/radio/style/index.css +7 -8
- package/es/radio/style/index.less +2 -2
- package/es/select/index.d.ts +2 -2
- package/es/select/interface.d.ts +7 -7
- package/es/select/style/index.css +13 -7
- package/es/select/style/index.less +14 -6
- package/es/select/style/token.less +4 -1
- package/es/style/mixins/index.less +5 -5
- package/es/tabs/tabs.js +5 -1
- package/es/tooltip/style/index.css +8 -8
- package/es/tooltip/style/index.less +2 -2
- package/lib/badge/style/index.css +3 -4
- package/lib/badge/style/index.less +3 -4
- package/lib/badge/style/token.less +1 -0
- package/lib/button/style/index.css +3 -3
- package/lib/button/style/token.less +3 -3
- package/lib/carousel/displayList.js +9 -4
- package/lib/carousel/fadeList.js +10 -5
- package/lib/carousel/slideList.js +6 -3
- package/lib/carousel/style/index.css +35 -45
- package/lib/carousel/style/index.less +50 -42
- package/lib/checkbox/checkbox.js +4 -2
- package/lib/collapse/panel.js +1 -1
- package/lib/config-provider/compDefaultProps.d.ts +1 -0
- package/lib/config-provider/compDefaultProps.js +2 -1
- package/lib/dropdown/style/index.css +5 -5
- package/lib/form/Field.d.ts +2 -1
- package/lib/form/Field.js +42 -24
- package/lib/form/Form.js +7 -2
- package/lib/form/hooks/useForm.js +1 -0
- package/lib/form/interface.d.ts +5 -0
- package/lib/input-number/inputNumber.d.ts +1 -0
- package/lib/input-number/inputNumber.js +3 -2
- package/lib/locale/locale.d.ts +1 -0
- package/lib/locale/zh-CN.d.ts +1 -0
- package/lib/locale/zh-CN.js +2 -1
- package/lib/menu/subMenu.js +6 -2
- package/lib/popconfirm/style/index.css +5 -5
- package/lib/radio/style/index.css +7 -8
- package/lib/radio/style/index.less +2 -2
- package/lib/select/index.d.ts +2 -2
- package/lib/select/interface.d.ts +7 -7
- package/lib/select/style/index.css +13 -7
- package/lib/select/style/index.less +14 -6
- package/lib/select/style/token.less +4 -1
- package/lib/style/mixins/index.less +5 -5
- package/lib/tabs/tabs.js +6 -1
- package/lib/tooltip/style/index.css +8 -8
- package/lib/tooltip/style/index.less +2 -2
- package/package.json +1 -1
package/lib/form/Field.js
CHANGED
|
@@ -13,7 +13,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
13
13
|
});
|
|
14
14
|
exports.default = void 0;
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _extends5 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
17
|
|
|
18
18
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
19
19
|
|
|
@@ -23,8 +23,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
|
|
|
23
23
|
|
|
24
24
|
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
|
|
25
25
|
|
|
26
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
27
|
+
|
|
26
28
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
27
29
|
|
|
30
|
+
var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
|
|
31
|
+
|
|
28
32
|
var _react = _interopRequireWildcard(require("react"));
|
|
29
33
|
|
|
30
34
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
@@ -65,6 +69,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
|
65
69
|
};
|
|
66
70
|
|
|
67
71
|
var DEFAULT_TRIGGER = 'onChange';
|
|
72
|
+
var FormEventValuePropNames = ['value', 'checked'];
|
|
68
73
|
|
|
69
74
|
var generateEventHandler = function generateEventHandler(handler, validateTrigger) {
|
|
70
75
|
var eventHandler = {};
|
|
@@ -85,7 +90,7 @@ var generateEventHandler = function generateEventHandler(handler, validateTrigge
|
|
|
85
90
|
};
|
|
86
91
|
|
|
87
92
|
var Field = function Field(props) {
|
|
88
|
-
var _classnames,
|
|
93
|
+
var _classnames, _context2;
|
|
89
94
|
|
|
90
95
|
(0, _devwarning.default)(! /*#__PURE__*/_react.default.isValidElement(props.children), 'Form.Item', 'Children of Form.Item is not a valid element');
|
|
91
96
|
(0, _devwarning.default)(!props.name, 'Form.Item', 'Form.Item must have a name');
|
|
@@ -107,7 +112,8 @@ var Field = function Field(props) {
|
|
|
107
112
|
getFieldError = fieldContext.getFieldError,
|
|
108
113
|
getInternalHooks = fieldContext.getInternalHooks,
|
|
109
114
|
vertical = fieldContext.vertical,
|
|
110
|
-
getDefaultValue = fieldContext.getDefaultValue
|
|
115
|
+
getDefaultValue = fieldContext.getDefaultValue,
|
|
116
|
+
local = fieldContext.local;
|
|
111
117
|
|
|
112
118
|
var _getInternalHooks = getInternalHooks(_useForm.INTERNAL_HOOK_KEY),
|
|
113
119
|
registerField = _getInternalHooks.registerField,
|
|
@@ -128,7 +134,9 @@ var Field = function Field(props) {
|
|
|
128
134
|
rules = _props$rules === void 0 ? [] : _props$rules,
|
|
129
135
|
wrapperWidth = props.wrapperWidth,
|
|
130
136
|
validateTrigger = props.validateTrigger,
|
|
131
|
-
defaultValue = props.defaultValue
|
|
137
|
+
defaultValue = props.defaultValue,
|
|
138
|
+
_props$valuePropName = props.valuePropName,
|
|
139
|
+
valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName;
|
|
132
140
|
|
|
133
141
|
var onStoreChange = function onStoreChange(stores, _namePathList, source) {
|
|
134
142
|
var prev = stores.prev,
|
|
@@ -162,8 +170,11 @@ var Field = function Field(props) {
|
|
|
162
170
|
if (Array.isArray(rules) && !rules.some(function (rule) {
|
|
163
171
|
return Object.prototype.hasOwnProperty.call(rule, 'required');
|
|
164
172
|
}) && required) {
|
|
173
|
+
var _context;
|
|
174
|
+
|
|
165
175
|
rules.push({
|
|
166
|
-
required: true
|
|
176
|
+
required: true,
|
|
177
|
+
message: (0, _concat.default)(_context = "".concat(local && local.requiredMessage)).call(_context, label)
|
|
167
178
|
});
|
|
168
179
|
}
|
|
169
180
|
|
|
@@ -200,10 +211,22 @@ var Field = function Field(props) {
|
|
|
200
211
|
var value = getFieldValue(name);
|
|
201
212
|
var validateMessage = getFieldError(name);
|
|
202
213
|
|
|
203
|
-
var
|
|
214
|
+
var getInputValueFormProp = function getInputValueFormProp(evt) {
|
|
204
215
|
var _a;
|
|
205
216
|
|
|
206
|
-
var inputValue
|
|
217
|
+
var inputValue;
|
|
218
|
+
|
|
219
|
+
if (Object.prototype.hasOwnProperty.call(evt, 'target') && (0, _includes.default)(FormEventValuePropNames).call(FormEventValuePropNames, valuePropName)) {
|
|
220
|
+
inputValue = (_a = evt.target) === null || _a === void 0 ? void 0 : _a[valuePropName];
|
|
221
|
+
} else {
|
|
222
|
+
inputValue = evt;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
return inputValue;
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
var handleValueChange = _react.default.useCallback(function (evt) {
|
|
229
|
+
var inputValue = getInputValueFormProp(evt);
|
|
207
230
|
dispatch({
|
|
208
231
|
type: 'updateValue',
|
|
209
232
|
namePath: name,
|
|
@@ -218,9 +241,11 @@ var Field = function Field(props) {
|
|
|
218
241
|
});
|
|
219
242
|
}, [name]);
|
|
220
243
|
|
|
221
|
-
var trigger = (0,
|
|
244
|
+
var trigger = (0, _extends5.default)((0, _defineProperty2.default)({}, DEFAULT_TRIGGER, handleValueChange), generateEventHandler(handleValueValidate, validateTrigger));
|
|
222
245
|
|
|
223
246
|
var mergeProps = function mergeProps(fa, ch) {
|
|
247
|
+
var _extends3;
|
|
248
|
+
|
|
224
249
|
if (!ch) {
|
|
225
250
|
return {};
|
|
226
251
|
}
|
|
@@ -231,17 +256,13 @@ var Field = function Field(props) {
|
|
|
231
256
|
|
|
232
257
|
var _ch$props = ch.props,
|
|
233
258
|
chChange = _ch$props.onChange,
|
|
234
|
-
chValue = _ch$props
|
|
259
|
+
chValue = _ch$props[valuePropName],
|
|
235
260
|
chDisabled = _ch$props.disabled,
|
|
236
261
|
chDefaultValue = _ch$props.defaultValue;
|
|
237
262
|
|
|
238
263
|
var onChange = function onChange(evt) {
|
|
239
264
|
if (chValue === undefined) {
|
|
240
|
-
|
|
241
|
-
setFieldValue(evt);
|
|
242
|
-
} else {
|
|
243
|
-
setFieldValue(evt.target.value);
|
|
244
|
-
}
|
|
265
|
+
setFieldValue(getInputValueFormProp(evt));
|
|
245
266
|
}
|
|
246
267
|
|
|
247
268
|
if (typeof faChange === 'function') {
|
|
@@ -264,12 +285,10 @@ var Field = function Field(props) {
|
|
|
264
285
|
forceUpdate();
|
|
265
286
|
}
|
|
266
287
|
|
|
267
|
-
return (0,
|
|
288
|
+
return (0, _extends5.default)((0, _extends5.default)({}, rest), (_extends3 = {
|
|
268
289
|
onChange: onChange,
|
|
269
|
-
defaultValue: defaultValue
|
|
270
|
-
|
|
271
|
-
disabled: chDisabled || faDisabled
|
|
272
|
-
});
|
|
290
|
+
defaultValue: defaultValue
|
|
291
|
+
}, (0, _defineProperty2.default)(_extends3, valuePropName, fieldValue), (0, _defineProperty2.default)(_extends3, "disabled", chDisabled || faDisabled), _extends3));
|
|
273
292
|
};
|
|
274
293
|
|
|
275
294
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -282,11 +301,10 @@ var Field = function Field(props) {
|
|
|
282
301
|
}), /*#__PURE__*/_react.default.createElement(_FieldWrapper.default, {
|
|
283
302
|
width: wrapperWidth,
|
|
284
303
|
validateMessage: validateMessage
|
|
285
|
-
}, (0, _map.default)(
|
|
286
|
-
var keys = mergeProps((0,
|
|
287
|
-
disabled: disabled
|
|
288
|
-
|
|
289
|
-
}, trigger), {
|
|
304
|
+
}, (0, _map.default)(_context2 = (0, _reactChildren.toArray)(children)).call(_context2, function (child, index) {
|
|
305
|
+
var keys = mergeProps((0, _extends5.default)((0, _extends5.default)((0, _defineProperty2.default)({
|
|
306
|
+
disabled: disabled
|
|
307
|
+
}, valuePropName, value), trigger), {
|
|
290
308
|
key: index
|
|
291
309
|
}), child);
|
|
292
310
|
return child ? /*#__PURE__*/_react.default.cloneElement(child, keys) : child;
|
package/lib/form/Form.js
CHANGED
|
@@ -60,9 +60,13 @@ var Form = function Form(props, ref) {
|
|
|
60
60
|
var _useContext = (0, _react.useContext)(_configProvider.ConfigContext),
|
|
61
61
|
getPrefixCls = _useContext.getPrefixCls,
|
|
62
62
|
prefixCls = _useContext.prefixCls,
|
|
63
|
-
userDefaultProps = _useContext.compDefaultProps
|
|
63
|
+
userDefaultProps = _useContext.compDefaultProps,
|
|
64
|
+
globalLocale = _useContext.locale;
|
|
64
65
|
|
|
65
66
|
var formProps = (0, _utils.getCompProps)('Form', userDefaultProps, props);
|
|
67
|
+
var formLang = globalLocale.getCompLangMsg({
|
|
68
|
+
componentName: 'Form'
|
|
69
|
+
});
|
|
66
70
|
|
|
67
71
|
var children = formProps.children,
|
|
68
72
|
defaultValues = formProps.defaultValues,
|
|
@@ -116,9 +120,10 @@ var Form = function Form(props, ref) {
|
|
|
116
120
|
labelAlign: labelAlign,
|
|
117
121
|
labelWidth: labelWidth,
|
|
118
122
|
wrapperWidth: wrapperWidth,
|
|
123
|
+
local: formLang,
|
|
119
124
|
vertical: layout === 'vertical'
|
|
120
125
|
});
|
|
121
|
-
}, [formInstance, labelAlign, labelWidth, wrapperWidth, layout]);
|
|
126
|
+
}, [formInstance, labelAlign, labelWidth, wrapperWidth, layout, formLang]);
|
|
122
127
|
|
|
123
128
|
var handleSubmit = function handleSubmit(evt) {
|
|
124
129
|
evt.preventDefault();
|
package/lib/form/interface.d.ts
CHANGED
|
@@ -25,11 +25,16 @@ export interface FormInstance<Values = any> {
|
|
|
25
25
|
submit: () => void;
|
|
26
26
|
getInternalHooks: (secret: string) => InternalHooks | null;
|
|
27
27
|
}
|
|
28
|
+
export interface InnerLocale {
|
|
29
|
+
locale: string;
|
|
30
|
+
requiredMessage: string;
|
|
31
|
+
}
|
|
28
32
|
export interface InternalFormInstance extends FormInstance {
|
|
29
33
|
labelWidth?: string | number;
|
|
30
34
|
labelAlign?: LabelAlign;
|
|
31
35
|
wrapperWidth?: string | number;
|
|
32
36
|
vertical?: boolean;
|
|
37
|
+
local?: InnerLocale;
|
|
33
38
|
getInternalHooks: (key: string) => InternalHooks | null;
|
|
34
39
|
}
|
|
35
40
|
export declare type Stores = {
|
|
@@ -21,6 +21,7 @@ export interface InputNumberProps extends InputProps {
|
|
|
21
21
|
mustInPrecisionScope?: boolean;
|
|
22
22
|
stepOption?: StepOption;
|
|
23
23
|
stepperrref?: any;
|
|
24
|
+
formatter?: (value: string | undefined) => string;
|
|
24
25
|
}
|
|
25
26
|
declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
|
|
26
27
|
export default InputNumber;
|
|
@@ -84,7 +84,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
84
84
|
maxMark = inputNumberProps.maxMark,
|
|
85
85
|
prefix = inputNumberProps.prefix,
|
|
86
86
|
suffix = inputNumberProps.suffix,
|
|
87
|
-
|
|
87
|
+
formatter = inputNumberProps.formatter,
|
|
88
|
+
others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter"]);
|
|
88
89
|
|
|
89
90
|
var initVal = value === undefined ? defaultValue : value;
|
|
90
91
|
|
|
@@ -364,7 +365,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
|
|
|
364
365
|
});
|
|
365
366
|
return /*#__PURE__*/_react.default.createElement(_input.default, (0, _extends2.default)({}, others, {
|
|
366
367
|
ref: inputNumberRef,
|
|
367
|
-
value: inputValue,
|
|
368
|
+
value: inputValue ? (formatter === null || formatter === void 0 ? void 0 : formatter(inputValue)) || inputValue : inputValue,
|
|
368
369
|
prefix: prefix,
|
|
369
370
|
suffix: suffix,
|
|
370
371
|
onChange: handleChange,
|
package/lib/locale/locale.d.ts
CHANGED
|
@@ -84,6 +84,7 @@ declare class LocaleCache {
|
|
|
84
84
|
'Filter.and': string;
|
|
85
85
|
'Filter.settings': string;
|
|
86
86
|
'Filter.schemeNamePlaceholder': string;
|
|
87
|
+
'Form.requiredMessage': string;
|
|
87
88
|
'DatePicker.placeholder': string;
|
|
88
89
|
'DatePicker.yearPlaceholder': string;
|
|
89
90
|
'DatePicker.quarterPlaceholder': string;
|
package/lib/locale/zh-CN.d.ts
CHANGED
|
@@ -58,6 +58,7 @@ declare const locale: {
|
|
|
58
58
|
'Filter.and': string;
|
|
59
59
|
'Filter.settings': string;
|
|
60
60
|
'Filter.schemeNamePlaceholder': string;
|
|
61
|
+
'Form.requiredMessage': string;
|
|
61
62
|
'DatePicker.placeholder': string;
|
|
62
63
|
'DatePicker.yearPlaceholder': string;
|
|
63
64
|
'DatePicker.quarterPlaceholder': string;
|
package/lib/locale/zh-CN.js
CHANGED
|
@@ -72,7 +72,8 @@ var locale = (0, _extends2.default)((0, _extends2.default)({
|
|
|
72
72
|
'Filter.query': '查询',
|
|
73
73
|
'Filter.and': '并且',
|
|
74
74
|
'Filter.settings': '设置',
|
|
75
|
-
'Filter.schemeNamePlaceholder': '请输入方案名称'
|
|
75
|
+
'Filter.schemeNamePlaceholder': '请输入方案名称',
|
|
76
|
+
'Form.requiredMessage': '请输入您的'
|
|
76
77
|
});
|
|
77
78
|
var _default = locale;
|
|
78
79
|
exports.default = _default;
|
package/lib/menu/subMenu.js
CHANGED
|
@@ -241,6 +241,11 @@ var SubMenu = function SubMenu(props) {
|
|
|
241
241
|
|
|
242
242
|
// 保存路径
|
|
243
243
|
info.keyPath = (0, _concat.default)(_context = info.keyPath).call(_context, [keyValue]);
|
|
244
|
+
|
|
245
|
+
if (triggerSubMenuAction === 'click' && mode === 'vertical') {
|
|
246
|
+
closeSubMenu();
|
|
247
|
+
}
|
|
248
|
+
|
|
244
249
|
restProps.handleOnClick && restProps.handleOnClick(info);
|
|
245
250
|
}; // 子菜单展开收缩
|
|
246
251
|
|
|
@@ -390,8 +395,7 @@ var SubMenu = function SubMenu(props) {
|
|
|
390
395
|
return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
|
|
391
396
|
ref: subMenuRef,
|
|
392
397
|
className: (0, _classnames.default)(prefixCls, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-hover"), !disabled && isVisible), _classNames2)),
|
|
393
|
-
key: keyValue
|
|
394
|
-
title: title
|
|
398
|
+
key: keyValue
|
|
395
399
|
}, mouseEvent, {
|
|
396
400
|
style: style
|
|
397
401
|
}), /*#__PURE__*/React.createElement("div", {
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
.kd-popconfirm.arrow::before {
|
|
143
143
|
position: absolute;
|
|
144
144
|
z-index: -2;
|
|
145
|
-
background:
|
|
145
|
+
background: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
|
|
146
146
|
border-style: solid;
|
|
147
147
|
border-width: var(--arrowSize);
|
|
148
148
|
-webkit-transform: rotate(45deg);
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
top: var(--arrowSpill);
|
|
168
168
|
-webkit-box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
|
|
169
169
|
box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
|
|
170
|
-
border-color: var(--kd-g-color-
|
|
170
|
+
border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
|
|
171
171
|
}
|
|
172
172
|
.kd-popconfirm.arrow.topLeft::before,
|
|
173
173
|
.kd-popconfirm.arrow.top::before,
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
bottom: var(--arrowSpill);
|
|
177
177
|
-webkit-box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
|
|
178
178
|
box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
|
|
179
|
-
border-color: transparent var(--kd-g-color-
|
|
179
|
+
border-color: transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent;
|
|
180
180
|
}
|
|
181
181
|
.kd-popconfirm.arrow.leftTop::before,
|
|
182
182
|
.kd-popconfirm.arrow.left::before,
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
right: var(--arrowSpill);
|
|
186
186
|
-webkit-box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
|
|
187
187
|
box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
|
|
188
|
-
border-color: var(--kd-g-color-
|
|
188
|
+
border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
|
|
189
189
|
}
|
|
190
190
|
.kd-popconfirm.arrow.rightTop::before,
|
|
191
191
|
.kd-popconfirm.arrow.right::before,
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
left: var(--arrowSpill);
|
|
195
195
|
-webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
|
|
196
196
|
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
|
|
197
|
-
border-color: transparent transparent var(--kd-g-color-
|
|
197
|
+
border-color: transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
|
|
198
198
|
}
|
|
199
199
|
.kd-popconfirm-content {
|
|
200
200
|
-webkit-box-sizing: border-box;
|
|
@@ -113,13 +113,12 @@
|
|
|
113
113
|
list-style: none;
|
|
114
114
|
-webkit-font-feature-settings: 'tnum';
|
|
115
115
|
font-feature-settings: 'tnum';
|
|
116
|
-
overflow: hidden;
|
|
117
|
-
text-overflow: ellipsis;
|
|
118
116
|
position: relative;
|
|
119
117
|
display: inline-block;
|
|
120
118
|
padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
|
|
121
119
|
margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
|
|
122
120
|
white-space: nowrap;
|
|
121
|
+
text-overflow: ellipsis;
|
|
123
122
|
cursor: pointer;
|
|
124
123
|
vertical-align: middle;
|
|
125
124
|
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
|
|
@@ -179,8 +178,8 @@
|
|
|
179
178
|
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
180
179
|
}
|
|
181
180
|
.kd-radio-checked:focus-within::before {
|
|
182
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
183
|
-
box-shadow: 0 0 0 3px rgba(
|
|
181
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
182
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
184
183
|
}
|
|
185
184
|
.kd-radio-checked::after {
|
|
186
185
|
position: absolute;
|
|
@@ -293,8 +292,8 @@
|
|
|
293
292
|
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
294
293
|
}
|
|
295
294
|
.kd-radio-square-checked:focus-within {
|
|
296
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
297
|
-
box-shadow: 0 0 0 3px rgba(
|
|
295
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
296
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
298
297
|
}
|
|
299
298
|
.kd-radio-square-checked::after {
|
|
300
299
|
position: absolute;
|
|
@@ -402,8 +401,8 @@
|
|
|
402
401
|
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
|
|
403
402
|
}
|
|
404
403
|
.kd-radio-button-checked:focus-within {
|
|
405
|
-
-webkit-box-shadow: 0 0 0 3px rgba(
|
|
406
|
-
box-shadow: 0 0 0 3px rgba(
|
|
404
|
+
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
405
|
+
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
|
|
407
406
|
}
|
|
408
407
|
.kd-radio-button-checked:hover {
|
|
409
408
|
color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
|
|
@@ -5,12 +5,11 @@
|
|
|
5
5
|
@radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
|
|
6
6
|
@radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
|
|
7
7
|
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
|
|
8
|
-
@radio-focus-shadow: 0 0 0 3px rgba(
|
|
8
|
+
@radio-focus-shadow: 0 0 0 3px rgba(85, 130, 243, 10%);
|
|
9
9
|
|
|
10
10
|
// 默认类型(单选项)
|
|
11
11
|
.@{radio-prefix-cls} {
|
|
12
12
|
.reset-component();
|
|
13
|
-
.ellipsis();
|
|
14
13
|
|
|
15
14
|
// 默认状态
|
|
16
15
|
position: relative;
|
|
@@ -18,6 +17,7 @@
|
|
|
18
17
|
padding-left: @radio-circle-size;
|
|
19
18
|
margin-right: @radio-margin-right;
|
|
20
19
|
white-space: nowrap;
|
|
20
|
+
text-overflow: ellipsis;
|
|
21
21
|
cursor: pointer;
|
|
22
22
|
vertical-align: middle;
|
|
23
23
|
color: @radio-font-color;
|
package/lib/select/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ISelectProps } from './interface';
|
|
2
|
+
import { ISelectProps, SelectValue } from './interface';
|
|
3
3
|
import Option from './option';
|
|
4
|
-
interface CompoundedComponent extends React.ForwardRefExoticComponent<ISelectProps & React.RefAttributes<HTMLElement>> {
|
|
4
|
+
interface CompoundedComponent extends React.ForwardRefExoticComponent<ISelectProps<SelectValue> & React.RefAttributes<HTMLElement>> {
|
|
5
5
|
Option: typeof Option;
|
|
6
6
|
}
|
|
7
7
|
declare const Select: CompoundedComponent;
|
|
@@ -43,17 +43,17 @@ export interface OptionsType {
|
|
|
43
43
|
value?: string;
|
|
44
44
|
label?: React.ReactNode;
|
|
45
45
|
}
|
|
46
|
-
export declare type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[] | null;
|
|
47
|
-
export interface ISelectProps<T
|
|
46
|
+
export declare type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[] | null | undefined;
|
|
47
|
+
export interface ISelectProps<T extends SelectValue> extends AbstractSelectProps {
|
|
48
48
|
value?: T;
|
|
49
49
|
defaultValue?: T;
|
|
50
50
|
mode?: Mode;
|
|
51
51
|
autoFocus?: boolean;
|
|
52
|
-
onChange?: (value
|
|
53
|
-
onSelect?: (value
|
|
54
|
-
onBlur?: (value
|
|
52
|
+
onChange?: (value?: T, option?: React.ReactElement<any> | React.ReactElement<any>[]) => void;
|
|
53
|
+
onSelect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;
|
|
54
|
+
onBlur?: (value?: T) => void;
|
|
55
55
|
onFocus?: () => void;
|
|
56
|
-
onSearch?: () => void;
|
|
56
|
+
onSearch?: (value?: string) => void;
|
|
57
57
|
onClear?: () => void;
|
|
58
|
-
onDropdownVisibleChange?: (value
|
|
58
|
+
onDropdownVisibleChange?: (value?: T) => void;
|
|
59
59
|
}
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
|
|
275
275
|
}
|
|
276
276
|
.kd-select-icon-arrow-focus {
|
|
277
|
-
color: #
|
|
277
|
+
color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
|
|
278
278
|
}
|
|
279
279
|
.kd-select-icon-clear {
|
|
280
280
|
opacity: 0;
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
|
|
309
309
|
}
|
|
310
310
|
.kd-select-placeholder {
|
|
311
|
-
color: var(--kd-c-select-placeholder-color-text,
|
|
311
|
+
color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
|
|
312
312
|
overflow: hidden;
|
|
313
313
|
white-space: nowrap;
|
|
314
314
|
text-overflow: ellipsis;
|
|
@@ -471,12 +471,15 @@
|
|
|
471
471
|
border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
|
|
472
472
|
}
|
|
473
473
|
.kd-select-single-disabled {
|
|
474
|
-
background-color: #f5f5f5;
|
|
475
|
-
color: #
|
|
474
|
+
background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
|
|
475
|
+
color: var(--kd-c-select-color-text-disabled, #212121);
|
|
476
476
|
}
|
|
477
477
|
.kd-select-single-disabled:hover {
|
|
478
478
|
cursor: not-allowed;
|
|
479
479
|
}
|
|
480
|
+
.kd-select-single-disabled .kd-select-suffix {
|
|
481
|
+
color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
|
|
482
|
+
}
|
|
480
483
|
.kd-select-single:hover .kd-select-icon-clear {
|
|
481
484
|
opacity: 1;
|
|
482
485
|
}
|
|
@@ -487,7 +490,7 @@
|
|
|
487
490
|
text-overflow: ellipsis;
|
|
488
491
|
}
|
|
489
492
|
.kd-select-single-disabled-text {
|
|
490
|
-
color: #
|
|
493
|
+
color: var(--kd-c-select-color-text-disabled, #212121);
|
|
491
494
|
}
|
|
492
495
|
.kd-select .kd-select-selection-item {
|
|
493
496
|
display: -webkit-inline-box;
|
|
@@ -560,8 +563,11 @@
|
|
|
560
563
|
}
|
|
561
564
|
.kd-select-multiple-disabled {
|
|
562
565
|
cursor: not-allowed;
|
|
563
|
-
background-color: #f5f5f5;
|
|
564
|
-
color: #
|
|
566
|
+
background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
|
|
567
|
+
color: var(--kd-c-select-color-text-disabled, #212121);
|
|
568
|
+
}
|
|
569
|
+
.kd-select-multiple-disabled .kd-select-suffix {
|
|
570
|
+
color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
|
|
565
571
|
}
|
|
566
572
|
.kd-select-multiple:hover .kd-select-icon-clear {
|
|
567
573
|
opacity: 1;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
&-focus {
|
|
43
|
-
color:
|
|
43
|
+
color: @select-g-color-border-foucs;
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -220,11 +220,15 @@
|
|
|
220
220
|
.focusColor();
|
|
221
221
|
}
|
|
222
222
|
&-disabled {
|
|
223
|
-
background-color: @
|
|
224
|
-
color: @
|
|
223
|
+
background-color: @select-color-background-disabled;
|
|
224
|
+
color: @select-color-text-disabled;
|
|
225
225
|
&:hover {
|
|
226
226
|
cursor: not-allowed;
|
|
227
227
|
}
|
|
228
|
+
|
|
229
|
+
.@{select-prefix-cls}-suffix {
|
|
230
|
+
color: @select-arrow-icon-color-text-disabled;
|
|
231
|
+
}
|
|
228
232
|
}
|
|
229
233
|
&:hover .@{select-prefix-cls}-icon-clear {
|
|
230
234
|
opacity: 1;
|
|
@@ -234,7 +238,7 @@
|
|
|
234
238
|
.over();
|
|
235
239
|
}
|
|
236
240
|
&-disabled-text {
|
|
237
|
-
color: @
|
|
241
|
+
color: @select-color-text-disabled;
|
|
238
242
|
}
|
|
239
243
|
}
|
|
240
244
|
|
|
@@ -319,8 +323,12 @@
|
|
|
319
323
|
&-multiple {
|
|
320
324
|
&-disabled {
|
|
321
325
|
cursor: not-allowed;
|
|
322
|
-
background-color: @
|
|
323
|
-
color: @
|
|
326
|
+
background-color: @select-color-background-disabled;
|
|
327
|
+
color: @select-color-text-disabled;
|
|
328
|
+
|
|
329
|
+
.@{select-prefix-cls}-suffix {
|
|
330
|
+
color: @select-arrow-icon-color-text-disabled;
|
|
331
|
+
}
|
|
324
332
|
}
|
|
325
333
|
&:hover .@{select-prefix-cls}-icon-clear {
|
|
326
334
|
opacity: 1;
|
|
@@ -12,11 +12,14 @@
|
|
|
12
12
|
@select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
|
|
13
13
|
@select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
|
|
14
14
|
@select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
|
|
15
|
-
@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text',
|
|
15
|
+
@select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
|
|
16
16
|
@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
|
|
17
17
|
@select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
|
|
18
18
|
@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
|
|
19
19
|
@select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
|
|
20
|
+
@select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
|
|
21
|
+
@select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', #212121);
|
|
22
|
+
@select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
|
|
20
23
|
|
|
21
24
|
// font
|
|
22
25
|
@select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
&::before {
|
|
26
26
|
position: absolute;
|
|
27
27
|
z-index: -2;
|
|
28
|
-
background:
|
|
28
|
+
background: @popperBg;
|
|
29
29
|
border-style: solid;
|
|
30
30
|
border-width: var(--arrowSize);
|
|
31
31
|
transform: rotate(45deg);
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
left: var(--arrowLeft);
|
|
52
52
|
top: var(--arrowSpill);
|
|
53
53
|
box-shadow: -2px -2px calc(@blur - 1px) rgba(0, 0, 0, 0.1);
|
|
54
|
-
border-color: @
|
|
54
|
+
border-color: @popperBg transparent transparent @popperBg;
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
left: var(--arrowLeft);
|
|
63
63
|
bottom: var(--arrowSpill);
|
|
64
64
|
box-shadow: 3px 3px calc(@blur + 1px) rgba(0, 0, 0, 0.15);
|
|
65
|
-
border-color: transparent @
|
|
65
|
+
border-color: transparent @popperBg @popperBg transparent;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
top: var(--arrowTop);
|
|
74
74
|
right: var(--arrowSpill);
|
|
75
75
|
box-shadow: 3px 0 @blur rgba(0, 0, 0, 0.12), 0 -2px @blur rgba(204, 149, 149, 0.12);
|
|
76
|
-
border-color: @
|
|
76
|
+
border-color: @popperBg @popperBg transparent transparent;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
top: var(--arrowTop);
|
|
85
85
|
left: var(--arrowSpill);
|
|
86
86
|
box-shadow: 0 3px @blur rgba(0, 0, 0, 0.1), -2px 0 @blur rgba(0, 0, 0, 0.1);
|
|
87
|
-
border-color: transparent transparent @
|
|
87
|
+
border-color: transparent transparent @popperBg @popperBg;
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
}
|
package/lib/tabs/tabs.js
CHANGED
|
@@ -178,7 +178,7 @@ var Tabs = function Tabs(props) {
|
|
|
178
178
|
});
|
|
179
179
|
|
|
180
180
|
if (index !== -1) {
|
|
181
|
-
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index);
|
|
181
|
+
(_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index, true);
|
|
182
182
|
}
|
|
183
183
|
}, [curActiveKey, carouselRef, carouselData]);
|
|
184
184
|
(0, _react.useEffect)(function () {
|
|
@@ -464,6 +464,11 @@ var Tabs = function Tabs(props) {
|
|
|
464
464
|
|
|
465
465
|
carouselData.push(item);
|
|
466
466
|
});
|
|
467
|
+
|
|
468
|
+
if (effect !== 'none') {
|
|
469
|
+
console.log('effect', effect);
|
|
470
|
+
}
|
|
471
|
+
|
|
467
472
|
return /*#__PURE__*/_react.default.createElement(_carousel.default, {
|
|
468
473
|
ref: carouselRef,
|
|
469
474
|
dots: false,
|