@douyinfe/semi-foundation 2.40.0-beta.0 → 2.41.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 (29) hide show
  1. package/button/button.scss +0 -1
  2. package/image/variables.scss +1 -1
  3. package/lib/cjs/button/button.css +0 -1
  4. package/lib/cjs/button/button.scss +0 -1
  5. package/lib/cjs/image/image.css +1 -1
  6. package/lib/cjs/image/variables.scss +1 -1
  7. package/lib/cjs/skeleton/skeleton.css +2 -2
  8. package/lib/cjs/skeleton/variables.scss +2 -2
  9. package/lib/cjs/tagInput/tagInput.css +19 -0
  10. package/lib/cjs/tagInput/tagInput.scss +21 -0
  11. package/lib/cjs/tagInput/variables.scss +2 -0
  12. package/lib/cjs/transfer/transfer.css +4 -0
  13. package/lib/cjs/transfer/transfer.scss +7 -0
  14. package/lib/es/button/button.css +0 -1
  15. package/lib/es/button/button.scss +0 -1
  16. package/lib/es/image/image.css +1 -1
  17. package/lib/es/image/variables.scss +1 -1
  18. package/lib/es/skeleton/skeleton.css +2 -2
  19. package/lib/es/skeleton/variables.scss +2 -2
  20. package/lib/es/tagInput/tagInput.css +19 -0
  21. package/lib/es/tagInput/tagInput.scss +21 -0
  22. package/lib/es/tagInput/variables.scss +2 -0
  23. package/lib/es/transfer/transfer.css +4 -0
  24. package/lib/es/transfer/transfer.scss +7 -0
  25. package/package.json +3 -3
  26. package/skeleton/variables.scss +2 -2
  27. package/tagInput/tagInput.scss +21 -0
  28. package/tagInput/variables.scss +2 -0
  29. package/transfer/transfer.scss +7 -0
package/button/button.scss CHANGED
@@ -11,7 +11,6 @@ $module: #{$prefix}-button;
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  justify-content: center;
14
- margin: 0;
15
14
  cursor: pointer;
16
15
  user-select: none;
17
16
  border: $width-button-border $color-button_primary-border-default solid;
package/image/variables.scss CHANGED
@@ -27,7 +27,7 @@ $height-image_preview_icon: 40px; // 图像预览footer操作区icon高度
27
27
  $height-image_preview_header_close: 30px; // 图像预览header部分的关闭热区高度
28
28
 
29
29
  $radius-image: var(--semi-border-radius-small); // 图像圆角
30
- $radius-image_preview_footer: 6px; // 图像预览footer操作区圆角
30
+ $radius-image_preview_footer: var(--semi-border-radius-medium); // 图像预览footer操作区圆角
31
31
 
32
32
  $color-image_mask-bg: var(--semi-color-overlay-bg); // 图像蒙层背景色
33
33
  $color-image_mask_info_text: var(--semi-color-white); // 图像蒙层文字颜色
package/lib/cjs/button/button.css CHANGED
@@ -30,7 +30,6 @@
30
30
  display: inline-flex;
31
31
  align-items: center;
32
32
  justify-content: center;
33
- margin: 0;
34
33
  cursor: pointer;
35
34
  user-select: none;
36
35
  border: 0 transparent solid;
package/lib/cjs/button/button.scss CHANGED
@@ -11,7 +11,6 @@ $module: #{$prefix}-button;
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  justify-content: center;
14
- margin: 0;
15
14
  cursor: pointer;
16
15
  user-select: none;
17
16
  border: $width-button-border $color-button_primary-border-default solid;
package/lib/cjs/image/image.css CHANGED
@@ -113,7 +113,7 @@
113
113
  .semi-image-preview-footer-content {
114
114
  padding: 0 16px;
115
115
  background: rgba(0, 0, 0, 0.75);
116
- border-radius: 6px;
116
+ border-radius: var(--semi-border-radius-medium);
117
117
  height: 48px;
118
118
  }
