@nutui/nutui-react-taro 3.0.6 → 3.0.8

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/CHANGELOG.md +51 -15
  2. package/dist/cjs/packages/actionsheet/style/style.css +4 -4
  3. package/dist/cjs/packages/address/style/style.css +4 -4
  4. package/dist/cjs/packages/audio/style/style.css +4 -16
  5. package/dist/cjs/packages/avatar/style/style.css +4 -0
  6. package/dist/cjs/packages/button/style/button.scss +4 -20
  7. package/dist/cjs/packages/button/style/style.css +4 -16
  8. package/dist/cjs/packages/button/style/style.harmony.css +2 -14
  9. package/dist/cjs/packages/calendar/style/style.css +4 -4
  10. package/dist/cjs/packages/cascader/cascader.js +2 -1
  11. package/dist/cjs/packages/cascader/style/style.css +4 -4
  12. package/dist/cjs/packages/collapse/style/style.css +22 -7
  13. package/dist/cjs/packages/collapseitem/collapseitem.js +63 -77
  14. package/dist/cjs/packages/collapseitem/style/collapseitem.scss +22 -5
  15. package/dist/cjs/packages/collapseitem/style/style.css +22 -7
  16. package/dist/cjs/packages/collapseitem/style/style.harmony.css +22 -7
  17. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  18. package/dist/cjs/packages/datepicker/style/style.css +4 -4
  19. package/dist/cjs/packages/dialog/content.d.ts +11 -3
  20. package/dist/cjs/packages/dialog/content.js +4 -4
  21. package/dist/cjs/packages/dialog/dialog.d.ts +39 -4
  22. package/dist/cjs/packages/dialog/dialog.js +14 -13
  23. package/dist/cjs/packages/dialog/index.d.ts +1 -1
  24. package/dist/cjs/packages/dialog/style/dialog.scss +1 -0
  25. package/dist/cjs/packages/dialog/style/style.css +5 -16
  26. package/dist/cjs/packages/dialog/style/style.harmony.css +1 -0
  27. package/dist/cjs/packages/empty/style/style.css +4 -16
  28. package/dist/cjs/packages/image/image.js +10 -9
  29. package/dist/cjs/packages/image/style/image.scss +4 -1
  30. package/dist/cjs/packages/image/style/style.css +4 -0
  31. package/dist/cjs/packages/image/style/style.harmony.css +4 -0
  32. package/dist/cjs/packages/imagepreview/style/style.css +8 -4
  33. package/dist/cjs/packages/numberkeyboard/style/style.css +4 -4
  34. package/dist/cjs/packages/picker/style/style.css +4 -4
  35. package/dist/cjs/packages/popover/popover.d.ts +0 -7
  36. package/dist/cjs/packages/popover/popover.js +114 -141
  37. package/dist/cjs/packages/popover/style/popover.scss +48 -51
  38. package/dist/cjs/packages/popover/style/style.css +64 -70
  39. package/dist/cjs/packages/popover/style/style.harmony.css +64 -60
  40. package/dist/cjs/packages/popup/style/popup.scss +4 -4
  41. package/dist/cjs/packages/popup/style/style.css +4 -4
  42. package/dist/cjs/packages/popup/style/style.harmony.css +4 -4
  43. package/dist/cjs/packages/resultpage/style/style.css +4 -16
  44. package/dist/cjs/packages/shortpassword/style/style.css +4 -4
  45. package/dist/cjs/packages/sidebar/sidebar.js +11 -3
  46. package/dist/cjs/packages/skeleton/skeleton.js +1 -2
  47. package/dist/cjs/packages/swipe/swipe.js +1 -1
  48. package/dist/cjs/packages/switch/switch.js +53 -8
  49. package/dist/cjs/packages/tabpane/tabpane.js +2 -2
  50. package/dist/cjs/packages/timeselect/style/style.css +4 -4
  51. package/dist/cjs/packages/tour/style/style.css +64 -70
  52. package/dist/cjs/packages/tour/tour.js +3 -4
  53. package/dist/cjs/types/spec/dialog/base.d.ts +50 -1
  54. package/dist/cjs/types/spec/dialog/base.js +7 -0
  55. package/dist/cjs/types/spec/dialog/h5.d.ts +4 -1
  56. package/dist/cjs/types/spec/dialog/taro.d.ts +8 -2
  57. package/dist/cjs/types/spec/popover/base.d.ts +7 -0
  58. package/dist/cjs/utils/get-rect-by-taro.js +10 -0
  59. package/dist/cjs/utils/lru.d.ts +8 -0
  60. package/dist/cjs/utils/lru.js +58 -0
  61. package/dist/es/packages/actionsheet/style/style.css +4 -4
  62. package/dist/es/packages/address/style/style.css +4 -4
  63. package/dist/es/packages/audio/style/style.css +4 -16
  64. package/dist/es/packages/avatar/style/style.css +4 -0
  65. package/dist/es/packages/button/style/button.scss +4 -20
  66. package/dist/es/packages/button/style/style.css +4 -16
  67. package/dist/es/packages/button/style/style.harmony.css +2 -14
  68. package/dist/es/packages/calendar/style/style.css +4 -4
  69. package/dist/es/packages/cascader/cascader.js +2 -1
  70. package/dist/es/packages/cascader/style/style.css +4 -4
  71. package/dist/es/packages/collapse/style/style.css +22 -7
  72. package/dist/es/packages/collapseitem/collapseitem.js +65 -79
  73. package/dist/es/packages/collapseitem/style/collapseitem.scss +22 -5
  74. package/dist/es/packages/collapseitem/style/style.css +22 -7
  75. package/dist/es/packages/collapseitem/style/style.harmony.css +22 -7
  76. package/dist/es/packages/configprovider/types.d.ts +1 -1
  77. package/dist/es/packages/datepicker/style/style.css +4 -4
  78. package/dist/es/packages/dialog/content.d.ts +11 -3
  79. package/dist/es/packages/dialog/content.js +4 -4
  80. package/dist/es/packages/dialog/dialog.d.ts +39 -4
  81. package/dist/es/packages/dialog/dialog.js +14 -13
  82. package/dist/es/packages/dialog/index.d.ts +1 -1
  83. package/dist/es/packages/dialog/style/dialog.scss +1 -0
  84. package/dist/es/packages/dialog/style/style.css +5 -16
  85. package/dist/es/packages/dialog/style/style.harmony.css +1 -0
  86. package/dist/es/packages/empty/style/style.css +4 -16
  87. package/dist/es/packages/image/image.js +10 -10
  88. package/dist/es/packages/image/style/image.scss +4 -1
  89. package/dist/es/packages/image/style/style.css +4 -0
  90. package/dist/es/packages/image/style/style.harmony.css +4 -0
  91. package/dist/es/packages/imagepreview/style/style.css +8 -4
  92. package/dist/es/packages/numberkeyboard/style/style.css +4 -4
  93. package/dist/es/packages/picker/style/style.css +4 -4
  94. package/dist/es/packages/popover/popover.d.ts +0 -7
  95. package/dist/es/packages/popover/popover.js +115 -142
  96. package/dist/es/packages/popover/style/popover.scss +48 -51
  97. package/dist/es/packages/popover/style/style.css +64 -70
  98. package/dist/es/packages/popover/style/style.harmony.css +64 -60
  99. package/dist/es/packages/popup/style/popup.scss +4 -4
  100. package/dist/es/packages/popup/style/style.css +4 -4
  101. package/dist/es/packages/popup/style/style.harmony.css +4 -4
  102. package/dist/es/packages/resultpage/style/style.css +4 -16
  103. package/dist/es/packages/shortpassword/style/style.css +4 -4
  104. package/dist/es/packages/sidebar/sidebar.js +11 -3
  105. package/dist/es/packages/skeleton/skeleton.js +1 -2
  106. package/dist/es/packages/swipe/swipe.js +2 -2
  107. package/dist/es/packages/switch/switch.js +53 -8
  108. package/dist/es/packages/tabpane/tabpane.js +2 -2
  109. package/dist/es/packages/timeselect/style/style.css +4 -4
  110. package/dist/es/packages/tour/style/style.css +64 -70
  111. package/dist/es/packages/tour/tour.js +3 -4
  112. package/dist/es/types/spec/dialog/base.d.ts +83 -1
  113. package/dist/es/types/spec/dialog/base.js +1 -1
  114. package/dist/es/types/spec/dialog/h5.d.ts +4 -1
  115. package/dist/es/types/spec/dialog/taro.d.ts +8 -2
  116. package/dist/es/types/spec/popover/base.d.ts +7 -0
  117. package/dist/es/utils/get-rect-by-taro.js +9 -0
  118. package/dist/es/utils/lru.d.ts +8 -0
  119. package/dist/es/utils/lru.js +49 -0
  120. package/dist/nutui.react.umd.js +339 -286
  121. package/dist/style.css +1 -1
  122. package/dist/style.scss +52 -52
  123. package/dist/styles/theme-jmapp.scss +1 -0
  124. package/dist/styles/themes/dark.css +1 -1
  125. package/dist/styles/themes/default.css +1 -1
  126. package/dist/styles/themes/jmapp.css +1 -1
  127. package/dist/styles/themes/jrkf.css +1 -1
  128. package/dist/styles/variables-jmapp.scss +215 -49
  129. package/dist/styles/variables-jrkf.scss +2 -13
  130. package/dist/styles/variables.scss +7 -14
  131. package/package.json +1 -1
  132. package/dist/cjs/packages/dialog/types.d.ts +0 -57
  133. package/dist/cjs/packages/dialog/types.js +0 -4
  134. package/dist/cjs/packages/dialog/types.taro.d.ts +0 -10
  135. package/dist/es/packages/dialog/types.d.ts +0 -57
  136. package/dist/es/packages/dialog/types.js +0 -1
  137. package/dist/es/packages/dialog/types.taro.d.ts +0 -10
