tdesign-react 0.18.1 → 0.18.2

package/esm/_common/style/web/components/switch/_index.less

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-switch {
@@ -51,16 +53,20 @@
   }
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -6px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -6px;
       }
     }
+
     .@{prefix}-switch__content {
       opacity: 0;
     }
@@ -70,11 +76,13 @@
     display: inline-flex;
     align-items: center;
     color: @switch-content-color-unchecked;
-    padding: 0 @switch-content-margin-right-default 0
+    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;
+
     .@{prefix}-icon {
       font-size: @switch-content-font-size-l;
     }
@@ -87,8 +95,10 @@
       left: calc(100% - @switch-width-border-default);
       transform: translate(-100%, 0);
     }
+
     .@{prefix}-switch__content {
-      padding: 0 @switch-content-margin-left-default 0
+      padding:
+        0 @switch-content-margin-left-default 0
         @switch-content-margin-right-default;
       color: @switch-content-color-checked;
     }
@@ -103,6 +113,7 @@
     }
 
     .@{prefix}-switch__handle {
+
       .@{prefix}-icon {
         color: @switch-unchecked-bg-color-loading;
       }
@@ -112,6 +123,7 @@
       background-color: @switch-checked-bg-color-loading;
 
       .@{prefix}-switch__handle {
+
         .@{prefix}-icon {
           color: @switch-checked-bg-color-loading;
         }
@@ -127,6 +139,7 @@
       background-color: @switch-checked-bg-color-disabled;
 
       .@{prefix}-switch__handle {
+
         .@{prefix}-icon {
           color: @switch-checked-bg-color-disabled;
         }
@@ -142,11 +155,14 @@
   border-radius: (@switch-height-l / 2);
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -8px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -8px;
@@ -159,6 +175,7 @@
     left: @switch-width-border-l;
     width: (@switch-height-l - 2px * @switch-width-border-l);
     height: (@switch-height-l - 2px * @switch-width-border-l);
+
     .@{prefix}-icon {
       font-size: (@switch-height-l - 4px);
     }
@@ -175,9 +192,11 @@
   }
 
   &.@{prefix}-is-checked {
+
     .@{prefix}-switch__handle {
       left: calc(100% - @switch-width-border-l);
     }
+
     .@{prefix}-switch__content {
       padding: 0 @switch-content-margin-left-l 0 @switch-content-margin-right-l;
     }
@@ -191,11 +210,14 @@
   border-radius: (@switch-height-s / 2);
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -4px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -4px;
@@ -225,9 +247,11 @@
   }
 
   &.@{prefix}-is-checked {
+
     .@{prefix}-switch__handle {
       left: calc(100% - @switch-width-border-s);
     }
+
     .@{prefix}-switch__content {
       padding: 0 @switch-content-margin-left-s 0 @switch-content-margin-right-s;
     }

package/esm/_common/style/web/components/switch/_var.less

@@ -56,4 +56,3 @@
 @switch-transition: all @anim-duration-base @anim-time-fn-ease-out;
 @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing;
 @switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear;
-

package/esm/_common/style/web/components/table/_docs.less

@@ -1,12 +1,10 @@
 .@{d-prefix}-demo-item--table {
-
   .demo-table-container {
-
     .title {
       font-size: 14px;
       line-height: 28px;
       display: block;
-      margin: 10px 0px;
+      margin: 10px 0;
 
       i {
         font-style: normal;
@@ -21,7 +19,7 @@
       &::before {
         position: absolute;
         top: 50%;
-        left: 0px;
+        left: 0;
         transform: translateY(-50%);
         content: "";
         background-color: #00a870;
@@ -50,7 +48,6 @@
   }
 
   .demo-table-select {
-
     .link {
       cursor: pointer;
       margin-right: 15px;
@@ -64,7 +61,7 @@
       &::before {
         position: absolute;
         top: 50%;
-        left: 0px;
+        left: 0;
         transform: translateY(-50%);
         content: "";
         background-color: #00a870;

package/esm/_common/style/web/components/table/_index.less

@@ -1,10 +1,13 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "../../mixins/_text.less";
+
 @import "../../mixins/_scrollbar.less";
 
 .scrollbar {
-  .scrollbar()
+  .scrollbar();
 }
 
 .@{prefix}-table {
@@ -23,10 +26,10 @@
     border-left: 1px solid @table-border-color;
     pointer-events: none;
   }
-  
+
   &-content {
     position: relative;
-    .scrollbar()
+    .scrollbar();
   }
 
   &-pagination {
@@ -47,7 +50,9 @@
   th,
   td {
     position: relative;
-    padding: @table-td-padding-vertical-top @table-td-padding-horizontal @table-td-padding-vertical-bottom @table-td-padding-horizontal;
+    padding:
+      @table-td-padding-vertical-top @table-td-padding-horizontal
+      @table-td-padding-vertical-bottom @table-td-padding-horizontal;
     border-bottom: 1px solid @table-border-color;
     line-height: @table-line-height;
     vertical-align: middle;
@@ -70,7 +75,6 @@
 
   td,
   th {
-
     > a {
       text-decoration: none;
       color: @table-link-text-color;
@@ -89,13 +93,12 @@
     }
 
     &.text-ellipsis {
-      .text-ellipsis()
+      .text-ellipsis();
     }
   }
 
   // 紧凑型表格
   &.@{prefix}-size-s {
-
     th,
     td {
       padding: @table-padding-small;
@@ -104,7 +107,6 @@
 
   // 宽松型表格
   &.@{prefix}-size-l {
-
     th,
     td {
       padding: @table-padding-large;
@@ -125,8 +127,13 @@
     vertical-align: middle;
   }
 
+  .@{prefix}-loading {
+    font-size: @table-loading-size;
+  }
+
   // 边框线表格
   &--bordered {
+
     .@{prefix}-table--empty {
       border-left: 1px  solid  @table-border-color;
       border-right: 1px  solid  @table-border-color;
@@ -143,7 +150,6 @@
         border-bottom: 1px solid @table-border-color;
 
         &:first-child {
-
           border-left: 0;
 
           &::before {
@@ -157,19 +163,18 @@
         border-bottom: 1px solid @table-border-color;
 
         &.@{prefix}-table__cell--fixed-left-last {
-
           & + td {
-            border-left: 0px;
+            border-left: 0;
           }
 
           &::before {
-            border-right: 1px solid @table-border-color;;
+            border-right: 1px solid @table-border-color;
           }
         }
 
         &.@{prefix}-table__cell--fixed-left,
         &.@{prefix}-table__cell--fixed-right {
-          border-left: 0px;
+          border-left: 0;
 
           &::before {
             .bordered();
@@ -197,13 +202,12 @@
 
     // 固定表头表格底部边框线显示优化
     &.@{prefix}-table__header--fixed {
+
       .@{prefix}-table-content {
         border-bottom: 1px solid @table-border-color;
 
         tr {
-
           &:last-child {
-
             td {
               border-bottom: 0;
             }
@@ -221,14 +225,12 @@
   &--striped {
 
     &.@{prefix}-table__header--fixed {
-
       tbody tr:nth-of-type(even) {
         background-color: @table-highlight-bg-color;
       }
     }
 
     &:not(.@{prefix}-table__header--fixed) {
-
       tbody tr:nth-of-type(odd) {
         background-color: @table-highlight-bg-color;
       }
@@ -237,21 +239,18 @@
     &.@{prefix}-table--hoverable {
 
       &.@{prefix}-table__header--fixed {
-
         tbody tr:nth-of-type(even):hover {
           background-color: @table-highlight-bg-color--hover;
         }
       }
 
       &:not(.@{prefix}-table__header--fixed) {
-
         tbody tr:nth-of-type(odd):hover {
           background-color: @table-highlight-bg-color--hover;
         }
       }
 
       tbody {
-
         tr {
           transition: background-color .3s ease-in;
 
@@ -265,9 +264,7 @@
 
   // 可悬停表格
   &--hoverable {
-
     tbody {
-
       tr {
         transition: background-color .3s ease-in;
 
@@ -280,9 +277,7 @@
 
   // 文本顶端对齐
   &.@{prefix}-table-valign__top {
-
     tbody {
-
       td {
         vertical-align: top;
       }
@@ -297,7 +292,6 @@
   // 20200728 优化表头固定和列固定
   // 表头固定表格
   &__header--fixed {
-
     table {
       table-layout: fixed;
     }
@@ -316,21 +310,19 @@
     }
 
     .@{prefix}-table__header {
-      .scrollbar()
+      .scrollbar();
     }
 
     .@{prefix}-table__body {
       overflow-y: auto;
       width: fit-content;
 
-      .scrollbar()
+      .scrollbar();
     }
   }
 
   &:not(&--bordered) &__cell {
-
     &--selectable {
-
       & + td {
         padding-left: 0;
       }
@@ -339,7 +331,9 @@
 
   // 列固定表格
   &__cell--fixed {
+
     &.@{prefix}-table__header--fixed {
+
       .@{prefix}-table__header {
         overflow: hidden;
         width: 100%;
@@ -349,6 +343,7 @@
           background-color: @bg-color-secondarycontainer;
         }
       }
+
       .@{prefix}-table__body {
         overflow: auto scroll;
       }
@@ -370,18 +365,20 @@
     }
 
     &.@{prefix}-table--striped {
-      &.@{prefix}-table__header--fixed {
 
+      &.@{prefix}-table__header--fixed {
         tbody tr:nth-of-type(even) {
+
           .@{prefix}-table__cell--fixed-left,
           .@{prefix}-table__cell--fixed-right {
             background-color: @table-highlight-bg-color;
           }
         }
       }
+
       &:not(.@{prefix}-table__header--fixed) {
-        
         tbody tr:nth-of-type(odd) {
+
           .@{prefix}-table__cell--fixed-left,
           .@{prefix}-table__cell--fixed-right {
             background-color: @table-highlight-bg-color;
@@ -396,7 +393,9 @@
       background-color: @table-bg;
       transition: background-color .3s ease-in;
     }
+
     &.@{prefix}-table--hoverable tbody tr:hover {
+
       .@{prefix}-table__cell--fixed-left,
       .@{prefix}-table__cell--fixed-right {
         background-color: @table-highlight-dark-bg-color;
@@ -404,13 +403,12 @@
     }
 
     .@{prefix}-table__cell--fixed-left-last {
-
-      &:before {
+      &::before {
         z-index: -1;
         background-color: inherit;
       }
 
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         right: 0;
@@ -425,13 +423,12 @@
     }
 
     .@{prefix}-table__cell--fixed-right-first {
-
-      &:before {
+      &::before {
         z-index: -1;
         background-color: inherit;
       }
 
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;
@@ -448,14 +445,16 @@
     &.@{prefix}-table--has-fixed {
       // 可向左滚动时，左边显示固定列显示阴影，右边同理
       .@{prefix}-table-content--scrollable-to-left {
+
         .@{prefix}-table__cell--fixed-left-last::after {
-          box-shadow: inset 8px 0px 8px -4px var(--td-table-shadow-color);
+          box-shadow: inset 8px 0 8px -4px var(--td-table-shadow-color);
         }
       }
 
       .@{prefix}-table-content--scrollable-to-right {
+
         .@{prefix}-table__cell--fixed-right-first::after {
-          box-shadow: inset -8px 0px 8px -4px var(--td-table-shadow-color);
+          box-shadow: inset -8px 0 8px -4px var(--td-table-shadow-color);
         }
       }
     }
@@ -493,25 +492,20 @@
 
   // 表格行可以拖拽
   &.@{prefix}-table__row--draggable {
-
     tbody {
-
       &.dragging {
-
         tr {
           transition: transform .2s;
-          transform: translateY(0px);
+          transform: translateY(0);
         }
       }
       // 比如分页数据变化时，不需要过渡
       tr {
-
         &.v-leave-active {
           display: none;
         }
       }
     }
-
   }
 }
 
@@ -521,7 +515,7 @@
   .@{prefix}-table__cell--title {
     display: flex;
 
-    &>div:first-child {
+    & > div:first-child {
       flex: 1;
       text-align: inherit;
     }
@@ -536,7 +530,7 @@
     width: 20px;
     text-align: center;
   }
-}  
+}
 
 // 表格加载态
 .@{prefix}-table--loading {
@@ -569,8 +563,10 @@
 .@{prefix}-table--loading-async {
   text-align: center;
   color: @text-color-primary;
+
   .@{prefix}-icon-loading {
     margin-right: 10px;
+    color: @brand-color;
   }
 }
 
@@ -657,9 +653,7 @@
   }
 }
 
-
 @keyframes tTableProgressbar {
-
   0% {
     width: 0;
   }
@@ -671,4 +665,4 @@
 
 .t-table-expandable-icon-cell + .t-table__cell--selectable[key="row-select"] {
   padding-left: 10px;
-}
+}

package/esm/_common/style/web/components/table/_var.less

@@ -17,8 +17,9 @@
 // Size
 @table-line-height: 22px;
 @table-font-size: 14px;
+@table-loading-size: 16px;
 @table-padding-horizontal: 24px;
-@table-padding-normal: (@table-font-size * 1.0);
+@table-padding-normal: (@table-font-size * 1);
 @table-padding-small: (@table-font-size * .5);
 @table-padding-large: (@table-font-size * 1.5);
 @table-td-padding-vertical-top: 13px;

package/esm/_common/style/web/components/tabs/_index.less

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-tabs {
@@ -43,9 +45,8 @@
       right: 0;
 
       .@{prefix}-tabs__btn {
-
         &:first-child {
-          box-shadow: -10px 0px 20px 5px rgba(0, 0, 0, .05);
+          box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%);
         }
       }
     }
@@ -82,17 +83,18 @@
 
     &--left {
       border-right: 1px solid @tab-card-stroke;
-      box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, .05);
-      
+      box-shadow: 10px 0 20px 5px rgba(0, 0, 0, 5%);
+
       &.fade-enter,
+      &.fade-enter-from,
       &.fade-leave-to {
         transform: translateX(-50px);
       }
     }
 
     &--right {
-
       &.fade-enter,
+      &.fade-enter-from,
       &.fade-leave-to {
         transform: translateX(50px);
       }
@@ -125,7 +127,7 @@
     &.@{prefix}-tabs__nav--card {
       // border-bottom: 1px solid @tab-default-stroke;
 
-      &:after {
+      &::after {
         content: "";
         background-color: transparent;
       }
@@ -223,7 +225,6 @@
     cursor: pointer;
     flex-shrink: 0;
     transition: background-color @anim-time-fn-easing @anim-duration-base;
-    --ripple-color: @bg-color-container-active;
 
     &-wrapper {
       display: block;
@@ -233,12 +234,13 @@
       line-height: 22px;
       border-radius: @border-radius;
       transition: background-color @anim-time-fn-easing @anim-duration-base;
+
       --ripple-color: @bg-color-container-active;
     }
 
     &.@{prefix}-size-l {
       font-size: @font-size-l;
-      
+
       .@{prefix}-tabs__nav-item-wrapper {
         padding: 9px 12px;
       }
@@ -251,6 +253,7 @@
     }
 
     &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active):hover {
+
       .@{prefix}-tabs__nav-item-wrapper {
         background-color: @bg-color-container-hover;
       }
@@ -287,6 +290,8 @@
       margin-left: 8px;
       transition: all .3s cubic-bezier(.645, .045, .355, 1);
     }
+
+    --ripple-color: @bg-color-container-active;
   }
 
   &__nav--card {
@@ -296,13 +301,12 @@
       padding-left: 16px;
       padding-right: 16px;
       border-bottom: 1px solid @tab-card-stroke;
-      
+
       &::after {
         display: none;
       }
 
       &:not(.@{prefix}-is-disabled):not(.@{prefix}-is-active) {
-
         &:hover {
           background-color: @bg-color-secondarycontainer-hover;
         }

package/esm/_common/style/web/components/tabs/_var.less

@@ -47,4 +47,4 @@
 // 其他
 @tab-height-middle: 48px;
 @tab-height-large: 64px;
-@tab-btn-width: 40px;
+@tab-btn-width: 40px;