@nutui/nutui-react 2.3.9 → 2.3.11

package/dist/packages/popover/popover.scss

@@ -243,7 +243,6 @@
       margin-right: -8px;
     }
   }
-
   .nut-popover-content {
     .nut-popover-menu-item {
       &-name {
@@ -256,7 +255,6 @@
         left: $popover-menu-item-padding;
       }
     }
-
     &-top {
       .nut-popover-arrow-top {
         left: auto;
@@ -264,7 +262,6 @@
         transform: translateX(50%);
       }
     }
-
     &-top-end {
       right: auto;
       left: 0;
@@ -292,7 +289,6 @@
         transform: translateX(50%);
       }
     }
-
     &-bottom-end {
       right: auto;
 

package/dist/packages/popup/popup.scss

@@ -300,12 +300,15 @@
       animation-duration: $popup-animation-duration;
     }
 
+    &-default-exit-done,
     &-center-exit-done,
     &-left-exit-done,
     &-right-exit-done,
     &-top-exit-done,
     &-bottom-exit-done {
-      display: none;
+      &.nut-popup {
+        display: none;
+      }
     }
   }
 
@@ -358,24 +361,6 @@
     right: 0;
   }
 
-  &-right {
-    right: auto;
-    left: 0;
-
-    &.nut-popup-round {
-      border-radius: 0 $popup-border-radius $popup-border-radius 0;
-    }
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
-
-    &.nut-popup-round {
-      border-radius: $popup-border-radius 0 0 $popup-border-radius;
-    }
-  }
-
   &-top {
     left: auto;
     right: 0;

package/dist/packages/price/price.scss

@@ -1,4 +1,5 @@
 .nut-price {
+  direction: ltr;
   font-size: $font-size-large;
   display: inline;
   color: $color-primary;

package/dist/packages/radio/radio.scss

@@ -78,7 +78,6 @@
     border: 1px solid $color-text-disabled;
   }
 }
