refactor(theme): use VCA

Author: reco_luan

packages/vuepress-theme-reco/components/Common.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="theme-container"
-    :class="pageClasses"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd">
+  <div class="theme-container" :class="pageClasses">
     <div v-if="!absoluteEncryption">
       <transition name="fade">
         <LoadingPage v-show="firstLoad" class="loading-wrapper" />
@@ -72,13 +68,14 @@
 </template>
 
 <script>
+import { defineComponent, computed, ref, onMounted, watch, reactive } from '@vue/composition-api'
 import Navbar from '@theme/components/Navbar'
 import Sidebar from '@theme/components/Sidebar'
 import PersonalInfo from '@theme/components/PersonalInfo'
 import Password from '@theme/components/Password'
 import { setTimeout } from 'timers'
 
-export default {
+export default defineComponent({
   components: { Sidebar, Navbar, Password, PersonalInfo },
 
   props: {
@@ -96,119 +93,97 @@ export default {
     }
   },
 
-  data () {
-    return {
-      isSidebarOpen: false,
-      isHasKey: true,
-      isHasPageKey: true,
-      firstLoad: true
-    }
-  },
+  setup (props, ctx) {
+    const { root } = ctx
 
-  computed: {
-    absoluteEncryption () {
-      return this.$themeConfig.keyPage && this.$themeConfig.keyPage.absoluteEncryption === true
-    },
+    const isSidebarOpen = ref(false)
+    const isHasKey = ref(true)
+    const isHasPageKey = ref(true)
+    const firstLoad = ref(true)
 
-    shouldShowNavbar () {
-      const { themeConfig } = this.$site
-      const { frontmatter } = this.$page
+    const shouldShowSidebar = computed(() => props.sidebarItems.length > 0)
+    const absoluteEncryption = computed(() => {
+      return root.$themeConfig.keyPage && root.$themeConfig.keyPage.absoluteEncryption === true
+    })
+    const shouldShowNavbar = computed(() => {
+      const { themeConfig } = root.$site
+      const { frontmatter } = root.$page
 
       if (
         frontmatter.navbar === false ||
         themeConfig.navbar === false
       ) return false
 
       return (
-        this.$title ||
+        root.$title ||
         themeConfig.logo ||
         themeConfig.repo ||
         themeConfig.nav ||
-        this.$themeLocaleConfig.nav
+        root.$themeLocaleConfig.nav
       )
-    },
-
-    shouldShowSidebar () {
-      return this.sidebarItems.length > 0
-    },
-
-    pageClasses () {
-      const userPageClass = this.$frontmatter.pageClass
-      return [
-        {
-          'no-navbar': !this.shouldShowNavbar,
-          'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
+    })
+    const pageClasses = computed(() => {
+      const userPageClass = root.$frontmatter.pageClass
+      return {
+        ...{
+          'no-navbar': !shouldShowNavbar.value,
+          'sidebar-open': isSidebarOpen.value,
+          'no-sidebar': !shouldShowSidebar.value
         },
-        userPageClass
-      ]
-    }
-  },
-
-  mounted () {
-    this.$router.afterEach(() => {
-      this.isSidebarOpen = false
+        ...userPageClass
+      }
     })
-
-    this.hasKey()
-    this.hasPageKey()
-    this.handleLoading()
-  },
-
-  methods: {
-    hasKey () {
-      const keyPage = this.$themeConfig.keyPage
+    const hasKey = () => {
+      const { keyPage } = root.$themeConfig
       if (!keyPage || !keyPage.keys || keyPage.keys.length === 0) {
-        this.isHasKey = true
+        isHasKey.value = true
         return
       }
 
       let { keys } = keyPage
       keys = keys.map(item => item.toLowerCase())
-      this.isHasKey = keys && keys.indexOf(sessionStorage.getItem('key')) > -1
-    },
-    hasPageKey () {
-      let pageKeys = this.$frontmatter.keys
+      isHasKey.value = keys && keys.indexOf(sessionStorage.getItem('key')) > -1
+    }
+    const initRouterHandler = () => {
+      root.$router.afterEach(() => {
+        isSidebarOpen.value = false
+      })
+    }
+    const hasPageKey = () => {
+      let pageKeys = root.$frontmatter.keys
       if (!pageKeys || pageKeys.length === 0) {
-        this.isHasPageKey = true
+        isHasPageKey.value = true
         return
       }
 
       pageKeys = pageKeys.map(item => item.toLowerCase())
 
-      this.isHasPageKey = pageKeys.indexOf(sessionStorage.getItem(`pageKey${window.location.pathname}`)) > -1
-    },
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-    },
-
-    // side swipe
-    onTouchStart (e) {
-      this.touchStart = {
-        x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
-      }
-    },
-
-    onTouchEnd (e) {
-      const dx = e.changedTouches[0].clientX - this.touchStart.x
-      const dy = e.changedTouches[0].clientY - this.touchStart.y
-      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
-        if (dx > 0 && this.touchStart.x <= 80) {
-          this.toggleSidebar(true)
-        } else {
-          this.toggleSidebar(false)
-        }
-      }
-    },
-
-    handleLoading () {
-      const time = this.$frontmatter.home && sessionStorage.getItem('firstLoad') == undefined ? 1000 : 0
+      isHasPageKey.value = pageKeys.indexOf(sessionStorage.getItem(`pageKey${window.location.pathname}`)) > -1
+    }
+    const toggleSidebar = (to) => {
+      isSidebarOpen.value = typeof to === 'boolean' ? to : !isSidebarOpen.value
+    }
+    const handleLoading = () => {
+      const time = root.$frontmatter.home && sessionStorage.getItem('firstLoad') == undefined ? 1000 : 0
       setTimeout(() => {
-        this.firstLoad = false
+        firstLoad.value = false
         if (sessionStorage.getItem('firstLoad') == undefined) sessionStorage.setItem('firstLoad', false)
       }, time)
     }
+
+    onMounted(() => {
+      initRouterHandler()
+      hasKey()
+      hasPageKey()
+      handleLoading()
+    })
+
+    watch(reactive(root.$frontmatter), (newVal, oldVal) => {
+      hasKey()
+      hasPageKey()
+    })
+
+    return { isSidebarOpen, absoluteEncryption, shouldShowNavbar, shouldShowSidebar, pageClasses, isHasKey, hasKey, isHasPageKey, toggleSidebar, firstLoad }
   },
 
   watch: {
@@ -217,7 +192,7 @@ export default {
       this.hasPageKey()
     }
   }
-}
+})
 </script>
 
 <style lang="stylus" scoped>