tdesign-react 0.17.0 → 0.18.2

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

@@ -1,15 +1,17 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-form {
   font-size: @form-font-size;
 
   &:not(.@{prefix}-form-inline) {
-    .@{prefix}-form__item {
 
+    .@{prefix}-form__item {
       &:last-of-type {
         margin: 0;
       }
@@ -48,7 +50,6 @@
     }
 
     &--required {
-
       label::before {
         display: inline-block;
         margin-right: @form-label-margin-right-required;
@@ -59,7 +60,6 @@
     }
 
     &--colon {
-
       label::after {
         content: ":";
         position: relative;
@@ -83,37 +83,43 @@
     }
 
     // 输入框状态
-    .input-status(success);
     .input-status(warning);
     .input-status(error);
   }
 
   &__controls.@{prefix}-is-success {
-    //.@{prefix}-input__inner {
-    //  border-color: @@borderColor;
-    //  @borderColor: "form-color-success";
-    //}
-    //.@{prefix}-input__extra {
-    //  color: @@fontColor;
-    //  @fontColor: "form-color-success";
-    //}
+
     .@{prefix}-form__status {
+
       .@{prefix}-icon {
         color: @form-color-success;
       }
     }
+
+    .@{prefix}-input__extra {
+      color: @form-color-success;
+    }
+  }
+
+  &__controls.@{prefix}-form--success-border {
+    // 输入框状态
+    .input-status(success);
   }
 
   &__controls.@{prefix}-is-error {
+
     .@{prefix}-input__inner {
       border-color: @@borderColor;
       @borderColor: "form-color-error";
     }
+
     .@{prefix}-input__extra {
       color: @@fontColor;
       @fontColor: "form-color-error";
     }
+
     .@{prefix}-form__status {
+
       .@{prefix}-icon {
         color: @form-color-error;
       }
@@ -121,15 +127,19 @@
   }
 
   &__controls.@{prefix}-is-warning {
+
     .@{prefix}-input__inner {
       border-color: @@borderColor;
       @borderColor: "form-color-warning";
     }
+
     .@{prefix}-input__extra {
       color: @@fontColor;
       @fontColor: "form-color-warning";
     }
+
     .@{prefix}-form__status {
+
       .@{prefix}-icon {
         color: @form-color-warning;
       }
@@ -158,7 +168,7 @@
     button {
       width: @form-status-button-width;
     }
-    
+
     button + button {
       margin-left: @form-status-margin-left;
     }

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

@@ -1,16 +1,19 @@
 .input-status(@status) {
+
   &.@{prefix}-is-@{status} {
+
     .@{prefix}-form__controls--content {
       // TODO: should consider all official-provided form components(select/checkbox/datepicker...)
       > .@{prefix}-input {
+
         .@{prefix}-input__inner {
           border-color: @@borderColor;
-          @borderColor: "input-border-color-@{status}";
 
           &:focus {
             box-shadow: 0 0 0 2px @@boxShadowColor;
             @boxShadowColor: "input-box-shadow-color-@{status}-focus";
           }
+          @borderColor: "input-border-color-@{status}";
         }
       }
     }

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

@@ -36,11 +36,11 @@
 @form-label-margin-right-required: (@spacer / 2);
 @form-label-margin-colon: 0 @spacer 0 (@spacer / 4);
 @form-status-position-right: -@spacer-4;
-@form-status-margin-left: @spacer; 
+@form-status-margin-left: @spacer;
 @form-status-button-width: 32px;
 @from-help-text-margin-top: (@spacer / 2);
 
-// status 
+// status
 @input-border-color-success: @success-color;
 @input-box-shadow-color-success-focus: @success-color-focus;
 @input-border-color-warning: @warning-color;

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

@@ -1,4 +1,5 @@
-[class*='@{d-prefix}-demo-item--grid'] {
+[class*="@{d-prefix}-demo-item--grid"] {
+
   .@{prefix}-col > div {
     min-height: 40px;
     margin-top: 8px;

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 // Grid system

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

@@ -1,20 +1,25 @@
 @import "../../mixins/_index.less";
 
 .gen-grid-columns(@index, @class) when (@index > 0) {
+
   .@{prefix}-col@{class}-@{index} {
     display: block;
     flex: 0 0 percentage((@index / @grid-columns));
     max-width: percentage((@index / @grid-columns));
   }
+
   .@{prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
+
   .@{prefix}-col@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
+
   .@{prefix}-col@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
+
   .@{prefix}-col@{class}-order-@{index} {
     order: @index;
   }
@@ -22,24 +27,31 @@
 }
 
 .gen-grid-columns(@index, @class) when (@index = 0) {
+
   .@{prefix}-col@{class}-@{index} {
     display: none;
   }
+
   .@{prefix}-col-push-@{index} {
     left: auto;
   }
+
   .@{prefix}-col-pull-@{index} {
     right: auto;
   }
+
   .@{prefix}-col@{class}-push-@{index} {
     left: auto;
   }
+
   .@{prefix}-col@{class}-pull-@{index} {
     right: auto;
   }
+
   .@{prefix}-col@{class}-offset-@{index} {
     margin-left: 0;
   }
+
   .@{prefix}-col@{class}-order-@{index} {
     order: 0;
   }

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

@@ -17,12 +17,15 @@
 
 .@{prefix}-icon {
   fill: currentColor;
+
   &.@{prefix}-size-s {
     font-size: 14px;
   }
+
   &.@{prefix}-size-m {
     font-size: 16px;
   }
+
   &.@{prefix}-size-l {
     font-size: 18px;
   }

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-input {
@@ -56,6 +58,7 @@
 
   // 输入框大小
   &.@{prefix}-size-l {
+
     & > .@{prefix}-input__inner {
       height: @input-height-l;
       line-height: @input-height-l;
@@ -64,6 +67,7 @@
   }
 
   &.@{prefix}-size-s {
+
     & > .@{prefix}-input__inner {
       height: @input-height-s;
       line-height: @input-height-s;
@@ -73,14 +77,29 @@
 
   .@{prefix}-input__prefix,
   .@{prefix}-input__suffix {
+
     .@{prefix}-icon {
       font-size: @input-inner-icon-font-size;
-      color: @text-color-placeholder;
+    }
+  }
+
+  .@{prefix}-input__prefix {
+
+    .@{prefix}-icon {
+      color: @input-inner-prefix-icon-color;
+    }
+  }
+
+  .@{prefix}-input__suffix {
+
+    .@{prefix}-icon {
+      color: @input-inner-suffix-icon-color;
     }
   }
 
   // 输入框被聚焦
   &.@{prefix}-is-focused {
+
     .@{prefix}-input__prefix,
     .@{prefix}-input__suffix:not(.@{prefix}-input__clear) {
       // 除了clear icon其他都在focus时变色
@@ -97,17 +116,20 @@
   align-items: stretch;
 
   .@{prefix}-input {
+
     .@{prefix}-input__inner {
       border-radius: 0;
     }
 
     &:first-child {
+
       .@{prefix}-input__inner {
         border-radius: @input-border-radius 0 0 @input-border-radius;
       }
     }
 
     &:last-child {
+
       .@{prefix}-input__inner {
         border-radius: 0 @border-radius @border-radius 0;
       }
@@ -126,7 +148,6 @@
 
   .@{prefix}-button,
   .@{prefix}-select {
-
     &:first-child {
       border-radius: @input-border-radius 0 0 @input-border-radius;
     }
@@ -137,9 +158,11 @@
   }
 
   &--separate {
+
     .@{prefix}-input + .@{prefix}-input {
       margin-left: @input-margin-distance-default;
     }
+
     .@{prefix}-button,
     .@{prefix}-select {
       border-radius: @input-border-radius;
@@ -152,18 +175,22 @@
         border-radius: 0 @input-border-radius @input-border-radius 0;
       }
     }
+
     .@{prefix}-input {
+
       .@{prefix}-input__inner {
         border-radius: @input-border-radius;
       }
 
       &:first-child {
+
         .@{prefix}-input__inner {
           border-radius: @input-border-radius;
         }
       }
 
       &:last-child {
+
         .@{prefix}-input__inner {
           border-radius: @input-border-radius;
         }
@@ -202,7 +229,9 @@
   }
 
   &--prepend {
+
     & > .@{prefix}-input {
+
       .@{prefix}-input__inner {
         border-radius: 0 @input-border-radius @input-border-radius 0;
       }
@@ -210,7 +239,9 @@
   }
 
   &--append {
+
     & > .@{prefix}-input {
+
       .@{prefix}-input__inner {
         border-radius: @input-border-radius 0 0 @input-border-radius;
       }
@@ -218,7 +249,9 @@
   }
 
   &--prepend&--append {
+
     & > .@{prefix}-input {
+
       .@{prefix}-input__inner {
         border-radius: 0;
       }

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

@@ -24,12 +24,14 @@
     position: relative;
     z-index: 1;
     border-color: @input-border-color-default-focus;
-    box-shadow: 0 0 0 2px @input-box-shadow-color-default-focus;
+    box-shadow: @input-box-shadow-focus;
   }
 }
 
 .input-disabled {
+
   &.@{prefix}-input.@{prefix}-is-disabled {
+
     & > .@{prefix}-input__inner {
       color: @input-text-color-disabled;
       background-color: @input-bg-color-disabled;
@@ -39,8 +41,10 @@
         border-color: @input-border-color-default;
       }
     }
+
     & > .@{prefix}-input__prefix,
     & > .@{prefix}-input__suffix {
+
       .@{prefix}-icon {
         color: @input-text-color-disabled;
       }
@@ -49,16 +53,19 @@
 }
 
 .input-status(@status) {
+
   &.@{prefix}-is-@{status} {
+
     & > .@{prefix}-input__inner {
       border-color: @@borderColor;
-      @borderColor: "input-border-color-@{status}";
 
       &:focus {
         box-shadow: 0 0 0 2px @@boxShadowColor;
         @boxShadowColor: "input-box-shadow-color-@{status}-focus";
       }
+      @borderColor: "input-border-color-@{status}";
     }
+
     & > .@{prefix}-input__extra {
       color: @@fontColor;
       @fontColor: "input-extra-color-@{status}";
@@ -67,7 +74,9 @@
 }
 
 .input-fix-position(@position) {
+
   &.@{prefix}-input--@{position} {
+
     & > .@{prefix}-input__inner {
       & when (@position = prefix) {
         padding-left: @input-fix-padding;
@@ -76,6 +85,7 @@
         padding-right: @input-fix-padding;
       }
     }
+
     & > .@{prefix}-input__@{position} {
       position: absolute;
       top: 0;
@@ -97,7 +107,9 @@
 
 .input-size(@size) {
   & when(@size = l) {
+
     &.@{prefix}-size-l {
+
       & > .@{prefix}-input__inner {
         height: @input-height-l;
         line-height: @input-height-l;
@@ -105,6 +117,7 @@
     }
   }
   & when not (@size = l) {
+
     &.@{prefix}-size-@{size} {
       width: @@width-size;
       @width-size: "input-width-@{size}";
@@ -113,6 +126,7 @@
 }
 
 .addon-item(@position) {
+
   .@{prefix}-addon__@{position} {
     background-color: @input-append-color;
     color: @input-text-color-default;

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

@@ -17,13 +17,9 @@
 @input-border-color-default: @border-level-2-color;
 @input-border-color-default-hover: @brand-color;
 @input-border-color-default-focus: @brand-color;
-@input-box-shadow-color-default-focus: @brand-color-focus;
 @input-border-color-success: @success-color;
-@input-box-shadow-color-success-focus: @success-color-focus;
 @input-border-color-warning: @warning-color;
-@input-box-shadow-color-warning-focus: @warning-color-focus;
 @input-border-color-error: @error-color;
-@input-box-shadow-color-error-focus: @error-color-focus;
 
 @input-text-color-default: @text-color-primary;
 @input-text-color-disabled: @text-color-disabled;
@@ -59,6 +55,10 @@
 @input-height-l: (@spacer * 5);
 @input-inner-icon-font-size: inherit;
 
+// 图标
+@input-inner-prefix-icon-color: @text-color-placeholder;
+@input-inner-suffix-icon-color: @text-color-placeholder;
+
 // 字号
 @input-font-size-l: @font-size-l;
 @input-font-size: @font-size-base;
@@ -68,5 +68,12 @@
 // 边框
 @input-border-radius: @border-radius;
 
+// box
+@input-box-shadow-color-default-focus: @brand-color-focus;
+@input-box-shadow-color-success-focus: @success-color-focus;
+@input-box-shadow-color-warning-focus: @warning-color-focus;
+@input-box-shadow-color-error-focus: @error-color-focus;
+@input-box-shadow-focus: 0 0 0 2px @input-box-shadow-color-default-focus;
+
 // 动画
 @input-inner-transition: all @anim-time-fn-easing @anim-duration-base;

package/esm/_common/style/web/components/input-number/_docs.less

@@ -1,4 +1,5 @@
 .@{d-prefix}-demo-item--input-number {
+
   .@{prefix}-input-number {
     margin-right: 16px;
     margin-bottom: 32px;

package/esm/_common/style/web/components/input-number/_index.less

@@ -1,8 +1,11 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
+
 @import "../../utilities/_animation.less";
 
 @inputCls: ~"@{prefix}-input";
@@ -37,7 +40,6 @@
     width: @input-number-button-width;
     height: @input-number-button-height;
     position: absolute;
-    z-index: 0;
     top: 0;
     border: 1px solid @input-number-button-border-color;
     box-sizing: border-box;
@@ -82,6 +84,7 @@
 
       &:hover {
         border-color: @input-number-button-border-color;
+
         .@{prefix}-icon {
           color: @input-number-button-color-disabled;
         }
@@ -110,6 +113,7 @@
       color: @input-number-button-color-disabled;
 
       &:hover {
+
         .@{inputCls}__inner {
           border-color: @input-number-button-border-color;
         }
@@ -123,6 +127,7 @@
 }
 
 .@{inputNumberCls}.@{prefix}-is-disabled {
+
   .@{inputCls}__inner {
     cursor: no-drop;
     background-color: @input-number-bg-color-disabled;
@@ -145,16 +150,17 @@
       color: @text-color-secondary;
     }
   }
-
 }
 
 .@{inputNumberCls}.@{prefix}-size-s {
   width: @input-number-width-s;
   padding: 0 @input-number-button-width-s;
+
   .@{inputCls}__inner {
     height: @input-number-inner-height-s;
     line-height: @input-number-inner-height-s;
   }
+
   .@{inputNumberCls}__decrease,
   .@{inputNumberCls}__increase {
     font-size: @input-number-font-size-s;
@@ -166,10 +172,12 @@
 .@{inputNumberCls}.@{prefix}-size-l {
   width: @input-number-width-l;
   padding: 0 @input-number-button-width-l;
+
   .@{inputCls}__inner {
     height: @input-number-inner-height-l;
     line-height: @input-number-inner-height-l;
   }
+
   .@{inputNumberCls}__decrease,
   .@{inputNumberCls}__increase {
     font-size: @input-number-font-size-l;
@@ -178,10 +186,12 @@
   }
 
   &.@{prefix}-is-controls-right {
+
     .@{inputCls}__inner {
       height: @input-number-inner-height-l;
       line-height: @input-number-inner-height-l;
-      padding-right: @input-number-right-button-width-l +
+      padding-right:
+        @input-number-right-button-width-l +
         @input-number-padding-horizontal-default;
     }
 
@@ -196,12 +206,13 @@
 .@{inputNumberCls}.@{prefix}-is-controls-right {
   width: @input-number-right-width;
   padding: 0;
-  
+
   &.@{prefix}-size-l {
     width: @input-number-right-width-l;
   }
 
   &:hover {
+
     .@{inputNumberCls}__decrease,
     .@{inputNumberCls}__increase {
       opacity: 1;
@@ -213,8 +224,9 @@
     width: 100%;
     box-sizing: border-box;
     margin: 0;
-    padding-right: (@input-number-right-button-width +
-    @input-number-padding-horizontal-default);
+    padding-right:
+      (@input-number-right-button-width +
+      @input-number-padding-horizontal-default);
     text-align: left;
     border-radius: @border-radius;
   }
@@ -239,6 +251,7 @@
 
     &:hover {
       background: @input-number-right-button-hover-bg-color;
+
       .@{prefix}-icon {
         color: @text-color-primary;
       }
@@ -255,12 +268,14 @@
 
       &:hover {
         border-color: @input-number-button-border-color;
+
         .@{prefix}-icon {
           color: @input-number-button-color-disabled;
         }
       }
     }
   }
+
   .@{inputNumberCls}__decrease {
     bottom: 1px;
     border-bottom-right-radius: calc(@border-radius - 1px);