chore: add vant-doc package (#4197)

build/webpack.dev.js

@@ -67,13 +67,13 @@ module.exports = {
     new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
       chunks: ['vant-docs'],
-      template: 'docs/site/desktop/index.html',
+      template: path.join(__dirname, '../docs/site/desktop/index.html'),
       filename: 'index.html',
       inject: true
     }),
     new HtmlWebpackPlugin({
       chunks: ['vant-mobile'],
-      template: 'docs/site/mobile/index.html',
+      template: path.join(__dirname, '../docs/site/mobile/index.html'),
       filename: 'mobile.html',
       inject: true
     })

docs/site/mobile/App.vue

@@ -53,6 +53,7 @@ export default {
 @import '../../../src/style/var';
 
 body {
+  min-width: 100vw;
   color: @text-color;
   font-family: 'PingFang SC', Helvetica, 'STHeiti STXihei', 'Microsoft YaHei', Tohoma, Arial, sans-serif;
   line-height: 1;

docs/site/mobile/main.js

@@ -1,8 +1,8 @@
 import '../../../src/index.less';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import App from './App';
 import routes from '../router';
+import App from './App';
 import { importAll } from '../utils';
 import '@vant/touch-emulator';
 

package.json

@@ -71,7 +71,7 @@
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.16",
     "@vant/cli": "^1.0.2",
-    "@vant/doc": "^2.4.0",
+    "@vant/doc": "^2.5.1",
     "@vant/eslint-config": "^1.2.5",
     "@vant/markdown-loader": "^2.2.0",
     "@vant/markdown-vetur": "^1.0.0",

packages/vant-doc/README.md

@@ -0,0 +1,15 @@
+# Vant Doc
+
+UI components of Vant document site
+
+#### NPM
+
+```shell
+npm i @vant/doc -D
+```
+
+#### YARN
+
+```shell
+yarn add @vant/doc --dev
+```

packages/vant-doc/build/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const baseWebpackConfig = require('../../../build/webpack.dev');
+
+module.exports = Object.assign(baseWebpackConfig, {
+  mode: 'production',
+  entry: {
+    index: './src/index.js'
+  },
+  output: {
+    path: path.resolve(__dirname, '../lib'),
+    filename: '[name].js',
+    libraryTarget: 'commonjs2'
+  },
+  externals: {
+    vue: {
+      root: 'Vue',
+      commonjs: 'vue',
+      commonjs2: 'vue',
+      amd: 'vue'
+    }
+  }
+});

packages/vant-doc/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vant/doc",
+  "version": "2.5.1",
+  "description": "vant document template",
+  "main": "./lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "webpack --progress --config ./build/webpack.config.js",
+    "release": "npm run build && npm publish"
+  },
+  "license": "MIT",
+  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-doc"
+}

packages/vant-doc/src/VanDoc.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="van-doc">
+    <van-doc-header
+      :lang="lang"
+      :github="github"
+      :versions="versions"
+      :config="config.header"
+      :search-config="searchConfig"
+      @switch-version="$emit('switch-version', $event)"
+    />
+    <van-doc-nav :base="base" :nav-config="config.nav" />
+    <van-doc-container :has-simulator="!!(simulator || simulators.length)">
+      <van-doc-content>
+        <slot />
+      </van-doc-content>
+    </van-doc-container>
+    <van-doc-simulator v-if="simulator" :src="simulator" />
+    <van-doc-simulator
+      v-for="(url, index) in simulators"
+      v-show="index === currentSimulator"
+      :src="url"
+      :key="url"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc',
+
+  props: {
+    lang: String,
+    github: String,
+    versions: Array,
+    searchConfig: Object,
+    currentSimulator: Number,
+    simulator: String,
+    config: {
+      type: Object,
+      required: true
+    },
+    simulators: {
+      type: Array,
+      default: () => []
+    },
+    base: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      nav: [],
+      currentPath: null,
+      leftNav: null,
+      rightNav: null
+    };
+  },
+
+  watch: {
+    // eslint-disable-next-line
+    '$route.path'() {
+      this.setNav();
+      this.updateNav();
+    }
+  },
+
+  created() {
+    this.setNav();
+    this.updateNav();
+    this.keyboardHandler();
+  },
+
+  methods: {
+    setNav() {
+      const { nav } = this.config;
+      for (let i = 0; i < nav.length; i++) {
+        const navItem = nav[i];
+        if (!navItem.groups) {
+          this.nav.push(nav[i]);
+        } else {
+          for (let j = 0; j < navItem.groups.length; j++) {
+            this.nav = this.nav.concat(navItem.groups[j].list);
+          }
+        }
+      }
+    },
+
+    updateNav() {
+      let currentIndex;
+      this.currentPath = '/' + this.$route.path.split('/').pop();
+      for (let i = 0, len = this.nav.length; i < len; i++) {
+        if (this.nav[i].path === this.currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+      this.leftNav = this.nav[currentIndex - 1];
+      this.rightNav = this.nav[currentIndex + 1];
+    },
+
+    handleNavClick(direction) {
+      const nav = direction === 'prev' ? this.leftNav : this.rightNav;
+      if (nav.path) {
+        this.$router.push(this.base + nav.path);
+      } else if (nav.link) {
+        window.location.href = nav.link;
+      }
+    },
+
+    keyboardHandler() {
+      window.addEventListener('keyup', event => {
+        switch (event.keyCode) {
+          case 37: // left
+            this.handleNavClick('prev');
+            break;
+          case 39: // right
+            this.handleNavClick('next');
+            break;
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import './style/index';
+</style>

packages/vant-doc/src/component/Block.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="van-doc-block">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-block'
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-block {
+  display: flex;
+  margin-bottom: 20px;
+
+  .highlight {
+    flex: 1;
+    box-sizing: border-box;
+
+    pre {
+      word-break: break-all;
+    }
+  }
+}
+</style>

packages/vant-doc/src/component/Container.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="van-doc-container van-doc-row"
+    :class="{ 'van-doc-container--with-simulator': hasSimulator }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-container',
+
+  props: {
+    hasSimulator: Boolean
+  }
+};
+</script>
+
+<style lang="less">
+@import '../style/variable';
+
+.van-doc-container {
+  box-sizing: border-box;
+  padding-left: @van-doc-nav-width;
+  overflow: hidden;
+
+  &--with-simulator {
+    padding-right: @van-doc-simulator-width + @van-doc-padding;
+
+    @media (max-width: 1300px) {
+      padding-right: @van-doc-simulator-small-width + @van-doc-padding;
+    }
+  }
+}
+</style>