tdesign-react 0.18.1 → 0.18.2

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

@@ -1,8 +1,11 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
+
 @import "../../mixins/_layout.less";
 
 .@{prefix}-popup {
@@ -22,7 +25,7 @@
     padding: @popup-padding;
     font-size: @popup-content-font-size;
     line-height: @popup-content-line-height;
-    transition: max-height @popup-flow-duration @anim-time-fn-easing;  
+    transition: max-height @popup-flow-duration @anim-time-fn-easing;
   }
 
   &-reference {
@@ -46,8 +49,9 @@
   }
 }
 
-.@{prefix}-popup[data-popper-placement^='bottom'],
-.@{prefix}-popup[data-popper-placement^='top'] {
+.@{prefix}-popup[data-popper-placement^="bottom"],
+.@{prefix}-popup[data-popper-placement^="top"] {
+
   .@{prefix}-popup-content {
     margin: @popup-content-margin 0;
 
@@ -57,8 +61,9 @@
   }
 }
 
-.@{prefix}-popup[data-popper-placement^='left'],
-.@{prefix}-popup[data-popper-placement^='right'] {
+.@{prefix}-popup[data-popper-placement^="left"],
+.@{prefix}-popup[data-popper-placement^="right"] {
+
   .@{prefix}-popup-content {
     margin: 0 @popup-content-margin;
 
@@ -75,21 +80,26 @@
 
 // animation
 .@{popup-flow}-enter,
+.@{popup-flow}-enter-from,
 .@{popup-flow}-exiting,
 .@{popup-flow}-leave-to {
   opacity: 0;
   visibility: hidden;
 }
+
 .@{popup-flow}-enter-to,
 .@{popup-flow}-entering,
+.@{popup-flow}-leave-from,
 .@{popup-flow}-leave {
   opacity: 1;
   visibility: visible;
   transform: none;
 }
+
 .@{popup-flow}-enter-active {
   transition: @popup-flow-transition;
 }
+
 .@{popup-flow}-leave-active {
   transition: @popup-flow-transition;
 }

package/esm/_common/style/web/components/popup/_mixin.less

@@ -1,79 +1,95 @@
 .arrow-placment-top {
-  .@{prefix}-popup[data-popper-placement^='top'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement^="top"] .@{prefix}-popup__arrow {
     bottom: calc(-@popup-arrow-width / 2);
 
     &::before {
       box-shadow: @popup-top-arrow-shadow;
     }
   }
-  .@{prefix}-popup[data-popper-placement='top-start'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="top-start"] .@{prefix}-popup__arrow {
     left: @popup-arrow-width;
   }
-  .@{prefix}-popup[data-popper-placement='top'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="top"] .@{prefix}-popup__arrow {
     left: 50%;
     margin-left: calc(-@popup-arrow-width / 2);
   }
-  .@{prefix}-popup[data-popper-placement='top-end'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="top-end"] .@{prefix}-popup__arrow {
     left: calc(100% - @popup-arrow-width * 2);
   }
 }
 
 .arrow-placment-bottom {
-  .@{prefix}-popup[data-popper-placement^='bottom'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement^="bottom"] .@{prefix}-popup__arrow {
     top: calc(-@popup-arrow-width / 2);
 
     &::before {
       box-shadow: @popup-bottom-arrow-shadow;
     }
   }
-  .@{prefix}-popup[data-popper-placement='bottom-start'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="bottom-start"] .@{prefix}-popup__arrow {
     left: @popup-arrow-width;
   }
-  .@{prefix}-popup[data-popper-placement='bottom'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="bottom"] .@{prefix}-popup__arrow {
     left: 50%;
     margin-left: calc(-@popup-arrow-width / 2);
   }
-  .@{prefix}-popup[data-popper-placement='bottom-end'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="bottom-end"] .@{prefix}-popup__arrow {
     left: calc(100% - @popup-arrow-width * 2);
   }
 }
 
 .arrow-placment-left {
-  .@{prefix}-popup[data-popper-placement^='left'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement^="left"] .@{prefix}-popup__arrow {
     right: calc(-@popup-arrow-width / 2);
 
     &::before {
       box-shadow: @popup-left-arrow-shadow;
     }
   }
-  .@{prefix}-popup[data-popper-placement='left-start'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="left-start"] .@{prefix}-popup__arrow {
     top: @popup-arrow-width;
   }
-  .@{prefix}-popup[data-popper-placement='left'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="left"] .@{prefix}-popup__arrow {
     top: 50%;
     margin-top: calc(-@popup-arrow-width / 2);
   }
-  .@{prefix}-popup[data-popper-placement='left-end'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="left-end"] .@{prefix}-popup__arrow {
     top: calc(100% - @popup-arrow-width * 2);
   }
 }
 
 .arrow-placment-right {
-  .@{prefix}-popup[data-popper-placement^='right'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement^="right"] .@{prefix}-popup__arrow {
     left: calc(-@popup-arrow-width / 2);
 
     &::before {
       box-shadow: @popup-right-arrow-shadow;
     }
   }
-  .@{prefix}-popup[data-popper-placement='right-start'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="right-start"] .@{prefix}-popup__arrow {
     top: @popup-arrow-width;
   }
-  .@{prefix}-popup[data-popper-placement='right'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="right"] .@{prefix}-popup__arrow {
     top: 50%;
     margin-top: calc(-@popup-arrow-width / 2);
   }
-  .@{prefix}-popup[data-popper-placement='right-end'] .@{prefix}-popup__arrow {
+
+  .@{prefix}-popup[data-popper-placement="right-end"] .@{prefix}-popup__arrow {
     top: calc(100% - @popup-arrow-width * 2);
   }
-}
+}

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

@@ -5,8 +5,8 @@
 
 // 间距
 @popup-padding: 4px @spacer;
-@popup-content-line-height: @text-line-height-base;  
-@popup-arrow-width: 8px; 
+@popup-content-line-height: @text-line-height-base;
+@popup-arrow-width: 8px;
 @popup-arrow-height: 8px;
 @popup-content-arrow-spacer: @spacer-2;
 @popup-content-margin: @spacer;
@@ -25,4 +25,5 @@
 // 动画
 @popup-flow: t-popup_animation;
 @popup-flow-duration: @anim-duration-base;
-@popup-flow-transition: opacity @popup-flow-duration @anim-time-fn-easing, visibility @popup-flow-duration @anim-time-fn-easing;
+@popup-flow-fn: @anim-time-fn-ease-in;
+@popup-flow-transition: opacity @popup-flow-duration @popup-flow-fn, visibility @popup-flow-duration @popup-flow-fn;

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

@@ -1,11 +1,12 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 // 进度条基本样式
 .@{prefix}-progress {
-
   &--inner {
     position: relative;
     height: 100%;
@@ -23,6 +24,7 @@
     font-size: @progress-icon-font-size;
   }
 }
+
 .@{prefix}-progress--bar {
   width: 100%;
   height: 6px;
@@ -42,12 +44,15 @@
 .@{prefix}-progress--plump {
   height: @progress-stroke-plump-width;
   border-radius: (@progress-stroke-plump-width / 2);
+  display: flex;
+  align-items: center;
   .@{prefix}-progress--info {
     font-size: @progress-plump-font-size;
   }
 }
 
 .@{prefix}-progress--over-ten {
+
   .@{prefix}-progress--info {
     position: absolute;
     top: 50%;
@@ -59,10 +64,12 @@
 }
 
 .@{prefix}-progress--under-ten {
+
   .@{prefix}-progress--info,
   .@{prefix}-progress--inner {
     display: inline-block;
   }
+
   .@{prefix}-progress--info {
     vertical-align: top;
   }
@@ -84,12 +91,15 @@
     text-align: center;
     transform: translate(-50%, -50%);
   }
+
   .@{prefix}-circle--outer {
     stroke: @progress-track-color;
   }
+
   .@{prefix}-circle--inner {
     stroke: @progress-inner-color;
   }
+
   .@{prefix}-progress--icon {
     font-size: @progress-icon-circle-font-size;
   }
@@ -97,9 +107,9 @@
 
 //进度条状态
 .@{prefix}-progress--status--active {
-  .@{prefix}-progress--inner {
 
-    &:before {
+  .@{prefix}-progress--inner {
+    &::before {
       position: absolute;
       top: 0;
       right: 0;
@@ -107,7 +117,8 @@
       left: 0;
       z-index: 1;
       content: "";
-      animation: progress-active-animation 2s
+      animation:
+        progress-active-animation 2s
         cubic-bezier(.23, .99, .86, .2) infinite;
       background: @progress-inner-bg-color-active;
       opacity: .2;
@@ -116,9 +127,11 @@
 }
 
 .@{prefix}-progress--status--success {
+
   .@{prefix}-progress--inner {
     background: @progress-success;
   }
+
   .@{prefix}-circle--inner {
     stroke: @progress-success;
   }
@@ -129,31 +142,36 @@
 }
 
 .@{prefix}-progress--status--warning {
+
   .@{prefix}-progress--inner {
     background: @progress-warning;
   }
+
   .@{prefix}-circle--inner {
     stroke: @progress-warning;
   }
+
   .@{prefix}-progress--icon {
     color: @progress-warning;
   }
 }
 
 .@{prefix}-progress--status--error {
+
   .@{prefix}-progress--inner {
     background: @progress-error;
   }
+
   .@{prefix}-circle--inner {
     stroke: @progress-error;
   }
+
   .@{prefix}-progress--icon {
     color: @progress-error;
   }
 }
 
 @keyframes progress-active-animation {
-
   0% {
     width: 0;
     opacity: .1;

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

@@ -42,6 +42,6 @@
 @progress-circle-font-weight: 500;
 
 // 间距
-@progress-info-spacer: 10px;
+@progress-info-spacer: 8px;
 
 @progress-inner-border-radius: 50px;

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 // <name> 替换为组件名
@@ -14,11 +16,15 @@
   }
 
   &.@{radio-cls}-group-outline {
+
     .@{radio-button--cls} {
+
       &.@{prefix}-is-checked {
         color: @radio-button-color-outline-checked;
       }
+
       &.@{prefix}-is-disabled {
+
         &.@{prefix}-is-checked {
           color: @brand-color-disabled;
           border-color: @brand-color-disabled;
@@ -31,7 +37,7 @@
   &.@{radio-cls}-group-filled {
     border-color: @radio-button-group-background-color-filled;
     padding: @radio-group-padding;
-    border-radius: @radio-button-border-radius; 
+    border-radius: @radio-button-border-radius;
     background-color: @radio-button-group-background-color-filled;
     position: relative;
 
@@ -68,7 +74,6 @@
       }
 
       &:first-child {
-
         &::before {
           opacity: 0;
         }
@@ -86,12 +91,12 @@
         }
 
         & + label {
-
           &::before {
             opacity: 0;
           }
         }
       }
+
       &.@{prefix}-is-disabled {
         background-color: transparent;
 
@@ -107,17 +112,23 @@
   }
 
   &.@{radio-cls}-group-primary-filled {
+
     .@{radio-cls}-group-filled-bg-block {
       background-color: @radio-button-background-color-primary-filled-checked;
     }
+
     .@{radio-button--cls} {
+
       &.@{prefix}-is-checked {
         color: @radio-button-color-primary-filled-checked;
       }
+
       &.@{prefix}-is-disabled {
+
         &.@{prefix}-is-checked {
           color: @radio-button-color-primary-filled-disabled-checked;
         }
+
         &.@{prefix}-is-checked ~ .@{radio-cls}-group-filled-bg-block {
           background-color: @radio-button-background-color-primary-filled-disabled-checked;
         }
@@ -127,6 +138,7 @@
 
   &.@{radio-cls}-group-small {
     height: @radio-height-small;
+
     .@{radio-button--cls} {
       padding: @radio-button-padding-small;
       font-size: @radio-button-font-size-small;
@@ -140,6 +152,7 @@
 
   &.@{radio-cls}-group-medium {
     height: @radio-height-medium;
+
     .@{radio-button--cls} {
       padding: @radio-button-padding-medium;
       font-size: @radio-button-font-size-medium;
@@ -152,6 +165,7 @@
 
   &.@{radio-cls}-group-large {
     height: @radio-height-large;
+
     .@{radio-button--cls} {
       padding: @radio-button-padding-large;
       font-size: @radio-button-font-size-large;
@@ -197,6 +211,7 @@
       border-right: @radio-button-border;
       border-color: @radio-button-border-color-checked;
       transition: border-color @anim-duration-base @anim-time-fn-ease-out;
+
       + .@{radio-button--cls} {
         border-left: 0;
       }
@@ -271,12 +286,14 @@
   }
 
   &:hover {
+
     .@{radio-cls}__input {
       border-color: @radio-dot-color;
     }
   }
 
   &.@{prefix}-is-checked {
+
     .@{radio-cls}__input {
       border-color: @radio-dot-color;
 
@@ -298,12 +315,14 @@
     }
 
     &:hover {
+
       .@{radio-cls}__input {
         border-color: @radio-border-color;
       }
     }
 
     &.@{prefix}-is-checked {
+
       .@{radio-cls}__input {
         border-color: @radio-border-color;
 

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

@@ -1,11 +1,14 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "../../mixins/_text.less";
 
 // select
 .@{prefix}-select-wrap {
   width: 100%;
 }
+
 .@{prefix}-select {
   position: relative;
   display: inline-block;
@@ -23,6 +26,7 @@
   :active {
     cursor: pointer;
     border-color: @select-border-color-active;
+
     & > .@{prefix}-select-right-icon:not(.@{prefix}-select-right-icon__clear) {
       color: @select-right-icon-hover;
       opacity: 1;
@@ -43,9 +47,9 @@
 
   & .@{prefix}-select-selectedSingle {
     margin-left: @select-placeholder-margin;
-    .text-ellipsis();
     display: block;
     color: @select-input-color;
+    .text-ellipsis();
   }
 
   & .@{prefix}-select-right-icon {
@@ -57,16 +61,19 @@
     color: @select-icon-color;
     transition: color @anim-duration-base @anim-time-fn-easing;
   }
+
   .@{prefix}-select-active-icon {
     color: @select-border-color-active;
   }
+
   .@{prefix}-select-right-icon.@{prefix}-is-visible {
     transform: scaleY(-1);
     transition: transform @anim-duration-base @anim-time-fn-easing;
 
-    /*IE*/
-    filter: FlipV;
+    /* IE */
+    filter: flipv;
   }
+
   & .@{prefix}-select-left-icon {
     position: absolute;
     height: 100%;
@@ -75,6 +82,8 @@
     top: 0;
     color: @select-icon-color;
     transition: color @anim-duration-base @anim-time-fn-easing;
+    display: flex;
+    align-items: center;
   }
 
   .@{prefix}-select-input {
@@ -107,6 +116,7 @@
   + .@{prefix}-tag {
     margin: @select-tag-margin;
   }
+
   .@{prefix}-tag {
     height: @select-tag-height-default;
     line-height: (@select-tag-height-default - 2px);
@@ -161,6 +171,7 @@
       line-height: (@select-height-l - 2px);
     }
   }
+
   .@{prefix}-tag.@{prefix}-size-l {
     height: @select-tag-height-l;
     line-height: (@select-tag-height-l - 2px);
@@ -180,6 +191,7 @@
       line-height: (@select-height-s - 2px);
     }
   }
+
   .@{prefix}-tag.@{prefix}-size-s {
     height: @select-tag-height-s;
     line-height: (@select-tag-height-s - 2px);
@@ -204,6 +216,7 @@
     color: @select-color-disabled;
   }
 }
+
 .@{prefix}-select-popup-reference {
   width: 100%;
 }
@@ -255,20 +268,23 @@
 
 // option group
 .@{prefix}-option-group + .@{prefix}-option-group {
-  border-top: 1px @select-optiongroup-border-color solid;
   padding-top: @select-optiongroup-border-padding;
   margin-top: @select-optiongroup-border-margin;
 }
+
+.@{prefix}-option-group__divider + .@{prefix}-option-group__divider {
+  border-top: 1px @select-optiongroup-border-color solid;
+}
+
 .@{prefix}-option-group-header {
-  
   ul&,
   & {
     color: @select-option-group-header-color;
     display: block;
-    .text-ellipsis();
     height: @select-option-height-default;
     line-height: @select-option-line-height;
     padding: @select-option-padding-default;
+    .text-ellipsis();
   }
 }
 
@@ -286,14 +302,13 @@
 .@{prefix}-select-option {
   display: block;
   border-radius: @select-option-border-radius;
-  .text-ellipsis();
   height: @select-option-height-default;
   line-height: @select-option-line-height;
   cursor: pointer;
   padding: @select-option-padding-default;
   color: @select-option-color;
-  --ripple-color: @bg-color-container-active;
   transition: background-color @anim-duration-base @anim-time-fn-easing;
+  .text-ellipsis();
 
   span {
     position: relative;
@@ -301,9 +316,11 @@
 
   &:not(.@{prefix}-is-disabled):hover {
     background-color: @select-option-bg-color-hover;
+
     .@{prefix}-checkbox__label {
       color: @select-option-checkbox-label-color-hover;
     }
+
     .@{prefix}-checkbox__input {
       border-color: @select-option-checkbox-input-color-hover;
     }
@@ -311,13 +328,15 @@
 
   .@{prefix}-checkbox__label {
     color: @select-option-color;
-    .text-ellipsis();
     flex: 1;
+    .text-ellipsis();
   }
 
   .@{prefix}-checkbox {
     width: 100%;
   }
+
+  --ripple-color: @bg-color-container-active;
 }
 
 .@{prefix}-select-option.@{prefix}-is-disabled {

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

@@ -37,7 +37,7 @@
 @select-tag-height-s: 18px;
 
 // font-size
-@select-font-size-s: @font-size-s;  
+@select-font-size-s: @font-size-s;
 @select-font-size-l: @font-size-l;
 
 //阴影
@@ -52,7 +52,7 @@
 
 // padding
 @select-option-padding-s: 5px 8px;
-@select-option-padding-default: 9px 12px;
+@select-option-padding-default: 9px 8px;
 @select-option-padding-l: 13px 16px;
 @select-padding: 0 26px 0 4px;
 @select-optiongroup-border-padding: 7px;