feat(action-sheet): action-sheet api更新 (#2541)

Tencent · Jan 16, 2024 · c05e92d · c05e92d
1 parent fb17d51
commit c05e92d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 111 deletions.
diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md
@@ -5,14 +5,15 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | `0.29.0`。options：center/left | N
+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
+items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+popup-props | Object | {} | \- | N
 show-cancel | Boolean | true | \- | N
 show-overlay | Boolean | true | \- | N
-theme | String | list | options：list/grid | N
+theme | String | list | options: list/grid | N
 visible | Boolean | false | required | Y
 default-visible | Boolean | undefined | required。uncontrolled property | Y
 
@@ -24,7 +25,6 @@ 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/>
 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 

diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
@@ -1,86 +1,4 @@
----
-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
@@ -91,7 +9,8 @@ align | String | center | `0.29.0`。水平对齐方式。可选项：center/lef
 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
+items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean;icon?: string;suffixIcon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+popup-props | Object | {} | popupProps透传 | N
 show-cancel | Boolean | true | 是否显示取消按钮 | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N

diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
@@ -30,11 +30,21 @@ const props: TdActionSheetProps = {
   items: {
     type: Array,
   },
+  /** popupProps透传 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
     value: true,
   },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    value: true,
+  },
   /** 展示类型，列表和表格形式展示 */
   theme: {
     type: String,
@@ -50,16 +60,6 @@ const props: TdActionSheetProps = {
     type: Boolean,
     value: false,
   },
-  /** 是否显示遮罩层 */
-  showOverlay: {
-    type: Boolean,
-    value: true,
-  },
-  /** popupProps透传 */
-  popupProps: {
-    type: Object,
-    value: {},
-  },
 };
 
 export default props;
diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
@@ -44,6 +44,14 @@ export interface TdActionSheetProps {
     type: ArrayConstructor;
     value?: Array<string | ActionSheetItem>;
   };
+  /**
+   * popupProps透传
+   * @default {}
+   */
+  popupProps?: {
+    type: ObjectConstructor;
+    value?: object;
+  };
   /**
    * 是否显示取消按钮
    * @default true
@@ -52,6 +60,14 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 展示类型，列表和表格形式展示
    * @default list
@@ -76,19 +92,6 @@ export interface TdActionSheetProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * 是否显示遮罩层
-   * @default true
-   */
-  showOverlay: {
-    type: BooleanConstructor;
-    value?: boolean;
-  };
-  /** popupProps透传 */
-  popupProps: {
-    type: ObjectConstructor;
-    value?: object;
-  };
 }
 
 export interface ActionSheetItem {