merge: master

components.json

@@ -31,6 +31,8 @@
   "actionsheet": "./packages/actionsheet/index.js",
   "quantity": "./packages/quantity/index.js",
   "progress": "./packages/progress/index.js",
-  "uploader": "./packages/uploader/index.js"
+  "uploader": "./packages/uploader/index.js",
+  "swipe": "./packages/swipe/index.js",
+  "swipe-item": "./packages/swipe-item/index.js"
 
 }

docs/build/1.js

@@ -1 +1 @@
-webpackJsonp([1],{229:function(t,e,a){a(425);var i=a(0)(a(243),a(373),null,null);t.exports=i.exports},243:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},287:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},373:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},425:function(t,e,a){var i=a(287);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
+webpackJsonp([1],{250:function(t,e,a){a(455);var i=a(0)(a(264),a(401),null,null);t.exports=i.exports},264:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(28),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},309:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},401:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},455:function(t,e,a){var i=a(309);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(29)("1517d9c0",i,!0)}});

docs/examples-dist/field.vue

@@ -10,6 +10,11 @@
   <zan-field type="text" placeholder="请输入用户名"></zan-field>
 </zan-cell-group>
 
+              </example-block><example-block title="带border的输入框">
+                <div class="zan-field-wrapper">
+  <zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
+</div>
+
               </example-block><example-block title="禁用的输入框">
                 <zan-cell-group>
   <zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
@@ -21,7 +26,15 @@
 </zan-cell-group>
 
               </example-block></section></template>
