diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx index e0dc3f4fb4..cb148c0144 100644 --- a/packages/components/alert/__tests__/alert.test.tsx +++ b/packages/components/alert/__tests__/alert.test.tsx @@ -17,8 +17,8 @@ describe('Alert', () => { expect(wrapper.find('.t-alert__description').text()).toBe('text'); }); - it(':close', () => { - const wrapper = mount(() => text); + it(':closeBtn', () => { + const wrapper = mount(() => text); const close = wrapper.find('.t-alert__close'); expect(close.exists()).toBeTruthy(); expect(wrapper.findComponent(CloseIcon).exists()).toBeTruthy(); @@ -116,7 +116,7 @@ describe('Alert', () => { it(':onClose', async () => { const fn = vi.fn(); const wrapper = mount(() => ( - + text )); diff --git a/packages/components/alert/alert.en-US.md b/packages/components/alert/alert.en-US.md index 9691f03178..ca23fca9e5 100644 --- a/packages/components/alert/alert.en-US.md +++ b/packages/components/alert/alert.en-US.md @@ -6,13 +6,14 @@ 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-next/blob/develop/packages/components/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-next/blob/develop/packages/components/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-next/blob/develop/packages/components/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | \- | N message | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N operation | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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-next/blob/develop/packages/components/common.ts) | N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`
| N diff --git a/packages/components/alert/alert.md b/packages/components/alert/alert.md index 961a10e8c6..3b6b4ba1dd 100644 --- a/packages/components/alert/alert.md +++ b/packages/components/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-next/blob/develop/packages/components/common.ts) | N +close | String / Boolean / Slot / Function | false | 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +closeBtn | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N diff --git a/packages/components/alert/alert.tsx b/packages/components/alert/alert.tsx index eb3fd783d3..4752514872 100644 --- a/packages/components/alert/alert.tsx +++ b/packages/components/alert/alert.tsx @@ -12,6 +12,7 @@ import { on, off, addClass } from '@tdesign/shared-utils'; import props from './props'; import { SlotReturnValue } from '../common'; import { useIcon, useConfig, useTNodeJSX, useGlobalIcon, usePrefixClass } from '@tdesign/shared-hooks'; +import log from '@tdesign/common-js/log/log'; export default defineComponent({ name: 'TAlert', @@ -54,7 +55,13 @@ export default defineComponent({ }; const renderClose = () => { - const { close } = props; + // close属性变更为closeBtn过渡期使用，close废弃后可删除。（需兼容标签上直接写close和closeBtn的场景） + const { closeBtn } = props; + const isUsingClose = props.close || typeof props.close === 'string'; + const close = isUsingClose ? props.close : closeBtn; + if (isUsingClose) { + log.warnOnce('TAlert', 'prop `close` is going to be deprecated, please use `closeBtn` instead.'); + } let closeContent = null; if (close === true || close === '') { closeContent = ; diff --git a/packages/components/alert/props.ts b/packages/components/alert/props.ts index 608af8c6d8..6988c824ed 100644 --- a/packages/components/alert/props.ts +++ b/packages/components/alert/props.ts @@ -2,17 +2,21 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 19:17:30 * */ 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, + default: false as TdAlertProps['close'], + }, + /** 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮 */ + closeBtn: { + type: [String, Boolean, Function] as PropType, + default: false as TdAlertProps['closeBtn'], }, /** 内容，同 message */ default: { @@ -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/packages/components/alert/type.ts b/packages/components/alert/type.ts index efedee6a9e..31fd258bc2 100644 --- a/packages/components/alert/type.ts +++ b/packages/components/alert/type.ts @@ -2,17 +2,21 @@ /** * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 19:17:30 * */ 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 */ diff --git a/packages/tdesign-vue-next/.changelog/pr-5621.md b/packages/tdesign-vue-next/.changelog/pr-5621.md new file mode 100644 index 0000000000..4ee5e2dd26 --- /dev/null +++ b/packages/tdesign-vue-next/.changelog/pr-5621.md @@ -0,0 +1,6 @@ +--- +pr_number: 5621 +contributor: ngyyuusora +--- + +- feat(Alert): 新增 `closeBtn` API，与其他组件保持一致，`close` 将在未来版本废弃，请尽快调整为`closeBtn` 使用 @ngyyuusora ([#5621](https://github.com/Tencent/tdesign-vue-next/pull/5621))