@tendaui/components 1.2.4 → 1.3.1

package/styles/components/dialog/_index.scss

@@ -1,17 +1,17 @@
 @use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@use '../../_vars.scss' as *;
+@use "../../_vars.scss" as *;
 
-@use './_vars.scss' as *;
+@use "./_vars.scss" as *;
 
-@use './_animate.scss' as *;
+@use "./_animate.scss" as *;
 
-@use './_mixins.scss' as *;
+@use "./_mixins.scss" as *;
 
-@use '../../mixins/_reset.scss' as *;
+@use "../../mixins/_reset.scss" as *;
 
-@use '../../mixins/_scrollbar.scss' as *;
+@use "../../mixins/_scrollbar.scss" as *;
 
 // <name> 替换为组件名
 .#{$prefix}-dialog {
@@ -64,7 +64,7 @@
       font-size: $dialog-icon-size;
       display: inline-flex;
       align-items: center;
-      margin-right: $dialog-header-icon-margin-right;
+      margin-inline-end: $dialog-header-icon-margin-right;
       flex-shrink: 0;
     }
   }
@@ -106,9 +106,7 @@
 
     box-sizing: border-box;
     padding: $dialog-body-padding-fullscreen;
-    height: calc(
-      100% - $dialog-header-height-fullscreen - $dialog-footer-height-fullscreen
-    );
+    height: calc(100% - $dialog-header-height-fullscreen - $dialog-footer-height-fullscreen);
     overflow: auto;
   }
 
@@ -121,10 +119,10 @@
 
   &__footer {
     width: 100%;
-    text-align: right;
+    text-align: end;
     padding: $dialog-footer-padding;
     .#{$prefix}-button + .#{$prefix}-button {
-      margin-left: $dialog-footer-button-margin-left;
+      margin-inline-start: $dialog-footer-button-margin-left;
     }
   }
 
@@ -202,7 +200,7 @@
   width: 100%;
   height: 100%;
 
-  // modeless 点击穿�?即可以操作背景后的元�?
+  // modeless 点击穿�?即可以操作背景后的元�?
   &.#{$prefix}-dialog__ctx--modeless {
     pointer-events: none;
   }
@@ -238,7 +236,7 @@
   &.#{$prefix}-not-display {
     display: none;
   }
-  // 遮罩�?
+  // 遮罩�?
   .#{$prefix}-dialog__mask {
     position: fixed;
     top: 0;
@@ -249,7 +247,7 @@
     background: $dialog-mask-bg-color;
     pointer-events: auto;
   }
-  // wrap 滚动的显示层 固定为页面窗口大�?
+  // wrap 滚动的显示层 固定为页面窗口大�?
   .#{$prefix}-dialog__wrap {
     position: fixed;
     top: 0;
@@ -260,22 +258,22 @@
     overflow: auto;
     @include scrollbar(8px, 2px);
   }
-  // 定位�?用于实现居中 或者距离顶�?定位
+  // 定位�?用于实现居中 或者距离顶�?定位
   .#{$prefix}-dialog__position {
-    // 因为内容会超�?使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
     justify-content: center;
     min-height: 100%;
     width: 100%;
     // 通过修改position为absolute进行拖拽定位
     position: relative;
-    // 设置最小距离顶部底部距�?
+    // 设置最小距离顶部底部距�?
     padding: 48px 0;
     box-sizing: border-box;
     // 居中和距顶部布局
     &.#{$prefix}-dialog--top {
       align-items: flex-start;
-      // 这里top api实现 更改padding 因为子元素拖拽定�?如果使用子元素margin 拖拽时需要计算margin 比较麻烦
+      // 这里top api实现 更改padding 因为子元素拖拽定�?如果使用子元素margin 拖拽时需要计算margin 比较麻烦
       padding-top: $dialog-top-position-top;
     }
     // 垂直居中布局
@@ -285,7 +283,7 @@
   }
 
   .#{$prefix}-dialog__position_fullscreen {
-    // 因为内容会超�?使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
     justify-content: center;
     min-height: 100%;

package/styles/components/drawer/_index.scss

@@ -141,11 +141,11 @@
     box-sizing: border-box;
 
     .#{$prefix}-button {
-      margin-left: $drawer-footer-btn-margin-left;
+      margin-inline-start: $drawer-footer-btn-margin-left;
     }
 
     .#{$prefix}-button:first-child {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
   }
 
