文档细节优化，search、咯阿丁和dialog组件样式修复 (#5)

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

* fix: scroll to top

* fix mobile scroll

* fix scroll to top

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'),

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;
+      }
     }
   }
 }

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;
     }
   }

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>
 

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;

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>

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>
 ```
 :::
 

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>
 

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;

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 {

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>

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);
     }
   },
 

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>

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

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;

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",

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>

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 = {

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 {

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;

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;

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;
     }
   }

packages/vant-css/src/switch.css

@@ -37,6 +37,7 @@
       left: 50%;
       top: 50%;
       transform: translate3d(-50%, -50%, 0);
+      margin: 0;
     }
 
     @m on {