diff --git a/src-next/action-sheet/README.md b/src-next/action-sheet/README.md
new file mode 100644
index 000000000..a79ac6ccc
--- /dev/null
+++ b/src-next/action-sheet/README.md
@@ -0,0 +1,191 @@
+# ActionSheet
+
+### Install
+
+```js
+import Vue from 'vue';
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
+```
+
+## Usage
+
+### Basic Usage
+
+Use `actions` prop to set options of action-sheet.
+
+```html
+
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: 'Option 1' },
+ { name: 'Option 2' },
+ { name: 'Option 3' },
+ ],
+ };
+ },
+ methods: {
+ onSelect(item) {
+ this.show = false;
+ Toast(item.name);
+ },
+ },
+};
+```
+
+### Show Cancel Button
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: 'Option 1' },
+ { name: 'Option 2' },
+ { name: 'Option 3' },
+ ],
+ };
+ },
+ methods: {
+ onCancel() {
+ Toast('cancel');
+ },
+ },
+};
+```
+
+### Show Description
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: 'Option 1' },
+ { name: 'Option 2' },
+ { name: 'Option 3', subname: 'Description' },
+ ],
+ };
+ },
+};
+```
+
+### Option Status
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: 'Colored Option', color: '#07c160' },
+ { name: 'Disabled Option', disabled: true },
+ { name: 'Loading Option', loading: true },
+ ],
+ };
+ },
+};
+```
+
+### Custom Panel
+
+```html
+
+ Content
+
+
+
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` |
+| actions | Options | _Action[]_ | `[]` |
+| title | Title | _string_ | - |
+| cancel-text | Text of cancel button | _string_ | - |
+| description `v2.2.8` | Description above the options | _string_ | - |
+| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
+| duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` |
+| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
+| overlay | Whether to show overlay | _boolean_ | `true` |
+| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
+| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
+| close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` |
+| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
+| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
+| get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - |
+
+### Data Structure of Action
+
+| Key | Description | Type |
+| --------- | ---------------------------- | --------- |
+| name | Title | _string_ |
+| subname | Subtitle | _string_ |
+| color | Text color | _string_ |
+| className | className for the option | _any_ |
+| loading | Whether to be loading status | _boolean_ |
+| disabled | Whether to be disabled | _boolean_ |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| select | Triggered when click option | _action: Action, index: number_ |
+| cancel | Triggered when click cancel button | - |
+| open | Triggered when open ActionSheet | - |
+| close | Triggered when close ActionSheet | - |
+| opened | Triggered when opened ActionSheet | - |
+| closed | Triggered when closed ActionSheet | - |
+| click-overlay | Triggered when click overlay | - |
diff --git a/src-next/action-sheet/README.zh-CN.md b/src-next/action-sheet/README.zh-CN.md
new file mode 100644
index 000000000..0993e4e71
--- /dev/null
+++ b/src-next/action-sheet/README.zh-CN.md
@@ -0,0 +1,205 @@
+# ActionSheet 动作面板
+
+### 介绍
+
+底部弹起的模态面板，包含与当前情境相关的多个选项。
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { ActionSheet } from 'vant';
+
+Vue.use(ActionSheet);
+```
+
+## 代码演示
+
+### 基础用法
+
+动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
+
+```html
+
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
+ };
+ },
+ methods: {
+ onSelect(item) {
+ // 默认情况下点击选项时不会自动收起
+ // 可以通过 close-on-click-action 属性开启自动收起
+ this.show = false;
+ Toast(item.name);
+ },
+ },
+};
+```
+
+### 展示取消按钮
+
+设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
+
+```html
+
+```
+
+```js
+import { Toast } from 'vant';
+
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
+ };
+ },
+ methods: {
+ onCancel() {
+ Toast('取消');
+ },
+ },
+};
+```
+
+### 展示描述信息
+
+通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: '选项一' },
+ { name: '选项二' },
+ { name: '选项三', subname: '描述信息' },
+ ],
+ };
+ },
+};
+```
+
+### 选项状态
+
+可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
+
+```html
+
+```
+
+```js
+export default {
+ data() {
+ return {
+ show: false,
+ actions: [
+ { name: '着色选项', color: '#07c160' },
+ { name: '禁用选项', disabled: true },
+ { name: '加载选项', loading: true },
+ ],
+ };
+ },
+};
+```
+
+### 自定义面板
+
+通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏
+
+```html
+
+ 内容
+
+
+
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model (value) | 是否显示动作面板 | _boolean_ | `false` |
+| actions | 面板选项列表 | _Action[]_ | `[]` |
+| title | 顶部标题 | _string_ | - |
+| cancel-text | 取消按钮文字 | _string_ | - |
+| description `v2.2.8` | 选项上方的描述信息 | _string_ | - |
+| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
+| duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` |
+| round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` |
+| overlay | 是否显示遮罩层 | _boolean_ | `true` |
+| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
+| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
+| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
+| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
+| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
+
+### Action 数据结构
+
+`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
+
+| 键名 | 说明 | 类型 |
+| --------- | ------------------------ | --------- |
+| name | 标题 | _string_ |
+| subname | 二级标题 | _string_ |
+| color | 选项文字颜色 | _string_ |
+| className | 为对应列添加额外的 class | _any_ |
+| loading | 是否为加载状态 | _boolean_ |
+| disabled | 是否为禁用状态 | _boolean_ |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ |
+| cancel | 点击取消按钮时触发 | - |
+| open | 打开面板时触发 | - |
+| close | 关闭面板时触发 | - |
+| opened | 打开面板且动画结束后触发 | - |
+| closed | 关闭面板且动画结束后触发 | - |
+| click-overlay | 点击遮罩层时触发 | - |
+
+## 常见问题
+
+### 引入时提示 dependencies not found？
+
+在 1.x 版本中，动作面板的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。
diff --git a/src-next/action-sheet/demo/index.vue b/src-next/action-sheet/demo/index.vue
new file mode 100644
index 000000000..24b0e31fe
--- /dev/null
+++ b/src-next/action-sheet/demo/index.vue
@@ -0,0 +1,154 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ t('content') }}
+
+
+
+
+
+
+
diff --git a/src-next/action-sheet/index.js b/src-next/action-sheet/index.js
new file mode 100644
index 000000000..caf4df4b2
--- /dev/null
+++ b/src-next/action-sheet/index.js
@@ -0,0 +1,167 @@
+// Utils
+import { createNamespace } from '../utils';
+
+// Mixins
+import { popupMixinProps } from '../mixins/popup';
+
+// Components
+import Icon from '../icon';
+import Popup from '../popup';
+import Loading from '../loading';
+
+const [createComponent, bem] = createNamespace('action-sheet');
+
+export default createComponent({
+ props: {
+ ...popupMixinProps,
+ title: String,
+ actions: Array,
+ duration: [Number, String],
+ cancelText: String,
+ description: String,
+ getContainer: [String, Function],
+ closeOnPopstate: Boolean,
+ closeOnClickAction: Boolean,
+ round: {
+ type: Boolean,
+ default: true,
+ },
+ closeIcon: {
+ type: String,
+ default: 'cross',
+ },
+ safeAreaInsetBottom: {
+ type: Boolean,
+ default: true,
+ },
+ overlay: {
+ type: Boolean,
+ default: true,
+ },
+ closeOnClickOverlay: {
+ type: Boolean,
+ default: true,
+ },
+ },
+
+ emits: ['close', 'cancel', 'select', 'update:show'],
+
+ setup(props, { slots, emit }) {
+ function onCancel() {
+ emit('update:show', false);
+ emit('cancel');
+ }
+
+ function onToggle(show) {
+ emit('update:show', show);
+ }
+
+ return function () {
+ const { title, cancelText } = props;
+
+ function Header() {
+ if (title) {
+ return (
+
+ );
+ }
+ }
+
+ function Content() {
+ if (slots.default) {
+ return {slots.default()}
;
+ }
+ }
+
+ function Option(item, index) {
+ const { disabled, loading, callback } = item;
+
+ function onClickOption(event) {
+ event.stopPropagation();
+
+ if (disabled || loading) {
+ return;
+ }
+
+ if (callback) {
+ callback(item);
+ }
+
+ emit('select', item, index);
+
+ if (props.closeOnClickAction) {
+ emit('update:show', false);
+ }
+ }
+
+ function OptionContent() {
+ if (loading) {
+ return ;
+ }
+
+ return [
+ {item.name},
+ item.subname && {item.subname},
+ ];
+ }
+
+ return (
+
+ );
+ }
+
+ function CancelText() {
+ if (cancelText) {
+ return [
+ ,
+ ,
+ ];
+ }
+ }
+
+ const Description = props.description && (
+ {props.description}
+ );
+
+ return (
+
+ {Header()}
+ {Description}
+ {props.actions && props.actions.map(Option)}
+ {Content()}
+ {CancelText()}
+
+ );
+ };
+ },
+});
diff --git a/src-next/action-sheet/index.less b/src-next/action-sheet/index.less
new file mode 100644
index 000000000..4d86492d3
--- /dev/null
+++ b/src-next/action-sheet/index.less
@@ -0,0 +1,89 @@
+@import '../style/var';
+@import '../style/mixins/hairline';
+
+.van-action-sheet {
+ max-height: @action-sheet-max-height;
+ color: @action-sheet-item-text-color;
+
+ &__item,
+ &__cancel {
+ display: block;
+ width: 100%;
+ height: @action-sheet-item-height;
+ padding: 0;
+ font-size: @action-sheet-item-font-size;
+ line-height: 20px;
+ background-color: @action-sheet-item-background;
+ border: none;
+ cursor: pointer;
+
+ &:active {
+ background-color: @active-color;
+ }
+ }
+
+ &__item {
+ &--loading,
+ &--disabled {
+ color: @action-sheet-item-disabled-text-color;
+
+ &:active {
+ background-color: @action-sheet-item-background;
+ }
+ }
+
+ &--disabled {
+ cursor: not-allowed;
+ }
+
+ &--loading {
+ cursor: default;
+ }
+ }
+
+ &__subname {
+ margin-left: @padding-base;
+ color: @action-sheet-subname-color;
+ font-size: @action-sheet-subname-font-size;
+ }
+
+ &__gap {
+ display: block;
+ height: @action-sheet-cancel-padding-top;
+ background-color: @action-sheet-cancel-padding-color;
+ }
+
+ &__header {
+ font-weight: @font-weight-bold;
+ font-size: @action-sheet-header-font-size;
+ line-height: @action-sheet-header-height;
+ text-align: center;
+ }
+
+ &__description {
+ position: relative;
+ padding: 20px @padding-md;
+ color: @action-sheet-description-color;
+ font-size: @action-sheet-description-font-size;
+ line-height: @action-sheet-description-line-height;
+ text-align: center;
+
+ &::after {
+ .hairline-bottom(@cell-border-color, @padding-md, @padding-md);
+ }
+ }
+
+ &__close {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: @action-sheet-close-icon-padding;
+ color: @action-sheet-close-icon-color;
+ font-size: @action-sheet-close-icon-size;
+ line-height: inherit;
+
+ &:active {
+ color: @action-sheet-close-icon-active-color;
+ }
+ }
+}
diff --git a/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap b/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..0b0f77f33
--- /dev/null
+++ b/src-next/action-sheet/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+
+`;
diff --git a/src-next/action-sheet/test/__snapshots__/index.spec.js.snap b/src-next/action-sheet/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..e28dc8120
--- /dev/null
+++ b/src-next/action-sheet/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`callback events 1`] = `
+
+`;
+
+exports[`close-icon prop 1`] = `
+
+`;
+
+exports[`color option 1`] = ``;
+
+exports[`description prop 1`] = `
+
+`;
+
+exports[`disable lazy-render 1`] = `
+
+`;
+
+exports[`render title and default slot 1`] = `
+
+`;
+
+exports[`round prop 1`] = ``;
diff --git a/src-next/action-sheet/test/demo.spec.js b/src-next/action-sheet/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src-next/action-sheet/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src-next/action-sheet/test/index.spec.js b/src-next/action-sheet/test/index.spec.js
new file mode 100644
index 000000000..e07eeca18
--- /dev/null
+++ b/src-next/action-sheet/test/index.spec.js
@@ -0,0 +1,186 @@
+import { mount, later } from '../../../test';
+import ActionSheet from '..';
+
+test('callback events', () => {
+ const callback = jest.fn();
+ const onInput = jest.fn();
+ const onCancel = jest.fn();
+ const onSelect = jest.fn();
+
+ const actions = [
+ { name: 'Option', callback },
+ { name: 'Option', disabled: true },
+ { name: 'Option', loading: true },
+ { name: 'Option', subname: 'Subname' },
+ ];
+
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ actions,
+ cancelText: 'Cancel',
+ },
+ context: {
+ on: {
+ input: onInput,
+ cancel: onCancel,
+ select: onSelect,
+ },
+ },
+ });
+
+ const options = wrapper.findAll('.van-action-sheet__item');
+ options.at(0).trigger('click');
+ options.at(1).trigger('click');
+ wrapper.find('.van-action-sheet__cancel').trigger('click');
+
+ expect(callback).toHaveBeenCalled();
+ expect(onCancel).toHaveBeenCalled();
+ expect(onInput).toHaveBeenCalledWith(false);
+ expect(onSelect).toHaveBeenCalledWith(actions[0], 0);
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('click overlay and close', async () => {
+ const onInput = jest.fn();
+ const onClickOverlay = jest.fn();
+ const div = document.createElement('div');
+
+ mount({
+ template: `
+
+ `,
+ components: {
+ ActionSheet,
+ },
+ data() {
+ return {
+ getContainer: () => div,
+ };
+ },
+ methods: {
+ onInput,
+ onClickOverlay,
+ },
+ });
+
+ await later();
+
+ div.querySelector('.van-overlay').click();
+ expect(onInput).toHaveBeenCalledWith(false);
+ expect(onClickOverlay).toHaveBeenCalledTimes(1);
+});
+
+test('disable lazy-render', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ lazyRender: false,
+ actions: [{ name: 'Option' }, { name: 'Option' }],
+ cancelText: 'Cancel',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('render title and default slot', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ title: 'Title',
+ },
+ scopedSlots: {
+ default() {
+ return 'Default';
+ },
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('get container', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ getContainer: 'body',
+ },
+ });
+
+ expect(wrapper.vm.$el.parentNode).toEqual(document.body);
+});
+
+test('close-on-click-action prop', () => {
+ const onInput = jest.fn();
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ actions: [{ name: 'Option' }],
+ closeOnClickAction: true,
+ },
+ context: {
+ on: {
+ input: onInput,
+ },
+ },
+ });
+
+ const option = wrapper.find('.van-action-sheet__item');
+ option.trigger('click');
+
+ expect(onInput).toHaveBeenCalledWith(false);
+});
+
+test('round prop', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ round: true,
+ actions: [{ name: 'Option' }],
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('color option', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ actions: [{ name: 'Option', color: 'red' }],
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('description prop', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ description: 'This is a description',
+ actions: [{ name: 'Option' }],
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
+
+test('close-icon prop', () => {
+ const wrapper = mount(ActionSheet, {
+ propsData: {
+ value: true,
+ title: 'Title',
+ closeIcon: 'cross',
+ },
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});
diff --git a/src-next/mixins/popup/index.js b/src-next/mixins/popup/index.js
index 9a18f9ee4..0b0c7a43d 100644
--- a/src-next/mixins/popup/index.js
+++ b/src-next/mixins/popup/index.js
@@ -43,8 +43,6 @@ export function PopupMixin(options = {}) {
props: popupMixinProps,
- emits: ['open', 'close', 'update:show', 'click-overlay'],
-
data() {
return {
inited: this.show,
diff --git a/src-next/popup/index.js b/src-next/popup/index.js
index cb28f8d5e..c77cea282 100644
--- a/src-next/popup/index.js
+++ b/src-next/popup/index.js
@@ -39,7 +39,15 @@ export default createComponent({
},
},
- emits: ['click', 'opened', 'closed'],
+ emits: [
+ 'open',
+ 'close',
+ 'click',
+ 'opened',
+ 'closed',
+ 'update:show',
+ 'click-overlay',
+ ],
beforeCreate() {
const createEmitter = (eventName) => (event) =>
diff --git a/vant.config.js b/vant.config.js
index 5ee9aaf2c..4df589682 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -180,10 +180,10 @@ module.exports = {
{
title: '反馈组件',
items: [
- // {
- // path: 'action-sheet',
- // title: 'ActionSheet 动作面板',
- // },
+ {
+ path: 'action-sheet',
+ title: 'ActionSheet 动作面板',
+ },
// {
// path: 'dialog',
// title: 'Dialog 弹出框',
@@ -514,10 +514,10 @@ module.exports = {
{
title: 'Action Components',
items: [
- // {
- // path: 'action-sheet',
- // title: 'ActionSheet',
- // },
+ {
+ path: 'action-sheet',
+ title: 'ActionSheet',
+ },
// {
// path: 'dialog',
// title: 'Dialog',