bkui-vue 0.0.1-beta.96 → 0.0.1-beta.97
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 +1 -1
- package/dist/index.esm.js +20 -18
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/lib/select/index.d.ts +54 -1
- package/lib/select/index.js +1 -1
- package/lib/select/select.css +92 -47
- package/lib/select/select.d.ts +25 -0
- package/lib/select/select.less +6 -5
- package/lib/select/select.variable.css +92 -47
- package/package.json +1 -1
|
@@ -118,16 +118,23 @@
|
|
|
118
118
|
.bk-fade-transtion .bk-fade-leave-to {
|
|
119
119
|
opacity: 0;
|
|
120
120
|
}
|
|
121
|
-
.bk-
|
|
121
|
+
.bk-popover-content.bk-select-popover {
|
|
122
|
+
padding: 0;
|
|
123
|
+
}
|
|
124
|
+
.bk-select .bk-popover,
|
|
125
|
+
.bk-popover-content .bk-popover {
|
|
122
126
|
display: block;
|
|
123
127
|
}
|
|
124
|
-
.bk-select .mr5
|
|
128
|
+
.bk-select .mr5,
|
|
129
|
+
.bk-popover-content .mr5 {
|
|
125
130
|
margin-right: 5px;
|
|
126
131
|
}
|
|
127
|
-
.bk-select .ml5
|
|
132
|
+
.bk-select .ml5,
|
|
133
|
+
.bk-popover-content .ml5 {
|
|
128
134
|
margin-left: 5px;
|
|
129
135
|
}
|
|
130
|
-
.bk-select .input
|
|
136
|
+
.bk-select .input,
|
|
137
|
+
.bk-popover-content .input {
|
|
131
138
|
width: 100%;
|
|
132
139
|
height: 32px;
|
|
133
140
|
padding: 0 28px 0 10px;
|
|
@@ -147,56 +154,66 @@
|
|
|
147
154
|
text-overflow: ellipsis;
|
|
148
155
|
white-space: nowrap;
|
|
149
156
|
}
|
|
150
|
-
.bk-select .input::placeholder
|
|
157
|
+
.bk-select .input::placeholder,
|
|
158
|
+
.bk-popover-content .input::placeholder {
|
|
151
159
|
color: var(--light-gray);
|
|
152
160
|
}
|
|
153
|
-
.bk-select ul
|
|
161
|
+
.bk-select ul,
|
|
162
|
+
.bk-popover-content ul {
|
|
154
163
|
padding: 0;
|
|
155
164
|
margin: 0;
|
|
156
165
|
font-weight: normal;
|
|
157
166
|
list-style: none;
|
|
158
167
|
}
|
|
159
|
-
.bk-select .bk-popover-reference
|
|
168
|
+
.bk-select .bk-popover-reference,
|
|
169
|
+
.bk-popover-content .bk-popover-reference {
|
|
160
170
|
display: unset;
|
|
161
171
|
}
|
|
162
|
-
.bk-select .bk-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
.bk-select.large .bk-select-content {
|
|
172
|
+
.bk-select.large .bk-select-content,
|
|
173
|
+
.bk-popover-content.large .bk-select-content {
|
|
166
174
|
font-size: 14px;
|
|
167
175
|
}
|
|
168
|
-
.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag
|
|
176
|
+
.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag,
|
|
177
|
+
.bk-popover-content.is-focus.normal .bk-select-trigger .bk-select-tag {
|
|
169
178
|
border-color: var(--primary-color);
|
|
170
179
|
box-shadow: 0px 0px 3px 0px #a3c5fd;
|
|
171
180
|
}
|
|
172
|
-
.bk-select.popover-show .bk-select-trigger .angle-up
|
|
181
|
+
.bk-select.popover-show .bk-select-trigger .angle-up,
|
|
182
|
+
.bk-popover-content.popover-show .bk-select-trigger .angle-up {
|
|
173
183
|
transform: rotate(0);
|
|
174
184
|
}
|
|
175
|
-
.bk-select.is-disabled .bk-select-trigger .bk-input input
|
|
185
|
+
.bk-select.is-disabled .bk-select-trigger .bk-input input,
|
|
186
|
+
.bk-popover-content.is-disabled .bk-select-trigger .bk-input input {
|
|
176
187
|
cursor: not-allowed;
|
|
177
188
|
background-color: #fafbfd;
|
|
178
189
|
}
|
|
179
|
-
.bk-select .bk-select-trigger
|
|
190
|
+
.bk-select .bk-select-trigger,
|
|
191
|
+
.bk-popover-content .bk-select-trigger {
|
|
180
192
|
position: relative;
|
|
181
193
|
}
|
|
182
|
-
.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon
|
|
194
|
+
.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon,
|
|
195
|
+
.bk-popover-content .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
|
|
183
196
|
margin-right: 0;
|
|
184
197
|
}
|
|
185
|
-
.bk-select .bk-select-trigger .bk-input input
|
|
198
|
+
.bk-select .bk-select-trigger .bk-input input,
|
|
199
|
+
.bk-popover-content .bk-select-trigger .bk-input input {
|
|
186
200
|
cursor: pointer;
|
|
187
201
|
background-color: #fff;
|
|
188
202
|
}
|
|
189
|
-
.bk-select .bk-select-trigger .bk-input.is-focused
|
|
203
|
+
.bk-select .bk-select-trigger .bk-input.is-focused,
|
|
204
|
+
.bk-popover-content .bk-select-trigger .bk-input.is-focused {
|
|
190
205
|
border-color: var(--primary-color);
|
|
191
206
|
outline: 0;
|
|
192
207
|
box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
|
|
193
208
|
}
|
|
194
|
-
.bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity
|
|
209
|
+
.bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity,
|
|
210
|
+
.bk-popover-content .bk-select-trigger .bk-input.is-focused.is-simplicity {
|
|
195
211
|
border-color: transparent;
|
|
196
212
|
border-bottom-color: var(--primary-color);
|
|
197
213
|
box-shadow: none;
|
|
198
214
|
}
|
|
199
|
-
.bk-select .bk-select-trigger .bk-select-tag
|
|
215
|
+
.bk-select .bk-select-trigger .bk-select-tag,
|
|
216
|
+
.bk-popover-content .bk-select-trigger .bk-select-tag {
|
|
200
217
|
width: 100%;
|
|
201
218
|
height: 32px;
|
|
202
219
|
padding: 0 28px 0 10px;
|
|
@@ -222,10 +239,12 @@
|
|
|
222
239
|
align-items: center;
|
|
223
240
|
flex-wrap: wrap;
|
|
224
241
|
}
|
|
225
|
-
.bk-select .bk-select-trigger .bk-select-tag::placeholder
|
|
242
|
+
.bk-select .bk-select-trigger .bk-select-tag::placeholder,
|
|
243
|
+
.bk-popover-content .bk-select-trigger .bk-select-tag::placeholder {
|
|
226
244
|
color: var(--light-gray);
|
|
227
245
|
}
|
|
228
|
-
.bk-select .bk-select-trigger .bk-select-tag-input
|
|
246
|
+
.bk-select .bk-select-trigger .bk-select-tag-input,
|
|
247
|
+
.bk-popover-content .bk-select-trigger .bk-select-tag-input {
|
|
229
248
|
width: 100%;
|
|
230
249
|
height: 32px;
|
|
231
250
|
padding: 0 28px 0 10px;
|
|
@@ -252,14 +271,17 @@
|
|
|
252
271
|
outline: none;
|
|
253
272
|
flex-grow: 1;
|
|
254
273
|
}
|
|
255
|
-
.bk-select .bk-select-trigger .bk-select-tag-input::placeholder
|
|
274
|
+
.bk-select .bk-select-trigger .bk-select-tag-input::placeholder,
|
|
275
|
+
.bk-popover-content .bk-select-trigger .bk-select-tag-input::placeholder {
|
|
256
276
|
color: var(--light-gray);
|
|
257
277
|
}
|
|
258
|
-
.bk-select .bk-select-trigger .bk-select-tag .bk-tag
|
|
278
|
+
.bk-select .bk-select-trigger .bk-select-tag .bk-tag,
|
|
279
|
+
.bk-popover-content .bk-select-trigger .bk-select-tag .bk-tag {
|
|
259
280
|
max-width: 190px;
|
|
260
281
|
padding: 0 4px;
|
|
261
282
|
}
|
|
262
|
-
.bk-select .bk-select-trigger .angle-up
|
|
283
|
+
.bk-select .bk-select-trigger .angle-up,
|
|
284
|
+
.bk-popover-content .bk-select-trigger .angle-up {
|
|
263
285
|
right: 4px;
|
|
264
286
|
transform: rotate(180deg);
|
|
265
287
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -275,7 +297,8 @@
|
|
|
275
297
|
align-items: center;
|
|
276
298
|
justify-content: center;
|
|
277
299
|
}
|
|
278
|
-
.bk-select .bk-select-trigger .clear-icon
|
|
300
|
+
.bk-select .bk-select-trigger .clear-icon,
|
|
301
|
+
.bk-popover-content .bk-select-trigger .clear-icon {
|
|
279
302
|
right: 4px;
|
|
280
303
|
cursor: pointer;
|
|
281
304
|
transition: all 0.1s;
|
|
@@ -291,22 +314,26 @@
|
|
|
291
314
|
align-items: center;
|
|
292
315
|
justify-content: center;
|
|
293
316
|
}
|
|
294
|
-
.bk-select .bk-select-trigger .clear-icon:hover
|
|
317
|
+
.bk-select .bk-select-trigger .clear-icon:hover,
|
|
318
|
+
.bk-popover-content .bk-select-trigger .clear-icon:hover {
|
|
295
319
|
color: #979ba5;
|
|
296
320
|
}
|
|
297
|
-
.bk-select .bk-select-trigger .spinner
|
|
321
|
+
.bk-select .bk-select-trigger .spinner,
|
|
322
|
+
.bk-popover-content .bk-select-trigger .spinner {
|
|
298
323
|
position: absolute;
|
|
299
324
|
top: 8px;
|
|
300
325
|
right: 6px;
|
|
301
326
|
}
|
|
302
|
-
.bk-select .bk-select-empty
|
|
327
|
+
.bk-select .bk-select-empty,
|
|
328
|
+
.bk-popover-content .bk-select-empty {
|
|
303
329
|
display: flex;
|
|
304
330
|
align-items: center;
|
|
305
331
|
justify-content: center;
|
|
306
332
|
height: 56px;
|
|
307
333
|
color: #63656e;
|
|
308
334
|
}
|
|
309
|
-
.bk-select .bk-select-empty .spinner
|
|
335
|
+
.bk-select .bk-select-empty .spinner,
|
|
336
|
+
.bk-popover-content .bk-select-empty .spinner {
|
|
310
337
|
display: flex;
|
|
311
338
|
width: 14px;
|
|
312
339
|
height: 14px;
|
|
@@ -316,19 +343,23 @@
|
|
|
316
343
|
align-items: center;
|
|
317
344
|
justify-content: center;
|
|
318
345
|
}
|
|
319
|
-
.bk-select .bk-select-dropdown
|
|
346
|
+
.bk-select .bk-select-dropdown,
|
|
347
|
+
.bk-popover-content .bk-select-dropdown {
|
|
320
348
|
overflow: auto;
|
|
321
349
|
}
|
|
322
|
-
.bk-select .bk-select-extension
|
|
350
|
+
.bk-select .bk-select-extension,
|
|
351
|
+
.bk-popover-content .bk-select-extension {
|
|
323
352
|
display: flex;
|
|
324
353
|
height: 40px;
|
|
325
354
|
background-color: #fafbfd;
|
|
326
355
|
align-items: center;
|
|
327
356
|
}
|
|
328
|
-
.bk-select .bk-select-options
|
|
357
|
+
.bk-select .bk-select-options,
|
|
358
|
+
.bk-popover-content .bk-select-options {
|
|
329
359
|
padding: 8px 0;
|
|
330
360
|
}
|
|
331
|
-
.bk-select .bk-select-option
|
|
361
|
+
.bk-select .bk-select-option,
|
|
362
|
+
.bk-popover-content .bk-select-option {
|
|
332
363
|
position: relative;
|
|
333
364
|
height: 32px;
|
|
334
365
|
padding: 0 12px;
|
|
@@ -342,52 +373,64 @@
|
|
|
342
373
|
white-space: nowrap;
|
|
343
374
|
}
|
|
344
375
|
.bk-select .bk-select-option:hover,
|
|
345
|
-
.bk-
|
|
376
|
+
.bk-popover-content .bk-select-option:hover,
|
|
377
|
+
.bk-select .bk-select-option.is-hover,
|
|
378
|
+
.bk-popover-content .bk-select-option.is-hover {
|
|
346
379
|
color: #3a84ff;
|
|
347
380
|
background-color: #f5f7fa;
|
|
348
381
|
}
|
|
349
|
-
.bk-select .bk-select-option.is-selected
|
|
382
|
+
.bk-select .bk-select-option.is-selected,
|
|
383
|
+
.bk-popover-content .bk-select-option.is-selected {
|
|
350
384
|
color: #3a84ff;
|
|
351
385
|
}
|
|
352
|
-
.bk-select .bk-select-option.is-selected.is-multiple::after
|
|
386
|
+
.bk-select .bk-select-option.is-selected.is-multiple::after,
|
|
387
|
+
.bk-popover-content .bk-select-option.is-selected.is-multiple::after {
|
|
353
388
|
position: absolute;
|
|
354
389
|
right: 12px;
|
|
355
390
|
font-weight: 700;
|
|
356
391
|
content: '\2713';
|
|
357
392
|
}
|
|
358
|
-
.bk-select .bk-select-option.is-disabled
|
|
393
|
+
.bk-select .bk-select-option.is-disabled,
|
|
394
|
+
.bk-popover-content .bk-select-option.is-disabled {
|
|
359
395
|
color: #c4c6cc;
|
|
360
396
|
cursor: not-allowed;
|
|
361
397
|
background-color: transparent;
|
|
362
398
|
}
|
|
363
|
-
.bk-select .bk-select-options-loading
|
|
399
|
+
.bk-select .bk-select-options-loading,
|
|
400
|
+
.bk-popover-content .bk-select-options-loading {
|
|
364
401
|
display: flex;
|
|
365
402
|
align-items: center;
|
|
366
403
|
justify-content: center;
|
|
367
404
|
}
|
|
368
|
-
.bk-select .bk-option-group-label
|
|
405
|
+
.bk-select .bk-option-group-label,
|
|
406
|
+
.bk-popover-content .bk-option-group-label {
|
|
369
407
|
height: 32px;
|
|
370
408
|
padding: 0 8px;
|
|
371
409
|
line-height: 32px;
|
|
372
410
|
color: #979ba5;
|
|
373
411
|
text-align: left;
|
|
374
412
|
}
|
|
375
|
-
.bk-select .bk-option-group-label.collapsible
|
|
413
|
+
.bk-select .bk-option-group-label.collapsible,
|
|
414
|
+
.bk-popover-content .bk-option-group-label.collapsible {
|
|
376
415
|
cursor: pointer;
|
|
377
416
|
}
|
|
378
|
-
.bk-select .bk-option-group.collapsible .bk-select-option
|
|
417
|
+
.bk-select .bk-option-group.collapsible .bk-select-option,
|
|
418
|
+
.bk-popover-content .bk-option-group.collapsible .bk-select-option {
|
|
379
419
|
padding-left: 40px;
|
|
380
420
|
}
|
|
381
|
-
.bk-select .bk-option-group.disabled .default-group-label
|
|
421
|
+
.bk-select .bk-option-group.disabled .default-group-label,
|
|
422
|
+
.bk-popover-content .bk-option-group.disabled .default-group-label {
|
|
382
423
|
color: #c4c6cc;
|
|
383
424
|
cursor: not-allowed;
|
|
384
425
|
}
|
|
385
|
-
.bk-select .bk-option-group .default-group-label
|
|
426
|
+
.bk-select .bk-option-group .default-group-label,
|
|
427
|
+
.bk-popover-content .bk-option-group .default-group-label {
|
|
386
428
|
display: flex;
|
|
387
429
|
user-select: none;
|
|
388
430
|
align-items: center;
|
|
389
431
|
}
|
|
390
|
-
.bk-select .bk-option-group .default-group-label-icon
|
|
432
|
+
.bk-select .bk-option-group .default-group-label-icon,
|
|
433
|
+
.bk-popover-content .bk-option-group .default-group-label-icon {
|
|
391
434
|
display: flex;
|
|
392
435
|
width: 12px;
|
|
393
436
|
height: 12px;
|
|
@@ -396,9 +439,11 @@
|
|
|
396
439
|
align-items: center;
|
|
397
440
|
justify-content: center;
|
|
398
441
|
}
|
|
399
|
-
.bk-select .bk-option-group .default-group-label-icon.collapse
|
|
442
|
+
.bk-select .bk-option-group .default-group-label-icon.collapse,
|
|
443
|
+
.bk-popover-content .bk-option-group .default-group-label-icon.collapse {
|
|
400
444
|
transform: rotate(-90deg);
|
|
401
445
|
}
|
|
402
|
-
.bk-select .bk-option-group .bk-select-option
|
|
446
|
+
.bk-select .bk-option-group .bk-select-option,
|
|
447
|
+
.bk-popover-content .bk-option-group .bk-select-option {
|
|
403
448
|
padding-left: 24px;
|
|
404
449
|
}
|