docs: rename DrawMarquee (#1493)

Tencent · Jul 11, 2024 · d31e7e0 · d31e7e0
1 parent 247a362
commit d31e7e0
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 92 deletions.
diff --git a/src/message/message.en-US.md b/src/message/message.en-US.md
@@ -1,19 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Message Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 closeBtn | String / Boolean / Slot / Function | undefined | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | \- | N
 icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 link | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+marquee | Boolean / Object | false | Typescript：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 offset | Array | - | Typescript：`Array<string \| number>` | N
-theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+theme | String | info | options: info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | uncontrolled property | N
 zIndex | Number | - | \- | N
@@ -29,8 +30,8 @@ close-btn-click | `(context: { e: MouseEvent })` | \-
 duration-end | \- | \-
 link-click | `(context: { e: MouseEvent })` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -42,4 +43,4 @@ Name | Default Value | Description
 --td-message-error-color | @error-color | - 
 --td-message-info-color | @brand-color | - 
 --td-message-success-color | @success-color | - 
---td-message-warning-color | @warning-color | - 
+--td-message-warning-color | @warning-color | -
diff --git a/src/message/message.md b/src/message/message.md
@@ -1,36 +1,37 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Message Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
 icon | Boolean / Slot / Function | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-link | String / Object / Slot / Function | - | 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+link | String / Object / Slot / Function | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
 theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
 zIndex | Number | - | 元素层级，样式默认为 5000 | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当关闭按钮存在时，用户点击关闭按钮触发 | N
 onDurationEnd | Function |  | TS 类型：`() => void`<br/>计时结束后触发 | N
-onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当link链接存在时，点击链接文本时触发 | N
+onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当`link`链接存在时，点击链接文本时触发 | N
 
 ### Message Events
 
 名称 | 参数 | 描述
 -- | -- | --
 close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
 duration-end | \- | 计时结束后触发
-link-click | `(context: { e: MouseEvent })` | 当link链接存在时，点击链接文本时触发
-
+link-click | `(context: { e: MouseEvent })` | 当`link`链接存在时，点击链接文本时触发
 
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -42,4 +43,4 @@ link-click | `(context: { e: MouseEvent })` | 当link链接存在时，点击链
 --td-message-error-color | @error-color | - 
 --td-message-info-color | @brand-color | - 
 --td-message-success-color | @success-color | - 
---td-message-warning-color | @warning-color | - 
+--td-message-warning-color | @warning-color | -
diff --git a/src/message/message.tsx b/src/message/message.tsx
@@ -5,14 +5,13 @@ import isString from 'lodash/isString';
 
 import Link from '../link';
 import props from './props';
-import { DrawMarquee, TdMessageProps } from './type';
+import { MessageMarquee, TdMessageProps } from './type';
 import config from '../config';
 import { useVModel } from '../shared';
 import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-message`;
 const iconDefault = {
   info: h(InfoCircleFilledIcon),
   success: h(CheckCircleFilledIcon),
@@ -22,10 +21,8 @@ const iconDefault = {
 const closeBtnDefault = h(CloseIcon);
 
 export default defineComponent({
-  name,
+  name: `${prefix}-message`,
   props,
-  emits: ['durationEnd', 'closeBtnClick', 'update:value'],
-
   setup(props, context) {
     const componentName = usePrefixClass('message');
     const renderTNodeJSX = useTNodeJSX();
@@ -107,7 +104,7 @@ export default defineComponent({
     const textDOM = ref();
 
     const handleScrolling = () => {
-      if (!props?.marquee || (isObject(props?.marquee) && (props?.marquee as DrawMarquee))?.loop === 0) {
+      if (!props?.marquee || (isObject(props?.marquee) && (props?.marquee as MessageMarquee))?.loop === 0) {
         return;
       }
 
@@ -117,23 +114,23 @@ export default defineComponent({
         marquee: true,
         // 负数统一当作循环播放
         loop: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.loop == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.loop == null
             ? loop
-            : (props.marquee as DrawMarquee)?.loop,
+            : (props.marquee as MessageMarquee)?.loop,
           -1,
         ),
         // 速度必须为正数
         speed: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.speed == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.speed == null
             ? speed
-            : (props.marquee as DrawMarquee)?.speed,
+            : (props.marquee as MessageMarquee)?.speed,
           1,
         ),
         // 延迟不可为负数
         delay: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.delay == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.delay == null
             ? delay
-            : (props.marquee as DrawMarquee)?.delay,
+            : (props.marquee as MessageMarquee)?.delay,
           0,
         ),
       };
@@ -179,8 +176,8 @@ export default defineComponent({
       props.onLinkClick?.({ e });
     };
 
-    const onCloseBtnClick = () => {
-      props.onCloseBtnClick?.();
+    const onCloseBtnClick = (e: MouseEvent) => {
+      props.onCloseBtnClick?.({ e });
       setVisible(false);
     };
 

diff --git a/src/message/props.ts b/src/message/props.ts
@@ -36,7 +36,7 @@ export default {
     type: [Boolean, Function] as PropType<TdMessageProps['icon']>,
     default: true,
   },
-  /** 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link */
+  /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` */
   link: {
     type: [String, Object, Function] as PropType<TdMessageProps['link']>,
   },
@@ -77,6 +77,6 @@ export default {
   onCloseBtnClick: Function as PropType<TdMessageProps['onCloseBtnClick']>,
   /** 计时结束后触发 */
   onDurationEnd: Function as PropType<TdMessageProps['onDurationEnd']>,
-  /** 当link链接存在时，点击链接文本时触发 */
+  /** 当`link`链接存在时，点击链接文本时触发 */
   onLinkClick: Function as PropType<TdMessageProps['onLinkClick']>,
 };
diff --git a/src/message/type.ts b/src/message/type.ts
@@ -31,14 +31,14 @@ export interface TdMessageProps {
    */
   icon?: boolean | TNode;
   /**
-   * 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link
+   * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`
    */
   link?: string | object | TNode;
   /**
    * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
    * @default false
    */
-  marquee?: boolean | DrawMarquee;
+  marquee?: boolean | MessageMarquee;
   /**
    * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']
    */
@@ -76,14 +76,14 @@ export interface TdMessageProps {
    */
   onDurationEnd?: () => void;
   /**
-   * 当link链接存在时，点击链接文本时触发
+   * 当`link`链接存在时，点击链接文本时触发
    */
   onLinkClick?: (context: { e: MouseEvent }) => void;
 }
 
 export type MessageAlignType = 'left' | 'center';
 
-export interface DrawMarquee {
+export interface MessageMarquee {
   speed?: number;
   loop?: number;
   delay?: number;

diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md
@@ -1,17 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### NoticeBar Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 content | String / Array / Slot / Function | - | Typescript：`string \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-direction | String | horizontal | options：horizontal/vertical | N
-marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
+direction | String | horizontal | options: horizontal/vertical | N
+marquee | Boolean / Object | false | Typescript：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
 operation | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-prefixIcon | Boolean / Slot / Function | true | Typescript：`Boolean \ | TNode `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+prefixIcon | Boolean / Slot / Function | true | Typescript：`Boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-theme | String | info | options：info/success/warning/error | N
+theme | String | info | options: info/success/warning/error | N
 visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | uncontrolled property | N
 onClick | Function |  | Typescript：`(trigger: NoticeBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N
@@ -22,8 +23,8 @@ name | params | description
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -37,4 +38,4 @@ Name | Default Value | Description
 --td-notice-bar-success-color | @success-color | - 
 --td-notice-bar-suffix-icon-color | @font-gray-3 | - 
 --td-notice-bar-warning-bg-color | @warning-color-1 | - 
---td-notice-bar-warning-color | @warning-color | - 
+--td-notice-bar-warning-color | @warning-color | -
diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md
@@ -1,15 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### NoticeBar Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 content | String / Array / Slot / Function | - | 文本内容。TS 类型：`string \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
 operation | String / Slot / Function | - | 右侧额外信息。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-prefixIcon | Boolean / Slot / Function | true | 用于自定义g公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`Boolean \ | TNode `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+prefixIcon | Boolean / Slot / Function | true | 用于自定义公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`Boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | 后缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
 visible | Boolean | false | 显示/隐藏。支持语法糖 `v-model` 或 `v-model:visible` | N
@@ -22,8 +23,8 @@ onClick | Function |  | TS 类型：`(trigger: NoticeBarTrigger) => void`<br/>
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -37,4 +38,4 @@ click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](http
 --td-notice-bar-success-color | @success-color | - 
 --td-notice-bar-suffix-icon-color | @font-gray-3 | - 
 --td-notice-bar-warning-bg-color | @warning-color-1 | - 
---td-notice-bar-warning-color | @warning-color | - 
+--td-notice-bar-warning-color | @warning-color | -