119
119
  .semi-image-preview-footer-wrapper {
package/lib/cjs/image/variables.scss CHANGED
@@ -27,7 +27,7 @@ $height-image_preview_icon: 40px; // 图像预览footer操作区icon高度
27
27
  $height-image_preview_header_close: 30px; // 图像预览header部分的关闭热区高度
28
28
 
29
29
  $radius-image: var(--semi-border-radius-small); // 图像圆角
30
- $radius-image_preview_footer: 6px; // 图像预览footer操作区圆角
30
+ $radius-image_preview_footer: var(--semi-border-radius-medium); // 图像预览footer操作区圆角
31
31
 
32
32
  $color-image_mask-bg: var(--semi-color-overlay-bg); // 图像蒙层背景色
33
33
  $color-image_mask_info_text: var(--semi-color-white); // 图像蒙层文字颜色
package/lib/cjs/skeleton/skeleton.css CHANGED
@@ -3,7 +3,7 @@
3
3
  /* spacing */
4
4
  .semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
5
5
  background: var(--semi-color-fill-0);
6
- border-radius: 4px;
6
+ border-radius: var(--semi-border-radius-small);
7
7
  }
8
8
  .semi-skeleton-avatar-circle {
9
9
  border-radius: 50%;
@@ -39,7 +39,7 @@
39
39
  }
40
40
  .semi-skeleton-paragraph li {
41
41
  background: var(--semi-color-fill-0);
42
- border-radius: 4px;
42
+ border-radius: var(--semi-border-radius-small);
43
43
  width: 100%;
44
44
  height: 16px;
45
45
  margin-bottom: 10px;
package/lib/cjs/skeleton/variables.scss CHANGED
@@ -15,6 +15,6 @@ $height-skeleton_button: $height-control-default; // 按钮骨架屏高度
15
15
 
16
16
  $spacing-skeleton_li-marginBottom: 10px; // 按钮骨架屏高度
17
17
 
18
- $radius-skeleton_item: 4px; // 骨架屏圆角
19
- $radius-skeleton_li: 4px; // 骨架屏圆角
18
+ $radius-skeleton_item: var(--semi-border-radius-small); // 骨架屏圆角
19
+ $radius-skeleton_li: var(--semi-border-radius-small); // 骨架屏圆角
20
20
 
package/lib/cjs/tagInput/tagInput.css CHANGED
@@ -30,6 +30,25 @@
30
30
  margin-right: 4px;
31
31
  cursor: move;
32
32
  }
33
+ .semi-tagInput-sortable-item {
34
+ position: relative;
35
+ }
36
+ .semi-tagInput-sortable-item-over {
37
+ overflow: visible;
38
+ }
39
+ .semi-tagInput-sortable-item-over::before {
40
+ content: "";
41
+ display: block;
42
+ height: 100%;
43
+ width: 2px;
44
+ background-color: var(--semi-color-primary);
45
+ position: absolute;
46
+ left: -2px;
47
+ top: 0;
48
+ }
49
+ .semi-tagInput-sortable-item-active {
50
+ opacity: 0.5;
51
+ }
33
52
  .semi-tagInput-hover {
34
53
  background-color: var(--semi-color-fill-1);
35
54
  border: 1px transparent solid;
package/lib/cjs/tagInput/tagInput.scss CHANGED
@@ -42,6 +42,27 @@ $module: #{$prefix}-tagInput;
42
42
  }
43
43
  }
44
44
 
