tdesign-react 0.17.0 → 0.18.2

package/esm/_common/style/web/components/time-picker/_index.less

@@ -1,8 +1,11 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
+
 @import "../../mixins/_layout.less";
 
 .@{prefix}-time-picker {
@@ -12,7 +15,7 @@
   position: relative;
   font-size: @time-picker-font-size;
   color: @time-picker-input-text-color;
-  
+
   &.@{prefix}-is-disabled {
     cursor: not-allowed;
   }
@@ -26,10 +29,13 @@
     position: relative;
 
     &.@{prefix}-is-focused {
+
       .@{prefix}-input__inner {
         border-color: @time-picker-input-color-focused;
       }
+
       .@{prefix}-input__suffix:not(.@{prefix}-input__clear) {
+
         .@{prefix}-icon {
           color: @time-picker-input-color-focused;
         }
@@ -39,6 +45,7 @@
     &.active {
       border: @time-picker-input-border-active;
       box-shadow: @time-picker-input-shadow-active;
+
       &+ .@{prefix}-time-picker__icon-wrap > .@{prefix}-time-picker__icon-clear {
         display: block;
       }
@@ -59,11 +66,10 @@
     height: 100%;
     padding: @time-picker-input-padding;
     z-index: 1;
-    .flex-center;
-
     border-radius: @border-radius;
     transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
     font-size: @time-picker-font-size;
+    .flex-center;
 
     &:hover {
       border-color: @time-picker-input-border-color-hover;
@@ -115,7 +121,6 @@
     }
 
     &-item {
-
       &-input {
         pointer-events: none;
       }
@@ -130,7 +135,6 @@
 
 .@{prefix}-time-picker-panel {
   width: @time-picker-width-common;
-
   background: @time-picker-background-color-common;
   border-radius: @border-radius;
   display: inline-block;
@@ -140,7 +144,6 @@
   &__body {
     width: 100%;
     height: @time-picker-panel-body-height;
-
     position: relative;
     user-select: none;
     margin: @time-picker-panel-body-margin;
@@ -154,9 +157,10 @@
 
       > div {
         flex: 1;
-        transform: translateY(
-          -((@time-picker-panel-item-height + @time-picker-panel-item-margin) /2)
-        );
+        transform:
+          translateY(
+            -((@time-picker-panel-item-height + @time-picker-panel-item-margin) /2)
+          );
         height: @time-picker-panel-item-height;
         background-color: @time-picker-panel-item-background-color-current;
         margin: @time-picker-panel-item-margin;
@@ -177,8 +181,8 @@
         width: 0; // 不展示滚动
       }
 
-      &:after,
-      &:before {
+      &::after,
+      &::before {
         display: block;
         height: 50%;
         content: "";

package/esm/_common/style/web/components/time-picker/_var.less

@@ -54,7 +54,7 @@
 @time-picker-panel-body-margin: @spacer-3 0 0 0;
 @time-picker-panel-body-padding: 0 @spacer-2;
 @time-picker-panel-item-border-radius: @border-radius;
-@time-picker-panel-item-margin: @spacer; 
+@time-picker-panel-item-margin: @spacer;
 @time-picker-panel-section-second-body-margin-left: @spacer-4;
 
 @time-picker-panel-footer-padding: 0 @spacer-3;

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

@@ -1,5 +1,7 @@
 .@{d-prefix}-tooltip-demo {
-  .@{prefix}-popup-reference, .@{prefix}-button {
+
+  .@{prefix}-popup-reference,
+  .@{prefix}-button {
     margin-right: 10px;
   }
 }
@@ -81,4 +83,4 @@
     right: 0;
     bottom: 50px;
   }
-}
+}

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-tooltip {
@@ -9,6 +11,7 @@
   border: 0;
   margin-bottom: 1px;
   max-width: @tooltip-max-width;
+  word-break: break-word;
 
   &:not(.@{prefix}-tooltip-light) {
     color: @tooltip-text-color;
@@ -16,6 +19,7 @@
 
   &-default {
     background: @tooltip-bg;
+    margin: @tooltip-default-margin;
   }
 
   &-primary {
@@ -38,10 +42,6 @@
     margin: @tooltip-reference-margin;
   }
 
-  &-default {
-    margin: @tooltip-default-margin;
-  }
-
   .@{prefix}-popup__arrow {
     background: inherit;
     width: auto;
@@ -53,14 +53,14 @@
   }
 }
 
-.@{prefix}-popup[data-popper-placement^='top'] .@{prefix}-tooltip .@{prefix}-popup__arrow {
+.@{prefix}-popup[data-popper-placement^="top"] .@{prefix}-tooltip .@{prefix}-popup__arrow {
   bottom: @tooltip-arrow-position;
 }
 
-.@{prefix}-popup[data-popper-placement^='left'] .@{prefix}-tooltip .@{prefix}-popup__arrow {
+.@{prefix}-popup[data-popper-placement^="left"] .@{prefix}-tooltip .@{prefix}-popup__arrow {
   right: @tooltip-arrow-position;
 }
 
-.@{prefix}-popup[data-popper-placement^='right'] .@{prefix}-tooltip .@{prefix}-popup__arrow {
+.@{prefix}-popup[data-popper-placement^="right"] .@{prefix}-tooltip .@{prefix}-popup__arrow {
   left: -@tooltip-arrow-position;
 }

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

@@ -1,5 +1,4 @@
-
-// width 
+// width
 @tooltip-max-width: 480px;
 
 // 颜色
@@ -11,8 +10,8 @@
 @tooltip-text-color: @text-color-anti;
 // 间距
 @tooltip-padding: 6px 12px;
-@tooltip-default-margin: @spacer; 
-@tooltip-reference-margin: 10px; 
+@tooltip-default-margin: @spacer;
+@tooltip-reference-margin: 10px;
 
 // 阴影
 @tooltip-shadow: @shadow-2;
@@ -23,4 +22,4 @@
 @flowin-transition: opacity @anim-duration-base @cubic-bezier;
 
 //tooltip箭头位移量
-@tooltip-arrow-position: 4px; 
+@tooltip-arrow-position: 4px;

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

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "../../_variables.less";
 
 .@{prefix}-transfer {
@@ -79,8 +81,8 @@
     &-search-wrapper {
       position: absolute;
       top: 0;
-      width: @transfer-list-search-wrapper-width;
-      margin: @transfer-list-search-wrapper-margin;
+      width: 100%;
+      padding: @transfer-list-search-wrapper-margin;
     }
 
     &__content {
@@ -93,7 +95,6 @@
 
         .@{prefix}-checkbox {
           margin-right: @transfer-list-margin-horizontal;
-          --ripple-color: @gray-color-3;
 
           & + .@{prefix}-checkbox {
             margin-left: @transfer-list-margin-horizontal;
@@ -106,6 +107,8 @@
               margin-left: @transfer-list-item-text-margin-left;
             }
           }
+
+          --ripple-color: @gray-color-3;
         }
       }
     }
@@ -122,12 +125,18 @@
         margin-top: 0;
       }
 
+      &.t-is-disabled {
+        &:hover {
+          background: @transfer-bg-color;
+        }
+      }
     }
 
     &__item:hover {
       background: @transfer-bg-hover;
       transition: background-color @anim-duration-base @anim-time-fn-easing;
     }
+
     &__item.@{prefix}-is-checked {
       background: @transfer-bg-checked;
     }
@@ -157,7 +166,8 @@
   }
 
   &-operations {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
     margin: @transfer-operations-margin;
     vertical-align: middle;
     overflow: hidden;
@@ -199,6 +209,7 @@
 
 // 只有search时候的高度
 .@{prefix}-transfer-search {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-search-height;
   }
@@ -206,6 +217,7 @@
 
 // 与Tree组件结合使用时的高度
 .@{prefix}-transfer-with-tree {
+
   .@{prefix}-transfer-list {
     height: auto;
   }
@@ -213,6 +225,7 @@
 
 // 只有翻页时候的高度
 .@{prefix}-transfer-pagination {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-pagination-height;
     padding-bottom: @transfer-with-pagination-padding-bottom;
@@ -221,6 +234,7 @@
 
 // 只有footer时候的高度
 .@{prefix}-transfer-footer {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-footer-height;
     padding-bottom: @transfer-with-footer-padding-bottom;
@@ -229,6 +243,7 @@
 
 // 同时有翻页和footer时候的高度
 .@{prefix}-transfer-pagination.@{prefix}-transfer-footer {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-footer-both-height;
     padding-bottom: @transfer-with-pagination-footer-padding-bottom;
@@ -237,6 +252,7 @@
 
 // 同时有search和footer时候的高度
 .@{prefix}-transfer-search.@{prefix}-transfer-footer {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-footer-both-height;
     padding-bottom: @transfer-with-search-footer-padding-bottom;
@@ -245,6 +261,7 @@
 
 // 同时有search和pagination时候的高度
 .@{prefix}-transfer-search.@{prefix}-transfer-pagination {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-both-height;
     padding-bottom: @transfer-with-search-pagination-padding-bottom;
@@ -253,6 +270,7 @@
 
 // 同时有search和pagination和footer
 .@{prefix}-transfer-search.@{prefix}-transfer-footer.@{prefix}-transfer-pagination {
+
   .@{prefix}-transfer-list {
     height: @transfer-with-all-height;
     padding-bottom: @transfer-with-all-padding-bottom;
@@ -260,6 +278,7 @@
 }
 
 .@{prefix}-transfer-wrapper {
+
   .@{prefix}-transfer-list {
     height: @transfer-wrap-height;
     width: @transfer-wrap-width;

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

@@ -23,7 +23,7 @@
 @transfer-operations-button-padding: 0 3px 1px;
 @transfer-operations-button-first-margin-bottom: 14px;
 // 有翻页时候transfer的下内边距
-@transfer-with-pagination-padding-bottom: 40px;
+@transfer-with-pagination-padding-bottom: 32px;
 // 有footer时候transfer的下内边距
 @transfer-with-footer-padding-bottom: 48px;
 // 有翻页和footer时候transfer的下内边距
@@ -57,7 +57,7 @@
 @transfer-list-header-height: 48px;
 @transfer-list-header-width: (@transfer-common-width - @transfer-list-margin-horizontal * 2);
 @transfer-list-search-wrapper-width: (@transfer-common-width - @transfer-list-margin-horizontal * 2);
-@transfer-list-pagination-height: 40px;
+@transfer-list-pagination-height: 24px;
 @transfer-list-pagination-line-height: 16px;
 @transfer-operations-button-height: 24px;
 @transfer-operations-button-line-height: 14px;

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

@@ -2,28 +2,28 @@
   .tdesign-tree-line .operations .t-button {
     margin: 0 10px 10px 0;
   }
-  
+
   .tdesign-tree-line .custom-line {
     display: flex;
     position: absolute;
     top: 2px;
     left: 9px;
   }
-  
+
   .tdesign-tree-line .custom-line-box {
     display: flex;
     flex: 0 0 auto;
   }
-  
+
   .tdesign-tree-line .custom-line span {
     position: relative;
     flex: 0 0 auto;
     width: 24px;
     height: 40px;
   }
-  
-  .tdesign-tree-line .custom-line span:last-child:before {
-    content: '';
+
+  .tdesign-tree-line .custom-line span:last-child::before {
+    content: "";
     position: absolute;
     display: block;
     bottom: 26px;
@@ -31,15 +31,15 @@
     width: 12px;
     height: 26px;
     border-left: 1px solid #ddd;
-    border-bottom: 1px solid #0052D9;
+    border-bottom: 1px solid #0052d9;
   }
-  
-  .tdesign-tree-line .custom-line-leaf span:last-child:before {
+
+  .tdesign-tree-line .custom-line-leaf span:last-child::before {
     width: 16px;
   }
-  
-  .tdesign-tree-line .custom-line-cross:before {
-    content: '';
+
+  .tdesign-tree-line .custom-line-cross::before {
+    content: "";
     display: block;
     position: absolute;
     left: 6px;
@@ -48,7 +48,7 @@
     width: 1px;
     border-left: 1px solid #ddd;
   }
-  
+
   .tdesign-tree-line .custom-line-icon {
     position: absolute;
     top: 6px;
@@ -58,14 +58,14 @@
     width: 16px;
     height: 16px;
     border-radius: 16px;
-    border: 1px solid #0052D9;
+    border: 1px solid #0052d9;
     background-color: #fff;
     justify-content: center;
     align-items: center;
   }
-  
-  .tdesign-tree-line .custom-line span:last-child:after {
-    content: '';
+
+  .tdesign-tree-line .custom-line span:last-child::after {
+    content: "";
     position: absolute;
     display: block;
     box-sizing: border-box;
@@ -75,7 +75,7 @@
     width: 8px;
     height: 8px;
     border-radius: 2px;
-    border: 1px solid #0052D9;
+    border: 1px solid #0052d9;
     background-color: #fff;
     transform: rotate(45deg);
     transform-origin: 50%, 50%;

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 // <name> 替换为组件名
@@ -14,14 +16,18 @@
   // 禁用态颜色处理
   &.@{prefix}-is-disabled {
     color: @tree-disabled-color;
+
     .@{prefix}-icon {
       color: @tree-disabled-color;
     }
+
     .@{prefix}-tree__item {
+
       &.@{prefix}-is-active {
         background-color: @tree-node-bg-color-hover;
         color: @tree-disabled-color;
       }
+
       .@{prefix}-icon {
         color: @tree-icon-color-disabled;
       }
@@ -33,7 +39,6 @@
   }
 
   &__item {
-    --level: 0;
     position: relative;
     display: flex;
     align-items: center;
@@ -50,31 +55,38 @@
       margin-top: @tree-node-item-spacer;
     }
 
-    .@{prefix}-icon {
+    .@{prefix}-icon,
+    .@{prefix}-loading {
       display: inline-block;
       position: relative;
-      color: @tree-node-icon-color;
       z-index: 2;
       font-size: @font-size-l;
     }
 
+    .@{prefix}-icon {
+      color: @tree-node-icon-color;
+    }
+
     .@{prefix}-checkbox {
       font-size: 0;
     }
 
     .@{prefix}-tree__icon--default {
+
       .@{prefix}-icon {
-        transition: transform @anim-time-fn-easing @anim-duration-base;
+        transition: color, transform @anim-time-fn-easing @anim-duration-base;
         transform: rotate(0);
       }
     }
 
     &--open {
+
       .@{prefix}-icon {
         color: @tree-node-icon-color-active;
       }
 
       .@{prefix}-tree__icon--default {
+
         .@{prefix}-icon {
           transform: rotate(90deg);
         }
@@ -84,6 +96,8 @@
     &--clickable {
       cursor: pointer;
     }
+
+    --level: 0;
   }
 
   &--block-node &__label {
@@ -95,16 +109,17 @@
   }
 
   &__line {
-    --level: 0;
-    --color: @tree-node-icon-line-color;
-    --space: @tree-node-padding-basic;
-    --iconSize: @icon-default;
     position: absolute;
     left: @tree-line-position-left;
     bottom: @tree-line-position-bottom;
     width: @tree-line-width;
     height: 40px;
     pointer-events: none;
+
+    --level: 0;
+    --color: @tree-node-icon-line-color;
+    --space: @tree-node-padding-basic;
+    --iconSize: @icon-default;
   }
 
   &__line::before {
@@ -128,8 +143,9 @@
   }
 
   &--fx {
+
     .@{prefix}-icon-chevron-right {
-      transition: color,transform @tree-node-animation-time;
+      transition: color, transform @tree-node-animation-time;
     }
   }
 
@@ -143,7 +159,7 @@
     user-select: none;
     cursor: pointer;
     border-radius: @border-radius;
-    transition: all @anim-duration-moderate @anim-time-fn-easing;
+    transition: color, transform @anim-duration-moderate @anim-time-fn-easing;
 
     &:not(:empty):hover {
       background-color: @tree-node-bg-color-hover;
@@ -166,7 +182,6 @@
     padding: 0 4px;
     border-radius: @border-radius;
     cursor: pointer;
-    --ripple-color: @bg-color-container-active;
     transition: background-color @anim-duration-moderate @anim-time-fn-easing;
 
     &.@{prefix}-is-checked,
@@ -183,6 +198,8 @@
     &--strictly {
       flex: none;
     }
+
+    --ripple-color: @bg-color-container-active;
   }
 
   &__space {
@@ -205,6 +222,7 @@
   &__item.t-is-disabled {
     color: @tree-disabled-color;
     cursor: default;
+
     .@{prefix}-checkbox {
       cursor: default;
     }
@@ -212,16 +230,17 @@
 }
 
 .@{prefix}-tree--fx {
+
   .@{prefix}-tree-toggle-enter-active {
     animation: t-tree-toggle @tree-node-animation-time linear;
   }
+
   .@{prefix}-tree-toggle-leave-active {
     animation: t-tree-toggle @tree-node-animation-time reverse linear forwards;
   }
 }
 
 @keyframes t-tree-toggle {
-
   0% {
     opacity: 0;
     height: 0;

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

@@ -11,13 +11,12 @@
   }
 
   &-tip {
-    color: rgba(0,0,0,.3);
+    color: rgba(0, 0, 0, 30%);
     font-size: @font-size-s;
     margin-top: 12px;
   }
 }
 
-
 .@{d-prefix}-demo-upload-multiple {
   padding: 30px;
   background-color: @bg-color-container;
@@ -32,7 +31,7 @@
 
     & .t-button {
       margin-right: 10px;
-      color: rgba(0,0,0,.9);
+      color: rgba(0, 0, 0, 90%);
     }
   }
 }
@@ -67,7 +66,6 @@
   }
 
   &-header {
-
     & div {
       display: flex;
       align-items: center;
@@ -85,7 +83,6 @@
   }
 
   &-item {
-
     & div {
       display: flex;
       height: 100%;