Skip to content

Commit

Permalink
feat: modify API
Browse files Browse the repository at this point in the history
  • Loading branch information
github-actions[bot] committed Sep 7, 2023
1 parent dd03df5 commit eefe656
Show file tree
Hide file tree
Showing 95 changed files with 1,681 additions and 6,563 deletions.
1,409 changes: 335 additions & 1,074 deletions helper/attributes.json

Large diffs are not rendered by default.

337 changes: 60 additions & 277 deletions helper/tags.json

Large diffs are not rendered by default.

4,544 changes: 842 additions & 3,702 deletions helper/web-types.json

Large diffs are not rendered by default.

18 changes: 0 additions & 18 deletions src/action-sheet/action-sheet.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
19 changes: 1 addition & 18 deletions src/action-sheet/action-sheet.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
:: BASE_DOC ::

## API

### ActionSheet Props

名称 | 类型 | 默认值 | 说明 | 必传
Expand All @@ -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 | -
27 changes: 0 additions & 27 deletions src/avatar/avatar.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
27 changes: 0 additions & 27 deletions src/avatar/avatar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
4 changes: 2 additions & 2 deletions src/avatar/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']>,
Expand Down
11 changes: 5 additions & 6 deletions src/avatar/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
* */

import { BadgeProps } from '../badge';
import { ImageProps } from '../image';
import { TNode, ImageEvent } from '../common';
import { TNode } from '../common';

export interface TdAvatarProps {
/**
Expand Down Expand Up @@ -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 {
Expand Down
19 changes: 0 additions & 19 deletions src/badge/badge.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
19 changes: 0 additions & 19 deletions src/badge/badge.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
108 changes: 1 addition & 107 deletions src/button/button.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 | -
Loading

0 comments on commit eefe656

Please sign in to comment.