diff --git a/.vscode/settings.json b/.vscode/settings.json index 9d569a482..a97fddc99 100644 --- a/.vscode/settings.json +++ b/.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" + ] } diff --git a/src/alert/__tests__/index.test.jsx b/src/alert/__tests__/index.test.jsx index 675fed62b..761eb14f3 100644 --- a/src/alert/__tests__/index.test.jsx +++ b/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 text; + return text; }, }); const close = wrapper.find('.t-alert__close'); @@ -178,7 +178,7 @@ describe('Alert', () => { const wrapper = mount({ render() { return ( - + text ); diff --git a/src/alert/alert.en-US.md b/src/alert/alert.en-US.md index 4f847c570..e8558ebb2 100644 --- a/src/alert/alert.en-US.md +++ b/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`
| N onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`
| N diff --git a/src/alert/alert.md b/src/alert/alert.md index 4f448c7e8..bd5424ce9 100644 --- a/src/alert/alert.md +++ b/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 diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx index a450c507d..cfa4de219 100644 --- a/src/alert/alert.tsx +++ b/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('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 = ; - } 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 ? ( diff --git a/src/alert/props.ts b/src/alert/props.ts index a66cdc8b0..742fa6faa 100644 --- a/src/alert/props.ts +++ b/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, default: false, }, + /** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */ + closeBtn: { + type: [String, Boolean, Function] as PropType, + default: false, + }, /** 内容，同 message */ default: { type: [String, Function] as PropType, @@ -40,6 +44,7 @@ export default { type: String as PropType, default: 'info' as TdAlertProps['theme'], validator(val: TdAlertProps['theme']): boolean { + if (!val) return true; return ['success', 'info', 'warning', 'error'].includes(val); }, }, diff --git a/src/alert/type.ts b/src/alert/type.ts index c69acaf8b..31fd258bc 100644 --- a/src/alert/type.ts +++ b/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; -}; +}