[Doc] add demo pages (#237)

* [bugfix] Checkbox border render error in weixin browser

* [bugfix] TreeSelect dependency path error

* [bugfix] Swipe should clear autoplay timer when destroyed

* [bugfix] Optimize component dependency analyze when build style entry

* merge

* update yarn.lock

* update README.md

* update README.md

* update README.md

* update README.md

* update README.md

* [Doc] add more badges in README.md

* update README.md

* [bugfix] Address & Contact list style

* fix: contact test cases

* [bugfix] popup style missing when build style entry

* [bugfix] Search: onSearch event arguments missing

* [Doc] add demo pages

* update zan-doc@0.3.7

* fix: build entry error

docs/examples-docs/zh-CN/search.md

@@ -41,7 +41,7 @@ Vue.component(Search.name, Search);
 
 :::demo 基础用法
 ```html
-<van-search placeholder="搜索框基础用法" v-model="basicSearch" />
+<van-search placeholder="搜索框基础用法" v-model="value" />
 ```
 :::
 
@@ -73,7 +73,7 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
   v-model="value"
   :show-action="true"
   @search="onSearch">
-  <div slot="action" @click="goSlotSearch">搜索</div>
+  <div slot="action" @click="onSearch">搜索</div>
 </van-search>
 ```
 :::

docs/src/DocsApp.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app">
-    <zan-doc :simulator="simulator" :config="config" :base="base">
+    <zan-doc :simulators="simulators" :currentSimulator="currentSimulator" :config="config" :base="base">
-      <router-view></router-view>
+      <router-view @changeDemoURL="onChangeDemoURL"></router-view>
     </zan-doc>
   </div>
 </template>
@@ -17,10 +17,9 @@ export default {
       group.list = group.list.filter(item => item.title !== '业务组件');
     }
 
-    const hash = window.location.hash;
-
     return {
-      simulator: `/zanui/vue/examples${hash}`,
+      simulators: [`/zanui/vue/examples${location.hash}`],
+      demoURL: '',
       lang: getLang()
     };
   },
@@ -32,6 +31,10 @@ export default {
 
     config() {
       return docConfig[this.lang];
+    },
+
+    currentSimulator() {
+      return this.$route.name === 'zh-CN/demo' ? 1 : 0;
     }
   },
 
@@ -39,6 +42,12 @@ export default {
     '$route'(to) {
       this.lang = to.meta.lang;
     }
+  },
+
+  methods: {
+    onChangeDemoURL(url) {
+      this.simulators = [this.simulators[0], url];
+    }
   }
 };
 </script>

docs/src/components/demo.vue

@@ -0,0 +1,94 @@
+<template>
+  <section class="zan-doc-demos">
+    <h2>示例</h2>
+    <p>下面是一些使用 Vant 搭建的示例页面，点击图片切换至对应示例。</p>
+    <div class="zan-doc-demos__gallery">
+      <div
+        :class="['zan-doc-demos__item', { 'zan-doc-demos__item--active': index === currentDemo }]"
+        v-for="(demo, index) in demos"
+      >
+        <h4>{{ demo.title }}</h4>
+        <a :href="demo.source" target="_blank">源代码</a>
+        <img :src="demo.preview" @click="onChangeDemo(demo, index)" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDemo: 0,
+      demos: [{
+        title: '会员中心',
+        preview: 'https://img.yzcdn.cn/public_files/2017/10/23/e1d70757e3ab88d39a360b704be8f43f.png',
+        url: 'https://chenjiahan.github.io/vant-demo/#/user',
+        source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/user'
+      }, {
+        title: '购物车',
+        preview: 'https://img.yzcdn.cn/public_files/2017/10/24/06b8b5ed3692314d434db7f6854dcdbe.png',
+        url: 'https://chenjiahan.github.io/vant-demo/#/cart',
+        source: 'https://github.com/chenjiahan/vant-demo/tree/master/src/view/cart'
+      }]
+    };
+  },
+
+  beforeMount() {
+    this.$emit('changeDemoURL', this.demos[0].url);
+  },
+
+  methods: {
+    onChangeDemo(demo, index) {
+      this.currentDemo = index;
+      this.$emit('changeDemoURL', demo.url);
+    }
+  }
+};
+</script>
+
+<style>
+.zan-doc-demos {
+  &__gallery {
+    margin-top: 30px;
+  }
+
+  &__item {
+    width: 28%;
+    text-align: center;
+    margin-bottom: 40px;
+    display: inline-block;
+
+    &:nth-child(3n+1),
+    &:nth-child(3n+2) {
+      margin-right: 4%;
+    }
+
+    h4 {
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: normal;
+    }
+
+    img {
+      width: 100%;
+      cursor: pointer;
+      border-radius: 3px;
+      background-color: #f8f8f8;
+      box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+    }
+
+    a {
+      display: block;
+      font-size: 12px;
+      margin: 4px 0 7px;
+    }
+
+    &--active {
+      img {
+        box-shadow: 0 1px 4px rgba(51, 136, 255, .4), 0 0 0 1px rgba(51, 136, 255, .4);
+      }
+    }
+  }
+}
+</style>

docs/src/doc.config.js

@@ -28,12 +28,18 @@ module.exports = {
               },
               {
                 title: '业务组件',
-                link: '/zanui/captain/component/quickstart'
+                link: '/zanui/captain'
               },
               {
                 path: '/changelog',
                 title: '更新日志',
                 noExample: true
+              },
+              {
+                path: '/demo',
+                title: '示例页面',
+                noDocument: true,
+                noExample: true
               }
             ]
           }

docs/src/examples.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './ExamplesApp';
+import App from './WapApp';
 import routes from './router.config';
 import { setLang } from './utils/lang';
 import Vant, { Lazyload } from 'packages';

docs/src/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './ExamplesDocsApp';
+import App from './DocsApp';
 import routes from './router.config';
 import ZanDoc from 'zan-doc';
 import isMobile from './utils/is-mobile';

docs/src/router.config.js

@@ -3,19 +3,16 @@ import { getLang } from './utils/lang';
 import DemoList from './components/demo-list';
 import componentDocs from '../examples-dist/entry-docs';
 import componentDemos from '../examples-dist/entry-demos';
+import Demo from './components/demo';
 import './utils/iframe-router';
 
 const registerRoute = (isExample) => {
   const route = [{
     path: '/',
-    redirect: to => {
+    redirect: to => `/${getLang()}/`
-      return `/${getLang()}/`;
-    }
   }, {
     path: '*',
-    redirect: to => {
+    redirect: to => `/${getLang()}/`
-      return `/${getLang()}/`;
-    }
   }];
 
   Object.keys(docConfig).forEach((lang, index) => {
@@ -53,9 +50,18 @@ const registerRoute = (isExample) => {
       const { path } = page;
       if (path) {
         const name = lang + '/' + path.replace('/', '');
+        let component;
+
+        if (path === '/demo') {
+          component = Demo;
+        } else {
+          component = isExample ? componentDemos[name] : componentDocs[name];
+        }
+
         route.push({
+          name,
+          component,
           path: `/${lang}/component${path}`,
-          component: isExample ? componentDemos[name] : componentDocs[name],
           meta: { lang }
         });
       }

package.json

@@ -50,7 +50,7 @@
     "vue": ">= 2.4.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.1.3",
+    "autoprefixer": "^7.1.6",
     "avoriaz": "2.0.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
@@ -119,6 +119,6 @@
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.2",
     "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.3.6"
+    "zan-doc": "^0.3.8"
   }
 }

packages/cell/index.vue

@@ -1,15 +1,12 @@
 <template>
   <a :class="['van-cell', 'van-hairline', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
-    <div
+    <div class="van-cell__title" v-if="$slots.title || title">
-      class="van-cell__title"
-      v-if="$slots.title || title"
-    >
       <slot name="icon">
-        <i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
+        <i v-if="icon" class="van-icon" :class="'van-icon-' + icon" />
       </slot>
       <slot name="title">
-        <span class="van-cell__text" v-text="title"></span>
+        <span class="van-cell__text" v-text="title" />
-        <span class="van-cell__label" v-if="label" v-text="label"></span>
+        <span class="van-cell__label" v-if="label" v-text="label" />
       </slot>
     </div>
     <div
@@ -21,20 +18,26 @@
       }"
     >
       <slot>
-        <span v-text="value"></span>
+        <span v-text="value" />
       </slot>
     </div>
     <slot name="right-icon">
-      <i class="van-cell__right-icon van-icon van-icon-arrow" v-if="isLink"></i>
+      <van-icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
     </slot>
-    <slot name="extra"></slot>
+    <slot name="extra" />
   </a>
 </template>
 
 <script>
+import Icon from '../icon';
+
 export default {
   name: 'van-cell',
 
+  components: {
+    [Icon.name]: Icon
+  },
+
   props: {
     icon: String,
     title: String,

packages/search/index.vue

@@ -104,7 +104,7 @@ export default {
      */
     handleSearch(e) {
       e.preventDefault();
-      this.$emit('search');
+      this.$emit('search', this.value);
       return false;
     },
 

packages/vant-css/src/card.css

@@ -4,6 +4,7 @@
 .van-card {
   color: $text-color;
   height: 100px;
+  font-size: 16px;
   background: #fafafa;
   position: relative;
   box-sizing: border-box;

packages/vant-css/src/cell.css

@@ -24,6 +24,7 @@
     display: table-cell;
 
     .van-icon {
+      font-size: 16px;
       margin-right: 5px;
       vertical-align: middle;
     }

yarn.lock

@@ -341,12 +341,12 @@ autoprefixer@^6.3.1:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^7.1.3:
+autoprefixer@^7.1.6:
-  version "7.1.5"
+  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.5.tgz#d65d14b83c7cd1dd7bc801daa00557addf5a06b2"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
   dependencies:
-    browserslist "^2.5.0"
+    browserslist "^2.5.1"
-    caniuse-lite "^1.0.30000744"
+    caniuse-lite "^1.0.30000748"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
     postcss "^6.0.13"
@@ -1133,7 +1133,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.1.2, browserslist@^2.5.0:
+browserslist@^2.1.2, browserslist@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
   dependencies:
@@ -1233,6 +1233,10 @@ caniuse-lite@^1.0.30000744:
   version "1.0.30000748"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000748.tgz#44c8d6da52ad65a5d7b9dca4efebd0bdd982ba09"
 
+caniuse-lite@^1.0.30000748:
+  version "1.0.30000749"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000749.tgz#2ff382865aead8cca35dacfbab04f58effa4c01c"
+
 caseless@~0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
@@ -8258,9 +8262,9 @@ yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
 
-zan-doc@^0.3.6:
+zan-doc@^0.3.8:
-  version "0.3.6"
+  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.6.tgz#fd21ebde256898c5e057c9d169c848666bf41420"
+  resolved "https://registry.yarnpkg.com/zan-doc/-/zan-doc-0.3.8.tgz#96eb93a196963e95af15527a426270ae73375351"
   dependencies:
     cheerio "0.22.0"
     decamelize "^1.2.0"