From 0a14afecd74d66b826658b95d0b6bb64505de18f Mon Sep 17 00:00:00 2001
From: GROOT <pzyme@outlook.com>
Date: Fri, 31 Mar 2017 01:02:04 +0800
Subject: [PATCH 1/4] remove wind-dom for ssr

---
 src/swipe.vue | 986 +++++++++++++++++++++++++++-----------------------
 1 file changed, 526 insertions(+), 460 deletions(-)

diff --git a/src/swipe.vue b/src/swipe.vue
index 860bab8..f60b1fe 100644
--- a/src/swipe.vue
+++ b/src/swipe.vue
@@ -1,484 +1,550 @@
 <style>
-  .mint-swipe {
-    overflow: hidden;
-    position: relative;
-    height: 100%;
-  }
-  .mint-swipe-items-wrap {
-    position: relative;
-    overflow: hidden;
-    height: 100%;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0)
-  }
-  .mint-swipe-items-wrap > div {
-    position: absolute;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    width: 100%;
-    height: 100%;
-    display: none
-  }
-  .mint-swipe-items-wrap > div.is-active {
-    display: block;
-    -webkit-transform: none;
-    transform: none;
-  }
-  .mint-swipe-indicators {
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  .mint-swipe-indicator {
-    width: 8px;
-    height: 8px;
-    display: inline-block;
-    border-radius: 100%;
-    background: #000;
-    opacity: 0.2;
-    margin: 0 3px;
-  }
-  .mint-swipe-indicator.is-active {
-    background: #fff;
-  }
+    .mint-swipe {
+        overflow: hidden;
+        position: relative;
+        height: 100%;
+    }
+
+    .mint-swipe-items-wrap {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0)
+    }
+
+    .mint-swipe-items-wrap > div {
+        position: absolute;
+        -webkit-transform: translateX(-100%);
+        transform: translateX(-100%);
+        width: 100%;
+        height: 100%;
+
+    }
+
+    .mint-swipe-items-wrap > div.is-active {
+        display: block;
+        -webkit-transform: none;
+        transform: none;
+    }
+
+    .mint-swipe-indicators {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+    }
+
+    .mint-swipe-indicator {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        border-radius: 100%;
+        background: #000;
+        opacity: 0.2;
+        margin: 0 3px;
+    }
+
+    .mint-swipe-indicator.is-active {
+        background: #fff;
+    }
 </style>
 
 <template>
