bkui-vue 2.0.1-beta.77 → 2.0.1-beta.79

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 (16) hide show
  1. package/dist/index.cjs.js +30 -30
  2. package/dist/index.esm.js +4234 -4229
  3. package/dist/index.umd.js +28 -28
  4. package/dist/style.css +1 -1
  5. package/dist/style.variable.css +1 -1
  6. package/lib/button/button.css +188 -144
  7. package/lib/button/button.less +74 -71
  8. package/lib/button/button.variable.css +188 -144
  9. package/lib/index.js +1 -1
  10. package/lib/info-box/index.js +1 -0
  11. package/lib/overflow-title/index.js +15 -7
  12. package/lib/select/index.js +8 -6
  13. package/lib/table/table.css +188 -144
  14. package/lib/table/table.variable.css +188 -144
  15. package/lib/tag-input/index.js +18 -9
  16. package/package.json +1 -1
package/lib/table/table.css CHANGED
@@ -404,310 +404,354 @@
404
404
  align-items: center;
405
405
  justify-content: center;
406
406
  }
407
- .bk-button.bk-button-primary {
407
+ .bk-button.bk-button-small {
408
+ height: var(--component-size-small);
409
+ padding: var(--component-size-small-padding);
410
+ font-size: var(--font-size-base);
411
+ }
412
+ .bk-button.bk-button-large {
413
+ height: var(--component-size-large);
414
+ padding: var(--component-size-large-padding);
415
+ font-size: var(--font-size-large);
416
+ }
417
+ .bk-button .bk-button-text {
418
+ display: inline-flex;
419
+ align-items: center;
420
+ line-height: 1;
421
+ }
422
+ .bk-button.is-loading {
423
+ position: relative;
424
+ }
425
+ .bk-button.is-loading .bk-button-loading:not(:last-child) {
426
+ position: absolute;
427
+ }
428
+ .bk-button.is-loading .bk-button-text {
429
+ visibility: hidden;
430
+ }
431
+ .bk-button:hover {
432
+ border-color: var(--button-default-hover-border-color);
433
+ }
434
+ .bk-button:active {
435
+ color: var(--primary-color);
436
+ border-color: var(--primary-color);
437
+ }
438
+ .bk-button.is-text {
439
+ height: auto;
440
+ padding: 0;
441
+ font-size: inherit;
442
+ color: var(--default-color);
443
+ text-decoration: none;
444
+ cursor: pointer;
445
+ background-color: transparent;
446
+ border: none;
447
+ outline: none;
448
+ }
449
+ .bk-button.is-disabled {
450
+ color: var(--disable-color);
451
+ cursor: not-allowed;
452
+ border-color: var(--disable-color);
453
+ }
454
+ .bk-button.is-disabled:not(.is-text) {
455
+ background-color: var(--disable-bg-color);
456
+ }
457
+ .bk-button-group {
458
+ display: inline-block;
459
+ font-size: 0;
460
+ }
461
+ .bk-button-group.bk-button-group-small .bk-button {
462
+ height: var(--component-size-small);
463
+ padding: var(--component-size-small-padding);
464
+ font-size: var(--font-size-base);
465
+ }
466
+ .bk-button-group.bk-button-group-large .bk-button {
467
+ height: var(--component-size-large);
468
+ padding: var(--component-size-large-padding);
469
+ font-size: var(--font-size-large);
470
+ }
471
+ .bk-button-group .bk-button {
472
+ height: var(--component-size-base);
473
+ margin: 0 0 0 -1px;
474
+ border-radius: 0;
475
+ }
476
+ .bk-button-group .bk-button:not(.is-disabled) {
477
+ color: var(--default-color);
478
+ background-color: var(--white-color);
479
+ border-color: var(--light-gray);
480
+ }
481
+ .bk-button-group .bk-button.is-disabled {
482
+ color: var(--light-gray);
483
+ }
484
+ .bk-button-group .bk-button:first-child {
485
+ border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
486
+ }
487
+ .bk-button-group .bk-button:last-child {
488
+ border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
489
+ }
490
+ .bk-button-group .bk-button:only-child {
491
+ border-radius: var(--border-radius-base);
492
+ }
493
+ .bk-button-group .bk-button:hover:not(.is-disabled),
494
+ .bk-button-group .bk-button.is-selected:not(.is-disabled) {
495
+ position: relative;
496
+ z-index: 1;
497
+ color: var(--primary-color);
498
+ background-color: var(--white-color);
499
+ border-color: var(--primary-color);
500
+ }
501
+ .bk-button-group .bk-button.is-selected:not(.is-disabled) {
502
+ background-color: var(--button-selected-bg-color);
503
+ }
504
+ .bk-button-group .bk-button.is-selected.is-disabled {
505
+ background-color: var(--button-disabled-selected-bg-color);
506
+ }
507
+ .bk-button.bk-button-primary,
508
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary {
408
509
  background-color: var(--primary-color);
409
510
  color: var(--white-color);
410
511
  border-color: var(--primary-color);
411
512
  }
412
- .bk-button.bk-button-primary:hover {
513
+ .bk-button.bk-button-primary:hover,
514
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary:hover {
413
515
  background-color: var(--button-primary-hover-color);
414
516
  border-color: var(--button-primary-hover-color);
415
517
  }
416
- .bk-button.bk-button-primary:active {
518
+ .bk-button.bk-button-primary:active,
519
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary:active {
417
520
  background-color: var(--button-primary-active-color);
418
521
  border-color: var(--button-primary-active-color);
419
522
  color: var(--white-color);
420
523
  }
421
- .bk-button.bk-button-primary.is-outline {
524
+ .bk-button.bk-button-primary.is-outline,
525
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline {
422
526
  color: var(--primary-color);
423
527
  border-color: var(--primary-color);
424
528
  background-color: var(--white-color);
425
529
  }
426
- .bk-button.bk-button-primary.is-outline:hover {
530
+ .bk-button.bk-button-primary.is-outline:hover,
531
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline:hover {
427
532
  background-color: var(--button-primary-hover-color);
428
533
  border-color: var(--button-primary-hover-color);
429
534
  color: var(--white-color);
430
535
  }
431
- .bk-button.bk-button-primary.is-outline:active {
536
+ .bk-button.bk-button-primary.is-outline:active,
537
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-outline:active {
432
538
  background-color: var(--button-primary-active-color);
433
539
  border-color: var(--button-primary-active-color);
434
540
  color: var(--white-color);
435
541
  }
436
- .bk-button.bk-button-primary.is-text {
542
+ .bk-button.bk-button-primary.is-text,
543
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-text {
437
544
  color: var(--primary-color);
438
545
  background-color: transparent;
439
546
  border: none;
440
547
  }
441
- .bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
548
+ .bk-button.bk-button-primary.is-text:not(.is-disabled):hover,
549
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-text:not(.is-disabled):hover {
442
550
  color: var(--button-primary-hover-color);
443
551
  }
444
- .bk-button.bk-button-primary.is-disabled {
552
+ .bk-button.bk-button-primary.is-disabled,
553
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-disabled {
445
554
  color: var(--disable-color);
446
555
  cursor: not-allowed;
447
556
  }
448
- .bk-button.bk-button-primary.is-disabled:not(.is-text) {
557
+ .bk-button.bk-button-primary.is-disabled:not(.is-text),
558
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-primary.is-disabled:not(.is-text) {
449
559
  background-color: var(--disable-color);
450
560
  color: var(--white-color);
451
561
  border-color: var(--disable-color);
452
562
  }
453
- .bk-button.bk-button-hover-primary:hover {
563
+ .bk-button.bk-button-hover-primary:hover,
564
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-primary:hover {
454
565
  background-color: var(--button-primary-hover-color);
455
566
  border-color: var(--button-primary-hover-color);
456
567
  color: var(--white-color);
457
568
  }
458
- .bk-button.bk-button-warning {
569
+ .bk-button.bk-button-warning,
570
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning {
459
571
  background-color: var(--warning-color);
460
572
  color: var(--white-color);
461
573
  border-color: var(--warning-color);
462
574
  }
463
- .bk-button.bk-button-warning:hover {
575
+ .bk-button.bk-button-warning:hover,
576
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning:hover {
464
577
  background-color: var(--button-warning-hover-color);
465
578
  border-color: var(--button-warning-hover-color);
466
579
  }
467
- .bk-button.bk-button-warning:active {
580
+ .bk-button.bk-button-warning:active,
581
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning:active {
468
582
  background-color: var(--button-warning-active-color);
469
583
  border-color: var(--button-warning-active-color);
470
584
  color: var(--white-color);
471
585
  }
472
- .bk-button.bk-button-warning.is-outline {
586
+ .bk-button.bk-button-warning.is-outline,
587
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline {
473
588
  color: var(--warning-color);
474
589
  border-color: var(--warning-color);
475
590
  background-color: var(--white-color);
476
591
  }
477
- .bk-button.bk-button-warning.is-outline:hover {
592
+ .bk-button.bk-button-warning.is-outline:hover,
593
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline:hover {
478
594
  background-color: var(--button-warning-hover-color);
479
595
  border-color: var(--button-warning-hover-color);
480
596
  color: var(--white-color);
481
597
  }
482
- .bk-button.bk-button-warning.is-outline:active {
598
+ .bk-button.bk-button-warning.is-outline:active,
599
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-outline:active {
483
600
  background-color: var(--button-warning-active-color);
484
601
  border-color: var(--button-warning-active-color);
485
602
  color: var(--white-color);
486
603
  }
487
- .bk-button.bk-button-warning.is-text {
604
+ .bk-button.bk-button-warning.is-text,
605
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-text {
488
606
  color: var(--warning-color);
489
607
  background-color: transparent;
490
608
  border: none;
491
609
  }
492
- .bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
610
+ .bk-button.bk-button-warning.is-text:not(.is-disabled):hover,
611
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-text:not(.is-disabled):hover {
493
612
  color: var(--button-warning-hover-color);
494
613
  }
495
- .bk-button.bk-button-warning.is-disabled {
614
+ .bk-button.bk-button-warning.is-disabled,
615
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-disabled {
496
616
  color: var(--disable-color);
497
617
  cursor: not-allowed;
498
618
  }
499
- .bk-button.bk-button-warning.is-disabled:not(.is-text) {
619
+ .bk-button.bk-button-warning.is-disabled:not(.is-text),
620
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-warning.is-disabled:not(.is-text) {
500
621
  background-color: var(--disable-color);
501
622
  color: var(--white-color);
502
623
  border-color: var(--disable-color);
503
624
  }
504
- .bk-button.bk-button-hover-warning:hover {
625
+ .bk-button.bk-button-hover-warning:hover,
626
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-warning:hover {
505
627
  background-color: var(--button-warning-hover-color);
506
628
  border-color: var(--button-warning-hover-color);
507
629
  color: var(--white-color);
508
630
  }
509
- .bk-button.bk-button-success {
631
+ .bk-button.bk-button-success,
632
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success {
510
633
  background-color: var(--success-color);
511
634
  color: var(--white-color);
512
635
  border-color: var(--success-color);
513
636
  }
514
- .bk-button.bk-button-success:hover {
637
+ .bk-button.bk-button-success:hover,
638
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success:hover {
515
639
  background-color: var(--button-success-hover-color);
516
640
  border-color: var(--button-success-hover-color);
517
641
  }
518
- .bk-button.bk-button-success:active {
642
+ .bk-button.bk-button-success:active,
643
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success:active {
519
644
  background-color: var(--button-success-active-color);
520
645
  border-color: var(--button-success-active-color);
521
646
  color: var(--white-color);
522
647
  }
523
- .bk-button.bk-button-success.is-outline {
648
+ .bk-button.bk-button-success.is-outline,
649
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline {
524
650
  color: var(--success-color);
525
651
  border-color: var(--success-color);
526
652
  background-color: var(--white-color);
527
653
  }
528
- .bk-button.bk-button-success.is-outline:hover {
654
+ .bk-button.bk-button-success.is-outline:hover,
655
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline:hover {
529
656
  background-color: var(--button-success-hover-color);
530
657
  border-color: var(--button-success-hover-color);
531
658
  color: var(--white-color);
532
659
  }
533
- .bk-button.bk-button-success.is-outline:active {
660
+ .bk-button.bk-button-success.is-outline:active,
661
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-outline:active {
534
662
  background-color: var(--button-success-active-color);
535
663
  border-color: var(--button-success-active-color);
536
664
  color: var(--white-color);
537
665
  }
538
- .bk-button.bk-button-success.is-text {
666
+ .bk-button.bk-button-success.is-text,
667
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-text {
539
668
  color: var(--success-color);
540
669
  background-color: transparent;
541
670
  border: none;
542
671
  }
543
- .bk-button.bk-button-success.is-text:not(.is-disabled):hover {
672
+ .bk-button.bk-button-success.is-text:not(.is-disabled):hover,
673
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-text:not(.is-disabled):hover {
544
674
  color: var(--button-success-hover-color);
545
675
  }
546
- .bk-button.bk-button-success.is-disabled {
676
+ .bk-button.bk-button-success.is-disabled,
677
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-disabled {
547
678
  color: var(--disable-color);
548
679
  cursor: not-allowed;
549
680
  }
550
- .bk-button.bk-button-success.is-disabled:not(.is-text) {
681
+ .bk-button.bk-button-success.is-disabled:not(.is-text),
682
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-success.is-disabled:not(.is-text) {
551
683
  background-color: var(--disable-color);
552
684
  color: var(--white-color);
553
685
  border-color: var(--disable-color);
554
686
  }
555
- .bk-button.bk-button-hover-success:hover {
687
+ .bk-button.bk-button-hover-success:hover,
688
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-success:hover {
556
689
  background-color: var(--button-success-hover-color);
557
690
  border-color: var(--button-success-hover-color);
558
691
  color: var(--white-color);
559
692
  }
560
- .bk-button.bk-button-danger {
693
+ .bk-button.bk-button-danger,
694
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger {
561
695
  background-color: var(--danger-color);
562
696
  color: var(--white-color);
563
697
  border-color: var(--danger-color);
564
698
  }
565
- .bk-button.bk-button-danger:hover {
699
+ .bk-button.bk-button-danger:hover,
700
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger:hover {
566
701
  background-color: var(--button-danger-hover-color);
567
702
  border-color: var(--button-danger-hover-color);
568
703
  }
569
- .bk-button.bk-button-danger:active {
704
+ .bk-button.bk-button-danger:active,
705
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger:active {
570
706
  background-color: var(--button-danger-active-color);
571
707
  border-color: var(--button-danger-active-color);
572
708
  color: var(--white-color);
573
709
  }
574
- .bk-button.bk-button-danger.is-outline {
710
+ .bk-button.bk-button-danger.is-outline,
711
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline {
575
712
  color: var(--danger-color);
576
713
  border-color: var(--danger-color);
577
714
  background-color: var(--white-color);
578
715
  }
579
- .bk-button.bk-button-danger.is-outline:hover {
716
+ .bk-button.bk-button-danger.is-outline:hover,
717
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline:hover {
580
718
  background-color: var(--button-danger-hover-color);
581
719
  border-color: var(--button-danger-hover-color);
582
720
  color: var(--white-color);
583
721
  }
584
- .bk-button.bk-button-danger.is-outline:active {
722
+ .bk-button.bk-button-danger.is-outline:active,
723
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-outline:active {
585
724
  background-color: var(--button-danger-active-color);
586
725
  border-color: var(--button-danger-active-color);
587
726
  color: var(--white-color);
588
727
  }
589
- .bk-button.bk-button-danger.is-text {
728
+ .bk-button.bk-button-danger.is-text,
729
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-text {
590
730
  color: var(--danger-color);
591
731
  background-color: transparent;
592
732
  border: none;
593
733
  }
594
- .bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
734
+ .bk-button.bk-button-danger.is-text:not(.is-disabled):hover,
735
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-text:not(.is-disabled):hover {
595
736
  color: var(--button-danger-hover-color);
596
737
  }
597
- .bk-button.bk-button-danger.is-disabled {
738
+ .bk-button.bk-button-danger.is-disabled,
739
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-disabled {
598
740
  color: var(--disable-color);
599
741
  cursor: not-allowed;
600
742
  }
601
- .bk-button.bk-button-danger.is-disabled:not(.is-text) {
743
+ .bk-button.bk-button-danger.is-disabled:not(.is-text),
744
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-danger.is-disabled:not(.is-text) {
602
745
  background-color: var(--disable-color);
603
746
  color: var(--white-color);
604
747
  border-color: var(--disable-color);
605
748
  }
606
- .bk-button.bk-button-hover-danger:hover {
749
+ .bk-button.bk-button-hover-danger:hover,
750
+ .bk-button-group .is-selected:not(.is-disabled).bk-button-hover-danger:hover {
607
751
  background-color: var(--button-danger-hover-color);
608
752
  border-color: var(--button-danger-hover-color);
609
753
  color: var(--white-color);
610
754
  }
611
- .bk-button.bk-button-small {
612
- height: var(--component-size-small);
613
- padding: var(--component-size-small-padding);
614
- font-size: var(--font-size-base);
615
- }
616
- .bk-button.bk-button-large {
617
- height: var(--component-size-large);
618
- padding: var(--component-size-large-padding);
619
- font-size: var(--font-size-large);
620
- }
621
- .bk-button .bk-button-text {
622
- display: inline-flex;
623
- align-items: center;
624
- line-height: 1;
625
- }
626
- .bk-button.is-loading {
627
- position: relative;
628
- }
629
- .bk-button.is-loading .bk-button-loading:not(:last-child) {
630
- position: absolute;
631
- }
632
- .bk-button.is-loading .bk-button-text {
633
- visibility: hidden;
634
- }
635
- .bk-button:hover {
636
- border-color: var(--button-default-hover-border-color);
637
- }
638
- .bk-button:active {
639
- color: var(--primary-color);
640
- border-color: var(--primary-color);
641
- }
642
- .bk-button.is-text {
643
- height: auto;
644
- padding: 0;
645
- font-size: inherit;
646
- color: var(--default-color);
647
- text-decoration: none;
648
- cursor: pointer;
649
- background-color: transparent;
650
- border: none;
651
- outline: none;
652
- }
653
- .bk-button.is-disabled {
654
- color: var(--disable-color);
655
- cursor: not-allowed;
656
- border-color: var(--disable-color);
657
- }
658
- .bk-button.is-disabled:not(.is-text) {
659
- background-color: var(--disable-bg-color);
660
- }
661
- .bk-button-group {
662
- display: inline-block;
663
- font-size: 0;
664
- }
665
- .bk-button-group.bk-button-group-small .bk-button {
666
- height: var(--component-size-small);
667
- padding: var(--component-size-small-padding);
668
- font-size: var(--font-size-base);
669
- }
670
- .bk-button-group.bk-button-group-large .bk-button {
671
- height: var(--component-size-large);
672
- padding: var(--component-size-large-padding);
673
- font-size: var(--font-size-large);
674
- }
675
- .bk-button-group .bk-button {
676
- height: var(--component-size-base);
677
- margin: 0 0 0 -1px;
678
- border-radius: 0;
679
- }
680
- .bk-button-group .bk-button:not(.is-disabled) {
681
- color: var(--default-color);
682
- background-color: var(--white-color);
683
- border-color: var(--light-gray);
684
- }
685
- .bk-button-group .bk-button.is-disabled {
686
- color: var(--light-gray);
687
- }
688
- .bk-button-group .bk-button:first-child {
689
- border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
690
- }
691
- .bk-button-group .bk-button:last-child {
692
- border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
693
- }
694
- .bk-button-group .bk-button:only-child {
695
- border-radius: var(--border-radius-base);
696
- }
697
- .bk-button-group .bk-button:hover:not(.is-disabled),
698
- .bk-button-group .bk-button.is-selected:not(.is-disabled) {
699
- position: relative;
700
- z-index: 1;
701
- color: var(--primary-color);
702
- background-color: var(--white-color);
703
- border-color: var(--primary-color);
704
- }
705
- .bk-button-group .bk-button.is-selected:not(.is-disabled) {
706
- background-color: var(--button-selected-bg-color);
707
- }
708
- .bk-button-group .bk-button.is-selected.is-disabled {
709
- background-color: var(--button-disabled-selected-bg-color);
710
- }
711
755
  .bk-exception {
712
756
  position: relative;
713
757
  display: flex;