45
+ &-sortable-item {
46
+ position: relative;
47
+ &-over {
48
+ overflow: visible;
49
+ &::before {
50
+ content: "";
51
+ display: block;
52
+ height: 100%;
53
+ width: $width-tagInput_sortable_item_over;
54
+ background-color: $color-tagInput_sortable_item_over-bg;
55
+ position: absolute;
56
+ left: -$width-tagInput_sortable_item_over;
57
+ top: 0;
58
+ }
59
+ }
60
+
61
+ &-active {
62
+ opacity: 0.5;
63
+ }
64
+ }
65
+
45
66
  &-hover {
46
67
  background-color: $color-tagInput_default-bg-hover;
47
68
  border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
package/lib/cjs/tagInput/variables.scss CHANGED
@@ -27,6 +27,7 @@ $color-tagInput_danger-bg-hover: var(--semi-color-danger-light-hover); // 危险
27
27
  $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 危险标签输入框描边颜色 - 悬浮
28
28
  $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
29
29
  $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
30
+ $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
30
31
 
31
32
  $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
32
33
 
@@ -48,6 +49,7 @@ $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空
48
49
  $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
49
50
  $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
50
51
  $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
52
+ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
51
53
 
52
54
  $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
53
55
 
package/lib/cjs/transfer/transfer.css CHANGED
@@ -143,10 +143,14 @@
143
143
  .semi-transfer-right-item-drag-handler {
144
144
  margin-right: 4px;
145
145
  flex-shrink: 0;
146
+ cursor: move;
146
147
  }
147
148
  .semi-transfer-right-item-drag-item-move {
148
149
  z-index: 2000;
149
150
  }
151
+ .semi-transfer-right-item-sortable-item-active {
152
+ opacity: 0;
153
+ }
150
154
  .semi-transfer-right-empty {
151
155
  position: absolute;
152
156
  height: 100%;
package/lib/cjs/transfer/transfer.scss CHANGED
@@ -169,12 +169,19 @@ $module: #{$prefix}-transfer;
169
169
  &-handler {
170
170
  margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
171
171
  flex-shrink: 0;
172
+ cursor: move;
172
173
  }
173
174
 
174
175
  &-item-move {
175
176
  z-index: $z-transfer_right_item_drag_item_move;
176
177
  }
177
178
  }
179
+
180
+ &-sortable-item {
181
+ &-active {
182
+ opacity: 0;
183
+ }
184
+ }
178
185
  }
179
186
 
180
187
  &-empty {
package/lib/es/button/button.css CHANGED
@@ -30,7 +30,6 @@
30
30
  display: inline-flex;
31
31
  align-items: center;
32
32
  justify-content: center;
33
- margin: 0;
34
33
  cursor: pointer;
35
34
  user-select: none;
36
35
  border: 0 transparent solid;
package/lib/es/button/button.scss CHANGED
@@ -11,7 +11,6 @@ $module: #{$prefix}-button;
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  justify-content: center;
14
- margin: 0;
15
14
  cursor: pointer;
16
15
  user-select: none;
17
16
  border: $width-button-border $color-button_primary-border-default solid;
package/lib/es/image/image.css CHANGED
@@ -113,7 +113,7 @@
113
113
  .semi-image-preview-footer-content {
114
114
  padding: 0 16px;
115
115
  background: rgba(0, 0, 0, 0.75);
116
- border-radius: 6px;
116
+ border-radius: var(--semi-border-radius-medium);
117
117
  height: 48px;
118
118
  }
119
119
  .semi-image-preview-footer-wrapper {
package/lib/es/image/variables.scss CHANGED
@@ -27,7 +27,7 @@ $height-image_preview_icon: 40px; // 图像预览footer操作区icon高度
27
27
  $height-image_preview_header_close: 30px; // 图像预览header部分的关闭热区高度
28
28
 
29
29
  $radius-image: var(--semi-border-radius-small); // 图像圆角
30
- $radius-image_preview_footer: 6px; // 图像预览footer操作区圆角
30
+ $radius-image_preview_footer: var(--semi-border-radius-medium); // 图像预览footer操作区圆角
31
31
 
32
32
  $color-image_mask-bg: var(--semi-color-overlay-bg); // 图像蒙层背景色
33
33
  $color-image_mask_info_text: var(--semi-color-white); // 图像蒙层文字颜色
package/lib/es/skeleton/skeleton.css CHANGED
@@ -3,7 +3,7 @@
3
3
  /* spacing */
4
4
  .semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
5
5
  background: var(--semi-color-fill-0);
6
- border-radius: 4px;
6
+ border-radius: var(--semi-border-radius-small);
7
7
  }
8
8
  .semi-skeleton-avatar-circle {
9
9
  border-radius: 50%;
@@ -39,7 +39,7 @@
39
39
  }
40
40
  .semi-skeleton-paragraph li {
41
41
  background: var(--semi-color-fill-0);
42
- border-radius: 4px;
42
+ border-radius: var(--semi-border-radius-small);
43
43
  width: 100%;
44
44
  height: 16px;
45
45
  margin-bottom: 10px;
package/lib/es/skeleton/variables.scss CHANGED
@@ -15,6 +15,6 @@ $height-skeleton_button: $height-control-default; // 按钮骨架屏高度
15
15
 
16
16
  $spacing-skeleton_li-marginBottom: 10px; // 按钮骨架屏高度
17
17
 
18
- $radius-skeleton_item: 4px; // 骨架屏圆角
19
- $radius-skeleton_li: 4px; // 骨架屏圆角
18
+ $radius-skeleton_item: var(--semi-border-radius-small); // 骨架屏圆角
19
+ $radius-skeleton_li: var(--semi-border-radius-small); // 骨架屏圆角
20
20
 
package/lib/es/tagInput/tagInput.css CHANGED
@@ -30,6 +30,25 @@
30
30
  margin-right: 4px;
31
31
  cursor: move;
32
32
  }
33
+ .semi-tagInput-sortable-item {
34
+ position: relative;
35
+ }
36
+ .semi-tagInput-sortable-item-over {
37
+ overflow: visible;
38
+ }
39
+ .semi-tagInput-sortable-item-over::before {
40
+ content: "";
41
+ display: block;
42
+ height: 100%;
43
+ width: 2px;
44
+ background-color: var(--semi-color-primary);
45
+ position: absolute;
46
+ left: -2px;
47
+ top: 0;
48
+ }
49
+ .semi-tagInput-sortable-item-active {
50
+ opacity: 0.5;
51
+ }
33
52
  .semi-tagInput-hover {
34
53
  background-color: var(--semi-color-fill-1);
35
54
  border: 1px transparent solid;
package/lib/es/tagInput/tagInput.scss CHANGED
@@ -42,6 +42,27 @@ $module: #{$prefix}-tagInput;
42
42
  }
43
43
  }