-  <div class="mint-swipe">
-    <div class="mint-swipe-items-wrap" ref="wrap">
-      <slot></slot>
-    </div>
-    <div class="mint-swipe-indicators" v-show="showIndicators">
-      <div class="mint-swipe-indicator"
-           v-for="(page, $index) in pages"
-           :class="{ 'is-active': $index === index }"></div>
+    <div class="mint-swipe">
+        <div class="mint-swipe-items-wrap" ref="wrap">
+            <slot></slot>
+        </div>
+        <div class="mint-swipe-indicators" v-show="showIndicators">
+            <div class="mint-swipe-indicator"
+                 v-for="(page, $index) in pages"
+                 :class="{ 'is-active': $index === index }"></div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-  import { once } from 'wind-dom/src/event';
-  import { addClass, removeClass } from 'wind-dom/src/class';
-
-  export default {
-    name: 'mt-swipe',
-
-    created() {
-      this.dragState = {};
-    },
-
-    data() {
-      return {
-        ready: false,
-        dragging: false,
-        userScrolling: false,
-        animating: false,
-        index: 0,
-        pages: [],
-        timer: null,
-        reInitTimer: null,
-        noDrag: false
-      };
-    },
-
-    props: {
-      speed: {
-        type: Number,
-        default: 300
-      },
-
-      auto: {
-        type: Number,
-        default: 3000
-      },
-
-      continuous: {
-        type: Boolean,
-        default: true
-      },
-
-      showIndicators: {
-        type: Boolean,
-        default: true
-      },
-
-      noDragWhenSingle: {
-        type: Boolean,
-        default: true
-      },
-
-      prevent: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    methods: {
-      swipeItemCreated() {
-        if (!this.ready) return;
-
-        clearTimeout(this.reInitTimer);
-        this.reInitTimer = setTimeout(() => {
-          this.reInitPages();
-        }, 100);
-      },
-
-      swipeItemDestroyed() {
-        if (!this.ready) return;
-
-        clearTimeout(this.reInitTimer);
-        this.reInitTimer = setTimeout(() => {
-          this.reInitPages();
-        }, 100);
-      },
-
-      translate(element, offset, speed, callback) {
-        if (speed) {
-          this.animating = true;
-          element.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease-in-out';
-          setTimeout(() => {
-            element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
-          }, 50);
-
-          var called = false;
-
-          var transitionEndCallback = () => {
-            if (called) return;
-            called = true;
-            this.animating = false;
-            element.style.webkitTransition = '';
-            element.style.webkitTransform = '';
-            if (callback) {
-              callback.apply(this, arguments);
-            }
-          };
 
-          once(element, 'webkitTransitionEnd', transitionEndCallback);
-          setTimeout(transitionEndCallback, speed + 100); // webkitTransitionEnd maybe not fire on lower version android.
-        } else {
-          element.style.webkitTransition = '';
-          element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
+    function hasClass(el, className) {
+        if (el.classList)
+            return el.classList.contains(className)
+        else
+            return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
+    }
+
+    function addClass(el, className) {
+        if (el.classList)
+            el.classList.add(className)
+        else if (!hasClass(el, className)) el.className += " " + className
+    }
+
+    function removeClass(el, className) {
+        if (el.classList)
+            el.classList.remove(className)
+        else if (hasClass(el, className)) {
+            var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
+            el.className = el.className.replace(reg, ' ')
         }
-      },
-
-      reInitPages() {
-        var children = this.$children;
-        this.noDrag = children.length === 1 && this.noDragWhenSingle;
-
-        var pages = [];
-        this.index = 0;
-
-        children.forEach(function(child, index) {
-          pages.push(child.$el);
-
-          removeClass(child.$el, 'is-active');
-
-          if (index === 0) {
-            addClass(child.$el, 'is-active');
-          }
-        });
-
-        this.pages = pages;
-      },
-
-      doAnimate(towards, options) {
-        if (this.$children.length === 0) return;
-        if (!options && this.$children.length < 2) return;
-
-        var prevPage, nextPage, currentPage, pageWidth, offsetLeft;
-        var speed = this.speed || 300;
-        var index = this.index;
-        var pages = this.pages;
-        var pageCount = pages.length;
-
-        if (!options) {
-          pageWidth = this.$el.clientWidth;
-          currentPage = pages[index];
-          prevPage = pages[index - 1];
-          nextPage = pages[index + 1];
-          if (this.continuous && pages.length > 1) {
-            if (!prevPage) {
-              prevPage = pages[pages.length - 1];
+    }
+    export default {
+        name: 'mt-swipe',
+
+        created() {
+            this.dragState = {};
+        },
+
+        data() {
+            return {
+                ready: false,
+                dragging: false,
+                userScrolling: false,
+                animating: false,
+                index: 0,
+                pages: [],
+                timer: null,
+                reInitTimer: null,
+                noDrag: false
+            };
+        },
+
+        props: {
+            speed: {
+                type: Number,
+                default: 300
+            },
+
+            auto: {
+                type: Number,
+                default: 3000
+            },
+
+            continuous: {
+                type: Boolean,
+                default: true
+            },
+
+            showIndicators: {
+                type: Boolean,
+                default: true
+            },
+
+            noDragWhenSingle: {
+                type: Boolean,
+                default: true
+            },
+
+            prevent: {
+                type: Boolean,
+                default: false
+            },
+
+            defaultIndex: {
+                type: Number,
+                default: 0
             }
-            if (!nextPage) {
-              nextPage = pages[0];
+        },
+
+        methods: {
+            swipeItemCreated() {
+                if (!this.ready) return;
+
+                clearTimeout(this.reInitTimer);
+                this.reInitTimer = setTimeout(() => {
+                    this.reInitPages();
+                }, 100);
+            },
+
+            swipeItemDestroyed() {
+                if (!this.ready) return;
+
+                clearTimeout(this.reInitTimer);
+                this.reInitTimer = setTimeout(() => {
+                    this.reInitPages();
+                }, 100);
+            },
+
+            translate(element, offset, speed, callback) {
+                if (speed) {
+                    this.animating = true;
+                    element.style.webkitTransition = '-webkit-transform ' + speed + 'ms ease-in-out';
+                    setTimeout(() => {
+                        element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
+                    }, 50);
+
+                    var called = false;
+
+                    var transitionEndCallback = () => {
+                        if (called) return;
+                        called = true;
+                        this.animating = false;
+                        element.style.webkitTransition = '';
+                        element.style.webkitTransform = '';
+                        for (let i in this.pages) {
+                            this.pages[i].style = "";
+                        }
+                        if (callback) {
+                            callback.apply(this, arguments);
+                        }
+                    };
+
+                    if (document.addEventListener) {
+                        element.addEventListener('webkitTransitionEnd', transitionEndCallback, false);
+                    } else {
+                        element.attachEvent('onwebkitTransitionEnd', transitionEndCallback);
+                    }
+                    setTimeout(transitionEndCallback, speed + 100); // webkitTransitionEnd maybe not fire on lower version android.
+                } else {
+                    element.style.webkitTransition = '';
+                    element.style.webkitTransform = `translate3d(${offset}px, 0, 0)`;
+                }
+            },
+
+
+            reInitPages() {
+                var children = this.$children;
+                this.noDrag = children.length === 1 && this.noDragWhenSingle;
+
+                var pages = [];
+                this.index = this.defaultIndex;
+
+                children.forEach((child, index) => {
+                    pages.push(child.$el);
+
+                    removeClass(child.$el, 'is-active');
+
+                    if (index === this.defaultIndex) {
+                        addClass(child.$el, 'is-active');
+                    }
+                });
+
+                this.setActiveClass(this.index, pages.length);
+                this.pages = pages;
+            },
+
+            setActiveClass(index, pageCount) {
+                for (let i in this.$children) {
+                    removeClass(this.$children[i].$el, 'before-active')
+                    removeClass(this.$children[i].$el, 'after-active')
+
+                }
+                if (index - 1 > -1) {
+                    addClass(this.$children[index - 1].$el, 'before-active')
+                } else {
+                    addClass(this.$children[pageCount - 1].$el, 'before-active')
+                }
+                if (index + 1 < pageCount) {
+                    addClass(this.$children[index + 1].$el, 'after-active')
+                } else {
+                    addClass(this.$children[0].$el, 'after-active')
+                }
+            },
+
+            doAnimate(towards, options) {
+                if (this.$children.length === 0) return;
+                if (!options && this.$children.length < 2) return;
+
+                var prevPage, nextPage, currentPage, pageWidth, offsetLeft;
+                var speed = this.speed || 300;
+                var index = this.index;
+                var pages = this.pages;
+                var pageCount = pages.length;
+
+                if (!options) {
+                    pageWidth = this.$el.clientWidth;
+                    currentPage = pages[index];
+                    prevPage = pages[index - 1];
+                    nextPage = pages[index + 1];
+                    if (this.continuous && pages.length > 1) {
+                        if (!prevPage) {
+                            prevPage = pages[pages.length - 1];
+                        }
+                        if (!nextPage) {
+                            nextPage = pages[0];
+                        }
+                    }
+                    if (prevPage) {
+                        prevPage.style.display = 'block';
+                        this.translate(prevPage, -pageWidth);
+                    }
+                    if (nextPage) {
+                        nextPage.style.display = 'block';
+                        this.translate(nextPage, pageWidth);
+                    }
+                } else {
+                    prevPage = options.prevPage;
+                    currentPage = options.currentPage;
+                    nextPage = options.nextPage;
+                    pageWidth = options.pageWidth;
+                    offsetLeft = options.offsetLeft;
+                }
+
+                var newIndex;
+
+                var oldPage = this.$children[index].$el;
+
+
+                if (towards === 'prev') {
+                    if (index > 0) {
+                        newIndex = index - 1;
+                    }
+                    if (this.continuous && index === 0) {
+                        newIndex = pageCount - 1;
+                    }
+                } else if (towards === 'next') {
+                    if (index < pageCount - 1) {
+                        newIndex = index + 1;
+                    }
+                    if (this.continuous && index === pageCount - 1) {
+                        newIndex = 0;
+                    }
+                }
+
+
+                var callback = () => {
+                    if (newIndex !== undefined) {
+                        var newPage = this.$children[newIndex].$el;
+                        removeClass(oldPage, 'is-active');
+                        addClass(newPage, 'is-active');
+
+                        this.index = newIndex;
+                    }
+
+                    if (prevPage) {
+                        prevPage.style.display = '';
+                    }
+
+                    if (nextPage) {
+                        nextPage.style.display = '';
+                    }
+                };
+
+                setTimeout(() => {
+                    if (towards === 'next') {
+                        this.translate(currentPage, -pageWidth, speed, callback);
+                        if (nextPage) {
+                            this.translate(nextPage, 0, speed);
+                        }
+                    } else if (towards === 'prev') {
+                        this.translate(currentPage, pageWidth, speed, callback);
+                        if (prevPage) {
+                            this.translate(prevPage, 0, speed);
+                        }
+                    } else {
+                        this.translate(currentPage, 0, speed, callback);
+                        if (typeof offsetLeft !== 'undefined') {
+                            if (prevPage && offsetLeft > 0) {
+                                this.translate(prevPage, pageWidth * -1, speed);
+                            }
+                            if (nextPage && offsetLeft < 0) {
+                                this.translate(nextPage, pageWidth, speed);
+                            }
+                        } else {
+                            if (prevPage) {
+                                this.translate(prevPage, pageWidth * -1, speed);
+                            }
+                            if (nextPage) {
+                                this.translate(nextPage, pageWidth, speed);
+                            }
+                        }
+                    }
+
+                    this.setActiveClass(newIndex, pageCount)
+
+                }, 10);
+            },
+
+            next() {
+                this.doAnimate('next');
+            },
+
+            prev() {
+                this.doAnimate('prev');
+            },
+
+            doOnTouchStart(event) {
+                if (this.noDrag) return;
+
+                var element = this.$el;
+                var dragState = this.dragState;
+                var touch = event.type == 'mousedown' ? event : event.touches[0];
+
+                dragState.startTime = new Date();
+                dragState.startLeft = touch.pageX;
+                dragState.startTop = touch.pageY;
+                dragState.startTopAbsolute = touch.clientY;
+
+                dragState.pageWidth = element.offsetWidth;
+                dragState.pageHeight = element.offsetHeight;
+
+                var prevPage = this.$children[this.index - 1];
+                var dragPage = this.$children[this.index];
+                var nextPage = this.$children[this.index + 1];
+
+                if (this.continuous && this.pages.length > 1) {
+                    if (!prevPage) {
+                        prevPage = this.$children[this.$children.length - 1];
+                    }
+                    if (!nextPage) {
+                        nextPage = this.$children[0];
+                    }
+                }
+
+                dragState.prevPage = prevPage ? prevPage.$el : null;
+                dragState.dragPage = dragPage ? dragPage.$el : null;
+                dragState.nextPage = nextPage ? nextPage.$el : null;
+
+                if (dragState.prevPage) {
+                    dragState.prevPage.style.display = 'block';
+                }
+
+                if (dragState.nextPage) {
+                    dragState.nextPage.style.display = 'block';
+                }
+            },
+
+            doOnTouchMove(event) {
+                if (this.noDrag) return;
+
+                var dragState = this.dragState;
+                var touch = event.type == 'mousemove' ? event : event.touches[0];
+
+                dragState.currentLeft = touch.pageX;
+                dragState.currentTop = touch.pageY;
+                dragState.currentTopAbsolute = touch.clientY;
+
+                var offsetLeft = dragState.currentLeft - dragState.startLeft;
+                var offsetTop = dragState.currentTopAbsolute - dragState.startTopAbsolute;
+
+                var distanceX = Math.abs(offsetLeft);
+                var distanceY = Math.abs(offsetTop);
+                if (distanceX < 5 || (distanceX >= 5 && distanceY >= 1.73 * distanceX)) {
+                    this.userScrolling = true;
+                    return;
+                } else {
+                    this.userScrolling = false;
+                    event.preventDefault();
+                }
+                offsetLeft = Math.min(Math.max(-dragState.pageWidth + 1, offsetLeft), dragState.pageWidth - 1);
+
+                var towards = offsetLeft < 0 ? 'next' : 'prev';
+
+                if (dragState.prevPage && towards === 'prev') {
+                    this.translate(dragState.prevPage, offsetLeft - dragState.pageWidth);
+                }
+                this.translate(dragState.dragPage, offsetLeft);
+                if (dragState.nextPage && towards === 'next') {
+                    this.translate(dragState.nextPage, offsetLeft + dragState.pageWidth);
+                }
+            },
+
+            doOnTouchEnd() {
+                if (this.noDrag) return;
+
+                var dragState = this.dragState;
+
+                var dragDuration = new Date() - dragState.startTime;
+                var towards = null;
+
+                var offsetLeft = dragState.currentLeft - dragState.startLeft;
+                var offsetTop = dragState.currentTop - dragState.startTop;
+                var pageWidth = dragState.pageWidth;
+                var index = this.index;
+                var pageCount = this.pages.length;
+
+                if (dragDuration < 300) {
+                    let fireTap = Math.abs(offsetLeft) < 5 && Math.abs(offsetTop) < 5;
+                    if (isNaN(offsetLeft) || isNaN(offsetTop)) {
+                        fireTap = true;
+                    }
+                    if (fireTap) {
+                        this.$children[this.index].$emit('tap');
+                    }
+                }
+
+                if (dragDuration < 300 && dragState.currentLeft === undefined) return;
+
+                if (dragDuration < 300 || Math.abs(offsetLeft) > pageWidth / 2) {
+                    towards = offsetLeft < 0 ? 'next' : 'prev';
+                }
+
+                if (!this.continuous) {
+                    if ((index === 0 && towards === 'prev') || (index === pageCount - 1 && towards === 'next')) {
+                        towards = null;
+                    }
+                }
+
+                if (this.$children.length < 2) {
+                    towards = null;
+                }
+
+                this.doAnimate(towards, {
+                    offsetLeft: offsetLeft,
+                    pageWidth: dragState.pageWidth,
+                    prevPage: dragState.prevPage,
+                    currentPage: dragState.dragPage,
+                    nextPage: dragState.nextPage
+                });
+
+                this.dragState = {};
             }
-          }
-          if (prevPage) {
-            prevPage.style.display = 'block';
-            this.translate(prevPage, -pageWidth);
-          }
-          if (nextPage) {
-            nextPage.style.display = 'block';
-            this.translate(nextPage, pageWidth);
-          }
-        } else {
-          prevPage = options.prevPage;
-          currentPage = options.currentPage;
-          nextPage = options.nextPage;
-          pageWidth = options.pageWidth;
-          offsetLeft = options.offsetLeft;
-        }
-
-        var newIndex;
-
-        var oldPage = this.$children[index].$el;
-
-        if (towards === 'prev') {
-          if (index > 0) {
-            newIndex = index - 1;
-          }
-          if (this.continuous && index === 0) {
-            newIndex = pageCount - 1;
-          }
-        } else if (towards === 'next') {
-          if (index < pageCount - 1) {
-            newIndex = index + 1;
-          }
-          if (this.continuous && index === pageCount - 1) {
-            newIndex = 0;
-          }
-        }
+        },
 
-        var callback = () => {
-          if (newIndex !== undefined) {
-            var newPage = this.$children[newIndex].$el;
-            removeClass(oldPage, 'is-active');
-            addClass(newPage, 'is-active');
-
-            this.index = newIndex;
-          }
-
-          if (prevPage) {
-            prevPage.style.display = '';
-          }
-
-          if (nextPage) {
-            nextPage.style.display = '';
-          }
-        };
-
-        setTimeout(() => {
-          if (towards === 'next') {
-            this.translate(currentPage, -pageWidth, speed, callback);
-            if (nextPage) {
-              this.translate(nextPage, 0, speed);
+        destroyed() {
+            if (this.timer) {
+                clearInterval(this.timer);
+                this.timer = null;
             }
-          } else if (towards === 'prev') {
-            this.translate(currentPage, pageWidth, speed, callback);
-            if (prevPage) {
-              this.translate(prevPage, 0, speed);
+            if (this.reInitTimer) {
+                clearTimeout(this.reInitTimer);
+                this.reInitTimer = null;
             }
-          } else {
-            this.translate(currentPage, 0, speed, callback);
-            if (typeof offsetLeft !== 'undefined') {
-              if (prevPage && offsetLeft > 0) {
-                this.translate(prevPage, pageWidth * -1, speed);
-              }
-              if (nextPage && offsetLeft < 0) {
-                this.translate(nextPage, pageWidth, speed);
-              }
-            } else {
-              if (prevPage) {
-                this.translate(prevPage, pageWidth * -1, speed);
-              }
-              if (nextPage) {
-                this.translate(nextPage, pageWidth, speed);
-              }
-            }
-          }
-        }, 10);
-      },
-
-      next() {
-        this.doAnimate('next');
-      },
-
-      prev() {
-        this.doAnimate('prev');
-      },
-
-      doOnTouchStart(event) {
-        if (this.noDrag) return;
-
-        var element = this.$el;
-        var dragState = this.dragState;
-        var touch = event.touches[0];
-
-        dragState.startTime = new Date();
-        dragState.startLeft = touch.pageX;
-        dragState.startTop = touch.pageY;
-        dragState.startTopAbsolute = touch.clientY;
-
-        dragState.pageWidth = element.offsetWidth;
-        dragState.pageHeight = element.offsetHeight;
-
-        var prevPage = this.$children[this.index - 1];
-        var dragPage = this.$children[this.index];
-        var nextPage = this.$children[this.index + 1];
-
-        if (this.continuous && this.pages.length > 1) {
-          if (!prevPage) {
-            prevPage = this.$children[this.$children.length - 1];
-          }
-          if (!nextPage) {
-            nextPage = this.$children[0];
-          }
-        }
-
-        dragState.prevPage = prevPage ? prevPage.$el : null;
-        dragState.dragPage = dragPage ? dragPage.$el : null;
-        dragState.nextPage = nextPage ? nextPage.$el : null;
-
-        if (dragState.prevPage) {
-          dragState.prevPage.style.display = 'block';
-        }
-
-        if (dragState.nextPage) {
-          dragState.nextPage.style.display = 'block';
-        }
-      },
-
-      doOnTouchMove(event) {
-        if (this.noDrag) return;
-
-        var dragState = this.dragState;
-        var touch = event.touches[0];
+        },
 
-        dragState.currentLeft = touch.pageX;
-        dragState.currentTop = touch.pageY;
-        dragState.currentTopAbsolute = touch.clientY;
-
-        var offsetLeft = dragState.currentLeft - dragState.startLeft;
-        var offsetTop = dragState.currentTopAbsolute - dragState.startTopAbsolute;
-
-        var distanceX = Math.abs(offsetLeft);
-        var distanceY = Math.abs(offsetTop);
-        if (distanceX < 5 || (distanceX >= 5 && distanceY >= 1.73 * distanceX)) {
-          this.userScrolling = true;
-          return;
-        } else {
-          this.userScrolling = false;
-          event.preventDefault();
-        }
-        offsetLeft = Math.min(Math.max(-dragState.pageWidth + 1, offsetLeft), dragState.pageWidth - 1);
+        mounted() {
+            this.ready = true;
 
-        var towards = offsetLeft < 0 ? 'next' : 'prev';
-
-        if (dragState.prevPage && towards === 'prev') {
-          this.translate(dragState.prevPage, offsetLeft - dragState.pageWidth);
-        }
-        this.translate(dragState.dragPage, offsetLeft);
-        if (dragState.nextPage && towards === 'next') {
-          this.translate(dragState.nextPage, offsetLeft + dragState.pageWidth);
-        }
-      },
-
-      doOnTouchEnd() {
-        if (this.noDrag) return;
-
-        var dragState = this.dragState;
-
-        var dragDuration = new Date() - dragState.startTime;
-        var towards = null;
-
-        var offsetLeft = dragState.currentLeft - dragState.startLeft;
-        var offsetTop = dragState.currentTop - dragState.startTop;
-        var pageWidth = dragState.pageWidth;
-        var index = this.index;
-        var pageCount = this.pages.length;
-
-        if (dragDuration < 300) {
-          let fireTap = Math.abs(offsetLeft) < 5 && Math.abs(offsetTop) < 5;
-          if (isNaN(offsetLeft) || isNaN(offsetTop)) {
-            fireTap = true;
-          }
-          if (fireTap) {
-            this.$children[this.index].$emit('tap');
-          }
-        }
+            if (this.auto > 0) {
+                this.timer = setInterval(() => {
+                    if (!this.dragging && !this.animating) {
+                        this.next();
+                    }
+                }, this.auto);
+            }
 
-        if (dragDuration < 300 && dragState.currentLeft === undefined) return;
+            this.reInitPages();
 
-        if (dragDuration < 300 || Math.abs(offsetLeft) > pageWidth / 2) {
-          towards = offsetLeft < 0 ? 'next' : 'prev';
-        }
+            var element = this.$el;
 
-        if (!this.continuous) {
-          if ((index === 0 && towards === 'prev') || (index === pageCount - 1 && towards === 'next')) {
-            towards = null;
-          }
-        }
+            function addListenerMulti(el, s, fn) {
+                s.split(' ').forEach(e => el.addEventListener(e, fn, false));
+            }
 
-        if (this.$children.length < 2) {
-          towards = null;
-        }
+            addListenerMulti(element, "touchstart mousedown", (event) => {
+                if (this.prevent) {
+                    event.preventDefault();
+                }
+                if (this.animating) return;
+                this.dragging = true;
+                this.userScrolling = false;
+                this.doOnTouchStart(event);
+            })
+
+            addListenerMulti(element, "touchmove mousemove", (event) => {
+                if (!this.dragging) return;
+                this.doOnTouchMove(event);
+            })
+            addListenerMulti(element, "touchend mouseup", (event) => {
+                if (this.userScrolling) {
+                    this.dragging = false;
+                    this.dragState = {};
+                    return;
+                }
+                if (!this.dragging) return;
+                this.doOnTouchEnd(event);
+                this.dragging = false;
+            })
 
-        this.doAnimate(towards, {
-          offsetLeft: offsetLeft,
-          pageWidth: dragState.pageWidth,
-          prevPage: dragState.prevPage,
-          currentPage: dragState.dragPage,
-          nextPage: dragState.nextPage
-        });
-
-        this.dragState = {};
-      }
-    },
-
-    destroyed() {
-      if (this.timer) {
-        clearInterval(this.timer);
-        this.timer = null;
-      }
-      if (this.reInitTimer) {
-        clearTimeout(this.reInitTimer);
-        this.reInitTimer = null;
-      }
-    },
-
-    mounted() {
-      this.ready = true;
-
-      if (this.auto > 0) {
-        this.timer = setInterval(() => {
-          if (!this.dragging && !this.animating) {
-            this.next();
-          }
-        }, this.auto);
-      }
-
-      this.reInitPages();
-
-      var element = this.$el;
-
-      element.addEventListener('touchstart', (event) => {
-        if (this.prevent) {
-          event.preventDefault();
         }
-        if (this.animating) return;
-        this.dragging = true;
-        this.userScrolling = false;
-        this.doOnTouchStart(event);
-      });
-
-      element.addEventListener('touchmove', (event) => {
-        if (!this.dragging) return;
-        this.doOnTouchMove(event);
-      });
-
-      element.addEventListener('touchend', (event) => {
-        if (this.userScrolling) {
-          this.dragging = false;
-          this.dragState = {};
-          return;
-        }
-        if (!this.dragging) return;
-        this.doOnTouchEnd(event);
-        this.dragging = false;
-      });
-    }
-  };
+    };
 </script>

From 3df4e9d3483a6ca3ac7656f773dce10e862984e5 Mon Sep 17 00:00:00 2001
From: GROOT <pzyme@outlook.com>
Date: Sat, 1 Apr 2017 14:07:05 +0800
Subject: [PATCH 2/4] fix TypeError: Attempted to assign to readonly property
 in Safari

---
 src/swipe.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/swipe.vue b/src/swipe.vue
index f60b1fe..91a9c6c 100644
--- a/src/swipe.vue
+++ b/src/swipe.vue
@@ -181,7 +181,8 @@
                         element.style.webkitTransition = '';
                         element.style.webkitTransform = '';
                         for (let i in this.pages) {
-                            this.pages[i].style = "";
+                            this.pages[i].style.webkitTransition = "";
+                            this.pages[i].style.webkitTransform = "";
                         }
                         if (callback) {
                             callback.apply(this, arguments);

From 3d8a77045b21127fc026959d7f6facd3ae794a57 Mon Sep 17 00:00:00 2001
From: GROOT <pzyme@outlook.com>
Date: Sat, 1 Apr 2017 15:59:34 +0800
Subject: [PATCH 3/4] add event `animate end`

---
 README.MD          | 163 ++++++++++++++++++---------------------------
 dist/vue-swipe.css |   2 +-
 dist/vue-swipe.js  |   2 +-
 package.json       |  12 ++--
 src/swipe.vue      |   4 ++
 5 files changed, 77 insertions(+), 106 deletions(-)

diff --git a/README.MD b/README.MD
index 0f22fd4..4640fb5 100644
--- a/README.MD
+++ b/README.MD
@@ -1,64 +1,28 @@
-# Overview
+### Overview
 
 vue-swipe is a touch slider for vue.js.
 
-# Install
+forked from [ElemeFE/vue-swipe](https://github.com/ElemeFE/vue-swipe)
 
-```bash
-$ npm install vue-swipe
-```
-
-# Install
-
-## Import using module
-Import components to your project:
+* support ssr
+* fix defaultIndex
+* support mouse event
+* ...
 
-```JavaScript
-require('vue-swipe/dist/vue-swipe.css');
-
-// in ES6 modules
-import { Swipe, SwipeItem } from 'vue-swipe';
-
-// in CommonJS
-const { Swipe, SwipeItem } = require('vue-swipe');
-
-// in Global variable
-const { Swipe, SwipeItem } = VueSwipe;
-```
+### Install
 
-And register components:
-
-```javascript
-Vue.component('swipe', Swipe);
-Vue.component('swipe-item', SwipeItem);
-```
-
-## Import using script tag
-
-``` HTML
-<link rel="stylesheet" href="../node-modules/vue-swipe/dist/vue-swipe.css" charset="utf-8">
-<script src="../node-modules/vue-swipe/dist/vue-swipe.js"></script>
+```bash
+$ npm install vue-slidex
 ```
 
-```JavaScript
-const vueSwipe = VueSwipe.Swipe;
-const vueSwipeItem = VueSwipe.SwipeItem;
-
-new Vue({
-  el: 'body',
-  components: {
-    'swipe': vueSwipe,
-    'swipe-item': vueSwipeItem
-  }
-});
+## Import using module
+import { Swipe, SwipeItem } from 'vue-slidex';
 ```
 
-# Usage
-
-Work on a Vue instance:
+### Usage
 
 ```HTML
-<swipe class="my-swipe">
+<swipe class="my-swipe" :auto="3000" :defaultIndex="2">
   <swipe-item class="slide1"></swipe-item>
   <swipe-item class="slide2"></swipe-item>
   <swipe-item class="slide3"></swipe-item>
@@ -67,53 +31,56 @@ Work on a Vue instance:
 
 ```CSS
 .my-swipe {
-  height: 200px;
-  color: #fff;
-  font-size: 30px;
-  text-align: center;
-}
-
-.slide1 {
-  background-color: #0089dc;
-  color: #fff;
-}
-
-.slide2 {
-  background-color: #ffd705;
-  color: #000;
-}
-
-.slide3 {
-  background-color: #ff2d4b;
-  color: #fff;
-}
-```
-
-# Options
-
-Here list Props on swipe component
-
-| Option | Description |
-| ----- | ----- |
-| speed | Number(default: 300) speed of animation. |
-| auto | Number(default: 3000) delay of auto slide. |
-| continuous | Boolean (default:true) - creates an infinite slider without endpoints |
-| showIndicators | Boolean (default:true) - show indicators on slider bottom. |
-| prevent | Boolean (default:false) - preventDefault when touch start, useful for some lower version Android Browser(4.2 etc). |
-
-# Develop
-
-Coding with watching and hot-reload.
-
-```bash
-$ npm run dev
-```
-
-Develop on real remote device.
-
-```bash
-$ npm run remote-dev {{ YOUR IP ADDRESS }}
+        height: 200px;
+        color: #fff;
+        font-size: 30px;
+        text-align: center;
+        margin-bottom: 20px;
+        width: 100%;
+    }
+    .mint-swipe-items-wrap
+        overflow: hidden;
+        position: relative;
+        height: 200px
+    .slide1 {
+        background-color: #0089dc;
+        color: #fff;
+    }
+
+    .slide2 {
+        background-color: #ffd705;
+        color: #000;
+    }
+
+    .slide3 {
+        background-color: #ff2d4b;
+        color: #fff;
+    }
+    .mint-swipe-item
+        height 200px
+        display inline-block
+        width 100%
+    .mint-swipe
+        height 200px
+    .slide
+        display block
+        z-index -1
+    .mint-swipe-items-wrap > div
+        display block
+    .slide.is-active
+        height 100%
+        width 90%
+        z-index 100
+        margin-left 5%
+        border-radius 10px
+    .slide.before-active
+        transform translateX(-10%)
+        height 80%
+        margin-top 5%
+        z-index -100
+    .slide.after-active
+        transform translateX(90%)
+        height 80%
+        margin-top 5%
+        z-index -100
 ```
-
-# License
-MIT
diff --git a/dist/vue-swipe.css b/dist/vue-swipe.css
index a34bd86..83d574b 100644
--- a/dist/vue-swipe.css
+++ b/dist/vue-swipe.css
@@ -1 +1 @@
-.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff}
\ No newline at end of file
+.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap{-webkit-transform:translateZ(0);transform:translateZ(0)}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff}
\ No newline at end of file
diff --git a/dist/vue-swipe.js b/dist/vue-swipe.js
index 7bb3b80..8f7f864 100644
--- a/dist/vue-swipe.js
+++ b/dist/vue-swipe.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwipe=e():t.VueSwipe=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return t[i].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e.SwipeItem=e.Swipe=void 0;var s=n(7),a=i(s),r=n(6),o=i(r);e.Swipe=a["default"],e.SwipeItem=o["default"]},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),s=n(3);e["default"]={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,"default":300},auto:{type:Number,"default":3e3},continuous:{type:Boolean,"default":!0},showIndicators:{type:Boolean,"default":!0},noDragWhenSingle:{type:Boolean,"default":!0},prevent:{type:Boolean,"default":!1}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,s){var a=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,l=function(){o||(o=!0,a.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",s&&s.apply(a,r))};(0,i.once)(t,"webkitTransitionEnd",l),setTimeout(l,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this.$children;this.noDrag=1===t.length&&this.noDragWhenSingle;var e=[];this.index=0,t.forEach(function(t,n){e.push(t.$el),(0,s.removeClass)(t.$el,"is-active"),0===n&&(0,s.addClass)(t.$el,"is-active")}),this.pages=e},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,a,r,o,l,u=this.speed||300,c=this.index,d=this.pages,h=d.length;e?(i=e.prevPage,r=e.currentPage,a=e.nextPage,o=e.pageWidth,l=e.offsetLeft):(o=this.$el.clientWidth,r=d[c],i=d[c-1],a=d[c+1],this.continuous&&d.length>1&&(i||(i=d[d.length-1]),a||(a=d[0])),i&&(i.style.display="block",this.translate(i,-o)),a&&(a.style.display="block",this.translate(a,o)));var f,p=this.$children[c].$el;"prev"===t?(c>0&&(f=c-1),this.continuous&&0===c&&(f=h-1)):"next"===t&&(h-1>c&&(f=c+1),this.continuous&&c===h-1&&(f=0));var g=function(){if(void 0!==f){var t=n.$children[f].$el;(0,s.removeClass)(p,"is-active"),(0,s.addClass)(t,"is-active"),n.index=f}i&&(i.style.display=""),a&&(a.style.display="")};setTimeout(function(){"next"===t?(n.translate(r,-o,u,g),a&&n.translate(a,0,u)):"prev"===t?(n.translate(r,o,u,g),i&&n.translate(i,0,u)):(n.translate(r,0,u,g),"undefined"!=typeof l?(i&&l>0&&n.translate(i,-1*o,u),a&&0>l&&n.translate(a,o,u)):(i&&n.translate(i,-1*o,u),a&&n.translate(a,o,u)))},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,n=this.dragState,i=t.touches[0];n.startTime=new Date,n.startLeft=i.pageX,n.startTop=i.pageY,n.startTopAbsolute=i.clientY,n.pageWidth=e.offsetWidth,n.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=s?s.$el:null,n.dragPage=a?a.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,n=t.touches[0];e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(i),r=Math.abs(s);if(5>a||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),i=Math.min(Math.max(-e.pageWidth+1,i),e.pageWidth-1);var o=0>i?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,i-e.pageWidth),this.translate(e.dragPage,i),e.nextPage&&"next"===o&&this.translate(e.nextPage,i+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(300>e){var l=Math.abs(i)<5&&Math.abs(s)<5;(isNaN(i)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}300>e&&void 0===t.currentLeft||((300>e||Math.abs(i)>a/2)&&(n=0>i?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",function(e){t.prevent&&e.preventDefault(),t.animating||(t.dragging=!0,t.userScrolling=!1,t.doOnTouchStart(e))}),e.addEventListener("touchmove",function(e){t.dragging&&t.doOnTouchMove(e)}),e.addEventListener("touchend",function(e){return t.userScrolling?(t.dragging=!1,void(t.dragState={})):void(t.dragging&&(t.doOnTouchEnd(e),t.dragging=!1))})}}},function(t,e){"use strict";var n=function(t){return(t||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},i=function(t,e){if(!t||!e)return!1;if(-1!=e.indexOf(" "))throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1},s=function(t,e){if(t){for(var n=t.className,s=(e||"").split(" "),a=0,r=s.length;r>a;a++){var o=s[a];o&&(t.classList?t.classList.add(o):i(t,o)||(n+=" "+o))}t.classList||(t.className=n)}},a=function(t,e){if(t&&e){for(var s=e.split(" "),a=" "+t.className+" ",r=0,o=s.length;o>r;r++){var l=s[r];l&&(t.classList?t.classList.remove(l):i(t,l)&&(a=a.replace(" "+l+" "," ")))}t.classList||(t.className=n(a))}};t.exports={hasClass:i,addClass:s,removeClass:a}},function(t,e){"use strict";var n=function(){return document.addEventListener?function(t,e,n){t&&e&&n&&t.addEventListener(e,n,!1)}:function(t,e,n){t&&e&&n&&t.attachEvent("on"+e,n)}}(),i=function(){return document.removeEventListener?function(t,e,n){t&&e&&t.removeEventListener(e,n,!1)}:function(t,e,n){t&&e&&t.detachEvent("on"+e,n)}}(),s=function(t,e,s){var a=function r(){s&&s.apply(this,arguments),i(t,e,r)};n(t,e,a)};t.exports={on:n,off:i,once:s}},function(t,e){},function(t,e,n){var i,s;i=n(1);var a=n(9);s=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(s=i=i["default"]),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=i},function(t,e,n){var i,s;n(5),i=n(2);var a=n(8);s=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(s=i=i["default"]),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=i},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe"},[n("div",{ref:"wrap",staticClass:"mint-swipe-items-wrap"},[t._t("default")],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showIndicators,expression:"showIndicators"}],staticClass:"mint-swipe-indicators"},t._l(t.pages,function(e,i){return n("div",{staticClass:"mint-swipe-indicator","class":{"is-active":i===t.index}})}))])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe-item"},[t._t("default")],2)},staticRenderFns:[]}}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwipe=e():t.VueSwipe=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.SwipeItem=e.Swipe=void 0;var s=i(5),a=n(s),r=i(4),o=n(r);e.Swipe=a.default,e.SwipeItem=o.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e){"use strict";function i(t,e){return t.classList?t.classList.contains(e):!!t.className.match(new RegExp("(\\s|^)"+e+"(\\s|$)"))}function n(t,e){t.classList?t.classList.add(e):i(t,e)||(t.className+=" "+e)}function s(t,e){if(t.classList)t.classList.remove(e);else if(i(t,e)){var n=new RegExp("(\\s|^)"+e+"(\\s|$)");t.className=t.className.replace(n," ")}}Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,default:300},auto:{type:Number,default:3e3},continuous:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},noDragWhenSingle:{type:Boolean,default:!0},prevent:{type:Boolean,default:!1},defaultIndex:{type:Number,default:0}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,i,n){var s=this,a=arguments;if(i){this.animating=!0,t.style.webkitTransition="-webkit-transform "+i+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var r=!1,o=function(){if(!r){r=!0,s.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="";for(var e in s.pages)s.pages[e].style.webkitTransition="",s.pages[e].style.webkitTransform="";n&&n.apply(s,a)}};document.addEventListener?t.addEventListener("webkitTransitionEnd",o,!1):t.attachEvent("onwebkitTransitionEnd",o),setTimeout(o,i+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this,e=this.$children;this.noDrag=1===e.length&&this.noDragWhenSingle;var i=[];this.index=this.defaultIndex,e.forEach(function(e,a){i.push(e.$el),s(e.$el,"is-active"),a===t.defaultIndex&&n(e.$el,"is-active")}),this.setActiveClass(this.index,i.length),this.pages=i,this.$emit("animateEnd",i[this.index],null)},setActiveClass:function(t,e){for(var i in this.$children)s(this.$children[i].$el,"before-active"),s(this.$children[i].$el,"after-active");t-1>-1?n(this.$children[t-1].$el,"before-active"):n(this.$children[e-1].$el,"before-active"),t+1<e?n(this.$children[t+1].$el,"after-active"):n(this.$children[0].$el,"after-active")},doAnimate:function(t,e){var i=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var a,r,o,l,d,u=this.speed||300,c=this.index,h=this.pages,f=h.length;e?(a=e.prevPage,o=e.currentPage,r=e.nextPage,l=e.pageWidth,d=e.offsetLeft):(l=this.$el.clientWidth,o=h[c],a=h[c-1],r=h[c+1],this.continuous&&h.length>1&&(a||(a=h[h.length-1]),r||(r=h[0])),a&&(a.style.display="block",this.translate(a,-l)),r&&(r.style.display="block",this.translate(r,l)));var p,g=this.$children[c].$el;"prev"===t?(c>0&&(p=c-1),this.continuous&&0===c&&(p=f-1)):"next"===t&&(c<f-1&&(p=c+1),this.continuous&&c===f-1&&(p=0));var v=function(){if(void 0!==p){var t=i.$children[p].$el;s(g,"is-active"),n(t,"is-active"),i.index=p}a&&(a.style.display=""),r&&(r.style.display=""),i.$emit("animateEnd",t,g)};setTimeout(function(){"next"===t?(i.translate(o,-l,u,v),r&&i.translate(r,0,u)):"prev"===t?(i.translate(o,l,u,v),a&&i.translate(a,0,u)):(i.translate(o,0,u,v),"undefined"!=typeof d?(a&&d>0&&i.translate(a,l*-1,u),r&&d<0&&i.translate(r,l,u)):(a&&i.translate(a,l*-1,u),r&&i.translate(r,l,u))),i.setActiveClass(p,f)},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,i=this.dragState,n="mousedown"==t.type?t:t.touches[0];i.startTime=new Date,i.startLeft=n.pageX,i.startTop=n.pageY,i.startTopAbsolute=n.clientY,i.pageWidth=e.offsetWidth,i.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),i.prevPage=s?s.$el:null,i.dragPage=a?a.$el:null,i.nextPage=r?r.$el:null,i.prevPage&&(i.prevPage.style.display="block"),i.nextPage&&(i.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,i="mousemove"==t.type?t:t.touches[0];e.currentLeft=i.pageX,e.currentTop=i.pageY,e.currentTopAbsolute=i.clientY;var n=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(n),r=Math.abs(s);if(a<5||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),n=Math.min(Math.max(-e.pageWidth+1,n),e.pageWidth-1);var o=n<0?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,n-e.pageWidth),this.translate(e.dragPage,n),e.nextPage&&"next"===o&&this.translate(e.nextPage,n+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,i=null,n=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var l=Math.abs(n)<5&&Math.abs(s)<5;(isNaN(n)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(n)>a/2)&&(i=n<0?"next":"prev"),this.continuous||(0===r&&"prev"===i||r===o-1&&"next"===i)&&(i=null),this.$children.length<2&&(i=null),this.doAnimate(i,{offsetLeft:n,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){function t(t,e,i){e.split(" ").forEach(function(e){return t.addEventListener(e,i,!1)})}var e=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){e.dragging||e.animating||e.next()},this.auto)),this.reInitPages();var i=this.$el;t(i,"touchstart mousedown",function(t){e.prevent&&t.preventDefault(),e.animating||(e.dragging=!0,e.userScrolling=!1,e.doOnTouchStart(t))}),t(i,"touchmove mousemove",function(t){e.dragging&&e.doOnTouchMove(t)}),t(i,"touchend mouseup",function(t){return e.userScrolling?(e.dragging=!1,void(e.dragState={})):void(e.dragging&&(e.doOnTouchEnd(t),e.dragging=!1))})}}},function(t,e){},function(t,e,i){var n,s;n=i(1);var a=i(7);s=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(s=n=n.default),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=n},function(t,e,i){var n,s;i(3),n=i(2);var a=i(6);s=n=n||{},"object"!=typeof n.default&&"function"!=typeof n.default||(s=n=n.default),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=n},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"mint-swipe"},[i("div",{ref:"wrap",staticClass:"mint-swipe-items-wrap"},[t._t("default")],2),t._v(" "),i("div",{directives:[{name:"show",rawName:"v-show",value:t.showIndicators,expression:"showIndicators"}],staticClass:"mint-swipe-indicators"},t._l(t.pages,function(e,n){return i("div",{staticClass:"mint-swipe-indicator",class:{"is-active":n===t.index}})}))])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"mint-swipe-item"},[t._t("default")],2)},staticRenderFns:[]}}])});
\ No newline at end of file
diff --git a/package.json b/package.json
index 30b43a6..a9908c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "vue-swipe",
-  "version": "2.0.2",
+  "name": "vue-slidex",
+  "version": "1.0.1",
   "description": "A touch slider for vue.js.",
   "main": "dist/vue-swipe.js",
   "scripts": {
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ElemeFE/vue-swipe.git"
+    "url": "https://github.com/pgroot/vue-swipe.git"
   },
   "babel": {
     "presets": [
@@ -23,7 +23,7 @@
     "slider",
     "vue"
   ],
-  "author": "long.zhang@ele.me",
+  "author": "pgroot",
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.3.15",
@@ -42,11 +42,11 @@
     "vue-hot-reload-api": "^1.2.2",
     "vue-html-loader": "^1.0.0",
     "vue-loader": "10.0.2",
-    "vue-template-compiler": "^2.1.8",
+    "vue-template-compiler": "2.1.8",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
   },
   "dependencies": {
-    "wind-dom": "0.0.3"
+    
   }
 }
