feat: modify API

Tencent · Jan 15, 2024 · 0029f54 · 0029f54
1 parent fd92984
commit 0029f54
Show file tree

Hide file tree

Showing 238 changed files with 3,239 additions and 7,647 deletions.
diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md
@@ -5,13 +5,11 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | `0.29.0`。options：center/left | N
 cancel-text | String | - | \- | N
 count | Number | 8 | \- | N
-description | String | - | `0.29.0` | N
 items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
 show-cancel | Boolean | true | \- | N
-show-overlay | Boolean | true | \- | N
+style | String | - | \- | N
 theme | String | list | options：list/grid | N
 visible | Boolean | false | required | Y
 default-visible | Boolean | undefined | required。uncontrolled property | Y
@@ -21,20 +19,5 @@ default-visible | Boolean | undefined | required。uncontrolled property | Y
 name | params | description
 -- | -- | --
 cancel | \- | \-
-close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+close | \- | \-
 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-color | @font-gray-1 | - 
---td-action-sheet-cancel-height | 96rpx | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
---td-action-sheet-list-item-height | 112rpx | - 
---td-action-sheet-text-align | center | - 
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
@@ -1,99 +1,15 @@
----
-title: ActionSheet 动作面板
-description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
-spline: data
-isComponent: true
----
-
-<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
-
-<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
-  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
-    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
-  </svg>
-  该组件于 0.9.0 版本上线，请留意版本。
-</div>
-
-## 引入
-
-全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
-
-```json
-"usingComponents": {
-  "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
-}
-```
-
-## 代码演示
-
-### 组件类型
-
-列表型动作面板
-
-{{ list }}
-
-宫格型动作面板
-
-{{ grid }}
-
-### 组件状态
-
-宫格型动作面板
-
-{{ status }}
-
-### 组件样式
-
-列表型对齐方式
-
-{{ align }}
-
-### 支持指令调用
-
-```javascript
-import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
-
-// 指令调用不同于组件引用不需要传入visible
-const basicListOption: ActionSheetShowOption = {
-  theme: ActionSheetTheme.List,
-  selector: '#t-action-sheet',
-  items: [
-    {
-      label: '默认选项',
-    },
-    {
-      label: '失效选项',
-      disabled: true,
-    },
-    {
-      label: '警告选项',
-      color: '#e34d59',
-    },
-  ],
-};
-
-const handler = ActionSheet.show(basicListOption);
-```
-
-指令调用的关闭如下
-
-```javascript
-handler.close();
-```
-
+:: BASE_DOC ::
 
 ## API
 ### ActionSheet Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-align | String | center | `0.29.0`。水平对齐方式。可选项：center/left | N
 cancel-text | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
-description | String | - | `0.29.0`。动作面板描述文字 | N
 items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
 show-cancel | Boolean | true | 是否显示取消按钮 | N
-show-overlay | Boolean | true | 是否显示遮罩层 | N
+style | String | - | 自定义组件样式 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏 | Y
 default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
@@ -103,26 +19,5 @@ default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属
 名称 | 参数 | 描述
 -- | -- | --
 cancel | \- | 点击取消按钮时触发
-close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+close | \- | 关闭时触发
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
-
-### ActionSheet 外部样式类
-类名 | 说明
--- | -- 
-t-class | 根节点样式类
-t-class-content | 内容样式类
-t-class-cancel | 取消样式类
-
-### CSS 变量
-组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-action-sheet-border-color | @gray-color-1 | - 
---td-action-sheet-border-radius | @radius-extra-large | - 
---td-action-sheet-cancel-color | @font-gray-1 | - 
---td-action-sheet-cancel-height | 96rpx | - 
---td-action-sheet-color | @font-gray-1 | - 
---td-action-sheet-description-color | @font-gray-3 | - 
---td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
---td-action-sheet-list-item-height | 112rpx | - 
---td-action-sheet-text-align | center | - 
diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
@@ -6,35 +6,31 @@
 
 import { TdActionSheetProps } from './type';
 const props: TdActionSheetProps = {
-  /** 水平对齐方式 */
-  align: {
-    type: String,
-    value: 'center',
-  },
   /** 设置取消按钮的文本 */
   cancelText: {
     type: String,
-    value: '取消',
+    value: '',
   },
   /** 设置每页展示菜单的数量，仅当 type=grid 时有效 */
   count: {
     type: Number,
     value: 8,
   },
-  /** 动作面板描述文字 */
-  description: {
-    type: String,
-    value: '',
-  },
   /** 菜单项 */
   items: {
     type: Array,
+    required: true,
   },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
     value: true,
   },
