@nutui/nutui-react-taro 2.3.8 → 2.3.10

package/dist/packages/step/step.scss

@@ -88,11 +88,13 @@
       border-color: $steps-process-icon-bg-color;
       color: $steps-process-icon-color;
     }
+
     .nut-step-title {
       color: $steps-process-title-color;
       font-size: $steps-process-title-font-size;
       font-weight: $steps-process-title-font-weight;
     }
+
     .nut-step-description {
       color: $steps-process-description-color;
     }
@@ -102,6 +104,7 @@
     .nut-step-title {
       color: $steps-wait-title-color;
     }
+
     .nut-step-description {
       color: $steps-wait-description-color;
     }
@@ -121,19 +124,30 @@
     .nut-step-title {
       color: $steps-finish-title-color;
     }
+
     .nut-step-description {
       color: $steps-finish-description-color;
     }
   }
 }
 
+[dir='rtl'] .nut-step,
+.nut-rtl .nut-step {
+  &-line {
+    left: auto;
+    right: calc(50% + (100% - $steps-base-line-width) / 2);
+  }
+}
+
 .nut-steps-dot {
   .nut-step-head {
     margin: $steps-dot-head-margin;
   }
+
   .nut-step-line {
     top: 7px;
   }
+
   .nut-step-icon {
     width: $steps-dot-icon-width;
     height: $steps-dot-icon-height;
@@ -141,17 +155,20 @@
     border-radius: 50%;
     box-sizing: content-box;
   }
+
   .nut-step-wait {
     .nut-step-icon {
       background-color: $steps-dot-wait-icon-bg-color;
     }
   }
+
   .nut-step-finish {
     .nut-step-icon {
       background-color: $steps-dot-finish-icon-bg-color;
       border-color: $steps-dot-finish-icon-border-color;
     }
   }
+
   .nut-step-process {
     .nut-step-icon {
       position: relative;
@@ -174,6 +191,20 @@
   }
 }
 
+[dir='rtl'] .nut-steps-dot,
+.nut-rtl .nut-steps-dot {
+  .nut-step-process {
+    .nut-step-icon {
+      &:before {
+        left: auto;
+        right: 50%;
+        margin-left: 0;
+        margin-right: -7px;
+      }
+    }
+  }
+}
+
 .nut-steps-horizontal {
   &.nut-steps-dot {
     .nut-step-line {
@@ -214,3 +245,17 @@
     text-align: left;
   }
 }
+
+[dir='rtl'] .nut-steps-vertical,
+.nut-rtl .nut-steps-vertical {
+  .nut-step-line {
+    left: auto;
+    right: calc(50% - 1px);
+  }
+
+  .nut-step-main {
+    padding-left: 0;
+    padding-right: 6%;
+    text-align: right;
+  }
+}

package/dist/packages/swipe/swipe.scss

@@ -34,3 +34,18 @@
     transform: translate3d(101%, 0, 0);
   }
 }
+
+[dir='rtl'] .nut-swipe,
+.nut-rtl .nut-swipe {
+  &-left {
+    left: auto;
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  &-right {
+    right: auto;
+    left: 0;
+    transform: translate3d(-101%, 0, 0);
+  }
+}

package/dist/packages/swiper/swiper.scss

@@ -38,3 +38,17 @@
     z-index: 1;
   }
 }
+
+[dir='rtl'] .nut-swiper,
+.nut-rtl .nut-swiper {
+  &-indicator {
+    left: auto;
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  &-indicator-vertical {
+    left: auto;
+    right: 12px;
+  }
+}

package/dist/packages/switch/switch.scss

@@ -74,3 +74,16 @@
     }
   }
 }
+
+[dir='rtl'] .nut-switch,
+.nut-rtl .nut-switch {
+  &-label {
+    &.open {
+      transform: translateX(18px);
+    }
+
+    &.close {
+      transform: translateX(-14px);
+    }
+  }
+}

package/dist/packages/tabbar/tabbar.scss

@@ -38,3 +38,16 @@
     padding-bottom: env(safe-area-inset-bottom);
   }
 }
