@nutui/nutui-react 2.3.8-beta.0 → 2.3.9

package/dist/packages/animate/animate.scss

@@ -13,6 +13,7 @@
   .nut-animate-slide-right {
     animation-name: slide-right;
   }
+
   @keyframes slide-right {
     0% {
       opacity: 0;
@@ -29,6 +30,7 @@
   .nut-animate-slide-left {
     animation-name: slide-left;
   }
+
   @keyframes slide-left {
     0% {
       opacity: 0;
@@ -45,6 +47,7 @@
   .nut-animate-slide-top {
     animation-name: slide-top;
   }
+
   @keyframes slide-top {
     0% {
       opacity: 0;
@@ -61,6 +64,7 @@
   .nut-animate-slide-bottom {
     animation-name: slide-bottom;
   }
+
   @keyframes slide-bottom {
     0% {
       opacity: 0;
@@ -77,6 +81,7 @@
   .nut-animate-shake {
     animation-name: shake;
   }
+
   @keyframes shake {
     0%,
     100% {
@@ -124,10 +129,12 @@
   .nut-animate-ripple {
     animation-name: ripple;
   }
+
   @keyframes ripple {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
@@ -140,13 +147,16 @@
     animation-timing-function: ease-in-out;
     animation-direction: alternate;
   }
+
   @keyframes breath {
     0% {
       transform: scale(1);
     }
+
     50% {
       transform: scale(1.1);
     }
+
     100% {
       transform: scale(1);
     }
@@ -155,6 +165,7 @@
   // 水波
   .nut-animate-twinkle {
     position: relative;
+
     &::after,
     &::before {
       width: 60 * 1px;
@@ -176,13 +187,16 @@
       animation-delay: 0.4s;
     }
   }
+
   @keyframes twinkle {
     0% {
       transform: scale(0);
     }
+
     20% {
       opacity: 1;
     }
+
     50%,
     100% {
       transform: scale(1.4);
@@ -212,10 +226,12 @@
       filter: blur(3 * 1px);
     }
   }
+
   @keyframes flicker {
     0% {
       transform: translateX(-100 * 1px) skewX(-20deg);
     }
+
     40%,
     100% {
       transform: translateX(150 * 1px) skewX(-20deg);
@@ -227,23 +243,28 @@
     transform-origin: center center;
     animation: jump 0.7s linear;
   }
+
   @keyframes jump {
     0% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(0);
     }
+
     25% {
       animation-timing-function: ease-out;
       transform: rotate(10deg) translateY(20 * 1px);
     }
+
     50% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(-10 * 1px);
     }
+
     75% {
       animation-timing-function: ease-out;
       transform: rotate(-10deg) translateY(20 * 1px);
     }
+
     100% {
       animation-timing-function: ease-in;
       transform: rotate(0deg) translateY(0);
@@ -255,6 +276,7 @@
     position: relative;
     animation-name: float-pop;
   }
+
   @keyframes float-pop {
     0% {
       top: 0px;
@@ -282,3 +304,30 @@
     animation-iteration-count: infinite;
   }
 }
+
+[dir='rtl'] .nut-animate,
+.nut-rtl .nut-animate {
+  .nut-animate-twinkle {
+    &::after,
+    &::before {
+      border-radius: calc(60 / 2) * 1px;
+      right: auto;
+      left: 50%;
+      margin-right: 0;
+      margin-left: calc(-60 / 2) * 1px;
+    }
+  }
+
+  .nut-animate-flicker {
+    &::after {
+      left: auto;
+      right: 0;
+      background-image: linear-gradient(
+        -106deg,
+        rgba(232, 224, 255, 0) 24%,
+        #e8e0ff 91%
+      );
+      transform: skewX(20deg);
+    }
+  }
+}

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

@@ -54,3 +54,20 @@
     }
   }
 }
+
+[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;
+        }
+      }
+    }
+  }
+}