@douyinfe/semi-foundation 2.40.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.
- package/lib/cjs/tagInput/tagInput.css +19 -0
- package/lib/cjs/tagInput/tagInput.scss +21 -0
- package/lib/cjs/tagInput/variables.scss +2 -0
- package/lib/cjs/transfer/transfer.css +4 -0
- package/lib/cjs/transfer/transfer.scss +7 -0
- package/lib/es/tagInput/tagInput.css +19 -0
- package/lib/es/tagInput/tagInput.scss +21 -0
- package/lib/es/tagInput/variables.scss +2 -0
- package/lib/es/transfer/transfer.css +4 -0
- package/lib/es/transfer/transfer.scss +7 -0
- package/package.json +3 -3
- package/tagInput/tagInput.scss +21 -0
- package/tagInput/variables.scss +2 -0
- package/transfer/transfer.scss +7 -0
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -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%;
|
|
@@ -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 {
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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
|
|
|
@@ -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%;
|
|
@@ -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.
|
|
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.
|
|
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": "
|
|
26
|
+
"gitHead": "f83f6076d1c6f3b64c1d9359a335a7182d991fb6",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
29
29
|
"@babel/preset-env": "^7.15.8",
|
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 {
|