@autobest-ui/components 1.2.1 → 1.3.0

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 (137) hide show
  1. package/esm/carousel/index.d.ts +13 -21
  2. package/esm/carousel/index.js +44 -77
  3. package/esm/carousel/style/index.css +1 -1
  4. package/esm/carousel/style/index.scss +1 -7
  5. package/esm/date-picker/calendar/grid/index.css +1 -1
  6. package/esm/date-picker/calendar/grid/index.js +17 -27
  7. package/esm/date-picker/calendar/grid/index.scss +4 -0
  8. package/esm/date-picker/calendar/index.d.ts +4 -0
  9. package/esm/date-picker/calendar/index.js +1 -1
  10. package/esm/date-picker/index.d.ts +17 -6
  11. package/esm/date-picker/index.js +62 -17
  12. package/esm/date-picker/style/index.css +1 -1
  13. package/esm/date-picker/style/index.js +0 -2
  14. package/esm/date-picker/style/index.scss +6 -1
  15. package/esm/index.d.ts +3 -4
  16. package/esm/index.js +1 -2
  17. package/esm/input-number/index.d.ts +30 -17
  18. package/esm/input-number/index.js +116 -36
  19. package/esm/style.css +6 -21
  20. package/esm/table/body/BodyRow.d.ts +9 -3
  21. package/esm/table/body/BodyRow.js +6 -2
  22. package/esm/table/body/index.d.ts +2 -2
  23. package/esm/table/body/index.js +8 -7
  24. package/esm/table/header/HeaderCell.d.ts +2 -2
  25. package/esm/table/header/HeaderCell.js +15 -7
  26. package/esm/table/header/HeaderRow.d.ts +2 -2
  27. package/esm/table/index.d.ts +4 -4
  28. package/esm/table/index.js +3 -3
  29. package/esm/table/interface.d.ts +9 -3
  30. package/esm/table/style/index.css +1 -1
  31. package/esm/table/style/index.js +0 -2
  32. package/esm/table/style/index.scss +2 -0
  33. package/lib/carousel/index.d.ts +13 -21
  34. package/lib/carousel/index.js +45 -80
  35. package/lib/carousel/style/index.css +1 -1
  36. package/lib/carousel/style/index.scss +1 -7
  37. package/lib/date-picker/calendar/grid/index.css +1 -1
  38. package/lib/date-picker/calendar/grid/index.js +17 -28
  39. package/lib/date-picker/calendar/grid/index.scss +4 -0
  40. package/lib/date-picker/calendar/index.d.ts +4 -0
  41. package/lib/date-picker/calendar/index.js +1 -1
  42. package/lib/date-picker/index.d.ts +17 -6
  43. package/lib/date-picker/index.js +61 -17
  44. package/lib/date-picker/style/index.css +1 -1
  45. package/lib/date-picker/style/index.js +0 -2
  46. package/lib/date-picker/style/index.scss +6 -1
  47. package/lib/index.d.ts +3 -4
  48. package/lib/index.js +2 -22
  49. package/lib/input-number/index.d.ts +30 -17
  50. package/lib/input-number/index.js +116 -36
  51. package/lib/style.css +6 -21
  52. package/lib/table/body/BodyRow.d.ts +9 -3
  53. package/lib/table/body/BodyRow.js +6 -2
  54. package/lib/table/body/index.d.ts +2 -2
  55. package/lib/table/body/index.js +8 -7
  56. package/lib/table/header/HeaderCell.d.ts +2 -2
  57. package/lib/table/header/HeaderCell.js +15 -8
  58. package/lib/table/header/HeaderRow.d.ts +2 -2
  59. package/lib/table/index.d.ts +4 -4
  60. package/lib/table/index.js +3 -3
  61. package/lib/table/interface.d.ts +9 -3
  62. package/lib/table/style/index.css +1 -1
  63. package/lib/table/style/index.js +0 -2
  64. package/lib/table/style/index.scss +2 -0
  65. package/package.json +2 -2
  66. package/esm/accordion/__stories__/style.css +0 -1
  67. package/esm/accordion/__stories__/style.scss +0 -59
  68. package/esm/affix/__stories__/style.css +0 -1
  69. package/esm/affix/__stories__/style.scss +0 -13
  70. package/esm/carousel/__stories__/style.css +0 -1
  71. package/esm/carousel/__stories__/style.scss +0 -41
  72. package/esm/collapse/__stories__/style.css +0 -1
  73. package/esm/collapse/__stories__/style.scss +0 -19
  74. package/esm/guide/__stories__/style.css +0 -1
  75. package/esm/guide/__stories__/style.scss +0 -14
  76. package/esm/icon/__stories__/iconNames.d.ts +0 -2
  77. package/esm/icon/__stories__/iconNames.js +0 -1
  78. package/esm/icon/__stories__/style.css +0 -1
  79. package/esm/icon/__stories__/style.scss +0 -40
  80. package/esm/icon/index.d.ts +0 -43
  81. package/esm/icon/index.js +0 -94
  82. package/esm/icon/style/index.css +0 -1
  83. package/esm/icon/style/index.d.ts +0 -1
  84. package/esm/icon/style/index.js +0 -5
  85. package/esm/icon/style/index.scss +0 -7
  86. package/esm/lazy-image/__stories__/style.css +0 -1
  87. package/esm/lazy-image/__stories__/style.scss +0 -9
  88. package/esm/loading-container/__stories__/style.css +0 -1
  89. package/esm/loading-container/__stories__/style.scss +0 -6
  90. package/esm/move/__stories__/style.css +0 -1
  91. package/esm/move/__stories__/style.scss +0 -6
  92. package/esm/popover/__stories__/style.css +0 -1
  93. package/esm/popover/__stories__/style.scss +0 -16
  94. package/esm/select/__stories__/style.css +0 -1
  95. package/esm/select/__stories__/style.scss +0 -8
  96. package/esm/skeleton/__stories__/style.css +0 -1
  97. package/esm/skeleton/__stories__/style.scss +0 -3
  98. package/esm/table/__stories__/style.css +0 -1
  99. package/esm/table/__stories__/style.scss +0 -34
  100. package/esm/tabs/__stories__/style.css +0 -1
  101. package/esm/tabs/__stories__/style.scss +0 -8
  102. package/lib/accordion/__stories__/style.css +0 -1
  103. package/lib/accordion/__stories__/style.scss +0 -59
  104. package/lib/affix/__stories__/style.css +0 -1
  105. package/lib/affix/__stories__/style.scss +0 -13
  106. package/lib/carousel/__stories__/style.css +0 -1
  107. package/lib/carousel/__stories__/style.scss +0 -41
  108. package/lib/collapse/__stories__/style.css +0 -1
  109. package/lib/collapse/__stories__/style.scss +0 -19
  110. package/lib/guide/__stories__/style.css +0 -1
  111. package/lib/guide/__stories__/style.scss +0 -14
  112. package/lib/icon/__stories__/iconNames.d.ts +0 -2
  113. package/lib/icon/__stories__/iconNames.js +0 -8
  114. package/lib/icon/__stories__/style.css +0 -1
  115. package/lib/icon/__stories__/style.scss +0 -40
  116. package/lib/icon/index.d.ts +0 -43
  117. package/lib/icon/index.js +0 -111
  118. package/lib/icon/style/index.css +0 -1
  119. package/lib/icon/style/index.d.ts +0 -1
  120. package/lib/icon/style/index.js +0 -7
  121. package/lib/icon/style/index.scss +0 -7
  122. package/lib/lazy-image/__stories__/style.css +0 -1
  123. package/lib/lazy-image/__stories__/style.scss +0 -9
  124. package/lib/loading-container/__stories__/style.css +0 -1
  125. package/lib/loading-container/__stories__/style.scss +0 -6
  126. package/lib/move/__stories__/style.css +0 -1
  127. package/lib/move/__stories__/style.scss +0 -6
  128. package/lib/popover/__stories__/style.css +0 -1
  129. package/lib/popover/__stories__/style.scss +0 -16
  130. package/lib/select/__stories__/style.css +0 -1
  131. package/lib/select/__stories__/style.scss +0 -8
  132. package/lib/skeleton/__stories__/style.css +0 -1
  133. package/lib/skeleton/__stories__/style.scss +0 -3
  134. package/lib/table/__stories__/style.css +0 -1
  135. package/lib/table/__stories__/style.scss +0 -34
  136. package/lib/tabs/__stories__/style.css +0 -1
  137. package/lib/tabs/__stories__/style.scss +0 -8