-
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,6 +1,7 @@
 .nut-radiogroup {
   .nut-radio {
-    margin: $radiogroup-radio-margin;
+    margin-right: $radiogroup-radio-margin;
+    margin-bottom: $radiogroup-radio-margin-bottom;
 
     &-label {
       margin: $radiogroup-radio-label-margin;
@@ -50,3 +51,11 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
+[dir='rtl'] .nut-radiogroup,
+.nut-rtl .nut-radiogroup {
+  .nut-radio {
+    margin-left: $radiogroup-radio-margin;
+    margin-right: 0;
+  }
+}

package/dist/packages/range/range.scss

@@ -12,6 +12,123 @@
     user-select: none;
   }
 
+  .nut-range {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: $range-height;
+    margin: 0 $range-margin;
+    background-color: $range-inactive-color;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &::before {
+      position: absolute;
+      inset-block: -8px;
+      inset-inline: 0;
+      content: '';
+    }
+
+    &-bar {
+      display: block;
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: $range-active-color;
+      border-radius: inherit;
+      transition: all 0.2s;
+    }
+
+    &-button {
+      display: block;
+      width: $range-button-width;
+      height: $range-button-height;
+      background: $range-button-background;
+      border-radius: 50%;
+      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+      border: $range-button-border;
+      outline: none;
+
+      &-wrapper,
+      &-wrapper-right {
+        touch-action: none;
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translate3d(50%, -50%, 0);
+        cursor: grab;
+        outline: none;
+      }
+
+      &-wrapper-left {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate3d(-50%, -50%, 0);
+        cursor: grab;
+        outline: none;
+        touch-action: none;
+      }
+
+      .number {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        font-size: $font-size-small;
+        color: $range-color;
+        transform: translate3d(0, -100%, 0);
+      }
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      opacity: 0.54;
+
+      .nut-range-button-wrapper,
+      .nut-range-button-wrapper-left,
+      .nut-range-button-wrapper-right {
+        cursor: not-allowed;
+      }
+    }
+
+    &-mark {
+      position: absolute;
+      width: 100%;
+      overflow: visible;
+      top: 50%;
+      font-size: 12px;
+      padding-top: 14px;
+    }
+
+    &-mark-text {
+      position: absolute;
+      display: inline-block;
+      line-height: 16px;
+      color: #999;
+      text-align: center;
+      word-break: keep-all;
+      user-select: none;
+      transform: translateX(-10px);
+    }
+
+    &-tick {
+      position: absolute;
+      top: -20px;
+      width: 11px;
+      height: 11px;
+      left: 0px;
+      border-radius: 50%;
+      background: $range-inactive-color;
+
+      &.active {
+        background: $range-active-color;
+      }
+    }
+  }
+
   &-vertical {
     height: 100%;
     flex-direction: column;
@@ -78,7 +195,6 @@
         left: 30px;
         width: 11px;
         height: 11px;
-        margin-left: -0px;
         border-radius: 50%;
         background: $range-inactive-color;
 
@@ -124,125 +240,10 @@
         margin-left: 0;
         margin-right: -0px;
       }
-    }
-  }
-}
-
-.nut-range {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: $range-height;
-  margin: 0 $range-margin;
-  background-color: $range-inactive-color;
-  border-radius: 2px;
-  cursor: pointer;
-
-  &::before {
-    position: absolute;
-    top: -8px;
-    right: 0;
-    bottom: -8px;
-    left: 0;
-    content: '';
-  }
-
-  &-bar {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: $range-active-color;
-    border-radius: inherit;
-    transition: all 0.2s;
-  }
-
-  &-button {
-    display: block;
-    width: $range-button-width;
-    height: $range-button-height;
-    background: $range-button-background;
-    border-radius: 50%;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: $range-button-border;
-    outline: none;
-
-    &-wrapper,
-    &-wrapper-right {
-      touch-action: none;
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translate3d(50%, -50%, 0);
-      cursor: grab;
-      outline: none;
-    }
-
-    &-wrapper-left {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translate3d(-50%, -50%, 0);
-      cursor: grab;
-      outline: none;
-      touch-action: none;
-    }
-
-    .number {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-      font-size: $font-size-small;
-      color: $range-color;
-      transform: translate3d(0, -100%, 0);
-    }
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-    opacity: 0.54;
-
-    .nut-range-button-wrapper,
-    .nut-range-button-wrapper-left,
-    .nut-range-button-wrapper-right {
-      cursor: not-allowed;
-    }
-  }
-
-  &-mark {
-    position: absolute;
-    width: 100%;
-    overflow: visible;
-    top: 50%;
-    font-size: 12px;
-    padding-top: 14px;
-  }
-
-  &-mark-text {
-    position: absolute;
-    display: inline-block;
-    line-height: 16px;
-    color: #999;
-    text-align: center;
-    word-break: keep-all;
-    user-select: none;
-    transform: translateX(-10px);
-  }
 
-  &-tick {
-    position: absolute;
-    top: -20px;
-    width: 11px;
-    height: 11px;
-    left: 0px;
-    border-radius: 50%;
-    background: $range-inactive-color;
-
-    &.active {
-      background: $range-active-color;
+      &-mark-text {
+        transform: translateY(-11px);
+      }
     }
   }
 }
@@ -252,24 +253,23 @@
   &-button {
     &-wrapper,
     &-wrapper-right {
-      right: auto;
       left: 0;
+      right: initial;
       transform: translate3d(-50%, -50%, 0);
     }
-
     &-wrapper-left {
-      left: auto;
       right: 0;
+      left: initial;
       transform: translate3d(50%, -50%, 0);
     }
   }
 
-  &-mark-text {
-    transform: translateX(10px);
-  }
-
   &-tick {
-    left: auto;
     right: 0px;
+    left: initial;
+  }
+
+  &-mark-text {
+    transform: translateX(10px);
   }
 }

package/dist/packages/rate/rate.scss

@@ -73,7 +73,6 @@
       margin-right: 0;
       margin-left: 0;
     }
-
     &-half {
       left: auto;
       right: 0;

package/dist/packages/searchbar/searchbar.scss

@@ -133,14 +133,12 @@
       &.nut-icon {
         transform: rotate(180deg);
       }
-
       &:last-child {
         margin-right: 0;
         margin-left: 0;
       }
     }
   }
-
   &-right {
     margin-left: 0;
     margin-right: $searchbar-gap;
@@ -179,4 +177,7 @@
       margin-right: 0;
     }
   }
