tdesign-react 0.17.0 → 0.18.2

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

@@ -1,3 +1,3 @@
 .tdesign-demo-block > .t-alert + .t-alert {
   margin-top: 16px;
-}
+}

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 /* Alert */
@@ -129,11 +131,11 @@
   color: @brand-color;
   cursor: pointer;
   transition: color @anim-duration-base;
-  
+
   &:hover {
     color: @brand-color-hover;
   }
-  
+
   &:active {
     color: @brand-color-active;
   }
@@ -246,7 +248,7 @@
     list-style-type: none;
     cursor: pointer;
 
-    &:before {
+    &::before {
       content: "\2022";
     }
   }

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

@@ -0,0 +1,76 @@
+@import "../../base.less";
+
+@import "./_var.less";
+
+@import "./_mixin.less";
+
+.@{prefix}-avatar {
+  position: relative;
+  display: inline-flex;
+  background: @avatar-bg-color;
+  color: @avatar-text-color;
+  overflow: hidden;
+  white-space: nowrap;
+  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 {
+    border-radius: @avatar-border-radius-cicle;
+  }
+
+  &--round {
+    border-radius: @avatar-border-radius-round;
+  }
+
+  &.@{prefix}-size-s {
+    .avatar-size(@avatar-size-small,@avatar-font-small,@avatar-icon-small);
+  }
+
+  &.@{prefix}-size-l {
+    .avatar-size(@avatar-size-large,@avatar-font-large,@avatar-icon-large);
+  }
+}
+
+.@{prefix}-avatar-group {
+  display: inline-flex;
+  align-items: center;
+
+  .@{prefix}-avatar {
+    border: 2px solid @avatar-border-color;
+  }
+
+  &.@{prefix}-avatar--offset-right {
+
+    & .@{prefix}-avatar {
+      &:not(:last-child) {
+        .avatar-group-offset-right(@avatar-group-offset-medium);
+
+        &.@{prefix}-size-s {
+          .avatar-group-offset-right(@avatar-group-offset-small);
+        }
+
+        &.@{prefix}-size-l {
+          .avatar-group-offset-right(@avatar-group-offset-large);
+        }
+      }
+    }
+  }
+
+  &.@{prefix}-avatar--offset-left {
+    .generate-z-index(@avatar-group-init-zIndex);
+
+    .@{prefix}-popup-reference .@{prefix}-avatar {
+      z-index: 0;
+      .avatar-group-size--left();
+    }
+
+    & .@{prefix}-avatar {
+      &:not(:first-child) {
+        .avatar-group-size--left();
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+@import "./_var.less";
+
+.avatar-size(@size, @font-size,@avatar-icon-size) {
+  width: @size;
+  height: @size;
+  font-size: @font-size;
+  line-height: @size;
+
+  &.@{prefix}-avatar__icon {
+    font-size: @avatar-icon-size;
+  }
+
+  & img {
+    height: @size;
+    width: @size;
+  }
+}
+
+.avatar-group-offset-right(@offset) {
+  margin-right: @offset;
+}
+
+.avatar-group-offset-left(@offset) {
+  margin-left: @offset;
+}
+
+.generate-z-index(@n, @i: 1) when (@i =< @n) {
+
+  & .@{prefix}-avatar:nth-child(@{i}) {
+    z-index: (@avatar-group-init-zIndex - @i);
+  }
+  .generate-z-index(@n, (@i + 1));
+}
+
+.avatar-group-size--left() {
+  .avatar-group-offset-left(@avatar-group-offset-medium);
+
+  &.@{prefix}-size-s {
+    .avatar-group-offset-left(@avatar-group-offset-small);
+  }
+
+  &.@{prefix}-size-l {
+    .avatar-group-offset-left(@avatar-group-offset-large);
+  }
+}

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

@@ -0,0 +1,31 @@
+//颜色
+@avatar-bg-color: @brand-color-2;
+@avatar-text-color: @text-color-brand;
+
+//头像大小
+@avatar-size-small: 24px;
+@avatar-size-medium: 32px;
+@avatar-size-large: 40px;
+
+//字体
+@avatar-font-small: @font-size-base;
+@avatar-font-medium: @font-size-l;
+@avatar-font-large: @font-size-xl;
+
+//图标
+@avatar-icon-small: @icon-default;
+@avatar-icon-medium: 20px;
+@avatar-icon-large: @icon-l;
+
+//边框
+@avatar-border-radius-cicle: @border-radius-50;
+@avatar-border-radius-round: 3px;
+@avatar-border-color: @bg-color-container;
+
+//组合头像偏移量
+@avatar-group-offset-small: -4px;
+@avatar-group-offset-medium: -6px;
+@avatar-group-offset-large: -8px;
+
+//z-index
+@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;