@nutui/nutui-react-taro 2.3.8 → 2.3.10

package/dist/packages/audio/audio.scss

@@ -86,3 +86,17 @@
     }
   }
 }
+
+[dir='rtl'] .nut-audio,
+.nut-rtl .nut-audio {
+  &-icon {
+    .nut-audio-icon-stop {
+      &::after {
+        left: auto;
+        right: 50%;
+        transform: rotate(-45deg);
+        transform-origin: 20px -18px;
+      }
+    }
+  }
+}

package/dist/packages/avatar/avatar.scss

@@ -1,3 +1,4 @@
+
 .nut-avatar {
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -6,6 +7,7 @@
   position: relative;
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
+
   .avatar-img {
     position: absolute;
     width: 100%;
@@ -15,6 +17,7 @@
     transform: translate(-50%, -50%);
     flex-shrink: 0;
   }
+
   .icon {
     background-size: 100% 100%;
     position: absolute;
@@ -22,10 +25,12 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
   .nut-icon-img {
     width: 100%;
     height: 100%;
   }
+
   .text {
     display: inline-block;
     width: 100%;
@@ -34,25 +39,45 @@
     overflow: hidden;
   }
 }
+
+[dir='rtl'] .nut-avatar,
+.nut-rtl .nut-avatar {
+  .avatar-img {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+
+  .icon {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
+
 .nut-avatar-large {
   width: $avatar-large-width;
   height: $avatar-large-height;
   line-height: $avatar-large-height;
 }
+
 .nut-avatar-small {
   width: $avatar-small-width;
   height: $avatar-small-height;
   line-height: $avatar-small-height;
 }
+
 .nut-avatar-normal {
   width: $avatar-normal-width;
   height: $avatar-normal-height;
   line-height: $avatar-normal-height;
 }
+
 .nut-avatar-round {
   border-radius: 50%;
   overflow: hidden;
 }
+
 .nut-avatar-square {
   border-radius: $avatar-square;
 }

package/dist/packages/avatarcropper/avatarcropper.scss

@@ -1,6 +1,7 @@
 .nut-avatar-cropper {
   position: relative;
   display: flex;
+
   &-edit-text {
     position: absolute;
     top: 0;
@@ -14,6 +15,7 @@
     justify-content: center;
     align-items: center;
   }
+
   &-input {
     position: absolute;
     top: 0;
@@ -24,6 +26,7 @@
     cursor: pointer;
     z-index: 2;
   }
+
   &-popup {
     position: fixed;
     top: 0;
@@ -32,6 +35,7 @@
     height: 100%;
     background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7));
     z-index: 1000;
+
     &-canvas,
     &-cut-canvas {
       position: absolute;
@@ -41,24 +45,29 @@
       height: 100%;
       z-index: 1;
     }
+
     &-cut-canvas {
       z-index: 0;
     }
+
     &-toolbar {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       z-index: 2;
+
       &.top {
         top: 0;
         bottom: inherit;
       }
+
       &-flex {
         width: 100%;
         display: flex;
         justify-content: space-between;
       }
+
       &-item {
         color: #fff;
         padding: 15px;
@@ -71,6 +80,7 @@
         }
       }
     }
+
     &-highlight {
       position: absolute;
       left: 0;
@@ -79,6 +89,7 @@
       height: 100%;
       z-index: 1;
       background-color: transparent;
+
       .highlight {
         position: absolute;
         left: 50%;
@@ -89,9 +100,50 @@
       }
     }
   }
+
   &.round {
     .nut-avatar-cropper-edit-text {
       border-radius: 50%;
     }
   }
 }
+
+[dir='rtl'] .nut-avatar-cropper,
+.nut-rtl .nut-avatar-cropper {
+  &-edit-text {
+    left: auto;
+    right: 0;
+  }
+
+  &-input {
+    left: auto;
+    right: 0;
+  }
+
+  &-popup {
+    left: auto;
+    right: 0;
+
+    &-canvas,
+    &-cut-canvas {
+      left: auto;
+      right: 0;
+    }
+
+    &-toolbar {
+      left: auto;
+      right: 0;
+    }
+
+    &-highlight {
+      left: auto;
+      right: 0;
+
+      .highlight {
+        left: auto;
+        right: 50%;
+        transform: translate(50%, -50%);
+      }
+    }
+  }
+}

package/dist/packages/avatargroup/avatargroup.scss

@@ -7,8 +7,19 @@
   flex: 0 0 auto; // 防止被压缩
   .nut-avatar {
     border: 1px solid #fff;
+
     &:not(:first-of-type) {
       margin-left: -8px;
     }
   }
 }
+
+[dir='rtl'] .nut-avatar-group,
+.nut-rtl .nut-avatar-group {
+  .nut-avatar {
+    &:not(:first-of-type) {
+      margin-left: 0;
+      margin-right: -8px;
+    }
+  }
+}

package/dist/packages/badge/badge.scss

@@ -58,3 +58,11 @@
     padding: 0;
   }
 }