@@ -55,7 +55,7 @@ var __assign = void 0 && (void 0).__assign || function () {
55
55
  return __assign.apply(this, arguments);
56
56
  };
57
57
 
58
- var cls = 'ab-input-number';
58
+ var cls = 'ab-input-number'; // TODO: 重构组件
59
59
 
60
60
  var InputNumber =
61
61
  /** @class */
@@ -317,6 +317,19 @@ function (_super) {
317
317
  return ceilNumber;
318
318
  };
319
319
 
320
+ _this.getPadDigitalValue = function (value) {
321
+ var _a = _this.props,
322
+ digital = _a.digital,
323
+ padDigital = _a.padDigital;
324
+
325
+ if (!padDigital || (0, _utils.isBlank)(value) || !digital) {
326
+ return value;
327
+ }
328
+
329
+ var resultArr = value.split('.');
330
+ return resultArr[0] + "." + (resultArr[1] || '').padEnd(digital, '0');
331
+ };
332
+
320
333
  _this.onChangePackMultipleValue = function (value) {
321
334
  var currentValue = _this.getCurrentValue(value).toString();
322
335
 
@@ -331,60 +344,97 @@ function (_super) {
331
344
  }
332
345
  };
333
346
 
334
- _this.getDebounce = function () {
335
- if (_this.debounce) {
336
- return _this.debounce;
347
+ _this.onPadDigital = function (value) {
348
+ var currentValue = _this.getPadDigitalValue(value);
349
+
350
+ var _a = _this.props,
351
+ onChange = _a.onChange,
352
+ name = _a.name;
353
+
354
+ if (value !== currentValue) {
355
+ onChange(currentValue, name);
337
356
  }
357
+ };
358
+
359
+ _this.getPadDigitalDebounce = function () {
360
+ if (_this.padDigitalDebounce) {
361
+ return _this.padDigitalDebounce;
362
+ }
363
+
364
+ _this.padDigitalDebounce = (0, _utils.debounce)(_this.onPadDigital, _this.props.delay);
365
+ return _this.padDigitalDebounce;
366
+ };
338
367
 
339
- _this.debounce = (0, _utils.debounce)(_this.onChangePackMultipleValue, _this.props.delay);
340
- return _this.debounce;
368
+ _this.getChangePackMultipleValueDebounce = function () {
369
+ if (_this.changePackMultipleValueDebounce) {
370
+ return _this.changePackMultipleValueDebounce;
371
+ }
372
+
373
+ _this.changePackMultipleValueDebounce = (0, _utils.debounce)(_this.onChangePackMultipleValue, _this.props.delay);
374
+ return _this.changePackMultipleValueDebounce;
341
375
  };
342
376
 
343
- _this.callback = function (value) {
377
+ _this.callback = function (value, ignoreDelay) {
344
378
  var _a = _this.props,
345
379
  name = _a.name,
346
380
  onChange = _a.onChange,
347
- onChangePackMultipleBefore = _a.onChangePackMultipleBefore;
348
- var packMultiple = _this.props.packMultiple || 1;
381
+ onChangePackMultipleBefore = _a.onChangePackMultipleBefore,
382
+ packMultiple = _a.packMultiple,
383
+ padDigital = _a.padDigital;
349
384
 
350
- if (onChange) {
385
+ if (onChange && value !== _this.props.value) {
351
386
  onChange(value, name);
352
387
  }
353
388
 
354
- var valueNumber = parseFloat(value);
355
-
356
- if (!(0, _utils.isBlank)(packMultiple) && !(0, _utils.isBlank)(value) && valueNumber % packMultiple !== 0) {
389
+ if (packMultiple && !(0, _utils.isBlank)(value) && parseFloat(value) % packMultiple !== 0) {
357
390
  if (onChangePackMultipleBefore) {
358
391
  onChangePackMultipleBefore(value, name);
359
392
  }
360
393
 
361
- _this.getDebounce()(value);
394
+ if (ignoreDelay) {
395
+ _this.onChangePackMultipleValue(value);
396
+ } else {
397
+ _this.getChangePackMultipleValueDebounce()(value);
398
+ }
399
+
400
+ return;
401
+ }
402
+
403
+ if (padDigital) {
404
+ if (ignoreDelay) {
405
+ _this.onPadDigital(value);
406
+
407
+ return;
408
+ }
409
+
410
+ _this.getPadDigitalDebounce()(value);
362
411
  }
363
412
  };
364
413
 
365
- _this.onValueChange = function (ev) {
366
- if (_this.debounce) {
367
- _this.debounce.cancel();
414
+ _this.onValueChange = function (ev, ignoreDelay) {
415
+ if (_this.changePackMultipleValueDebounce) {
416
+ _this.changePackMultipleValueDebounce.cancel();
368
417
  }
369
418
 
370
419
  var _a = _this.props,
371
420
  min = _a.min,
372
421
  max = _a.max,
373
- isPositive = _a.isPositive,
422
+ digital = _a.digital,
374
423
  value = _a.value;
375
- var currentValue = ev.target.value.toString();
424
+ var currentValue = ev.target.value.toString(); // 输入为空
376
425
 
377
426
  if ((0, _utils.isBlank)(currentValue)) {
378
- _this.callback('');
427
+ _this.callback('', ignoreDelay);
379
428
 
380
429
  return;
381
430
  }
382
431
 
383
- var preValue = value.toString();
432
+ var preValue = value.toString(); // 输入的不是数字格式
433
+
384
434
  var reg = /^-$|(^(-?\d+)(\.\d*)?)$/;
385
435
 
386
436
  if (!reg.test(currentValue)) {
387
- _this.callback(preValue);
437
+ _this.callback(preValue, ignoreDelay);
388
438
 
389
439
  return;
390
440
  } // 0开头后面直接是数字,没有点如:011, 这是不合法的
@@ -393,41 +443,59 @@ function (_super) {
393
443
  var zeroReg = /^0\d+$/;
394
444
 
395
445
  if (zeroReg.test(currentValue)) {
396
- _this.callback(preValue);
446
+ _this.callback(preValue, ignoreDelay);
397
447
 
398
448
  return;
449
+ } // 小数位数限制
450
+
451
+
452
+ if (digital) {
453
+ currentValue = new RegExp("[^.]+([.](\\d{0," + digital + "}))?").exec(currentValue)[0].toString();
399
454
  }
400
455
 
401
456
  var valueNumber = parseFloat(currentValue);
402
457
 
403
458
  if (!(0, _utils.isBlank)(min)) {
404
459
  if (min > valueNumber) {
405
- _this.callback(preValue);
460
+ _this.callback(preValue, ignoreDelay);
406
461
 
407
462
  return;
408
463
  } // 如果min>= 0, 将阻止输入-
409
464
 
410
465
 
411
466
  if (min >= 0 && currentValue.indexOf('-') > -1) {
412
- _this.callback('');
467
+ _this.callback('', ignoreDelay);
413
468
 
414
469
  return;
415
470
  }
416
471
  }
417
472
 
418
473
  if (!(0, _utils.isBlank)(max) && max < valueNumber) {
419
- _this.callback(preValue);
474
+ _this.callback(preValue, ignoreDelay);
420
475
 
421
476
  return;
422
477
  }
423
478
 
424
- if (isPositive && currentValue.indexOf('.') > -1) {
425
- _this.callback(preValue);
479
+ if (!digital && currentValue.indexOf('.') > -1) {
480
+ _this.callback(preValue, ignoreDelay);
426
481
 
427
482
  return;
428
483
  }
429
484
 
430
- _this.callback(currentValue);
485
+ _this.callback(currentValue, ignoreDelay);
486
+ };
487
+
488
+ _this.getValueCalculate = function (value, offset) {
489
+ var valueStr = value.toString();
490
+ var offsetStr = offset.toString();
491
+
492
+ if (valueStr.indexOf('.') < 0 && offsetStr.indexOf('.') < 0) {
493
+ return value + offset;
494
+ }
495
+
496
+ var digital = _this.props.digital;
497
+ var powValue = Math.pow(10, digital);
498
+ return Math.round((value + offset) * powValue) / powValue;
431
499
  };
432
500
 
433
501
  _this.onAdd = function () {
@@ -438,7 +506,7 @@ function (_super) {
438
506
 
439
507
  var ev = {
440
508
  target: {
441
- value: (parseFloat(value.toString()) || 0) + step
509
+ value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step).toString())
442
510
  }
443
511
  };
444
512
 
@@ -452,7 +520,7 @@ function (_super) {
452
520
  var step = packMultiple || 1;
453
521
  var ev = {
454
522
  target: {
455
- value: (parseFloat(value.toString()) || 0) - step
523
+ value: _this.getPadDigitalValue(_this.getValueCalculate(Number(value), step * -1).toString())
456
524
  }
457
525
  };
458
526
 
@@ -485,6 +553,11 @@ function (_super) {
485
553
 
486
554
  InputNumber.prototype.componentDidMount = function () {
487
555
  this.addMouseMoveListener();
556
+ this.onValueChange({
557
+ target: {
558
+ value: this.props.value
559
+ }
560
+ }, true);
488
561
  };
489
562
 
490
563
  InputNumber.prototype.componentWillUnmount = function () {
@@ -498,9 +571,14 @@ function (_super) {
498
571
  this.mouseMoveHandler = null;
499
572
  }
500
573
 
501
- if (this.debounce) {
502
- this.debounce.cancel();
503
- this.debounce = null;
574
+ if (this.padDigitalDebounce) {
575
+ this.padDigitalDebounce.cancel();
576
+ this.padDigitalDebounce = null;
577
+ }
578
+
579
+ if (this.changePackMultipleValueDebounce) {
580
+ this.changePackMultipleValueDebounce.cancel();
581
+ this.changePackMultipleValueDebounce = null;
504
582
  }
505
583
  };
506
584
 
@@ -509,7 +587,8 @@ function (_super) {
509
587
 
510
588
  delete copyProps.onChangePackMultipleBefore;
511
589
  delete copyProps.onChangePackMultipleAfter;
512
- delete copyProps.isPositive;
590
+ delete copyProps.digital;
591
+ delete copyProps.padDigital;
513
592
  delete copyProps.packMultiple;
514
593
  delete copyProps.visibleButton;
515
594
  delete copyProps.onChange;
@@ -551,7 +630,8 @@ function (_super) {
551
630
  name: '',
552
631
  size: 3,
553
632
  disabled: false,
554
- isPositive: true,
633
+ digital: 0,
634
+ padDigital: false,
555
635
  delay: 1000,
556
636
  visibleButton: false
557
637
  };
package/lib/style.css CHANGED
@@ -1,49 +1,34 @@
1
1
  a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,var,video{box-sizing:border-box}html{font-size:100px;font-family:Arial,sans-serif;touch-action:manipulation;-ms-touch-action:manipulation}@media only screen and (max-width:767px){html{font-size:100px}}body{font-size:.12rem;color:#333;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none}input{outline:0}li,ul{padding:0;margin:0;list-style:none}
2
- .demo-accordion{margin:.5rem auto;width:5rem;display:flex;justify-content:center;flex-direction:column}.accordion-demo-wrap{width:3rem}.accordion-demo-text{height:.3rem}.accordion-demo-title{display:block;padding:.1rem 0;background-color:#b0b0b0;color:#f7f7f7;cursor:pointer}.accordion-demo-a-content>li{padding:.1rem 0;border-top:dotted 1px grey}.accordion-demo-a-content>li:first-child{border:none;cursor:pointer}.accordion-demo-a-content>li>a{color:#333}.accordion-demo-d-content{padding-left:.1rem}.accordion-demo-d-content .ab-collapse{padding-left:.2rem}.accordion-demo-d-title{background-color:grey;display:block;padding:.1rem 0;color:#f7f7f7;cursor:pointer}
3
- .affix-demo{height:200vh;overflow:auto;width:1000px;max-width:100%;margin:auto}.affix-demo .affix-wrap{height:500px;width:100%;background-color:#d1d5db}
4
- .demo-carousel{margin:auto;position:relative}.demo-carousel p{display:flex;align-items:center;justify-content:center;font-size:32px;margin:0;color:#f3f4f6;height:225px;border-radius:3px}.ab-carousel{position:relative}.button-next,.button-prev{position:absolute;box-sizing:border-box;cursor:pointer;font-size:32px;top:50%;margin-top:-15px;width:30px;height:30px;color:#f3f4f6}.button-prev{left:5px;top:50%}.button-next{right:5px;top:50%}
5
2
  .ab-affix,.ab-affix-custom{z-index:100}.ab-affix-custom{position:fixed;transition:transform .2s cubic-bezier(.7,.3,.1,1)}.ab-affix-fade-appear,.ab-affix-fade-enter{transform:translate(0,-100%)}.ab-affix-fade-appear-active,.ab-affix-fade-enter-active{transform:translate(0,0)}.ab-affix-fade-exit{transform:translate(0,0)}.ab-affix-fade-exit-active{transform:translate(0,-100%)}.ab-affix-fade-exit-done{display:none}
6
- .ab-carousel{position:relative;height:100%}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}.ab-carousel.ab-carousel-hr .ab-carousel-slider{float:left}
3
+ .ab-carousel{position:relative}.ab-carousel-content{position:relative;display:block;height:100%;width:100%;margin:0;padding:0;overflow:hidden}.ab-carousel-list{user-select:none;position:relative;top:0;left:0;display:block;overflow:hidden}.ab-carousel-slider{outline:0;overflow:hidden;float:left;display:none}.ab-carousel.ab-carousel-init .ab-carousel-slider{display:block}
7
4
  .ab-checkbox{display:inline-block;position:relative;font-size:0;cursor:pointer}.ab-checkbox-input{position:absolute;opacity:0;margin:0;padding:0;width:100%;height:100%;cursor:pointer;z-index:2}.ab-checkbox-inner{display:inline-block;position:relative;width:.16rem;height:.16rem;transition:all .3s;border:.02rem solid #b0b0b0;border-radius:.02rem;background-color:#fff}.ab-checkbox-icon{visibility:hidden;position:absolute;width:.06rem;height:.1rem;left:20%;top:40%;transform:rotate(45deg) scale(0) translate(-50%,-50%);transition:all .2s;border:.02rem solid #e84040;border-top:none;border-left:none}.ab-checkbox.ab-checkbox-checked .ab-checkbox-icon{visibility:visible;transform:rotate(45deg) scale(1) translate(-50%,-50%)}.ab-checkbox.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-inner{border-color:#f0f0f0!important;background-color:#f5f5f5!important}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-icon{border-color:#cecece}.ab-checkbox.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}.ab-checkbox-wrap{display:inline-block;position:relative;cursor:pointer}.ab-checkbox-wrap .ab-checkbox{position:absolute;transform:translateY(-50%);top:50%;left:0}.ab-checkbox-wrap:hover .ab-checkbox-content{text-decoration:underline}.ab-checkbox-content{padding-left:.24rem;display:inline-block}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox{left:auto;right:0}.ab-checkbox-wrap.ab-checkbox-reverse .ab-checkbox-content{padding-left:0;padding-right:.24rem}.ab-checkbox-wrap.ab-checkbox-disabled{cursor:not-allowed;color:rgba(0,0,0,.25)}.ab-checkbox-wrap.ab-checkbox-disabled .ab-checkbox-content{text-decoration:none!important}
8
- .demo-collapse{min-height:200px;padding:.2rem}.title-wrap{width:1rem;height:.4rem;background-color:#3b82f6;color:#f3f4f6}.title-wrap>strong{display:block;width:1rem;height:.2rem;background-color:#10b981;cursor:pointer}
9
5
  .ab-collapse{transform-origin:left top;transition:opacity .2s,height .2s}.ab-collapse-hidden{height:0;overflow:hidden}.ab-collapse-fade-enter{opacity:.8;overflow:hidden}.ab-collapse-fade-enter-active{opacity:1;overflow:hidden}.ab-collapse-fade-enter-done{opacity:1;overflow:initial}.ab-collapse-fade-exit{opacity:1;overflow:hidden}.ab-collapse-fade-exit-active{opacity:.8;overflow:hidden}.ab-collapse-fade-exit-done{display:none;overflow:initial}
10
6
  .ab-confirm-btns{display:flex;justify-content:flex-end;padding-top:.42rem}.ab-confirm-cancel,.ab-confirm-ok{overflow:hidden;position:relative;font-size:.12rem;border-width:1px;border-style:solid;outline:0;cursor:pointer;font-weight:700;padding:.05rem .3rem;display:inline-block;color:#fff;margin-left:.3rem}.ab-confirm-ok{border-color:#bc0000;background:linear-gradient(180deg,#c00000 0,#c00000 0,#a00000 100%,#a00000 100%)}.ab-confirm-ok:hover{border-color:#bc0000;background:#bc0000}.ab-confirm-cancel{border-color:grey;background:linear-gradient(180deg,#909090 0,#909090 0,#707070 100%,#707070 100%)}.ab-confirm-cancel:hover{border-color:grey;background:grey}
11
7
  .ab-dp-cal{display:flex}.ab-dp-cal-my{padding-left:.12rem;margin-left:.12rem;border-left:1px solid #b0b0b0}.ab-dp-cal-day,.ab-dp-cal-my{width:2.1rem}.ab-dp-cal-dis{color:#c8c8c8}.ab-dp-cal-dg>ul>li{width:14.28%;height:.28rem}.ab-dp-cal-dg>ul>li.ab-dp-cal-out{color:#666}.ab-dp-cal-myg{padding-bottom:.62rem}.ab-dp-cal-myg>ul{justify-content:space-between}.ab-dp-cal-myg>ul>li{width:.4rem;height:.4rem;margin-bottom:.1rem}.ab-dp-cal-t{cursor:pointer;position:absolute;right:.08rem;bottom:.3rem}.ab-dp-cal-t.ab-dp-cal-t-dis{color:#b0b0b0;cursor:default}
12
- .ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-icon{position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}
8
+ .ab-date-picker{position:relative}.ab-date-picker-input{outline:0;font-size:.14rem;padding:.04rem;width:1.44rem}.ab-date-picker-input.ab-date-picker-error{background:#fffacd}.ab-date-picker-icon{color:#606060;position:absolute;right:.05rem;top:50%;transform:translateY(-50%)}
13
9
  .ab-drawer{position:fixed;z-index:101;background-color:#fff;overflow:auto;transition:transform .3s cubic-bezier(.7,.3,.1,1)}.ab-drawer-times{position:absolute;right:.17rem;font-size:.16rem;color:#b0b0b0;cursor:pointer;top:.11rem}.ab-drawer-times:hover{color:#333}.ab-drawer-tf-top{transform:translate(0,-100%)}.ab-drawer-tf-bottom{transform:translate(0,100%)}.ab-drawer-tf-left{transform:translate(-100%,0)}.ab-drawer-tf-right{transform:translate(100%,0)}.ab-drawer-hidden.ab-drawer,.ab-drawer-hidden.ab-mask{display:none}
14
10
  .ab-ellipsis{overflow:hidden;display:block;display:-webkit-box;-webkit-box-orient:vertical}.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:5}@media only screen and (max-width:767px){.ab-ellipsis.ab-ellipsis-line1{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line2{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line3{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line4{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-line5{-webkit-line-clamp:unset}.ab-ellipsis.ab-ellipsis-m-line1{-webkit-line-clamp:1}.ab-ellipsis.ab-ellipsis-m-line2{-webkit-line-clamp:2}.ab-ellipsis.ab-ellipsis-m-line3{-webkit-line-clamp:3}.ab-ellipsis.ab-ellipsis-m-line4{-webkit-line-clamp:4}.ab-ellipsis.ab-ellipsis-m-line5{-webkit-line-clamp:5}}
15
- .guide-demo .input{width:3rem}.guide-demo .btn{display:block;margin-top:.2rem;width:.8rem;height:.3rem;font-size:.16rem;text-align:center}
16
- .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
17
- .demo-icon-list{padding:.2rem .1rem;font-size:.12rem;display:flex;width:100%;flex-wrap:wrap}.demo-icon-list>li{padding:.1rem;border:1px solid #e0e0e0;margin:.05rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f3f4f6;min-width:1.2rem;min-height:1.5rem}.demo-icon-list>li svg{max-width:.5rem;height:.5rem}.demo-icon-list>li p{padding:0 5px;text-align:center;width:1rem;word-break:break-all}.demo-icon-list>li:hover{background-color:#e5e7eb}.demo-icon-list .demo-icon-name{padding-top:.15rem}
18
- .ab-icon,.ab-icon div,.ab-icon span,.ab-icon svg{display:block}
19
11
  .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
20
- .lazy-image-demo{margin-top:200vh}.lazy-image-demo img{display:block;width:400px;margin:.2rem}
12
+ .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
21
13
  .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
22
14
  .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:'>';position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
23
15
  .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
24
16
  .ab-loading-bar{position:fixed;top:0;left:0;margin-bottom:-3px;height:3px;width:100%;z-index:999}@keyframes movingBar{0%{left:50%;right:50%}99.9%{left:0;right:0}100%{left:50%;right:50%}}@keyframes changeBar{0%{background-color:#0aa770}33.3%{background-color:#0aa770}33.33%{background-color:red}66.6%{background-color:#f987d6}66.66%{background-color:#f987d6}99.9%{background-color:#00bcd4}}.ab-loading-bar-bar{position:absolute;height:0;width:100%;text-indent:-9999px;background-color:#0aa770;animation:changeBar 2.25s infinite}.ab-loading-bar-bar:before{content:"";height:3px;position:absolute;left:50%;right:50%;background-color:inherit;animation:movingBar .75s infinite}
25
- .loading-container-demo{margin:1rem;width:2rem;height:2rem;background:#b0b0b0}
26
17
  .ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
27
- .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
28
18
  .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
19
+ .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
29
20
  .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
30
21
  .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
31
- .demo-move{margin:.2rem auto;width:500px;height:500px;border:5px solid #ccc}
32
22
  .ab-move{cursor:move;visibility:hidden;transform-origin:center center}
33
- .popover-demo{padding:80px 60px;width:465px;height:400px;margin:auto;position:relative}.popover-demo button{width:100px;display:inline-block}.popover-demo-tip{height:60px;width:100px}
34
23
  .ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
35
24
 
36
25
 
37
- .select-demo{margin:10px auto;width:200px}.select-demo .select-group{width:1rem}
38
26
  .ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
39
27
  .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
40
- .skeleton-demo{padding:.2rem}
41
28
  .ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
42
- .tabs-demo{width:500px;margin:20px auto}.tabs-demo .ab-tabs-item{padding:2px 6px}
29
+ .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
43
30
  .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
44
31
  .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
45
- .table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}
46
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
47
32
  .ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}
48
33
 
49
- .ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}
34
+ .ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}
@@ -1,13 +1,19 @@
1
1
  import React from 'react';
2
- import { Column } from '../interface';
2
+ import { TableColumnInfo } from '../interface';
3
3
  export interface BodyRowProps<T> {
4
4
  className?: string;
5
5
  prefixCls: string;
6
6
  rowData: T;
7
7
  index: number;
8
- columns: Column<T>[];
8
+ columns: TableColumnInfo<T>[];
9
9
  indent: number;
10
10
  CheckCell: React.ReactElement;
11
+ isExpand?: boolean;
12
+ }
13
+ declare function BodyRow<RowDataType>({ className, prefixCls: cls, rowData, index, columns, indent, CheckCell, isExpand }: BodyRowProps<RowDataType>): JSX.Element;
14
+ declare namespace BodyRow {
15
+ var defaultProps: {
16
+ isExpand: boolean;
17
+ };
11
18
  }
12
- declare function BodyRow<RowDataType>({ className, prefixCls: cls, rowData, index, columns, indent, CheckCell }: BodyRowProps<RowDataType>): JSX.Element;
13
19
  export default BodyRow;
@@ -51,7 +51,8 @@ function BodyRow(_a) {
51
51
  index = _a.index,
52
52
  columns = _a.columns,
53
53
  indent = _a.indent,
54
- CheckCell = _a.CheckCell;
54
+ CheckCell = _a.CheckCell,
55
+ isExpand = _a.isExpand;
55
56
 
56
57
  var indentCell = _react.default.useMemo(function () {
57
58
  return getIndentCol(cls, indent);
@@ -83,7 +84,7 @@ function BodyRow(_a) {
83
84
  rowSpan: rowSpan === undefined ? 1 : rowSpan
84
85
  });
85
86
 
86
- if (cellInfo.colSpan === 0 || cellInfo.rowSpan === 0 || !cellInfo.content) {
87
+ if (cellInfo.colSpan === 0 || cellInfo.rowSpan === 0 || isExpand && !cellInfo.content) {
87
88
  return;
88
89
  }
89
90
 
@@ -104,5 +105,8 @@ function BodyRow(_a) {
104
105
  return null;
105
106
  }
106
107
 
108
+ BodyRow.defaultProps = {
109
+ isExpand: false
110
+ };
107
111
  var _default = BodyRow;
108
112
  exports.default = _default;
@@ -1,12 +1,12 @@
1
1
  import React, { ReactText } from 'react';
2
2
  import { BodyRowProps } from './BodyRow';
3
3
  import { BodyCheckIconProps, BodyRowSelectionInfo } from './CheckIcon';
4
- import { ColumnOnRenderReturnObjectInfo } from '../interface';
4
+ import { TableColumnOnRenderReturnObjectInfo } from '../interface';
5
5
  /**
6
6
  * 可展开子列表
7
7
  */
8
8
  export interface TableExpandableInfo<T> {
9
- expandedRowRender: (rowData: T, index: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
9
+ expandedRowRender: (rowData: T, index: number) => React.ReactNode | React.ReactNode[] | TableColumnOnRenderReturnObjectInfo;
10
10
  }
11
11
  export interface BodyProps<T> extends Pick<BodyRowProps<T>, 'prefixCls' | 'columns'>, Pick<BodyCheckIconProps<T>, 'selectedRowKeys'> {
12
12
  /**
@@ -46,14 +46,14 @@ function Body(_a) {
46
46
  CheckCell: CheckCell,
47
47
  indent: 0
48
48
  }));
49
- var expandedRowKey = rowKey + " expanded";
50
- var expandedColumns = [{
51
- title: null,
52
- key: expandedRowKey,
53
- onRender: expandedRowRenderer
54
- }];
55
49
 
56
50
  if (expandable) {
51
+ var expandedRowKey = rowKey + " expanded";
52
+ var expandedColumns = [{
53
+ title: null,
54
+ key: expandedRowKey,
55
+ onRender: expandedRowRenderer
56
+ }];
57
57
  rows.push(_react.default.createElement(_BodyRow.default, {
58
58
  key: expandedRowKey,
59
59
  className: prefixCls + "-expand-row",
@@ -62,7 +62,8 @@ function Body(_a) {
62
62
  index: rowIndex,
63
63
  columns: expandedColumns,
64
64
  CheckCell: null,
65
- indent: CheckCell ? 1 : 0
65
+ indent: CheckCell ? 1 : 0,
66
+ isExpand: true
66
67
  }));
67
68
  }
68
69
  });
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { Column } from '../interface';
3
- export interface HeaderCellProps<T> extends Column<T> {
2
+ import { TableColumnInfo } from '../interface';
3
+ export interface HeaderCellProps<T> extends TableColumnInfo<T> {
4
4
  prefixCls: string;
5
5
  isSort: boolean;
6
6
  isSortedDescending?: boolean;
@@ -11,8 +11,6 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _classnames = _interopRequireDefault(require("classnames"));
13
13
 
14
- var _icon = _interopRequireDefault(require("../../icon"));
15
-
16
14
  var __extends = void 0 && (void 0).__extends || function () {
17
15
  var _extendStatics = function extendStatics(d, b) {
18
16
  _extendStatics = Object.setPrototypeOf || {
@@ -72,12 +70,21 @@ function (_super) {
72
70
  return sortIcon(isSortedDescending);
73
71
  }
74
72
 
75
- return _react.default.createElement(_icon.default, {
76
- className: prefixCls + "-arrow",
77
- name: "arrow",
78
- color: "#fff",
79
- transform: isSortedDescending ? 'rotate(180deg)' : null
80
- });
73
+ return _react.default.createElement("span", {
74
+ className: prefixCls + "-arrow"
75
+ }, _react.default.createElement("svg", {
76
+ style: isSortedDescending ? {
77
+ transform: 'rotate(180deg)'
78
+ } : null,
79
+ viewBox: "0 0 1024 1024",
80
+ version: "1.1",
81
+ width: "1em",
82
+ height: "1em",
83
+ fill: "currentColor",
84
+ xmlns: "http://www.w3.org/2000/svg"
85
+ }, _react.default.createElement("path", {
86
+ d: "M525.339326 186.172452L801.789086 462.622212c12.496698 12.496698 32.758136 12.496698 45.254834 0 12.497405-12.497405 12.496698-32.758136 0-45.254834l-331.014362-331.014362c-12.496698-12.496698-32.757429-12.497405-45.254834 0l-341.795619 339.143969c-12.496698 12.496698-12.496698 32.758136 0 45.254834 12.496698 12.496698 32.758136 12.496698 45.254834 0l287.10586-284.454209L461.372325 925.726242c0 17.673427 14.32669 32.000117 32.000118 32.000117 17.67272-0.000707 31.99941-14.327398 32.000117-32.000117l-0.032527-739.553083z"
87
+ })));
81
88
  };
82
89
 
83
90
  return _this;
@@ -1,9 +1,9 @@
1
- import { Column } from '../interface';
1
+ import { TableColumnInfo } from '../interface';
2
2
  import { HeaderCellProps } from './HeaderCell';
3
3
  import { HeaderRowSelectionInfo } from './CheckIcon';
4
4
  export interface HeaderRowProps<T> extends Pick<HeaderCellProps<T>, 'sortName' | 'isSortedDescending' | 'sortIcon'> {
5
5
  prefixCls: string;
6
- columns: Column<T>[];
6
+ columns: TableColumnInfo<T>[];
7
7
  /**
8
8
  * 点击表头触发的排序函数
9
9
  * @param isSortedDescending
@@ -1,11 +1,11 @@
1
1
  import React, { ReactText } from 'react';
2
2
  import { AddListenerEventHandler } from '@autobest-ui/utils';
3
- import { Column } from './interface';
3
+ import { TableColumnInfo } from './interface';
4
4
  import { HeaderRowProps } from './header/HeaderRow';
5
5
  import { BodyProps } from './body';
6
6
  import { HeaderRowSelectionInfo } from './header/CheckIcon';
7
7
  import { BodyRowSelectionInfo } from './body/CheckIcon';
8
- export interface RowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
8
+ export interface TableRowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
9
9
  defaultSelectedRowKeys?: ReactText[];
10
10
  getDisabled?: (dataRow: any, selectedRowKeys: ReactText[], selectedRows: T[]) => boolean;
11
11
  onSelect?: (checked: boolean, rowData: T, selectedRows: T[]) => void;
@@ -21,7 +21,7 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
21
21
  * 定义每一列数据的格式
22
22
  * 具体类型见Column
23
23
  */
24
- columns: Column<T>[];
24
+ columns: TableColumnInfo<T>[];
25
25
  /**
26
26
  * 获取单条记录的唯一主键; 若是string类型,则取当前行数据中对应名称的属性值; 若是函数,则传入当前行数据,获取rowKey值;这也是勾选功能匹配时所用的key值
27
27
  */
@@ -41,7 +41,7 @@ export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sor
41
41
  /**
42
42
  * 表格行是否可勾选,详见RowSelection
43
43
  */
44
- rowSelection?: RowSelectionInfo<T>;
44
+ rowSelection?: TableRowSelectionInfo<T>;
45
45
  /**
46
46
  * 默认勾选项数组, 以primaryKey取值
47
47
  */
@@ -88,9 +88,9 @@ function (_super) {
88
88
  return {
89
89
  selectedRowKeys: [],
90
90
  selectedRows: [],
91
- rowSelection: __assign(__assign({}, prevState.rowSelection), {
91
+ rowSelection: prevState.rowSelection ? __assign(__assign({}, prevState.rowSelection), {
92
92
  selectAllChecked: false
93
- })
93
+ }) : null
94
94
  };
95
95
  });
96
96
  };
@@ -257,7 +257,7 @@ function (_super) {
257
257
  };
258
258
 
259
259
  _this.getRowSelection = function () {
260
- if (!('rowSelection' in _this.props)) {
260
+ if (!('rowSelection' in _this.props) || !_this.props.rowSelection) {
261
261
  return null;
262
262
  }
263
263
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export interface ColumnOnRenderReturnObjectInfo {
2
+ export interface TableColumnOnRenderReturnObjectInfo {
3
3
  children: React.ReactNode | React.ReactNode[];
4
4
  props: {
5
5
  className?: string;
@@ -7,7 +7,7 @@ export interface ColumnOnRenderReturnObjectInfo {
7
7
  colSpan?: number;
8
8
  };
9
9
  }
10
- export interface Column<T> {
10
+ export interface TableColumnInfo<T> {
11
11
  title: React.ReactNode | React.ReactNode[];
12
12
  key: string;
13
13
  dataIndex?: string;
@@ -18,5 +18,11 @@ export interface Column<T> {
18
18
  width?: string | number;
19
19
  className?: string;
20
20
  colSpan?: number;
21
- onRender?: (rowData: T, rowIndex: number, colIndex: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
21
+ /**
22
+ * 渲染单元格内容的方法,不传则默认用dataIndex去取当前行对应属性值;入参分别为当前行数据,行索引, 列索引
23
+ * @param rowData
24
+ * @param rowIndex
25
+ * @param colIndex
26
+ */
27
+ onRender?: (rowData: T, rowIndex: number, colIndex: number) => React.ReactNode | React.ReactNode[] | TableColumnOnRenderReturnObjectInfo;
22
28
  }
@@ -1 +1 @@
1
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
1
+ .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
@@ -8,6 +8,4 @@ if (_utils.canUseDOM) {
8
8
  require('../../loading-container/style/index');
9
9
 
10
10
  require('../../checkbox/style/index');
11
-
12
- require('../../icon/style/index');
13
11
  }
@@ -37,6 +37,8 @@ $namespace: ab-table;
37
37
  }
38
38
 
39
39
  &-arrow {
40
+ font-size: .16rem;
41
+ color: #fff;
40
42
  padding: 0 .05rem;
41
43
  }
42
44
  }