tdesign-vue-next 0.10.0 → 0.10.2

package/CHANGELOG.md

@@ -5,6 +5,53 @@ toc: false
 docClass: timeline
 ---
 
+## 0.10.2 `2022-03-18`
+
+
+### Bug Fixes
+
+* TimePicker: `close`、`open` 事件回调增加参数 ([pr #455](https://github.com/Tencent/tdesign-vue-next/pull/455)), ([@uyarn](https://github.com/uyarn))
+* DatePicker: 打开时间面板重置时间 ([pr #453](https://github.com/Tencent/tdesign-vue-next/pull/453)), ([@uyarn](https://github.com/uyarn))
+* Table: 修复 `table-cell` 点击告警。([pr #447](https://github.com/Tencent/tdesign-vue-next/pull/447)), ([@pengYYYYY](https://github.com/pengYYYYY))
+* Pagination: 修复分页组件 `pageSize` 默认值不正确导致的受控问题。([pr #444](https://github.com/Tencent/tdesign-vue-next/pull/444)), ([issue #440](https://github.com/Tencent/tdesign-vue-next/issues/440)), ([issue #456](https://github.com/Tencent/tdesign-vue-next/issues/456)), ([@pengYYYYY](https://github.com/pengYYYYY))
+* UseRipple: 修复 `useRipple` 的告警 ([pr #439](https://github.com/Tencent/tdesign-vue-next/pull/439)), ([issue #435](https://github.com/Tencent/tdesign-vue-next/issues/435)), ([@pengYYYYY](https://github.com/pengYYYYY))
+* Menu:
+  * 当菜单项超出时，正常展示 `Popup` ([pr #438](https://github.com/Tencent/tdesign-vue-next/pull/427)), ([issue #86](https://github.com/Tencent/tdesign-vue-next/issues/86)),([@LeeJim](https://github.com/LeeJim))
+  * 修复在没 `overflow` 时，仍出现滚动条的问题 ([pr #315](https://github.com/Tencent/tdesign-common/pull/315)), ([@LeeJim](https://github.com/LeeJim))
+* InputNumber: 修复 `decimal` 计算错误 ([pr #433](https://github.com/Tencent/tdesign-vue-next/pull/433)), ([@uyarn](https://github.com/uyarn))
+* Notification: 使用 `transition-group` 优化完善 `notification` 回收时的动画效果 ([pr #429](https://github.com/Tencent/tdesign-vue-next/pull/429)), ([@qunbotop](https://github.com/qunbotop))
+* Upload:([pr #427](https://github.com/Tencent/tdesign-vue-next/pull/427)), ([@pengYYYYY](https://github.com/pengYYYYY))
+  * 修复不可上传时的点击状态。
+  * 修复 `onCancelUpload` 事件无效
+* Input:
+  * 修复组件 `keypress` 事件未触发 ([pr #433](https://github.com/Tencent/tdesign-vue-next/pull/433)), ([@uyarn](https://github.com/uyarn))
+  * 修复在 `readonly` 模式下的聚焦样式([pr #437](https://github.com/Tencent/tdesign-vue-next/pull/437)), ([@pengYYYYY](https://github.com/pengYYYYY))
+* TagInput: ([pr #437](https://github.com/Tencent/tdesign-vue-next/pull/437)), ([@pengYYYYY](https://github.com/pengYYYYY))
+  * 修复 `breakline` 模式下的 `clearIcon` 样式重叠
+  * 修复 `autowidth` 模式下的 `padding` 不对称
+  * 修复超出滚动失效
+
+### Features
+
+* Switch: 使用 `compositionAPI` 重构 ([pr #434](https://github.com/Tencent/tdesign-vue-next/pull/434)), ([@zouhangwithsweet](https://github.com/zouhangwithsweet))
+* Notification: 使用 `compositionAPI` 重构 ([pr #429](https://github.com/Tencent/tdesign-vue-next/pull/429)), ([@qunbotop](https://github.com/qunbotop))
+* Textarea: 使用 `compositionAPI` 重构 ([pr #432](https://github.com/Tencent/tdesign-vue-next/pull/432)), ([@btea](https://github.com/btea))
+* Select: 支持单选 `valueDisplay` 插槽 ([pr #449](https://github.com/Tencent/tdesign-vue-next/pull/449)), ([@pengYYYYY](https://github.com/pengYYYYY))
+* Popup: 新增 `enter、leave` 事件，支持鼠标进入、移出的事件 ([pr #438](https://github.com/Tencent/tdesign-vue-next/pull/427)), ([@LeeJim](https://github.com/LeeJim))
+* Input: 新增 `autoWidth、align、tips` 的支持，统一 `InputNumber` 中的 `Input` 使用 `Input` 组件减少重复实现 ([pr #433](https://github.com/Tencent/tdesign-vue-next/pull/433)), ([@uyarn](https://github.com/uyarn))
+* Upload: ([pr #427](https://github.com/Tencent/tdesign-vue-next/pull/427)), ([@pengYYYYY](https://github.com/pengYYYYY))
+  * 使用 `compositionAPI` 重构 `upload` 组件。
+  * 增加合并上传
+  * 支持国际化配置
+
+## 0.10.1 `2022-03-14`
+
+
+### Bug Fixes
+
+* TreeSelect: 修复边框样式异常和右侧图标样式异常
+
+
 ## 0.10.0 `2022-03-11`
 
 ### BREAKING CHANGES

package/dist/tdesign.css

@@ -331,6 +331,14 @@ template {
 }
 /* stylelint-enable */
 
+:root {
+  --td-screen-xs: 320px;
+  --td-screen-sm: 768px;
+  --td-screen-md: 992px;
+  --td-screen-lg: 1200px;
+  --td-screen-xl: 1400px;
+  --td-screen-xxl: 1880px;
+}
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
   background: transparent;
@@ -4869,6 +4877,7 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  overflow: auto hidden;
 }
 .t-head-menu .t-menu__operations:not(:empty) {
   position: relative;
@@ -5135,6 +5144,7 @@ a.t-menu__item:active {
 .t-default-menu__inner .t-menu {
   padding: 16px 8px;
   position: relative;
+  overflow: hidden auto;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
@@ -5279,6 +5289,27 @@ a.t-menu__item:active {
   -webkit-transform: scaleY(-1);
           transform: scaleY(-1);
 }
+.t-menu::-webkit-scrollbar {
+  display: none;
+}
+.t-menu__spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__spacer--left::before {
+  left: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__spacer--top::before {
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item {
   position: relative;
   display: -webkit-box;
@@ -5287,8 +5318,8 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 64px;
-  line-height: 64px;
+  height: 40px;
+  line-height: 40px;
   text-align: center;
   color: var(--td-font-gray-2);
   cursor: pointer;
@@ -5302,6 +5333,27 @@ a.t-menu__item:active {
 .t-menu__item ::selection {
   background: transparent;
 }
+.t-menu__item-spacer {
+  overflow: unset;
+}
+.t-menu__item-spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__item-spacer--right::before {
+  right: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__item-spacer--bottom::before {
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item a {
   color: unset;
   text-decoration: none;
@@ -5420,6 +5472,9 @@ a.t-menu__item:active {
   padding: 8px;
   height: 100%;
 }
+.t-menu__popup .t-fake-arrow {
+  margin-left: 8px;
+}
 .t-menu__popup.t-is-vertical {
   max-height: unset;
   width: 0;
@@ -5430,6 +5485,19 @@ a.t-menu__item:active {
 .t-menu__popup.t-is-vertical.t-is-opened {
   width: var(--popup-width, 216px);
 }
+.t-menu__popup.t-is-vertical .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 4px 0;
+}
+.t-menu__popup.t-is-horizontal .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  white-space: nowrap;
+}
+.t-menu__popup.t-is-horizontal li + li {
+  margin-top: 4px;
+}
 .t-menu__popup.t-is-opened {
   max-height: var(--popup-max-height, 364px);
   opacity: 1;
@@ -5580,27 +5648,6 @@ a.t-menu__item:active {
 .t-input-number .t-input {
   color: var(--td-text-color-primary);
 }
-.t-input-number .t-input__inner {
-  text-align: center;
-}
-.t-input-number .t-input__inner.t-is-disabled {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-webkit-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-moz-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled:-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::placeholder {
-  color: var(--td-text-color-disabled);
-}
 .t-input-number__decrease,
 .t-input-number__increase {
   width: 32px;
@@ -5691,9 +5738,6 @@ a.t-menu__item:active {
   padding: 0;
   border-radius: 3px;
 }
-.t-input-number--normal .t-input__inner {
-  text-align: left;
-}
 .t-input-number--normal.t-is-disabled {
   cursor: no-drop;
   color: var(--td-text-color-disabled);
@@ -5782,9 +5826,6 @@ a.t-menu__item:active {
   width: 88px;
   padding: 0;
 }
-.t-input-number.t-is-controls-right.t-size-l {
-  width: 104px;
-}
 .t-input-number.t-is-controls-right:hover .t-input-number__decrease,
 .t-input-number.t-is-controls-right:hover .t-input-number__increase {
   opacity: 1;
@@ -5804,7 +5845,7 @@ a.t-menu__item:active {
 .t-input-number.t-is-controls-right .t-input-number__decrease,
 .t-input-number.t-is-controls-right .t-input-number__increase {
   width: 32px;
-  height: calc(50% - 2px);
+  height: 14px;
   border: 0;
   left: initial;
   top: initial;
@@ -5861,44 +5902,32 @@ a.t-menu__item:active {
 .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number.t-is-controls-right .t-input-number__decrease {
-  bottom: 1px;
-  border-bottom-right-radius: calc(3px - 1px);
-}
 .t-input-number.t-is-controls-right .t-input-number__increase {
   top: 1px;
   border-top-right-radius: calc(3px - 1px);
 }
-.t-align-left > .t-input__inner {
-  text-align: left;
+.t-input-number.t-is-controls-right .t-input-number__decrease {
+  top: 17px;
+  border-bottom-right-radius: calc(3px - 1px);
 }
-.t-align-center > .t-input__inner {
-  text-align: center;
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__increase,
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
+  height: 18px;
 }
-.t-align-right > .t-input__inner {
-  text-align: right;
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
+  top: 21px;
 }
-.t-input-number__decrease + .t-input__wrap {
+.t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap {
   margin-left: 4px;
 }
-.t-input-number__tips {
-  height: auto;
-  min-height: 24px;
-  line-height: 20px;
-  font-size: 12px;
-  margin-left: 4px;
-}
-.t-input-number__tips--normal {
-  color: var(--td-text-color-placeholder);
-}
-.t-input-number__tips--success {
-  color: var(--td-success-color);
+.t-input-number.t-input-number--auto-width {
+  width: auto;
 }
-.t-input-number__tips--warning {
-  color: var(--td-warning-color);
+.t-input-number.t-input-number--auto-width.t-is-controls-right {
+  min-width: 88px;
 }
-.t-input-number__tips--error {
-  color: var(--td-error-color);
+.t-input-number.t-input-number--auto-width:not(.t-input-number--column) .t-input-number__increase {
+  right: -4px;
 }
 
 .input-disabled.t-input.t-is-disabled {
@@ -6770,7 +6799,7 @@ a .t-tag:active {
       -ms-flex-align: center;
           align-items: center;
 }
-.t-select .t-select__input {
+.t-select .t-input__wrap {
   margin-left: 4px;
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -8389,6 +8418,26 @@ ul.t-select-option-group__header,
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
 }
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-success-color);
+}
 .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
@@ -8467,6 +8516,26 @@ ul.t-select-option-group__header,
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
 }
+.t-is-warning .t-form__controls-content .t-input .t-icon,
+.t-is-warning .t-form__controls-content .t-select .t-icon,
+.t-is-warning .t-form__controls-content .t-radio-button .t-icon,
+.t-is-warning .t-form__controls-content .t-cascader .t-icon,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-warning .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-warning-color);
+}
+.t-is-warning .t-form__controls-content .t-cascader .t-input,
+.t-is-warning .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-warning-color);
+}
 .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
@@ -8497,6 +8566,26 @@ ul.t-select-option-group__header,
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
 }
+.t-is-error .t-form__controls-content .t-input .t-icon,
+.t-is-error .t-form__controls-content .t-select .t-icon,
+.t-is-error .t-form__controls-content .t-radio-button .t-icon,
+.t-is-error .t-form__controls-content .t-cascader .t-icon,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-error .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-error-color);
+}
+.t-is-error .t-form__controls-content .t-cascader .t-input,
+.t-is-error .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-error-color);
+}
 .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
@@ -8610,7 +8699,7 @@ ul.t-select-option-group__header,
   height: 24px;
 }
 .t-radio-group.t-size-s .t-radio-button {
-  padding: 0px 8px;
+  padding: 0px 4px;
   font-size: 12px;
   line-height: 20px;
 }
@@ -9285,18 +9374,29 @@ ul.t-select-option-group__header,
 }
 .t-tag-input:hover .t-input__inner,
 .t-tag-input .t-input--focused .t-input__inner {
-  min-width: 60px;
+  min-width: 40px;
 }
 .t-tag-input .t-tag-input__prefix,
 .t-tag-input .t-input__prefix:empty {
   margin-left: 4px;
 }
+.t-tag-input.t-input--auto-width {
+  padding-right: 4px;
+}
+.t-tag-input.t-input--auto-width .t-tag:last-child {
+  margin-right: 0;
+}
+.t-tag-input.t-input--auto-width:hover .t-input__prefix:not(:empty) + .t-input__inner,
+.t-tag-input.t-input--auto-width .t-is-focused .t-input__prefix:not(:empty) + .t-input__inner {
+  margin-left: 4px;
+}
 .t-tag-input__suffix-clear {
   cursor: pointer;
 }
 .t-tag-input--break-line.t-input {
   display: block;
   height: auto;
+  padding-right: 24px;
 }
 .t-tag-input--break-line.t-input.t-input--prefix > .t-input__prefix {
   display: inline;
@@ -13334,6 +13434,84 @@ ul.t-select-option-group__header,
             transform: translate3d(0, 0, 0);
   }
 }
+.t-notification-list__show-transition--top-left {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.t-notification-list__show-transition--top-left .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--top-left .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--top-left .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--top-left .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--top-right {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+.t-notification-list__show-transition--top-right .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--top-right .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--top-right .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--top-right .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--bottom-left {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(-100%, 0, 0);
+          transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+.t-notification-list__show-transition--bottom-right {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-active,
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-active {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-from,
+.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-to {
+  -webkit-transform: translate3d(100%, 0, 0);
+          transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
 
 .t-popconfirm {
   border-radius: 3px;