@@ -157,7 +157,7 @@
     width: $drawer-close-btn-size;
     height: $drawer-close-btn-size;
     top: calc((#{$drawer-header-height} - #{$drawer-close-btn-size}) / 2);
-    right: $drawer-close-btn-position-right;
+    inset-inline-end: $drawer-close-btn-position-right;
     color: $drawer-close-btn-color;
     background-color: $drawer-close-btn-bg-color;
     border-radius: $border-radius-default;
@@ -203,3 +203,4 @@
 [tabindex="-1"]:focus {
   outline: none !important;
 }
+

package/styles/components/drawer/_var.scss

@@ -47,7 +47,7 @@ $drawer-footer-btn-margin-left: $comp-margin-s;
  * 位置
  */
 $drawer-close-btn-position-right: $comp-margin-s;
-$drawer-footer-text-align: left;
+$drawer-footer-text-align: start;
 
 /**
  * 边框弧度

package/styles/components/form/_index.scss

@@ -38,7 +38,7 @@
 
   &__label {
     float: left;
-    padding-right: $form-label-padding-right;
+    padding-inline-end: $form-label-padding-right;
     vertical-align: middle;
     line-height: $form-item-control-height;
     color: $form-color-label;
@@ -61,7 +61,7 @@
     &--required:not(.#{$prefix}-form__label--required-right) {
       label::before {
         display: inline-block;
-        margin-right: $form-label-margin-right-required;
+        margin-inline-end: $form-label-margin-right-required;
         color: $form-color-error;
         line-height: $form-label-line-height;
         content: '*';
@@ -71,7 +71,7 @@
     &--required-right {
       label::after {
         display: inline-block;
-        margin-left: $form-label-margin-left-required;
+        margin-inline-start: $form-label-margin-left-required;
         color: $form-color-error;
         line-height: $form-label-line-height;
         content: '*';
@@ -101,7 +101,7 @@
     // formItem 嵌套情况无间�?
     .#{$prefix}-form__item {
       margin-bottom: 0;
-      margin-right: $form-item-margin-right-inline;
+      margin-inline-end: $form-item-margin-right-inline;
     }
   }
 
@@ -133,7 +133,7 @@
     }
 
     button + button {
-      margin-left: $form-status-button-margin;
+      margin-inline-start: $form-status-button-margin;
     }
   }
 }
@@ -147,7 +147,7 @@
     margin: 0;
     min-width: 200px;
     display: inline-block;
-    margin-right: $form-item-margin-right-inline;
+    margin-inline-end: $form-item-margin-right-inline;
   }
 }
 
@@ -173,3 +173,4 @@
 // 输入框状�?
 @include input-status(warning);
 @include input-status(error);
+

package/styles/components/input/_mixins.scss

@@ -73,18 +73,20 @@
   }
 }
 
-// 状态样式：需使用map-get 和 #{} 来拼接变量名
+// 状态样式：使用 map-get 从映射中获取颜色值
 @mixin input-status($status) {
   &.#{$prefix}-is-#{$status} {
-    border-color: #000;
-
+    border-color: map-get(map-get($input-color, border), $status);
+    &:hover {
+      border-color: map-get(map-get($input-color, border), $status);
+    }
     &:focus,
     &.#{$prefix}-input--focused {
-      box-shadow: 0 0 0 2px #000;
+      box-shadow: 0 0 0 2px map-get(map-get($input-color, box-shadow), $status);
     }
 
     & > .#{$prefix}-input__extra {
-      color: #000;
+      color: map-get(map-get($input-color, extra), $status);
     }
   }
 }

package/styles/components/input-number/_index.scss

@@ -21,7 +21,7 @@ $inputNumberCls: "#{$prefix}-input-number";
 
   &:not(&--column) {
     > .#{$prefix}-input-number__decrease + .#{$prefix}-input__wrap {
-      margin-left: $comp-margin-xs;
+      margin-inline-start: $comp-margin-xs;
     }
   }
 
@@ -36,15 +36,15 @@ $inputNumberCls: "#{$prefix}-input-number";
 
   > .#{$prefix}-input__tips {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
   }
 
   // 输入框和右置内容之间需要间距  input + .#{$prefix}-input__suffix {
-  margin-left: $input-number-padding-horizontal-default;
+  margin-inline-start: $input-number-padding-horizontal-default;
 }
 
 .#{$prefix}-input__prefix {
-  margin-right: $input-number-padding-horizontal-default;
+  margin-inline-end: $input-number-padding-horizontal-default;
 }
 
 .#{$inputCls} {
@@ -127,11 +127,11 @@ $inputNumberCls: "#{$prefix}-input-number";
 }
 
 .#{$inputNumberCls}__decrease {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .#{$inputNumberCls}__increase {
-  right: -8px;
+  inset-inline-end: -8px;
 }
 
 .#{$inputNumberCls}.#{$prefix}-is-disabled {
@@ -197,7 +197,7 @@ $inputNumberCls: "#{$prefix}-input-number";
     .#{$inputCls} {
       height: $input-number-inner-height-l;
       line-height: $input-number-inner-height-l;
-      padding-right: calc($input-number-right-button-width-l + $input-number-padding-horizontal-default);
+      padding-inline-end: calc($input-number-right-button-width-l + $input-number-padding-horizontal-default);
     }
 
     .#{$inputNumberCls}__decrease,
@@ -252,7 +252,7 @@ $inputNumberCls: "#{$prefix}-input-number";
     width: 100%;
     box-sizing: border-box;
     margin: 0;
-    padding-right: calc($input-number-right-button-width + $input-number-padding-horizontal-default);
+    padding-inline-end: calc($input-number-right-button-width + $input-number-padding-horizontal-default);
     border-radius: $border-radius-default;
   }
 
@@ -261,9 +261,9 @@ $inputNumberCls: "#{$prefix}-input-number";
     width: $input-number-right-button-width;
     height: $input-number-button-column-height;
     border: 0;
-    left: initial;
+    inset-inline-start: auto;
     top: initial;
-    right: 1px;
+    inset-inline-end: 1px;
     border-radius: 0;
     background: $input-number-right-button-bg-color;
     opacity: 0;
@@ -343,9 +343,10 @@ $inputNumberCls: "#{$prefix}-input-number";
 .#{$inputNumberCls}--row {
   .#{$prefix}-input__wrap {
     width: initial;
-    margin-right: $comp-margin-xs;
+    margin-inline-end: $comp-margin-xs;
   }
   .#{$prefix}-input-number__increase {
-    right: 0;
+    inset-inline-end: 0;
   }
 }
+

package/styles/components/list/_index.scss

@@ -30,7 +30,7 @@
     &::after {
       content: "";
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       bottom: 0;
       width: 100%;
       height: 1px;
@@ -54,7 +54,7 @@
         border-radius: calc($list-avatar-size / 2);
         overflow: hidden;
         background: $list-avatar-bg-color;
-        margin-right: $list-avatar-margin-right;
+        margin-inline-end: $list-avatar-margin-right;
         flex-shrink: 0;
 
         img {
@@ -72,7 +72,7 @@
       }
 
       &-description {
-        margin-right: $list-meta-description-margin-right;
+        margin-inline-end: $list-meta-description-margin-right;
         color: $list-meta-description-color;
       }
     }
@@ -86,7 +86,7 @@
         display: inline-block;
 
         &:not(:last-child) {
-          margin-right: $list-action-margin-right;
+          margin-inline-end: $list-action-margin-right;
         }
 
         .t-icon {
@@ -163,7 +163,7 @@
 
   .#{$prefix}-loading {
     font-size: $list-load-font-size;
-    margin-right: $list-load-icon-margin;
+    margin-inline-end: $list-load-icon-margin;
   }
 
   .#{$prefix}-loading.#{$prefix}-is-load-more {

package/styles/components/notification/_index.scss

@@ -10,15 +10,15 @@
 
 .#{$prefix}-notify {
   &[data-x-position='right'] {
-    right: 8px;
+    inset-inline-end: 8px;
   }
 
   &[data-x-position='left'] {
-    left: 8px;
+    inset-inline-start: 8px;
   }
 
   &[data-x-position='center'] {
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
 
@@ -90,7 +90,7 @@
   &__icon {
     width: $notification-icon-width;
     text-align: center;
-    margin-right: $notification-icon-margin-right;
+    margin-inline-end: $notification-icon-margin-right;
 
     .t-icon {
       font-size: $notification-icon-font-size;

package/styles/components/slider/_index.scss

@@ -11,11 +11,11 @@
 .#{$prefix}-slider__input-container {
   display: flex;
   align-items: center;
-  margin-left: $slider-input-margin-left;
+  margin-inline-start: $slider-input-margin-left;
 
   &.is-vertical {
     padding-top: $slider-input-vertical-padding-top;
-    margin-left: $slider-input-vertical-margin-left;
+    margin-inline-start: $slider-input-vertical-margin-left;
   }
 
   .#{$prefix}-slider__center-line {
@@ -120,7 +120,7 @@
   &__mark {
     position: absolute;
     top: 2px;
-    left: 0;
+    inset-inline-start: 0;
     width: 100%;
   }
 
@@ -168,14 +168,14 @@
 
   .#{$prefix}-slider__handle {
     margin-top: $slider-vertical-handle-margin-top;
-    margin-left: $slider-vertical-handle-margin-left;
+    margin-inline-start: $slider-vertical-handle-margin-left;
     top: auto;
     transform: translateY(50%);
   }
 
   .#{$prefix}-slider__mark {
     top: 0;
-    left: 12px;
+    inset-inline-start: 12px;
     width: $slider-vertical-mark-width;
     height: 100%;
   }
@@ -183,14 +183,14 @@
   .#{$prefix}-slider__stop {
     width: $slider-stop-height;
     height: $slider-stop-width;
-    left: 4px;
+    inset-inline-start: 4px;
     background-color: $slider-background;
   }
 
   .#{$prefix}-slider__mark-text {
     transform: translateY(-50%);
     margin-top: $slider-vertical-text-margin-top;
-    margin-left: $slider-vertical-text-margin-left;
+    margin-inline-start: $slider-vertical-text-margin-left;
   }
 }
 
@@ -198,7 +198,7 @@
   top: auto;
   position: absolute;
   z-index: 2;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, 50%);
   background-color: transparent;
   text-align: center;

package/styles/components/switch/_index.scss

@@ -1,11 +1,11 @@
 @use "../../_vars.scss" as *;
-@use '../../_vars.scss' as *;
+@use "../../_vars.scss" as *;
 
-@use './_vars.scss' as *;
+@use "./_vars.scss" as *;
 
-@use './_mixins.scss' as *;
+@use "./_mixins.scss" as *;
 
-@use '../../mixins/_reset.scss' as *;
+@use "../../mixins/_reset.scss" as *;
 
 .#{$prefix}-switch {
   @include reset;
@@ -50,7 +50,7 @@
     }
 
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
@@ -85,8 +85,7 @@
     display: inline-flex;
     align-items: center;
     color: $switch-content-color-unchecked;
-    padding: 0 $switch-content-margin-right-default 0
-      $switch-content-margin-left-default;
+    padding: 0 $switch-content-margin-right-default 0 $switch-content-margin-left-default;
     font-size: $switch-content-font-size-default;
     min-width: $switch-min-width-default;
     transition: $switch-content-transition;
@@ -106,18 +105,13 @@
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-default);
       transform: translate(-100%, 0);
-      width: calc(
-        $switch-height-default - 2 * $switch-width-border-check-default
-      );
-      height: calc(
-        $switch-height-default - 2 * $switch-width-border-check-default
-      );
+      width: calc($switch-height-default - 2 * $switch-width-border-check-default);
+      height: calc($switch-height-default - 2 * $switch-width-border-check-default);
       top: $switch-width-border-check-default;
     }
 
     .#{$prefix}-switch__content {
-      padding: 0 $switch-content-margin-left-default 0
-        $switch-content-margin-right-default;
+      padding: 0 $switch-content-margin-left-default 0 $switch-content-margin-right-default;
       color: $switch-content-color-checked;
     }
   }
@@ -169,6 +163,35 @@
   }
 }
 
+[dir="rtl"] .#{$prefix}-switch {
+  &__handle {
+    left: auto;
+    right: $switch-width-border-default;
+  }
+
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -6px;
+      right: 0;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: -6px;
+        left: 0;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$prefix}-switch__handle {
+      right: auto;
+      left: $switch-width-border-check-default;
+      transform: none;
+    }
+  }
+}
+
 .#{$prefix}-switch.#{$prefix}-size-l {
   min-width: $switch-min-width-l;
   height: $switch-height-l;
@@ -213,6 +236,7 @@
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-l);
+      transform: translate(-100%, 0);
       top: $switch-width-border-check-l;
       width: calc($switch-height-l - 2 * $switch-width-border-check-l);
       height: calc($switch-height-l - 2 * $switch-width-border-check-l);
@@ -224,6 +248,35 @@
   }
 }
 
+[dir="rtl"] .#{$prefix}-switch.#{$prefix}-size-l {
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -8px;
+      right: 0;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: -8px;
+        left: 0;
+      }
+    }
+  }
+
+  .#{$prefix}-switch__handle {
+    left: auto;
+    right: $switch-width-border-l;
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$prefix}-switch__handle {
+      right: auto;
+      left: $switch-width-border-check-l;
+      transform: none;
+    }
+  }
+}
+
 .#{$prefix}-switch.#{$prefix}-size-s {
   min-width: $switch-min-width-s;
   height: $switch-height-s;
@@ -268,6 +321,7 @@
   &.#{$prefix}-is-checked {
     .#{$prefix}-switch__handle {
       left: calc(100% - $switch-width-border-check-s);
+      transform: translate(-100%, 0);
       top: $switch-width-border-check-s;
       width: calc($switch-height-s - 2 * $switch-width-border-check-s);
       height: calc($switch-height-s - 2 * $switch-width-border-check-s);
@@ -278,3 +332,32 @@
     }
   }
 }
+
+[dir="rtl"] .#{$prefix}-switch.#{$prefix}-size-s {
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: -4px;
+      right: 0;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: -4px;
+        left: 0;
+      }
+    }
+  }
+
+  .#{$prefix}-switch__handle {
+    left: auto;
+    right: $switch-width-border-s;
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$prefix}-switch__handle {
+      right: auto;
+      left: $switch-width-border-check-s;
+      transform: none;
+    }
+  }
+}