+  /** 自定义组件样式 */
+  style: {
+    type: String,
+    value: '',
+  },
   /** 展示类型，列表和表格形式展示 */
   theme: {
     type: String,
@@ -44,21 +40,13 @@ const props: TdActionSheetProps = {
   visible: {
     type: Boolean,
     value: null,
+    required: true,
   },
   /** 显示与隐藏，非受控属性 */
   defaultVisible: {
     type: Boolean,
     value: false,
-  },
-  /** 是否显示遮罩层 */
-  showOverlay: {
-    type: Boolean,
-    value: true,
-  },
-  /** popupProps透传 */
-  popupProps: {
-    type: Object,
-    value: {},
+    required: true,
   },
 };
 

diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
@@ -5,14 +5,6 @@
  * */
 
 export interface TdActionSheetProps {
-  /**
-   * 水平对齐方式
-   * @default center
-   */
-  align?: {
-    type: StringConstructor;
-    value?: 'center' | 'left';
-  };
   /**
    * 设置取消按钮的文本
    * @default ''
@@ -29,14 +21,6 @@ export interface TdActionSheetProps {
     type: NumberConstructor;
     value?: number;
   };
-  /**
-   * 动作面板描述文字
-   * @default ''
-   */
-  description?: {
-    type: StringConstructor;
-    value?: string;
-  };
   /**
    * 菜单项
    */
@@ -52,6 +36,14 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 自定义组件样式
+   * @default ''
+   */
+  style?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 展示类型，列表和表格形式展示
    * @default list
@@ -76,25 +68,10 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * 是否显示遮罩层
-   * @default true
-   */
-  showOverlay: {
-    type: BooleanConstructor;
-    value?: boolean;
-  };
-  /** popupProps透传 */
-  popupProps: {
-    type: ObjectConstructor;
-    value?: object;
-  };
 }
 
 export interface ActionSheetItem {
   label: string;
   color?: string;
   disabled?: boolean;
-  icon?: string;
-  suffixIcon?: string;
 }
diff --git a/src/avatar/README.en-US.md b/src/avatar/README.en-US.md
@@ -8,53 +8,28 @@ name | type | default | description | required
 alt | String | - | show it when url is not valid | N
 badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 bordered | Boolean | false | \- | N
+custom-style | String | - | `0.25.0` | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
 hide-on-load-failed | Boolean | false | hide image when loading image failed | N
 icon | String / Object | - | \- | N
 image | String | - | images url | N
-image-props | Object | - | \- | N
-shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+shape | String | circle | shape。options: circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
 size | String | medium | size | N
 
 ### Avatar Events
 
 name | params | description
 -- | -- | --
-error | \- | trigger on image load failed
+error | - | trigger on image load failed
 
 ### AvatarGroup Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
-collapse-avatar | String / Slot | - | \- | N
+cascading | String | 'right-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
+collapse-avatar | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
+custom-style | String | - | `0.25.0` | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | 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 | 8rpx | - 
---td-avatar-border-width-medium | 6rpx | - 
---td-avatar-border-width-small | 4rpx | - 
---td-avatar-circle-border-radius | @radius-circle | - 
---td-avatar-content-color | @brand-color | - 
---td-avatar-icon-large-font-size | 64rpx | - 
---td-avatar-icon-medium-font-size | 48rpx | - 
---td-avatar-icon-small-font-size | 40rpx | - 
---td-avatar-large-width | 128rpx | - 
---td-avatar-margin-left | 0 | - 
---td-avatar-medium-width | 96rpx | - 
---td-avatar-round-border-radius | @radius-default | - 
---td-avatar-small-width | 80rpx | - 
---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 | -