Merge branch 'dev'

package.json

@@ -1,11 +1,11 @@
 {
   "name": "PLATO",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "a Boilerplate for mobile SPAs use vue, vuex, vue-router",
   "license": "MIT",
   "main": "src/index.js",
   "scripts": {
-    "gfw": "npm i cross-env && cross-env CHROMEDRIVER_CDNURL=http://npm.taobao.org/mirrors/chromedriver PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs npm install -r https://registry.npm.taobao.org",
+    "gfw": "npm i cross-env && cross-env PHANTOMJS_CDNURL=http://npm.taobao.org/mirrors/phantomjs npm install -r https://registry.npm.taobao.org",
     "start": "serve ./dist",
     "mock": "cross-env NODE_ENV=development DEBUG=plato* json-server --watch --port 3001 ./mock/db.json",
     "dev": "cross-env NODE_ENV=development DEBUG=plato* webpack-dev-server --progress",
@@ -44,7 +44,7 @@
     "babel-register": "^6.18.0",
     "bundle-loader": "^0.5.4",
     "chai": "^3.5.0",
-    "chromedriver": "~2.24.1",
+    "chromedriver": "^2.25.1",
     "copy-webpack-plugin": "^4.0.0",
     "core-js": "^2.4.1",
     "cross-env": "^3.1.3",

src/app.vue

@@ -33,13 +33,13 @@
 </template>
 
 <script>
-import CProgress from 'components/c-progress'
-import CToast from 'components/c-toast'
-import CButton from 'components/c-button'
-import CLink from 'components/c-link'
-import CIcon from 'components/c-icon'
-import CNavbar from 'components/c-navbar'
-import CRoute from 'components/c-route'
+import CProgress from 'components/core/progress'
+import CToast from 'components/core/toast'
+import CButton from 'components/core/button'
+import CLink from 'components/core/link'
+import CIcon from 'components/core/icon'
+import CNavbar from 'components/navbar'
+import CRoute from 'components/route'
 import { mapGetters, mapActions } from 'vuex'
 import routes from 'router/routes'
 
@@ -106,4 +106,4 @@ function walkRoutes (routes, filter) {
 </script>
 
 <style src="styles/app"></style>
-<style src="styles/components/reddot"></style>
+<style src="styles/components/core/reddot"></style>

src/components/README.md

@@ -4,15 +4,15 @@
 
 ## 设计
 
-非侵入式，功能的实现不需要修改原有 DOM 结构，参见 `s-swiper`。
+非侵入式，功能的实现不需要修改原有 DOM 结构，参见 `swiper`。
 
 ## 目标
 
 ### 近期目标
 
   编写尽量小的碎片化的组件，方便开发时灵活的组装，以应对多变的需求；
 
-  什么叫小？参见 `c-form`；
+  什么叫小？参见 `form`；
 
   在这里，我们要先将之前使用 [nd-form](https://github.com/ndfront/nd-form) 的习惯从记忆中抹去，让一切简单、轻量。
 

src/components/c-avatar.vue → src/components/core/avatar.vue

@@ -16,4 +16,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/avatar"></style>
+<style src="styles/components/core/avatar"></style>

src/components/c-badge.vue → src/components/core/badge.vue

@@ -10,4 +10,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/badge"></style>
+<style src="styles/components/core/badge"></style>

src/components/c-button.vue → src/components/core/button.vue

@@ -16,4 +16,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/button"></style>
+<style src="styles/components/core/button"></style>

src/components/c-checkbox.vue → src/components/core/checkbox.vue

@@ -52,4 +52,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/checkbox"></style>
+<style src="styles/components/core/checkbox"></style>

src/components/c-col.vue → src/components/core/col.vue

@@ -12,4 +12,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/col"></style>
+<style src="styles/components/core/col"></style>

src/components/c-icon.vue → src/components/core/icon.vue

@@ -19,4 +19,4 @@ export default {
 
 </script>
 
-<style src="styles/components/icon"></style>
+<style src="styles/components/core/icon"></style>

src/components/c-image.vue → src/components/core/image.vue

@@ -50,4 +50,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/image"></style>
+<style src="styles/components/core/image"></style>

src/components/c-label.vue → src/components/core/label.vue

@@ -2,4 +2,4 @@
   <label class="c-label"><slot></slot></label>
 </template>
 
-<style src="styles/components/label"></style>
+<style src="styles/components/core/label"></style>

src/components/c-link.vue → src/components/core/link.vue

@@ -10,4 +10,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/link"></style>
+<style src="styles/components/core/link"></style>

src/components/c-mask.vue → src/components/core/mask.vue

@@ -2,4 +2,4 @@
   <div class="c-mask" tabindex="-1"><slot></slot></div>
 </template>
 
-<style src="styles/components/mask"></style>
+<style src="styles/components/core/mask"></style>

src/components/mixins/field.js → src/components/core/mixins/field.js

@@ -22,7 +22,7 @@ export default {
   created () {
     if (this.validate && typeof this.$validate === 'function') {
       this.$watch('value', () => {
-        // from plugins/validator
+        // from 'components/core/plugins/validator
         this.$validate()
       })
     }

src/components/c-modal.vue → src/components/core/modal.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import CRow from './c-row'
-import CCol from './c-col'
-import CLink from './c-link'
+import CRow from './row'
+import CCol from './col'
+import CLink from './link'
 
 export default {
   props: {
@@ -62,4 +62,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/modal"></style>
+<style src="styles/components/core/modal"></style>

src/components/c-multiline.vue → src/components/core/multiline.vue

@@ -11,4 +11,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/multiline"></style>
+<style src="styles/components/core/multiline"></style>

src/components/c-pane.vue → src/components/core/pane.vue

@@ -14,4 +14,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/pane"></style>
+<style src="styles/components/core/pane"></style>

src/components/c-password.vue → src/components/core/password.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import CTextfield from './c-textfield'
-import CIcon from './c-icon'
+import CTextfield from './textfield'
+import CIcon from './icon'
 import mField from './mixins/field'
 
 export default {
@@ -48,4 +48,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/password"></style>
+<style src="styles/components/core/password"></style>

src/components/c-picker.vue → src/components/core/picker.vue

@@ -128,4 +128,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/picker"></style>
+<style src="styles/components/core/picker"></style>

src/components/c-progress.vue → src/components/core/progress.vue

@@ -19,4 +19,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/progress"></style>
+<style src="styles/components/core/progress"></style>

src/components/c-range.vue → src/components/core/range.vue

@@ -82,4 +82,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/range"></style>
+<style src="styles/components/core/range"></style>

src/components/c-row.vue → src/components/core/row.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import CIcon from './c-icon'
+import CIcon from './icon'
 
 export default {
   props: {
@@ -27,4 +27,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/row"></style>
+<style src="styles/components/core/row"></style>

src/components/c-scroller.vue → src/components/core/scroller.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script>
-import CIcon from './c-icon'
-import CSpinner from './c-spinner'
+import CIcon from './icon'
+import CSpinner from './spinner'
 
 export default {
   props: {
@@ -212,4 +212,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/scroller"></style>
+<style src="styles/components/core/scroller"></style>

src/components/c-slider.vue → src/components/core/slider.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="c-slider"
     @touchstart="dragstart"
-    @touchmove="dragging"
+    @touchmove="drag"
     @touchend="dragend">
     <div class="c-slider-content"
-      :class="{transition: transition && !isDragging & !slideReady}"
-      :style="{transform: 'translate3d(' + offset + 'px, 0, 0)'}"
+      :class="{transition: transition && !dragging & !slideReady}"
+      :style="{transform: 'translate3d(' + offset + 'px, 0, 0 )'}"
       ref="content">
       <slot></slot>
     </div>
@@ -18,11 +18,14 @@
 </template>
 
 <script>
+import { isHorizontal } from './utils/direction'
+
 const classes = {
   prev: 'c-slider-prev',
   active: 'c-slider-active',
   next: 'c-slider-next'
 }
+
 export default {
   props: {
     index: {
@@ -54,7 +57,7 @@ export default {
       // 如果不需要响应式，就不要放在 data 里？
       // minOffset: 0,
       // maxOffset: 0,
-      isDragging: false,
+      dragging: false,
       // 就位，已经切换到目标位置，指示可以进行后续操作，比如重设位置
       slideReady: false
     }
@@ -118,10 +121,9 @@ export default {
       if (this.interval) {
         if (!this.intervalId) {
           this.intervalId = setInterval(() => {
-            if (!this.isDragging && this.slideCount > 1) {
+            if (!this.dragging && this.slideCount > 1) {
               this.slideReady = false
               this.offset = this.minOffset
-              // default transtion duration is 200ms
               setTimeout(() => {
                 this.go(this.nextIndex)
               }, this.transition ? 200 : 0)
@@ -135,30 +137,42 @@ export default {
       }
     },
     dragstart (e) {
-      if (this.slideCount > 1 && !this.isDragging && e.touches && e.touches.length === 1) {
-        this.isDragging = true
+      if (this.slideCount > 1 && !this.dragging && e.touches && e.touches.length === 1) {
+        this.dragging = true
+        this.isHorizontal = false
         this.slideReady = false
-        this.startY = e.touches[0].pageX - this.offset
+        this.start = e.touches[0]
+        this.startX = e.touches[0].pageX - this.offset
       }
     },
-    dragging (e) {
-      if (this.isDragging) {
-        e.preventDefault()
-        e.stopPropagation()
-        const offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startY))
-        if (this.offset === 0 || offset * this.offset < -1) {
-          if (offset < 0) {
-            this.children[this.nextIndex].classList.remove(classes.prev)
-          } else if (offset > 0) {
-            this.children[this.prevIndex].classList.remove(classes.next)
+    drag (e) {
+      if (this.dragging) {
+        // only slide while swipe horizontal
+        if (this.isHorizontal || isHorizontal(e.touches[0], this.start)) {
+          this.isHorizontal = true
+          e.preventDefault()
+          e.stopPropagation()
+          const offset = Math.min(this.maxOffset, Math.max(this.minOffset, e.touches[0].pageX - this.startX))
+          if (this.offset === 0 || offset * this.offset < -1) {
+            if (offset < 0) {
+              this.children[this.nextIndex].classList.remove(classes.prev)
+            } else if (offset > 0) {
+              this.children[this.prevIndex].classList.remove(classes.next)
+            }
           }
+          this.offset = offset
+        } else {
+          this.dragging = false
+          this.isHorizontal = false
+          this.slideReady = true
+          this.offset = 0
         }
-        this.offset = offset
       }
     },
     dragend (e) {
-      if (this.isDragging) {
-        this.isDragging = false
+      if (this.dragging) {
+        this.dragging = false
+        this.isHorizontal = false
         if (this.offset > 0) {
           if (this.offset > this.maxOffset / 2) {
             this.offset = this.maxOffset
@@ -189,4 +203,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/slider"></style>
+<style src="styles/components/core/slider"></style>

src/components/c-spinner.vue → src/components/core/spinner.vue

@@ -17,4 +17,4 @@ export default {
 }
 </script>
 
-<style src="styles/components/spinner"></style>
+<style src="styles/components/core/spinner"></style>