[breaking change] Actionsheet: rename to ActionSheet

packages/action-sheet/demo/index.vue

@@ -2,7 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show1"
         :actions="actions"
         @select="onSelect"
@@ -11,7 +11,7 @@
 
     <demo-block :title="$t('title2')">
       <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show2"
         :actions="actions"
         :cancel-text="$t('cancel')"
@@ -22,12 +22,12 @@
 
     <demo-block :title="$t('title3')">
       <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show3"
         :title="$t('title')"
       >
         <p>{{ $t('content') }}</p>
-      </van-actionsheet>
+      </van-action-sheet>
     </demo-block>
   </demo-section>
 </template>
@@ -36,20 +36,20 @@
 export default {
   i18n: {
     'zh-CN': {
-      button1: '弹出 Actionsheet',
-      button2: '弹出带取消按钮的 Actionsheet',
-      button3: '弹出带标题的 Actionsheet',
-      title2: '带取消按钮的 Actionsheet',
-      title3: '带标题的 Actionsheet',
+      button1: '弹出 ActionSheet',
+      button2: '弹出带取消按钮的 ActionSheet',
+      button3: '弹出带标题的 ActionSheet',
+      title2: '带取消按钮的 ActionSheet',
+      title3: '带标题的 ActionSheet',
       description: '描述信息',
       disabledOption: '禁用选项'
     },
     'en-US': {
-      button1: 'Show Actionsheet',
-      button2: 'Show Actionsheet with cancel button',
-      button3: 'Show Actionsheet with title',
-      title2: 'Actionsheet with cancel button',
-      title3: 'Actionsheet with title',
+      button1: 'Show ActionSheet',
+      button2: 'Show ActionSheet with cancel button',
+      button3: 'Show ActionSheet with title',
+      title2: 'ActionSheet with cancel button',
+      title3: 'ActionSheet with title',
       description: 'Description',
       disabledOption: 'Disabled Option'
     }
@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style lang="less">
-.demo-actionsheet {
+.demo-action-sheet {
   .van-button {
     margin-left: 15px;
   }

packages/action-sheet/en-US.md

@@ -1,19 +1,19 @@
-## Actionsheet
+## ActionSheet
 
 ### Install
 ``` javascript
-import { Actionsheet } from 'vant';
+import { ActionSheet } from 'vant';
 
-Vue.use(Actionsheet);
+Vue.use(ActionSheet);
 ```
 
 ### Usage
 
 #### Basic Usage
-Use `actions` prop to set options of actionsheet. 
+Use `actions` prop to set options of action-sheet. 
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   @select="onSelect"
@@ -53,10 +53,10 @@ export default {
 }
 ```
 
-#### Actionsheet with cancel button
+#### ActionSheet with cancel button
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="Cancel"
@@ -65,13 +65,13 @@ export default {
 />
 ```
 
-#### Actionsheet with title
-Actionsheet will get another style if there is a `title` prop.
+#### ActionSheet with title
+ActionSheet will get another style if there is a `title` prop.
 
 ```html
-<van-actionsheet v-model="show" title="Title">
+<van-action-sheet v-model="show" title="Title">
   <p>Content</p>
-</van-actionsheet>
+</van-action-sheet>
 ```
 
 ### API
@@ -84,7 +84,7 @@ Actionsheet will get another style if there is a `title` prop.
 | overlay | Whether to show overlay | `Boolean` | `true` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
-| get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - |
+| get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Event

packages/action-sheet/index.less

@@ -1,6 +1,6 @@
 @import '../style/var';
 
-.van-actionsheet {
+.van-action-sheet {
   color: @action-sheet-item-text-color;
   max-height: @action-sheet-max-height;
 

packages/action-sheet/index.tsx

@@ -10,29 +10,29 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 import { PopupMixinProps } from '../mixins/popup/type';
 
-export type ActionsheetItem = {
+export type ActionSheetItem = {
   name: string;
   subname?: string;
   loading?: boolean;
   disabled?: boolean;
   className?: string;
-  callback?: (item: ActionsheetItem) => void;
+  callback?: (item: ActionSheetItem) => void;
 };
 
-export type ActionsheetProps = PopupMixinProps & {
+export type ActionSheetProps = PopupMixinProps & {
   title?: string;
-  actions: ActionsheetItem[];
+  actions: ActionSheetItem[];
   cancelText?: string;
   safeAreaInsetBottom?: boolean;
 };
 
-const [sfc, bem] = use('actionsheet');
+const [sfc, bem] = use('action-sheet');
 
-function Actionsheet(
+function ActionSheet(
   h: CreateElement,
-  props: ActionsheetProps,
+  props: ActionSheetProps,
   slots: DefaultSlots,
-  ctx: RenderContext<ActionsheetProps>
+  ctx: RenderContext<ActionSheetProps>
 ) {
   const { title, cancelText } = props;
 
@@ -48,7 +48,7 @@ function Actionsheet(
     </div>
   );
 
-  const Option = (item: ActionsheetItem, index: number) => (
+  const Option = (item: ActionSheetItem, index: number) => (
     <div
       class={[
         bem('item', { disabled: item.disabled || item.loading }),
@@ -103,7 +103,7 @@ function Actionsheet(
   );
 }
 
-Actionsheet.props = {
+ActionSheet.props = {
   ...PopupMixin.props,
   title: String,
   actions: Array,
@@ -119,4 +119,4 @@ Actionsheet.props = {
   }
 };
 
-export default sfc<ActionsheetProps>(Actionsheet);
+export default sfc<ActionSheetProps>(ActionSheet);

packages/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -2,13 +2,13 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 ActionSheet</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 ActionSheet</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 ActionSheet</span></button>
     <!---->
   </div>
 </div>

packages/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`callback events 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__cancel">Cancel</div>
+</div>
+`;
+
+exports[`disable lazy-render 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__cancel">Cancel</div>
+</div>
+`;

packages/action-sheet/test/index.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '../../../test/utils';
-import Actionsheet from '..';
+import ActionSheet from '..';
 
 test('callback events', () => {
   const callback = jest.fn();
@@ -12,7 +12,7 @@ test('callback events', () => {
     { name: 'Option', disabled: true }
   ];
 
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       value: true,
       actions,
@@ -27,10 +27,10 @@ test('callback events', () => {
     }
   });
 
-  const options = wrapper.findAll('.van-actionsheet__item');
+  const options = wrapper.findAll('.van-action-sheet__item');
   options.at(0).trigger('click');
   options.at(1).trigger('click');
-  wrapper.find('.van-actionsheet__cancel').trigger('click');
+  wrapper.find('.van-action-sheet__cancel').trigger('click');
 
   expect(callback).toHaveBeenCalled();
   expect(onCancel).toHaveBeenCalled();
@@ -40,7 +40,7 @@ test('callback events', () => {
 });
 
 test('disable lazy-render', () => {
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       lazyRender: false,
       actions: [
@@ -55,7 +55,7 @@ test('disable lazy-render', () => {
 });
 
 test('get container', () => {
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       value: true,
       getContainer: 'body'

packages/action-sheet/zh-CN.md

@@ -1,10 +1,10 @@
-## Actionsheet 上拉菜单
+## ActionSheet 上拉菜单
 
 ### 使用指南
 ``` javascript
-import { Actionsheet } from 'vant';
+import { ActionSheet } from 'vant';
 
-Vue.use(Actionsheet);
+Vue.use(ActionSheet);
 ```
 
 ### 代码演示
@@ -14,7 +14,7 @@ Vue.use(Actionsheet);
 需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   @select="onSelect"
@@ -55,12 +55,12 @@ export default {
 }
 ```
 
-#### 带取消按钮的 Actionsheet
+#### 带取消按钮的 ActionSheet
 
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="取消"
@@ -69,14 +69,14 @@ export default {
 />
 ```
 
-#### 带标题的 Actionsheet
+#### 带标题的 ActionSheet
 
-如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
+如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
 
 ```html
-<van-actionsheet v-model="show" title="支持以下配送方式">
+<van-action-sheet v-model="show" title="支持以下配送方式">
   <p>一些内容</p>
-</van-actionsheet>
+</van-action-sheet>
 ```
 
 ### API

packages/actionsheet/test/__snapshots__/index.spec.js.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`callback events 1`] = `
-<div class="van-popup van-popup--bottom van-actionsheet" name="van-popup-slide-bottom">
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__cancel">Cancel</div>
-</div>
-`;
-
-exports[`disable lazy-render 1`] = `
-<div class="van-popup van-popup--bottom van-actionsheet" style="display: none;" name="van-popup-slide-bottom">
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__cancel">Cancel</div>
-</div>
-`;

packages/index.less

@@ -44,7 +44,7 @@
 @import './number-keyboard/index';
 
 /* action components */
-@import './actionsheet/index';
+@import './action-sheet/index';
 @import './dialog/index';
 @import './picker/index';
 @import './pull-refresh/index';

packages/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 // This file is auto gererated by build/build-entry.js
 import { VueConstructor } from 'vue/types';
-import Actionsheet from './actionsheet';
+import ActionSheet from './action-sheet';
 import AddressEdit from './address-edit';
 import AddressList from './address-list';
 import Area from './area';
@@ -82,7 +82,7 @@ declare global {
 
 const version = '1.6.16';
 const components = [
-  Actionsheet,
+  ActionSheet,
   AddressEdit,
   AddressList,
   Area,
@@ -167,7 +167,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 export {
   install,
   version,
-  Actionsheet,
+  ActionSheet,
   AddressEdit,
   AddressList,
   Area,