@douyinfe/semi-foundation 2.4.1 → 2.6.0-beta.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/button/button.scss +11 -0
- package/button/variables.scss +4 -0
- package/cascader/cascader.scss +3 -2
- package/cascader/foundation.ts +19 -0
- package/cascader/variables.scss +6 -3
- package/datePicker/foundation.ts +16 -4
- package/datePicker/inputFoundation.ts +0 -1
- package/datePicker/monthFoundation.ts +1 -0
- package/form/form.scss +7 -1
- package/form/foundation.ts +40 -36
- package/form/interface.ts +1 -1
- package/input/input.scss +2 -1
- package/lib/cjs/autoComplete/constants.d.ts +1 -1
- package/lib/cjs/button/button.css +9 -0
- package/lib/cjs/button/button.scss +11 -0
- package/lib/cjs/button/variables.scss +4 -0
- package/lib/cjs/cascader/cascader.css +2 -1
- package/lib/cjs/cascader/cascader.scss +3 -2
- package/lib/cjs/cascader/foundation.d.ts +19 -0
- package/lib/cjs/cascader/foundation.js +22 -0
- package/lib/cjs/cascader/variables.scss +6 -3
- package/lib/cjs/datePicker/foundation.d.ts +9 -4
- package/lib/cjs/datePicker/foundation.js +18 -0
- package/lib/cjs/datePicker/inputFoundation.d.ts +0 -1
- package/lib/cjs/datePicker/monthFoundation.d.ts +1 -0
- package/lib/cjs/dropdown/constants.d.ts +1 -1
- package/lib/cjs/form/form.css +4 -0
- package/lib/cjs/form/form.scss +7 -1
- package/lib/cjs/form/foundation.d.ts +6 -6
- package/lib/cjs/form/foundation.js +51 -52
- package/lib/cjs/form/interface.d.ts +1 -1
- package/lib/cjs/input/input.css +1 -0
- package/lib/cjs/input/input.scss +2 -1
- package/lib/cjs/select/constants.d.ts +1 -1
- package/lib/cjs/select/foundation.d.ts +1 -1
- package/lib/cjs/select/foundation.js +2 -1
- package/lib/cjs/select/optionFoundation.d.ts +1 -1
- package/lib/cjs/select/optionFoundation.js +3 -3
- package/lib/cjs/slider/foundation.js +2 -2
- package/lib/cjs/table/foundation.d.ts +2 -0
- package/lib/cjs/table/foundation.js +16 -4
- package/lib/cjs/table/table.css +1 -2
- package/lib/cjs/table/table.scss +4 -5
- package/lib/cjs/table/utils.js +4 -1
- package/lib/cjs/table/variables.scss +1 -0
- package/lib/cjs/tooltip/constants.d.ts +1 -1
- package/lib/cjs/tooltip/constants.js +1 -1
- package/lib/cjs/tooltip/foundation.js +65 -4
- package/lib/cjs/tree/foundation.d.ts +4 -1
- package/lib/cjs/tree/foundation.js +69 -20
- package/lib/cjs/treeSelect/foundation.d.ts +3 -3
- package/lib/cjs/treeSelect/foundation.js +103 -35
- package/lib/cjs/upload/upload.css +49 -27
- package/lib/cjs/upload/upload.scss +66 -41
- package/lib/cjs/upload/variables.scss +3 -1
- package/lib/es/autoComplete/constants.d.ts +1 -1
- package/lib/es/button/button.css +9 -0
- package/lib/es/button/button.scss +11 -0
- package/lib/es/button/variables.scss +4 -0
- package/lib/es/cascader/cascader.css +2 -1
- package/lib/es/cascader/cascader.scss +3 -2
- package/lib/es/cascader/foundation.d.ts +19 -0
- package/lib/es/cascader/foundation.js +22 -1
- package/lib/es/cascader/variables.scss +6 -3
- package/lib/es/datePicker/foundation.d.ts +9 -4
- package/lib/es/datePicker/foundation.js +18 -0
- package/lib/es/datePicker/inputFoundation.d.ts +0 -1
- package/lib/es/datePicker/monthFoundation.d.ts +1 -0
- package/lib/es/dropdown/constants.d.ts +1 -1
- package/lib/es/form/form.css +4 -0
- package/lib/es/form/form.scss +7 -1
- package/lib/es/form/foundation.d.ts +6 -6
- package/lib/es/form/foundation.js +51 -52
- package/lib/es/form/interface.d.ts +1 -1
- package/lib/es/input/input.css +1 -0
- package/lib/es/input/input.scss +2 -1
- package/lib/es/select/constants.d.ts +1 -1
- package/lib/es/select/foundation.d.ts +1 -1
- package/lib/es/select/foundation.js +2 -1
- package/lib/es/select/optionFoundation.d.ts +1 -1
- package/lib/es/select/optionFoundation.js +3 -3
- package/lib/es/slider/foundation.js +2 -2
- package/lib/es/table/foundation.d.ts +2 -0
- package/lib/es/table/foundation.js +16 -4
- package/lib/es/table/table.css +1 -2
- package/lib/es/table/table.scss +4 -5
- package/lib/es/table/utils.js +4 -1
- package/lib/es/table/variables.scss +1 -0
- package/lib/es/tooltip/constants.d.ts +1 -1
- package/lib/es/tooltip/constants.js +1 -1
- package/lib/es/tooltip/foundation.js +65 -4
- package/lib/es/tree/foundation.d.ts +4 -1
- package/lib/es/tree/foundation.js +69 -20
- package/lib/es/treeSelect/foundation.d.ts +3 -3
- package/lib/es/treeSelect/foundation.js +102 -35
- package/lib/es/upload/upload.css +49 -27
- package/lib/es/upload/upload.scss +66 -41
- package/lib/es/upload/variables.scss +3 -1
- package/package.json +3 -3
- package/select/foundation.ts +3 -2
- package/select/optionFoundation.ts +3 -3
- package/slider/foundation.ts +2 -2
- package/table/foundation.ts +23 -10
- package/table/table.scss +4 -5
- package/table/utils.ts +3 -1
- package/table/variables.scss +1 -0
- package/tooltip/constants.ts +2 -0
- package/tooltip/foundation.ts +52 -4
- package/tree/foundation.ts +56 -17
- package/treeSelect/foundation.ts +89 -41
- package/upload/upload.scss +66 -41
- package/upload/variables.scss +3 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
$radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
|
|
2
2
|
|
|
3
|
-
$color-cascader_default-border-default: transparent; // 级联选择描边颜色
|
|
3
|
+
$color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
|
|
4
|
+
$color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮
|
|
5
|
+
$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
|
|
4
6
|
$color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
|
|
5
7
|
$color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
|
|
6
|
-
$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
|
|
7
8
|
$color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
|
|
8
9
|
$color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
|
|
9
10
|
$color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
|
|
@@ -43,7 +44,8 @@ $spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内
|
|
|
43
44
|
$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
|
|
44
45
|
$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
|
|
45
46
|
$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
|
|
46
|
-
$spacing-cascader_selection_tag-
|
|
47
|
+
$spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
|
|
48
|
+
$spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
|
|
47
49
|
$spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距
|
|
48
50
|
$spacing-cascader_selection_tagInput-marginLeft: - $spacing-extra-tight; // 级联选择触发器多选搜索时 TagInput 的左外边距
|
|
49
51
|
$spacing-cascader_selection_input-marginLeft: $spacing-extra-tight; // 级联选择触发器多选搜索时输入框的左外边距
|
|
@@ -83,6 +85,7 @@ $width-cascader: 80px; // 级联选择触发器最小宽度
|
|
|
83
85
|
$height-cascader_default: $height-control-default; // 级联选择触发器高度 - 默认
|
|
84
86
|
$height-cascader_small: $height-control-small; // 级联选择触发器高度 - 小尺寸
|
|
85
87
|
$height-cascader_large: $height-control-large; // 级联选择触发器高度 - 大尺寸
|
|
88
|
+
$width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
|
|
86
89
|
$width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
|
|
87
90
|
$width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
|
|
88
91
|
$width-cascader-icon: 16px; // 级联选择图标尺寸
|
|
@@ -135,8 +135,8 @@ export interface DatePickerFoundationState {
|
|
|
135
135
|
panelShow: boolean;
|
|
136
136
|
isRange: boolean;
|
|
137
137
|
inputValue: string;
|
|
138
|
-
value:
|
|
139
|
-
cachedSelectedValue:
|
|
138
|
+
value: Date[];
|
|
139
|
+
cachedSelectedValue: Date[];
|
|
140
140
|
prevTimeZone: string | number;
|
|
141
141
|
motionEnd: boolean;
|
|
142
142
|
rangeInputFocus: 'rangeStart' | 'rangeEnd' | boolean;
|
|
@@ -155,9 +155,9 @@ export interface DatePickerAdapter extends DefaultAdapter<DatePickerFoundationPr
|
|
|
155
155
|
notifyConfirm: DatePickerFoundationProps['onConfirm'];
|
|
156
156
|
notifyOpenChange: DatePickerFoundationProps['onOpenChange'];
|
|
157
157
|
notifyPresetsClick: DatePickerFoundationProps['onPresetClick'];
|
|
158
|
-
updateValue: (value:
|
|
158
|
+
updateValue: (value: Date[]) => void;
|
|
159
159
|
updatePrevTimezone: (prevTimeZone: string | number) => void;
|
|
160
|
-
updateCachedSelectedValue: (cachedSelectedValue:
|
|
160
|
+
updateCachedSelectedValue: (cachedSelectedValue: Date[]) => void;
|
|
161
161
|
updateInputValue: (inputValue: string) => void;
|
|
162
162
|
needConfirm: () => boolean;
|
|
163
163
|
typeIsYearOrMonth: () => boolean;
|
|
@@ -221,6 +221,11 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
|
|
|
221
221
|
* @param {Date[]} dates
|
|
222
222
|
*/
|
|
223
223
|
closePanel(e?: any, inputValue?: string, dates?: Date[]): void;
|
|
224
|
+
/**
|
|
225
|
+
* clear range input focus when open is controlled
|
|
226
|
+
* fixed github 1375
|
|
227
|
+
*/
|
|
228
|
+
clearRangeInputFocus: () => void;
|
|
224
229
|
/**
|
|
225
230
|
* Callback when the content of the input box changes
|
|
226
231
|
* Update the date panel if the changed value is a legal date, otherwise only update the input box
|
|
@@ -76,6 +76,24 @@ var _constants2 = require("../input/constants");
|
|
|
76
76
|
class DatePickerFoundation extends _foundation.default {
|
|
77
77
|
constructor(adapter) {
|
|
78
78
|
super((0, _assign.default)({}, adapter));
|
|
79
|
+
/**
|
|
80
|
+
* clear range input focus when open is controlled
|
|
81
|
+
* fixed github 1375
|
|
82
|
+
*/
|
|
83
|
+
|
|
84
|
+
this.clearRangeInputFocus = () => {
|
|
85
|
+
const {
|
|
86
|
+
type
|
|
87
|
+
} = this._adapter.getProps();
|
|
88
|
+
|
|
89
|
+
const {
|
|
90
|
+
rangeInputFocus
|
|
91
|
+
} = this._adapter.getStates();
|
|
92
|
+
|
|
93
|
+
if (type === 'dateTimeRange' && rangeInputFocus) {
|
|
94
|
+
this._adapter.setRangeInputFocus(false);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
79
97
|
|
|
80
98
|
this.getMergedMotion = motion => {
|
|
81
99
|
const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
|
|
@@ -4,7 +4,7 @@ declare const cssClasses: {
|
|
|
4
4
|
DISABLED: string;
|
|
5
5
|
};
|
|
6
6
|
declare const strings: {
|
|
7
|
-
POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
|
|
7
|
+
POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
|
|
8
8
|
TRIGGER_SET: string[];
|
|
9
9
|
DEFAULT_LEAVE_DELAY: number;
|
|
10
10
|
ITEM_TYPE: string[];
|
package/lib/cjs/form/form.css
CHANGED
|
@@ -111,6 +111,10 @@
|
|
|
111
111
|
padding-top: 6px;
|
|
112
112
|
padding-bottom: 6px;
|
|
113
113
|
}
|
|
114
|
+
.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
|
|
115
|
+
padding-top: 0;
|
|
116
|
+
padding-bottom: 0;
|
|
117
|
+
}
|
|
114
118
|
.semi-form-field[x-label-pos=left] .semi-switch,
|
|
115
119
|
.semi-form-field[x-label-pos=left] .semi-rating {
|
|
116
120
|
vertical-align: middle;
|
package/lib/cjs/form/form.scss
CHANGED
|
@@ -8,6 +8,8 @@ $col: #{$form}-col;
|
|
|
8
8
|
|
|
9
9
|
$checkboxGroup: #{$prefix}-checkboxGroup;
|
|
10
10
|
$radioGroup: #{$prefix}-radioGroup;
|
|
11
|
+
$buttonRadioGroup: #{$prefix}-radioGroup-buttonRadio;
|
|
12
|
+
|
|
11
13
|
$switch: #{$prefix}-switch;
|
|
12
14
|
$rating: #{$prefix}-rating;
|
|
13
15
|
|
|
@@ -154,7 +156,6 @@ $rating: #{$prefix}-rating;
|
|
|
154
156
|
padding-top: $spacing-form_label_posTop-paddingTop;
|
|
155
157
|
padding-bottom: $spacing-form_label_posTop-paddingBottom;
|
|
156
158
|
}
|
|
157
|
-
|
|
158
159
|
}
|
|
159
160
|
|
|
160
161
|
&[x-label-pos="left"] {
|
|
@@ -173,6 +174,11 @@ $rating: #{$prefix}-rating;
|
|
|
173
174
|
padding-top: $spacing-form_label-paddingTop;
|
|
174
175
|
padding-bottom: $spacing-form_label-paddingTop;
|
|
175
176
|
}
|
|
177
|
+
// no need to adjust height for button radio, already 32px
|
|
178
|
+
.#{$buttonRadioGroup} {
|
|
179
|
+
padding-top: 0;
|
|
180
|
+
padding-bottom: 0;
|
|
181
|
+
}
|
|
176
182
|
.#{$switch},
|
|
177
183
|
.#{$rating} {
|
|
178
184
|
vertical-align: middle;
|
|
@@ -41,11 +41,11 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
|
|
|
41
41
|
setValues(values: any, { isOverride }: {
|
|
42
42
|
isOverride?: boolean;
|
|
43
43
|
}): void;
|
|
44
|
-
updateStateValue(field: string, value: any, opts: CallOpts): void;
|
|
44
|
+
updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void;
|
|
45
45
|
getTouched(field?: string): boolean | Record<string, any> | undefined;
|
|
46
|
-
updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts): void;
|
|
46
|
+
updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void;
|
|
47
47
|
getError(field?: string): any;
|
|
48
|
-
updateStateError(field: string, error: any, opts: CallOpts): void;
|
|
48
|
+
updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void;
|
|
49
49
|
getFieldSetterApi(): {
|
|
50
50
|
setValue: (field: string, value: any, opts: CallOpts) => void;
|
|
51
51
|
setError: (field: string, error: any, opts: CallOpts) => void;
|
|
@@ -54,9 +54,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
|
|
|
54
54
|
getModifyFormStateApi(): {
|
|
55
55
|
register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
|
|
56
56
|
unRegister: (field: string) => void;
|
|
57
|
-
updateStateValue: (field: string, value: any, opts: CallOpts) => void;
|
|
58
|
-
updateStateError: (field: string, error: any, opts: CallOpts) => void;
|
|
59
|
-
updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
|
|
57
|
+
updateStateValue: (field: string, value: any, opts: CallOpts, callback?: () => void) => void;
|
|
58
|
+
updateStateError: (field: string, error: any, opts: CallOpts, callback?: () => void) => void;
|
|
59
|
+
updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void) => void;
|
|
60
60
|
getValue: (field: string, opts?: CallOpts) => any;
|
|
61
61
|
getError: (field?: string) => any;
|
|
62
62
|
getTouched: (field?: string) => boolean | Record<string, any>;
|
|
@@ -514,7 +514,7 @@ class FormFoundation extends _foundation.default {
|
|
|
514
514
|
} // update formState value
|
|
515
515
|
|
|
516
516
|
|
|
517
|
-
updateStateValue(field, value, opts) {
|
|
517
|
+
updateStateValue(field, value, opts, callback) {
|
|
518
518
|
const notNotify = opts && opts.notNotify;
|
|
519
519
|
const notUpdate = opts && opts.notUpdate;
|
|
520
520
|
const fieldAllowEmpty = opts && opts.fieldAllowEmpty;
|
|
@@ -546,7 +546,7 @@ class FormFoundation extends _foundation.default {
|
|
|
546
546
|
}
|
|
547
547
|
|
|
548
548
|
if (!notUpdate) {
|
|
549
|
-
this._adapter.forceUpdate();
|
|
549
|
+
this._adapter.forceUpdate(callback);
|
|
550
550
|
}
|
|
551
551
|
} // get touched from formState
|
|
552
552
|
|
|
@@ -560,7 +560,7 @@ class FormFoundation extends _foundation.default {
|
|
|
560
560
|
} // update formState touched
|
|
561
561
|
|
|
562
562
|
|
|
563
|
-
updateStateTouched(field, isTouched, opts) {
|
|
563
|
+
updateStateTouched(field, isTouched, opts, callback) {
|
|
564
564
|
const notNotify = opts && opts.notNotify;
|
|
565
565
|
const notUpdate = opts && opts.notUpdate;
|
|
566
566
|
ObjectUtil.set(this.data.touched, field, isTouched);
|
|
@@ -570,7 +570,7 @@ class FormFoundation extends _foundation.default {
|
|
|
570
570
|
}
|
|
571
571
|
|
|
572
572
|
if (!notUpdate) {
|
|
573
|
-
this._adapter.forceUpdate();
|
|
573
|
+
this._adapter.forceUpdate(callback);
|
|
574
574
|
}
|
|
575
575
|
} // get error from formState
|
|
576
576
|
|
|
@@ -584,7 +584,7 @@ class FormFoundation extends _foundation.default {
|
|
|
584
584
|
} // update formState error
|
|
585
585
|
|
|
586
586
|
|
|
587
|
-
updateStateError(field, error, opts) {
|
|
587
|
+
updateStateError(field, error, opts, callback) {
|
|
588
588
|
const notNotify = opts && opts.notNotify;
|
|
589
589
|
const notUpdate = opts && opts.notUpdate;
|
|
590
590
|
ObjectUtil.set(this.data.errors, field, error); // The setError caused by centralized validation does not need to trigger notify, otherwise it will be called too frequently, as many times as there are fields
|
|
@@ -595,7 +595,7 @@ class FormFoundation extends _foundation.default {
|
|
|
595
595
|
}
|
|
596
596
|
|
|
597
597
|
if (!notUpdate) {
|
|
598
|
-
this._adapter.forceUpdate();
|
|
598
|
+
this._adapter.forceUpdate(callback);
|
|
599
599
|
}
|
|
600
600
|
} // For internal use in the FormApi Operating Field
|
|
601
601
|
|
|
@@ -614,22 +614,21 @@ class FormFoundation extends _foundation.default {
|
|
|
614
614
|
// At this time, first modify formState directly, then find out the subordinate fields and drive them to update
|
|
615
615
|
// Eg: peoples: [0, 2, 3]. Each value of the peoples array corresponds to an Input Field
|
|
616
616
|
// When the user directly calls formA pi.set Value ('peoples', [2,3])
|
|
617
|
-
this.updateStateValue(field, newValue, opts)
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
}
|
|
631
|
-
} // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
|
|
632
|
-
|
|
617
|
+
this.updateStateValue(field, newValue, opts, () => {
|
|
618
|
+
let nestedFields = this._getNestedField(field);
|
|
619
|
+
|
|
620
|
+
if (nestedFields.size) {
|
|
621
|
+
(0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
|
|
622
|
+
let fieldPath = fieldStaff.field;
|
|
623
|
+
let newFieldVal = ObjectUtil.get((0, _values2.default)(this.data), fieldPath);
|
|
624
|
+
let nestedBatchUpdateOpts = {
|
|
625
|
+
notNotify: true,
|
|
626
|
+
notUpdate: true
|
|
627
|
+
};
|
|
628
|
+
fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
|
|
629
|
+
});
|
|
630
|
+
}
|
|
631
|
+
}); // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
|
|
633
632
|
|
|
634
633
|
if (this.getArrayField(field)) {
|
|
635
634
|
this.updateArrayField(field, {
|
|
@@ -647,21 +646,21 @@ class FormFoundation extends _foundation.default {
|
|
|
647
646
|
if (fieldApi) {
|
|
648
647
|
fieldApi.setError(newError, opts);
|
|
649
648
|
} else {
|
|
650
|
-
this.updateStateError(field, newError, opts)
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
}
|
|
664
|
-
}
|
|
649
|
+
this.updateStateError(field, newError, opts, () => {
|
|
650
|
+
let nestedFields = this._getNestedField(field);
|
|
651
|
+
|
|
652
|
+
if (nestedFields.size) {
|
|
653
|
+
(0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
|
|
654
|
+
let fieldPath = fieldStaff.field;
|
|
655
|
+
let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
|
|
656
|
+
let nestedBatchUpdateOpts = {
|
|
657
|
+
notNotify: true,
|
|
658
|
+
notUpdate: true
|
|
659
|
+
};
|
|
660
|
+
fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
|
|
661
|
+
});
|
|
662
|
+
}
|
|
663
|
+
});
|
|
665
664
|
|
|
666
665
|
if (this.getArrayField(field)) {
|
|
667
666
|
this.updateArrayField(field, {
|
|
@@ -677,21 +676,21 @@ class FormFoundation extends _foundation.default {
|
|
|
677
676
|
if (fieldApi) {
|
|
678
677
|
fieldApi.setTouched(isTouched, opts);
|
|
679
678
|
} else {
|
|
680
|
-
this.updateStateTouched(field, isTouched, opts)
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
}
|
|
694
|
-
}
|
|
679
|
+
this.updateStateTouched(field, isTouched, opts, () => {
|
|
680
|
+
let nestedFields = this._getNestedField(field);
|
|
681
|
+
|
|
682
|
+
if (nestedFields.size) {
|
|
683
|
+
(0, _forEach.default)(nestedFields).call(nestedFields, fieldStaff => {
|
|
684
|
+
let fieldPath = fieldStaff.field;
|
|
685
|
+
let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
|
|
686
|
+
let nestedBatchUpdateOpts = {
|
|
687
|
+
notNotify: true,
|
|
688
|
+
notUpdate: true
|
|
689
|
+
};
|
|
690
|
+
fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
|
|
691
|
+
});
|
|
692
|
+
}
|
|
693
|
+
});
|
|
695
694
|
|
|
696
695
|
if (this.getArrayField(field)) {
|
|
697
696
|
this.updateArrayField(field, {
|
|
@@ -7,7 +7,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
|
|
|
7
7
|
cloneDeep: (val: any, ...rest: any[]) => any;
|
|
8
8
|
notifySubmit: (values: any) => void;
|
|
9
9
|
notifySubmitFail: (errors: Record<string, any>, values: any) => void;
|
|
10
|
-
forceUpdate: () => void;
|
|
10
|
+
forceUpdate: (callback?: () => void) => void;
|
|
11
11
|
notifyChange: (formState: FormState) => void;
|
|
12
12
|
notifyValueChange: (values: any, changedValues: any) => void;
|
|
13
13
|
notifyReset: () => void;
|
package/lib/cjs/input/input.css
CHANGED
|
@@ -278,6 +278,7 @@
|
|
|
278
278
|
cursor: not-allowed;
|
|
279
279
|
color: var(--semi-color-disabled-text);
|
|
280
280
|
background-color: var(--semi-color-disabled-fill);
|
|
281
|
+
-webkit-text-fill-color: var(--semi-color-disabled-text);
|
|
281
282
|
}
|
|
282
283
|
.semi-input-wrapper-disabled:hover {
|
|
283
284
|
background-color: var(--semi-color-disabled-fill);
|
package/lib/cjs/input/input.scss
CHANGED
|
@@ -382,7 +382,8 @@ $module: #{$prefix}-input;
|
|
|
382
382
|
// border: $border-thickness-control $color-input_disabled-border-default solid;
|
|
383
383
|
color: $color-input_disabled-text-default;
|
|
384
384
|
background-color: $color-input_disabled-bg-default;
|
|
385
|
-
|
|
385
|
+
// fix issue 670 in safari
|
|
386
|
+
-webkit-text-fill-color: $color-input_disabled-text-default;
|
|
386
387
|
&:hover {
|
|
387
388
|
background-color: $color-input_disabled-bg-default;
|
|
388
389
|
}
|
|
@@ -5,7 +5,7 @@ declare const cssClasses: {
|
|
|
5
5
|
};
|
|
6
6
|
declare const strings: {
|
|
7
7
|
readonly SIZE_SET: readonly ["small", "large", "default"];
|
|
8
|
-
readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
|
|
8
|
+
readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
|
|
9
9
|
readonly MODE_SELECT: "select";
|
|
10
10
|
readonly MODE_AUTOCOMPLETE: "autoComplete";
|
|
11
11
|
readonly STATUS: readonly ["default", "error", "warning", "success"];
|
|
@@ -36,7 +36,7 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
|
|
|
36
36
|
notifyMouseLeave(event: any): void;
|
|
37
37
|
notifyMouseEnter(event: any): void;
|
|
38
38
|
updateHovering(isHover: boolean): void;
|
|
39
|
-
updateScrollTop(): void;
|
|
39
|
+
updateScrollTop(index?: number): void;
|
|
40
40
|
}
|
|
41
41
|
declare type LabelValue = string | number;
|
|
42
42
|
declare type PropValue = LabelValue | Record<string, any>;
|
|
@@ -944,8 +944,9 @@ class SelectFoundation extends _foundation.default {
|
|
|
944
944
|
} // console.log('new:' + index);
|
|
945
945
|
|
|
946
946
|
|
|
947
|
-
this._adapter.updateFocusIndex(index);
|
|
947
|
+
this._adapter.updateFocusIndex(index);
|
|
948
948
|
|
|
949
|
+
this._adapter.updateScrollTop(index);
|
|
949
950
|
}
|
|
950
951
|
|
|
951
952
|
_handleArrowKeyDown(offset) {
|
|
@@ -26,14 +26,14 @@ class OptionFoundation extends _foundation.default {
|
|
|
26
26
|
destroy() {}
|
|
27
27
|
|
|
28
28
|
onOptionClick(option) {
|
|
29
|
-
const
|
|
29
|
+
const isDisabled = this._isDisabled();
|
|
30
30
|
|
|
31
|
-
if (!
|
|
31
|
+
if (!isDisabled) {
|
|
32
32
|
this._adapter.notifyClick(option);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
_isDisabled() {
|
|
37
37
|
return this.getProp('disabled');
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -162,7 +162,7 @@ class SliderFoundation extends _foundation.default {
|
|
|
162
162
|
|
|
163
163
|
const scroll = node => regex.test(style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x'));
|
|
164
164
|
|
|
165
|
-
const scrollParent = node => !node || node === document.body ? document.body : scroll(node) ? node : scrollParent(node.parentNode);
|
|
165
|
+
const scrollParent = node => !node || node === document.body || !(node instanceof Element) ? document.body : scroll(node) ? node : scrollParent(node.parentNode);
|
|
166
166
|
|
|
167
167
|
return scrollParent(el);
|
|
168
168
|
};
|
|
@@ -286,7 +286,7 @@ class SliderFoundation extends _foundation.default {
|
|
|
286
286
|
}
|
|
287
287
|
|
|
288
288
|
if (step !== 1) {
|
|
289
|
-
// Find nearest step point
|
|
289
|
+
// Find nearest step point
|
|
290
290
|
stepValue = Math.round(stepValue / step) * step;
|
|
291
291
|
}
|
|
292
292
|
|
|
@@ -8,6 +8,7 @@ export interface BaseColumnProps<RecordType> {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
colSpan?: number;
|
|
10
10
|
dataIndex?: string;
|
|
11
|
+
defaultFilteredValue?: any[];
|
|
11
12
|
defaultSortOrder?: BaseSortOrder;
|
|
12
13
|
filterChildrenRecord?: boolean;
|
|
13
14
|
filterDropdown?: any;
|
|
@@ -313,6 +314,7 @@ export interface BaseChangeInfoFilter<RecordType> {
|
|
|
313
314
|
filters?: BaseFilter[];
|
|
314
315
|
onFilter?: (filteredValue?: any, record?: RecordType) => boolean;
|
|
315
316
|
filteredValue?: any[];
|
|
317
|
+
defaultFilteredValue?: any[];
|
|
316
318
|
children?: BaseFilter[];
|
|
317
319
|
filterChildrenRecord?: boolean;
|
|
318
320
|
}
|
|
@@ -219,7 +219,17 @@ class TableFoundation extends _foundation.default {
|
|
|
219
219
|
|
|
220
220
|
|
|
221
221
|
getFilteredSortedDataSource(dataSource, queries) {
|
|
222
|
-
const filteredDataSource = this.filterDataSource(dataSource, (0, _filter2.default)(queries).call(queries, query =>
|
|
222
|
+
const filteredDataSource = this.filterDataSource(dataSource, (0, _filter2.default)(queries).call(queries, query => {
|
|
223
|
+
/**
|
|
224
|
+
* 这里无需判断 filteredValue 是否为数组,初始化时它是 `undefined`,点击选择空时为 `[]`
|
|
225
|
+
* 初始化时我们应该用 `defaultFilteredValue`,点击后我们应该用 `filteredValue`
|
|
226
|
+
*
|
|
227
|
+
* There is no need to judge whether `filteredValue` is an array here, because it is `undefined` when initialized, and `[]` when you click to select empty
|
|
228
|
+
* When initializing we should use `defaultFilteredValue`, after clicking we should use `filteredValue`
|
|
229
|
+
*/
|
|
230
|
+
const currentFilteredValue = query.filteredValue ? query.filteredValue : query.defaultFilteredValue;
|
|
231
|
+
return (0, _isFunction2.default)(query.onFilter) && (0, _isArray.default)(query.filters) && query.filters.length && (0, _isArray.default)(currentFilteredValue) && currentFilteredValue.length;
|
|
232
|
+
}));
|
|
223
233
|
const sortedDataSource = this.sortDataSource(filteredDataSource, (0, _filter2.default)(queries).call(queries, query => query && (0, _isFunction2.default)(query.sorter)));
|
|
224
234
|
return sortedDataSource;
|
|
225
235
|
}
|
|
@@ -375,10 +385,12 @@ class TableFoundation extends _foundation.default {
|
|
|
375
385
|
const {
|
|
376
386
|
onFilter,
|
|
377
387
|
filteredValue,
|
|
378
|
-
filterChildrenRecord
|
|
388
|
+
filterChildrenRecord,
|
|
389
|
+
defaultFilteredValue
|
|
379
390
|
} = filterObj;
|
|
391
|
+
const currentFilteredValue = (0, _isArray.default)(filteredValue) ? filteredValue : defaultFilteredValue;
|
|
380
392
|
|
|
381
|
-
if (typeof onFilter === 'function' && (0, _isArray.default)(
|
|
393
|
+
if (typeof onFilter === 'function' && (0, _isArray.default)(currentFilteredValue) && currentFilteredValue.length) {
|
|
382
394
|
hasValidFilters = true;
|
|
383
395
|
|
|
384
396
|
if (filteredData === null) {
|
|
@@ -388,7 +400,7 @@ class TableFoundation extends _foundation.default {
|
|
|
388
400
|
filteredData = new _map.default();
|
|
389
401
|
}
|
|
390
402
|
|
|
391
|
-
(0, _each2.default)(
|
|
403
|
+
(0, _each2.default)(currentFilteredValue, value => {
|
|
392
404
|
(0, _each2.default)(dataSource, record => {
|
|
393
405
|
const childrenRecords = (0, _get2.default)(record, childrenRecordName);
|
|
394
406
|
const recordKey = this.getRecordKey(record);
|
package/lib/cjs/table/table.css
CHANGED
|
@@ -109,7 +109,6 @@
|
|
|
109
109
|
word-break: break-all;
|
|
110
110
|
word-wrap: break-word;
|
|
111
111
|
position: relative;
|
|
112
|
-
user-select: none;
|
|
113
112
|
}
|
|
114
113
|
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
|
|
115
114
|
z-index: 101;
|
|
@@ -381,7 +380,7 @@
|
|
|
381
380
|
position: relative;
|
|
382
381
|
z-index: 1;
|
|
383
382
|
padding: 16px 12px;
|
|
384
|
-
color: var(--semi-color-
|
|
383
|
+
color: var(--semi-color-text-2);
|
|
385
384
|
font-size: 14px;
|
|
386
385
|
text-align: center;
|
|
387
386
|
background: transparent;
|
package/lib/cjs/table/table.scss
CHANGED
|
@@ -100,7 +100,6 @@ $module: #{$prefix}-table;
|
|
|
100
100
|
word-break: break-all;
|
|
101
101
|
word-wrap: break-word;
|
|
102
102
|
position: relative;
|
|
103
|
-
user-select: none;
|
|
104
103
|
|
|
105
104
|
&.#{$module}-cell-fixed {
|
|
106
105
|
|
|
@@ -199,11 +198,11 @@ $module: #{$prefix}-table;
|
|
|
199
198
|
background-color: $color-table_body-bg-hover;
|
|
200
199
|
|
|
201
200
|
&.#{$module}-cell-fixed {
|
|
202
|
-
|
|
201
|
+
|
|
203
202
|
&-left,
|
|
204
203
|
&-right {
|
|
205
204
|
background-color: $color-table_body-bg-default;
|
|
206
|
-
|
|
205
|
+
|
|
207
206
|
&::before {
|
|
208
207
|
background-color: $color-table_body-bg-hover;
|
|
209
208
|
content: "";
|
|
@@ -327,7 +326,7 @@ $module: #{$prefix}-table;
|
|
|
327
326
|
&-wrap {
|
|
328
327
|
// inline-flex vertical-align baseline 会导致父元素高度异常
|
|
329
328
|
display: inline-flex;
|
|
330
|
-
vertical-align: bottom;
|
|
329
|
+
vertical-align: bottom;
|
|
331
330
|
}
|
|
332
331
|
|
|
333
332
|
&-disabled {
|
|
@@ -467,7 +466,7 @@ $module: #{$prefix}-table;
|
|
|
467
466
|
position: relative;
|
|
468
467
|
z-index: 1;
|
|
469
468
|
padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
|
|
470
|
-
color: $color-
|
|
469
|
+
color: $color-table_placeholder-text-default;
|
|
471
470
|
font-size: #{$font-table_base-fontSize};
|
|
472
471
|
text-align: center;
|
|
473
472
|
background: $color-table_pl-bg-default;
|
package/lib/cjs/table/utils.js
CHANGED
|
@@ -384,7 +384,10 @@ function assignColumnKeys(columns) {
|
|
|
384
384
|
if (column.key == null) {
|
|
385
385
|
var _context4;
|
|
386
386
|
|
|
387
|
-
column
|
|
387
|
+
// if user give column a dataIndex, use it for backup
|
|
388
|
+
const _index = column.dataIndex || index;
|
|
389
|
+
|
|
390
|
+
column.key = (0, _concat.default)(_context4 = "".concat(level, "-")).call(_context4, _index);
|
|
388
391
|
}
|
|
389
392
|
|
|
390
393
|
if ((0, _isArray.default)(column[childrenColumnName]) && column[childrenColumnName].length) {
|
|
@@ -73,6 +73,7 @@ $color-table_sorter-text-hover: var(--semi-color-text-2); // 表格排序按钮
|
|
|
73
73
|
$color-table_page-text-default: var(--semi-color-text-2); // 表格翻页器文本颜色
|
|
74
74
|
$color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标示线颜色
|
|
75
75
|
$color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
|
|
76
|
+
$color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
|
|
76
77
|
|
|
77
78
|
// Other
|
|
78
79
|
$font-table_base-fontSize: 14px; // 表格默认文本字号
|
|
@@ -2,7 +2,7 @@ declare const cssClasses: {
|
|
|
2
2
|
readonly PREFIX: "semi-tooltip";
|
|
3
3
|
};
|
|
4
4
|
declare const strings: {
|
|
5
|
-
readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver"];
|
|
5
|
+
readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
|
|
6
6
|
readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
|
|
7
7
|
readonly STATUS_DISABLED: "disabled";
|
|
8
8
|
readonly STATUS_LOADING: "loading";
|
|
@@ -15,7 +15,7 @@ const cssClasses = {
|
|
|
15
15
|
};
|
|
16
16
|
exports.cssClasses = cssClasses;
|
|
17
17
|
const strings = {
|
|
18
|
-
POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver'],
|
|
18
|
+
POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver', 'leftBottomOver', 'rightBottomOver'],
|
|
19
19
|
TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
|
|
20
20
|
STATUS_DISABLED: 'disabled',
|
|
21
21
|
STATUS_LOADING: 'loading'
|