fix(alert): close属性同步为closeBtn，close即将废弃

.vscode/settings.json

@@ -22,5 +22,11 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "cSpell.words": ["tdesign", "popconfirm", "swiper", "cascader"]
+  "cSpell.words": [
+    "cascader",
+    "popconfirm",
+    "swiper",
+    "tdesign",
+    "vnode"
+  ]
 }

src/alert/__tests__/index.test.jsx

@@ -23,10 +23,10 @@ describe('Alert', () => {
       expect(wrapper.find('.t-alert__description').text()).toBe('text');
     });
 
-    it(':close', () => {
+    it(':closeBtn', () => {
       const wrapper = mount({
         render() {
-          return <Alert close>text</Alert>;
+          return <Alert closeBtn>text</Alert>;
         },
       });
       const close = wrapper.find('.t-alert__close');
@@ -178,7 +178,7 @@ describe('Alert', () => {
       const wrapper = mount({
         render() {
           return (
-            <Alert close onClose={fn}>
+            <Alert closeBtn onClose={fn}>
               text
             </Alert>
           );

src/alert/alert.en-US.md

@@ -1,17 +1,19 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Alert Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-close | String / Boolean / Slot / Function | false | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+close | String / Boolean / Slot / Function | false | Deprecated, use closeBtn instead.Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+closeBtn | String / Boolean / Slot / Function | false | Close button. Value "true" show the close button. Value "False" hide close button. Value type string display as is. Use TNode to custom the close trigger.Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 maxLine | Number | 0 | \- | N
 message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 operation | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-theme | String | info | options：success/info/warning/error | N
+theme | String | info | options: success/info/warning/error | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClosed | Function |  | Typescript：`(context: { e: TransitionEvent }) => void`<br/> | N

src/alert/alert.md

@@ -1,11 +1,13 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Alert Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-close | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+close | String / Boolean / Slot / Function | false | 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+closeBtn | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N

src/alert/alert.tsx

@@ -7,6 +7,7 @@ import {
   CloseIcon as TdCloseIcon,
 } from 'tdesign-icons-vue';
 
+import log from '../_common/js/log/log';
 import { on, off, addClass } from '../utils/dom';
 import props from './props';
 import { renderTNodeJSX } from '../utils/render-tnode';
@@ -74,14 +75,23 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert'), getGlo
     renderClose(): VNode {
       const { CloseIcon } = this.useGlobalIcon({ CloseIcon: TdCloseIcon });
       let closeContent: ScopedSlotReturnValue = null;
-      if (this.close === true || this.close === '') {
+      // close属性变更为closeBtn过渡期使用，close废弃后可删除。（需兼容标签上直接写close和closeBtn的场景）
+      const isUsingClose = Object.prototype.hasOwnProperty.call(this.$vnode.componentOptions.propsData || {}, 'close')
+        || this.$scopedSlots.close;
+      const closeNode = isUsingClose ? this.close : this.closeBtn;
+      if (isUsingClose) {
+        log.warnOnce('TAlert', 'prop `close` is going to be deprecated, please use `closeBtn` instead.');
+      }
+      if (closeNode === true || closeNode === '') {
         closeContent = <CloseIcon />;
-      } else if (typeof this.close === 'string') {
-        closeContent = this.close;
-      } else if (typeof this.close === 'function') {
-        closeContent = this.close(this.$createElement);
+      } else if (typeof closeNode === 'string') {
+        closeContent = closeNode;
+      } else if (typeof closeNode === 'function') {
+        closeContent = closeNode(this.$createElement);
       } else {
-        closeContent = this.$scopedSlots.close && this.$scopedSlots.close(null)[0];
+        closeContent = isUsingClose ? this.$scopedSlots.close(null)[0] : renderTNodeJSX(this, 'close-btn');
+        // todo 等待renderTNodeJSX修复prop为false时使用slot
+        // closeContent = renderTNodeJSX(this, 'closeBtn');
       }
 
       return closeContent ? (

src/alert/props.ts

@@ -2,18 +2,22 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdAlertProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
+  /** 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
   close: {
     type: [String, Boolean, Function] as PropType<TdAlertProps['close']>,
     default: false,
   },
+  /** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */
+  closeBtn: {
+    type: [String, Boolean, Function] as PropType<TdAlertProps['closeBtn']>,
+    default: false,
+  },
   /** 内容，同 message */
   default: {
     type: [String, Function] as PropType<TdAlertProps['default']>,
@@ -40,6 +44,7 @@ export default {
     type: String as PropType<TdAlertProps['theme']>,
     default: 'info' as TdAlertProps['theme'],
     validator(val: TdAlertProps['theme']): boolean {
+      if (!val) return true;
       return ['success', 'info', 'warning', 'error'].includes(val);
     },
   },

src/alert/type.ts

@@ -2,17 +2,21 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TNode } from '../common';
 
 export interface TdAlertProps {
   /**
-   * 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
+   * 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
    * @default false
    */
   close?: string | boolean | TNode;
+  /**
+   * 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮
+   * @default false
+   */
+  closeBtn?: string | boolean | TNode;
   /**
    * 内容，同 message
    */
@@ -51,4 +55,4 @@ export interface TdAlertProps {
    * 告警提示框关闭动画结束后触发
    */
   onClosed?: (context: { e: TransitionEvent }) => void;
-};
+}