tdesign-react 0.18.1 → 0.18.2

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

@@ -40,4 +40,4 @@
 @alert-padding: 14px 24px;
 
 // size
-@alert-icon-size: 20px;
+@alert-icon-size: 20px;

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

@@ -1,9 +1,11 @@
-[class*='@{d-prefix}-demo-item--button'] {
+[class*="@{d-prefix}-demo-item--button"] {
+
   .@{prefix}-button + .@{prefix}-button {
     margin-left: 8px;
   }
+
   .@{prefix}-button.@{prefix}-size-full-width + .@{prefix}-button.@{prefix}-size-full-width {
-    margin-left: 0px;
+    margin-left: 0;
     margin-top: 8px;
   }
 }

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

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-anchor {
@@ -90,6 +92,7 @@
   &.@{prefix}-size-s {
     width: @anchor-width-s;
   }
+
   &.@{prefix}-size-l {
     width: @anchor-width-l;
   }
@@ -102,7 +105,6 @@
   color: @anchor-text-color-default;
 
   @keyframes fadeOut {
-
     0% {
       opacity: 1;
     }

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

@@ -12,7 +12,7 @@
   border-radius: @btn-border-radius;
 }
 .button-size(@height;@font-size;@padding-horizontal) {
-  height: @height ;
+  height: @height;
   line-height: (@height - 4px);
   font-size: @font-size;
   padding-left: @padding-horizontal;

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

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-avatar {
@@ -12,6 +14,7 @@
   vertical-align: middle;
   justify-content: center;
   align-items: center;
+  box-sizing: content-box;
   .avatar-size(@avatar-size-medium,@avatar-font-medium,@avatar-icon-medium);
 
   &--circle {
@@ -40,8 +43,8 @@
   }
 
   &.@{prefix}-avatar--offset-right {
-    & .@{prefix}-avatar {
 
+    & .@{prefix}-avatar {
       &:not(:last-child) {
         .avatar-group-offset-right(@avatar-group-offset-medium);
 
@@ -65,10 +68,9 @@
     }
 
     & .@{prefix}-avatar {
-
       &:not(:first-child) {
-        .avatar-group-size--left()
+        .avatar-group-size--left();
       }
     }
   }
-}
+}

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

@@ -5,6 +5,7 @@
   height: @size;
   font-size: @font-size;
   line-height: @size;
+
   &.@{prefix}-avatar__icon {
     font-size: @avatar-icon-size;
   }
@@ -24,6 +25,7 @@
 }
 
 .generate-z-index(@n, @i: 1) when (@i =< @n) {
+
   & .@{prefix}-avatar:nth-child(@{i}) {
     z-index: (@avatar-group-init-zIndex - @i);
   }
@@ -40,4 +42,4 @@
   &.@{prefix}-size-l {
     .avatar-group-offset-left(@avatar-group-offset-large);
   }
-}
+}

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

@@ -19,7 +19,7 @@
 
 //边框
 @avatar-border-radius-cicle: @border-radius-50;
-@avatar-border-radius-round: 4px;
+@avatar-border-radius-round: 3px;
 @avatar-border-color: @bg-color-container;
 
 //组合头像偏移量
@@ -28,6 +28,4 @@
 @avatar-group-offset-large: -8px;
 
 //z-index
-@avatar-group-init-zIndex:100;
-
-
+@avatar-group-init-zIndex:50;

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

@@ -1,7 +1,9 @@
 .@{d-prefix}-demo-item--badge {
+
   .@{prefix}-badge + .@{prefix}-badge {
     margin-left: 24px;
   }
+
   .@{prefix}-badge-static + .@{prefix}-badge-static {
     margin-left: 4px;
   }

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

@@ -1,14 +1,16 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 // Badge
 .@{prefix}-badge {
   position: relative;
   display: inline-block;
-  
+
   &--dot,
   &--circle,
   &--round {

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

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-breadcrumb {
@@ -27,6 +29,7 @@
 
     &:last-child {
       color: @breadcrumb-text-color-current;
+
       .@{prefix}-breadcrumb__separator {
         display: none;
       }
@@ -55,7 +58,7 @@
           color: @breadcrumb-text-color-disabled;
           cursor: not-allowed;
         }
-        
+
         &:active {
           animation: none;
         }
@@ -64,25 +67,25 @@
 
     //箭头型
     &--arrow {
-      .v-inlineblock;
       margin: 0 @breadcrumb-spacer-half;
       line-height: 0;
       color: @breadcrumb-icon-arrow-color-default;
+      .v-inlineblock;
     }
 
     //斜杠型
     &--slash {
-      .v-inlineblock;
       margin: 0 @breadcrumb-spacer-half;
       line-height: 0;
       color: @breadcrumb-icon-slash-color-default;
+      .v-inlineblock;
     }
   }
 
   &__inner {
-    .v-inlineblock;
     font-size: @breadcrumb-font-base;
     word-break: break-all;
+    .v-inlineblock;
 
     .@{prefix}-icon {
       margin: 0 @breadcrumb-spacer-half;
@@ -101,9 +104,7 @@
     }
 
     &-item {
-
       &:hover {
-
         .t-icon {
           color: @breadcrumb-icon-color-hover;
         }
@@ -154,7 +155,7 @@
     box-shadow: @breadcrumb-option-box-shadow;
     z-index: 20;
 
-    &:before {
+    &::before {
       content: "";
       position: absolute;
       bottom: -8px;
@@ -163,11 +164,10 @@
       width: 0;
       height: 0;
       border-style: solid;
-      border-width: 8px 6px 0 6px;
+      border-width: 8px 6px 0;
       border-color: @bg-color-container transparent transparent transparent;
       z-index: 20;
     }
-
   }
 
   &--text-oveflow {
@@ -180,7 +180,6 @@
       .@{prefix}-breadcrumb__inner-msg {
         display: block;
       }
-
     }
 
     .@{prefix}-breadcrumb__inner {
@@ -197,7 +196,7 @@
         transition: color @anim-duration-base linear;
         cursor: pointer;
       }
-      
+
       &:active {
         .color-change;
       }

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

@@ -17,12 +17,10 @@
 }
 
 .color-change() {
-  animation: @anim-duration-base linear changeColor;  
-
+  animation: @anim-duration-base linear changeColor;
 }
 
 @keyframes changeColor {
-
   from {
     color: @brand-color-7;
   }
@@ -30,4 +28,4 @@
   to {
     color: @brand-color-9;
   }
-}
+}

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

@@ -11,7 +11,6 @@
 // 如：@button-line-bg-color-hover
 // 如：@button-line-height-s
 
-
 //文字颜色
 @breadcrumb-text-color-default: @text-color-placeholder;
 @breadcrumb-text-color-hover: @brand-color;
@@ -38,10 +37,8 @@
 @breadcrumb-spacer-half: (@spacer * .5);
 @breadcrumb-content-icon-margin-bottom: 2px;
 
-
 // 尺寸
 @breadcrumb-icon-size: @font-size-l;
 @breadcrumb-inner-max-width-default: 120px;
 @breadcrumb-option-max-width: 120px;
 @breadcrumb-inner-msg-width: 300px;
-

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

@@ -1,14 +1,17 @@
-[class*='@{d-prefix}-demo-item--button'] {
+[class*="@{d-prefix}-demo-item--button"] {
+
   .@{prefix}-button + .@{prefix}-button {
     margin-left: 8px;
   }
+
   .@{prefix}-button.@{prefix}-size-full-width + .@{prefix}-button.@{prefix}-size-full-width {
-    margin-left: 0px;
+    margin-left: 0;
     margin-top: 8px;
   }
 }
 
 .tdesign-demo-item--button-ghost {
+
   .@{d-prefix}-demo-item__body {
     background-color: #181818;
   }

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

@@ -1,14 +1,10 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .button-attr-color(@theme, @attr, @attr-prepend: "", @ghost: false) {
-  @theme-default: e("btn-color-@{theme}");
-  @theme-hover: e("btn-color-@{theme}-hover");
-  @theme-active: e("btn-color-@{theme}-active");
-  @theme-disabled: e("btn-color-@{theme}-disabled");
-  @{attr}: e(@attr-prepend) @@theme-default;
-
   &:hover {
     @{attr}: e(@attr-prepend) @@theme-hover;
   }
@@ -20,6 +16,13 @@
   &.@{prefix}-is-disabled {
     @{attr}: e(@attr-prepend) @@theme-disabled;
   }
+  @theme-default: e("btn-color-@{theme}");
+  @theme-hover: e("btn-color-@{theme}-hover");
+  @theme-active: e("btn-color-@{theme}-active");
+  @theme-disabled: e("btn-color-@{theme}-disabled");
+  @theme-focus: e("btn-color-@{theme}-focus");
+
+  @{attr}: e(@attr-prepend) @@theme-default;
 }
 
 .@{prefix}-button {
@@ -36,42 +39,42 @@
   }
 
   .@{prefix}-loading {
-    font-size: @btn-icon-size-default;
+    font-size: @btn-loading-size;
   }
 
   .@{prefix}-icon  + .@{prefix}-button__text {
-    margin-left: @spacer;
+    margin-left: @btn-icon-text-margin-left;
   }
 
   .@{prefix}-loading + .@{prefix}-button__text {
-    margin-left: @spacer;
+    margin-left: @btn-icon-text-margin-left;
   }
-  
+
   // 主要按钮
   &--variant-base {
+    color: @btn-text-variant-base-color;
     .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default, 0);
-    color: @text-color-anti;
     .button-attr-color("gray-bg", background-color);
     .button-attr-color("text-gray", color);
 
     &.@{prefix}-button--theme-primary {
+      color: @btn-text-variant-base-color;
       .button-attr-color("primary", background-color);
-      color: @text-color-anti;
     }
 
     &.@{prefix}-button--theme-success {
+      color: @btn-text-variant-base-color;
       .button-attr-color("success", background-color);
-      color: @text-color-anti;
     }
 
     &.@{prefix}-button--theme-warning {
+      color: @btn-text-variant-base-color;
       .button-attr-color("warning", background-color);
-      color: @text-color-anti;
     }
 
     &.@{prefix}-button--theme-danger {
+      color: @btn-text-variant-base-color;
       .button-attr-color("danger", background-color);
-      color: @text-color-anti;
     }
 
     &.@{prefix}-button--ghost {
@@ -210,10 +213,10 @@
 
   // 文字按钮
   &--variant-text {
+    border: 0;
     .button-size(@btn-height-default, @btn-font-default, @btn-icon-size-default, @btn-padding-horizontal-default, 0);
     .button-attr-color("text-gray", color);
     .button-attr-color("text-bg", background-color);
-    border: 0;
 
     &.@{prefix}-button--theme-primary {
       .button-attr-color("primary", color);
@@ -232,8 +235,8 @@
     }
 
     &.@{prefix}-button--ghost {
-      .button-attr-color("white-ghost", color, "", true);
       background: none;
+      .button-attr-color("white-ghost", color, "", true);
 
       &.@{prefix}-button--theme-primary {
         .button-attr-color("primary", color, "", true);
@@ -303,11 +306,14 @@
     text-align: center;
     border-radius: @btn-shape-border-radius-default;
 
-    .@{prefix}-icon,
-    .@{prefix}-loading {
+    .@{prefix}-icon {
       font-size: @btn-icon-size-default;
     }
 
+    .@{prefix}-loading {
+      font-size: @btn-loading-size;
+    }
+
     &.@{prefix}-size-s {
       width: @btn-height-default;
       border-radius: @btn-shape-border-radius-s;

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

@@ -9,8 +9,6 @@
 @btn-shape-border-radius-default: (@btn-height-default / 2);
 @btn-shape-border-radius-l: (@btn-height-l / 2);
 
-// 阴影
-
 //字号
 @btn-font-s: @font-size-s;
 @btn-font-default: @font-size-base;
@@ -20,6 +18,10 @@
 @btn-icon-size-s: @font-size-base;
 @btn-icon-size-default: @font-size-l;
 @btn-icon-size-l: @font-size-xl;
+@btn-loading-size: @font-size-l;
+
+// 按钮中icon和文字的间距
+@btn-icon-text-margin-left: @spacer;
 
 // padding
 @btn-padding-horizontal-s: @spacer;
@@ -99,3 +101,6 @@
 @btn-color-none-hover: transparent;
 @btn-color-none-active: transparent;
 @btn-color-none-disabled: transparent;
+
+// 文本
+@btn-text-variant-base-color: @text-color-anti;

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

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-calendar {
@@ -8,7 +10,7 @@
 
   &--full {
     min-width: @calendar-full-min-width;
-    
+
     .@{prefix}-calendar__control {
       padding: @calendar-control-padding;
     }
@@ -37,7 +39,6 @@
     }
 
     .@{prefix}-calendar__table {
-
       &-head-cell,
       &-body-cell {
         margin-right: @calendar-table-margin-right;
@@ -53,9 +54,9 @@
         flex-direction: column;
         align-items: flex-end;
         margin-left: @calendar-body-cell-margin-left;
-        transition-timing-function: @anim-time-fn-ease-in;
-        transition-duration: @anim-duration-base;
-        transition-property: border-top , background;
+        transition-duration: @calendar-transition-duration;
+        transition-property: @calendar-transition-property;
+        transition-timing-function: @calendar-transition-timing-function;
 
         &-content {
           min-height: @calendar-body-cell-content-min-height;
@@ -64,7 +65,7 @@
 
         &.@{prefix}-is-checked {
           background-color: @calendar-body-cell-check-bg-color;
-    
+
           &:hover {
             background-color: @calendar-body-cell-check-bg-color;
           }
@@ -79,6 +80,7 @@
     }
 
     .@{prefix}-is-disabled {
+
       .@{prefix}-calendar__table-body-cell-value {
         color: @calendar-body-cell-value-disabled-color;
       }
@@ -102,10 +104,12 @@
     }
 
     .@{prefix}-calendar__panel {
+
       &.@{prefix}-calendar__panel--month {
         height: @calendar-card-calendar-panel-height-month;
         padding: @calendar-card-calendar-panel-padding-month;
       }
+
       &.@{prefix}-calendar__panel--year {
         height: @calendar-card-calendar-panel-height-year;
         padding: @calendar-card-calendar-panel-padding-year;
@@ -122,7 +126,6 @@
 
       &-head,
       &-body {
-
         &-row {
           flex: @calendar-body-row-flex;
           background: @calendar-card-head-row-bg;
@@ -163,20 +166,19 @@
             font-size: @calendar-card-body-cell-value-font-size;
             text-align: center;
             border-radius: @calendar-card-body-cell-value-border-radius;
-            transition-timing-function: @anim-time-fn-ease-in;
-            transition-duration: @anim-duration-base;
-            transition-property: color, background;
+            transition-duration: @calendar-transition-duration;
+            transition-property: @calendar-transition-property;
+            transition-timing-function: @calendar-transition-timing-function;
 
             &:hover {
-              box-shadow: inset 0px 0px 0px 1px @calendar-highlight-color;
-              transition: box-shadow @anim-duration-base @anim-time-fn-ease-in;
+              box-shadow: inset 0 0 0 1px @calendar-highlight-color;
+              transition: box-shadow @calendar-transition-duration @calendar-transition-timing-function;
               border-radius: 100%;
             }
           }
         }
       }
     }
-    
 
     .@{prefix}-is-now {
 
@@ -312,13 +314,12 @@
     }
 
     &-body {
-
       &-cell {
         cursor: pointer;
 
         &:hover {
           background-color: @calendar-body-cell-hover-bg-color;
-          transition: background-color @anim-duration-base @anim-time-fn-ease-in;
+          transition: background-color @calendar-transition-duration @calendar-transition-timing-function;
         }
 
         &-value {
@@ -328,6 +329,5 @@
         }
       }
     }
-
   }
 }

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

@@ -8,12 +8,9 @@
 // attr: 属性名称，如color、height、radius等
 // status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
 
-
 // 如：@button-line-bg-color-hover
 // 如：@button-line-height-s
 
-
-
 // 颜色
 @calendar-highlight-color: @brand-color;
 @calendar-title-color: @text-color-primary;
@@ -36,7 +33,6 @@
 @calendar-card-head-row-bg: @bg-color-container;
 @calendar-cell-font-color: @text-color-primary;
 @calendar-body-cell-value-disabled-opacity: .16;
-
 // 字体
 @calendar-head-cell-font-size: @font-size-base;
 @calendar-card-body-cell-font-size: @font-size-s;
@@ -75,7 +71,6 @@
 @calendar-body-line-height: 22px;
 @calendar-card-body-cell-margin: 0px;
 @calendar-header-row-padding: 0px;
-
 // 尺寸
 @calendar-full-min-width: 560px;
 @calendar-control-height: 90px;
@@ -99,7 +94,6 @@
 @calendar-card-cell-value-size: 40px;
 @calendar-border-size: 1px;
 @calendar-card-checked-pointer-width: 6px;
-
 // 定位
 @calendar-title-position-top: -36px;
 @calendar-body-row-flex:1;
@@ -108,3 +102,8 @@
 @calendar-card-body-cell-value-border-radius: @border-radius-50;
 @calendar-scrollbar-thumb-border-radius: @border-radius;
 @calendar-card-checked-pointer-border-radius: 6px;
+
+// 动画
+@calendar-transition-duration: @anim-duration-base;
+@calendar-transition-property: border-top , background;
+@calendar-transition-timing-function: @anim-time-fn-ease-in;