@douyinfe/semi-foundation 2.24.2 → 2.25.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.
@@ -1305,9 +1305,8 @@ class SelectFoundation extends _foundation.default {
1305
1305
  }
1306
1306
 
1307
1307
  handleTriggerFocus(e) {
1308
- this.bindKeyBoardEvent();
1309
-
1310
- this._adapter.updateFocusState(true);
1308
+ this.bindKeyBoardEvent(); // close the tag in multiple select did not trigger select focus, but trigger TriggerFocus, so not need to updateFocusState in this function
1309
+ // this._adapter.updateFocusState(true);
1311
1310
 
1312
1311
  this._adapter.setIsFocusInContainer(false);
1313
1312
  }
@@ -73,6 +73,5 @@ declare const numbers: {
73
73
  readonly DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: number;
74
74
  readonly DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT: number;
75
75
  readonly DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT: number;
76
- readonly DEFAULT_EMPTYSLOT_HEIGHT: 52;
77
76
  };
78
77
  export { cssClasses, strings, numbers };
@@ -66,8 +66,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
66
66
  const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
67
67
  const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
68
68
  const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
69
- const DEFAULT_CELL_LINE_HEIGHT = 20;
70
- const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
69
+ const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
71
70
 
72
71
  const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
73
72
  const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle size
@@ -103,7 +102,6 @@ const numbers = {
103
102
  DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
104
103
  DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
105
104
  DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
106
- DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
107
- DEFAULT_EMPTYSLOT_HEIGHT
105
+ DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
108
106
  };
109
107
  exports.numbers = numbers;
@@ -3,7 +3,6 @@
3
3
  /* spacing */
4
4
  .semi-tag {
5
5
  box-sizing: border-box;
6
- display: inline-block;
7
6
  border-radius: var(--semi-border-radius-small);
8
7
  background-color: transparent;
9
8
  position: relative;
@@ -11,6 +10,10 @@
11
10
  overflow: hidden;
12
11
  white-space: nowrap;
13
12
  vertical-align: bottom;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ display: inline-flex;
14
17
  }
15
18
  .semi-tag-default, .semi-tag-small {
16
19
  font-size: 12px;
@@ -42,11 +45,10 @@
42
45
  display: none;
43
46
  }
44
47
  .semi-tag-content {
45
- display: flex;
46
- display: flex;
47
- justify-content: center;
48
- align-items: center;
49
- height: 100%;
48
+ flex: 1;
49
+ overflow: hidden;
50
+ white-space: nowrap;
51
+ text-overflow: ellipsis;
50
52
  }
51
53
  .semi-tag-close {
52
54
  display: flex;
@@ -56,6 +58,12 @@
56
58
  padding-left: 4px;
57
59
  cursor: pointer;
58
60
  }
61
+ .semi-tag-close :hover {
62
+ color: var(--semi-color-text-1);
63
+ }
64
+ .semi-tag-close :active {
65
+ color: var(--semi-color-text-0);
66
+ }
59
67
  .semi-tag-closable {
60
68
  padding: 4px 4px 4px 8px;
61
69
  }
@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
10
10
 
11
11
  .#{$module} {
12
12
  box-sizing: border-box;
13
- display: inline-block;
14
13
  border-radius: $radius-tag;
15
14
  background-color: transparent;
16
15
  position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
19
18
  overflow: hidden;
20
19
  white-space: nowrap;
21
20
  vertical-align: bottom;
21
+ @include all-center;
22
+ display: inline-flex;
22
23
 
23
24
  &-default,
24
25
  &-small {
@@ -51,9 +52,10 @@ $types: "ghost", "solid", "light";
51
52
  }
52
53
 
53
54
  &-content {
54
- display: flex;
55
- @include all-center;
56
- height: 100%;
55
+ flex: 1;
56
+ overflow: hidden;
57
+ white-space: nowrap;
58
+ text-overflow: ellipsis;
57
59
  }
58
60
 
