Merge pull request #71 from Dengzygx/feat/update-type

feat: 更新多个组件的type.ts文件
Tencent · Apr 15, 2022 · b7be2d7 · b7be2d7
2 parents bf080f6 + 57d5a04
commit b7be2d7
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 156 deletions.
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
@@ -7,14 +7,14 @@
 -- | -- | -- | -- | --
 cancelText | String | 取消 | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
-items | Array | - | 必需。菜单项。TS 类型：`Array<string | ActionSheetItem>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/action-sheet/type.ts) | Y
+items | Array | - | 必需。菜单项。TS 类型：`Array<string | ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
 showCancel | Boolean | true | 是否显示取消按钮 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
-visible | Boolean | false | 必需。显示与隐藏。支持语法糖 | Y
+visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
 defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
-onCancel | Function |  | 点击取消按钮时触发。`(context: { e: MouseEvent }) => {}` | N
-onClose | Function |  | 关闭时触发。`(context: { e: MouseEvent }) => {}` | N
-onSelected | Function |  | 选择菜单项时触发。`(selected: ActionSheetItem | String, index: number) => {}` | N
+onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
+onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>关闭时触发 | N
+onSelected | Function |  | TS 类型：`(selected: ActionSheetItem | String, index: number) => void`<br/>选择菜单项时触发 | N
 
 ### ActionSheet Events
 

diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-20 18:41:35
  * */
 
 import { TdActionSheetProps } from './type';
@@ -34,11 +33,19 @@ export default {
     type: String as PropType<TdActionSheetProps['theme']>,
     default: 'list' as TdActionSheetProps['theme'],
     validator(val: TdActionSheetProps['theme']): boolean {
-      return ['list', 'grid'].includes(val!);
+      if (!val) return true;
+      return ['list', 'grid'].includes(val);
     },
   },
   /** 显示与隐藏 */
-  visible: Boolean,
+  visible: {
+    type: Boolean,
+    default: undefined,
+  },
+  modelValue: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 显示与隐藏，非受控属性 */
   defaultVisible: Boolean,
   /** 点击取消按钮时触发 */

diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
@@ -2,20 +2,19 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-20 18:41:35
  * */
 
 export interface TdActionSheetProps {
   /**
    * 设置取消按钮的文本
    * @default 取消
    */
-  cancelText: string;
+  cancelText?: string;
   /**
    * 设置每页展示菜单的数量，仅当 type=grid 时有效
    * @default 8
    */
-  count: number;
+  count?: number;
   /**
    * 菜单项
    */
@@ -24,12 +23,12 @@ export interface TdActionSheetProps {
    * 是否显示取消按钮
    * @default true
    */
-  showCancel: boolean;
+  showCancel?: boolean;
   /**
    * 展示类型，列表和表格形式展示
    * @default list
    */
-  theme: 'list' | 'grid';
+  theme?: 'list' | 'grid';
   /**
    * 显示与隐藏
    * @default false
@@ -40,22 +39,23 @@ export interface TdActionSheetProps {
    * @default false
    */
   defaultVisible: boolean;
+  /**
+   * 显示与隐藏
+   * @default false
+   */
+  modelValue: boolean;
   /**
    * 点击取消按钮时触发
    */
-  onCancel: (context: { e: MouseEvent }) => void;
+  onCancel?: (context: { e: MouseEvent }) => void;
   /**
    * 关闭时触发
    */
-  onClose: (context: { e: MouseEvent }) => void;
+  onClose?: (context: { e: MouseEvent }) => void;
   /**
    * 选择菜单项时触发
    */
-  onSelected: (selected: ActionSheetItem | String, index: number) => void;
+  onSelected?: (selected: ActionSheetItem | String, index: number) => void;
 }
 
-export interface ActionSheetItem {
-  label: string;
-  color?: string;
-  disabled?: boolean;
-}
+export interface ActionSheetItem {label: string; color?: string; disabled?: boolean };
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
@@ -6,7 +6,7 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
-badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
+badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/avatar/type.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
 icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String | - | 图片地址 | N

diff --git a/src/avatar/type.ts b/src/avatar/type.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdBadgeProps } from '../badge';
+import { BadgeProps } from '../badge';
 import { TNode } from '../common';
 
 export interface TdAvatarProps {
@@ -16,7 +16,7 @@ export interface TdAvatarProps {
   /**
    * 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字
    */
-  badgeProps?: TdBadgeProps;
+  badgeProps?: BadgeProps;
   /**
    * 加载失败时隐藏图片
    * @default false

diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md
@@ -5,14 +5,15 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-actions | Array / Slot / Function | - | 操作栏。TS 类型：`Array<TdButtonProps>` `import { TdButtonProps } from '@Button'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts) | N
+actions | Array / Slot / Function | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts) | N
 buttonLayout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
-cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string | ButtonProps | TNode` `import { ButtonProps } from '@Button'`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts) | N
+cancelBtn | String / Object / Slot / Function | '' | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。TS 类型：`string | ButtonProps | TNode`，[Button API Documents](./button?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dialog/type.ts) | N
 closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N
 confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件。TS 类型：`string | ButtonProps | 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
 destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
 preventScrollThrough | Boolean | true | 防止滚动穿透 | N
+showInAttachedElement | Boolean | false | 【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 title | String / Slot / Function | - | 标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 visible | Boolean | false | 控制对话框是否显示 | N
@@ -37,7 +38,7 @@ overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在，点击蒙
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N
-style | String | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText) | N
+style | String / Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`string | Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 `Omit<DialogProps, 'attach'>` | - | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部 API | N
 
 ### DialogInstance

diff --git a/src/dialog/props.ts b/src/dialog/props.ts
@@ -17,7 +17,8 @@ export default {
     type: String as PropType<TdDialogProps['buttonLayout']>,
     default: 'horizontal' as TdDialogProps['buttonLayout'],
     validator(val: TdDialogProps['buttonLayout']): boolean {
-      return ['horizontal', 'vertical'].includes(val!);
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
     },
   },
   /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
@@ -46,6 +47,8 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative */
+  showInAttachedElement: Boolean,
   /** 是否显示遮罩层 */
   showOverlay: {
     type: Boolean,

diff --git a/src/dialog/type.ts b/src/dialog/type.ts
@@ -4,15 +4,14 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdButtonProps } from '../button';
 import { ButtonProps } from '../button';
-import { TNode } from '../common';
+import { TNode, Styles } from '../common';
 
 export interface TdDialogProps {
   /**
    * 操作栏
    */
-  actions?: Array<TdButtonProps>;
+  actions?: Array<ButtonProps>;
   /**
    * 多按钮排列方式
    * @default horizontal
@@ -47,6 +46,11 @@ export interface TdDialogProps {
    * @default true
    */
   preventScrollThrough?: boolean;
+  /**
+   * 【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative
+   * @default false
+   */
+  showInAttachedElement?: boolean;
   /**
    * 是否显示遮罩层
    * @default true
@@ -95,9 +99,8 @@ export interface DialogOptions extends Omit<TdDialogProps, 'attach'> {
   className?: string;
   /**
    * 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)
-   * @default ''
    */
-  style?: string;
+  style?: string | Styles;
 }
 
 export interface DialogInstance {

diff --git a/src/grid/grid-item-props.ts b/src/grid/grid-item-props.ts
@@ -4,33 +4,33 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
- import { TdGridItemProps } from '../grid/type';
- import { PropType } from 'vue';
- 
- export default {
-   /** 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 */
-   badgeProps: {
-     type: Object as PropType<TdGridItemProps['badgeProps']>,
-   },
-   /** 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */
-   description: {
-     type: [String, Function] as PropType<TdGridItemProps['description']>,
-   },
-   /** 图片，可以是图片地址，也可以自定义图片节点 */
-   image: {
-     type: [String, Function] as PropType<TdGridItemProps['image']>,
-   },
-   /** 内容布局方式 */
-   layout: {
-     type: String as PropType<TdGridItemProps['layout']>,
-     default: 'vertical' as TdGridItemProps['layout'],
-     validator(val: TdGridItemProps['layout']): boolean {
-       return ['vertical', 'horizontal'].includes(val!);
-     },
-   },
-   /** 文本，可以通过 Props 传入文本，也可以自定义标题节点 */
-   text: {
-     type: [String, Function] as PropType<TdGridItemProps['text']>,
-   },
- };
- 
+import { TdGridItemProps } from '../grid/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 */
+  badgeProps: {
+    type: Object as PropType<TdGridItemProps['badgeProps']>,
+  },
+  /** 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */
+  description: {
+    type: [String, Function] as PropType<TdGridItemProps['description']>,
+  },
+  /** 图片，可以是图片地址，也可以自定义图片节点 */
+  image: {
+    type: [String, Function] as PropType<TdGridItemProps['image']>,
+  },
+  /** 内容布局方式 */
+  layout: {
+    type: String as PropType<TdGridItemProps['layout']>,
+    default: 'vertical' as TdGridItemProps['layout'],
+    validator(val: TdGridItemProps['layout']): boolean {
+      if (!val) return true;
+      return ['vertical', 'horizontal'].includes(val);
+    },
+  },
+  /** 文本，可以通过 Props 传入文本，也可以自定义标题节点 */
+  text: {
+    type: [String, Function] as PropType<TdGridItemProps['text']>,
+  },
+};
diff --git a/src/grid/grid.md b/src/grid/grid.md
@@ -3,19 +3,19 @@
 ## API
 ### Grid Props
 
-| 名称   | 类型             | 默认值 | 说明                                                                                                                                                                                                                        | 必传 |
-| ------ | ---------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-| align  | String           | center | 内容对齐方式。可选项：left/center                                                                                                                                                                                           | N    |
-| border | Boolean / Object | false  | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' }` | N    |
-| column | Number           | 4      | 每一行的列数量                                                                                                                                                                                                              | N    |
-| gutter | Number           | -      | 间隔大小                                                                                                                                                                                                                    | N    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | center | 内容对齐方式。可选项：left/center | N
+border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' }` | N
+column | Number | 4 | 每一行的列数量 | N
+gutter | Number | - | 间隔大小 | N
 
 ### GridItem Props
 
-| 名称        | 类型                     | 默认值   | 说明                                                                                                                                                                                                                              | 必传 |
-| ----------- | ------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
-| badgeProps  | Object                   | -        | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N    |
-| description | String / Slot / Function | -        | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                  | N    |
-| image       | String / Slot / Function | -        | 图片，可以是图片地址，也可以自定义图片节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                                   | N    |
-| layout      | String                   | vertical | 内容布局方式。可选项：vertical/horizontal                                                                                                                                                                                         | N    |
-| text        | String / Slot / Function | -        | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)                                                          | N    |
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
+description | String / Slot / Function | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+image | String / Slot / Function | - | 图片，可以是图片地址，也可以自定义图片节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String / Slot / Function | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N