tdesign-react 0.34.5-alpha.4 → 0.35.0

package/CHANGELOG.md

@@ -5,6 +5,37 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.35.0 `2022-06-10` 
+
+### ❗ Breaking Changes
+- `DatePicker`:  重构 `DatePickerPanel`、`DateRangePickerPanel` 逻辑，API 重新规划 @HQ-Lin ([#858](https://github.com/Tencent/tdesign-react/pull/858))
+- `Dialog`: 移除 `transform` 动画方案，dom 结构有所调整 @huoyuhao ([#776](https://github.com/Tencent/tdesign-react/pull/776))
+- `InputAdornment`: 移除 `Addon` 组件，替换为 `InputAdornment`，用法保持一致只需更改组件名即可  @HQ-Lin ([#849](https://github.com/Tencent/tdesign-react/pull/849))
+
+### 🚀 Features
+- `table`: 树形结构，支持默认展开全部，以及自由控制展开全部或收起全部 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 树形结构，支持空数据插入新节点、当前数据之前插入新节点、当前数据之后插入新节点、获取树形结构等方法 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 树形结构，支持自定义树形结构展开收起图标 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 树形结构，支持拖拽调整同层级顺序 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 拖拽排序事件，新增参数 data 和 newData，分别表示变更前后的数据 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 过滤功能，Input 输入框支持 Enter 键触发确认搜索 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 排序功能，支持隐藏排序图标文本提示 `hideSortTips` @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `table`: 新增可编辑单元格功能 @chaishi ([#842](https://github.com/Tencent/tdesign-react/pull/842))
+- `textarea`: 新增`allowInputOvermax` 支持超出字数限制可以输入 @carolin913 ([#838](https://github.com/Tencent/tdesign-react/pull/838))
+- `DatePicker`: 优化 `DatePicker` 组件逻辑 @HQ-Lin ([#858](https://github.com/Tencent/tdesign-react/pull/858))
+- `Dialog`: 优化 `transform` 定位问题导致子节点的 fixed 属性定位失效 @huoyuhao ([#776](https://github.com/Tencent/tdesign-react/pull/776))
+- `CollapsePanel`: 箭头样式优化 @samhou1988 ([#851](https://github.com/Tencent/tdesign-react/pull/851))
+- `InputAdornment`: 新增 `InputAdornment` 组件 @HQ-Lin ([#849](https://github.com/Tencent/tdesign-react/pull/849))
+
+### 🐞 Bug Fixes
+- `tab`: tabnav无法自适应宽度 fix#846 @carolin913 ([#838](https://github.com/Tencent/tdesign-react/pull/838))
+- `table`: 合并单元格支持动态数据，[issue#973](https://github.com/Tencent/tdesign-vue/issues/973) @chaishi ([#866](https://github.com/Tencent/tdesign-react/pull/866))
+- `MenuItem`: 修复 `MenuItem` 在 active 状态点击失效问题 @leosxie ([#848](https://github.com/Tencent/tdesign-react/pull/848))
+- `InputNumber`: 修复减号按钮触发两次点击事件问题 @moecasts ([#857](https://github.com/Tencent/tdesign-react/pull/857))
+- `Drawer`: 修复 `cancelBtn` 传入字符串无效 @HQ-Lin ([#860](https://github.com/Tencent/tdesign-react/pull/860))
+- `Dialog`: 优化 `transform` 定位问题导致子节点的 fixed 属性定位失效 @huoyuhao ([#776](https://github.com/Tencent/tdesign-react/pull/776))
+
+
 ## 🌈 0.34.4 `2022-06-02` 
 ### 🚀 Features
 - `Skeleton`: 延时关闭功能 @ontheroad1992 ([#808](https://github.com/Tencent/tdesign-react/pull/808))

package/dist/tdesign.css

@@ -4316,51 +4316,6 @@ template {
 .t-input-group .t-select:active {
   z-index: 1;
 }
-.t-addon {
-  line-height: normal;
-  display: inline-table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-.t-addon .t-addon__prepend {
-  background-color: var(--td-bg-color-secondarycontainer-hover);
-  color: var(--td-text-color-primary);
-  vertical-align: middle;
-  display: table-cell;
-  position: relative;
-  border: 1px solid var(--td-border-level-2-color);
-  padding: 0 12px;
-  width: 1px;
-  white-space: nowrap;
-  border-right: 0;
-  border-radius: 3px 0 0 3px;
-}
-.t-addon .t-addon__append {
-  background-color: var(--td-bg-color-secondarycontainer-hover);
-  color: var(--td-text-color-primary);
-  vertical-align: middle;
-  display: table-cell;
-  position: relative;
-  border: 1px solid var(--td-border-level-2-color);
-  padding: 0 12px;
-  width: 1px;
-  white-space: nowrap;
-  border-left: 0;
-  border-radius: 0 3px 3px 0;
-}
-.t-addon > .t-input__wrap {
-  width: 100%;
-}
-.t-addon--prepend .t-input {
-  border-radius: 0 3px 3px 0;
-}
-.t-addon--append .t-input {
-  border-radius: 3px 0 0 3px;
-}
-.t-addon--prepend.t-addon--append .t-input {
-  border-radius: 0;
-}
 .t-input__wrap {
   width: 100%;
 }
@@ -4400,6 +4355,78 @@ template {
   min-width: 60px;
 }
 
+.t-input-adornment {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-input-adornment .t-input-adornment__prepend {
+  background-color: var(--td-bg-color-secondarycontainer-hover);
+  color: var(--td-text-color-primary);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border: 1px solid var(--td-border-level-2-color);
+  padding: 0 12px;
+  border-right: 0;
+  border-radius: 3px 0 0 3px;
+}
+.t-input-adornment .t-input-adornment__prepend .t-input__wrap,
+.t-input-adornment .t-input-adornment__prepend .t-select__wrap {
+  height: 100%;
+}
+.t-input-adornment .t-input-adornment__prepend .t-input,
+.t-input-adornment .t-input-adornment__prepend .t-select {
+  height: 100%;
+  line-height: 100%;
+  background-color: transparent;
+}
+.t-input-adornment .t-input-adornment__append {
+  background-color: var(--td-bg-color-secondarycontainer-hover);
+  color: var(--td-text-color-primary);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border: 1px solid var(--td-border-level-2-color);
+  padding: 0 12px;
+  border-left: 0;
+  border-radius: 0 3px 3px 0;
+}
+.t-input-adornment .t-input-adornment__append .t-input__wrap,
+.t-input-adornment .t-input-adornment__append .t-select__wrap {
+  height: 100%;
+}
+.t-input-adornment .t-input-adornment__append .t-input,
+.t-input-adornment .t-input-adornment__append .t-select {
+  height: 100%;
+  line-height: 100%;
+  background-color: transparent;
+}
+.t-input-adornment--prepend .t-input,
+.t-input-adornment--prepend .t-textarea__inner {
+  border-radius: 0 3px 3px 0;
+}
+.t-input-adornment--append .t-input,
+.t-input-adornment--append .t-textarea__inner {
+  border-radius: 3px 0 0 3px;
+}
+.t-input-adornment--prepend.t-input-adornment--append .t-input,
+.t-input-adornment--prepend.t-input-adornment--append .t-textarea__inner {
+  border-radius: 0;
+}
+
 /* Alert */
 .t-alert {
   display: -webkit-box;
@@ -5197,8 +5224,8 @@ template {
 .t-input-number.t-input-number--auto-width:not(.t-input-number--column) .t-input-number__increase {
   right: -4px;
 }
-.t-input-number__decrease,
-.t-input-number__increase {
+.t-input-number .t-input-number__decrease,
+.t-input-number .t-input-number__increase {
   width: 32px;
   height: 32px;
   position: absolute;
@@ -5222,65 +5249,65 @@ template {
   -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
   transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
 }
-.t-input-number__decrease:hover,
-.t-input-number__increase:hover {
+.t-input-number .t-input-number__decrease:hover,
+.t-input-number .t-input-number__increase:hover {
   color: var(--td-brand-color);
   border-color: var(--td-brand-color);
 }
-.t-input-number__decrease:hover .t-icon,
-.t-input-number__increase:hover .t-icon {
+.t-input-number .t-input-number__decrease:hover .t-icon,
+.t-input-number .t-input-number__increase:hover .t-icon {
   color: var(--td-brand-color);
 }
-.t-input-number__decrease:active,
-.t-input-number__increase:active {
+.t-input-number .t-input-number__decrease:active,
+.t-input-number .t-input-number__increase:active {
   color: var(--td-brand-color);
   background-color: var(--td-bg-color-container-hover);
 }
-.t-input-number__decrease .t-icon,
-.t-input-number__increase .t-icon {
+.t-input-number .t-input-number__decrease .t-icon,
+.t-input-number .t-input-number__increase .t-icon {
   position: relative;
   z-index: 1;
   font-size: 16px;
   color: var(--td-text-color-secondary);
 }
-.t-input-number__decrease.t-is-disabled,
-.t-input-number__increase.t-is-disabled {
+.t-input-number .t-input-number__decrease.t-is-disabled,
+.t-input-number .t-input-number__increase.t-is-disabled {
   color: var(--td-text-color-disabled);
   cursor: no-drop;
   background-color: var(--td-bg-color-component-disabled);
 }
-.t-input-number__decrease.t-is-disabled .t-icon,
-.t-input-number__increase.t-is-disabled .t-icon {
+.t-input-number .t-input-number__decrease.t-is-disabled .t-icon,
+.t-input-number .t-input-number__increase.t-is-disabled .t-icon {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled:hover,
-.t-input-number__increase.t-is-disabled:hover {
+.t-input-number .t-input-number__decrease.t-is-disabled:hover,
+.t-input-number .t-input-number__increase.t-is-disabled:hover {
   border-color: var(--td-border-level-2-color);
 }
-.t-input-number__decrease.t-is-disabled:hover .t-icon,
-.t-input-number__increase.t-is-disabled:hover .t-icon {
+.t-input-number .t-input-number__decrease.t-is-disabled:hover .t-icon,
+.t-input-number .t-input-number__increase.t-is-disabled:hover .t-icon {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number__increase.t-is-disabled::-webkit-input-placeholder {
+.t-input-number .t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-webkit-input-placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number__increase.t-is-disabled::-moz-placeholder {
+.t-input-number .t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-moz-placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number__increase.t-is-disabled:-ms-input-placeholder {
+.t-input-number .t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled:-ms-input-placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number__increase.t-is-disabled::-ms-input-placeholder {
+.t-input-number .t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-ms-input-placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease.t-is-disabled::placeholder,
-.t-input-number__increase.t-is-disabled::placeholder {
+.t-input-number .t-input-number__decrease.t-is-disabled::placeholder,
+.t-input-number .t-input-number__increase.t-is-disabled::placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number__decrease {
+.t-input-number .t-input-number__decrease {
   left: 0;
 }
-.t-input-number__increase {
+.t-input-number .t-input-number__increase {
   right: -8px;
 }
 .t-input-number.t-is-disabled .t-input {
@@ -7831,6 +7858,12 @@ ul.t-select-option-group__header,
 .t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-button .t-button + .t-button {
   margin-left: 16px;
 }
+.t-table__filter-pop-content-inner {
+  padding: 16px;
+}
+.t-table__filter-pop-content-inner .t-input__wrap {
+  width: 200px;
+}
 .t-table__sort-icon--active {
   color: var(--td-brand-color);
 }
@@ -9956,8 +9989,6 @@ a.t-menu__item:active {
   background-color: var(--td-bg-color-container);
   position: relative;
   border-radius: 3px;
-  max-height: 100%;
-  overflow: auto;
 }
 .t-dialog .t-icon.t-is-info {
   color: var(--td-brand-color);
@@ -10023,9 +10054,6 @@ a.t-menu__item:active {
 .t-dialog--default {
   padding: 28px 32px 32px 32px;
 }
-.t-dialog--default .t-dialog__body {
-  max-height: calc(100% - (50px + 32px * 2));
-}
 .t-dialog--primary {
   padding: 32px;
 }
@@ -10062,7 +10090,7 @@ a.t-menu__item:active {
   background: var(--td-bg-color-container-active);
 }
 .t-dialog__ctx {
-  pointer-events: none;
+  pointer-events: auto;
   outline: none;
 }
 .t-dialog__ctx.t-dialog__ctx--fixed {
@@ -10089,7 +10117,7 @@ a.t-menu__item:active {
   display: none;
 }
 .t-dialog__ctx .t-dialog__mask {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -10098,6 +10126,38 @@ a.t-menu__item:active {
   background: var(--td-mask-active);
   pointer-events: auto;
 }
+.t-dialog__ctx .t-dialog__wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: auto;
+}
+.t-dialog__ctx .t-dialog__position {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  padding: 48px 0;
+}
+.t-dialog__ctx .t-dialog__position.t-dialog--top {
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  padding-top: 20%;
+}
+.t-dialog__ctx .t-dialog__position.t-dialog--center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .t-dialog__ctx .t-is-hidden {
   background: none;
 }
@@ -10113,22 +10173,6 @@ a.t-menu__item:active {
 .t-dialog__ctx .t-dialog.t-dialog--absolute {
   position: absolute;
 }
-.t-dialog__ctx .t-dialog--top {
-  top: 20%;
-  left: 50%;
-  -webkit-transform-origin: -25% 25%;
-          transform-origin: -25% 25%;
-  -webkit-transform: translate(-50%, 0);
-          transform: translate(-50%, 0);
-}
-.t-dialog__ctx .t-dialog--center {
-  top: 50%;
-  left: 50%;
-  -webkit-transform-origin: -25% -25%;
-          transform-origin: -25% -25%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
 
 .t-tree {
   line-height: 42px;
@@ -13315,10 +13359,6 @@ a.t-menu__item:active {
   padding: 0;
   min-width: 280px;
 }
-.t-date-picker__panel-container .t-select__dropdown,
-.t-date-range-picker__panel-container .t-select__dropdown {
-  max-height: 160px;
-}
 .t-date-picker__panel,
 .t-date-range-picker__panel {
   display: -webkit-box;
@@ -13336,6 +13376,10 @@ a.t-menu__item:active {
       -ms-flex-direction: row;
           flex-direction: row;
 }
+.t-date-picker__panel .t-select__dropdown,
+.t-date-range-picker__panel .t-select__dropdown {
+  max-height: 160px;
+}
 .t-date-picker__panel .t-time-picker__panel,
 .t-date-range-picker__panel .t-time-picker__panel {
   width: 216px;