-
+<style>
+@component-namespace demo {
+  @b field {
+    .zan-field-wrapper {
+      padding: 0 10px;
+    }
+  }
+}
+</style>
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 export default {

docs/examples-dist/swipe.vue

@@ -0,0 +1,22 @@
+<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
+                <zan-swipe>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+</zan-swipe>
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b swipe {
+    .zan-swipe {
+      height: 200px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

docs/examples-docs/field.md

@@ -1,3 +1,13 @@
+<style>
+@component-namespace demo {
+  @b field {
+    .zan-field-wrapper {
+      padding: 0 10px;
+    }
+  }
+}
+</style>
+
 <script>
 export default {
   data() {
@@ -38,6 +48,18 @@ export default {
 ```
 :::
 
+### 带border的输入框
+
+传入一个`border`属性。
+
+:::demo 带border的输入框
+```html
+<div class="zan-field-wrapper">
+  <zan-field type="text" placeholder="请输入用户名" border></zan-field>
+</div>
+```
+:::
+
 ### 禁用的输入框
 
 传入`disabled`属性即可。

docs/examples-docs/swipe.md

@@ -0,0 +1,26 @@
+<style>
+@component-namespace demo {
+  @b swipe {
+    .zan-swipe {
+      height: 200px;
+    }
+  }
+}
+</style>
+
+## Swipe
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-swipe>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+  <zan-swipe-item>
+    <img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
+  </zan-swipe-item>
+</zan-swipe>
+```
+:::

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-vue",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "有赞vue wap组件库",
   "main": "lib/zanui.js",
   "style": "lib/zanui-css/index.css",

packages/button/src/button.js

@@ -43,8 +43,8 @@ export default {
   },
 
   methods: {
-    handleClick() {
-      this.$emit('click');
+    handleClick(e) {
+      this.$emit('click', e);
     }
   },
 

packages/checkbox/src/checkbox.vue

@@ -6,7 +6,6 @@
     }">
     <span class="zan-checkbox__input">
       <input
-        ref="input"
         v-model="currentValue"
         type="checkbox"
         class="zan-checkbox__control"

packages/field/src/field.vue

@@ -6,7 +6,8 @@
       'zan-field--hastextarea': type === 'textarea',
       'zan-field--nolabel': !label,
       'zan-field--disabled': disabled,
-      'zan-field--error': error
+      'zan-field--error': error,
+      'zan-field--border': border
     }">
     <textarea
       v-if="type === 'textarea'"
@@ -51,7 +52,8 @@ export default {
     disabled: Boolean,
     error: Boolean,
     readonly: Boolean,
-    maxlength: [String, Number]
+    maxlength: [String, Number],
+    border: Boolean
   },
 
   data() {

packages/radio/src/radio.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    @click="handleRadioClick"
     class="zan-radio"
     :class="{
       'zan-radio--disabled': isDisabled
@@ -17,7 +18,7 @@
       }">
       </span>
     </span>
-    <span class="zan-radio__label">
+    <span class="zan-radio__label" @click="handleLabelClick">
       <slot></slot>
     </span>
   </div>
@@ -44,7 +45,6 @@ export default {
 
     currentValue: {
       get() {
-        console.log(this.value);
         return this.isGroup && this.parentGroup ? this.parentGroup.value : this.value;
       },
 
@@ -62,6 +62,19 @@ export default {
           ? this.parentGroup.disabled || this.disabled
           : this.disabled;
     }
+  },
+
+  methods: {
+    handleLabelClick() {
+      if (this.isDisabled) {
+        return;
+      }
+      this.currentValue = this.name;
+    },
+
+    handleRadioClick() {
+      this.$emit('click');
+    }
   }
 };
 </script>

packages/swipe-item/index.js

@@ -0,0 +1,3 @@
+import SwipeItem from 'packages/swipe/src/swipe-item';
+
+export default SwipeItem;

packages/swipe/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/swipe/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/swipe/index.js

@@ -0,0 +1,3 @@
+import Swipe from './src/swipe';
+
+export default Swipe;

packages/swipe/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/swipe/src/input.js

@@ -0,0 +1,116 @@
+import { EventEmitter, extend, bindEvents, removeEvents } from './utils';
+
+function Input(host, options) {
+  EventEmitter.apply(this, arguments);
+
+  this.isStarting = false;
+  this.startPt = null;
+  this.endPt = null;
+  this.isDeaf = false;
+
+  this.options = extend({
+    listenMoving: false
+  }, options);
+
+  this.host = host;
+  this.onTouchStart = this.onTouchStart.bind(this);
+  this.onTouchMove = this.onTouchMove.bind(this);
+  this.onTouchEnd = this.onTouchEnd.bind(this);
+
+  this.bind(this.host);
+}
+
+Input.prototype = Object.create(new EventEmitter());
+
+extend(Input.prototype, {
+  bind: function(host) {
+
+    bindEvents(host, 'touchstart mousedown', this.onTouchStart);
+    if (this.options.listenMoving) {
+      bindEvents(window, 'touchmove mousemove', this.onTouchMove);
+    }
+    bindEvents(window, 'touchend mouseup touchcancel', this.onTouchEnd);
+  },
+
+  onTouchStart: function(e) {
+    if (this.isDeaf || this.isStarting) {
+      return;
+    }
+    this.isStarting = true;
+    this.orgDirection = null;
+    this.startPt = this.pointerEventToXY(e);
+  },
+
+  onTouchMove: function(e) {
+    if (!this.isStarting) {
+      return;
+    }
+    this.caculate(e);
+  },
+
+  onTouchEnd: function(e) {
+    if (!this.isStarting) {
+      return;
+    }
+    this.isStarting = false;
+    this.caculate(e, true);
+  },
+
+  caculate: function(e, isEnd) {
+    var distY, distX;
+    this.endPt = this.pointerEventToXY(e);
+
+    distY = this.startPt.y - this.endPt.y;
+    distX = this.startPt.x - this.endPt.x;
+
+    if (distY) {
+      this.emit(distY > 0 ? 'up' : 'down', distY, isEnd, e);
+    }
+    if (distX) {
+      this.emit(distX > 0 ? 'left' : 'right', distX, isEnd, e);
+    }
+
+    if (this.orgDirection == null) {
+      this.orgDirection = Math.abs(distX) > Math.abs(distY);
+    }
+
+    this.emit('move', {x: distX, y: distY}, isEnd, e, {orgDirection: this.orgDirection});
+  },
+
+  pointerEventToXY: function(e) {
+    var out = {x: 0, y: 0};
+    var type = e.type;
+    if (e.originalEvent) {
+      e = e.originalEvent;
+    }
+    if (['touchstart', 'touchmove', 'touchend', 'touchcancel'].indexOf(type) > -1) {
+      var touch = e.touches[0] || e.changedTouches[0];
+      out.x = touch.pageX;
+      out.y = touch.pageY;
+    } else if (
+      ['mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave'].indexOf(type) > -1
+    ) {
+      out.x = e.pageX;
+      out.y = e.pageY;
+    }
+    return out;
+  },
+
+  deaf: function() {
+    this.isDeaf = true;
+  },
+
+  undeaf: function() {
+    this.isDeaf = false;
+  },
+
+  destroy: function() {
+    removeEvents(this.host, 'touchstart mousedown', this.onTouchStart);
+    if (this.options.listenMoving) {
+      removeEvents(window, 'touchmove mousemove', this.onTouchMove);
+    }
+    removeEvents(window, 'touchend mouseup touchcancel', this.onTouchEnd);
+  }
+});
+
+export default Input;

packages/swipe/src/scroll.js

@@ -0,0 +1,147 @@
+import { EventEmitter, extend } from './utils'
+
+const setElementsStyles = (elems, styles) => {
+  Array.prototype.forEach.call(elems, item => {
+    extend(item.style, styles)
+  })
+}
+
+function Scroll(wrapElem, options) {
+  EventEmitter.apply(this, arguments);
+  this.wrapElem = wrapElem;
+  this.wrapSize = {
+    width: () => wrapElem.clientWidth,
+    height: () => wrapElem.clientHeight
+  };
+
+  this.options = extend({
+    loop: true,
+    autoPlay: false,
+    startIndex: 0
+  }, options);
+  this.init.apply(this, arguments);
+}
+
+Scroll.prototype = Object.create(new EventEmitter());
+extend(Scroll.prototype, {
+  init: function() {
+    this.update();
+  },
+
+  getCurrentDist: function() {
+    return this.mCache.currentDist;
+  },
+
+  update: function() {
+    const oldPages = this.pages
+    this.pages = this.wrapElem.querySelectorAll('.swp-page');
+    if (oldPages && oldPages.length === this.pages.length) {
+      const isSame = Array.prototype.every.call(this.pages, (elem, index) => {
+        return this.pages[index] === oldPages[index]
+      })
+      if (isSame) {
+        return
+      }
+    }
+    var defaultStyle = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      display: 'block',
+      '-webkit-transform': 'translate3d(-9999px, 0, 0)'
+    };
+    setElementsStyles(this.pages, defaultStyle);
+    this.mCache = {
+      dist: 0,
+      offsetPage: 0
+    };
+
+    this.setCurrentPage(0);
+    this.movePage(this.options.startIndex * this.wrapSize.width(), true);
+  },
+
+  renderPage: function(dist = 0, currentOffsetPage = 0) {
+    var wrapWidth = this.wrapSize.width();
+    var offset = currentOffsetPage * wrapWidth - dist;
+    var page;
+    var leftPage;
+    var rightPage;
+    var leftOffset = offset - wrapWidth;
+    var rightOffset = offset + wrapWidth;
+
+    page = this.getCurrentPage();
+    if (page) {
+      page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
+    }
+
+    leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];
+    if (leftPage) {
+      if (Math.abs(leftOffset) <= wrapWidth) {
+        leftPage.style['-webkit-transform'] = 'translate3d(' + leftOffset + 'px, 0, 0)';
+      } else {
+        if (this.pages.length > 2) {
+          leftPage.style['-webkit-transform'] = 'translate3d(-9999px, 0, 0)';
+        }
+      }
+    }
+
+    rightPage = this.pages[this.mapLoopPage(currentOffsetPage + 1)];
+    if (rightPage) {
+      if (Math.abs(rightOffset) <= wrapWidth) {
+        rightPage.style['-webkit-transform'] = 'translate3d(' + rightOffset + 'px, 0, 0)';
+      } else {
+        if (this.pages.length > 2) {
+          rightPage.style['-webkit-transform'] = 'translate3d(-9999px, 0, 0)';
+        }
+      }
+    }
+  },
+
+  movePage: function(dist, isEnd) {
+    var currentOffsetPage;
+
+    this.mCache.currentDist = dist + this.mCache.dist;
+    if (isEnd) {
+      this.mCache.dist += dist;
+    }
+
+    currentOffsetPage = Math.round(this.mCache.currentDist / this.wrapSize.width()) || 0;
+
+    if (currentOffsetPage !== this.mCache.offsetPage) {
+      this.setCurrentPage(currentOffsetPage);
+
+      // 翻页
+      this.emit('pageChangeEnd', this.getCurrentPage()
+        , this.currentIndex, this.mCache.offsetPage);
+      this.mCache.offsetPage = currentOffsetPage;
+    }
+
+    this.renderPage(this.mCache.currentDist, currentOffsetPage);
+  },
+
+  getCurrentPage: function() {
+    return this.pages[this.currentIndex];
+  },
+
+  mapLoopPage: function(num) {
+    if (this.options.loop) {
+      var direction = num < 0 ? -1 : 1;
+      var l = this.pages.length;
+      return Math.abs(l + direction * Math.abs(num) % l) % l;
+    } else {
+      if (num >= this.pages.length || num < 0) {
+        return this.pages.length;
+      } else {
+        return num;
+      }
+    }
+  },
+
+  setCurrentPage: function(num) {
+    this.currentIndex = this.mapLoopPage(num);
+  }
+});
+
+export default Scroll;

packages/swipe/src/spring_dummy.js

@@ -0,0 +1,147 @@
+import { requestAnimationFrame, cancelAnimationFrame, EventEmitter, extend } from './utils'
+
+function SpringDummy(scroll, input, options) {
+  var wrapElem = scroll.wrapElem;
+  var self = this;
+  EventEmitter.apply(this, arguments);
+
+  this.scroll = scroll;
+  this.input = input;
+  this.input.on('move', this.movementReact.bind(this));
+  this.wrapSize = {
+    width: () => wrapElem.clientWidth,
+    height: () => wrapElem.clientHieght
+  };
+
+  this.options = extend({
+    intervalTween: 3000,
+    threshold: 20
+  }, options);
+
+  if (this.scroll.options.autoPlay) {
+    this.initMove();
+  }
+
+  this.on('bounceEnd', function() {
+    if (self.scroll.options.autoPlay) {
+      self.initMove();
+    }
+
+    self.input.undeaf();
+  }).on('bounceStart', function() {
+    self.input.deaf();
+  });
+
+}
+
+SpringDummy.prototype = Object.create(new EventEmitter());
+extend(SpringDummy.prototype, {
+
+  clearTransition: function() {
+    cancelAnimationFrame(this.transitionReq);
+  },
+
+  movementReact: function(pt, isEnd, e, extra) {
+    if (isEnd) {
+      this.launch(extra.orgDirection ? pt.x : 0);
+    }
+    this.clearMove();
+  },
+
+  launch: function(dist) {
+    var self = this;
+    var direction = dist / Math.abs(dist);
+    var addition = 0;
+    var w = self.wrapSize.width();
+    var tempOffsetPage = Math.round(dist / w);
+    var offsetPage = this.scroll.mCache.offsetPage;
+
+    // 翻到对应页
+    addition = w * tempOffsetPage;
+
+    // addition为0是原位置
+    if (addition === 0) {
+      if (Math.abs(dist) > self.options.threshold) {
+        // 翻到下一页
+        addition = w * direction;
+      }
+    }
+
+    if (!self.scroll.options.loop) {
+      if (offsetPage <= 0) {
+        if (Math.abs(dist) > self.options.threshold && direction > 0) {
+          addition = w * direction;
+        } else {
+          addition = w * (tempOffsetPage - offsetPage);
+        }
+      }
+
+      if (this.scroll.pages.length === 1) {
+        addition = 0;
+      } else if (offsetPage >= this.scroll.pages.length - 1) {
+        if (Math.abs(dist) > self.options.threshold && direction < 0) {
+          addition = w * direction;
+        } else {
+          addition = w * (tempOffsetPage - offsetPage + this.scroll.pages.length - 1);
+        }
+      }
+
+    }
+
+    this.initTween(addition - dist, 150, 'bounce');
+  },
+
+  initTween: function(dist, duration, eventName) {
+    if (dist === 0) {
+      return;
+    }
+    var elapse;
+    var self = this;
+    var startTime = new Date();
+
+    this.cancelTween();
+    this.emit(eventName + 'Start');
+
+    function round() {
+      elapse = new Date() - startTime;
+      if (elapse > duration) {
+        self.emit(eventName, {x: dist}, true);
+        self.emit(eventName + 'End');
+        return;
+      }
+
+      self.emit(eventName, {x: dist / duration * elapse}, false);
+      self.tweenRid = requestAnimationFrame(round);
+    }
+    round();
+  },
+
+  cancelTween: function() {
+    cancelAnimationFrame(this.tweenRid);
+  },
+
+  initMove: function() {
+    var self = this;
+    var scroll = this.scroll;
+    var intervalTween = self.options.intervalTween;
+
+    this.clearMove();
+
+    function round() {
+      if ((scroll.currentIndex === scroll.pages.length - 1) && !scroll.options.loop) {
+        self.initTween(-self.wrapSize.width() * (scroll.pages.length - 1), 200, 'autoPlay');
+      } else {
+        self.initTween(self.wrapSize.width(), 200, 'autoPlay');
+      }
+      self.moveTid = setTimeout(round, intervalTween);
+    }
+    self.moveTid = setTimeout(round, intervalTween);
+  },
+
+  clearMove: function() {
+    clearTimeout(this.moveTid);
+  }
+});
+
+export default SpringDummy;
+

packages/swipe/src/swipe-item.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="zan-swipe-item">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'zan-swipe-item'
+};
+</script>

packages/swipe/src/swipe.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="zan-swipe">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import Input from './input';
+import Scroll from './scroll';
+import SpringDummy from './spring_dummy';
+
+export default {
+  name: 'zan-swipe',
+
+  props: {
+    autoPlay: {
+      type: Boolean,
+      default: false
+    },
+    onPageChangeEnd: {
+      type: Function,
+      default: () => {}
+    }
+  },
+
+  mounted() {
+    this.input = new Input(this.$el, {
+      listenMoving: true
+    });
+
+    this.input.on('move', function(dist, isEnd, e, extra) {
+      if (extra.orgDirection) {
+        e.preventDefault();
+        scroll.movePage(dist.x, isEnd);
+      }
+    });
+
+    this.scroll = new Scroll(this.$el, {
+      autoPlay: this.autoPlay
+    });
+
+    const scroll = this.scroll;
+    scroll.on('pageChangeEnd', this.onPageChangeEnd);
+
+    const dummy = new SpringDummy(scroll, this.input);
+
+    dummy.on('bounce', function(dist, isEnd) {
+      scroll.movePage(dist.x, isEnd);
+    }).on('autoPlay', function(dist, isEnd) {
+      scroll.movePage(dist.x, isEnd);
+    });
+  },
+
+  updated() {
+    this.scroll.update();
+  }
+};
+</script>

packages/swipe/src/utils.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var extend = Object.assign.bind(Object);
+
+function EventEmitter() {
+  this.__events = {};
+}
+EventEmitter.prototype = {
+  on: function(name, cb) {
+    this.__events[name] || (this.__events[name] = []);
+    this.__events[name].push(cb);
+    return this;
+  },
+  emit: function(name) {
+    var arr = this.__events[name];
+    var argus = Array.prototype.slice.call(arguments, 1);
+    var self = this;
+    if (arr) {
+      arr.forEach(function(cb) {
+        cb.apply(self, argus);
+      })
+    }
+  },
+  removeListener: function(name, fn) {
+    if (this.__events[name] == undefined) {
+      return;
+    }
+    let index;
+    if (fn) {
+      index = this.__events[name].indexOf(fn);
+      if (index > 0) {
+        this.__events[name].splice(index, 1);
+      }
+    } else {
+      delete this.__events[name];
+    }
+  }
+};
+
+const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
+              function(callback, element) {
+                return window.setTimeout(callback, 1000 / 60);
+              };
+
+const cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame ||
+              window.webkitCancelAnimationFrame || window.msRequestAnimationFrame ||
+              function(id) {
+                clearTimeout(id);
+              };
+
+const bindEvents = (elem, eventNames, fn) => {
+  eventNames = eventNames.split(/\s+/)
+  eventNames.forEach(eventName => elem.addEventListener(eventName, fn))
+}
+
+const removeEvents = (elem, eventNames, fn) => {
+  eventNames = eventNames.split(/\s+/)
+  eventNames.forEach(eventName => elem.removeEventListener(eventName, fn))
+}
+
+export {
+  extend,
+  EventEmitter,
+  requestAnimationFrame,
+  cancelAnimationFrame,
+  bindEvents,
+  removeEvents
+};
+

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/actionsheet.css

@@ -1,5 +1,6 @@
 @import './common/var.css';
 @import './mixins/border_retina.css';
+@import './popup.css';
 
 @component-namespace zan {
   @b actionsheet {

packages/zanui-css/src/badge.css

@@ -1,5 +1,5 @@
-@import "./common/var.css";
-@import "./mixins/border_retina.css";
+@import './common/var.css';
+@import './mixins/border_retina.css';
 
 @component-namespace zan {
     @b badge-group {

packages/zanui-css/src/card.css

@@ -1,4 +1,4 @@
-@import "./mixins/ellipsis.css";
+@import './mixins/ellipsis.css';
 
 @component-namespace zan {
   @b card {

packages/zanui-css/src/cell.css

@@ -1,5 +1,5 @@
-@import "./common/var.css";
-@import "./mixins/border_retina.css";
+@import './common/var.css';
+@import './mixins/border_retina.css';
 
 @component-namespace zan {
   @b cell-group {

packages/zanui-css/src/checkbox.css

@@ -1,4 +1,4 @@
-@import "./common/var.css";
+@import './common/var.css';
 
 @component-namespace zan {
   @b checkbox {

packages/zanui-css/src/dialog.css

@@ -1,4 +1,5 @@
-@import "./mixins/border_retina.css";
+@import './mixins/border_retina.css';
+@import './popup.css';
 
 @component-namespace zan {
   @b dialog-wrapper {

packages/zanui-css/src/field.css

@@ -1,5 +1,6 @@
-@import "./common/var.css";
-@import "./mixins/border_retina.css";
+@import './common/var.css';
+@import './mixins/border_retina.css';
+@import './cell.css';
 
 @component-namespace zan {
   @b field {
@@ -36,6 +37,21 @@
       }
     }
 
+    @m border {
+      .zan-field__control {
+        padding-left: 10px;
+      }
+
+      &::after {
+        border-radius: 2px;
+        @mixin border-retina (top, right, bottom, left);
+      }
+
+      &:last-child::after {
+        @mixin border-retina (bottom);
+      }
+    }
+
     .zan-cell__title,
     .zan-cell__value {
       float: none;

packages/zanui-css/src/index.css

@@ -26,3 +26,5 @@
 @import './quantity.css';
 @import './progress.css';
 @import './uploader.css';
+@import './swipe.css';
+

packages/zanui-css/src/picker.css

@@ -1,4 +1,4 @@
-@import "./mixins/border_retina.css";
+@import './mixins/border_retina.css';
 
 @component-namespace zan {
   @b picker {

packages/zanui-css/src/popup.css

@@ -6,7 +6,7 @@
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.701961);
-    transition: background-color .5s ease-out;
+    transition: all .5s ease-out;
   }
 
   @b popup {

packages/zanui-css/src/search.css

@@ -1,4 +1,4 @@
-@import "./common/var.css";
+@import './common/var.css';
 
 @component-namespace zan {
     @b search {

packages/zanui-css/src/steps.css

@@ -1,5 +1,5 @@
-@import "./common/var.css";
-@import "./mixins/ellipsis.css";
+@import './common/var.css';
+@import './mixins/ellipsis.css';
 
 @component-namespace zan {
   @b steps {

packages/zanui-css/src/swipe.css

@@ -0,0 +1,24 @@
+@component-namespace zan {
+    @b swipe {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+    }
+
+    @b swipe-item {
+        display: none;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+        &:first-child {
+            display: block;
+        }
+    }
+}

packages/zanui-css/src/switch.css

@@ -1,4 +1,4 @@
-@import "./mixins/border_retina.css";
+@import './mixins/border_retina.css';
 
 @component-namespace zan {
   @b switch { 

packages/zanui-css/src/tab.css

@@ -1,5 +1,6 @@
-@import "./common/var.css";
-@import "./mixins/border_retina.css";
+@import './common/var.css';
+@import './mixins/border_retina.css';
+
 @component-namespace zan {
     @b tabs {
         position: relative;

packages/zanui-css/src/tag.css

@@ -1,5 +1,5 @@
-@import "./common/var.css";
-@import "./mixins/border_retina.css";
+@import './common/var.css';
+@import './mixins/border_retina.css';
 
 @component-namespace zan {
   @b tag {

src/index.js

@@ -31,6 +31,8 @@ import Actionsheet from '../packages/actionsheet/index.js';
 import Quantity from '../packages/quantity/index.js';
 import Progress from '../packages/progress/index.js';
 import Uploader from '../packages/uploader/index.js';
+import Swipe from '../packages/swipe/index.js';
+import SwipeItem from '../packages/swipe-item/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -64,6 +66,8 @@ const install = function(Vue) {
   Vue.component(Quantity.name, Quantity);
   Vue.component(Progress.name, Progress);
   Vue.component(Uploader.name, Uploader);
+  Vue.component(Swipe.name, Swipe);
+  Vue.component(SwipeItem.name, SwipeItem);
 };
 
 // auto install
@@ -73,7 +77,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 module.exports = {
   install,
-  version: '0.0.30',
+  version: '0.0.31',
   Button,
   Switch,
   Field,
@@ -106,5 +110,7 @@ module.exports = {
   Actionsheet,
   Quantity,
   Progress,
-  Uploader
+  Uploader,
+  Swipe,
+  SwipeItem
 };