[new feature] CellSwipe support async controll (#356)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

* [bugfix] Popup overlay style update

* [bugfix] NavBar click event

* [Improvement] optimize build speed

* [new feature] CellSwipe support async controll

docs/demos/views/cell-swipe.vue

@@ -1,15 +1,28 @@
 <template>
-  <demo-section>
+  <div>
-    <demo-block :title="$t('basicUsage')">
+    <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
-      <van-cell-swipe :right-width="65" :left-width="65">
+    <demo-section>
-        <span slot="left">{{ $t('button1') }}</span>
+      <demo-block :title="$t('basicUsage')">
-        <van-cell-group>
+        <van-cell-swipe :right-width="65" :left-width="65">
-          <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
+          <span slot="left">{{ $t('button1') }}</span>
-        </van-cell-group>
+          <van-cell-group>
-        <span slot="right">{{ $t('button2') }}</span>
+            <van-cell :title="$t('title')" :value="$t('content')"></van-cell>
-      </van-cell-swipe>
+          </van-cell-group>
-    </demo-block>
+          <span slot="right">{{ $t('button2') }}</span>
-  </demo-section>
+        </van-cell-swipe>
+      </demo-block>
+
+      <demo-block :title="$t('title2')">
+        <van-cell-swipe :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>
+          </van-cell-group>
+          <span slot="right">{{ $t('button2') }}</span>
+        </van-cell-swipe>
+      </demo-block>
+    </demo-section>
+  </div>
 </template>
 
 <script>
@@ -18,12 +31,37 @@ export default {
     'zh-CN': {
       button1: '选择',
       button2: '删除',
-      title: '单元格'
+      title: '单元格',
+      title2: '异步关闭',
+      confirm: '确定删除吗？',
+      tips: '建议在手机模式下浏览本示例'
     },
     'en-US': {
       button1: 'Select',
       button2: 'Delete',
-      title: 'Cell'
+      title: 'Cell',
+      title2: 'Async close',
+      confirm: 'Are you sure to delete?',
+      tips: 'Please try this demo in mobile mode'
+    }
+  },
+
+  methods: {
+    onClose(clickPosition, instance) {
+      switch (clickPosition) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          Dialog.confirm({
+            message: this.$t('confirm')
+          }).then(() => {
+            instance.close();
+          });
+          break;
+      }
     }
   }
 };
