update router

examples/app.vue

@@ -268,10 +268,6 @@
   <div id="app">
     <div class="pure-g">
       <div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
-        <router-link class="pure-menu-heading app__brand" to="/">
-          <span class="app__eleme">ELEME</span>NT
-        </router-link>
-
         <template v-for="(nav, key) in navs">
           <a
             href="#"
@@ -292,7 +288,9 @@
               v-if="!item.disabled">
               <router-link
                 class="pure-menu-link app__menu__link"
-                :to="{ path: item.path, activeClass: 'active' }"
+                active-class="active"
+                :to="'/component' + item.path"
+                exact
                 v-text="item.name"></router-link>
             </li>
           </ul>
@@ -307,27 +305,19 @@
           <p class="app__description">{{ $route.meta.description }}</p>
           <router-view></router-view>
         </section>
-        <toc main=".app__main"></toc>
       </div>
     </div>
-
-    <button class="hljs__button" ref="button"></button>
   </div>
 </template>
 
 <script>
   import { navs } from './route.config';
-  import toc from './components/toc';
   import E from 'oui-dom-events';
   import { toggleClass, addClass, removeClass } from './dom/class';
 
   export default {
     name: 'app',
 
-    components: {
-      toc
-    },
-
     data() {
       return {
         highlights: [],

examples/components/lightbox.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="dialog d-popup-center"
-    v-if="rendered"
-    v-show="visible"
-    :transition="transition">
-    <div class="dialog-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-  import Popup from 'vue-popup';
-  import 'vue-popup/lib/popup.css';
-
-  export default {
-    mixins: [Popup],
-
-    props: {
-      showClose: {
-        type: Boolean,
-        default: true
-      },
-      showModal: {
-        type: Boolean,
-        default: true
-      },
-      modal: {
-        default: true
-      },
-      closeOnClickModal: {
-        default: true
-      }
-    },
-
-    methods: {
-      willClose() {
-        this.visible = false;
-      }
-    }
-  };
-</script>
-
-<style lang="css">
-  .dialog {
-    position: fixed;
-
-    img {
-      width: 60vw;
-    }
-  }
-  .app__main .d-modal {
-    margin: 0;
-  }
-</style>

examples/components/table-filter.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="table-filter" v-show="visible">haha</div>
-</template>
-
-<style scoped>
-  .table-filter {
-    position: absolute 0 100px * *;
-    background-color: #fff;
-  }
-</style>
-
-<script type="text/babel">
-  export default {
-    data() {
-      return {
-        visible: true
-      };
-    },
-
-    events: {
-      toggleFilterPopup(visibleFilter) {
-        this.visible = visibleFilter === 'tag';
-      }
-    },
-
-    mounted() {
-      console.log('popup ready');
-    }
-  };
-</script>

examples/components/toc-item.vue

@@ -1,48 +0,0 @@
-<template>
-  <li class="item">
-    <a
-      class="toc__link"
-      :class="{ 'active': active === item.id }"
-      :href="'#' + encodeURIComponent(item.heading)"
-      v-text="item.heading">
-    </a>
-    <ol
-      class="group"
-      v-if="item.children"
-      v-show="active >= item.id && active <= (item.id + item.children.length || 0)">
-      <el-toc-item
-        :item="sub"
-        class="item"
-        :active="active"
-        v-for="sub in item.children">
-      </el-toc-item>
-    </ol>
-  </li>
-</template>
-
-<script>
-  /**
-   * 浮动在右边的目录子项
-   */
-  export default {
-    name: 'el-toc-item',
-
-    props: {
-      item: Object,
-      active: Number
-    },
-
-    methods: {
-      encodeURIComponent(source) {
-        return encodeURIComponent(source);
-      }
-    }
-  };
-</script>
-
-<style lang="css">
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-</style>

examples/components/toc.vue

@@ -1,203 +0,0 @@
-<template>
-  <nav
-    class="toc"
-    :class="{ 'toc--fixed': fixed }"
-    :style="{ 'top': offset + 'px' }">
-    <ol class="group">
-      <el-toc-item
-        v-for="item in toc"
-        class="title"
-        :active="active"
-        :item="item">
-      </el-toc-item>
-    </ol>
-  </nav>
-</template>
-
-<script>
-  import ElTocItem from './toc-item';
-  import E from 'oui-dom-events';
-
-  /**
-   * 浮动在右边的目录
-   */
-  export default {
-    name: 'toc',
-
-    components: {
-      ElTocItem
-    },
-
-    props: {
-      main: {
-        type: String,
-        required: true
-      }
-    },
-
-    data() {
-      return {
-        toc: [],
-        offset: 0,
-        fixed: false,
-        active: 0
-      };
-    },
-
-    events: {
-      ['element.example.reload']() {
-        this.$nextTick(() => {
-          this.toc = [];
-          this.anchors = this.findAllAnchors();
-          this.scrollWrap = document.querySelector('body');
-          this.currentHeaderHeight = document.querySelector('.app__main:first-of-type').offsetTop;
-          this.fixedOffsetTop = document.querySelector('.app__menu__label').offsetTop;
-          this.updateFixed();
-
-          this.generateTOC(this.anchors, this.toc);
-          E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
-          this.scrollActiveCurrent();
-        });
-      }
-    },
-
-    ready() {
-      this.scrollAutoFixed();
-    },
-
-    methods: {
-      /**
-       * @see https://github.com/chjj/marked/issues/334
-       */
-      generateTOC(anchors, toc) {
-        if (document.querySelector('.no-toc')) {
-          return;
-        }
-
-        let cache = {};
-
-        for (let key in anchors) {
-          const current = this.fetchAnchorData(anchors[key]);
-          const level = current.level || 1;
-          const last = cache[level - 1];
-
-          current.id = Number(key);
-
-          if (last) {
-            last.children = (last.children || []).concat(current);
-          } else {
-            cache[level] = current;
-            toc.push(current);
-          }
-        }
-      },
-
-      fetchAnchorData(anchor) {
-        const head = anchor.parentNode;
-        const level = head.tagName.match(/\d/g)[0];
-        const heading = head.getAttribute('id');
-
-        return { level, heading };
-      },
-
-      updateFixed() {
-        if (this.scrollWrap.scrollTop <= this.fixedOffsetTop / 2) {
-          this.offset = this.currentHeaderHeight;
-          this.fixed = false;
-          return;
-        }
-
-        if (this.fixed) return;
-
-        this.offset = this.fixedOffsetTop;
-        this.fixed = true;
-      },
-
-      scrollAutoFixed() {
-        E.on(document, 'mousewheel.toc.autofixed', this.updateFixed);
-      },
-
-      findAllAnchors() {
-        return Array.prototype.slice.call(document.querySelectorAll('.anchor'));
-      },
-
-      scrollActiveCurrent() {
-        const anchors = this.findAllAnchors();
-        const body = this.scrollWrap;
-        const distances = [];
-        let current;
-        let index = 0;
-        let max;
-
-        for (let anchor of anchors) {
-          distances.push(anchor.offsetTop);
-        }
-
-        current = distances[index];
-        max = distances.length - 1;
-        this.active = index;
-
-        // 记录当前滚动档位
-        // 判断当前滚动和下个档位
-        E.on(this.scrollWrap, 'mousewheel.toc.activecurrent', e => {
-          const scrollTop = body.scrollTop;
-
-          while (index < max && scrollTop > current) {
-            current = distances[++index];
-            this.active = index;
-          }
-
-          while (index && scrollTop < current) {
-            current = distances[--index];
-            this.active = index;
-          }
-        });
-      }
-    },
-
-    beforeDestroy() {
-      E.off(this.scrollWrap, 'mousewheel.toc.autofixed');
-      E.off(this.scrollWrap, 'mousewheel.toc.activecurrent');
-    }
-  };
-</script>
-
-<style lang="css">
-  .toc {
-    color: #999;
-    margin-right: 40px;
-    margin-top: -14px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 160px;
-
-    &.toc--fixed {
-      position: fixed;
-    }
-
-    .group {
-      font-size: 13px;
-      list-style-type: none;
-      margin: 0;
-      padding-left: 12px;
-    }
-
-    .item {
-      margin: 14px 0;
-
-      .toc__link:hover,
-      .toc__link.active {
-        color: #216fc1;
-      }
-
-      .group {
-        border-left: 1px solid rgba(31, 109, 191, .5);
-      }
-    }
-
-    .title {
-      margin-bottom: 18px;
-    }
-  }
-</style>

examples/data/cascader.json

@@ -1,29 +0,0 @@
-[
-  {
-    "label": "普通业务",
-    "value": "普通业务",
-    "children": [
-      {
-        "label": "业务1",
-        "value": "业务1",
-        "children": [
-          {
-            "label": "业务5",
-            "value": "业务5",
-            "children": []
-          }
-        ]
-      },
-      {
-        "label": "业务2",
-        "value": "业务2",
-        "children": []
-      }
-    ]
-  },
-  {
-    "label": "会员业务",
-    "value": "会员业务",
-    "children": []
-  }
-]

examples/data/select-disabled.json

@@ -1,19 +0,0 @@
-[
-  {
-    "label": "选项1",
-    "value": "结果1"
-  },
-  {
-    "label": "选项2",
-    "value": "结果2",
-    "disabled": true
-  },
-  {
-    "label": "选项3",
-    "value": "结果3"
-  },
-  {
-    "label": "选项4",
-    "value": "结果4"
-  }
-]

examples/data/select-group.json

@@ -1,54 +0,0 @@
-{
-  "gourp1": [
-    {
-      "label": "选项1",
-      "value": "结果1"
-    },
-    {
-      "label": "选项2",
-      "value": "结果2"
-    },
-    {
-      "label": "选项3",
-      "value": "结果3"
-    },
-    {
-      "label": "选项4",
-      "value": "结果4"
-    },
-    {
-      "label": "选项5",
-      "value": "结果5"
-    },
-    {
-      "label": "选项6",
-      "value": "结果6"
-    }
-  ],
-  "gourp2": [
-    {
-      "label": "选项7",
-      "value": "结果7"
-    },
-    {
-      "label": "选项8",
-      "value": "结果8"
-    },
-    {
-      "label": "选项9",
-      "value": "结果9"
-    },
-    {
-      "label": "选项10",
-      "value": "结果10"
-    },
-    {
-      "label": "选项11",
-      "value": "结果11"
-    },
-    {
-      "label": "选项12",
-      "value": "结果12"
-    }
-  ]
-}

examples/data/select-normal.json

@@ -1,32 +0,0 @@
-[
-  {
-    "label": "选项1",
-    "value": "结果1",
-    "remark": "remark1"
-  },
-  {
-    "label": "选项2",
-    "value": "结果2",
-    "remark": "remark2"
-  },
-  {
-    "label": "选项3",
-    "value": "结果3",
-    "remark": "remark3"
-  },
-  {
-    "label": "选项4",
-    "value": "结果4",
-    "remark": "remark4"
-  },
-  {
-    "label": "选项5",
-    "value": "结果5",
-    "remark": "remark5"
-  },
-  {
-    "label": "选项6",
-    "value": "结果6",
-    "remark": "remark6"
-  }
-]

examples/docs/guideline.md

@@ -1,123 +0,0 @@
-<section class="guideline no-toc">
-  <h2>选择合适的导航</h2>
-  <p>选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和「顶部导航」的区别。</p>
-
-  <h3>侧栏导航：</h3>
-  <p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
-
-  <table>
-    <tbody>
-      <tr>
-        <td>一级类目</td>
-        <td>
-          <lightbox :visible.sync="showIndexDialog1">
-            <img src="~examples/assets/images/guide1.png" alt="一级类目">
-          </lightbox>
-          <img @click="showIndexDialog1 = true" src="~examples/assets/images/guide1.png" alt="一级类目">
-          <p>适用于结构简单的网站；只有一级页面时，不需要使用面包屑。</p>
-        </td>
-      </tr>
-      <tr>
-        <td>二级类目</td>
-        <td>
-          <lightbox :visible.sync="showIndexDialog2">
-            <img src="~examples/assets/images/guide2.png" alt="二级类目">
-          </lightbox>
-          <img @click="showIndexDialog2 = true" src="~examples/assets/images/guide2.png" alt="二级类目">
-          <p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
-        </td>
-      </tr>
-      <tr>
-        <td>三级类目</td>
-        <td>
-          <lightbox :visible.sync="showIndexDialog3">
-            <img src="~examples/assets/images/guide3.png" alt="三级类目">
-          </lightbox>
-          <img @click="showIndexDialog3 = true" src="~examples/assets/images/guide3.png" alt="三级类目">
-          <p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <h3>顶部导航：</h3>
-  <p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
-
-  <table>
-    <tbody>
-      <tr>
-        <td>一级类目</td>
-        <td>
-          <lightbox :visible.sync="showIndexDialog4">
-            <img src="~examples/assets/images/guide4.png" alt="一级类目">
-          </lightbox>
-          <img @click="showIndexDialog4 = true" src="~examples/assets/images/guide4.png" alt="一级类目">
-          <p>适用于导航较少，页面篇幅较长的网站；</p>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</section>
-
-<script>
-  import Lightbox from 'examples/components/lightbox';
-
-  module.exports = {
-    name: 'guideline',
-
-    components: {
-      Lightbox
-    },
-
-    data() {
-      return {
-        showIndexDialog1: false,
-        showIndexDialog2: false,
-        showIndexDialog3: false,
-        showIndexDialog4: false
-      };
-    }
-  };
-</script>
-
-<style lang="css">
-  .guideline {
-    img {
-      width: 500px;
-      display: block;
-      margin-bottom: 19px;
-      box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
-    }
-
-    table {
-      background-color: #f8f8f8;
-      width: 100%;
-
-      p {
-        margin: 0;
-        width: 500px;
-      }
-    }
-
-    td {
-      padding: 36px;
-    }
-
-    tr {
-      border-bottom: 1px solid #e4e4e4;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-
-    td:first-child {
-      background-color: #f3f3f3;
-      width: 21%;
-      min-width: 100px;
-      text-align: center;
-      color: #666;
-      font-size: 14px;
-    }
-  }
-</style>

examples/nav.config.json

@@ -1,31 +1,4 @@
 [
-  {
-    "group": "使用说明",
-    "list": [
-      {
-        "path": "/quickstart",
-        "name": "快速上手"
-      },
-      {
-        "path": "/development",
-        "name": "开发指南"
-      },
-      {
-        "path": "/changelog",
-        "name": "更新日志"
-      }
-    ]
-  },
-  {
-    "group": "设计指南",
-    "list": [
-      {
-        "path": "/menu",
-        "name": "导航",
-        "description": "导航(Navigation) 可以解决用户在访问页面时：在哪里，去哪里，怎么去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。"
-      }
-    ]
-  },
   {
     "group": "Basic",
     "list": [
@@ -247,5 +220,18 @@
         "description": "出现在按钮、图标旁的数字或状态标记"
       }
     ]
+  },
+  {
+    "group": "使用说明",
+    "list": [
+      {
+        "path": "/quickstart",
+        "name": "快速上手"
+      },
+      {
+        "path": "/development",
+        "name": "开发指南"
+      }
+    ]
   }
 ]

examples/pages/changelog.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>changelog</div>
+</template>

examples/pages/component.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

examples/pages/design.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>design</div>
+</template>

examples/pages/guide.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

examples/pages/nav.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>nav</div>
+</template>

examples/pages/resource.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>resource</div>
+</template>

examples/route.config.js

@@ -1,15 +1,18 @@
 import navConfig from './nav.config.json';
 
 const registerRoute = (config) => {
-  let route = [];
+  let route = [{
+    path: '/component',
+    component: require('./pages/component.vue'),
+    children: []
+  }];
   config
     .map(nav =>
       nav.list.map(page => {
-        if (page.path === '/changelog') return;
         const component = require(`./docs${page.path}.md`);
 
-        route.push({
-          path: page.path,
+        route[0].children.push({
+          path: page.path.slice(1),
           meta: {
             title: page.title || page.name,
             description: page.description
@@ -24,10 +27,33 @@ const registerRoute = (config) => {
 
 const route = registerRoute(navConfig);
 
-route.route.push({
+let guideRoute = {
+  path: '/guide',
+  name: '指南',
+  component: require('./pages/guide.vue'),
+  children: [{
+    path: 'design',
+    name: '设计原则',
+    component: require('./pages/design.vue')
+  }, {
+    path: 'nav',
+    name: '导航',
+    component: require('./pages/nav.vue')
+  }]
+};
+
+let resourceRoute = {
+  path: '/resource',
+  name: '资源',
+  component: require('./pages/resource.vue')
+};
+
+let changeLogRoute = {
   path: '/changelog',
-  component: require('../CHANGELOG.md')
-});
+  component: require('./pages/changelog.vue')
+};
+
+route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
 
 route.route.push({
   path: '*',

src/index.js

@@ -43,7 +43,7 @@ import Loading from '../packages/loading/index.js';
 import Icon from '../packages/icon/index.js';
 import Row from '../packages/row/index.js';
 import Col from '../packages/col/index.js';
-// import Upload from '../packages/upload/index.js';
+import Upload from '../packages/upload/index.js';
 import Progress from '../packages/progress/index.js';
 import Spinner from '../packages/spinner/index.js';
 import Message from '../packages/message/index.js';
@@ -98,7 +98,7 @@ const install = function(Vue) {
   Vue.component(Icon.name, Icon);
   Vue.component(Row.name, Row);
   Vue.component(Col.name, Col);
-  // Vue.component(Upload.name, Upload);
+  Vue.component(Upload.name, Upload);
   Vue.component(Progress.name, Progress);
   Vue.component(Spinner.name, Spinner);
   Vue.component(Message.name, Message);
@@ -170,7 +170,7 @@ module.exports = {
   Icon,
   Row,
   Col,
-  // Upload,
+  Upload,
   Progress,
   Spinner,
   Message,