Merge pull request #46 from visualjerk/chore/upgrade-vue

Chore/upgrade vue Closes #43
visualjerk · Jan 22, 2022 · 0e0cb80 · 0e0cb80
2 parents ab3ddb8 + e658268
commit 0e0cb80
Show file tree

Hide file tree

Showing 41 changed files with 6,870 additions and 8,830 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,8 +9,6 @@ module.exports = {
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/vue',
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -22,5 +20,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'vue/multi-word-component-names': 'off',
   },
+  ignorePatterns: ['lib', 'docs', 'coverage'],
 }
diff --git a/docs/src/components/LayoutHeader.vue b/docs/src/components/LayoutHeader.vue
@@ -64,7 +64,7 @@
           </a>
 
           <ToggleDarkMode class="ml-2 sm:ml-8">
-            <template slot="default" slot-scope="{ dark }">
+            <template #default="{ dark }" >
               <MoonIcon v-if="dark" size="1.5x" />
               <SunIcon v-else size="1.5x" />
             </template>

diff --git a/docs/src/components/OnThisPage.vue b/docs/src/components/OnThisPage.vue
@@ -69,6 +69,15 @@ export default {
     }
   },
 
+  mounted() {
+    if (process.isClient) {
+      if (window.location.hash) {
+        this.activeAnchor = window.location.hash;
+      }
+      this.$nextTick(this.initObserver);
+    }
+  },
+
   methods: {
     observerCallback(entries, observer) {
       // This early return fixes the jumping
@@ -106,15 +115,6 @@ export default {
         this.observer.observe(elements[i]);
       }
     },
-  },
-
-  mounted() {
-    if (process.isClient) {
-      if (window.location.hash) {
-        this.activeAnchor = window.location.hash;
-      }
-      this.$nextTick(this.initObserver);
-    }
   }
 };
 </script>
diff --git a/docs/src/components/Search.vue b/docs/src/components/Search.vue
@@ -1,9 +1,9 @@
 <template>
   <div
+    class="relative"
     @keydown.down="increment"
     @keydown.up="decrement"
     @keydown.enter="go"
-    class="relative"
   >
     <label class="relative block">
       <span class="sr-only">Search Documentation</span>
@@ -34,15 +34,15 @@
         </li>
 
         <li
-          v-else
           v-for="(result, index) in results"
+          v-else
           :key="result.path + result.anchor"
-          @mouseenter="focusIndex = index"
-          @mousedown="go"
           class="border-ui-sidebar"
           :class="{
             'border-b': index + 1 !== results.length
           }"
+          @mouseenter="focusIndex = index"
+          @mousedown="go"
         >
           <g-link
             :to="result.path + result.anchor"

diff --git a/docs/src/components/Sidebar.vue b/docs/src/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    ref="sidebar"
     v-if="showSidebar"
+    ref="sidebar"
     class="px-4 pt-8 lg:pt-12"
   >
     <div

diff --git a/docs/src/components/ToggleDarkMode.vue b/docs/src/components/ToggleDarkMode.vue
@@ -1,5 +1,5 @@
 <template>
-  <button @click="handleClick" aria-label="Toggle Darkmode" title="Toggle Darkmode">
+  <button aria-label="Toggle Darkmode" title="Toggle Darkmode" @click="handleClick">
     <slot :dark="isDarkMode" />
   </button>
 </template>
@@ -14,6 +14,18 @@ export default {
     }
   },
 
+  mounted() {
+    if (this.hasInStorage()) {
+      this.toggleDarkMode(
+        this.getFromStorage()
+      );
+    } else if (process.isClient && window.matchMedia) {
+      this.toggleDarkMode(
+        this.detectPrefered()
+      );
+    }
+  },
+
   methods: {
     handleClick() {
       const hasDarkMode = document.documentElement.hasAttribute(LIGHTS_OUT);
@@ -49,18 +61,6 @@ export default {
     getFromStorage() {
       return localStorage.getItem(LIGHTS_OUT) === 'true' ? true : false;
     }
-  },
-
-  mounted() {
-    if (this.hasInStorage()) {
-      this.toggleDarkMode(
-        this.getFromStorage()
-      );
-    } else if (process.isClient && window.matchMedia) {
-      this.toggleDarkMode(
-        this.detectPrefered()
-      );
-    }
   }
 };
 </script>

diff --git a/docs/src/layouts/Default.vue b/docs/src/layouts/Default.vue
@@ -65,18 +65,6 @@ export default {
       sidebarOpen: false,
     }
   },
-  watch: {
-    sidebarOpen: function (isOpen) {
-      document.body.classList.toggle('overflow-hidden', isOpen)
-    },
-  },
-  methods: {
-    setHeaderHeight() {
-      this.$nextTick(() => {
-        this.headerHeight = this.$refs.header.offsetHeight
-      })
-    },
-  },
   computed: {
     sidebarStyle() {
       return {
@@ -88,9 +76,21 @@ export default {
       return this.$page && this.headerHeight > 0
     },
   },
+  watch: {
+    sidebarOpen: function (isOpen) {
+      document.body.classList.toggle('overflow-hidden', isOpen)
+    },
+  },
   mounted() {
     this.setHeaderHeight()
   },
+  methods: {
+    setHeaderHeight() {
+      this.$nextTick(() => {
+        this.headerHeight = this.$refs.header.offsetHeight
+      })
+    },
+  },
   metaInfo() {
     return {
       meta: [