tdesign-react 0.25.1 → 0.25.2

package/CHANGELOG.md

@@ -5,6 +5,31 @@ toc: false
 spline: explain
 ---
 
+## 0.25.2 `2022-02-25`
+
+
+### Bug Fixes
+
+* Table: [#334](https://github.com/Tencent/tdesign-react/issues/334) 固定列定位计算问题 ([56b7a55](https://github.com/Tencent/tdesign-react/commit/56b7a55bb5686035adf733bfa06b8930f52ce242))
+* TagInput: 兼容 value defaultValue 都未设置场景 ([a317786](https://github.com/Tencent/tdesign-react/commit/a31778646b88ad0db089ac8ad483383283217c22))
+* Slider: 修复刻度计算问题，input number 样式问题 ([03aa1dd](https://github.com/Tencent/tdesign-react/commit/03aa1ddd0f1005267145652599c467ef39ba7bea))
+* Popup: 修复 trigger 元素宽高定位变化后位置不更新问题 ([933db7c](https://github.com/Tencent/tdesign-react/commit/933db7c065c3955139c4353f5ce6fe3f27d51587))
+* Cascader: fix cascader issue 371&&304 ([96536c0](https://github.com/Tencent/tdesign-react/commit/96536c00827bbff22d67167accc67d37838190c0))
+* Checkbox: 修复checkbox组件options为空数组时的问题 ([ce671c2](https://github.com/Tencent/tdesign-react/commit/ce671c2ba4cef467c7057e7e62448d1e65c166f8))
+* Layout: 支持内嵌动态节点 ([54a297f](https://github.com/Tencent/tdesign-react/commit/54a297ffa763d2cd31db111d111cb4b2c8cc433b))
+* Dialog: 多个弹窗关闭一个后出现滚动条 ([5cf75c1](https://github.com/Tencent/tdesign-react/commit/5cf75c11d03a83a298c01cb518864e8517bc8cab)), closes [#382](https://github.com/Tencent/tdesign-react/issues/382)
+
+
+### Features
+
+* SelectInput: 新增组件 SelectInpput 组件 ([d2d9cf8](https://github.com/Tencent/tdesign-react/commit/d2d9cf89d9e53762fd8e689b88b918358824fd0b))
+* Input: 支持 auto-width API ([cf24ca5](https://github.com/Tencent/tdesign-react/commit/cf24ca548cf07328a527d546e2ee4733062677bd))
+* Notification: 优化组件内部细节 ([9cd0a08](https://github.com/Tencent/tdesign-react/commit/9cd0a089b24457520e5ef8695e4f5ec5e6574923))
+* TagInput: 
+  * 支持 auto-width API ([cf24ca5](https://github.com/Tencent/tdesign-react/commit/cf24ca548cf07328a527d546e2ee4733062677bd))
+  * 支持 dragSort 功能 ([6872bd9](https://github.com/Tencent/tdesign-react/commit/6872bd9d8ee42e840a529480360646e68585cad4))
+
+
 ## 0.25.1 `2022-02-18`
 
 ### 🐞 Bug Fixes

package/dist/tdesign.css

@@ -2940,12 +2940,12 @@ template {
           transform: none;
 }
 .t-popup--animation-enter-active {
-  -webkit-transition: opacity 0.2s linear, visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: opacity 0.2s linear, visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
 }
 .t-popup--animation-leave-active {
-  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
 }
 .t-popup--animation-expand-enter-active[data-popper-placement^=top] {
   -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
@@ -3307,6 +3307,7 @@ template {
 }
 .t-button--variant-outline.t-button--theme-primary {
   color: var(--td-brand-color);
+  border-color: var(--td-brand-color);
 }
 .t-button--variant-outline.t-button--theme-primary:hover {
   color: var(--td-brand-color-hover);
@@ -3314,6 +3315,12 @@ template {
 .t-button--variant-outline.t-button--theme-primary.t-is-disabled {
   color: var(--td-brand-color-disabled);
 }
+.t-button--variant-outline.t-button--theme-primary:hover {
+  border-color: var(--td-brand-color-hover);
+}
+.t-button--variant-outline.t-button--theme-primary.t-is-disabled {
+  border-color: var(--td-brand-color-disabled);
+}
 .t-button--variant-outline.t-button--theme-success {
   color: var(--td-success-color);
   border-color: var(--td-success-color);
@@ -3948,7 +3955,6 @@ template {
   color: var(--td-text-color-disabled);
 }
 .t-input {
-  display: inline-block;
   position: relative;
   height: 32px;
   line-height: 32px;
@@ -3987,6 +3993,7 @@ template {
   border-color: var(--td-brand-color);
   -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
           box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+  z-index: 1;
 }
 .t-input :focus-visible {
   outline: none;
@@ -4313,7 +4320,6 @@ template {
   min-height: 24px;
   line-height: 20px;
   font-size: 12px;
-  display: inline-block;
 }
 .t-input__tips--normal {
   color: var(--td-text-color-placeholder);
@@ -4333,6 +4339,17 @@ template {
 .t-align-right > .t-input__inner {
   text-align: right;
 }
+.t-input__input-pre {
+  position: absolute;
+  visibility: hidden;
+  white-space: nowrap;
+}
+.t-input--auto-width {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 60px;
+}
 
 /* Alert */
 .t-alert {
@@ -4839,11 +4856,15 @@ template {
 .t-radio__input::after {
   content: "";
   position: absolute;
-  top: 3px;
-  left: 3px;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  margin-left: -8px;
+  -webkit-transform: scale(0.5);
+          transform: scale(0.5);
   opacity: 0;
-  width: 8px;
-  height: 8px;
   border-radius: 50%;
   background-color: var(--td-brand-color);
   -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
@@ -6755,6 +6776,19 @@ ul.t-select-option-group__header,
   border-left: 1px solid var(--td-component-border);
   pointer-events: none;
 }
+.t-table__top-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .t-table__content {
   position: relative;
   scrollbar-color: var(--td-scrollbar-color);
@@ -7132,6 +7166,24 @@ ul.t-select-option-group__header,
 .t-table.t-table__row--draggable tbody tr.v-leave-active {
   display: none;
 }
+.t-table__column-controller-desc {
+  margin-bottom: 24px;
+}
+.t-table__column-controller-block {
+  padding: 10px 24px;
+  border: 1px solid var(--td-gray-color-3);
+}
+.t-table__column-controller-block + .t-table__column-controller-block {
+  border-top: 0;
+  padding-top: 8px;
+  padding-bottom: 24px;
+}
+.t-table__column-controller-block .t-checkbox-group .t-checkbox {
+  margin-top: 16px;
+}
+.t-table__column-controller--fixed .t-checkbox {
+  width: 108px;
+}
 .t-table__cell--sortable {
   position: relative;
 }
@@ -7386,16 +7438,19 @@ ul.t-select-option-group__header,
 }
 .t-tag-input .t-tag {
   margin-right: 4px;
-  -webkit-animation: t-zoom-out 0.1s ease-in-out;
-          animation: t-zoom-out 0.1s ease-in-out;
+  -webkit-animation: t-fade-in 0.1s ease-in-out;
+          animation: t-fade-in 0.1s ease-in-out;
 }
 .t-tag-input.t-input {
   padding-left: 4px;
   overflow: hidden;
 }
-.t-tag-input .t-input__inner {
-  min-width: 80px;
-  width: auto;
+.t-tag-input.t-input.t-size-s {
+  padding-left: 2px;
+}
+.t-tag-input:hover .t-input__inner,
+.t-tag-input .t-input--focused .t-input__inner {
+  min-width: 60px;
 }
 .t-tag-input .t-tag-input__prefix,
 .t-tag-input .t-input__prefix:empty {
@@ -7412,10 +7467,10 @@ ul.t-select-option-group__header,
   display: inline;
   text-align: left;
 }
-.t-tag-input--break-line.t-input .t-tag-input__suffix-clear {
+.t-tag-input--break-line.t-input .t-input__suffix-icon {
   position: absolute;
   right: 8px;
-  bottom: 8px;
+  bottom: 0;
 }
 .t-tag-input__prefix {
   width: -webkit-max-content;
@@ -7424,31 +7479,47 @@ ul.t-select-option-group__header,
   display: inline-block;
   margin-right: 8px;
 }
-/** 光标动画 */
-@-webkit-keyframes t-tag-cursor-show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+
+.t-select-input,
+.t-select-input__wrap {
+  width: 100%;
+  display: inline-block;
 }
-@keyframes t-tag-cursor-show {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+/** 无边框模式 */
+.t-select-input--borderless {
+  /** 无边框模式的多选 */
+}
+.t-select-input--borderless.t-select-input,
+.t-select-input--borderless .t-input {
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  width: auto;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
 }
-.t-tag-input__cursor {
+.t-select-input--borderless.t-select-input:hover,
+.t-select-input--borderless .t-input:hover {
+  background-color: var(--td-bg-color-container-hover);
+  border-radius: 3px;
+}
+.t-select-input--borderless .t-input--focused {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty) input {
+  display: none;
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty) :hover input {
+  display: inline-block;
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input {
   display: inline-block;
-  border-left: 1px solid black;
-  height: 17px;
-  margin-right: 4px;
-  opacity: 1;
-  -webkit-animation: t-tag-cursor-show 0.8s ease infinite;
-          animation: t-tag-cursor-show 0.8s ease infinite;
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input {
+  background-color: var(--td-bg-color-container-hover);
 }
 
 .t-list {
@@ -8251,7 +8322,6 @@ a.t-menu__item:active {
 }
 .t-head-menu .t-menu__logo:not(:empty) {
   height: 100%;
-  font-size: 0;
   margin-right: 32px;
 }
 .t-head-menu .t-menu {
@@ -8640,12 +8710,15 @@ a.t-menu__item:active {
   margin-top: 4px;
 }
 .t-menu {
-  color: #fff;
+  color: var(--td-font-gray-2);
   font-size: 14px;
   list-style: none;
   padding: 0;
   margin: 0;
 }
+.t-menu--dark {
+  color: var(--td-font-white-2);
+}
 .t-menu__logo:not(:empty) {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -9589,6 +9662,9 @@ a.t-menu__item:active {
   display: flex;
   border-top: 0;
   white-space: nowrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .t-divider--with-text .t-divider__inner-text {
   padding: 0 1em;
@@ -9597,12 +9673,8 @@ a.t-menu__item:active {
 .t-divider--with-text::before,
 .t-divider--with-text::after {
   content: "";
-  position: relative;
-  top: 50%;
   width: 50%;
   border-top: 1px solid var(--td-border-level-1-color);
-  -webkit-transform: translateY(calc(50% - 0.5px));
-          transform: translateY(calc(50% - 0.5px));
 }
 .t-divider--with-text-left::before {
   width: 5%;
@@ -11474,7 +11546,7 @@ small.t-upload__tips-error {
   background-color: var(--td-bg-color-specialcomponent);
   font-family: PingFangSC-Regular;
   font-size: 14px;
-  color: inherit;
+  color: var(--td-text-color-primary);
   resize: vertical;
   outline: none;
   line-height: 22px;
@@ -12005,9 +12077,15 @@ small.t-upload__tips-error {
   color: var(--td-text-color-primary);
   top: 13px;
   line-height: 20px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
   margin-top: 4px;
   cursor: pointer;
 }
+.t-slider__mark-text:first-child {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+}
 .t-slider__mark-text:last-child {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);