tdesign-react 0.32.2-alpha.5 → 0.32.2-alpha.6

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

@@ -19,12 +19,6 @@
   user-select: none;
   width: @input-number-width;
 
-  &:not(&--column) {
-    > .@{prefix}-input-number__decrease + .@{prefix}-input__wrap {
-      margin-left: @spacer-s;
-    }
-  }
-
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     appearance: none;
@@ -38,19 +32,6 @@
     color: @input-number-inner-color;
   }
 
-  // autoWidth适配
-  &.@{inputNumberCls}--auto-width {
-    width: auto;
-
-    &.@{prefix}-is-controls-right {
-      min-width: 88px;
-    }
-
-    &:not(.@{inputNumberCls}--column) .@{prefix}-input-number__increase {
-      right: -4px;
-    }
-  }
-
   &__decrease,
   &__increase {
     width: @input-number-button-width;
@@ -119,6 +100,30 @@
   &__increase {
     right: -8px;
   }
+
+  &--normal {
+    padding: 0;
+    border-radius: @border-radius;
+
+    &.@{prefix}-is-disabled {
+      cursor: no-drop;
+      color: @input-number-button-color-disabled;
+
+      &:hover {
+        .@{inputCls} {
+          border-color: @input-number-button-border-color;
+        }
+      }
+
+      &::placeholder {
+        color: @input-number-inner-color-disabled;
+      }
+
+      .@{inputCls}:focus {
+        box-shadow: none;
+      }
+    }
+  }
 }
 
 .@{inputNumberCls}.@{prefix}-is-disabled {
@@ -151,7 +156,6 @@
   padding: 0 @input-number-button-width-s;
 
   .@{inputCls} {
-    font-size: @font-size-s;
     height: @input-number-inner-height-s;
     line-height: @input-number-inner-height-s;
   }
@@ -196,30 +200,6 @@
   }
 }
 
-.@{inputNumberCls}.@{inputNumberCls}--normal {
-  padding: 0;
-  border-radius: @border-radius;
-
-  &.@{prefix}-is-disabled {
-    cursor: no-drop;
-    color: @input-number-button-color-disabled;
-
-    &:hover {
-      .@{inputCls} {
-        border-color: @input-number-button-border-color;
-      }
-    }
-
-    &::placeholder {
-      color: @input-number-inner-color-disabled;
-    }
-
-    .@{inputCls}:focus {
-      box-shadow: none;
-    }
-  }
-}
-
 .@{inputNumberCls}.@{prefix}-is-controls-right {
   width: @input-number-right-width;
   padding: 0;
@@ -329,3 +309,26 @@
     }
   }
 }
+
+.@{inputNumberCls} {
+  &:not(&--column) {
+    > .@{prefix}-input-number__decrease + .@{prefix}-input__wrap {
+      margin-left: @spacer-s;
+    }
+  }
+}
+
+// autoWidth适配
+.@{inputNumberCls} {
+  &.@{inputNumberCls}--auto-width {
+    width: auto;
+
+    &.@{prefix}-is-controls-right {
+      min-width: 88px;
+    }
+
+    &:not(.@{inputNumberCls}--column) .@{prefix}-input-number__increase {
+      right: -4px;
+    }
+  }
+}

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

@@ -7,17 +7,12 @@
 @import "../../mixins/_layout.less";
 
 .@{prefix}-pagination {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   white-space: nowrap;
   color: @pagination-text-color;
 
-  &.@{prefix}-is-disabled {
-    color: @pagination-text-color-disabled;
-  }
-
   // 数据统计
   &__total {
     font-size: @pagination-font-default;
@@ -28,7 +23,7 @@
   }
 
   // 选择框
-  .@{prefix}-select__wrap {
+  & .@{prefix}-select__wrap {
     width: auto;
   }
 
@@ -173,7 +168,12 @@
   .@{prefix}-input-number {
     margin-left: @pagination-input-margin;
     margin-right: @pagination-input-margin;
+    height: @pagination-height-default;
     width: @pagination-input-width;
+
+    .@{prefix}-input {
+      width: calc(100% - @spacer);
+    }
   }
 
   // 迷你尺寸
@@ -229,4 +229,13 @@
       }
     }
   }