+  &-input {
+    text-align: var(--nutui-searchbar-input-text-align, right);
+  }
 }

package/dist/packages/shortpassword/shortpassword.scss

@@ -85,6 +85,10 @@
       color: $shortpassword-forget;
       display: flex;
       align-items: center;
+
+      .nut-icon {
+        margin-right: 3px;
+      }
     }
   }
 

package/dist/packages/skeleton/skeleton.scss

@@ -9,7 +9,7 @@
   &-content {
     display: flex;
 
-    .avatar {
+    .nut-avatar {
       margin-right: 20px;
       background: $skeleton-background !important;
     }
@@ -69,12 +69,11 @@
 [dir='rtl'] .nut-skeleton,
 .nut-rtl .nut-skeleton {
   &-content {
-    .avatar {
+    .nut-avatar {
       margin-right: 0;
       margin-left: 20px;
     }
   }
-
   &-animation {
     left: auto;
     right: 0;
@@ -84,5 +83,16 @@
       hsla(0, 0%, 100%, 0.5) 50%,
       hsla(0, 0%, 100%, 0) 80%
     );
+    animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+  }
+
+  @keyframes nut-skeleton-rtl {
+    0% {
+      background-position-x: calc(500px + 100%);
+    }
+
+    to {
+      background-position-x: -500px;
+    }
   }
 }

package/dist/packages/space/space.scss

@@ -86,7 +86,6 @@
     }
   }
 }
-
 [dir='rtl'] .nut-space,
 .nut-rtl .nut-space {
   &-horizontal {

package/dist/packages/step/step.scss

@@ -131,14 +131,6 @@
   }
 }
 
-[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;
@@ -191,20 +183,6 @@
   }
 }
 
-[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 {
@@ -242,10 +220,29 @@
   .nut-step-main {
     display: inline-block;
     padding-left: 6%;
-    text-align: left;
+    text-align: start;
+  }
+}
+[dir='rtl'] .nut-step,
+.nut-rtl .nut-step {
+  &-line {
+    left: auto;
+    right: calc(50% + (100% - $steps-base-line-width) / 2);
+  }
+}
+[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;
+      }
+    }
   }
 }
-
 [dir='rtl'] .nut-steps-vertical,
 .nut-rtl .nut-steps-vertical {
   .nut-step-line {
@@ -256,6 +253,5 @@
   .nut-step-main {
     padding-left: 0;
     padding-right: 6%;
-    text-align: right;
   }
 }

package/dist/packages/swipe/swipe.scss

@@ -34,18 +34,3 @@
     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

@@ -46,7 +46,6 @@
     right: 50%;
     transform: translateX(50%);
   }
-
   &-indicator-vertical {
     left: auto;
     right: 12px;

package/dist/packages/switch/switch.scss

@@ -77,6 +77,17 @@
 
 [dir='rtl'] .nut-switch,
 .nut-rtl .nut-switch {
+  &-base {
+    .nut-switch-button {
+      transform: var(--nutui-switch-inside-close-transform, translateX(-14%));
+    }
+
+    &.nut-switch-open {
+      .nut-switch-button {
+        transform: var(--nutui-switch-inside-open-transform, translateX(-90%));
+      }
+    }
+  }
   &-label {
     &.open {
       transform: translateX(18px);

package/dist/packages/table/table.scss

@@ -20,8 +20,6 @@
 
   &-main {
     display: table;
-    // width: 100%;
-    // border-collapse: collapse;
     overflow-x: auto;
     color: $color-title;
     background-color: $color-background-overlay;
@@ -107,7 +105,7 @@
 
         &-alignleft,
         &-align {
-          text-align: left;
+          text-align: start;
         }
 
         &-aligncenter {
@@ -115,7 +113,7 @@
         }
 
         &-alignright {
-          text-align: right;
+          text-align: end;
         }
       }
     }
@@ -222,13 +220,14 @@
   &-sticky-left {
     left: auto;
     right: 1px;
+    box-shadow: $table-sticky-right-shadow;
   }
 
   &-sticky-right {
     right: auto;
     left: 1px;
+    box-shadow: $table-sticky-left-shadow;
   }
-
   &-fixed-left-last {
     border-right: none;
     border-left: none;