bkui-vue 0.0.1-beta.20 → 0.0.1-beta.21

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 (46) hide show
  1. package/README.md +7 -3
  2. package/README_EN.md +7 -3
  3. package/dist/bkui-vue.cjs.js +230 -208
  4. package/dist/bkui-vue.esm.js +230 -208
  5. package/dist/bkui-vue.umd.js +230 -208
  6. package/dist/style.css +127 -85
  7. package/lib/button/button.css +9 -0
  8. package/lib/button/button.d.ts +25 -1
  9. package/lib/button/button.less +18 -10
  10. package/lib/button/button.variable.css +9 -0
  11. package/lib/button/index.d.ts +42 -4
  12. package/lib/button/index.js +1 -1
  13. package/lib/code-diff/code-diff.css +114 -0
  14. package/lib/code-diff/code-diff.d.ts +71 -0
  15. package/lib/code-diff/code-diff.less +144 -0
  16. package/lib/code-diff/code-diff.variable.css +207 -0
  17. package/lib/code-diff/index.d.ts +6 -0
  18. package/lib/date-picker/date-picker.d.ts +20 -130
  19. package/lib/date-picker/index.js +1 -1
  20. package/lib/date-picker/interface.d.ts +1 -1
  21. package/lib/date-picker/props.d.ts +111 -0
  22. package/lib/directives/clickoutside.d.ts +3 -23
  23. package/lib/directives/index.js +2 -2
  24. package/lib/input/index.d.ts +58 -4
  25. package/lib/input/index.js +2 -2
  26. package/lib/input/input.css +19 -2
  27. package/lib/input/input.d.ts +31 -1
  28. package/lib/input/input.less +25 -3
  29. package/lib/input/input.variable.css +19 -2
  30. package/lib/loading/index.d.ts +31 -9
  31. package/lib/loading/index.js +1 -1
  32. package/lib/loading/loading.css +98 -71
  33. package/lib/loading/loading.d.ts +23 -8
  34. package/lib/loading/loading.less +62 -49
  35. package/lib/loading/loading.variable.css +98 -71
  36. package/lib/shared/index.js +1 -1
  37. package/lib/shared/vue-types.d.ts +4 -0
  38. package/lib/tree/index.d.ts +17 -24
  39. package/lib/tree/index.js +1 -1
  40. package/lib/tree/props.d.ts +9 -8
  41. package/lib/tree/tree.css +1 -12
  42. package/lib/tree/tree.d.ts +8 -11
  43. package/lib/tree/tree.less +10 -24
  44. package/lib/tree/tree.variable.css +1 -12
  45. package/lib/tree/util.d.ts +9 -1
  46. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -609,6 +609,7 @@ optgroup {
609
609
  .bk-button.bk-button-primary:active {
610
610
  background-color: #2c77f4;
611
611
  border-color: #2c77f4;
612
+ color: white;
612
613
  }
613
614
  .bk-button.bk-button-primary.is-disabled {
614
615
  background-color: #dcdee5;
@@ -649,6 +650,7 @@ optgroup {
649
650
  .bk-button.bk-button-warning:active {
650
651
  background-color: #eb9000;
651
652
  border-color: #eb9000;
653
+ color: white;
652
654
  }
653
655
  .bk-button.bk-button-warning.is-disabled {
654
656
  background-color: #dcdee5;
@@ -689,6 +691,7 @@ optgroup {
689
691
  .bk-button.bk-button-success:active {
690
692
  background-color: #1ab943;
691
693
  border-color: #1ab943;
694
+ color: white;
692
695
  }
693
696
  .bk-button.bk-button-success.is-disabled {
694
697
  background-color: #dcdee5;
@@ -729,6 +732,7 @@ optgroup {
729
732
  .bk-button.bk-button-danger:active {
730
733
  background-color: #db2626;
731
734
  border-color: #db2626;
735
+ color: white;
732
736
  }
733
737
  .bk-button.bk-button-danger.is-disabled {
734
738
  background-color: #dcdee5;
@@ -760,13 +764,18 @@ optgroup {
760
764
  .bk-button.bk-button-small {
761
765
  min-width: 48px;
762
766
  height: 26px;
767
+ line-height: 26px;
763
768
  padding: 0 12px;
764
769
  }
765
770
  .bk-button.bk-button-large {
766
771
  min-width: 74px;
767
772
  height: 38px;
773
+ line-height: 38px;
768
774
  padding: 0 20px;
769
775
  }
776
+ .bk-button .bk-button-loading:not(:last-child) {
777
+ margin-right: 12px;
778
+ }
770
779
  .bk-button:hover {
771
780
  border-color: #979ba5;
772
781
  }
@@ -1159,6 +1168,14 @@ optgroup {
1159
1168
  border-radius: 2px;
1160
1169
  transition: all 0.3s;
1161
1170
  }
1171
+ .bk-input:hover .show-clear-only-hover {
1172
+ display: block;
1173
+ }
1174
+ .bk-input.is-simplicity {
1175
+ background-color: transparent;
1176
+ border-color: transparent;
1177
+ border-bottom-color: #c4c6cc;
1178
+ }
1162
1179
  .bk-input--suffix-icon {
1163
1180
  padding-right: 10px;
1164
1181
  font-size: 16px;
@@ -1166,6 +1183,9 @@ optgroup {
1166
1183
  color: #c4c6cc;
1167
1184
  align-self: center;
1168
1185
  }
1186
+ .bk-input--suffix-icon.show-clear-only-hover {
1187
+ display: none;
1188
+ }
1169
1189
  .bk-input--large {
1170
1190
  height: 38px;
1171
1191
  font-size: 16px;
@@ -1179,6 +1199,11 @@ optgroup {
1179
1199
  outline: 0;
1180
1200
  box-shadow: 0px 0px 3px 0px #a3c5fd;
1181
1201
  }
1202
+ .bk-input.is-focused:not(.is-readonly).is-simplicity {
1203
+ border-color: transparent;
1204
+ border-bottom-color: #3a84ff;
1205
+ box-shadow: none;
1206
+ }
1182
1207
  .bk-input.is-disabled {
1183
1208
  cursor: not-allowed;
1184
1209
  background-color: #fafbfd;
@@ -1223,12 +1248,12 @@ optgroup {
1223
1248
  .bk-input--text[type='search']::-webkit-search-results-decoration {
1224
1249
  appearance: none;
1225
1250
  }
1226
- .bk-input--text [type=search]::-ms-clear {
1251
+ .bk-input--text [type='search']::-ms-clear {
1227
1252
  display: none;
1228
1253
  width: 0;
1229
1254
  height: 0;
1230
1255
  }
1231
- .bk-input--text [type=search]::-ms-reveal {
1256
+ .bk-input--text [type='search']::-ms-reveal {
1232
1257
  display: none;
1233
1258
  width: 0;
1234
1259
  height: 0;
@@ -1252,6 +1277,7 @@ optgroup {
1252
1277
  height: 50%;
1253
1278
  overflow: hidden;
1254
1279
  color: #c4c6cc;
1280
+ text-align: center;
1255
1281
  }
1256
1282
  .bk-input--number-control svg {
1257
1283
  font-size: 16px;
@@ -1385,6 +1411,7 @@ optgroup {
1385
1411
  position: static;
1386
1412
  display: inline-block;
1387
1413
  font-size: 0;
1414
+ vertical-align: middle;
1388
1415
  }
1389
1416
  .bk-loading-wrapper.bk-nested-loading {
1390
1417
  position: relative;
@@ -1394,8 +1421,33 @@ optgroup {
1394
1421
  top: 50%;
1395
1422
  left: 50%;
1396
1423
  z-index: 4;
1424
+ text-align: center;
1397
1425
  transform: translate(-50%, -50%);
1398
1426
  }
1427
+ .bk-loading-wrapper .dot {
1428
+ display: inline-block;
1429
+ width: 14px;
1430
+ height: 14px;
1431
+ margin-right: 10px;
1432
+ border-radius: 50%;
1433
+ transform: scale(0.6);
1434
+ animation-duration: 0.8s;
1435
+ animation-iteration-count: infinite;
1436
+ animation-name: loading-scale-animate;
1437
+ animation-direction: normal;
1438
+ }
1439
+ .bk-loading-wrapper .oval {
1440
+ position: absolute;
1441
+ width: 6px;
1442
+ height: 8px;
1443
+ background-color: #63656e;
1444
+ border-radius: 8px;
1445
+ animation-duration: 1.2s;
1446
+ animation-iteration-count: infinite;
1447
+ animation-name: fade;
1448
+ transform-origin: center 20px;
1449
+ animation-direction: normal;
1450
+ }
1399
1451
  .bk-loading-wrapper .bk-loading-mask {
1400
1452
  opacity: 0.5;
1401
1453
  }
@@ -1412,7 +1464,55 @@ optgroup {
1412
1464
  content: '';
1413
1465
  }
1414
1466
  .bk-loading-wrapper .bk-loading-indicator {
1415
- font-size: 14px;
1467
+ text-align: center;
1468
+ }
1469
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
1470
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
1471
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
1472
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
1473
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
1474
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
1475
+ background-color: #2dcb56;
1476
+ }
1477
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
1478
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
1479
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
1480
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
1481
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
1482
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
1483
+ background-color: #ea3636;
1484
+ }
1485
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
1486
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
1487
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
1488
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
1489
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
1490
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
1491
+ background-color: #ff9c01;
1492
+ }
1493
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
1494
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
1495
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
1496
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
1497
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
1498
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
1499
+ background-color: #3a84ff;
1500
+ }
1501
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
1502
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
1503
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
1504
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
1505
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
1506
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
1507
+ background-color: white;
1508
+ }
1509
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
1510
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
1511
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
1512
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
1513
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
1514
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
1515
+ background-color: #c4c6cc;
1416
1516
  }
1417
1517
  .bk-loading-wrapper .bk-loading-indicator .dot-1 {
1418
1518
  background-color: #ea3636;
@@ -1429,7 +1529,7 @@ optgroup {
1429
1529
  .bk-loading-wrapper .bk-loading-indicator .dot-4 {
1430
1530
  background-color: #3a84ff;
1431
1531
  animation-delay: 0.55s;
1432
- margin-right: 0;
1532
+ margin-right: 0px;
1433
1533
  }
1434
1534
  .bk-loading-wrapper .bk-loading-indicator .oval-1 {
1435
1535
  transform: rotate(-135deg);
@@ -1463,59 +1563,35 @@ optgroup {
1463
1563
  transform: rotate(180deg);
1464
1564
  animation-delay: 1.65s;
1465
1565
  }
1466
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
1467
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
1468
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
1469
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
1470
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
1471
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
1472
- background-color: #2dcb56;
1473
- }
1474
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
1475
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
1476
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
1477
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
1478
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
1479
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
1480
- background-color: #ea3636;
1566
+ .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
1567
+ display: inline-block;
1568
+ width: 40px;
1569
+ height: 40px;
1481
1570
  }
1482
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
1483
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
1484
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
1485
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
1486
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
1487
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
1488
- background-color: #ff9c01;
1571
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
1572
+ height: 16px;
1573
+ width: 16px;
1489
1574
  }
1490
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
1491
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
1492
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
1493
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
1494
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
1495
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
1496
- background-color: #3a84ff;
1575
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
1576
+ width: 3px;
1577
+ height: 3px;
1578
+ margin-right: 3px;
1497
1579
  }
1498
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
1499
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
1500
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
1501
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
1502
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
1503
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
1504
- background-color: white;
1580
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
1581
+ margin-right: 0;
1505
1582
  }
1506
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
1507
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
1508
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
1509
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
1510
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
1511
- .bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
1512
- background-color: #c4c6cc;
1583
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
1584
+ width: 2px;
1585
+ height: 3px;
1586
+ border-radius: 3px;
1587
+ transform-origin: center 8px;
1513
1588
  }
1514
- .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
1515
- height: 40px;
1589
+ .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
1590
+ font-size: 14px;
1516
1591
  }
1517
1592
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
1518
1593
  height: 22px;
1594
+ width: 22px;
1519
1595
  }
1520
1596
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
1521
1597
  width: 6px;
@@ -1536,6 +1612,7 @@ optgroup {
1536
1612
  }
1537
1613
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
1538
1614
  height: 52px;
1615
+ width: 52px;
1539
1616
  }
1540
1617
  .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
1541
1618
  width: 20px;
@@ -1561,30 +1638,6 @@ optgroup {
1561
1638
  color: #63656e;
1562
1639
  text-align: center;
1563
1640
  }
1564
- .bk-loading-wrapper .bk-loading-indicator .dot {
1565
- display: inline-block;
1566
- width: 14px;
1567
- height: 14px;
1568
- margin-right: 10px;
1569
- border-radius: 50%;
1570
- transform: scale(0.6);
1571
- animation-duration: 0.8s;
1572
- animation-iteration-count: infinite;
1573
- animation-name: loading-scale-animate;
1574
- animation-direction: normal;
1575
- }
1576
- .bk-loading-wrapper .bk-loading-indicator .oval {
1577
- position: absolute;
1578
- width: 6px;
1579
- height: 8px;
1580
- background-color: #63656e;
1581
- border-radius: 8px;
1582
- animation-duration: 1.2s;
1583
- animation-iteration-count: infinite;
1584
- animation-name: fade;
1585
- transform-origin: center 20px;
1586
- animation-direction: normal;
1587
- }
1588
1641
  .bk-modal-wrapper {
1589
1642
  position: absolute;
1590
1643
  top: 50%;
@@ -3093,21 +3146,10 @@ optgroup {
3093
3146
  line-height: var(--lineHeight);
3094
3147
  cursor: pointer;
3095
3148
  }
3096
- .bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
3097
- position: absolute;
3098
- top: calc(var(--lineHeight) / 2 + 6px);
3099
- left: 6px;
3100
- z-index: 1;
3101
- width: 0;
3102
- height: calc(var(--lines) * var(--lineHeight) - 6px);
3103
- pointer-events: none;
3104
- border-left: var(--level-line);
3105
- content: '';
3106
- }
3107
3149
  .bk-tree .bk-tree-node:not(.is-root) {
3108
3150
  margin-left: calc(var(--depth)*var(--indent));
3109
3151
  }
3110
- .bk-tree .bk-tree-node:not(.is-root)::before {
3152
+ .bk-tree .bk-tree-node:not(.is-root).level-line::before {
3111
3153
  position: absolute;
3112
3154
  top: calc(50% + 1px);
3113
3155
  left: calc(0px - var(--indent) + 6px);
@@ -30,6 +30,7 @@
30
30
  .bk-button.bk-button-primary:active {
31
31
  background-color: #2c77f4;
32
32
  border-color: #2c77f4;
33
+ color: white;
33
34
  }
34
35
  .bk-button.bk-button-primary.is-disabled {
35
36
  background-color: #dcdee5;
@@ -70,6 +71,7 @@
70
71
  .bk-button.bk-button-warning:active {
71
72
  background-color: #eb9000;
72
73
  border-color: #eb9000;
74
+ color: white;
73
75
  }
74
76
  .bk-button.bk-button-warning.is-disabled {
75
77
  background-color: #dcdee5;
@@ -110,6 +112,7 @@
110
112
  .bk-button.bk-button-success:active {
111
113
  background-color: #1ab943;
112
114
  border-color: #1ab943;
115
+ color: white;
113
116
  }
114
117
  .bk-button.bk-button-success.is-disabled {
115
118
  background-color: #dcdee5;
@@ -150,6 +153,7 @@
150
153
  .bk-button.bk-button-danger:active {
151
154
  background-color: #db2626;
152
155
  border-color: #db2626;
156
+ color: white;
153
157
  }
154
158
  .bk-button.bk-button-danger.is-disabled {
155
159
  background-color: #dcdee5;
@@ -181,13 +185,18 @@
181
185
  .bk-button.bk-button-small {
182
186
  min-width: 48px;
183
187
  height: 26px;
188
+ line-height: 26px;
184
189
  padding: 0 12px;
185
190
  }
186
191
  .bk-button.bk-button-large {
187
192
  min-width: 74px;
188
193
  height: 38px;
194
+ line-height: 38px;
189
195
  padding: 0 20px;
190
196
  }
197
+ .bk-button .bk-button-loading:not(:last-child) {
198
+ margin-right: 12px;
199
+ }
191
200
  .bk-button:hover {
192
201
  border-color: #979ba5;
193
202
  }
@@ -36,12 +36,19 @@ declare const buttonProps: {
36
36
  title: import("vue-types").VueTypeValidableDef<string> & {
37
37
  default: string;
38
38
  };
39
+ icon: import("vue-types").VueTypeValidableDef<string> & {
40
+ default: string;
41
+ };
42
+ iconRight: import("vue-types").VueTypeValidableDef<string> & {
43
+ default: string;
44
+ };
39
45
  disabled: import("vue-types").VueTypeValidableDef<boolean> & {
40
46
  default: boolean;
41
47
  };
42
48
  loading: import("vue-types").VueTypeValidableDef<boolean> & {
43
49
  default: boolean;
44
50
  };
51
+ laodingMode: import("vue-types").VueTypeDef<string>;
45
52
  outline: import("vue-types").VueTypeValidableDef<boolean> & {
46
53
  default: boolean;
47
54
  };
@@ -64,12 +71,19 @@ declare const _default: import("vue").DefineComponent<{
64
71
  title: import("vue-types").VueTypeValidableDef<string> & {
65
72
  default: string;
66
73
  };
74
+ icon: import("vue-types").VueTypeValidableDef<string> & {
75
+ default: string;
76
+ };
77
+ iconRight: import("vue-types").VueTypeValidableDef<string> & {
78
+ default: string;
79
+ };
67
80
  disabled: import("vue-types").VueTypeValidableDef<boolean> & {
68
81
  default: boolean;
69
82
  };
70
83
  loading: import("vue-types").VueTypeValidableDef<boolean> & {
71
84
  default: boolean;
72
85
  };
86
+ laodingMode: import("vue-types").VueTypeDef<string>;
73
87
  outline: import("vue-types").VueTypeValidableDef<boolean> & {
74
88
  default: boolean;
75
89
  };
@@ -79,7 +93,7 @@ declare const _default: import("vue").DefineComponent<{
79
93
  nativeType: {
80
94
  type: IButtonNativeType;
81
95
  };
82
- }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
96
+ }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "mouseover")[], "click" | "mouseover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
83
97
  theme: import("vue-types").VueTypeDef<string> & {
84
98
  default: string;
85
99
  };
@@ -90,12 +104,19 @@ declare const _default: import("vue").DefineComponent<{
90
104
  title: import("vue-types").VueTypeValidableDef<string> & {
91
105
  default: string;
92
106
  };
107
+ icon: import("vue-types").VueTypeValidableDef<string> & {
108
+ default: string;
109
+ };
110
+ iconRight: import("vue-types").VueTypeValidableDef<string> & {
111
+ default: string;
112
+ };
93
113
  disabled: import("vue-types").VueTypeValidableDef<boolean> & {
94
114
  default: boolean;
95
115
  };
96
116
  loading: import("vue-types").VueTypeValidableDef<boolean> & {
97
117
  default: boolean;
98
118
  };
119
+ laodingMode: import("vue-types").VueTypeDef<string>;
99
120
  outline: import("vue-types").VueTypeValidableDef<boolean> & {
100
121
  default: boolean;
101
122
  };
@@ -107,13 +128,16 @@ declare const _default: import("vue").DefineComponent<{
107
128
  };
108
129
  }>> & {
109
130
  onClick?: (...args: any[]) => any;
131
+ onMouseover?: (...args: any[]) => any;
110
132
  }, {
111
133
  title: string;
112
134
  text: boolean;
113
135
  theme: string;
136
+ icon: string;
114
137
  outline: boolean;
115
138
  disabled: boolean;
116
139
  loading: boolean;
117
140
  hoverTheme: string;
141
+ iconRight: string;
118
142
  }>;
119
143
  export default _default;
@@ -16,7 +16,7 @@
16
16
  @themeSelectors: primary, warning, success, danger;
17
17
  @sizeSelectors: small, large;
18
18
 
19
- .bk-button {
19
+ .@{bk-prefix}-button {
20
20
  display: inline-block;
21
21
  height: @btnHeight;
22
22
  min-width: @btnMinWidth;
@@ -35,13 +35,12 @@
35
35
  box-sizing: border-box;
36
36
  transition: background-color ease .3s;
37
37
  appearance: none;
38
-
39
38
 
40
39
  each(@themeSelectors, {
41
40
  @color: '@{value}-color';
42
41
  @hoverColor: 'button-@{value}-hover-color';
43
42
  @activeColor: 'button-@{value}-active-color';
44
- &.bk-button-@{value} {
43
+ &.@{bk-prefix}-button-@{value} {
45
44
  background-color: @@color;
46
45
  color: @white-color;
47
46
  border-color: @@color;
@@ -54,6 +53,7 @@
54
53
  &:active {
55
54
  background-color: @@activeColor;
56
55
  border-color: @@activeColor;
56
+ color: @white-color;
57
57
  }
58
58
 
59
59
  &.is-disabled {
@@ -82,7 +82,7 @@
82
82
  }
83
83
  }
84
84
 
85
- &.bk-button-hover-@{value} {
85
+ &.@{bk-prefix}-button-hover-@{value} {
86
86
  &:hover {
87
87
  background-color: @@hoverColor;
88
88
  border-color: @@hoverColor;
@@ -96,14 +96,21 @@
96
96
  @sizeBtnMinWidth: '@{value}BtnMinWidth';
97
97
  @sizeBtnHeight: '@{value}BtnHeight';
98
98
  @sizeBtnPadding: '@{value}BtnPadding';
99
- &.bk-button-@{value} {
99
+ &.@{bk-prefix}-button-@{value} {
100
100
  min-width: @@sizeBtnMinWidth;
101
101
  height: @@sizeBtnHeight;
102
+ line-height: @@sizeBtnHeight;
102
103
  padding: 0 @@sizeBtnPadding;
103
104
  }
104
105
  })
105
106
  ;
106
107
 
108
+ .@{bk-prefix}-button-loading {
109
+ &:not(:last-child) {
110
+ margin-right: @smallBtnPadding;
111
+ }
112
+ }
113
+
107
114
  &:hover {
108
115
  border-color: @button-default-hover-border-color;
109
116
  }
@@ -129,7 +136,7 @@
129
136
  outline: none;
130
137
  }}
131
138
 
132
- .bk-button-group {
139
+ .@{bk-prefix}-button-group {
133
140
  display: inline-block;
134
141
  font-size: 0;
135
142
 
@@ -137,8 +144,8 @@
137
144
  @sizeBtnMinWidth: '@{value}BtnMinWidth';
138
145
  @sizeBtnHeight: '@{value}BtnHeight';
139
146
  @sizeBtnPadding: '@{value}BtnPadding';
140
- &.bk-button-group-@{value} {
141
- .bk-button {
147
+ &.@{bk-prefix}-button-group-@{value} {
148
+ .@{bk-prefix}-button {
142
149
  min-width: @@sizeBtnMinWidth;
143
150
  height: @@sizeBtnHeight;
144
151
  padding: 0 @@sizeBtnPadding;
@@ -147,7 +154,7 @@
147
154
  })
148
155
  ;
149
156
 
150
- .bk-button {
157
+ .@{bk-prefix}-button {
151
158
  height: @btnHeight;
152
159
  min-width: @btnMinWidth;
153
160
  margin: 0 0 0 -1px;
@@ -181,4 +188,5 @@
181
188
  border-color: @primary-color;
182
189
  }
183
190
 
184
- }}
191
+ }
192
+ }
@@ -123,6 +123,7 @@
123
123
  .bk-button.bk-button-primary:active {
124
124
  background-color: var(--button-primary-active-color);
125
125
  border-color: var(--button-primary-active-color);
126
+ color: var(--white-color);
126
127
  }
127
128
  .bk-button.bk-button-primary.is-disabled {
128
129
  background-color: var(--disable-color);
@@ -163,6 +164,7 @@
163
164
  .bk-button.bk-button-warning:active {
164
165
  background-color: var(--button-warning-active-color);
165
166
  border-color: var(--button-warning-active-color);
167
+ color: var(--white-color);
166
168
  }
167
169
  .bk-button.bk-button-warning.is-disabled {
168
170
  background-color: var(--disable-color);
@@ -203,6 +205,7 @@
203
205
  .bk-button.bk-button-success:active {
204
206
  background-color: var(--button-success-active-color);
205
207
  border-color: var(--button-success-active-color);
208
+ color: var(--white-color);
206
209
  }
207
210
  .bk-button.bk-button-success.is-disabled {
208
211
  background-color: var(--disable-color);
@@ -243,6 +246,7 @@
243
246
  .bk-button.bk-button-danger:active {
244
247
  background-color: var(--button-danger-active-color);
245
248
  border-color: var(--button-danger-active-color);
249
+ color: var(--white-color);
246
250
  }
247
251
  .bk-button.bk-button-danger.is-disabled {
248
252
  background-color: var(--disable-color);
@@ -274,13 +278,18 @@
274
278
  .bk-button.bk-button-small {
275
279
  min-width: 48px;
276
280
  height: 26px;
281
+ line-height: 26px;
277
282
  padding: 0 12px;
278
283
  }
279
284
  .bk-button.bk-button-large {
280
285
  min-width: 74px;
281
286
  height: 38px;
287
+ line-height: 38px;
282
288
  padding: 0 20px;
283
289
  }
290
+ .bk-button .bk-button-loading:not(:last-child) {
291
+ margin-right: 12px;
292
+ }
284
293
  .bk-button:hover {
285
294
  border-color: var(--button-default-hover-border-color);
286
295
  }