+
+[dir='rtl'] .nut-badge,
+.nut-rtl .nut-badge {
+  &-icon {
+    right: auto;
+    left: -15%;
+  }
+}

package/dist/packages/barrage/barrage.scss

@@ -50,7 +50,24 @@
     }
 
     to {
-      transform: translateX(var(--move-distance));
+      -webkit-transform: translateX(var(--move-distance));
     }
   }
 }
+
+[dir='rtl'] .nut-barrage,
+.nut-rtl .nut-barrage {
+  left: auto;
+  right: 0;
+
+  .barrage-item {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      to left,
+      var(--nutui-black-3),
+      var(--nutui-black-1)
+    );
+  }
+}

package/dist/packages/button/button.scss

@@ -327,3 +327,21 @@
     border-radius: $button-square-border-radius;
   }
 }
+
+[dir='rtl'] .nut-button,
+.nut-rtl .nut-button {
+  &-text {
+    margin-left: 0;
+    margin-right: $button-text-icon-margin;
+
+    &.right {
+      margin-left: $button-text-icon-margin;
+    }
+  }
+
+  &::before {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}

package/dist/packages/calendar/calendar.scss

@@ -183,6 +183,7 @@
 
     &-disabled {
       color: $calendar-disable-color !important;
+
       .nut-calendar-day-info-curr {
         display: none;
       }
@@ -222,6 +223,29 @@
   }
 }
 
+[dir='rtl'] .nut-calendar,
+.nut-rtl .nut-calendar {
+  &-day {
+    float: right;
+
+    &-active {
+      &.active-start {
+        border-top-left-radius: 0;
+        border-top-right-radius: $calendar-day-active-border-radius;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: $calendar-day-active-border-radius;
+      }
+
+      &.active-end {
+        border-top-right-radius: 0;
+        border-top-left-radius: $calendar-day-active-border-radius;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: $calendar-day-active-border-radius;
+      }
+    }
+  }
+}
+
 .nut-calendar-popup .nut-popup-title-right {
   top: 7px !important;
 }

package/dist/packages/calendarcard/calendarcard.scss

@@ -23,6 +23,7 @@
       .left {
         margin-left: 8px;
       }
+
       .right {
         margin-right: 8px;
       }
@@ -102,3 +103,43 @@
     }
   }
 }
