feat: modify API

Tencent · Jul 4, 2023 · e17a7d7 · e17a7d7
1 parent d8b902c
commit e17a7d7
Show file tree

Hide file tree

Showing 63 changed files with 12,464 additions and 197 deletions.
diff --git a/helper/attributes.json b/helper/attributes.json
diff --git a/helper/tags.json b/helper/tags.json
diff --git a/helper/web-types.json b/helper/web-types.json
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ActionSheet Props
 
 名称 | 类型 | 默认值 | 说明 | 必传

diff --git a/src/avatar/props.ts b/src/avatar/props.ts
@@ -41,10 +41,10 @@ export default {
       return ['circle', 'round'].includes(val);
     },
   },
-  /** 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 */
+  /** 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large */
   size: {
     type: String,
-    default: 'medium',
+    default: '',
   },
   /** 图片加载失败时触发 */
   onError: Function as PropType<TdAvatarProps['onError']>,

diff --git a/src/avatar/type.ts b/src/avatar/type.ts
@@ -5,8 +5,7 @@
  * */
 
 import { BadgeProps } from '../badge';
-import { ImageProps } from '../image';
-import { TNode, ImageEvent } from '../common';
+import { TNode } from '../common';
 
 export interface TdAvatarProps {
   /**
@@ -35,21 +34,21 @@ export interface TdAvatarProps {
   /**
    * 透传至 Image 组件
    */
-  imageProps?: ImageProps;
+  imageProps?: object;
   /**
    * 形状
    * @default circle
    */
   shape?: ShapeEnum;
   /**
-   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定
-   * @default medium
+   * 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large
+   * @default ''
    */
   size?: string;
   /**
    * 图片加载失败时触发
    */
-  onError?: (context: { e: ImageEvent }) => void;
+  onError?: () => void;
 }
 
 export interface TdAvatarGroupProps {

diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
@@ -11,13 +11,12 @@ disabled | Boolean | false | disable the button, make it can not be clicked | N
 ghost | Boolean | false | make background-color to be transparent | N
 icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | set button to be loading state | N
-loadingProps | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
 size | String | medium | a button has three size。options：extra-small/small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffix | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | button theme。options：default/primary/danger/light | N
 type | String | button | type of button element in html。options：submit/reset/button | N
-variant | String | base | button variant。options：base/outline/text | N
+variant | String | base | button variant。options：base/outline/dashed/text | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
 
 ### Button Events

diff --git a/src/button/button.md b/src/button/button.md
@@ -11,13 +11,12 @@ disabled | Boolean | false | 禁用状态 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否显示为加载状态 | N
-loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
 size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffix | Slot / Function | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
 type | String | button | 按钮类型。可选项：submit/reset/button | N
-variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N
+variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
 onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
 
 ### Button Events

diff --git a/src/button/props.ts b/src/button/props.ts
@@ -24,10 +24,6 @@ export default {
   },
   /** 是否显示为加载状态 */
   loading: Boolean,
-  /** 透传加载组件全部属性 */
-  loadingProps: {
-    type: Object as PropType<TdButtonProps['loadingProps']>,
-  },
   /** 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 */
   shape: {
     type: String as PropType<TdButtonProps['shape']>,
@@ -74,7 +70,7 @@ export default {
     default: 'base' as TdButtonProps['variant'],
     validator(val: TdButtonProps['variant']): boolean {
       if (!val) return true;
-      return ['base', 'outline', 'text'].includes(val);
+      return ['base', 'outline', 'dashed', 'text'].includes(val);
     },
   },
   /** 点击时触发 */

diff --git a/src/button/type.ts b/src/button/type.ts
@@ -4,7 +4,6 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { LoadingProps } from '../loading';
 import { TNode, SizeEnum } from '../common';
 
 export interface TdButtonProps {
@@ -36,10 +35,6 @@ export interface TdButtonProps {
    * @default false
    */
   loading?: boolean;
-  /**
-   * 透传加载组件全部属性
-   */
-  loadingProps?: LoadingProps;
   /**
    * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形
    * @default rectangle
@@ -68,7 +63,7 @@ export interface TdButtonProps {
    * 按钮形式，基础、线框、文字
    * @default base
    */
-  variant?: 'base' | 'outline' | 'text';
+  variant?: 'base' | 'outline' | 'dashed' | 'text';
   /**
    * 点击时触发
    */

diff --git a/src/calendar/calendar.en-US.md b/src/calendar/calendar.en-US.md
@@ -5,6 +5,7 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+autoClose | Boolean | true | \- | N
 confirmBtn | String / Object / Slot / Function | '' | Typescript：`string \| ButtonProps \| TNode \| null`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 firstDayOfWeek | Number | 0 | \- | N
 format | Function | - | Typescript：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
@@ -15,7 +16,7 @@ type | String | 'single' | options：single/multiple/range | N
 usePopup | Boolean | true | \- | N
 value | Number / Array / Date | - | `v-model` and `v-model:value` is supported。Typescript：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 defaultValue | Number / Array / Date | - | uncontrolled property。Typescript：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
-visible | Boolean | false | `v-model:visible` is supported | N
+visible | Boolean | false | \- | N
 onChange | Function |  | Typescript：`(value: Date) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: CalendarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/> | N
 onConfirm | Function |  | Typescript：`(value: Date) => void`<br/> | N

diff --git a/src/calendar/calendar.md b/src/calendar/calendar.md
@@ -5,6 +5,7 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+autoClose | Boolean | true | 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible | N
 confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。。TS 类型：`string \| ButtonProps \| TNode \| null`，[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/calendar/type.ts) | N
 firstDayOfWeek | Number | 0 | 第一天从星期几开始，默认 0 = 周日 | N
 format | Function | - | 用于格式化日期的函数。TS 类型：`CalendarFormatType ` `type CalendarFormatType = (day: TDate) => TDate` `type TDateType = 'selected' \| 'disabled' \| 'start' \| 'centre' \| 'end' \| ''` `interface TDate { date: Date; day: number; type: TDateType; className?: string; prefix?: string; suffix?: string;}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
@@ -15,8 +16,7 @@ type | String | 'single' | 日历的选择类型，single = 单选；multiple =
 usePopup | Boolean | true | 是否使用弹出层包裹日历 | N
 value | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
 defaultValue | Number / Array / Date | - | 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组。非受控属性。TS 类型：`number \| Date \| TCalendarValue[]` `type TCalendarValue = number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts) | N
-visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效。支持语法糖 `v-model:visible` | N
-defaultVisible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效。非受控属性 | N
+visible | Boolean | false | 是否显示日历；`usePopup` 为 true 时有效 | N
 onChange | Function |  | TS 类型：`(value: Date) => void`<br/>不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple） | N
 onClose | Function |  | TS 类型：`(trigger: CalendarTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/calendar/type.ts)。<br/>`type CalendarTrigger = 'close-btn' \| 'confirm-btn' \| 'overlay'`<br/> | N
 onConfirm | Function |  | TS 类型：`(value: Date) => void`<br/>点击确认按钮时触发 | N

diff --git a/src/calendar/props.ts b/src/calendar/props.ts
@@ -18,10 +18,6 @@ export default {
     type: Number,
     default: 0,
   },
-  /** 用于格式化日期的函数 */
-  format: {
-    type: Function as PropType<TdCalendarProps['format']>,
-  },
   /** 最大可选的日期，不传则默认半年后 */
   maxDate: {
     type: [Number, Date] as PropType<TdCalendarProps['maxDate']>,
@@ -32,7 +28,8 @@ export default {
   },
   /** 标题，不传默认为“请选择日期” */
   title: {
-    type: [String, Function] as PropType<TdCalendarProps['title']>,
+    type: String,
+    default: '',
   },
   /** 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择 */
   type: {
@@ -43,11 +40,6 @@ export default {
       return ['single', 'multiple', 'range'].includes(val);
     },
   },
-  /** 是否使用弹出层包裹日历 */
-  usePopup: {
-    type: Boolean,
-    default: true,
-  },
   /** 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组 */
   value: {
     type: [Number, Array, Date] as PropType<TdCalendarProps['value']>,
@@ -61,14 +53,6 @@ export default {
   defaultValue: {
     type: [Number, Array, Date] as PropType<TdCalendarProps['defaultValue']>,
   },
-  /** 是否显示日历；`usePopup` 为 true 时有效 */
+  /** 是否显示日历 */
   visible: Boolean,
-  /** 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple） */
-  onChange: Function as PropType<TdCalendarProps['onChange']>,
-  /** 关闭按钮时触发 */
-  onClose: Function as PropType<TdCalendarProps['onClose']>,
-  /** 点击确认按钮时触发 */
-  onConfirm: Function as PropType<TdCalendarProps['onConfirm']>,
-  /** 点击日期时触发 */
-  onSelect: Function as PropType<TdCalendarProps['onSelect']>,
 };
diff --git a/src/calendar/type.ts b/src/calendar/type.ts
@@ -18,80 +18,41 @@ export interface TdCalendarProps {
    * @default 0
    */
   firstDayOfWeek?: number;
-  /**
-   * 用于格式化日期的函数
-   */
-  format?: CalendarFormatType;
   /**
    * 最大可选的日期，不传则默认半年后
    */
-  maxDate?: number | Date;
+  maxDate?: number | date;
   /**
    * 最小可选的日期，不传则默认今天
    */
-  minDate?: number | Date;
+  minDate?: number | date;
   /**
    * 标题，不传默认为“请选择日期”
+   * @default ''
    */
-  title?: string | TNode;
+  title?: string;
   /**
    * 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择
-   * @default 'single'
+   * @default single
    */
   type?: 'single' | 'multiple' | 'range';
-  /**
-   * 是否使用弹出层包裹日历
-   * @default true
-   */
-  usePopup?: boolean;
   /**
    * 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组
    */
-  value?: number | Date | TCalendarValue[];
+  value?: CalendarValue | CalendarValue[];
   /**
    * 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组，非受控属性
    */
-  defaultValue?: number | Date | TCalendarValue[];
+  defaultValue?: CalendarValue | CalendarValue[];
   /**
    * 当前选择的日期，不传则默认今天，当 type = multiple 或 range 时传入数组
    */
-  modelValue?: number | Date | TCalendarValue[];
+  modelValue?: CalendarValue | CalendarValue[];
   /**
-   * 是否显示日历；`usePopup` 为 true 时有效
+   * 是否显示日历
    * @default false
    */
   visible?: boolean;
-  /**
-   * 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
-   */
-  onChange?: (value: Date) => void;
-  /**
-   * 关闭按钮时触发
-   */
-  onClose?: (trigger: CalendarTrigger) => void;
-  /**
-   * 点击确认按钮时触发
-   */
-  onConfirm?: (value: Date) => void;
-  /**
-   * 点击日期时触发
-   */
-  onSelect?: (value: Date) => void;
 }
 
-export type CalendarFormatType = (day: TDate) => TDate;
-
-export type TDateType = 'selected' | 'disabled' | 'start' | 'centre' | 'end' | '';
-
-export interface TDate {
-  date: Date;
-  day: number;
-  type: TDateType;
-  className?: string;
-  prefix?: string;
-  suffix?: string;
-}
-
-export type TCalendarValue = number | Date;
-
-export type CalendarTrigger = 'close-btn' | 'confirm-btn' | 'overlay';
+export type CalendarValue = number | Date;
diff --git a/src/checkbox-group/checkbox-group.en-US.md b/src/checkbox-group/checkbox-group.en-US.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### CheckboxGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | - | \- | N
+max | Number | undefined | \- | N
+name | String | - | \- | N
+options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+name | params | description
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
diff --git a/src/checkbox-group/checkbox-group.md b/src/checkbox-group/checkbox-group.md
@@ -0,0 +1,20 @@
+:: BASE_DOC ::
+
+## API
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | N
+options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N
+
+### CheckboxGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>