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.
- package/README.md +7 -3
- package/README_EN.md +7 -3
- package/dist/bkui-vue.cjs.js +230 -208
- package/dist/bkui-vue.esm.js +230 -208
- package/dist/bkui-vue.umd.js +230 -208
- package/dist/style.css +127 -85
- package/lib/button/button.css +9 -0
- package/lib/button/button.d.ts +25 -1
- package/lib/button/button.less +18 -10
- package/lib/button/button.variable.css +9 -0
- package/lib/button/index.d.ts +42 -4
- package/lib/button/index.js +1 -1
- package/lib/code-diff/code-diff.css +114 -0
- package/lib/code-diff/code-diff.d.ts +71 -0
- package/lib/code-diff/code-diff.less +144 -0
- package/lib/code-diff/code-diff.variable.css +207 -0
- package/lib/code-diff/index.d.ts +6 -0
- package/lib/date-picker/date-picker.d.ts +20 -130
- package/lib/date-picker/index.js +1 -1
- package/lib/date-picker/interface.d.ts +1 -1
- package/lib/date-picker/props.d.ts +111 -0
- package/lib/directives/clickoutside.d.ts +3 -23
- package/lib/directives/index.js +2 -2
- package/lib/input/index.d.ts +58 -4
- package/lib/input/index.js +2 -2
- package/lib/input/input.css +19 -2
- package/lib/input/input.d.ts +31 -1
- package/lib/input/input.less +25 -3
- package/lib/input/input.variable.css +19 -2
- package/lib/loading/index.d.ts +31 -9
- package/lib/loading/index.js +1 -1
- package/lib/loading/loading.css +98 -71
- package/lib/loading/loading.d.ts +23 -8
- package/lib/loading/loading.less +62 -49
- package/lib/loading/loading.variable.css +98 -71
- package/lib/shared/index.js +1 -1
- package/lib/shared/vue-types.d.ts +4 -0
- package/lib/tree/index.d.ts +17 -24
- package/lib/tree/index.js +1 -1
- package/lib/tree/props.d.ts +9 -8
- package/lib/tree/tree.css +1 -12
- package/lib/tree/tree.d.ts +8 -11
- package/lib/tree/tree.less +10 -24
- package/lib/tree/tree.variable.css +1 -12
- package/lib/tree/util.d.ts +9 -1
- 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
|
-
|
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:
|
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-
|
1467
|
-
|
1468
|
-
|
1469
|
-
|
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-
|
1483
|
-
|
1484
|
-
|
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-
|
1491
|
-
|
1492
|
-
|
1493
|
-
|
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-
|
1499
|
-
|
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-
|
1507
|
-
|
1508
|
-
|
1509
|
-
|
1510
|
-
|
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-
|
1515
|
-
|
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);
|
package/lib/button/button.css
CHANGED
@@ -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
|
}
|
package/lib/button/button.d.ts
CHANGED
@@ -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;
|
package/lib/button/button.less
CHANGED
@@ -16,7 +16,7 @@
|
|
16
16
|
@themeSelectors: primary, warning, success, danger;
|
17
17
|
@sizeSelectors: small, large;
|
18
18
|
|
19
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
141
|
-
|
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
|
-
|
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
|
}
|