[breaking change] CellSwipe: rename to SwipeCell (#1652)

packages/cell-swipe/test/__snapshots__/index.spec.js.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`drag and show left part 1`] = `
-<div class="van-cell-swipe">
-  <div class="van-cell-swipe__wrapper">
-    <div class="van-cell-swipe__left"></div>
-    <div class="van-cell-swipe__right"></div>
-  </div>
-</div>
-`;
-
-exports[`drag and show left part 2`] = `
-<div class="van-cell-swipe">
-  <div class="van-cell-swipe__wrapper">
-    <div class="van-cell-swipe__left"></div>
-    <div class="van-cell-swipe__right"></div>
-  </div>
-</div>
-`;
-
-exports[`drag and show left part 3`] = `
-<div class="van-cell-swipe">
-  <div class="van-cell-swipe__wrapper">
-    <div class="van-cell-swipe__left"></div>
-    <div class="van-cell-swipe__right"></div>
-  </div>
-</div>
-`;
-
-exports[`drag and show left part 4`] = `
-<div class="van-cell-swipe">
-  <div class="van-cell-swipe__wrapper">
-    <div class="van-cell-swipe__left"></div>
-    <div class="van-cell-swipe__right"></div>
-  </div>
-</div>
-`;
-
-exports[`drag and show left part 5`] = `
-<div class="van-cell-swipe">
-  <div class="van-cell-swipe__wrapper">
-    <div class="van-cell-swipe__left"></div>
-    <div class="van-cell-swipe__right"></div>
-  </div>
-</div>
-`;

packages/index.js

@@ -9,7 +9,6 @@ import Button from './button';
 import Card from './card';
 import Cell from './cell';
 import CellGroup from './cell-group';
-import CellSwipe from './cell-swipe';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
 import Circle from './circle';
@@ -55,6 +54,7 @@ import Stepper from './stepper';
 import Steps from './steps';
 import SubmitBar from './submit-bar';
 import Swipe from './swipe';
+import SwipeCell from './swipe-cell';
 import SwipeItem from './swipe-item';
 import Switch from './switch';
 import SwitchCell from './switch-cell';