package/dist/es/packages/popover/style/style.css CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  .nut-popup {
62
62
  position: fixed;
63
- min-height: 46%;
63
+ min-height: 26%;
64
64
  max-height: 100%;
65
65
  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
66
66
  -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
198
198
  transform: scale(0.8);
199
199
  }
200
200
  }
201
- .nut-popup-slide-default-enter-active {
201
+ .nut-popup-slide-none-enter-active {
202
202
  animation-fill-mode: both;
203
203
  animation-name: popup-scale-fade-in;
204
204
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
205
205
  }
206
- .nut-popup-slide-default-exit-active {
206
+ .nut-popup-slide-none-exit-active {
207
207
  animation-fill-mode: both;
208
208
  animation-name: popup-scale-fade-out;
209
209
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
330
330
  animation-name: popup-slide-left-exit;
331
331
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
332
332
  }
333
- .nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
333
+ .nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
334
334
  display: none;
335
335
  }
336
336
  .nut-popup .nut-overflow-hidden {
@@ -411,12 +411,13 @@
411
411
  top: 50%;
412
412
  transform: rotate(90deg) translateY(-50%);
413
413
  }
414
- .nut-popover-arrow-left.nut-popover-arrow-left-start {
414
+ .nut-popover-arrow-left.nut-popover-arrow-left-top {
415
415
  top: 16px;
416
416
  right: -8px;
417
417
  transform: rotate(90deg) translateY(0%);
418
418
  }
419
- .nut-popover-arrow-left.nut-popover-arrow-left-end {
419
+ .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
420
+ top: auto;
420
421
  bottom: 16px;
421
422
  right: -8px;
422
423
  transform: rotate(90deg) translateY(0%);
@@ -429,12 +430,12 @@
429
430
  left: -6px;
430
431
  transform: rotate(-90deg) translateY(-50%);
431
432
  }
432
- .nut-popover-arrow-right.nut-popover-arrow-right-start {
433
+ .nut-popover-arrow-right.nut-popover-arrow-right-top {
433
434
  top: 16px;
434
435
  left: -8px;
435
436
  transform: rotate(-90deg) translateY(0%);
436
437
  }
437
- .nut-popover-arrow-right.nut-popover-arrow-right-end {
438
+ .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
438
439
  bottom: 16px;
439
440
  left: -8px;
440
441
  transform: rotate(-90deg) translateY(0%);
@@ -449,57 +450,51 @@
449
450
  max-height: initial;
450
451
  overflow-y: initial;
451
452
  }
452
- .nut-popover .nut-popover-content .nut-popover-menu-item {
453
+ .nut-popover .nut-popover-content-group {
454
+ padding: 0 var(--nutui-popover-padding, 8px);
455
+ }
456
+ .nut-popover .nut-popover-content .nut-popover-item {
453
457
  display: flex;
454
458
  align-items: center;
455
459
  justify-content: center;
456
- padding: 0 var(--nutui-popover-menu-item-padding, 8px);
457
460
  border-bottom: 1px solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
458
- max-width: var(--nutui-popover-menu-item-width, 160px);
461
+ max-width: var(--nutui-popover-item-width, 160px);
459
462
  word-wrap: break-word;
460
463
  }
461
- .nut-popover .nut-popover-content .nut-popover-menu-item:last-child {
464
+ .nut-popover .nut-popover-content .nut-popover-item:last-child {
462
465
  margin-bottom: 0px;
463
466
  border-bottom: none;
464
467
  }
465
- .nut-popover .nut-popover-content .nut-popover-menu-item-icon {
468
+ .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon {
466
469
  display: flex;
467
470
  justify-content: center;
468
471
  align-items: center;
469
- width: 12px;
470
- height: 12px;
471
- font-size: 12px;
472
+ width: var(--nutui-font-size-s, 12px);
473
+ height: var(--nutui-font-size-s, 12px);
474
+ font-size: var(--nutui-font-size-s, 12px);
475
+ }
476
+ .nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
477
+ width: var(--nutui-font-size-s, 12px);
478
+ height: var(--nutui-font-size-s, 12px);
479
+ font-size: var(--nutui-font-size-s, 12px);
472
480
  }
473
- .nut-popover .nut-popover-content .nut-popover-menu-item-icon .nut-icon {
474
- width: 12px;
475
- height: 12px;
476
- font-size: 12px;
481
+ .nut-popover .nut-popover-content .nut-popover-item-icon {
482
+ margin-right: var(--nutui-spacing-xxs, 4px);
477
483
  }
478
- .nut-popover .nut-popover-content .nut-popover-menu-item-name {
484
+ .nut-popover .nut-popover-content .nut-popover-item-name {
479
485
  width: calc(100% - 34px);
480
486
  word-break: keep-all;
481
- margin: 0 8px 0 4px;
482
487
  flex: 1;
483
488
  }
484
- .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
485
- display: flex;
486
- justify-content: center;
487
- align-items: center;
488
- width: 12px;
489
- height: 12px;
490
- font-size: 12px;
489
+ .nut-popover .nut-popover-content .nut-popover-item-action-icon {
491
490
  color: var(--nutui-color-text, #505259);
491
+ margin-left: var(--nutui-spacing-base, 8px);
492
492
  }
493
- .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon .nut-icon {
494
- width: 12px;
495
- height: 12px;
496
- font-size: 12px;
497
- }
498
- .nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled {
493
+ .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
499
494
  color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
500
495
  cursor: not-allowed;
501
496
  }
502
- .nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem {
497
+ .nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem {
503
498
  display: flex;
504
499
  }
505
500
  .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -507,18 +502,18 @@
507
502
  transform-origin: center left;
508
503
  transform: rotate(180deg) translateX(-50%);
509
504
  }
510
- .nut-popover .nut-popover-content-top-end {
505
+ .nut-popover .nut-popover-content-top-right {
511
506
  right: 0;
512
507
  }
513
- .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
508
+ .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
514
509
  right: 16px;
515
510
  bottom: -3.5px;
516
511
  transform: rotate(180deg) translateX(0%);
517
512
  }
518
- .nut-popover .nut-popover-content-top-start {
513
+ .nut-popover .nut-popover-content-top-left {
519
514
  left: 0;
520
515
  }
521
- .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
516
+ .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
522
517
  left: 16px;
523
518
  bottom: -3.5px;
524
519
  transform: rotate(180deg) translateX(0%);
@@ -527,30 +522,30 @@
527
522
  left: 50%;
528
523
  transform: translateX(-50%);
529
524
  }
530
- .nut-popover .nut-popover-content-bottom-end {
525
+ .nut-popover .nut-popover-content-bottom-right {
531
526
  right: 0;
532
527
  }
533
- .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
528
+ .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
534
529
  right: 16px;
535
530
  transform: translateX(0%);
536
531
  }
537
- .nut-popover .nut-popover-content-bottom-start {
532
+ .nut-popover .nut-popover-content-bottom-left {
538
533
  left: 0;
539
534
  }
540
- .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
535
+ .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
541
536
  left: 16px;
542
537
  transform: translateX(0%);
543
538
  }
544
- .nut-popover .nut-popover-content-left-end {
539
+ .nut-popover .nut-popover-content-left-bottom {
545
540
  bottom: 0;
546
541
  }
547
- .nut-popover .nut-popover-content-left-start {
542
+ .nut-popover .nut-popover-content-left-top {
548
543
  top: 0;
549
544
  }
550
- .nut-popover .nut-popover-content-right-end {
545
+ .nut-popover .nut-popover-content-right-bottom {
551
546
  bottom: 0;
552
547
  }
553
- .nut-popover .nut-popover-content-right-start {
548
+ .nut-popover .nut-popover-content-right-top {
554
549
  top: 0;
555
550
  }
556
551
 
@@ -565,19 +560,18 @@
565
560
  background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important;
566
561
  color: var(--nutui-popover-content-background-color, #ffffff) !important;
567
562
  }
568
- .nut-popover-dark .nut-popover-content .nut-popover-menu-item-action-icon {
563
+ .nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
569
564
  color: rgba(255, 255, 255, 0.8);
570
565
  }
571
566
 
572
- [dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-name,
573
- .nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-name {
567
+ [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
568
+ .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
574
569
  margin-left: 0;
575
570
  margin-right: 4px;
576
571
  }
577
- [dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon,
578
- .nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
572
+ [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
573
+ .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
579
574
  right: auto;
580
- left: var(--nutui-popover-menu-item-padding, 8px);
581
575
  }
582
576
  [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
583
577
  .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -585,23 +579,23 @@
585
579
  right: 50%;
586
580
  transform: translateX(50%);
587
581
  }
588
- [dir=rtl] .nut-popover .nut-popover-content-top-end,
589
- .nut-rtl .nut-popover .nut-popover-content-top-end {
582
+ [dir=rtl] .nut-popover .nut-popover-content-top-right,
583
+ .nut-rtl .nut-popover .nut-popover-content-top-right {
590
584
  right: auto;
591
585
  left: 0;
592
586
  }
593
- [dir=rtl] .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end,
594
- .nut-rtl .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
587
+ [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
588
+ .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
595
589
  right: auto;
596
590
  left: 16px;
597
591
  }
598
- [dir=rtl] .nut-popover .nut-popover-content-top-start,
599
- .nut-rtl .nut-popover .nut-popover-content-top-start {
592
+ [dir=rtl] .nut-popover .nut-popover-content-top-left,
593
+ .nut-rtl .nut-popover .nut-popover-content-top-left {
600
594
  left: auto;
601
595
  right: 0;
602
596
  }
603
- [dir=rtl] .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start,
604
- .nut-rtl .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
597
+ [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
598
+ .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
605
599
  left: auto;
606
600
  right: 16px;
607
601
  }
@@ -611,23 +605,23 @@
611
605
  right: 50%;
612
606
  transform: translateX(50%);
613
607
  }
614
- [dir=rtl] .nut-popover .nut-popover-content-bottom-end,
615
- .nut-rtl .nut-popover .nut-popover-content-bottom-end {
608
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-right,
609
+ .nut-rtl .nut-popover .nut-popover-content-bottom-right {
616
610
  right: auto;
617
611
  left: 0;
618
612
  }
619
- [dir=rtl] .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end,
620
- .nut-rtl .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
613
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
614
+ .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
621
615
  right: auto;
622
616
  left: 16px;
623
617
  }
624
- [dir=rtl] .nut-popover .nut-popover-content-bottom-start,
625
- .nut-rtl .nut-popover .nut-popover-content-bottom-start {
618
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
619
+ .nut-rtl .nut-popover .nut-popover-content-bottom-left {
626
620
  left: auto;
627
621
  right: 0;
628
622
  }
629
- [dir=rtl] .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start,
630
- .nut-rtl .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
623
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
624
+ .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
631
625
  left: auto;
632
626
  right: 16px;
633
627
  }
package/dist/es/packages/popover/style/style.harmony.css CHANGED
@@ -30,12 +30,13 @@
30
30
  top: 50%;
31
31
  transform: rotate(90deg) translateY(-50%);
32
32
  }
33
- .nut-popover-arrow-left.nut-popover-arrow-left-start {
33
+ .nut-popover-arrow-left.nut-popover-arrow-left-top {
34
34
  top: 16px;
35
35
  right: -8px;
36
36
  transform: rotate(90deg) translateY(0%);
37
37
  }
38
- .nut-popover-arrow-left.nut-popover-arrow-left-end {
38
+ .nut-popover-arrow-left.nut-popover-arrow-left-bottom {
39
+ top: auto;
39
40
  bottom: 16px;
40
41
  right: -8px;
41
42
  transform: rotate(90deg) translateY(0%);
@@ -48,12 +49,12 @@
48
49
  left: -6px;
49
50
  transform: rotate(-90deg) translateY(-50%);
50
51
  }
51
- .nut-popover-arrow-right.nut-popover-arrow-right-start {
52
+ .nut-popover-arrow-right.nut-popover-arrow-right-top {
52
53
  top: 16px;
53
54
  left: -8px;
54
55
  transform: rotate(-90deg) translateY(0%);
55
56
  }
56
- .nut-popover-arrow-right.nut-popover-arrow-right-end {
57
+ .nut-popover-arrow-right.nut-popover-arrow-right-bottom {
57
58
  bottom: 16px;
58
59
  left: -8px;
59
60
  transform: rotate(-90deg) translateY(0%);
@@ -68,20 +69,22 @@
68
69
  max-height: initial;
69
70
  overflow-y: initial;
70
71
  }
71
- .nut-popover .nut-popover-content .nut-popover-menu-item {
72
+ .nut-popover .nut-popover-content-group {
73
+ padding: 0 8px;
74
+ }
75
+ .nut-popover .nut-popover-content .nut-popover-item {
72
76
  display: flex;
73
77
  align-items: center;
74
78
  justify-content: center;
75
- padding: 0 8px;
76
79
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
77
80
  max-width: 160px;
78
81
  word-wrap: break-word;
79
82
  }
80
- .nut-popover .nut-popover-content .nut-popover-menu-item:last-child {
83
+ .nut-popover .nut-popover-content .nut-popover-item:last-child {
81
84
  margin-bottom: 0px;
82
85
  border-bottom: none;
83
86
  }
84
- .nut-popover .nut-popover-content .nut-popover-menu-item-icon {
87
+ .nut-popover .nut-popover-content .nut-popover-item-icon {
85
88
  display: flex;
86
89
  justify-content: center;
87
90
  align-items: center;
@@ -89,36 +92,41 @@
89
92
  height: 12px;
90
93
  font-size: 12px;
91
94
  }
92
- .nut-popover .nut-popover-content .nut-popover-menu-item-icon .nut-icon {
95
+ .nut-popover .nut-popover-content .nut-popover-item-action-icon {
96
+ display: flex;
97
+ justify-content: center;
98
+ align-items: center;
93
99
  width: 12px;
94
100
  height: 12px;
95
101
  font-size: 12px;
96
102
  }
97
- .nut-popover .nut-popover-content .nut-popover-menu-item-name {
98
- width: calc(100% - 34px);
99
- word-break: keep-all;
100
- margin: 0 8px 0 4px;
101
- flex: 1;
102
- }
103
- .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
104
- display: flex;
105
- justify-content: center;
106
- align-items: center;
103
+ .nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon {
107
104
  width: 12px;
108
105
  height: 12px;
109
106
  font-size: 12px;
110
- color: #505259;
111
107
  }
112
- .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon .nut-icon {
108
+ .nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon {
113
109
  width: 12px;
114
110
  height: 12px;
115
111
  font-size: 12px;
116
112
  }
117
- .nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled {
113
+ .nut-popover .nut-popover-content .nut-popover-item-icon {
114
+ margin-right: 4px;
115
+ }
116
+ .nut-popover .nut-popover-content .nut-popover-item-name {
117
+ width: calc(100% - 34px);
118
+ word-break: keep-all;
119
+ flex: 1;
120
+ }
121
+ .nut-popover .nut-popover-content .nut-popover-item-action-icon {
122
+ color: #505259;
123
+ margin-left: 8px;
124
+ }
125
+ .nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled {
118
126
  color: #c2c4cc;
119
127
  cursor: not-allowed;
120
128
  }
121
- .nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem {
129
+ .nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem {
122
130
  display: flex;
123
131
  }
124
132
  .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -126,18 +134,18 @@
126
134
  transform-origin: center left;
127
135
  transform: rotate(180deg) translateX(-50%);
128
136
  }
129
- .nut-popover .nut-popover-content-top-end {
137
+ .nut-popover .nut-popover-content-top-right {
130
138
  right: 0;
131
139
  }
132
- .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
140
+ .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
133
141
  right: 16px;
134
142
  bottom: -3.5px;
135
143
  transform: rotate(180deg) translateX(0%);
136
144
  }
137
- .nut-popover .nut-popover-content-top-start {
145
+ .nut-popover .nut-popover-content-top-left {
138
146
  left: 0;
139
147
  }
140
- .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
148
+ .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
141
149
  left: 16px;
142
150
  bottom: -3.5px;
143
151
  transform: rotate(180deg) translateX(0%);
@@ -146,30 +154,30 @@
146
154
  left: 50%;
147
155
  transform: translateX(-50%);
148
156
  }
149
- .nut-popover .nut-popover-content-bottom-end {
157
+ .nut-popover .nut-popover-content-bottom-right {
150
158
  right: 0;
151
159
  }
152
- .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
160
+ .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
153
161
  right: 16px;
154
162
  transform: translateX(0%);
155
163
  }
156
- .nut-popover .nut-popover-content-bottom-start {
164
+ .nut-popover .nut-popover-content-bottom-left {
157
165
  left: 0;
158
166
  }
159
- .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
167
+ .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
160
168
  left: 16px;
161
169
  transform: translateX(0%);
162
170
  }
163
- .nut-popover .nut-popover-content-left-end {
171
+ .nut-popover .nut-popover-content-left-bottom {
164
172
  bottom: 0;
165
173
  }
166
- .nut-popover .nut-popover-content-left-start {
174
+ .nut-popover .nut-popover-content-left-top {
167
175
  top: 0;
168
176
  }
169
- .nut-popover .nut-popover-content-right-end {
177
+ .nut-popover .nut-popover-content-right-bottom {
170
178
  bottom: 0;
171
179
  }
172
- .nut-popover .nut-popover-content-right-start {
180
+ .nut-popover .nut-popover-content-right-top {
173
181
  top: 0;
174
182
  }
175
183
 
@@ -184,22 +192,18 @@
184
192
  background: rgba(0, 0, 0, 0.7) !important;
185
193
  color: #ffffff !important;
186
194
  }
187
- .nut-popover-dark .nut-popover-content .nut-popover-menu-item-action-icon {
195
+ .nut-popover-dark .nut-popover-content .nut-popover-item-action-icon {
188
196
  color: rgba(255, 255, 255, 0.8);
189
197
  }
190
198
 
191
- [dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-name,
192
- .nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-name {
199
+ [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-name,
200
+ .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name {
193
201
  margin-left: 0;
194
202
  margin-right: 4px;
195
203
  }
196
- [dir=rtl] .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
197
- right: auto;
198
- left: 8px;
199
- }
200
- .nut-rtl .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
204
+ [dir=rtl] .nut-popover .nut-popover-content .nut-popover-item-action-icon,
205
+ .nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon {
201
206
  right: auto;
202
- left: 8px;
203
207
  }
204
208
  [dir=rtl] .nut-popover .nut-popover-content-top .nut-popover-arrow-top,
205
209
  .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top {
@@ -207,23 +211,23 @@
207
211
  right: 50%;
208
212
  transform: translateX(50%);
209
213
  }
210
- [dir=rtl] .nut-popover .nut-popover-content-top-end,
211
- .nut-rtl .nut-popover .nut-popover-content-top-end {
214
+ [dir=rtl] .nut-popover .nut-popover-content-top-right,
215
+ .nut-rtl .nut-popover .nut-popover-content-top-right {
212
216
  right: auto;
213
217
  left: 0;
214
218
  }
215
- [dir=rtl] .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end,
216
- .nut-rtl .nut-popover .nut-popover-content-top-end .nut-popover-arrow-top-end {
219
+ [dir=rtl] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right,
220
+ .nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right {
217
221
  right: auto;
218
222
  left: 16px;
219
223
  }
220
- [dir=rtl] .nut-popover .nut-popover-content-top-start,
221
- .nut-rtl .nut-popover .nut-popover-content-top-start {
224
+ [dir=rtl] .nut-popover .nut-popover-content-top-left,
225
+ .nut-rtl .nut-popover .nut-popover-content-top-left {
222
226
  left: auto;
223
227
  right: 0;
224
228
  }
225
- [dir=rtl] .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start,
226
- .nut-rtl .nut-popover .nut-popover-content-top-start .nut-popover-arrow-top-start {
229
+ [dir=rtl] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left,
230
+ .nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left {
227
231
  left: auto;
228
232
  right: 16px;
229
233
  }
@@ -233,23 +237,23 @@
233
237
  right: 50%;
234
238
  transform: translateX(50%);
235
239
  }
236
- [dir=rtl] .nut-popover .nut-popover-content-bottom-end,
237
- .nut-rtl .nut-popover .nut-popover-content-bottom-end {
240
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-right,
241
+ .nut-rtl .nut-popover .nut-popover-content-bottom-right {
238
242
  right: auto;
239
243
  left: 0;
240
244
  }
241
- [dir=rtl] .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end,
242
- .nut-rtl .nut-popover .nut-popover-content-bottom-end .nut-popover-arrow-bottom-end {
245
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right,
246
+ .nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right {
243
247
  right: auto;
244
248
  left: 16px;
245
249
  }
246
- [dir=rtl] .nut-popover .nut-popover-content-bottom-start,
247
- .nut-rtl .nut-popover .nut-popover-content-bottom-start {
250
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-left,
251
+ .nut-rtl .nut-popover .nut-popover-content-bottom-left {
248
252
  left: auto;
249
253
  right: 0;
250
254
  }
251
- [dir=rtl] .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start,
252
- .nut-rtl .nut-popover .nut-popover-content-bottom-start .nut-popover-arrow-bottom-start {
255
+ [dir=rtl] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left,
256
+ .nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left {
253
257
  left: auto;
254
258
  right: 16px;
255
259
  }
package/dist/es/packages/popup/style/popup.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .nut-popup {
2
2
  position: fixed;
3
- min-height: 46%;
3
+ min-height: 26%;
4
4
  max-height: 100%;
5
5
  background-color: $overlay-content-bg-color;
6
6
  -webkit-overflow-scrolling: touch;
@@ -158,13 +158,13 @@
158
158
  }
159
159
  }
160
160
 
161
- &-default-enter-active {
161
+ &-none-enter-active {
162
162
  animation-fill-mode: both;
163
163
  animation-name: popup-scale-fade-in;
164
164
  animation-duration: $popup-animation-duration;
165
165
  }
166
166
 
167
- &-default-exit-active {
167
+ &-none-exit-active {
168
168
  animation-fill-mode: both;
169
169
  animation-name: popup-scale-fade-out;
170
170
  animation-duration: $popup-animation-duration;
@@ -321,7 +321,7 @@
321
321
  animation-duration: $popup-animation-duration;
322
322
  }
323
323
 
324
- &-default-exit-done,
324
+ &-none-exit-done,
325
325
  &-center-exit-done,
326
326
  &-left-exit-done,
327
327
  &-right-exit-done,
package/dist/es/packages/popup/style/style.css CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  .nut-popup {
62
62
  position: fixed;
63
- min-height: 46%;
63
+ min-height: 26%;
64
64
  max-height: 100%;
65
65
  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
66
66
  -webkit-overflow-scrolling: touch;
@@ -198,12 +198,12 @@
198
198
  transform: scale(0.8);
199
199
  }
200
200
  }
201
- .nut-popup-slide-default-enter-active {
201
+ .nut-popup-slide-none-enter-active {
202
202
  animation-fill-mode: both;
203
203
  animation-name: popup-scale-fade-in;
204
204
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
205
205
  }
206
- .nut-popup-slide-default-exit-active {
206
+ .nut-popup-slide-none-exit-active {
207
207
  animation-fill-mode: both;
208
208
  animation-name: popup-scale-fade-out;
209
209
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
@@ -330,7 +330,7 @@
330
330
  animation-name: popup-slide-left-exit;
331
331
  animation-duration: var(--nutui-popup-animation-duration, 0.3s);
332
332
  }
333
- .nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
333
+ .nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
334
334
  display: none;
335
335
  }
336
336
  .nut-popup .nut-overflow-hidden {
package/dist/es/packages/popup/style/style.harmony.css CHANGED
@@ -6,7 +6,7 @@
6
6
  /* #endif */
7
7
  .nut-popup {
8
8
  position: fixed;
9
- min-height: 46%;
9
+ min-height: 26%;
10
10
  max-height: 100%;
11
11
  background-color: #ffffff;
12
12
  -webkit-overflow-scrolling: touch;
@@ -144,12 +144,12 @@
144
144
  transform: scale(0.8);
145
145
  }
146
146
  }
147
- .nut-popup-slide-default-enter-active {
147
+ .nut-popup-slide-none-enter-active {
148
148
  animation-fill-mode: both;
149
149
  animation-name: popup-scale-fade-in;
150
150
  animation-duration: 0.3s;
151
151
  }
152
- .nut-popup-slide-default-exit-active {
152
+ .nut-popup-slide-none-exit-active {
153
153
  animation-fill-mode: both;
154
154
  animation-name: popup-scale-fade-out;
155
155
  animation-duration: 0.3s;
@@ -305,7 +305,7 @@
305
305
  animation-name: popup-slide-left-exit;
306
306
  animation-duration: 0.3s;
307
307
  }
308
- .nut-popup-slide-default-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
308
+ .nut-popup-slide-none-exit-done.nut-popup, .nut-popup-slide-center-exit-done.nut-popup, .nut-popup-slide-left-exit-done.nut-popup, .nut-popup-slide-right-exit-done.nut-popup, .nut-popup-slide-top-exit-done.nut-popup, .nut-popup-slide-bottom-exit-done.nut-popup {
309
309
  display: none;
310
310
  }
311
311
  .nut-popup .nut-overflow-hidden {