@@ -31,6 +69,8 @@ export default {
 
 <style lang="postcss">
 .demo-cell-swipe {
+  user-select: none;
+
   .van-cell-swipe__left,
   .van-cell-swipe__right {
       color: #FFFFFF;

docs/markdown/en-US/cell-swipe.md

@@ -15,18 +15,54 @@ Vue.component(CellSwipe.name, CellSwipe);
 <van-cell-swipe :right-width="65" :left-width="65">
   <span slot="left">Select</span>
   <van-cell-group>
-    <van-cell title="Cell" value="Cell Content"></van-cell>
+    <van-cell title="Cell" value="Cell Content" />
   </van-cell-group>
   <span slot="right">Delete</span>
 </van-cell-swipe>
 ```
 
+#### Async close
+
+```html
+<van-cell-swipe :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>
+```
+
+```js
+export default {
+  methods: {
+    onClose(clickPosition, instance) {
+      switch (clickPosition) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          Dialog.confirm({
+            message: 'Are you sure to delete?'
+          }).then(() => {
+            instance.close();
+          });
+          break;
+      }
+    }
+  }
+}
+```
+
 ### API
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | left-width | Width of the left scrollable area | `Number` | `0` | - |
 | right-width | Width of the right scrollable area | `Number` | `0` | - |
+| on-close | Callback function before close | `Function` | - | - |
 
 ### Slot
 
@@ -35,3 +71,9 @@ Vue.component(CellSwipe.name, CellSwipe);
 | - | custom content |
 | left | content of left scrollable area |
 | right | content of right scrollabe area |
+
+### onClose Params
+| Argument | Type | Description |
+|-----------|-----------|-----------|
+| clickPosition | `String` | Click positon (`left` `right` `cell` `outside`) |
+| instance | `Object` | CellSwipe instance with a close method |

docs/markdown/zh-CN/cell-swipe.md

@@ -21,12 +21,48 @@ Vue.component(CellSwipe.name, CellSwipe);
 </van-cell-swipe>
 ```
 
+#### 异步关闭
+
+```html
+<van-cell-swipe :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>
+```
+
+```js
+export default {
+  methods: {
+    onClose(clickPosition, instance) {
+      switch (clickPosition) {
+        case 'left':
+        case 'cell':
+        case 'outside':
+          instance.close();
+          break;
+        case 'right':
+          Dialog.confirm({
+            message: '确定删除吗？'
+          }).then(() => {
+            instance.close();
+          });
+          break;
+      }
+    }
+  }
+}
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | left-width | 左侧滑动区域宽度 | `Number` | `0` | - |
 | right-width | 右侧滑动区域宽度 | `Number` | `0` | - |
+| on-close | 关闭时的回调函数 | `Function` | - | - |
 
 ### Slot
 
@@ -35,3 +71,9 @@ Vue.component(CellSwipe.name, CellSwipe);
 | - | 自定义显示内容 |
 | left | 左侧滑动内容 |
 | right | 右侧滑动内容 |
+
+### onClose 参数
+| 参数 | 类型 | 说明 |
+|-----------|-----------|-----------|
+| clickPosition | `String` | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
+| instance | `Object` | CellSwipe 实例，挂载有 close 方法 |

packages/cell-swipe/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div 
-    v-clickoutside:touchstart="swipeMove"
+    v-clickoutside:touchstart="onClick"
     class="van-cell-swipe"
-    @click="swipeMove()"
+    @click="onClick('cell')"
     @touchstart="startDrag"
     @touchmove="onDrag"
     @touchend="endDrag"
     @touchcancel="endDrag"
   >
     <div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
-      <div class="van-cell-swipe__left" v-if="leftWidth">
+      <div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth">
         <slot name="left"></slot>
       </div>
       <slot></slot>
-      <div class="van-cell-swipe__right" v-if="rightWidth">
+      <div class="van-cell-swipe__right" @click.stop="onClick('right')" v-if="rightWidth">
         <slot name="right"></slot>
       </div>
     </div>
@@ -27,6 +27,7 @@ export default {
   name: 'van-cell-swipe',
 
   props: {
+    onClose: Function,
     leftWidth: {
       type: Number,
       default: 0
@@ -56,6 +57,10 @@ export default {
   },
 
   methods: {
+    close() {
+      this.offset = 0;
+    },
+
     resetSwipeStatus() {
       this.swiping = false;
       this.opened = true;
@@ -115,6 +120,18 @@ export default {
       if (this.swiping) {
         this.swipeLeaveTransition(this.offset > 0 ? -1 : 1);
       };
+    },
+
+    onClick(position = 'outside') {
+      if (!this.offset) {
+        return;
+      }
+
+      if (this.onClose) {
+        this.onClose(position, this);
+      } else {
+        this.swipeMove(0);
+      }
     }
   }
 };

test/unit/specs/cell-swipe.spec.js

@@ -27,7 +27,7 @@ describe('CellSwipe', () => {
     expect(wrapper.find('.van-cell-swipe__right').length).to.equal(0);
   });
 
-  it('drag and show left part', () => {
+  it('drag and show left part', done => {
     wrapper = mount(CellSwipe, defaultProps);
 
     triggerTouch(wrapper, 'touchstart', 0, 0);
@@ -41,10 +41,11 @@ describe('CellSwipe', () => {
     expect(wrapper.vm.offset).to.equal(100);
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.opened).to.be.true;
+      done();
     });
   });
 
-  it('drag and show right part', () => {
+  it('drag and show right part', done => {
     wrapper = mount(CellSwipe, defaultProps);
 
     triggerTouch(wrapper, 'touchstart', 0, 0);
@@ -53,6 +54,9 @@ describe('CellSwipe', () => {
     expect(wrapper.vm.offset).to.equal(-100);
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.opened).to.be.true;
+      wrapper.trigger('click');
+      expect(wrapper.vm.offset).to.equal(0);
+      done();
     });
   });
 
@@ -114,4 +118,37 @@ describe('CellSwipe', () => {
     triggerTouch(wrapper, 'touchend', 0, 100);
     expect(wrapper.vm.offset).to.equal(0);
   });
+
+  it('on close prop', () => {
+    let clickPosition;
+    let instance;
+    const onClose = (position, ins) => {
+      clickPosition = position;
+      instance = ins;
+    };
+
+    wrapper = mount(CellSwipe, {
+      propsData: {
+        ...defaultProps.propsData,
+        onClose
+      }
+    });
+
+    wrapper.trigger('click');
+    wrapper.vm.onClick();
+    expect(clickPosition).to.equal(undefined);
+
+    wrapper.vm.offset = 100;
+    wrapper.trigger('click');
+    expect(clickPosition).to.equal('cell');
+
+    wrapper.find('.van-cell-swipe__left')[0].trigger('click');
+    expect(clickPosition).to.equal('left');
+
+    wrapper.find('.van-cell-swipe__right')[0].trigger('click');
+    expect(clickPosition).to.equal('right');
+
+    instance.close();
+    expect(wrapper.vm.offset).to.equal(0);
+  });
 });