Update deps & fix lint issues

package.json

@@ -9,27 +9,27 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "bulma": "^0.9.0",
+    "bulma": "^0.9.1",
     "core-js": "^3.6.4",
     "js-yaml": "^3.14.0",
     "lodash.merge": "^4.6.2",
     "register-service-worker": "^1.7.1",
-    "vue": "^2.6.11"
+    "vue": "^2.6.12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.6",
-    "@vue/cli-plugin-eslint": "~4.4.6",
-    "@vue/cli-plugin-pwa": "~4.4.6",
-    "@vue/cli-service": "~4.4.6",
+    "@vue/cli-plugin-babel": "~4.5.8",
+    "@vue/cli-plugin-eslint": "~4.5.8",
+    "@vue/cli-plugin-pwa": "~4.5.8",
+    "@vue/cli-service": "~4.5.8",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.4.0",
+    "eslint": "^7.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.0.5",
-    "raw-loader": "^4.0.1",
-    "sass": "^1.26.10",
-    "sass-loader": "^9.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^7.1.0",
+    "prettier": "^2.1.2",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.4",
+    "vue-template-compiler": "^2.6.12"
   }
 }

src/App.vue

@@ -26,7 +26,7 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -40,9 +40,9 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
+          @search-focus="showMenu = true"
+          @search-open="navigateToFirstService"
+          @search-cancel="filterServices"
         />
       </Navbar>
     </div>
@@ -51,7 +51,7 @@
       <div v-cloak class="container">
         <ConnectivityChecker
           v-if="config.connectivityCheck"
-          @network:status-update="offline = $event"
+          @network-status-update="offline = $event"
         />
         <div v-if="!offline">
           <!-- Optional messages -->

src/components/ConnectivityChecker.vue

@@ -44,7 +44,7 @@ export default {
           that.offline = true;
         })
         .finally(function () {
-          that.$emit("network:status-update", that.offline);
+          that.$emit("network-status-update", that.offline);
         });
     },
   },

src/components/Navbar.vue

@@ -9,7 +9,7 @@
             aria-expanded="false"
             class="navbar-burger"
             :class="{ 'is-active': showMenu }"
-            v-on:click="$emit('navbar:toggle')"
+            v-on:click="$emit('navbar-toggle')"
           >
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>

src/components/SearchInput.vue

@@ -6,8 +6,8 @@
       ref="search"
       :value="value"
       @input="$emit('input', $event.target.value.toLowerCase())"
-      @keyup.enter.exact="$emit('search:open')"
-      @keyup.alt.enter="$emit('search:open', '_blank')"
+      @keyup.enter.exact="$emit('search-open')"
+      @keyup.alt.enter="$emit('search-open', '_blank')"
     />
   </div>
 </template>
@@ -20,7 +20,7 @@ export default {
     this._keyListener = function (event) {
       if (event.key === "/") {
         event.preventDefault();
-        this.$emit("search:focus");
+        this.$emit("search-focus");
         this.$nextTick(() => {
           this.$refs.search.focus();
         });
@@ -28,7 +28,7 @@ export default {
       if (event.key === "Escape") {
         this.$refs.search.value = "";
         this.$refs.search.blur();
-        this.$emit("search:cancel");
+        this.$emit("search-cancel");
       }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));

src/components/Service.vue

@@ -11,7 +11,7 @@
             </div>
             <div v-if="item.icon" class="media-left">
               <figure class="image is-48x48">
-                <i style="font-size: 35px;" :class="['fa-fw', item.icon]"></i>
+                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
               </figure>
             </div>
             <div class="media-content">

src/components/SettingToggle.vue

@@ -1,6 +1,6 @@
 <template>
   <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
-    <span><i :class="['fas', 'fa-fw', value ? icon : iconAlt]"></i></span>
+    <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
     <slot></slot>
   </a>
 </template>
@@ -15,13 +15,12 @@ export default {
   },
   data: function () {
     return {
+      secondaryIcon: null,
       value: true,
     };
   },
   created: function () {
-    if (!this.iconAlt) {
-      this.iconAlt = this.icon;
-    }
+    this.secondaryIcon = this.iconAlt || this.icon;
 
     if (this.name in localStorage) {
       this.value = JSON.parse(localStorage[this.name]);