tdesign-vue-next 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -5,15 +5,41 @@ toc: false
 docClass: timeline
 ---
 
+### 🌈 1.12.2 2022-04-19
+
+### 🐞 Bug Fixes
+
+- `Transfer` 修复设置 targetSort 后未按预期展示的问题 [@BigLiao](https://github.com/BigLiao) ([#599](https://github.com/Tencent/tdesign-vue-next/pull/599))
+- `Anchor`: 修复 click 事件参数不正确 [@pengYYYYY](https://github.com/pengYYYYY) ([#589](https://github.com/Tencent/tdesign-vue-next/pull/589))
+- 修复 slider 引起的产物报错 [@pengYYYYY](https://github.com/pengYYYYY)
+
+### 🌈 1.12.1 2022-04-17
+
+### 🚀 Features
+
+- `Card` 新增卡片组件 [@zhwachen](https://github.com/zhwachen) ([#530](https://github.com/Tencent/tdesign-vue-next/pull/530))
+- `Form` 优化 样式 & 默认渲染 extra 节点 [@HQ-Lin](https://github.com/HQ-Lin) ([#572](https://github.com/Tencent/tdesign-vue-next/pull/572))
+
+### 🐞 Bug Fixes
+
+- `Calendar`修复日历组件 cell 和 cellAppend 插槽在 build 版本不生效的问题 [@PsTiu](https://github.com/PsTiu) ([#564](https://github.com/Tencent/tdesign-vue-next/pull/564))
+- `Checkbox` 修复组件开发时，热更新导致的 provide & inject 失效 [@k1nz](https://github.com/k1nz) ([#561](https://github.com/Tencent/tdesign-vue-next/pull/561))
+- `Collapse` 异步获取 panel 列表优化 [@asbstty](https://github.com/asbstty) ([#571](https://github.com/Tencent/tdesign-vue-next/pull/571))
+- `Timepicker` 修复手动清空 value 的异常 [@uyarn](https://github.com/uyarn) ([#575](https://github.com/Tencent/tdesign-vue-next/pull/575))
+
+### 🚧 Others
+
+- `Transfer` 使用composition api 重构 [@btea](https://github.com/btea) ([#496](https://github.com/Tencent/tdesign-vue-next/pull/496))
+
 ## 0.12.0 `2022-04-08`
 
 ### ❗ Breaking Changes
 
 - 重构 Table 为 Composition API [@chaishi](https://github.com/chaishi) ([#468](https://github.com/Tencent/tdesign-vue-next/pull/468))
   - BaseTable HTML 结构变更，写过 CSS 样式覆盖的同学需注意更新样式。由之前的两个 table 分别渲染 thead 和 tbody，更为一个 table
-  - 行拖拽排序功能，使用方法有调整，从 sortOnRowDraggable 更为 dragSort='col'
+  - 行拖拽排序功能，使用方法有调整，从 sortOnRowDraggable 更为 dragSort='row'
   - 表头更为使用 th 标签，之前为 td，不符合语义
-  - 事件 row-db-click 更为row-dblclick ，onRowDbClick 更为rowDblclick
+  - 事件 row-db-click 更为row-dblclick ，onRowDbClick 更为 onRowDblclick
   - 事件 row-hover 更为 row-mouseover, onRowHover 更为 onRowMouseover
   - CSS 类名 t-table__row-first-full-row 更为 t-table__first-full-row，t-table__row-last-full-row 更为 t-table__last-full-row
 
@@ -50,7 +76,7 @@ docClass: timeline
 特此感谢 tdesign-vue-next 本次版本发布的代码贡献者：
 @94dreamer @LeeJim, @S-mohan, @Zack921, @asbstty, @chaishi, @delbertbeta, @k1nz, @pengYYYYY, @shyrii and @uyarn。
 
-## 0.11.1 `2022-04-02`
+## 0.11.2 `2022-04-02`
 
 ### 🚀  Features
 

package/dist/tdesign.css

@@ -5142,7 +5142,7 @@ a.t-menu__item:active {
 .t-default-menu__inner .t-menu__logo:not(:empty) {
   width: 100%;
   height: 64px;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--td-component-stroke);
 }
 .t-default-menu__inner .t-menu {
   padding: 16px 8px;
@@ -5173,7 +5173,7 @@ a.t-menu__item:active {
   top: 0;
   left: 0;
   text-align: left;
-  border-top: solid 1px #f0f0f0;
+  border-top: solid 1px var(--td-component-stroke);
 }
 .t-default-menu .t-menu__operations-icon {
   width: 32px;
@@ -5383,7 +5383,8 @@ a.t-menu__item:active {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.t-icon + .t-menu__content {
+.t-icon + .t-menu__content,
+.t-icon + .t-menu__item-link {
   margin-left: 8px;
 }
 .t-menu--dark.t-head-menu {
@@ -5473,6 +5474,8 @@ a.t-menu__item:active {
 .t-menu__popup-wrapper {
   padding: 8px;
   height: 100%;
+  list-style: none;
+  margin: 0;
 }
 .t-menu__popup .t-fake-arrow {
   margin-left: 8px;
@@ -5945,7 +5948,7 @@ a.t-menu__item:active {
 }
 .t-input__tips {
   height: auto;
-  min-height: 24px;
+  min-height: 20px;
   line-height: 20px;
   font-size: 12px;
 }
@@ -6804,6 +6807,9 @@ a .t-tag:active {
 .t-select .t-tag + .t-input__wrap {
   margin-left: 4px;
 }
+.t-select .t-tag + .t-input__wrap .t-input__inner {
+  width: 100%;
+}
 .t-select .t-select__input .t-input {
   height: auto;
   border: 0;
@@ -8345,11 +8351,8 @@ ul.t-select-option-group__header,
   margin: 0;
 }
 .t-form__item {
-  margin-bottom: 24px;
-}
-.t-form__item-with-help,
-.t-form__item-with-extra {
-  margin-bottom: 0;
+  min-height: 56px;
+  padding-bottom: 4px;
 }
 .t-form__label {
   float: left;
@@ -8397,7 +8400,7 @@ ul.t-select-option-group__header,
   min-height: 32px;
 }
 .t-form__controls .t-form__item {
-  margin: 0 24px 0 0;
+  margin-right: 24px;
 }
 .t-form__controls.t-is-success .t-form__status .t-icon {
   color: var(--td-success-color);
@@ -8455,14 +8458,6 @@ ul.t-select-option-group__header,
 .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
   color: var(--td-success-color);
 }
-.t-form__help {
-  height: auto;
-  min-height: 24px;
-  line-height: 20px;
-  font-size: 12px;
-  display: inline-block;
-  color: var(--td-text-color-placeholder);
-}
 .t-form__status {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8497,11 +8492,12 @@ ul.t-select-option-group__header,
   margin-right: 24px;
 }
 .t-input__extra {
+  width: 100%;
   height: auto;
-  min-height: 24px;
+  min-height: 20px;
   line-height: 20px;
   font-size: 12px;
-  display: inline-block;
+  color: var(--td-text-color-placeholder);
 }
 .t-is-warning .t-input__extra {
   color: var(--td-warning-color);
@@ -8611,6 +8607,9 @@ ul.t-select-option-group__header,
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .t-radio-group .t-radio {
   margin-right: 24px;
@@ -11484,6 +11483,120 @@ ul.t-select-option-group__header,
   color: var(--td-text-color-primary);
 }
 
+.t-card {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border-radius: 3px;
+  background-color: var(--td-bg-color-container);
+  color: var(--td-text-color-primary);
+  -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
+  transition: -webkit-box-shadow 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
+}
+.t-card--bordered {
+  border: 1px solid var(--td-component-border);
+}
+.t-card--shadow-hover:hover,
+.t-card--shadow {
+  -webkit-box-shadow: var(--td-shadow-1);
+          box-shadow: var(--td-shadow-1);
+}
+.t-card__cover {
+  display: flow-root;
+}
+.t-card__cover img {
+  display: flow-root;
+  width: 100%;
+  max-height: 100%;
+  border-radius: 3px 3px 0 0;
+}
+.t-card__body {
+  display: flow-root;
+  padding: 16px 24px;
+  line-height: 1.5;
+}
+.t-card__header {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: 16px 24px;
+  position: relative;
+  line-height: 1.5;
+}
+.t-card__header-wrapper {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-card__header + .t-card__body {
+  padding-top: 0;
+}
+.t-card__header + .t-card__cover img {
+  border-radius: 0;
+}
+.t-card__footer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: 16px 24px;
+}
+.t-card__footer-wrapper {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.t-size-s .t-card__body {
+  padding: 8px 12px;
+}
+.t-size-s .t-card__header {
+  padding: 8px 12px;
+}
+.t-size-s .t-card__footer {
+  padding: 8px 12px;
+}
+.t-card__avatar {
+  margin-right: 8px;
+}
+.t-card__title {
+  font-size: 16px;
+  font-family: PingFang SC, Microsoft YaHei, Arial Medium;
+  color: var(--td-text-color-primary);
+  margin-right: 8px;
+}
+.t-card__subtitle {
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.t-card__description {
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.t-card__actions {
+  color: var(--td-text-color-link);
+  float: right;
+}
+.t-card__title--bordered {
+  border-bottom: 1px solid var(--td-component-border);
+  padding-bottom: 16px;
+}
+.t-card__title--bordered + .t-card__body {
+  padding-top: 16px;
+}
+
 .t-comment {
   width: 100%;
   color: var(--td-text-color-primary);
@@ -11496,7 +11609,7 @@ ul.t-select-option-group__header,
 .t-comment__avatar {
   -ms-flex-negative: 0;
       flex-shrink: 0;
-  margin-right: 24px;
+  margin-right: 16px;
   cursor: pointer;
 }
 .t-comment__avatar-image {