From ce279571332cb5d10a950b36622a2ba28fee16d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= <cookfront@gmail.com>
Date: Sun, 23 Apr 2017 22:38:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=BB=86=E8=8A=82=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8Csearch=E3=80=81=E5=92=AF=E9=98=BF=E4=B8=81?=
 =?UTF-8?q?=E5=92=8Cdialog=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20(#5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: loading small style, search style and dialog style

* fix: scroll to top

* fix mobile scroll

* fix scroll to top
---
 build/webpack.config.js                |  8 ++++++++
 docs/examples-dist/button.vue          | 15 +++++++--------
 docs/examples-dist/loading.vue         |  8 +++++---
 docs/examples-dist/swipe.vue           |  4 +++-
 docs/examples-dist/waterfall.vue       |  1 +
 docs/examples-docs/button.md           | 15 +++++++--------
 docs/examples-docs/loading.md          | 15 ++++++++++++---
 docs/examples-docs/swipe.md            |  4 +++-
 docs/examples-docs/waterfall.md        |  1 +
 docs/src/ExamplesApp.vue               |  3 ++-
 docs/src/components/demo-list.vue      |  2 +-
 docs/src/components/mobile-computed.js |  6 +-----
 docs/src/components/mobile-nav.vue     | 16 ++++++++++++++--
 docs/src/examples.js                   | 14 ++++----------
 docs/src/index.js                      |  5 ++---
 package.json                           |  2 +-
 packages/loading/src/loading.vue       |  2 +-
 packages/swipe/src/scroll.js           |  4 +---
 packages/vant-css/src/actionsheet.css  |  6 ++----
 packages/vant-css/src/dialog.css       |  3 ++-
 packages/vant-css/src/loading.css      | 14 ++++++++++++--
 packages/vant-css/src/search.css       |  6 ++++--
 packages/vant-css/src/switch.css       |  1 +
 23 files changed, 95 insertions(+), 60 deletions(-)

diff --git a/build/webpack.config.js b/build/webpack.config.js
index 4ddf3aa42..837954b40 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -43,6 +43,14 @@ module.exports = {
     publicPath: '/',
     filename: '[name].js'
   },
+  devServer: {
+    historyApiFallback: {
+      rewrites: [
+        { from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
+        { from: /^\/zanui\/vue/, to: '/index.html' }
+      ]
+    }
+  },
   resolve: {
     modules: [
       path.join(__dirname, '../node_modules'),
diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index d568e475f..7a51f9f77 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -23,18 +23,12 @@
   <van-col span="24">
     <van-button size="large">large</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="normal">normal</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="small">small</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="mini">mini</van-button>
   </van-col>
@@ -82,9 +76,14 @@
     }
     .van-row {
       padding: 0 15px;
+      margin-bottom: 20px;
     }
-    .van-col {
-      margin-bottom: 10px;
+    .van-col-24 {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue
index d4fe48b14..15f88434f 100644
--- a/docs/examples-dist/loading.vue
+++ b/docs/examples-dist/loading.vue
@@ -6,6 +6,8 @@
   <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
 
+
+
               </example-block><example-block title="单色spinner">
                 <van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
 <van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
@@ -23,10 +25,10 @@
     }
 
     .demo-loading__example--with-bg {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(17, 17, 17, 0.7);
       margin: 0 auto;
-      width: 80px;
-      padding: 25px 0;
+      width: 120px;
+      padding: 45px 0;
       border-radius: 10px;
     }
   }
diff --git a/docs/examples-dist/swipe.vue b/docs/examples-dist/swipe.vue
index 9d90f3e0e..62374b944 100644
--- a/docs/examples-dist/swipe.vue
+++ b/docs/examples-dist/swipe.vue
@@ -1,7 +1,9 @@
 <template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
                 <van-swipe>
   <van-swipe-item v-for="img in images">
-    <img v-lazy="img" alt="">
+    <a href="https://youzan.com" target="_blank">
+      <img v-lazy="img" alt="">
+    </a>
   </van-swipe-item>
 </van-swipe>
 
diff --git a/docs/examples-dist/waterfall.vue b/docs/examples-dist/waterfall.vue
index 42d49522f..f068dd21b 100644
--- a/docs/examples-dist/waterfall.vue
+++ b/docs/examples-dist/waterfall.vue
@@ -19,6 +19,7 @@
   .waterfall-item {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
+    background: #fff;
   }
   .page-desc {
     padding: 5px 0;
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index dfdf44e9a..d0f921f7b 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -7,9 +7,14 @@
     }
     .van-row {
       padding: 0 15px;
+      margin-bottom: 20px;
     }
-    .van-col {
-      margin-bottom: 10px;
+    .van-col-24 {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -93,18 +98,12 @@ export default {
   <van-col span="24">
     <van-button size="large">large</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="normal">normal</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="small">small</van-button>
   </van-col>
-</van-row>
-<van-row>
   <van-col span="24">
     <van-button size="mini">mini</van-button>
   </van-col>
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index 209be8d30..2348d991c 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -10,10 +10,10 @@
     }
 
     .demo-loading__example--with-bg {
-      background-color: rgba(0, 0, 0, 0.5);
+      background-color: rgba(17, 17, 17, 0.7);
       margin: 0 auto;
-      width: 80px;
-      padding: 25px 0;
+      width: 120px;
+      padding: 45px 0;
       border-radius: 10px;
     }
   }
@@ -69,6 +69,15 @@ export default {
 <div class="demo-loading__example demo-loading__example--with-bg">
   <van-loading class="some-customized-class" :color="'white'"></van-loading>
 </div>
+
+<style>
+.demo-loading__example--with-bg {
+  background-color: rgba(17, 17, 17, 0.7);
+  width: 120px;
+  padding: 45px 0;
+  border-radius: 10px;
+}
+</style>
 ```
 :::
 
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 440480ccf..3e5b13a33 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -77,7 +77,9 @@ export default {
 ```html
 <van-swipe>
   <van-swipe-item v-for="img in images">
-    <img v-lazy="img" alt="">
+    <a href="https://youzan.com" target="_blank">
+      <img v-lazy="img" alt="">
+    </a>
   </van-swipe-item>
 </van-swipe>
 
diff --git a/docs/examples-docs/waterfall.md b/docs/examples-docs/waterfall.md
index db9d95965..660ad479d 100644
--- a/docs/examples-docs/waterfall.md
+++ b/docs/examples-docs/waterfall.md
@@ -74,6 +74,7 @@ export default {
   .waterfall-item {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
+    background: #fff;
   }
   .page-desc {
     padding: 5px 0;
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 6b352ae0d..abdd39f18 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -123,7 +123,8 @@ export default {
     font-size: 14px;
     font-weight: normal;
     color: #999;
-    padding: 30px 15px 10px;
+    padding: 0 15px;
+    margin: 30px 0 10px;
   }
 
   .footer {
diff --git a/docs/src/components/demo-list.vue b/docs/src/components/demo-list.vue
index f7b2950e5..5beb190a2 100644
--- a/docs/src/components/demo-list.vue
+++ b/docs/src/components/demo-list.vue
@@ -5,7 +5,7 @@
     <div class="mobile-navs">
       <template v-for="item in data">
         <div class="mobile-nav-item" v-if="item.showInMobile">
-          <mobile-nav v-for="group in item.groups"  :group="group" :base="base"></mobile-nav>
+          <mobile-nav v-for="(group, index) in item.groups" :group="group" :base="base" :nav-key="index"></mobile-nav>
         </div>
       </template>
     </div>
diff --git a/docs/src/components/mobile-computed.js b/docs/src/components/mobile-computed.js
index 32187bda8..9e6d5c5e9 100644
--- a/docs/src/components/mobile-computed.js
+++ b/docs/src/components/mobile-computed.js
@@ -7,11 +7,7 @@ export default {
 
   computed: {
     mobileUrl() {
-      if (process.env.NODE_ENV === 'production') {
-        return '/zanui/vue/examples#' + location.pathname.slice(10);
-      } else {
-        return '/examples.html#' + location.pathname;
-      }
+      return '/zanui/vue/examples' + location.pathname.slice(10);
     }
   },
 
diff --git a/docs/src/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
index 2e4e4a28e..9c2ea9e88 100644
--- a/docs/src/components/mobile-nav.vue
+++ b/docs/src/components/mobile-nav.vue
@@ -5,7 +5,7 @@
       :class="{
         'mobile-nav-group__title--open': isOpen
       }"
-      @click="isOpen = !isOpen">
+      @click="handleNavTitleClick">
       {{group.groupName}}
     </div>
     <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
@@ -38,13 +38,25 @@ export default {
         return [];
       }
     },
-    base: String
+    base: String,
+    navKey: [String, Number]
   },
 
   data() {
     return {
       isOpen: false
     };
+  },
+
+  mounted() {
+    this.isOpen = JSON.parse(sessionStorage.getItem('mobile-nav-' + this.navKey));
+  },
+
+  methods: {
+    handleNavTitleClick() {
+      this.isOpen = !this.isOpen;
+      sessionStorage.setItem('mobile-nav-' + this.navKey, this.isOpen);
+    }
   }
 };
 </script>
diff --git a/docs/src/examples.js b/docs/src/examples.js
index 48e109433..716e7c8b2 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -15,24 +15,18 @@ Vue.use(ZanUI.Lazyload, {
 });
 Vue.use(VueRouter);
 
-const isProduction = process.env.NODE_ENV === 'production';
 const routesConfig = routes(navConfig, true);
 routesConfig.push({
   path: '/',
   component: DemoList.default || DemoList
 });
 const router = new VueRouter({
-  mode: 'hash',
-  base: isProduction ? '/zanui/vue/' : __dirname,
+  mode: 'history',
+  base: '/zanui/vue/examples',
   routes: routesConfig
 });
-
-router.beforeEach((route, redirect, next) => {
-  if (route.path !== '/') {
-    window.scrollTo(0, 0);
-  }
-  document.title = route.meta.title || document.title;
-  next();
+router.afterEach((route, redirect, next) => {
+  document.querySelector('.examples-container').scrollTop = 0;
 });
 
 new Vue({ // eslint-disable-line
diff --git a/docs/src/index.js b/docs/src/index.js
index c231831b2..14d173937 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -6,7 +6,6 @@ import routes from './router.config';
 import ZanUI from 'src/index.js';
 import packageJson from '../../package.json';
 
-const isProduction = process.env.NODE_ENV === 'production';
 const global = {
   version: packageJson.version
 };
@@ -35,7 +34,7 @@ routesConfig.push({
 
 const router = new VueRouter({
   mode: 'history',
-  base: isProduction ? '/zanui/vue/' : __dirname,
+  base: '/zanui/vue/',
   routes: routesConfig
 });
 
@@ -44,7 +43,7 @@ router.beforeEach((route, redirect, next) => {
     window.scrollTo(0, 0);
   }
 
-  const pathname = isProduction ? '/vue/examples' : '/examples.html';
+  const pathname = '/zanui/vue/examples';
   if (isMobile()) {
     window.location.replace(pathname);
     return;
diff --git a/package.json b/package.json
index 426f1704c..b260ff893 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "bootstrap": "yarn || npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js --content-base ./",
+    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js --content-base ./",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
diff --git a/packages/loading/src/loading.vue b/packages/loading/src/loading.vue
index ec5223ed0..64fb16f73 100644
--- a/packages/loading/src/loading.vue
+++ b/packages/loading/src/loading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-loading">
+  <div class="van-loading" :class="['van-loading--' + type]">
     <span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
   </div>
 </template>
diff --git a/packages/swipe/src/scroll.js b/packages/swipe/src/scroll.js
index 8d6b46a15..d70b1aba1 100755
--- a/packages/swipe/src/scroll.js
+++ b/packages/swipe/src/scroll.js
@@ -48,9 +48,7 @@ extend(Scroll.prototype, {
       top: 0,
       left: 0,
       width: '100%',
-      height: '100%',
-      '-webkit-transform': 'translate3d(-9999px, 0, 0)',
-      'pointer-events': 'none'
+      height: '100%'
     };
     setElementsStyles(this.pages, defaultStyle);
     this.mCache = {
diff --git a/packages/vant-css/src/actionsheet.css b/packages/vant-css/src/actionsheet.css
index 8b73ae279..71699c283 100644
--- a/packages/vant-css/src/actionsheet.css
+++ b/packages/vant-css/src/actionsheet.css
@@ -21,16 +21,13 @@
 
     @e item {
       line-height: 50px;
+      height: 50px;
       text-align: center;
       color: $c-black;
       font-size: 16px;
       position: relative;
       background-color: $c-white;
 
-      @m loading {
-        padding: 10px 0;
-      }
-
       &::after {
         @mixin border-retina (top);
       }
@@ -43,6 +40,7 @@
 
     @e loading {
       margin: 0 auto;
+      display: inline-block;
     }
 
     @e button {
diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css
index 0523ec2ff..d085f7d51 100644
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@@ -71,8 +71,9 @@
 
     @e btn {
       font-size: 16px;
-      line-height: 40px;
+      line-height: 52px;
       border: 0;
+      padding: 0;
       background-color: #fff;
       float: left;
       box-sizing: border-box;
diff --git a/packages/vant-css/src/loading.css b/packages/vant-css/src/loading.css
index 6db1123ff..be61983ba 100644
--- a/packages/vant-css/src/loading.css
+++ b/packages/vant-css/src/loading.css
@@ -24,10 +24,20 @@
 
 @component-namespace van {
   @b loading {
-    width: 30px;
-    height: 30px;
+    
     line-height: 0;
     font-size: 0;
+
+    @m circle {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+    }
+
+    @m gradient-circle {
+      width: 30px;
+      height: 30px;
+    }
   
     @e spinner { 
       display: inline-block;
diff --git a/packages/vant-css/src/search.css b/packages/vant-css/src/search.css
index 5cd27016b..5a0c9e5b2 100644
--- a/packages/vant-css/src/search.css
+++ b/packages/vant-css/src/search.css
@@ -28,6 +28,7 @@
       color: $c-gray-dark;
       border: none;
       outline: none;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
     @e cancel {
@@ -51,10 +52,11 @@
 
     .van-icon-clear {
       font-size: 14px;
-      line-height: 1;
+      line-height: 16px;
       position: absolute;
       right: 5px;
-      top: 9px;
+      top: 50%;
+      transform: translateY(-50%);
       color: #888;
     }
   }
diff --git a/packages/vant-css/src/switch.css b/packages/vant-css/src/switch.css
index fc827ef9b..346bc03e5 100644
--- a/packages/vant-css/src/switch.css
+++ b/packages/vant-css/src/switch.css
@@ -37,6 +37,7 @@
       left: 50%;
       top: 50%;
       transform: translate3d(-50%, -50%, 0);
+      margin: 0;
     }
 
     @m on {