@douyinfe/semi-foundation 2.24.3 → 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.
Files changed (14) hide show
  1. package/lib/cjs/table/constants.d.ts +0 -1
  2. package/lib/cjs/table/constants.js +2 -4
  3. package/lib/cjs/tag/tag.css +14 -6
  4. package/lib/cjs/tag/tag.scss +14 -4
  5. package/lib/cjs/tag/variables.scss +2 -0
  6. package/lib/es/table/constants.d.ts +0 -1
  7. package/lib/es/table/constants.js +2 -4
  8. package/lib/es/tag/tag.css +14 -6
  9. package/lib/es/tag/tag.scss +14 -4
  10. package/lib/es/tag/variables.scss +2 -0
  11. package/package.json +2 -2
  12. package/table/constants.ts +0 -2
  13. package/tag/tag.scss +14 -4
  14. package/tag/variables.scss +2 -0
package/lib/cjs/table/constants.d.ts CHANGED
@@ -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 };
package/lib/cjs/table/constants.js CHANGED
@@ -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;
package/lib/cjs/tag/tag.css CHANGED
@@ -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
  }
package/lib/cjs/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 {
package/lib/cjs/tag/variables.scss CHANGED
@@ -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/lib/es/table/constants.d.ts CHANGED
@@ -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 };
package/lib/es/table/constants.js CHANGED
@@ -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 };
package/lib/es/tag/tag.css CHANGED
@@ -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
  }
package/lib/es/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 {
package/lib/es/tag/variables.scss CHANGED
@@ -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.3",
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": "989e106471d68c7eaf1b26abb64bbc1a5f383f9a",
26
+ "gitHead": "72351802667e5c906035fb969b65b0ce83ea88f7",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
package/table/constants.ts CHANGED
@@ -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 {
package/tag/variables.scss CHANGED
@@ -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; // 可删除的标签删除按钮顶部内边距