+
+[dir='rtl'] .nut-calendarcard,
+.nut-rtl .nut-calendarcard {
+  &-header {
+    &-left,
+    &-right {
+      .left {
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .right {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+
+      .nut-icon-ArrowLeft,
+      .nut-icon-ArrowRight,
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-day {
+    &.start {
+      border-top-left-radius: 0;
+      border-top-right-radius: $calendar-day-active-border-radius;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $calendar-day-active-border-radius;
+    }
+
+    &.end {
+      border-top-right-radius: 0;
+      border-top-left-radius: $calendar-day-active-border-radius;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: $calendar-day-active-border-radius;
+    }
+  }
+}

package/dist/packages/card/card.scss

@@ -90,3 +90,24 @@
     }
   }
 }
+
+[dir='rtl'] .nut-card,
+.nut-rtl .nut-card {
+  &-right {
+    &-price {
+      &-origin {
+        &.nut-price {
+          margin-left: 0;
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-other {
+      .nut-tag {
+        margin-right: 0;
+        margin-left: 5px;
+      }
+    }
+  }
+}

package/dist/packages/cascader/cascader.scss

@@ -68,3 +68,11 @@
     visibility: hidden;
   }
 }
+
+[dir='rtl'] .nut-cascader,
+.nut-rtl .nut-cascader {
+  .nut-icon-checklist {
+    margin-left: 0;
+    margin-right: $cascader-icon-checklist-marginLeft;
+  }
+}

package/dist/packages/cellgroup/cellgroup.scss

@@ -27,6 +27,7 @@
     overflow: hidden;
     background-color: $cell-group-background-color;
     margin: 10px 0;
+
     .nut-cell {
       margin: 0;
       box-shadow: none;
@@ -46,6 +47,7 @@
         transform: scaleY(0.5);
         border-top: $cell-divider-border-bottom;
       }
+
       &:last-child {
         .nut-cell-divider {
           border-top: 0 !important;
@@ -54,3 +56,15 @@
     }
   }
 }
+
+[dir='rtl'] .nut-cell-group,
+.nut-rtl .nut-cell-group {
+  &-wrap-divider {
+    .nut-cell {
+      &-divider {
+        left: $cell-divider-right;
+        right: $cell-divider-left;
+      }
+    }
+  }
+}

package/dist/packages/checkbox/checkbox.scss

@@ -103,6 +103,7 @@
         font-size: 12px;
         width: 12px;
         height: 12px;
+
         &:before {
           top: auto;
           bottom: -22px;
@@ -118,3 +119,40 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
+[dir='rtl'] .nut-checkbox,
+.nut-rtl .nut-checkbox {
+  &-label {
+    margin-left: 0;
+    margin-right: $checkbox-label-margin-left;
+  }
+
+  &-reverse {
+    .nut-checkbox-label {
+      margin-left: $checkbox-label-margin-left;
+      margin-right: 0;
+    }
+  }
+
+  &-button {
+    &-icon {
+      right: auto;
+      left: 0;
+      border-right: 10px solid transparent;
+      border-left: 10px solid $color-primary;
+
+      &-checked {
+        left: auto;
+        right: 50%;
+        transform: translate(3px, -3px);
+      }
+
+      .nut-icon {
+        &:before {
+          margin-left: 0;
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}

package/dist/packages/checkboxgroup/checkboxgroup.scss

@@ -2,10 +2,6 @@
   .nut-checkbox {
     margin-bottom: 5px;
 
-    &-label {
-      margin-right: 5px;
-    }
-
     &-button {
       background-color: $color-background;
     }
@@ -18,10 +14,6 @@
         justify-content: space-between;
       }
 
-      &-label {
-        margin-right: 5px;
-      }
-
       &-button-active {
         border: $radio-button-active-border;
         background-color: $color-primary-light;
@@ -41,3 +33,27 @@
     }
   }
 }
+
+[dir='rtl'] .nut-checkboxgroup,
+.nut-rtl .nut-checkboxgroup {
+  .nut-checkbox {
+    &-label {
+      margin-right: 5px;
+    }
+  }
+
+  &-vertical {
+    .nut-checkbox {
+      &-label {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  &-horizontal {
+    .nut-checkbox {
+      margin-right: 0;
+      margin-left: 20px;
+    }
+  }
+}

package/dist/packages/circleprogress/circleprogress.scss

@@ -24,3 +24,11 @@
     font-size: $circleprogress-text-size;
   }
 }
+
+[dir='rtl'] .nut-circleprogress,
+.nut-rtl .nut-circleprogress {
+  &-text {
+    left: auto;
+    right: 0;
+  }
+}

package/dist/packages/col/col.scss

@@ -3,12 +3,31 @@
   box-sizing: border-box;
   word-break: break-all;
   margin-bottom: $col-default-margin-bottom;
+
+  &-gutter {
+    &:last-child {
+      padding-right: 0 !important;
+    }
+
+    &:first-child {
+      padding-left: 0 !important;
+    }
+  }
+}
+
+[dir='rtl'] .nut-col,
+.nut-rtl .nut-col {
+  float: right;
+
   &-gutter {
     &:last-child {
       padding-right: 0 !important;
+      padding-left: 0 !important;
     }
+
     &:first-child {
       padding-left: 0 !important;
+      padding-right: 0 !important;
     }
   }
 }
@@ -18,6 +37,12 @@
     margin-left: calc((100 / 24) * #{$i} * 1%);
   }
 
+  [dir='rtl'] .nut-col-offset-#{$i},
+  .nut-rtl .nut-col-offset-#{$i} {
+    margin-left: 0;
+    margin-right: calc((100 / 24) * #{$i} * 1%);
+  }
+
   .nut-col-#{$i} {
     width: calc((100 / 24) * #{$i} * 1%);
   }

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,5 +1,6 @@
 .nut-collapse-item {
   position: relative;
+
   &::after {
     position: absolute;
     box-sizing: border-box;
@@ -12,6 +13,7 @@
     -webkit-transform: scaleY(0.5);
     transform: scaleY(0.5);
   }
+
   &:last-child::after {
     display: none;
   }
@@ -103,3 +105,16 @@
     }
   }
 }
+
+[dir='rtl'] .nut-collapse-item,
+.nut-rtl .nut-collapse-item {
+  &-icon-box {
+    padding-right: 0;
+    padding-left: 40px;
+  }
+
+  &-icon {
+    left: auto;
+    right: 5px;
+  }
+}

package/dist/packages/dialog/dialog.scss

@@ -120,3 +120,32 @@
     }
   }
 }
+
+[dir='rtl'] .nut-dialog,
+.nut-rtl .nut-dialog {
+  &-outer {
+    left: auto;
+    right: 50%;
+    -webkit-transform: translate(50%, -50%);
+    transform: translate(50%, -50%);
+  }
+
+  &-close {
+    &-top-right {
+      right: auto;
+      left: $dialog-close-right;
+    }
+
+    &-top-left {
+      left: auto;
+      right: $dialog-close-left;
+    }
+  }
+
+  &-footer {
+    &-cancel.nut-dialog-footer-cancel {
+      margin-right: 0;
+      margin-left: $dialog-footer-cancel-margin-right;
+    }
+  }
+}

package/dist/packages/divider/divider.scss

@@ -58,3 +58,25 @@
     width: auto;
   }
 }
+
+[dir='rtl'] .nut-divider,
+.nut-rtl .nut-divider {
+  &-center,
+  &-left,
+  &-right {
+    &::before {
+      margin-right: 0;
+      margin-left: $divider-spacing;
+    }
+
+    &::after {
+      margin-left: 0;
+      margin-right: $divider-spacing;
+    }
+  }
+
+  &-vertical {
+    border-left: none;
+    border-right: 1px solid $divider-border-color;
+  }
+}