bkui-vue 0.0.1-beta.80 → 0.0.1-beta.83
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/dist/index.cjs.js +28 -28
- package/dist/index.esm.js +473 -213
- package/dist/index.umd.js +27 -27
- package/dist/style.css +1 -1
- package/lib/button/button.css +16 -11
- package/lib/button/button.d.ts +0 -10
- package/lib/button/button.less +28 -13
- package/lib/button/button.variable.css +16 -11
- package/lib/button/index.d.ts +1 -16
- package/lib/button/index.js +1 -1
- package/lib/cascader/cascader.d.ts +1 -1
- package/lib/cascader/index.d.ts +4 -4
- package/lib/date-picker/index.js +1 -1
- package/lib/input/input.css +4 -1
- package/lib/input/input.less +4 -1
- package/lib/input/input.variable.css +4 -1
- package/lib/loading/loading.css +4 -3
- package/lib/loading/loading.less +4 -3
- package/lib/loading/loading.variable.css +4 -3
- package/lib/pagination/index.js +1 -1
- package/lib/select/common.d.ts +4 -4
- package/lib/select/index.d.ts +563 -212
- package/lib/select/index.js +1 -1
- package/lib/select/option.d.ts +11 -4
- package/lib/select/select.css +31 -59
- package/lib/select/select.d.ts +168 -62
- package/lib/select/select.less +43 -51
- package/lib/select/select.variable.css +31 -59
- package/lib/select/selectTagInput.d.ts +71 -0
- package/lib/select/type.d.ts +9 -5
- package/lib/shared/index.js +1 -1
- package/lib/tab/index.d.ts +7 -7
- package/lib/tab/tab.d.ts +2 -2
- package/lib/table/index.js +1 -1
- package/lib/table/props.d.ts +1 -0
- package/lib/tag-input/index.d.ts +4 -4
- package/lib/tag-input/index.js +1 -1
- package/lib/tag-input/tag-input.d.ts +1 -1
- package/lib/transfer/index.js +1 -1
- package/lib/transfer/transfer.css +41 -60
- package/lib/transfer/transfer.less +55 -82
- package/lib/transfer/transfer.variable.css +41 -60
- package/package.json +1 -1
@@ -19,56 +19,44 @@
|
|
19
19
|
@iconNormalSize: 22px;
|
20
20
|
|
21
21
|
.@{bk-prefix}-transfer {
|
22
|
-
position: relative;
|
23
22
|
display: flex;
|
24
|
-
font-size: 14px;
|
25
|
-
flex-direction: row;
|
26
23
|
justify-content: center;
|
24
|
+
align-items: center;
|
25
|
+
font-size: 14px;
|
27
26
|
|
28
27
|
.transfer {
|
29
|
-
position: absolute;
|
30
|
-
top: 50%;
|
31
|
-
left: 50%;
|
32
28
|
width: 30px;
|
33
29
|
height: 30px;
|
30
|
+
margin: 0 2px;
|
34
31
|
background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
|
35
|
-
transform: translate(-50%, -50%);
|
36
32
|
}
|
37
33
|
|
38
34
|
.source-list,
|
39
35
|
.target-list {
|
36
|
+
flex: 1;
|
37
|
+
display: flex;
|
38
|
+
flex-direction: column;
|
40
39
|
height: 400px;
|
41
40
|
min-width: 200px;
|
42
41
|
overflow: hidden;
|
43
42
|
background-color: #fff;
|
44
43
|
border: 1px solid @borderInlineColor;
|
45
44
|
border-radius: 2px;
|
46
|
-
flex: 1;
|
47
45
|
|
48
|
-
.slot-header
|
49
|
-
|
46
|
+
.slot-header,
|
47
|
+
.header {
|
50
48
|
height: 43px;
|
51
49
|
padding: 0 20px;
|
52
|
-
line-height: 43px;
|
53
50
|
background-color: @newGreyColor3;
|
54
51
|
border-bottom: 1px solid @borderInlineColor;
|
55
|
-
|
56
|
-
.slot-content {
|
57
|
-
position: relative;
|
58
|
-
}
|
59
52
|
}
|
60
53
|
|
61
54
|
.header {
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
line-height: 43px;
|
66
|
-
background-color: @newGreyColor3;
|
67
|
-
border-bottom: 1px solid @borderInlineColor;
|
55
|
+
display: flex;
|
56
|
+
align-items: center;
|
57
|
+
justify-content: space-between;
|
68
58
|
|
69
59
|
span {
|
70
|
-
position: absolute;
|
71
|
-
right: 10px;
|
72
60
|
font-size: 12px;
|
73
61
|
color: @newMainColor;
|
74
62
|
cursor: pointer;
|
@@ -79,58 +67,64 @@
|
|
79
67
|
}
|
80
68
|
}
|
81
69
|
}
|
70
|
+
|
71
|
+
.transfer-search-input {
|
72
|
+
height: 36px;
|
73
|
+
border-bottom: 1px solid @newGreyColor2;
|
74
|
+
border-width: 0 0 1px 0;
|
75
|
+
border-radius: 0;
|
76
|
+
outline: none;
|
77
|
+
|
78
|
+
&.is-focused {
|
79
|
+
box-shadow: none;
|
80
|
+
}
|
81
|
+
}
|
82
82
|
|
83
83
|
.empty {
|
84
|
-
|
85
|
-
|
86
|
-
|
84
|
+
flex: 1;
|
85
|
+
display: flex;
|
86
|
+
align-items: center;
|
87
|
+
justify-content: center;
|
88
|
+
padding-bottom: 30px;
|
87
89
|
color: @newGreyColor;
|
88
|
-
text-align: center;
|
89
90
|
cursor: default;
|
90
91
|
}
|
91
92
|
|
92
93
|
.content {
|
93
|
-
|
94
|
-
max-height: calc(100% - 50px);
|
95
|
-
padding: 0;
|
94
|
+
flex: 1;
|
96
95
|
margin: 6px 0;
|
97
96
|
overflow-y: auto;
|
98
97
|
|
99
|
-
|
100
|
-
|
101
|
-
|
98
|
+
li.custom-item,
|
99
|
+
li .item-content {
|
100
|
+
display: flex;
|
101
|
+
align-items: center;
|
102
|
+
height: 40px;
|
103
|
+
padding: 0 20px;
|
104
|
+
cursor: pointer;
|
102
105
|
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
display: flex;
|
108
|
-
height: 40px;
|
109
|
-
padding: 0 20px;
|
110
|
-
line-height: 40px;
|
111
|
-
list-style: none;
|
112
|
-
cursor: pointer;
|
113
|
-
align-items: center;
|
114
|
-
|
115
|
-
&:hover {
|
116
|
-
color: @newMainColor;
|
117
|
-
background-color: #eef6fe;
|
118
|
-
}
|
106
|
+
&:hover {
|
107
|
+
color: @newMainColor;
|
108
|
+
background-color: #eef6fe;
|
109
|
+
}
|
119
110
|
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
111
|
+
.content-text {
|
112
|
+
flex: 1;
|
113
|
+
overflow: hidden;
|
114
|
+
text-overflow: ellipsis;
|
115
|
+
white-space: nowrap;
|
116
|
+
}
|
126
117
|
|
127
|
-
|
128
|
-
|
129
|
-
flex: 22px 0 0;
|
118
|
+
.icon-wrapper {
|
119
|
+
visibility: hidden;
|
130
120
|
|
131
|
-
|
132
|
-
|
133
|
-
|
121
|
+
&.hover {
|
122
|
+
visibility: visible;
|
123
|
+
}
|
124
|
+
|
125
|
+
.bk-icon {
|
126
|
+
display: flex;
|
127
|
+
font-size: @iconNormalSize;
|
134
128
|
}
|
135
129
|
}
|
136
130
|
}
|
@@ -145,27 +139,6 @@
|
|
145
139
|
background-color: #e6e9ea;
|
146
140
|
border-radius: 2px;
|
147
141
|
}
|
148
|
-
|
149
|
-
.bk-icon {
|
150
|
-
font-size: @iconNormalSize;
|
151
|
-
}
|
152
|
-
}
|
153
|
-
}
|
154
|
-
|
155
|
-
.target-list {
|
156
|
-
margin-left: 33px;
|
157
|
-
}
|
158
|
-
|
159
|
-
.transfer-search-input {
|
160
|
-
height: 36px;
|
161
|
-
line-height: 34px;
|
162
|
-
border: none;
|
163
|
-
border-bottom: 1px solid @newGreyColor2;
|
164
|
-
outline: none;
|
165
|
-
|
166
|
-
&.is-focused {
|
167
|
-
border-color: @newGreyColor2;
|
168
|
-
box-shadow: 0px 0px 3px 0px transparent;
|
169
142
|
}
|
170
143
|
}
|
171
144
|
}
|
@@ -104,57 +104,46 @@
|
|
104
104
|
/* 重点表示、强调、链接以及带有明确指示性 */
|
105
105
|
/* 正常尺寸图标 */
|
106
106
|
.bk-transfer {
|
107
|
-
position: relative;
|
108
107
|
display: flex;
|
109
|
-
font-size: 14px;
|
110
|
-
flex-direction: row;
|
111
108
|
justify-content: center;
|
109
|
+
align-items: center;
|
110
|
+
font-size: 14px;
|
112
111
|
}
|
113
112
|
.bk-transfer .transfer {
|
114
|
-
position: absolute;
|
115
|
-
top: 50%;
|
116
|
-
left: 50%;
|
117
113
|
width: 30px;
|
118
114
|
height: 30px;
|
115
|
+
margin: 0 2px;
|
119
116
|
background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
|
120
|
-
transform: translate(-50%, -50%);
|
121
117
|
}
|
122
118
|
.bk-transfer .source-list,
|
123
119
|
.bk-transfer .target-list {
|
120
|
+
flex: 1;
|
121
|
+
display: flex;
|
122
|
+
flex-direction: column;
|
124
123
|
height: 400px;
|
125
124
|
min-width: 200px;
|
126
125
|
overflow: hidden;
|
127
126
|
background-color: #fff;
|
128
127
|
border: 1px solid #dde4eb;
|
129
128
|
border-radius: 2px;
|
130
|
-
flex: 1;
|
131
129
|
}
|
132
130
|
.bk-transfer .source-list .slot-header,
|
133
|
-
.bk-transfer .target-list .slot-header
|
134
|
-
|
131
|
+
.bk-transfer .target-list .slot-header,
|
132
|
+
.bk-transfer .source-list .header,
|
133
|
+
.bk-transfer .target-list .header {
|
135
134
|
height: 43px;
|
136
135
|
padding: 0 20px;
|
137
|
-
line-height: 43px;
|
138
136
|
background-color: #fafbfd;
|
139
137
|
border-bottom: 1px solid #dde4eb;
|
140
138
|
}
|
141
|
-
.bk-transfer .source-list .slot-header .slot-content,
|
142
|
-
.bk-transfer .target-list .slot-header .slot-content {
|
143
|
-
position: relative;
|
144
|
-
}
|
145
139
|
.bk-transfer .source-list .header,
|
146
140
|
.bk-transfer .target-list .header {
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
line-height: 43px;
|
151
|
-
background-color: #fafbfd;
|
152
|
-
border-bottom: 1px solid #dde4eb;
|
141
|
+
display: flex;
|
142
|
+
align-items: center;
|
143
|
+
justify-content: space-between;
|
153
144
|
}
|
154
145
|
.bk-transfer .source-list .header span,
|
155
146
|
.bk-transfer .target-list .header span {
|
156
|
-
position: absolute;
|
157
|
-
right: 10px;
|
158
147
|
font-size: 12px;
|
159
148
|
color: #3a84ff;
|
160
149
|
cursor: pointer;
|
@@ -164,39 +153,43 @@
|
|
164
153
|
color: #c4c6cc;
|
165
154
|
cursor: not-allowed;
|
166
155
|
}
|
156
|
+
.bk-transfer .source-list .transfer-search-input,
|
157
|
+
.bk-transfer .target-list .transfer-search-input {
|
158
|
+
height: 36px;
|
159
|
+
border-bottom: 1px solid #f0f1f5;
|
160
|
+
border-width: 0 0 1px 0;
|
161
|
+
border-radius: 0;
|
162
|
+
outline: none;
|
163
|
+
}
|
164
|
+
.bk-transfer .source-list .transfer-search-input.is-focused,
|
165
|
+
.bk-transfer .target-list .transfer-search-input.is-focused {
|
166
|
+
box-shadow: none;
|
167
|
+
}
|
167
168
|
.bk-transfer .source-list .empty,
|
168
169
|
.bk-transfer .target-list .empty {
|
169
|
-
|
170
|
-
|
171
|
-
|
170
|
+
flex: 1;
|
171
|
+
display: flex;
|
172
|
+
align-items: center;
|
173
|
+
justify-content: center;
|
174
|
+
padding-bottom: 30px;
|
172
175
|
color: #c4c6cc;
|
173
|
-
text-align: center;
|
174
176
|
cursor: default;
|
175
177
|
}
|
176
178
|
.bk-transfer .source-list .content,
|
177
179
|
.bk-transfer .target-list .content {
|
178
|
-
|
179
|
-
max-height: calc(100% - 50px);
|
180
|
-
padding: 0;
|
180
|
+
flex: 1;
|
181
181
|
margin: 6px 0;
|
182
182
|
overflow-y: auto;
|
183
183
|
}
|
184
|
-
.bk-transfer .source-list .content.is-search,
|
185
|
-
.bk-transfer .target-list .content.is-search {
|
186
|
-
max-height: calc(100% - 86px);
|
187
|
-
}
|
188
184
|
.bk-transfer .source-list .content li.custom-item,
|
189
185
|
.bk-transfer .target-list .content li.custom-item,
|
190
186
|
.bk-transfer .source-list .content li .item-content,
|
191
187
|
.bk-transfer .target-list .content li .item-content {
|
192
|
-
position: relative;
|
193
188
|
display: flex;
|
189
|
+
align-items: center;
|
194
190
|
height: 40px;
|
195
191
|
padding: 0 20px;
|
196
|
-
line-height: 40px;
|
197
|
-
list-style: none;
|
198
192
|
cursor: pointer;
|
199
|
-
align-items: center;
|
200
193
|
}
|
201
194
|
.bk-transfer .source-list .content li.custom-item:hover,
|
202
195
|
.bk-transfer .target-list .content li.custom-item:hover,
|
@@ -209,23 +202,29 @@
|
|
209
202
|
.bk-transfer .target-list .content li.custom-item .content-text,
|
210
203
|
.bk-transfer .source-list .content li .item-content .content-text,
|
211
204
|
.bk-transfer .target-list .content li .item-content .content-text {
|
205
|
+
flex: 1;
|
212
206
|
overflow: hidden;
|
213
207
|
text-overflow: ellipsis;
|
214
208
|
white-space: nowrap;
|
215
|
-
flex: 1;
|
216
209
|
}
|
217
210
|
.bk-transfer .source-list .content li.custom-item .icon-wrapper,
|
218
211
|
.bk-transfer .target-list .content li.custom-item .icon-wrapper,
|
219
212
|
.bk-transfer .source-list .content li .item-content .icon-wrapper,
|
220
213
|
.bk-transfer .target-list .content li .item-content .icon-wrapper {
|
221
|
-
|
222
|
-
flex: 22px 0 0;
|
214
|
+
visibility: hidden;
|
223
215
|
}
|
224
216
|
.bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
|
225
217
|
.bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
|
226
218
|
.bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
|
227
219
|
.bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
|
228
|
-
|
220
|
+
visibility: visible;
|
221
|
+
}
|
222
|
+
.bk-transfer .source-list .content li.custom-item .icon-wrapper .bk-icon,
|
223
|
+
.bk-transfer .target-list .content li.custom-item .icon-wrapper .bk-icon,
|
224
|
+
.bk-transfer .source-list .content li .item-content .icon-wrapper .bk-icon,
|
225
|
+
.bk-transfer .target-list .content li .item-content .icon-wrapper .bk-icon {
|
226
|
+
display: flex;
|
227
|
+
font-size: 22px;
|
229
228
|
}
|
230
229
|
.bk-transfer .source-list .content::-webkit-scrollbar,
|
231
230
|
.bk-transfer .target-list .content::-webkit-scrollbar {
|
@@ -237,21 +236,3 @@
|
|
237
236
|
background-color: #e6e9ea;
|
238
237
|
border-radius: 2px;
|
239
238
|
}
|
240
|
-
.bk-transfer .source-list .content .bk-icon,
|
241
|
-
.bk-transfer .target-list .content .bk-icon {
|
242
|
-
font-size: 22px;
|
243
|
-
}
|
244
|
-
.bk-transfer .target-list {
|
245
|
-
margin-left: 33px;
|
246
|
-
}
|
247
|
-
.bk-transfer .transfer-search-input {
|
248
|
-
height: 36px;
|
249
|
-
line-height: 34px;
|
250
|
-
border: none;
|
251
|
-
border-bottom: 1px solid #f0f1f5;
|
252
|
-
outline: none;
|
253
|
-
}
|
254
|
-
.bk-transfer .transfer-search-input.is-focused {
|
255
|
-
border-color: #f0f1f5;
|
256
|
-
box-shadow: 0px 0px 3px 0px transparent;
|
257
|
-
}
|