+
+  //diabled
+  &.@{prefix}-is-disabled {
+    background-color: @bg-color-component-disabled;
+
+    .@{prefix}-pagination__jump {
+      color: @pagination-text-color-disabled;
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 //颜色
 @pagination-text-color: @text-color-secondary;
-@pagination-text-color-disabled: @text-color-disabled;
+@pagination-text-color-disabled: @text-color-placeholder;
 @pagination-text-color-active: @text-color-anti;
 @pagination-text-color-btn: @text-color-primary; // 非数字按钮的颜色
 @pagination-bg-color-current: @brand-color;

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

@@ -12,7 +12,6 @@
     height: 100%;
     background: @progress-inner-color;
     border-radius: @progress-inner-border-radius;
-    transition: @progress-inner-transition;
   }
 
   &__info {
@@ -97,7 +96,6 @@
 
   .@{prefix}-progress__circle-inner {
     stroke: @progress-inner-color;
-    transition: @progress-inner-transition;
   }
 
   .@{prefix}-progress__icon {

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

@@ -45,5 +45,3 @@
 @progress-info-spacer: 8px;
 
 @progress-inner-border-radius: 50px;
-
-@progress-inner-transition: all @anim-duration-base @anim-time-fn-easing;

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

@@ -0,0 +1,141 @@
+@import "../../base.less";
+
+@import "./_mixin.less";
+
+@import "./_var.less";
+
+.@{prefix}-range-input {
+  width: max-content;
+  position: relative;
+  height: @range-input-height-default;
+  .range-input-base();
+
+  // 输入框状态
+  .range-input-status(success);
+  .range-input-status(warning);
+  .range-input-status(error);
+  .range-input-disabled();
+
+  // 输入框的前置、后置图标
+  .range-input-fix-position(prefix);
+  .range-input-fix-position(suffix);
+
+  // 输入框大小
+  &.@{prefix}-size-l {
+    height: @range-input-height-l;
+    line-height: @range-input-height-l;
+    font-size: @range-input-font-size-l;
+
+    .@{prefix}-input {
+      padding: 0 8px;
+    }
+  }
+
+  &.@{prefix}-size-s {
+    padding: 2px 4px;
+    height: @range-input-height-s;
+    line-height: @range-input-height-s;
+    font-size: @range-input-font-size-s;
+  }
+
+  &.@{prefix}-is-focused {
+    z-index: 1;
+    border-color: @range-input-border-color-default-focus;
+    box-shadow: @range-input-box-shadow-focus;
+  }
+
+  &__inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: @spacer;
+
+    .@{prefix}-input__wrap {
+      height: 100%;
+    }
+
+    .@{prefix}-input {
+      padding: 0 4px;
+      height: 100%;
+      border: 0;
+      box-shadow: none;
+      font-size: inherit;
+
+      &:hover {
+        background-color: var(--td-bg-color-container-hover);
+      }
+
+      &__inner {
+        height: 100%;
+      }
+
+      &.@{prefix}-is-focused {
+        background-color: var(--td-bg-color-component);
+      }
+    }
+  }
+
+  // 底部的额外消息
+  &__extra {
+    font-size: @range-input-extra-font-size;
+    color: @range-input-extra-color-default;
+  }
+
+  // 输入框后面的状态图标
+  &__status {
+    position: absolute;
+    right: @range-input-status-position-right;
+    top: 0;
+  }
+
+  &.@{prefix}-range-input--suffix .@{prefix}-input__clear {
+    opacity: 0;
+    visibility: hidden;
+    transition: @range-input-inner-transition;
+  }
+
+  &.@{prefix}-range-input--suffix:hover .@{prefix}-input__clear {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .@{prefix}-range-input__suffix-clear {
+    cursor: pointer;
+  }
+}
+
+.@{prefix}-range-input__prefix,
+.@{prefix}-range-input__suffix {
+
+  .@{prefix}-icon {
+    font-size: @range-input-inner-icon-font-size;
+  }
+}
+
+.@{prefix}-range-input__prefix {
+
+  .@{prefix}-icon {
+    color: @range-input-inner-prefix-icon-color;
+  }
+}
+
+.@{prefix}-range-input__suffix {
+
+  > .@{prefix}-icon {
+    color: @range-input-inner-suffix-icon-color;
+  }
+}
+
+.@{prefix}-range-input-popup {
+  &--visible {
+    .@{prefix}-range-input {
+      border-color: @range-input-border-color-default-hover;
+
+      .@{prefix}-input {
+        &.@{prefix}-is-focused {
+          background-color: var(--td-bg-color-component);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+.range-input-base() {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: @range-input-border-radius;
+  border-color: @range-input-border-color-default;
+  padding: @range-input-padding-vertical-default @range-input-padding-horizontal-default;
+  background-color: @range-input-bg-color-default;
+  color: @range-input-text-color-default;
+  font-size: @range-input-font-size;
+  box-sizing: border-box;
+  transition: @range-input-inner-transition;
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &:hover {
+    border-color: @range-input-border-color-default-hover;
+  }
+}
+
+.range-input-disabled {
+  &.@{prefix}-range-input.@{prefix}-is-disabled {
+    color: @range-input-text-color-disabled;
+    background-color: @range-input-bg-color-disabled;
+
+    &:hover {
+      border-color: @range-input-border-color-default;
+    }
+
+    .@{prefix}-range-input__inner {
+      cursor: not-allowed;
+      color: @range-input-text-color-disabled;
+
+      &::placeholder {
+        color: @range-input-text-color-disabled;
+      }
+    }
+
+    & > .@{prefix}-range-input__prefix,
+    & > .@{prefix}-range-input__suffix {
+      .@{prefix}-icon {
+        color: @range-input-text-color-disabled;
+      }
+    }
+  }
+}
+
+.range-input-status(@status) {
+  &.@{prefix}-is-@{status} {
+    border-color: @@borderColor;
+    @borderColor: "range-input-border-color-@{status}";
+
+    &:focus {
+      box-shadow: 0 0 0 2px @@boxShadowColor;
+      @boxShadowColor: "range-input-box-shadow-color-@{status}-focus";
+    }
+
+    &.@{prefix}-range-input--focused {
+      box-shadow: 0 0 0 2px @@boxShadowColor;
+      @boxShadowColor: "range-input-box-shadow-color-@{status}-focus";
+    }
+
+    & > .@{prefix}-range-input__extra {
+      color: @@fontColor;
+      @fontColor: "range-input-extra-color-@{status}";
+    }
+  }
+}
+
+.range-input-size(@size) {
+  & when(@size = l) {
+    &.@{prefix}-size-l {
+      & > .@{prefix}-range-input__inner {
+        height: @range-input-height-l;
+        line-height: @range-input-height-l;
+      }
+    }
+  }
+  & when not (@size = l) {
+    &.@{prefix}-size-@{size} {
+      width: @@width-size;
+      @width-size: "range-input-width-@{size}";
+    }
+  }
+}
+
+.range-input-fix-position(@position) {
+  &.@{prefix}-range-input--@{position} {
+    & > .@{prefix}-range-input__@{position}-icon {
+      & when (@position = prefix) {
+        padding-right: @spacer;
+      }
+      & when (@position = suffix) {
+        padding-left: @spacer;
+      }
+    }
+
+    & > .@{prefix}-range-input__@{position} {
+      z-index: 2;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      font-size: @font-size-base;
+    }
+
+    & > .@{prefix}-range-input__@{position}-icon {
+      font-size: @font-size-l;
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button，
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius等
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+
+// 如：@button-line-bg-color-hover
+// 如：@button-line-height-s
+
+@import "../../_variables.less";
+
+// 颜色
+@range-input-border-color-default: @border-level-2-color;
+@range-input-border-color-default-hover: @brand-color;
+@range-input-border-color-default-focus: @brand-color;
+@range-input-border-color-success: @success-color;
+@range-input-border-color-warning: @warning-color;
+@range-input-border-color-error: @error-color;
+
+@range-input-text-color-default: @text-color-primary;
+@range-input-text-color-disabled: @text-color-disabled;
+
+// input 输入框需要在浅色主题下有默认白色背景，而在暗色等其他主题下 transparent 适配背景色，因此不使用通用背景 token
+@range-input-bg-color-default: @bg-color-specialcomponent;
+@range-input-bg-color-disabled: @bg-color-component-disabled;
+
+@range-input-extra-color-default: @text-color-placeholder;
+@range-input-extra-color-success: @success-color;
+@range-input-extra-color-warning: @warning-color;
+@range-input-extra-color-error: @error-color;
+
+// 间距
+@range-input-padding-vertical-default: @spacer-s;
+@range-input-padding-horizontal-default: @spacer-s;
+@range-input-status-position-right: -@spacer-3;
+
+// 尺寸
+@range-input-height-s: (@spacer * 3);
+@range-input-height-default: (@spacer * 4);
+@range-input-height-l: (@spacer * 5);
+@range-input-inner-icon-font-size: inherit;
+
+// 图标
+@range-input-inner-prefix-icon-color: @text-color-placeholder;
+@range-input-inner-suffix-icon-color: @text-color-placeholder;
+
+// 字号
+@range-input-font-size-l: @font-size-l;
+@range-input-font-size: @font-size-base;
+@range-input-font-size-s: @font-size-s;
+@range-input-extra-font-size: @font-size-s;
+
+// 边框
+@range-input-border-radius: @border-radius;
+
+// box
+@range-input-box-shadow-color-default-focus: @brand-color-focus;
+@range-input-box-shadow-color-success-focus: @success-color-focus;
+@range-input-box-shadow-color-warning-focus: @warning-color-focus;
+@range-input-box-shadow-color-error-focus: @error-color-focus;
+@range-input-box-shadow-focus: 0 0 0 2px @range-input-box-shadow-color-default-focus;
+
+// 动画
+@range-input-inner-transition: all @anim-time-fn-easing @anim-duration-base;

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

@@ -19,7 +19,6 @@
 @table-fixed-footer-virtual-scroll-z-index: @table-fixed-footer-z-index + 1;
 @table-right-scrollbar-divider: @table-fixed-row-z-index + 1;
 @table-loading-z-index: @table-right-scrollbar-divider + 1;
-@table-resize-line-z-index: @table-right-scrollbar-divider + 1;
 
 @table-cell-padding: @table-td-padding-vertical-top @table-td-padding-horizontal
   @table-td-padding-vertical-bottom @table-td-padding-horizontal;
@@ -61,17 +60,6 @@
     pointer-events: none;
   }
 
-  .@{prefix}-table__resize-line {
-    display: none;
-    position: absolute;
-    left: 10px;
-    top: 0;
-    bottom: 0;
-    width: 0;
-    border-left: @border;
-    z-index: @table-resize-line-z-index;
-  }
-
   &__column-controller {
     padding: 16px 0;
   }