59
61
  &-close {
@@ -61,6 +63,14 @@ $types: "ghost", "solid", "light";
61
63
  color: $color-tag_close-icon-default;
62
64
  padding-left: $spacing-tag_close-paddingLeft;
63
65
  cursor: pointer;
66
+
67
+ :hover {
68
+ color: $color-tag_close-icon-hover
69
+ }
70
+
71
+ :active {
72
+ color: $color-tag_close-icon-active
73
+ }
64
74
  }
65
75
 
66
76
  &-closable {
@@ -29,6 +29,8 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
29
29
  $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
30
30
 
31
31
  $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
32
+ $color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
33
+ $color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
32
34
  $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
33
35
  $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
34
36
  $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
@@ -1283,9 +1283,8 @@ export default class SelectFoundation extends BaseFoundation {
1283
1283
  }
1284
1284
 
1285
1285
  handleTriggerFocus(e) {
1286
- this.bindKeyBoardEvent();
1287
-
1288
- this._adapter.updateFocusState(true);
1286
+ this.bindKeyBoardEvent(); // close the tag in multiple select did not trigger select focus, but trigger TriggerFocus, so not need to updateFocusState in this function
1287
+ // this._adapter.updateFocusState(true);
1289
1288
 
1290
1289
  this._adapter.setIsFocusInContainer(false);
1291
1290
  }
@@ -73,6 +73,5 @@ declare const numbers: {
73
73
  readonly DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: number;
74
74
  readonly DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT: number;
75
75
  readonly DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT: number;
76
- readonly DEFAULT_EMPTYSLOT_HEIGHT: 52;
77
76
  };
78
77
  export { cssClasses, strings, numbers };
@@ -56,8 +56,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
56
56
  const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
57
57
  const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
58
58
  const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
59
- const DEFAULT_CELL_LINE_HEIGHT = 20;
60
- const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
59
+ const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
61
60
 
62
61
  const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
63
62
  const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle size
@@ -93,7 +92,6 @@ const numbers = {
93
92
  DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
94
93
  DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
95
94
  DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
96
- DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
97
- DEFAULT_EMPTYSLOT_HEIGHT
95
+ DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
98
96
  };
99
97
  export { cssClasses, strings, numbers };
@@ -3,7 +3,6 @@
3
3
  /* spacing */
4
4
  .semi-tag {
5
5
  box-sizing: border-box;
6
- display: inline-block;
7
6
  border-radius: var(--semi-border-radius-small);
8
7
  background-color: transparent;
9
8
  position: relative;
@@ -11,6 +10,10 @@
11
10
  overflow: hidden;
12
11
  white-space: nowrap;
13
12
  vertical-align: bottom;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ display: inline-flex;
14
17
  }
15
18
  .semi-tag-default, .semi-tag-small {
16
19
  font-size: 12px;
@@ -42,11 +45,10 @@
42
45
  display: none;
43
46
  }
44
47
  .semi-tag-content {
45
- display: flex;
46
- display: flex;
47
- justify-content: center;
48
- align-items: center;
49
- height: 100%;
48
+ flex: 1;
49
+ overflow: hidden;
50
+ white-space: nowrap;
51
+ text-overflow: ellipsis;
50
52
  }
51
53
  .semi-tag-close {
52
54
  display: flex;
@@ -56,6 +58,12 @@
56
58
  padding-left: 4px;
57
59
  cursor: pointer;
58
60
  }
61
+ .semi-tag-close :hover {
62
+ color: var(--semi-color-text-1);
63
+ }
64
+ .semi-tag-close :active {
65
+ color: var(--semi-color-text-0);
66
+ }
59
67
  .semi-tag-closable {
60
68
  padding: 4px 4px 4px 8px;
61
69
  }
@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
10
10
 
11
11
  .#{$module} {
12
12
  box-sizing: border-box;
13
- display: inline-block;
14
13
  border-radius: $radius-tag;
15
14
  background-color: transparent;
16
15
  position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
19
18
  overflow: hidden;
20
19
  white-space: nowrap;
21
20
  vertical-align: bottom;
21
+ @include all-center;
22
+ display: inline-flex;
22
23
 
23
24
  &-default,
24
25
  &-small {
@@ -51,9 +52,10 @@ $types: "ghost", "solid", "light";
51
52
  }
52
53
 
53
54
  &-content {
54
- display: flex;
55
- @include all-center;
56
- height: 100%;
55
+ flex: 1;
56
+ overflow: hidden;
57
+ white-space: nowrap;
58
+ text-overflow: ellipsis;
57
59
  }
58
60
 
59
61
  &-close {
@@ -61,6 +63,14 @@ $types: "ghost", "solid", "light";
61
63
  color: $color-tag_close-icon-default;
62
64
  padding-left: $spacing-tag_close-paddingLeft;
63
65
  cursor: pointer;
66
+
67
+ :hover {
68
+ color: $color-tag_close-icon-hover
69
+ }
70
+
71
+ :active {
72
+ color: $color-tag_close-icon-active
73
+ }
64
74
  }
65
75
 
66
76
  &-closable {
@@ -29,6 +29,8 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
29
29
  $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
30
30
 
31
31
  $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
32
+ $color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
33
+ $color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
32
34
  $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
33
35
  $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
34
36
  $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.24.2",
3
+ "version": "2.25.0-beta.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": "41831fb74dbc194221e9be7034dbcf93e4a35aa5",
26
+ "gitHead": "72351802667e5c906035fb969b65b0ce83ea88f7",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
@@ -1036,7 +1036,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
1036
1036
 
1037
1037
  handleTriggerFocus(e) {
1038
1038
  this.bindKeyBoardEvent();
1039
- this._adapter.updateFocusState(true);
1039
+ // close the tag in multiple select did not trigger select focus, but trigger TriggerFocus, so not need to updateFocusState in this function
1040
+ // this._adapter.updateFocusState(true);
1040
1041
  this._adapter.setIsFocusInContainer(false);
1041
1042
  }
1042
1043
 
@@ -60,7 +60,6 @@ const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
60
60
  const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
61
61
  const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
62
62
  const DEFAULT_CELL_LINE_HEIGHT = 20;
63
- const DEFAULT_EMPTYSLOT_HEIGHT = 52;
64
63
 
65
64
  // normal size
66
65
  const DEFAULT_VIRTUALIZED_ROW_HEIGHT =
@@ -119,7 +118,6 @@ const numbers = {
119
118
  DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
120
119
  DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
121
120
  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
122
- DEFAULT_EMPTYSLOT_HEIGHT
123
121
  } as const;
124
122
 
125
123
  export { cssClasses, strings, numbers };
package/tag/tag.scss CHANGED
@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
10
10
 
11
11
  .#{$module} {
12
12
  box-sizing: border-box;
13
- display: inline-block;
14
13
  border-radius: $radius-tag;
15
14
  background-color: transparent;
16
15
  position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
19
18
  overflow: hidden;
20
19
  white-space: nowrap;
21
20
  vertical-align: bottom;
21
+ @include all-center;
22
+ display: inline-flex;
22
23
 
23
24
  &-default,
24
25
  &-small {
@@ -51,9 +52,10 @@ $types: "ghost", "solid", "light";
51
52
  }
52
53
 
53
54
  &-content {
54
- display: flex;
55
- @include all-center;
56
- height: 100%;
55
+ flex: 1;
56
+ overflow: hidden;
57
+ white-space: nowrap;
58
+ text-overflow: ellipsis;
57
59
  }
58
60
 
59
61
  &-close {
@@ -61,6 +63,14 @@ $types: "ghost", "solid", "light";
61
63
  color: $color-tag_close-icon-default;
62
64
  padding-left: $spacing-tag_close-paddingLeft;
63
65
  cursor: pointer;
66
+
67
+ :hover {
68
+ color: $color-tag_close-icon-hover
69
+ }
70
+
71
+ :active {
72
+ color: $color-tag_close-icon-active
73
+ }
64
74
  }
65
75
 
66
76
  &-closable {
@@ -29,6 +29,8 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
29
29
  $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
30
30
 
31
31
  $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
32
+ $color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
33
+ $color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
32
34
  $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
33
35
  $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
34
36
  $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距