feat: modify API

Tencent · Sep 6, 2023 · fdf3f26 · fdf3f26
1 parent dd03df5
commit fdf3f26
Show file tree

Hide file tree

Showing 87 changed files with 1,637 additions and 6,388 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.en-US.md b/src/action-sheet/action-sheet.en-US.md
@@ -26,21 +26,3 @@ name | params | description
 cancel | `(context: { e: MouseEvent })` | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-action-sheet-border-color | @gray-color-1 | - 
---td-action-sheet-border-radius | @radius-extra-large | - 
---td-action-sheet-cancel-height | 48px | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-dot-active-color | @brand-color | - 
---td-action-sheet-dot-color | @font-gray-4 | - 
---td-action-sheet-dot-size | 8px | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
---td-action-sheet-list-item-height | 56px | - 
---td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
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
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -25,21 +26,3 @@ onSelected | Function |  | TS 类型：`(selected: ActionSheetItem \| string, in
 cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
-
-
-### CSS 变量
-组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-action-sheet-border-color | @gray-color-1 | - 
---td-action-sheet-border-radius | @radius-extra-large | - 
---td-action-sheet-cancel-height | 48px | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-dot-active-color | @brand-color | - 
---td-action-sheet-dot-color | @font-gray-4 | - 
---td-action-sheet-dot-size | 8px | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
---td-action-sheet-list-item-height | 56px | - 
---td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md
@@ -29,30 +29,3 @@ cascading | String | 'right-up' | multiple images cascading。options：left-up/
 collapseAvatar | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | \- | N
 size | String | medium | size | N
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-avatar-group-margin-left-large | -8px | - 
---td-avatar-group-margin-left-medium | -6px | - 
---td-avatar-group-margin-left-small | -4px | - 
---td-avatar-bg-color | @brand-color-light-active | - 
---td-avatar-border-color | #fff | - 
---td-avatar-border-width-large | 4px | - 
---td-avatar-border-width-medium | 3px | - 
---td-avatar-border-width-small | 2px | - 
---td-avatar-circle-border-radius | @radius-circle | - 
---td-avatar-content-color | @brand-color | - 
---td-avatar-icon-large-font-size | 32px | - 
---td-avatar-icon-medium-font-size | 24px | - 
---td-avatar-icon-small-font-size | 20px | - 
---td-avatar-large-width | 64px | - 
---td-avatar-margin-left | 0 | - 
---td-avatar-medium-width | 48px | - 
---td-avatar-round-border-radius | @radius-default | - 
---td-avatar-small-width | 40px | - 
---td-avatar-text-large-font-size | 16px | - 
---td-avatar-text-medium-font-size | @font-size-base | - 
---td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
@@ -29,30 +29,3 @@ cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左
 collapseAvatar | String / Slot / Function | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
-
-
-### CSS 变量
-组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-avatar-group-margin-left-large | -8px | - 
---td-avatar-group-margin-left-medium | -6px | - 
---td-avatar-group-margin-left-small | -4px | - 
---td-avatar-bg-color | @brand-color-light-active | - 
---td-avatar-border-color | #fff | - 
---td-avatar-border-width-large | 4px | - 
---td-avatar-border-width-medium | 3px | - 
---td-avatar-border-width-small | 2px | - 
---td-avatar-circle-border-radius | @radius-circle | - 
---td-avatar-content-color | @brand-color | - 
---td-avatar-icon-large-font-size | 32px | - 
---td-avatar-icon-medium-font-size | 24px | - 
---td-avatar-icon-small-font-size | 20px | - 
---td-avatar-large-width | 64px | - 
---td-avatar-margin-left | 0 | - 
---td-avatar-medium-width | 48px | - 
---td-avatar-round-border-radius | @radius-default | - 
---td-avatar-small-width | 40px | - 
---td-avatar-text-large-font-size | 16px | - 
---td-avatar-text-medium-font-size | @font-size-base | - 
---td-avatar-text-small-font-size | @font-size-s | - 
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/badge/badge.en-US.md b/src/badge/badge.en-US.md
@@ -14,22 +14,3 @@ offset | Array | - | Typescript：`Array<string \| number>` | N
 shape | String | circle | options：circle/square/bubble/ribbon | N
 showZero | Boolean | false | \- | N
 size | String | medium | options：medium/large | N
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-badge-basic-height | 16px | - 
---td-badge-basic-padding | 4px | - 
---td-badge-basic-width | 16px | - 
---td-badge-bg-color | @error-color | - 
---td-badge-border-radius | 2px | - 
---td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
---td-badge-dot-size | 8px | - 
---td-badge-font-size | @font-size-xs | - 
---td-badge-font-weight | 600 | - 
---td-badge-large-font-size | @font-size-s | - 
---td-badge-large-height | 20px | - 
---td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
diff --git a/src/badge/badge.md b/src/badge/badge.md
@@ -14,22 +14,3 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 showZero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
-
-
-### CSS 变量
-组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-badge-basic-height | 16px | - 
---td-badge-basic-padding | 4px | - 
---td-badge-basic-width | 16px | - 
---td-badge-bg-color | @error-color | - 
---td-badge-border-radius | 2px | - 
---td-badge-bubble-border-radius | 10px 10px 10px 1px | - 
---td-badge-dot-size | 8px | - 
---td-badge-font-size | @font-size-xs | - 
---td-badge-font-weight | 600 | - 
---td-badge-large-font-size | @font-size-s | - 
---td-badge-large-height | 20px | - 
---td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md
@@ -11,122 +11,16 @@ 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
 
 name | params | description
 -- | -- | --
 click | `(e: MouseEvent)` | trigger on click
-
-
-### CSS Variables
-The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
--- | -- | --
---td-button-border-radius | @radius-default | - 
---td-button-border-width | 2px | - 
---td-button-danger-active-bg-color | @error-color-7 | - 
---td-button-danger-active-border-color | @error-color-7 | - 
---td-button-danger-bg-color | @error-color | - 
---td-button-danger-border-color | @error-color | - 
---td-button-danger-color | @font-white-1 | - 
---td-button-danger-dashed-border-color | @button-danger-dashed-color | - 
---td-button-danger-dashed-color | @error-color | - 
---td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - 
---td-button-danger-disabled-bg | @error-color-3 | - 
---td-button-danger-disabled-border-color | @error-color-3 | - 
---td-button-danger-disabled-color | @font-white-1 | - 
---td-button-danger-outline-active-bg-color | @bg-color-container-active | - 
---td-button-danger-outline-active-border-color | @error-color-7 | - 
---td-button-danger-outline-border-color | @button-danger-outline-color | - 
---td-button-danger-outline-color | @error-color | - 
---td-button-danger-outline-disabled-color | @error-color-3 | - 
---td-button-danger-text-active-bg-color | @bg-color-container-active | - 
---td-button-danger-text-color | @error-color | - 
---td-button-danger-text-disabled-color | @button-danger-disabled-color | - 
---td-button-default-active-bg-color | @bg-color-component-active | - 
---td-button-default-active-border-color | @bg-color-component-active | - 
---td-button-default-bg-color | @bg-color-component | - 
---td-button-default-border-color | @bg-color-component | - 
---td-button-default-color | @font-gray-1 | - 
---td-button-default-disabled-bg | @bg-color-component-disabled | - 
---td-button-default-disabled-border-color | @bg-color-component-disabled | - 
---td-button-default-disabled-color | @font-gray-4 | - 
---td-button-default-outline-active-bg-color | @bg-color-container-active | - 
---td-button-default-outline-active-border-color | @component-border | - 
---td-button-default-outline-border-color | @component-border | - 
---td-button-default-outline-color | @font-gray-1 | - 
---td-button-default-outline-disabled-color | @component-border | - 
---td-button-default-text-active-bg-color | @bg-color-container-active | - 
---td-button-extra-small-font-size | @font-size-base | - 
---td-button-extra-small-height | 28px | - 
---td-button-extra-small-icon-font-size | 18px | - 
---td-button-extra-small-padding-horizontal | 8px | - 
---td-button-font-weight | 600 | - 
---td-button-ghost-border-color | @button-ghost-color | - 
---td-button-ghost-color | @bg-color-container | - 
---td-button-ghost-danger-border-color | @error-color | - 
---td-button-ghost-danger-color | @error-color | - 
---td-button-ghost-danger-hover-color | @error-color-active | - 
---td-button-ghost-disabled-color | rgba(255, 255, 255, .35) | - 
---td-button-ghost-hover-color | @font-white-2 | - 
---td-button-ghost-primary-border-color | @brand-color | - 
---td-button-ghost-primary-color | @brand-color | - 
---td-button-ghost-primary-hover-color | @brand-color-active | - 
---td-button-icon-border-radius | 4px | - 
---td-button-icon-spacer | @spacer | - 
---td-button-large-font-size | @font-size-m | - 
---td-button-large-height | 48px | - 
---td-button-large-icon-font-size | 24px | - 
---td-button-large-padding-horizontal | 20px | - 
---td-button-light-active-bg-color | @brand-color-light-active | - 
---td-button-light-active-border-color | @brand-color-light-active | - 
---td-button-light-bg-color | @brand-color-light | - 
---td-button-light-border-color | @brand-color-light | - 
---td-button-light-color | @brand-color | - 
---td-button-light-disabled-bg | @brand-color-light | - 
---td-button-light-disabled-border-color | @brand-color-light | - 
---td-button-light-disabled-color | @brand-color-disabled | - 
---td-button-light-outline-active-bg-color | @brand-color-light-active | - 
---td-button-light-outline-active-border-color | @brand-color-active | - 
---td-button-light-outline-bg-color | @brand-color-light | - 
---td-button-light-outline-border-color | @button-light-outline-color | - 
---td-button-light-outline-color | @brand-color | - 
---td-button-light-outline-disabled-color | @brand-color-disabled | - 
---td-button-light-text-active-bg-color | @bg-color-container-active | - 
---td-button-light-text-color | @brand-color | - 
---td-button-medium-font-size | @font-size-m | - 
---td-button-medium-height | 40px | - 
---td-button-medium-icon-font-size | 20px | - 
---td-button-medium-padding-horizontal | 16px | - 
---td-button-primary-active-bg-color | @brand-color-active | - 
---td-button-primary-active-border-color | @brand-color-active | - 
---td-button-primary-bg-color | @brand-color | - 
---td-button-primary-border-color | @brand-color | - 
---td-button-primary-color | @font-white-1 | - 
---td-button-primary-dashed-border-color | @button-primary-dashed-color | - 
---td-button-primary-dashed-color | @brand-color | - 
---td-button-primary-dashed-disabled-color | @brand-color-disabled | - 
---td-button-primary-disabled-bg | @brand-color-disabled | - 
---td-button-primary-disabled-border-color | @brand-color-disabled | - 
---td-button-primary-disabled-color | @font-white-1 | - 
---td-button-primary-outline-active-bg-color | @bg-color-container-active | - 
---td-button-primary-outline-active-border-color | @brand-color-active | - 
---td-button-primary-outline-border-color | @button-primary-outline-color | - 
---td-button-primary-outline-color | @brand-color | - 
---td-button-primary-outline-disabled-color | @brand-color-disabled | - 
---td-button-primary-text-active-bg-color | @bg-color-container-active | - 
---td-button-primary-text-color | @brand-color | - 
---td-button-primary-text-disabled-color | @brand-color-disabled | - 
---td-button-small-font-size | @font-size-base | - 
---td-button-small-height | 32px | - 
---td-button-small-icon-font-size | 18px | - 
---td-button-small-padding-horizontal | 12px | -