@douyinfe/semi-foundation 2.21.0-beta.0 → 2.21.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/autoComplete/foundation.ts +3 -1
- package/lib/cjs/autoComplete/foundation.d.ts +1 -1
- package/lib/cjs/autoComplete/foundation.js +3 -1
- package/lib/cjs/select/constants.js +1 -1
- package/lib/cjs/select/option.scss +6 -6
- package/lib/cjs/select/select.css +7 -7
- package/lib/cjs/select/select.scss +9 -4
- package/lib/cjs/select/variables.scss +9 -4
- package/lib/es/autoComplete/foundation.d.ts +1 -1
- package/lib/es/autoComplete/foundation.js +3 -1
- package/lib/es/select/constants.js +1 -1
- package/lib/es/select/option.scss +6 -6
- package/lib/es/select/select.css +7 -7
- package/lib/es/select/select.scss +9 -4
- package/lib/es/select/variables.scss +9 -4
- package/package.json +2 -2
- package/select/constants.ts +1 -1
- package/select/option.scss +6 -6
- package/select/select.scss +9 -4
- package/select/variables.scss +9 -4
|
@@ -415,7 +415,9 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
|
|
|
415
415
|
this._adapter.notifyFocus(e);
|
|
416
416
|
}
|
|
417
417
|
|
|
418
|
-
handleBlur(e:
|
|
418
|
+
handleBlur(e: any) {
|
|
419
|
+
// https://reactjs.org/docs/legacy-event-pooling.html
|
|
420
|
+
e.persist();
|
|
419
421
|
// In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
|
|
420
422
|
// internal-issues:1231
|
|
421
423
|
setTimeout(() => {
|
|
@@ -60,6 +60,6 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
|
|
|
60
60
|
_handleEnterKeyDown(): void;
|
|
61
61
|
handleOptionMouseEnter(optionIndex: number): void;
|
|
62
62
|
handleFocus(e: FocusEvent): void;
|
|
63
|
-
handleBlur(e:
|
|
63
|
+
handleBlur(e: any): void;
|
|
64
64
|
}
|
|
65
65
|
export default AutoCompleteFoundation;
|
|
@@ -499,8 +499,10 @@ class AutoCompleteFoundation extends _foundation.default {
|
|
|
499
499
|
}
|
|
500
500
|
|
|
501
501
|
handleBlur(e) {
|
|
502
|
-
//
|
|
502
|
+
// https://reactjs.org/docs/legacy-event-pooling.html
|
|
503
|
+
e.persist(); // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
|
|
503
504
|
// internal-issues:1231
|
|
505
|
+
|
|
504
506
|
setTimeout(() => {
|
|
505
507
|
this._adapter.notifyBlur(e);
|
|
506
508
|
|
|
@@ -85,11 +85,11 @@ $multiple: #{$module}-multiple;
|
|
|
85
85
|
background-color: $color-select_option-bg-hover;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
&:first-of-type {
|
|
89
|
-
|
|
90
|
-
}
|
|
88
|
+
// &:first-of-type {
|
|
89
|
+
// margin-top: $spacing-select_option_first-marginTop;
|
|
90
|
+
// }
|
|
91
91
|
|
|
92
|
-
&:last-of-type {
|
|
93
|
-
|
|
94
|
-
}
|
|
92
|
+
// &:last-of-type {
|
|
93
|
+
// margin-bottom: $spacing-select_option_last-marginBottom;
|
|
94
|
+
// }
|
|
95
95
|
}
|
|
@@ -68,12 +68,6 @@
|
|
|
68
68
|
.semi-select-option-focused {
|
|
69
69
|
background-color: var(--semi-color-fill-0);
|
|
70
70
|
}
|
|
71
|
-
.semi-select-option:first-of-type {
|
|
72
|
-
margin-top: 4px;
|
|
73
|
-
}
|
|
74
|
-
.semi-select-option:last-of-type {
|
|
75
|
-
margin-bottom: 4px;
|
|
76
|
-
}
|
|
77
71
|
|
|
78
72
|
.semi-select {
|
|
79
73
|
box-sizing: border-box;
|
|
@@ -380,10 +374,16 @@
|
|
|
380
374
|
padding-right: 0;
|
|
381
375
|
}
|
|
382
376
|
|
|
377
|
+
.semi-select-option-list-wrapper {
|
|
378
|
+
padding-top: 4px;
|
|
379
|
+
padding-bottom: 4px;
|
|
380
|
+
padding-left: 0px;
|
|
381
|
+
padding-right: 0px;
|
|
382
|
+
}
|
|
383
|
+
|
|
383
384
|
.semi-select-option-list {
|
|
384
385
|
overflow-x: hidden;
|
|
385
386
|
overflow-y: auto;
|
|
386
|
-
padding: 0px 0px 0px 0px;
|
|
387
387
|
}
|
|
388
388
|
.semi-select-option-list-chosen .semi-select-option-icon {
|
|
389
389
|
display: flex;
|
|
@@ -22,9 +22,8 @@ $multiple: #{$module}-multiple;
|
|
|
22
22
|
position: relative;
|
|
23
23
|
outline: none;
|
|
24
24
|
cursor: pointer;
|
|
25
|
-
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
|
|
26
|
-
|
|
27
|
-
transform:scale($transform_scale-select);
|
|
25
|
+
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
|
|
26
|
+
transform: scale($transform_scale-select);
|
|
28
27
|
&:hover {
|
|
29
28
|
background-color: $color-select-bg-hover;
|
|
30
29
|
border: $width-select-border-hover solid $color-select-border-hover;
|
|
@@ -394,10 +393,16 @@ $multiple: #{$module}-multiple;
|
|
|
394
393
|
}
|
|
395
394
|
}
|
|
396
395
|
|
|
396
|
+
.#{$module}-option-list-wrapper {
|
|
397
|
+
padding-top: $spacing-select_option_list-paddingTop;
|
|
398
|
+
padding-bottom: $spacing-select_option_list-paddingBottom;
|
|
399
|
+
padding-left: $spacing-select_option_list-paddingLeft;
|
|
400
|
+
padding-right: $spacing-select_option_list-paddingRight;
|
|
401
|
+
}
|
|
402
|
+
|
|
397
403
|
.#{$module}-option-list {
|
|
398
404
|
overflow-x: hidden;
|
|
399
405
|
overflow-y: auto;
|
|
400
|
-
padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
|
|
401
406
|
&-chosen {
|
|
402
407
|
.#{$module}-option-icon {
|
|
403
408
|
display: flex;
|
|
@@ -84,16 +84,21 @@ $spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项
|
|
|
84
84
|
$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
|
|
85
85
|
$spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
|
|
86
86
|
$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
|
|
90
|
+
// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
|
|
91
|
+
|
|
92
|
+
|
|
89
93
|
$spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
|
|
90
94
|
$spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
|
|
91
95
|
$spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
|
|
92
96
|
$spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
|
|
93
97
|
$spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
|
|
94
|
-
|
|
98
|
+
|
|
99
|
+
$spacing-select_option_list-paddingTop: $spacing-extra-tight; // 选择器内容区顶部内边距
|
|
95
100
|
$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
|
|
96
|
-
$spacing-select_option_list-paddingBottom:
|
|
101
|
+
$spacing-select_option_list-paddingBottom: $spacing-extra-tight; // 选择器内容区底部内边距
|
|
97
102
|
$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
|
|
98
103
|
|
|
99
104
|
// Radius
|
|
@@ -60,6 +60,6 @@ declare class AutoCompleteFoundation<P = Record<string, any>, S = Record<string,
|
|
|
60
60
|
_handleEnterKeyDown(): void;
|
|
61
61
|
handleOptionMouseEnter(optionIndex: number): void;
|
|
62
62
|
handleFocus(e: FocusEvent): void;
|
|
63
|
-
handleBlur(e:
|
|
63
|
+
handleBlur(e: any): void;
|
|
64
64
|
}
|
|
65
65
|
export default AutoCompleteFoundation;
|
|
@@ -485,8 +485,10 @@ class AutoCompleteFoundation extends BaseFoundation {
|
|
|
485
485
|
}
|
|
486
486
|
|
|
487
487
|
handleBlur(e) {
|
|
488
|
-
//
|
|
488
|
+
// https://reactjs.org/docs/legacy-event-pooling.html
|
|
489
|
+
e.persist(); // In order to handle the problem of losing onClick binding when clicking on the padding area, the onBlur event is triggered first to cause the react view to be updated
|
|
489
490
|
// internal-issues:1231
|
|
491
|
+
|
|
490
492
|
setTimeout(() => {
|
|
491
493
|
this._adapter.notifyBlur(e);
|
|
492
494
|
|
|
@@ -85,11 +85,11 @@ $multiple: #{$module}-multiple;
|
|
|
85
85
|
background-color: $color-select_option-bg-hover;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
&:first-of-type {
|
|
89
|
-
|
|
90
|
-
}
|
|
88
|
+
// &:first-of-type {
|
|
89
|
+
// margin-top: $spacing-select_option_first-marginTop;
|
|
90
|
+
// }
|
|
91
91
|
|
|
92
|
-
&:last-of-type {
|
|
93
|
-
|
|
94
|
-
}
|
|
92
|
+
// &:last-of-type {
|
|
93
|
+
// margin-bottom: $spacing-select_option_last-marginBottom;
|
|
94
|
+
// }
|
|
95
95
|
}
|
package/lib/es/select/select.css
CHANGED
|
@@ -68,12 +68,6 @@
|
|
|
68
68
|
.semi-select-option-focused {
|
|
69
69
|
background-color: var(--semi-color-fill-0);
|
|
70
70
|
}
|
|
71
|
-
.semi-select-option:first-of-type {
|
|
72
|
-
margin-top: 4px;
|
|
73
|
-
}
|
|
74
|
-
.semi-select-option:last-of-type {
|
|
75
|
-
margin-bottom: 4px;
|
|
76
|
-
}
|
|
77
71
|
|
|
78
72
|
.semi-select {
|
|
79
73
|
box-sizing: border-box;
|
|
@@ -380,10 +374,16 @@
|
|
|
380
374
|
padding-right: 0;
|
|
381
375
|
}
|
|
382
376
|
|
|
377
|
+
.semi-select-option-list-wrapper {
|
|
378
|
+
padding-top: 4px;
|
|
379
|
+
padding-bottom: 4px;
|
|
380
|
+
padding-left: 0px;
|
|
381
|
+
padding-right: 0px;
|
|
382
|
+
}
|
|
383
|
+
|
|
383
384
|
.semi-select-option-list {
|
|
384
385
|
overflow-x: hidden;
|
|
385
386
|
overflow-y: auto;
|
|
386
|
-
padding: 0px 0px 0px 0px;
|
|
387
387
|
}
|
|
388
388
|
.semi-select-option-list-chosen .semi-select-option-icon {
|
|
389
389
|
display: flex;
|
|
@@ -22,9 +22,8 @@ $multiple: #{$module}-multiple;
|
|
|
22
22
|
position: relative;
|
|
23
23
|
outline: none;
|
|
24
24
|
cursor: pointer;
|
|
25
|
-
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
|
|
26
|
-
|
|
27
|
-
transform:scale($transform_scale-select);
|
|
25
|
+
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
|
|
26
|
+
transform: scale($transform_scale-select);
|
|
28
27
|
&:hover {
|
|
29
28
|
background-color: $color-select-bg-hover;
|
|
30
29
|
border: $width-select-border-hover solid $color-select-border-hover;
|
|
@@ -394,10 +393,16 @@ $multiple: #{$module}-multiple;
|
|
|
394
393
|
}
|
|
395
394
|
}
|
|
396
395
|
|
|
396
|
+
.#{$module}-option-list-wrapper {
|
|
397
|
+
padding-top: $spacing-select_option_list-paddingTop;
|
|
398
|
+
padding-bottom: $spacing-select_option_list-paddingBottom;
|
|
399
|
+
padding-left: $spacing-select_option_list-paddingLeft;
|
|
400
|
+
padding-right: $spacing-select_option_list-paddingRight;
|
|
401
|
+
}
|
|
402
|
+
|
|
397
403
|
.#{$module}-option-list {
|
|
398
404
|
overflow-x: hidden;
|
|
399
405
|
overflow-y: auto;
|
|
400
|
-
padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
|
|
401
406
|
&-chosen {
|
|
402
407
|
.#{$module}-option-icon {
|
|
403
408
|
display: flex;
|
|
@@ -84,16 +84,21 @@ $spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项
|
|
|
84
84
|
$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
|
|
85
85
|
$spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
|
|
86
86
|
$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
|
|
90
|
+
// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
|
|
91
|
+
|
|
92
|
+
|
|
89
93
|
$spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
|
|
90
94
|
$spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
|
|
91
95
|
$spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
|
|
92
96
|
$spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
|
|
93
97
|
$spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
|
|
94
|
-
|
|
98
|
+
|
|
99
|
+
$spacing-select_option_list-paddingTop: $spacing-extra-tight; // 选择器内容区顶部内边距
|
|
95
100
|
$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
|
|
96
|
-
$spacing-select_option_list-paddingBottom:
|
|
101
|
+
$spacing-select_option_list-paddingBottom: $spacing-extra-tight; // 选择器内容区底部内边距
|
|
97
102
|
$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
|
|
98
103
|
|
|
99
104
|
// Radius
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-foundation",
|
|
3
|
-
"version": "2.21.0
|
|
3
|
+
"version": "2.21.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build:lib": "node ./scripts/compileLib.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"*.scss",
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "9c4b8b64c225231a1bd5c8ff85c701b8dd7b144b",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
package/select/constants.ts
CHANGED
package/select/option.scss
CHANGED
|
@@ -85,11 +85,11 @@ $multiple: #{$module}-multiple;
|
|
|
85
85
|
background-color: $color-select_option-bg-hover;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
&:first-of-type {
|
|
89
|
-
|
|
90
|
-
}
|
|
88
|
+
// &:first-of-type {
|
|
89
|
+
// margin-top: $spacing-select_option_first-marginTop;
|
|
90
|
+
// }
|
|
91
91
|
|
|
92
|
-
&:last-of-type {
|
|
93
|
-
|
|
94
|
-
}
|
|
92
|
+
// &:last-of-type {
|
|
93
|
+
// margin-bottom: $spacing-select_option_last-marginBottom;
|
|
94
|
+
// }
|
|
95
95
|
}
|
package/select/select.scss
CHANGED
|
@@ -22,9 +22,8 @@ $multiple: #{$module}-multiple;
|
|
|
22
22
|
position: relative;
|
|
23
23
|
outline: none;
|
|
24
24
|
cursor: pointer;
|
|
25
|
-
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
|
|
26
|
-
|
|
27
|
-
transform:scale($transform_scale-select);
|
|
25
|
+
transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
|
|
26
|
+
transform: scale($transform_scale-select);
|
|
28
27
|
&:hover {
|
|
29
28
|
background-color: $color-select-bg-hover;
|
|
30
29
|
border: $width-select-border-hover solid $color-select-border-hover;
|
|
@@ -394,10 +393,16 @@ $multiple: #{$module}-multiple;
|
|
|
394
393
|
}
|
|
395
394
|
}
|
|
396
395
|
|
|
396
|
+
.#{$module}-option-list-wrapper {
|
|
397
|
+
padding-top: $spacing-select_option_list-paddingTop;
|
|
398
|
+
padding-bottom: $spacing-select_option_list-paddingBottom;
|
|
399
|
+
padding-left: $spacing-select_option_list-paddingLeft;
|
|
400
|
+
padding-right: $spacing-select_option_list-paddingRight;
|
|
401
|
+
}
|
|
402
|
+
|
|
397
403
|
.#{$module}-option-list {
|
|
398
404
|
overflow-x: hidden;
|
|
399
405
|
overflow-y: auto;
|
|
400
|
-
padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
|
|
401
406
|
&-chosen {
|
|
402
407
|
.#{$module}-option-icon {
|
|
403
408
|
display: flex;
|
package/select/variables.scss
CHANGED
|
@@ -84,16 +84,21 @@ $spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项
|
|
|
84
84
|
$spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
|
|
85
85
|
$spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
|
|
86
86
|
$spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
|
|
90
|
+
// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
|
|
91
|
+
|
|
92
|
+
|
|
89
93
|
$spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
|
|
90
94
|
$spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
|
|
91
95
|
$spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
|
|
92
96
|
$spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
|
|
93
97
|
$spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
|
|
94
|
-
|
|
98
|
+
|
|
99
|
+
$spacing-select_option_list-paddingTop: $spacing-extra-tight; // 选择器内容区顶部内边距
|
|
95
100
|
$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
|
|
96
|
-
$spacing-select_option_list-paddingBottom:
|
|
101
|
+
$spacing-select_option_list-paddingBottom: $spacing-extra-tight; // 选择器内容区底部内边距
|
|
97
102
|
$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
|
|
98
103
|
|
|
99
104
|
// Radius
|