diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
index 3353a3956..22f16b3c6 100644
--- a/.github/workflows/push.yml
+++ b/.github/workflows/push.yml
@@ -1,7 +1,6 @@
name: MAIN_PUSH
-on:
- push
+on: push
jobs:
call-test-build:
diff --git a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
index a3614174d..05c2914de 100644
--- a/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/action-sheet/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,5 +1,343 @@
// Vitest Snapshot v1
+exports[`ActionSheet > ActionSheet alignVue demo works fine 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
ActionSheet gridMultipleVue demo works fine 1`] = `
>
+
+
+
-
+
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
+
+
+
-
-
-
-
-
-
- 
-
-
-
-
- 文字
+
+
+
+
-
-
+
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- 文字
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
-
-
+
+
+ ![]()
+
+
+
-
-
-
-
+ class="t-grid-item t-grid-item--vertical"
+ style="text-align: center; flex-basis: 25%;"
+ >
+
+
+
+
+ ![]()
+
+
+
+
-
+
+ 动作面板描述文字
+
+
-
-
+
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- 文字
+
+
+ ![]()
+
-
-
+
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
+
+
+
-
+
+
+ ![]()
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ class="t-loading__dot"
+ style="animation-duration: 0.8s; animation-delay: 0s;"
+ />
+
+
-
-
-
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
-
-
+
+
+ ![]()
+
+
+
-
-
-
-
@@ -1741,1905 +3374,7715 @@ exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
-
-
-
- ActionSheet 动作面板
-
-
- 底部弹起的模态面板，包含与当前情境相关的多个选项。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ 带徽标宫格型
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ ![]()
+
+
+
+
+
-
-
-
-
+ class="t-loading__dot"
+ style="animation-duration: 0.8s; animation-delay: 0s;"
+ />
+
+
-
-
+
-
-
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ ![]()
+
+
+
-
-
+
+
-
-
-
-
+
+
+
+
+
+
+
+`;
+
+exports[`ActionSheet > ActionSheet listVue demo works fine 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ActionSheet 动作面板
+
+
+ 从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 文字
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
-
+
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
+
+
+
-
+
+
+
+
+
+
-
-
-
-
- 文字
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/action-sheet/action-sheet-list.vue b/src/action-sheet/action-sheet-list.vue
new file mode 100644
index 000000000..efbe543d2
--- /dev/null
+++ b/src/action-sheet/action-sheet-list.vue
@@ -0,0 +1,72 @@
+
+
+
+
+ {{ item.label }}
+
+
+ {{ item.label }}
+
+ {{ item.label }}
+
+
+
+
+
diff --git a/src/action-sheet/action-sheet.en-US.md b/src/action-sheet/action-sheet.en-US.md
new file mode 100644
index 000000000..e7ecb3f27
--- /dev/null
+++ b/src/action-sheet/action-sheet.en-US.md
@@ -0,0 +1,28 @@
+:: BASE_DOC ::
+
+## API
+
+### ActionSheet Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | center | options：center/left | N
+cancelText | String | - | \- | N
+count | Number | 8 | \- | N
+description | String | - | \- | N
+items | Array | - | required。Typescript：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+showCancel | Boolean | true | \- | N
+theme | String | list | options：list/grid | N
+visible | Boolean | false | required。`v-model` and `v-model:visible` is supported | Y
+defaultVisible | Boolean | false | required。uncontrolled property | Y
+onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N
+onClose | Function | | Typescript：`(trigger: TriggerSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
| N
+onSelected | Function | | Typescript：`(selected: ActionSheetItem \| string, index: number) => void`
| N
+
+### ActionSheet Events
+
+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)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | \-
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
index 4b4902097..998e46308 100644
--- a/src/action-sheet/action-sheet.md
+++ b/src/action-sheet/action-sheet.md
@@ -1,27 +1,27 @@
:: BASE_DOC ::
## API
-
### ActionSheet Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
-type | string | list | 展示类型，可选项：list/grid | N
-cancelText | String | 取消 | 设置取消按钮的文本 | N
+align | String | center | 水平对齐方式。可选项：center/left | N
+cancelText | String | - | 设置取消按钮的文本 | N
count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
-items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+description | String | - | 动作面板描述文字 | N
+items | Array | - | 必需。菜单项。TS 类型：`Array` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
showCancel | Boolean | true | 是否显示取消按钮 | N
theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
onCancel | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击取消按钮时触发 | N
-onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
关闭时触发 | N
-onSelected | Function | | TS 类型：`(selected: ActionSheetItem | String, index: number) => void`
选择菜单项时触发 | N
+onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`
关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
| N
+onSelected | Function | | TS 类型：`(selected: ActionSheetItem \| string, index: number) => void`
选择菜单项时触发 | N
### ActionSheet Events
名称 | 参数 | 描述
-- | -- | --
cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
-close | `(context: { e: MouseEvent })` | 关闭时触发
-selected | `(selected: ActionSheetItem | String, index: number)` | 选择菜单项时触发
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。
`type TriggerSource = 'overlay' \| 'command' \| 'select' `
+selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
diff --git a/src/action-sheet/action-sheet.vue b/src/action-sheet/action-sheet.vue
index 85d9e4cb5..a721d505f 100644
--- a/src/action-sheet/action-sheet.vue
+++ b/src/action-sheet/action-sheet.vue
@@ -1,35 +1,30 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
{{ description }}
+
+
-
-
+
+
+
+ {{ cancelText }}
+
+
- 宫格型-多页
+ 宫格型-多页
diff --git a/src/action-sheet/index.ts b/src/action-sheet/index.ts
index 0f8acfc49..e50dd9bb4 100644
--- a/src/action-sheet/index.ts
+++ b/src/action-sheet/index.ts
@@ -1,7 +1,70 @@
-import ActionSheet from './action-sheet.vue';
-import { withInstall, WithInstallType } from '../shared';
+import { createApp, DefineComponent, ref, h, VNode, App, nextTick } from 'vue';
+import ActionSheetVue from './action-sheet.vue';
+import { WithInstallType } from '../shared';
import './style';
+import { TdActionSheetProps } from './type';
-const _ActionSheet: WithInstallType = withInstall(ActionSheet);
+export * from './type';
+export type ActionSheetProps = TdActionSheetProps;
+
+let instance: any = null;
+let app: App;
+
+function create(props: Partial): DefineComponent {
+ const root = document.createElement('div');
+ document.body.appendChild(root);
+
+ const visible = ref(false);
+ const propsObject = {
+ visible,
+ ...props,
+ };
+
+ if (instance) {
+ instance.clear();
+ }
+
+ instance = ActionSheetVue;
+
+ instance.clear = (trigger: any) => {
+ app.unmount();
+ root.remove();
+ if (propsObject.onClose && trigger && trigger.trigger !== 'overlay') {
+ propsObject.onClose(trigger);
+ }
+ instance = null;
+ };
+ app = createApp(instance, { ...propsObject });
+ app.mount(root);
+ nextTick(() => {
+ visible.value = true;
+ });
+ return instance;
+}
+
+function ActionSheet(props: Partial) {
+ create(props);
+}
+
+ActionSheet.close = (trigger: any) => {
+ if (instance) {
+ instance.clear(trigger);
+ }
+};
+
+ActionSheet.show = (props: Partial) => {
+ create(props);
+};
+
+ActionSheet.install = (app: App, name = '') => {
+ app.component(name || ActionSheetVue.name, ActionSheetVue);
+};
+
+type ActionSheetApi = {
+ /** 关闭ActionSheet */
+ close: () => void;
+};
+
+const _ActionSheet: WithInstallType & ActionSheetApi = ActionSheet as any;
export default _ActionSheet;
diff --git a/src/action-sheet/menu-grid.vue b/src/action-sheet/menu-grid.vue
deleted file mode 100644
index f4067e686..000000000
--- a/src/action-sheet/menu-grid.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-
-
-
-
-
diff --git a/src/action-sheet/menu-list.vue b/src/action-sheet/menu-list.vue
deleted file mode 100644
index 4ae200b61..000000000
--- a/src/action-sheet/menu-list.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-
-
-
-