@@ -80,7 +80,6 @@ const components = [
   Card,
   Cell,
   CellGroup,
-  CellSwipe,
   Checkbox,
   CheckboxGroup,
   Circle,
@@ -125,6 +124,7 @@ const components = [
   Steps,
   SubmitBar,
   Swipe,
+  SwipeCell,
   SwipeItem,
   Switch,
   SwitchCell,
@@ -162,7 +162,6 @@ export {
   Card,
   Cell,
   CellGroup,
-  CellSwipe,
   Checkbox,
   CheckboxGroup,
   Circle,
@@ -208,6 +207,7 @@ export {
   Steps,
   SubmitBar,
   Swipe,
+  SwipeCell,
   SwipeItem,
   Switch,
   SwitchCell,

packages/swipe-cell/demo/index.vue

@@ -3,23 +3,23 @@
     <demo-section>
       <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
-        <van-cell-swipe :right-width="65" :left-width="65">
+        <van-swipe-cell :right-width="65" :left-width="65">
           <span slot="left">{{ $t('button1') }}</span>
           <van-cell-group>
             <van-cell :title="$t('title')" :value="$t('content')" />
           </van-cell-group>
           <span slot="right">{{ $t('button2') }}</span>
-        </van-cell-swipe>
+        </van-swipe-cell>
       </demo-block>
 
       <demo-block :title="$t('title2')">
-        <van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+        <van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
           <span slot="left">{{ $t('button1') }}</span>
           <van-cell-group>
             <van-cell :title="$t('title')" :value="$t('content')" />
           </van-cell-group>
           <span slot="right">{{ $t('button2') }}</span>
-        </van-cell-swipe>
+        </van-swipe-cell>
       </demo-block>
     </demo-section>
   </div>
@@ -68,10 +68,10 @@ export default {
 </script>
 
 <style lang="postcss">
-.demo-cell-swipe {
+.demo-swipe-cell {
   user-select: none;
 
-  .van-cell-swipe {
+  .van-swipe-cell {
     &__left,
     &__right {
       color: #FFFFFF;

packages/swipe-cell/en-US.md

@@ -1,10 +1,10 @@
-## CellSwipe
+## SwipeCell
 
 ### Install
 ``` javascript
-import { CellSwipe } from 'vant';
+import { SwipeCell } from 'vant';
 
-Vue.use(CellSwipe);
+Vue.use(SwipeCell);
 ```
 
 ### Usage
@@ -12,25 +12,25 @@ Vue.use(CellSwipe);
 #### Basic Usage
 
 ```html
-<van-cell-swipe :right-width="65" :left-width="65">
+<van-swipe-cell :right-width="65" :left-width="65">
   <span slot="left">Select</span>
   <van-cell-group>
     <van-cell title="Cell" value="Cell Content" />
   </van-cell-group>
   <span slot="right">Delete</span>
-</van-cell-swipe>
+</van-swipe-cell>
 ```
 
 #### Async close
 
 ```html
-<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
   <span slot="left">Select</span>
   <van-cell-group>
     <van-cell title="Cell" value="Cell Content" />
   </van-cell-group>
   <span slot="right">Delete</span>
-</van-cell-swipe>
+</van-swipe-cell>
 ```
 
 ```js
@@ -77,13 +77,13 @@ export default {
 | Argument | Type | Description |
 |-----------|-----------|-----------|
 | clickPosition | `String` | Click positon (`left` `right` `cell` `outside`) |
-| instance | `Object` | CellSwipe instance |
+| instance | `Object` | SwipeCell instance |
 
 ### Methods
 
-Use ref to get CellSwipe instance and call instance methods
+Use ref to get SwipeCell instance and call instance methods
 
 | Name | Attribute | Return value | Description |
 |-----------|-----------|-----------|-------------|
-| open | position: 'left' \| 'right' | - | open CellSwipe |
-| close | - | - | close CellSwipe |
+| open | position: 'left' \| 'right' | - | open SwipeCell |
+| close | - | - | close SwipeCell |

packages/swipe-cell/index.vue

@@ -32,7 +32,7 @@ import Touch from '../mixins/touch';
 const THRESHOLD = 0.15;
 
 export default create({
-  name: 'cell-swipe',
+  name: 'swipe-cell',
 
   mixins: [Touch],
 

packages/swipe-cell/test/__snapshots__/demo.spec.js.snap

@@ -11,9 +11,9 @@ exports[`renders demo correctly 1`] = `
       <!---->
     </div>
     <div>
-      <div class="van-cell-swipe">
-        <div class="van-cell-swipe__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
-          <div class="van-cell-swipe__left"><span>选择</span></div>
+      <div class="van-swipe-cell">
+        <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+          <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
             <div class="van-cell van-hairline">
               <!---->
@@ -24,14 +24,14 @@ exports[`renders demo correctly 1`] = `
               <!---->
             </div>
           </div>
-          <div class="van-cell-swipe__right"><span>删除</span></div>
+          <div class="van-swipe-cell__right"><span>删除</span></div>
         </div>
       </div>
     </div>
     <div>
-      <div class="van-cell-swipe">
-        <div class="van-cell-swipe__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
-          <div class="van-cell-swipe__left"><span>选择</span></div>
+      <div class="van-swipe-cell">
+        <div class="van-swipe-cell__wrapper" style="transform:translate3d(0px, 0, 0);transition:.6s cubic-bezier(0.18, 0.89, 0.32, 1);">
+          <div class="van-swipe-cell__left"><span>选择</span></div>
           <div class="van-cell-group van-hairline--top-bottom">
             <div class="van-cell van-hairline">
               <!---->
@@ -42,7 +42,7 @@ exports[`renders demo correctly 1`] = `
               <!---->
             </div>
           </div>
-          <div class="van-cell-swipe__right"><span>删除</span></div>
+          <div class="van-swipe-cell__right"><span>删除</span></div>
         </div>
       </div>
     </div>

packages/swipe-cell/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`drag and show left part 1`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper">
+    <div class="van-swipe-cell__left"></div>
+    <div class="van-swipe-cell__right"></div>
+  </div>
+</div>
+`;
+
+exports[`drag and show left part 2`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper">
+    <div class="van-swipe-cell__left"></div>
+    <div class="van-swipe-cell__right"></div>
+  </div>
+</div>
+`;
+
+exports[`drag and show left part 3`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper">
+    <div class="van-swipe-cell__left"></div>
+    <div class="van-swipe-cell__right"></div>
+  </div>
+</div>
+`;
+
+exports[`drag and show left part 4`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper">
+    <div class="van-swipe-cell__left"></div>
+    <div class="van-swipe-cell__right"></div>
+  </div>
+</div>
+`;
+
+exports[`drag and show left part 5`] = `
+<div class="van-swipe-cell">
+  <div class="van-swipe-cell__wrapper">
+    <div class="van-swipe-cell__left"></div>
+    <div class="van-swipe-cell__right"></div>
+  </div>
+</div>
+`;

packages/swipe-cell/test/index.spec.js

@@ -1,4 +1,4 @@
-import CellSwipe from '..';
+import SwipeCell from '..';
 import { mount, triggerDrag } from '../../../test/utils';
 
 const defaultProps = {
@@ -9,7 +9,7 @@ const defaultProps = {
 };
 
 it('drag and show left part', () => {
-  const wrapper = mount(CellSwipe, defaultProps);
+  const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, 10, 0);
   expect(wrapper).toMatchSnapshot();
@@ -25,7 +25,7 @@ it('drag and show left part', () => {
 });
 
 it('drag and show left part', () => {
-  const wrapper = mount(CellSwipe, defaultProps);
+  const wrapper = mount(SwipeCell, defaultProps);
 
   triggerDrag(wrapper, -50, 0);
   expect(wrapper).toMatchSnapshot();
@@ -35,7 +35,7 @@ test('on close prop', () => {
   let position;
   let instance;
 
-  const wrapper = mount(CellSwipe, {
+  const wrapper = mount(SwipeCell, {
     propsData: {
       ...defaultProps.propsData,
       onClose(pos, ins) {
@@ -51,10 +51,10 @@ test('on close prop', () => {
   wrapper.trigger('click');
   expect(position).toEqual('cell');
 
-  wrapper.find('.van-cell-swipe__left').trigger('click');
+  wrapper.find('.van-swipe-cell__left').trigger('click');
   expect(position).toEqual('left');
 
-  wrapper.find('.van-cell-swipe__right').trigger('click');
+  wrapper.find('.van-swipe-cell__right').trigger('click');
   expect(position).toEqual('right');
 
   instance.close();

packages/swipe-cell/zh-CN.md

@@ -1,10 +1,10 @@
-## CellSwipe 滑动单元格
+## SwipeCell 滑动单元格
 
 ### 使用指南
 ``` javascript
-import { CellSwipe } from 'vant';
+import { SwipeCell } from 'vant';
 
-Vue.use(CellSwipe);
+Vue.use(SwipeCell);
 ```
 
 ### 代码演示
@@ -12,25 +12,25 @@ Vue.use(CellSwipe);
 #### 基础用法
 
 ```html
-<van-cell-swipe :right-width="65" :left-width="65">
+<van-swipe-cell :right-width="65" :left-width="65">
   <span slot="left">选择</span>
   <van-cell-group>
     <van-cell title="单元格" value="内容" />
   </van-cell-group>
   <span slot="right">删除</span>
-</van-cell-swipe>
+</van-swipe-cell>
 ```
 
 #### 异步关闭
 
 ```html
-<van-cell-swipe :right-width="65" :left-width="65" :on-close="onClose">
+<van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
   <span slot="left">选择</span>
   <van-cell-group>
     <van-cell title="单元格" value="内容" />
   </van-cell-group>
   <span slot="right">删除</span>
-</van-cell-swipe>
+</van-swipe-cell>
 ```
 
 ```js
@@ -77,11 +77,11 @@ export default {
 | 参数 | 类型 | 说明 |
 |-----------|-----------|-----------|
 | clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
-| instance | `Object` | CellSwipe 实例 |
+| instance | `Object` | SwipeCell 实例 |
 
 ### 方法
 
-通过 ref 可以获取到 CellSwipe 实例并调用实例方法
+通过 ref 可以获取到 SwipeCell 实例并调用实例方法
 
 | 方法名 | 参数 | 返回值 | 介绍 |
 |-----------|-----------|-----------|-------------|

packages/vant-css/src/index.css

@@ -46,7 +46,7 @@
 @import './toast.css';
 
 /* high order components */
-@import './cell-swipe.css';
+@import './swipe-cell.css';
 @import './switch-cell.css';
 @import './tree-select.css';
 

packages/vant-css/src/swipe-cell.css

@@ -1,6 +1,6 @@
 @import './common/var.css';
 
-.van-cell-swipe {
+.van-swipe-cell {
   overflow: hidden;
   position: relative;