44
44
 
45
+ &-sortable-item {
46
+ position: relative;
47
+ &-over {
48
+ overflow: visible;
49
+ &::before {
50
+ content: "";
51
+ display: block;
52
+ height: 100%;
53
+ width: $width-tagInput_sortable_item_over;
54
+ background-color: $color-tagInput_sortable_item_over-bg;
55
+ position: absolute;
56
+ left: -$width-tagInput_sortable_item_over;
57
+ top: 0;
58
+ }
59
+ }
60
+
61
+ &-active {
62
+ opacity: 0.5;
63
+ }
64
+ }
65
+
45
66
  &-hover {
46
67
  background-color: $color-tagInput_default-bg-hover;
47
68
  border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
package/lib/es/tagInput/variables.scss CHANGED
@@ -27,6 +27,7 @@ $color-tagInput_danger-bg-hover: var(--semi-color-danger-light-hover); // 危险
27
27
  $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 危险标签输入框描边颜色 - 悬浮
28
28
  $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
29
29
  $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
30
+ $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
30
31
 
31
32
  $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
32
33
 
@@ -48,6 +49,7 @@ $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空
48
49
  $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
49
50
  $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
50
51
  $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
52
+ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
51
53
 
52
54
  $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
53
55
 
package/lib/es/transfer/transfer.css CHANGED
@@ -143,10 +143,14 @@
143
143
  .semi-transfer-right-item-drag-handler {
144
144
  margin-right: 4px;
145
145
  flex-shrink: 0;
146
+ cursor: move;
146
147
  }
147
148
  .semi-transfer-right-item-drag-item-move {
148
149
  z-index: 2000;
149
150
  }
151
+ .semi-transfer-right-item-sortable-item-active {
152
+ opacity: 0;
153
+ }
150
154
  .semi-transfer-right-empty {
151
155
  position: absolute;
152
156
  height: 100%;
package/lib/es/transfer/transfer.scss CHANGED
@@ -169,12 +169,19 @@ $module: #{$prefix}-transfer;
169
169
  &-handler {
170
170
  margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
171
171
  flex-shrink: 0;
172
+ cursor: move;
172
173
  }
173
174
 
174
175
  &-item-move {
175
176
  z-index: $z-transfer_right_item_drag_item_move;
176
177
  }
177
178
  }
179
+
180
+ &-sortable-item {
181
+ &-active {
182
+ opacity: 0;
183
+ }
184
+ }
178
185
  }
