refactor(default-theme): Extract PageNav component.

Author: mathieutu

packages/@vuepress/theme-default/components/Page.vue

@@ -3,125 +3,25 @@
     <slot name="top"/>
 
     <Content/>
-
     <PageEdit/>
-
-    <div class="page-nav" v-if="prev || next">
-      <p class="inner">
-        <span
-          v-if="prev"
-          class="prev"
-        >
-          ←
-          <router-link
-            v-if="prev"
-            class="prev"
-            :to="prev.path"
-          >
-            {{ prev.title || prev.path }}
-          </router-link>
-        </span>
-
-        <span
-          v-if="next"
-          class="next"
-        >
-          <router-link
-            v-if="next"
-            :to="next.path"
-          >
-            {{ next.title || next.path }}
-          </router-link>
-          →
-        </span>
-      </p>
-    </div>
+    <PageNav v-bind="{ sidebarItems }"/>
 
     <slot name="bottom"/>
   </main>
 </template>
 
 <script>
-import { resolvePage } from '../util'
-import PageEdit from '@theme/components/PageEdit'
+import PageEdit from '@theme/components/PageEdit.vue'
+import PageNav from '@theme/components/PageNav.vue'
 
 export default {
-  components: { PageEdit },
-  props: ['sidebarItems'],
-
-  computed: {
-    prev () {
-      const prev = this.$page.frontmatter.prev
-      if (prev === false) {
-        return
-      } else if (prev) {
-        return resolvePage(this.$site.pages, prev, this.$route.path)
-      } else {
-        return resolvePrev(this.$page, this.sidebarItems)
-      }
-    },
-
-    next () {
-      const next = this.$page.frontmatter.next
-      if (next === false) {
-        return
-      } else if (next) {
-        return resolvePage(this.$site.pages, next, this.$route.path)
-      } else {
-        return resolveNext(this.$page, this.sidebarItems)
-      }
-    }
-  }
-}
-
-function resolvePrev (page, items) {
-  return find(page, items, -1)
-}
-
-function resolveNext (page, items) {
-  return find(page, items, 1)
-}
-
-function find (page, items, offset) {
-  const res = []
-  flatten(items, res)
-  for (let i = 0; i < res.length; i++) {
-    const cur = res[i]
-    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
-      return res[i + offset]
-    }
-  }
-}
-
-function flatten (items, res) {
-  for (let i = 0, l = items.length; i < l; i++) {
-    if (items[i].type === 'group') {
-      flatten(items[i].children || [], res)
-    } else {
-      res.push(items[i])
-    }
-  }
+  components: { PageEdit, PageNav },
+  props: ['sidebarItems']
 }
-
 </script>
 
 <style lang="stylus">
-@require '../styles/wrapper.styl'
-
 .page
   padding-bottom 2rem
   display block
-
-.page-nav
-  @extend $wrapper
-  padding-top 1rem
-  padding-bottom 0
-  .inner
-    min-height 2rem
-    margin-top 0
-    border-top 1px solid $borderColor
-    padding-top 1rem
-    overflow auto // clear float
-  .next
-    float right
 </style>

packages/@vuepress/theme-default/components/PageNav.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="page-nav" v-if="prev || next">
+    <p class="inner">
+        <span
+          v-if="prev"
+          class="prev"
+        >
+          ←
+          <router-link
+            v-if="prev"
+            class="prev"
+            :to="prev.path"
+          >
+            {{ prev.title || prev.path }}
+          </router-link>
+        </span>
+
+      <span
+        v-if="next"
+        class="next"
+      >
+          <router-link
+            v-if="next"
+            :to="next.path"
+          >
+            {{ next.title || next.path }}
+          </router-link>
+          →
+        </span>
+    </p>
+  </div>
+</template>
+<script>
+import { resolvePage } from '../util'
+
+export default {
+  name: 'PageNav',
+  props: ['sidebarItems'],
+  computed: {
+    prev () {
+      const prev = this.$page.frontmatter.prev
+      if (prev === false) {
+        return
+      } else if (prev) {
+        return resolvePage(this.$site.pages, prev, this.$route.path)
+      } else {
+        return resolvePrev(this.$page, this.sidebarItems)
+      }
+    },
+
+    next () {
+      const next = this.$page.frontmatter.next
+      if (next === false) {
+        return
+      } else if (next) {
+        return resolvePage(this.$site.pages, next, this.$route.path)
+      } else {
+        return resolveNext(this.$page, this.sidebarItems)
+      }
+    }
+  }
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+function find (page, items, offset) {
+  const res = []
+  flatten(items, res)
+  for (let i = 0; i < res.length; i++) {
+    const cur = res[i]
+    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
+      return res[i + offset]
+    }
+  }
+}
+
+function flatten (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatten(items[i].children || [], res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+
+</script>
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid $borderColor
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
+</style>