diff --git a/src/swipe.vue b/src/swipe.vue
index 91a9c6c..b606954 100644
--- a/src/swipe.vue
+++ b/src/swipe.vue
@@ -187,6 +187,7 @@
                         if (callback) {
                             callback.apply(this, arguments);
                         }
+                        //this.$emit('animateEnd', element)
                     };
 
                     if (document.addEventListener) {
@@ -221,6 +222,7 @@
 
                 this.setActiveClass(this.index, pages.length);
                 this.pages = pages;
+                this.$emit('animateEnd', pages[this.index], null)
             },
 
             setActiveClass(index, pageCount) {
@@ -318,6 +320,8 @@
                     if (nextPage) {
                         nextPage.style.display = '';
                     }
+
+                    this.$emit('animateEnd', newPage, oldPage)
                 };
 
                 setTimeout(() => {

From c3b81e67f6f30c22159e9856079809f2311dc4fc Mon Sep 17 00:00:00 2001
From: GROOT <pzyme@outlook.com>
Date: Thu, 6 Apr 2017 17:39:04 +0800
Subject: [PATCH 4/4] Signed-off-by: GROOT <pzyme@outlook.com>

---
 package.json  | 2 +-
 src/swipe.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a9908c6..f7bdbef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-slidex",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A touch slider for vue.js.",
   "main": "dist/vue-swipe.js",
   "scripts": {
diff --git a/src/swipe.vue b/src/swipe.vue
index b606954..506093f 100644
--- a/src/swipe.vue
+++ b/src/swipe.vue
@@ -226,6 +226,7 @@
             },
 
             setActiveClass(index, pageCount) {
+            	if(this.$children < 1) return;
                 for (let i in this.$children) {
                     removeClass(this.$children[i].$el, 'before-active')
                     removeClass(this.$children[i].$el, 'after-active')