179
186
 
180
187
  &-empty {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@douyinfe/semi-foundation",
3
- "version": "2.40.0-beta.0",
3
+ "version": "2.41.0-beta.0",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build:lib": "node ./scripts/compileLib.js",
7
7
  "prepublishOnly": "npm run build:lib"
8
8
  },
9
9
  "dependencies": {
10
- "@douyinfe/semi-animation": "2.40.0-beta.0",
10
+ "@douyinfe/semi-animation": "2.41.0-beta.0",
11
11
  "async-validator": "^3.5.0",
12
12
  "classnames": "^2.2.6",
13
13
  "date-fns": "^2.29.3",
@@ -23,7 +23,7 @@
23
23
  "*.scss",
24
24
  "*.css"
25
25
  ],
26
- "gitHead": "f42587885c81ecb266aa0d32d2feaa7633e01e67",
26
+ "gitHead": "f83f6076d1c6f3b64c1d9359a335a7182d991fb6",
27
27
  "devDependencies": {
28
28
  "@babel/plugin-transform-runtime": "^7.15.8",
29
29
  "@babel/preset-env": "^7.15.8",
package/skeleton/variables.scss CHANGED
@@ -15,6 +15,6 @@ $height-skeleton_button: $height-control-default; // 按钮骨架屏高度
15
15
 
16
16
  $spacing-skeleton_li-marginBottom: 10px; // 按钮骨架屏高度
17
17
 
18
- $radius-skeleton_item: 4px; // 骨架屏圆角
19
- $radius-skeleton_li: 4px; // 骨架屏圆角
18
+ $radius-skeleton_item: var(--semi-border-radius-small); // 骨架屏圆角
19
+ $radius-skeleton_li: var(--semi-border-radius-small); // 骨架屏圆角
20
20
 
package/tagInput/tagInput.scss CHANGED
@@ -42,6 +42,27 @@ $module: #{$prefix}-tagInput;
42
42
  }
43
43
  }
44
44
 
45
+ &-sortable-item {
46
+ position: relative;
47
+ &-over {
48
+ overflow: visible;
49
+ &::before {
50
+ content: "";
51
+ display: block;
52
+ height: 100%;
53
+ width: $width-tagInput_sortable_item_over;
54
+ background-color: $color-tagInput_sortable_item_over-bg;
55
+ position: absolute;
56
+ left: -$width-tagInput_sortable_item_over;
57
+ top: 0;
58
+ }
59
+ }
60
+
61
+ &-active {
62
+ opacity: 0.5;
63
+ }
64
+ }
65
+
45
66
  &-hover {
46
67
  background-color: $color-tagInput_default-bg-hover;
47
68
  border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
package/tagInput/variables.scss CHANGED
@@ -27,6 +27,7 @@ $color-tagInput_danger-bg-hover: var(--semi-color-danger-light-hover); // 危险
27
27
  $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 危险标签输入框描边颜色 - 悬浮
28
28
  $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
29
29
  $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
30
+ $color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
30
31
 
31
32
  $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
32
33
 
@@ -48,6 +49,7 @@ $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空
48
49
  $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
49
50
  $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
50
51
  $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
52
+ $width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
51
53
 
52
54
  $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
53
55
 
package/transfer/transfer.scss CHANGED
@@ -169,12 +169,19 @@ $module: #{$prefix}-transfer;
169
169
  &-handler {
170
170
  margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
171
171
  flex-shrink: 0;
172
+ cursor: move;
172
173
  }
173
174
 
174
175
  &-item-move {
175
176
  z-index: $z-transfer_right_item_drag_item_move;
176
177
  }
177
178
  }
179
+
180
+ &-sortable-item {
181
+ &-active {
182
+ opacity: 0;
183
+ }
184
+ }
178
185
  }
179
186
 
180
187
  &-empty {