+
+[dir='rtl'] .nut-tabbar,
+.nut-rtl .nut-tabbar {
+  &:last-child {
+    border-right: none;
+    border-left: 0;
+  }
+
+  &-fixed {
+    left: auto;
+    right: 0px;
+  }
+}

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -39,8 +39,10 @@
 
   &-active {
     color: $tabbar-active-color;
+
     .nut-tabbar-item-icon-box {
       color: inherit;
+
       .nut-icon {
         color: inherit;
       }

package/dist/packages/table/table.scss

@@ -53,6 +53,7 @@
     &-head,
     &-body {
       background: inherit;
+
       &-tr {
         display: table-row;
         background: inherit;
@@ -70,6 +71,7 @@
           background: inherit;
           position: sticky;
           top: 0;
+
           &.nut-table-fixed-left,
           &.nut-table-fixed-right {
             z-index: 4;
@@ -156,11 +158,13 @@
   &-fixed-right {
     position: sticky;
     z-index: 2;
+
     &.h5-div {
       // 临时方案，小程序下，width包含了padding值。
       padding: $table-cols-padding 0;
     }
   }
+
   &-fixed-left-last {
     border-right: none;
   }
@@ -177,3 +181,56 @@
     z-index: 5;
   }
 }
+
+[dir='rtl'] .nut-table,
+.nut-rtl .nut-table {
+  &-main {
+    &-head,
+    &-body {
+      &-tr {
+        &-th {
+          &:last-child {
+            border-right: none;
+            border-left: none;
+          }
+        }
+
+        &-td {
+          &:last-child {
+            border-right: none;
+            border-left: none;
+          }
+        }
+
+        &-border {
+          border-right: none;
+          border-left: 1px solid $table-border-color;
+        }
+
+        &-alignleft,
+        &-align {
+          text-align: right;
+        }
+
+        &-alignright {
+          text-align: left;
+        }
+      }
+    }
+  }
+
+  &-sticky-left {
+    left: auto;
+    right: 1px;
+  }
+
+  &-sticky-right {
+    right: auto;
+    left: 1px;
+  }
+
+  &-fixed-left-last {
+    border-right: none;
+    border-left: none;
+  }
+}

package/dist/packages/tabs/tabs.scss

@@ -28,10 +28,16 @@
 
   &-left {
     justify-content: flex-start;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-right {
     justify-content: flex-end;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-scrollable {
@@ -45,19 +51,15 @@
     align-items: center;
     justify-content: center;
     flex: 1 0 auto;
-    padding: 0 10px;
     margin: 0 $tabs-titles-gap;
+    height: $tabs-titles-height;
+    line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
     font-size: $tabs-titles-font-size;
     color: $tabs-titles-item-color;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    &.taro {
-      height: 44px;
-      line-height: 44px;
-    }
-
     &-left,
     &-right {
       flex: none;
@@ -120,6 +122,10 @@
     &:first-child {
       margin-left: 0;
     }
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   &-simple {
@@ -132,6 +138,7 @@
   &-card {
     padding: 0;
     background-color: $color-default-light;
+
     .nut-tabs-titles-item {
       margin: 0;
 
@@ -146,10 +153,7 @@
   &-button {
     .nut-tabs-titles-item {
       &-active {
-        &.taro {
-          height: 28px;
-        }
-
+        height: 28px;
         margin: 8px 9px;
         background: $color-default-light;
         color: $color-text;
@@ -190,6 +194,32 @@
   }
 }
 
+[dir='rtl'] .nut-tabs-titles,
+.nut-rtl .nut-tabs-titles {
+  &-item {
+    &-smile,
+    &-line {
+      left: auto;
+      right: 50%;
+      transform: translate(50%, 0);
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &-divider {
+    .nut-tabs-titles-item {
+      &::after {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
+}
+
 .nut-tabs-horizontal {
   flex-direction: column;
   position: relative;
@@ -234,6 +264,7 @@
 
   .nut-tabs-titles-item {
     height: $tabs-vertical-titles-item-height;
+    margin: 0;
     flex: none;
 
     &-smile {
@@ -248,6 +279,7 @@
       height: 0;
       transform: translate(0, -50%);
       transition: height 0.3s ease;
+
       &-vertical {
         top: 50%;
       }
@@ -272,10 +304,6 @@
         transform: rotate(320deg);
       }
     }
-
-    &:first-child {
-      margin: 0 $tabs-titles-gap;
-    }
   }
 
   .nut-tabs-horizontal {
@@ -357,6 +385,49 @@
   }
 }
 
+[dir='rtl'] .nut-tabs-vertical,
+.nut-rtl .nut-tabs-vertical {
+  .nut-tabs-titles {
+    &-line {
+      .nut-tabs-titles-item {
+        padding-left: 0;
+        padding-right: 14px;
+      }
+    }
+  }
+
+  .nut-tabs-titles-item {
+    &-active {
+      .nut-tabs-titles-item-line {
+        left: auto;
+        right: 10px;
+      }
+
+      .nut-tabs-titles-item-smile {
+        left: -12px;
+        right: auto;
+        transform: rotate(-320deg);
+      }
+    }
+  }
+
+  .nut-tabs-horizontal {
+    .nut-tabs-titles-item-active {
+      .nut-tabs-titles-item-line {
+        left: auto;
+        right: 50%;
+        transform: translate(50%, 0);
+      }
+
+      .nut-tabs-titles-item-smile {
+        right: 50%;
+        left: auto;
+        transform: translate(50%, 0) rotate(0deg);
+      }
+    }
+  }
+}
+
 .nut-tabs-content {
   &-wrap {
     overflow: hidden;

package/dist/packages/tag/tag.scss

@@ -70,3 +70,11 @@
     justify-content: center;
   }
 }
+
+[dir='rtl'] .nut-tag,
+.nut-rtl .nut-tag {
+  .nut-icon {
+    margin-left: 0;
+    margin-right: 4px;
+  }
+}

package/dist/packages/textarea/textarea.scss

@@ -51,3 +51,20 @@
     left: -999999px;
   }
 }
+
+[dir='rtl'] .nut-textarea,
+.nut-rtl .nut-textarea {
+  &-limit {
+    right: auto;
+    left: 15px;
+  }
+
+  &-textarea {
+    text-align: right;
+  }
+
+  .cpoyText {
+    left: auto;
+    right: -999999px;
+  }
+}

package/dist/packages/timedetail/timedetail.scss

@@ -23,3 +23,8 @@
     }
   }
 }
+
+[dir='rtl'] .nut-timedetail,
+.nut-rtl .nut-timedetail {
+  padding: 0 12px 50px 0;
+}

package/dist/packages/timeselect/timeselect.scss

@@ -33,3 +33,8 @@
     font-weight: $font-weight-bold;
   }
 }
+
+[dir='rtl'] .nut-timepannel,
+.nut-rtl .nut-timepannel {
+  text-align: right;
+}

package/dist/packages/toast/toast.scss

@@ -17,6 +17,7 @@
   text-align: center;
   pointer-events: none;
   z-index: 1300;
+
   &-overlay-default {
     --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
     --nutui-overlay-zIndex: 1300;
@@ -49,10 +50,12 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
     transform: translate(-50%, -50%);
+
     &.normal {
       word-break: normal;
       word-wrap: normal;
     }
+
     &.break-word {
       word-break: normal;
       word-wrap: break-word;
@@ -120,6 +123,18 @@
   }
 }
 
+[dir='rtl'] .nut-toast,
+.nut-rtl .nut-toast {
+  left: auto;
+  right: 0;
+
+  &-inner {
+    left: auto;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
+
 .toast-fade-enter-active {
   transition: opacity 0.3s;
 }

package/dist/packages/tour/tour.scss

@@ -82,3 +82,26 @@
     background: transparent;
   }
 }
+
+[dir='rtl'] .nut-tour,
+.nut-rtl .nut-tour {
+  &-content {
+    &-top {
+      text-align: left;
+    }
+
+    &-bottom {
+      &-operate {
+        &-btn {
+          margin-left: 0;
+          margin-right: $tour-content-bottom-btn-margin-left;
+        }
+      }
+    }
+  }
+
+  &-masked {
+    left: auto;
+    right: 0;
+  }
+}

package/dist/packages/trendarrow/trendarrow.scss

@@ -21,3 +21,16 @@
     vertical-align: middle;
   }
 }
+
+[dir='rtl'] .nut-trendarrow,
+.nut-rtl .nut-trendarrow {
+  &-icon-before {
+    margin-right: 0;
+    margin-left: $trendarrow-icon-margin;
+  }
+
+  &-icon-after {
+    margin-left: 0;
+    margin-right: $trendarrow-icon-margin;
+  }
+}

package/dist/packages/uploader/uploader.scss

@@ -212,3 +212,39 @@
     }
   }
 }
+
+[dir='rtl'] .nut-uploader,
+.nut-rtl .nut-uploader {
+  &-input {
+    left: auto;
+    right: 0;
+  }
+
+  &-preview {
+    margin-right: 0;
+    margin-left: $uploader-preview-margin-right;
+
+    &-progress {
+      left: auto;
+      right: 0;
+    }
+
+    &.list {
+      margin-right: 0;
+      margin-left: 0px;
+    }
+
+    .close {
+      right: auto;
+      left: $uploader-preview-close-right;
+      transform: translate(-50%, -50%);
+    }
+
+    &-img {
+      .tips {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}

package/dist/packages/video/video.scss

@@ -3,13 +3,16 @@
   height: 100%;
   position: relative;
   display: flex;
+
   &-player {
     width: 100%;
     background: #000;
+
     &:focus {
       outline: none;
     }
   }
+
   video {
     width: 100%;
     height: 100%;

package/dist/packages/virtuallist/virtuallist.scss

@@ -18,6 +18,17 @@
   }
 }
 
+[dir='rtl'] .nut-horizontal-items,
+.nut-rtl .nut-horizontal-items {
+  float: right;
+
+  li {
+    float: right;
+    margin-right: 0;
+    margin-left: 20px;
+  }
+}
+
 .nut-vertical-items {
   li {
     display: block;