From fe9776810e2ddf3ea2c2ccc666d6a26912382a75 Mon Sep 17 00:00:00 2001
From: Yan-Fa Li <yanfali@gmail.com>
Date: Sat, 28 Oct 2023 12:49:28 -0700
Subject: [PATCH] chore: clean up vue warnings

---
 src/components/BaseKeymap.vue             |  2 +-
 src/components/BrowserWarn.vue            | 16 +++---
 src/components/ControllerTop.vue          |  2 +-
 src/components/ElectronBottomControls.vue |  8 +--
 src/components/Keycode.vue                | 60 ++++++++++++++++-------
 src/components/Keycodes.vue               | 22 ++++-----
 src/components/LayerContainerKey.vue      |  4 +-
 src/components/LayerControl.vue           |  8 +--
 src/components/LayerKey.vue               |  2 +-
 src/components/Main.vue                   | 42 ++++++++--------
 src/components/PrintKey.vue               |  9 ++--
 src/components/SettingsPanel.vue          | 18 +++----
 src/components/Space.vue                  | 20 +++++---
 src/components/StatusBar.vue              | 26 +++++-----
 src/components/StatusPanel.vue            | 40 +++++++--------
 src/components/TesterKey.vue              |  9 ++--
 src/components/Veil.vue                   |  4 +-
 src/components/VisualTesterKeymap.vue     |  4 +-
 src/components/spinner.vue                |  4 +-
 19 files changed, 168 insertions(+), 132 deletions(-)

diff --git a/src/components/BaseKeymap.vue b/src/components/BaseKeymap.vue
index 38299300a3..3a2a6d8513 100644
--- a/src/components/BaseKeymap.vue
+++ b/src/components/BaseKeymap.vue
@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'base-keymap',
+  name: 'BaseKeymap',
   computed: {
     styles() {
       let keySize = 0.85;
diff --git a/src/components/BrowserWarn.vue b/src/components/BrowserWarn.vue
index 7b1cabc2cc..db2c2b4f28 100644
--- a/src/components/BrowserWarn.vue
+++ b/src/components/BrowserWarn.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="browser-warn" v-show="isNotSupported && !isDimissed">
-    <a class="dismiss" title="dismiss" v-on:click="dismiss">X</a>
+  <div v-show="isNotSupported && !isDimissed" id="browser-warn">
+    <a class="dismiss" title="dismiss" @click="dismiss">X</a>
     {{ $t('errors.unsupportedBrowser') }}
     <a
       href="https://www.google.com/intl/en_us/chrome/"
@@ -20,15 +20,10 @@
 
 <script>
 export default {
-  name: 'browser-warn-bar',
+  name: 'BrowserWarnBar',
   data() {
     return { isDimissed: false };
   },
-  methods: {
-    dismiss() {
-      this.isDimissed = true;
-    }
-  },
   computed: {
     isNotSupported() {
       const usrAgent = window.navigator.userAgent.toLowerCase();
@@ -40,6 +35,11 @@ export default {
       const isFirefox = usrAgent.indexOf('firefox') !== -1;
       return !(isChrome || isFirefox);
     }
+  },
+  methods: {
+    dismiss() {
+      this.isDimissed = true;
+    }
   }
 };
 </script>
diff --git a/src/components/ControllerTop.vue b/src/components/ControllerTop.vue
index 0d3f7eb656..862f9c1f67 100644
--- a/src/components/ControllerTop.vue
+++ b/src/components/ControllerTop.vue
@@ -29,10 +29,10 @@
         ></v-select>
         <a
           id="open-on-github"
+          v-tooltip.bottom="$t('githubKeyboardFolder.title')"
           rel="noopener"
           target="_blank"
           :href="githubKeyboardFolderURL"
-          v-tooltip.bottom="$t('githubKeyboardFolder.title')"
         >
           <font-awesome-icon icon="fa-brands fa-github" size="lg" fixed-width />
         </a>
diff --git a/src/components/ElectronBottomControls.vue b/src/components/ElectronBottomControls.vue
index 3a716edd65..80c0ad30f5 100644
--- a/src/components/ElectronBottomControls.vue
+++ b/src/components/ElectronBottomControls.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
     <button
-      class="fixed-size"
       id="fwFile"
-      @click="autoFlashFirmware"
+      class="fixed-size"
       :title="$t('flashFirmware.title')"
       :disabled="disableDownloadBinary"
+      @click="autoFlashFirmware"
     >
       <font-awesome-icon icon="download" size="lg" fixed-width />
       {{ $t('flashFirmware.label') }}
     </button>
     <button
-      class="fixed-size"
       id="fwFile"
-      @click="flashFirmware"
+      class="fixed-size"
       :title="$t('flashFile.title')"
       :disabled="disableFlashFile"
+      @click="flashFirmware"
     >
       <font-awesome-icon icon="download" size="lg" fixed-width />
       {{ $t('flashFile.label') }}
diff --git a/src/components/Keycode.vue b/src/components/Keycode.vue
index 6c8a70de09..b0c3bcd291 100644
--- a/src/components/Keycode.vue
+++ b/src/components/Keycode.vue
@@ -25,16 +25,47 @@ import isUndefined from 'lodash/isUndefined';
 
 const debug = false;
 export default {
-  name: 'keycode',
+  name: 'KeycodeComponent',
   props: {
-    type: String,
-    code: String,
-    title: String,
-    width: null,
-    name: String,
-    classes: String,
-    styles: Object,
-    layer: Number
+    type: {
+      type: String,
+      default: undefined
+    },
+    code: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: undefined
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    classes: {
+      type: String,
+      default: undefined
+    },
+    styles: {
+      type: Object,
+      default: () => {}
+    },
+    layer: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      dragging: false,
+      crt: undefined,
+      hidden: undefined
+    };
   },
   computed: {
     computedStyles() {
@@ -66,12 +97,8 @@ export default {
       return this.title ? `${this.code}\n${this.title}` : this.code;
     }
   },
-  data() {
-    return {
-      dragging: false,
-      crt: undefined,
-      hidden: undefined
-    };
+  mounted() {
+    this.hidden = document.getElementsByClassName('qmk-hidden-drag-n-drop')[0];
   },
   methods: {
     dragend() {
@@ -102,9 +129,6 @@ export default {
         layer: this.layer
       });
     }
-  },
-  mounted() {
-    this.hidden = document.getElementsByClassName('qmk-hidden-drag-n-drop')[0];
   }
 };
 </script>
diff --git a/src/components/Keycodes.vue b/src/components/Keycodes.vue
index 07e28e083a..90f9f0a19e 100644
--- a/src/components/Keycodes.vue
+++ b/src/components/Keycodes.vue
@@ -21,12 +21,12 @@
     <div id="keycodes">
       <div class="tabs">
         <span
-          class="tab"
-          :class="classes(index)"
           v-for="(key, index) in keycodesByGroup"
           :key="index"
-          @click="changeActive(index)"
           :title="$t('keycodesTab.' + index + '.label')"
+          class="tab"
+          :class="classes(index)"
+          @click="changeActive(index)"
           >{{ $t('keycodesTab.' + index + '.label')
           }}<span v-if="searchFilter !== ''"
             >({{ searchCounters[index] }})</span
@@ -34,19 +34,19 @@
         >
         <span class="end-tab"
           ><font-awesome-icon class="keycode-search-icon" icon="search" /><input
-            @focus="stopListening"
-            @blur="startListening"
+            v-model="searchFilter_"
             type="text"
             :placeholder="$t('searchKeycodes')"
-            v-model="searchFilter_"
             autocomplete="off"
             spellcheck="false"
+            @focus="stopListening"
+            @blur="startListening"
         /></span>
       </div>
       <div class="tab-area">
         <template v-for="(key, index) in activeTab">
           <component
-            v-bind:is="getComponent(key.code)"
+            :is="getComponent(key.code)"
             v-bind="key"
             :key="index"
             :class="filterClass(key)"
@@ -66,7 +66,7 @@ import Space from '@/components/Space.vue';
 import store from '@/store';
 
 export default {
-  name: 'keycodes',
+  name: 'KeycodesComponent',
   components: { Keycode, Space },
   props: {},
   data() {
@@ -74,9 +74,6 @@ export default {
       clearTimeout: undefined
     };
   },
-  mounted() {
-    this.debouncedSetSearchFilter = debounce(this.setSearchFilter, 500);
-  },
   computed: {
     ...mapGetters('keycodes', ['keycodes']),
     ...mapState('app', ['configuratorSettings']),
@@ -106,6 +103,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.debouncedSetSearchFilter = debounce(this.setSearchFilter, 500);
+  },
   methods: {
     ...mapMutations('app', ['setMessage', 'stopListening', 'startListening']),
     ...mapMutations('keycodes', ['setSearchFilter', 'changeActive']),
diff --git a/src/components/LayerContainerKey.vue b/src/components/LayerContainerKey.vue
index 69f767ca30..044765bdaf 100644
--- a/src/components/LayerContainerKey.vue
+++ b/src/components/LayerContainerKey.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- prettier-ignore -->
   <div
-    draggable
     :id="myid"
+    draggable
     class="key key-container"
     :class="myclasses"
     :style="mystyles"
@@ -30,7 +30,7 @@ import isUndefined from 'lodash/isUndefined';
 import { mapMutations } from 'vuex';
 import BaseKey from './BaseKey.vue';
 export default {
-  name: 'layer-container-key',
+  name: 'LayerContainerKey',
   extends: BaseKey,
   data() {
     return {
diff --git a/src/components/LayerControl.vue b/src/components/LayerControl.vue
index c1f77392f5..4b2b62904f 100644
--- a/src/components/LayerControl.vue
+++ b/src/components/LayerControl.vue
@@ -6,16 +6,16 @@
     <div class="layers">
       <!-- prettier-ignore -->
       <div
-        class="layer"
-        :class="layer.clazz"
         v-for="layer in layers"
         :key="layer.id"
+        class="layer"
+        :class="layer.clazz"
         @click="clicked(layer.id)"
       >{{ layer.name }}</div>
     </div>
     <button
-      class="clear-button"
       v-tooltip="$t('layer.title')"
+      class="clear-button"
       @click="clearLayer"
     >
       <font-awesome-icon icon="trash" size="lg" fixed-width />
@@ -27,7 +27,7 @@ import rangeRight from 'lodash/rangeRight';
 import isUndefined from 'lodash/isUndefined';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 export default {
-  name: 'layer-control',
+  name: 'LayerControl',
   computed: {
     ...mapState('keymap', ['layer']),
     ...mapState('app', ['configuratorSettings']),
diff --git a/src/components/LayerKey.vue b/src/components/LayerKey.vue
index 7a24935883..2fae15b08c 100644
--- a/src/components/LayerKey.vue
+++ b/src/components/LayerKey.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- prettier-ignore -->
   <div
-    draggable
     :id="myid"
+    draggable
     class="key key-layer"
     :class="myclasses"
     :style="mystyles"
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 5e3f2fcef5..260ed19152 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -7,8 +7,8 @@
     </div>
     <div class="hint hint-right">
       <a
-        href="https://github.com/qmk/qmk_toolbox/releases"
         v-tooltip="$t('downloadToolbox.label')"
+        href="https://github.com/qmk/qmk_toolbox/releases"
         target="_blank"
         rel="noopener"
         >{{ $t('downloadToolbox.label') }}</a
@@ -20,7 +20,7 @@
       </div>
       <div class="right-side">
         <div class="keymap--area">
-          <label class="keymap--label" v-tooltip="$t('ColorwayTip.title')">
+          <label v-tooltip="$t('ColorwayTip.title')" class="keymap--label">
             {{ $t('keymap.label') }}:
             <font-awesome-icon
               v-if="continuousInput"
@@ -31,17 +31,17 @@
           &nbsp;
           <!-- maintain spacing for paragraph -->
           <select
-            class="keymap--keyset"
             id="colorway-select"
             v-model="curIndex"
+            class="keymap--keyset"
             @focus="focus"
             @blur="blur"
           >
             <option
-              class="option"
               v-for="(name, index) in displayColorways"
               :key="index"
               :value="index"
+              class="option"
             >
               {{ name }}
             </option>
@@ -49,10 +49,10 @@
           <a
             id="favorite-colorway"
             v-tooltip="$t('favoriteColor')"
-            @click="favColor"
             :class="{
               active: isFavoriteColor
             }"
+            @click="favColor"
           >
             <font-awesome-icon icon="star" size="lg" fixed-width />
           </a>
@@ -77,8 +77,7 @@ import VisualKeymap from '@/components/VisualKeymap.vue';
 import LayerControl from '@/components/LayerControl.vue';
 
 export default {
-  name: 'Main',
-  props: {},
+  name: 'MainComponent',
   components: {
     ControllerTop,
     StatusPanel,
@@ -86,6 +85,7 @@ export default {
     VisualKeymap,
     LayerControl
   },
+  props: {},
   computed: {
     ...mapState('app', ['appInitialized', 'configuratorSettings']),
     ...mapGetters('app', ['keyCount']),
@@ -132,6 +132,20 @@ export default {
       );
     }
   },
+  async mounted() {
+    await this.initKeypressListener();
+    // Loading favorite color
+    if (this.configuratorSettings.favoriteColor) {
+      const favoriteColor =
+        this.configuratorSettings.favoriteColor.toLowerCase();
+      this.curIndex = this.displayColorways.findIndex(
+        (color) => color.toLowerCase() === favoriteColor
+      );
+    }
+  },
+  beforeDestroy() {
+    this.resetListener();
+  },
   methods: {
     ...mapActions('app', ['setFavoriteColor', 'initKeypressListener']),
     ...mapMutations('keymap', ['nextColorway']),
@@ -153,20 +167,6 @@ export default {
     blur() {
       this.startListening();
     }
-  },
-  async mounted() {
-    await this.initKeypressListener();
-    // Loading favorite color
-    if (this.configuratorSettings.favoriteColor) {
-      const favoriteColor =
-        this.configuratorSettings.favoriteColor.toLowerCase();
-      this.curIndex = this.displayColorways.findIndex(
-        (color) => color.toLowerCase() === favoriteColor
-      );
-    }
-  },
-  beforeDestroy() {
-    this.resetListener();
   }
 };
 </script>
diff --git a/src/components/PrintKey.vue b/src/components/PrintKey.vue
index 8e4430e50f..74f3f9fa7b 100644
--- a/src/components/PrintKey.vue
+++ b/src/components/PrintKey.vue
@@ -13,11 +13,14 @@
 import BaseKey from './BaseKey.vue';
 
 export default {
-  name: 'print-key',
+  name: 'PrintKey',
+  extends: BaseKey,
   props: {
-    layer: Number
+    layer: {
+      type: Number,
+      default: 0
+    }
   },
-  extends: BaseKey,
   computed: {
     myid() {
       return `key-${this.layer}-${this.id}`;
diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue
index 720c99a1a3..6d46a28afb 100644
--- a/src/components/SettingsPanel.vue
+++ b/src/components/SettingsPanel.vue
@@ -6,8 +6,8 @@
       <div>
         <label
           :title="$t('settingsPanel.fastInput.title')"
-          @mouseover="help('fastInput')"
           class="settings-panel--text"
+          @mouseover="help('fastInput')"
           >{{ $t('settingsPanel.fastInput.label') }}</label
         >
       </div>
@@ -24,8 +24,8 @@
       <div>
         <label
           class="settings-panel--legends"
-          @mouseover="help('legends')"
           :title="$t('settingsPanel.legends.title')"
+          @mouseover="help('legends')"
           >{{ $t('settingsPanel.legends.title') }}</label
         >
       </div>
@@ -39,8 +39,8 @@
       <div>
         <label
           class="settings-panel--text"
-          @mouseover="help('toggleTutorial')"
           :title="$t('settingsPanel.toggleTutorial.label')"
+          @mouseover="help('toggleTutorial')"
           >{{ $t('settingsPanel.toggleTutorial.label') }}</label
         >
       </div>
@@ -58,8 +58,8 @@
       <div>
         <label
           class="settings-panel--text"
-          @mouseover="help('darkmode')"
           :title="$t('settingsPanel.darkmode.label')"
+          @mouseover="help('darkmode')"
           >{{ $t('settingsPanel.darkmode.label') }}</label
         >
       </div>
@@ -76,8 +76,8 @@
       <div>
         <label
           class="settings-panel--text"
-          @mouseover="help('language')"
           :title="$t('settingsPanel.language.title')"
+          @mouseover="help('language')"
           >{{ $t('settingsPanel.language.title') }}</label
         >
       </div>
@@ -91,8 +91,8 @@
       <div>
         <label
           class="settings-panel--text"
-          @mouseover="help('osKeyboardLayout')"
           :title="$t('settingsPanel.osKeyboardLayout.title')"
+          @mouseover="help('osKeyboardLayout')"
           >{{ $t('settingsPanel.osKeyboardLayout.title') }}</label
         >
       </div>
@@ -113,8 +113,8 @@
       <div>
         <label
           class="settings-panel--clear-keymap"
-          @mouseover="help('clearLayer')"
           :title="$t('settingsPanel.clearLayer.title')"
+          @mouseover="help('clearLayer')"
           >{{ $t('settingsPanel.clearLayer.title') }}</label
         >
         <div>
@@ -136,7 +136,8 @@
 import { mapMutations, mapState, mapActions } from 'vuex';
 import { ToggleButton } from 'vue-js-toggle-button';
 export default {
-  name: 'settings-panel',
+  name: 'SettingsPanel',
+  components: { ToggleButton },
   data() {
     return {
       labels: {
@@ -152,7 +153,6 @@ export default {
       defaultWidth: 75
     };
   },
-  components: { ToggleButton },
   computed: {
     ...mapState('keymap', ['continuousInput']),
     ...mapState('app', [
diff --git a/src/components/Space.vue b/src/components/Space.vue
index d114c9c21e..1bcd633e9e 100644
--- a/src/components/Space.vue
+++ b/src/components/Space.vue
@@ -2,7 +2,7 @@
   <!-- prettier-ignore -->
   <div class="space" :class="computedClass" :title="label" @mouseenter="$emit('mouseenter')">
     {{ label }}&nbsp;
-    <span :class="iconClass" v-if="icon">
+    <span v-if="icon" :class="iconClass">
       <font-awesome-icon :icon="icon" fixed-width />
     </span>
   </div>
@@ -10,10 +10,16 @@
 <script>
 import isUndefined from 'lodash/isUndefined';
 export default {
-  name: 'space',
+  name: 'SpaceComponent',
   props: {
-    label: String,
-    width: null,
+    label: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: undefined
+    },
     icon: {
       type: String,
       default: ''
@@ -23,6 +29,9 @@ export default {
       default: ''
     }
   },
+  data() {
+    return {};
+  },
   computed: {
     computedClass() {
       let classes = [];
@@ -31,9 +40,6 @@ export default {
       }
       return classes;
     }
-  },
-  data() {
-    return {};
   }
 };
 </script>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index ef27b93fa8..1a0bb56eef 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -60,7 +60,16 @@ import { mapState, mapMutations } from 'vuex';
 const highWaterMark = 20;
 const warningWaterMark = 10;
 export default {
-  name: 'status-bar',
+  name: 'StatusBar',
+  data: () => {
+    return {
+      status: '',
+      version: '0.1',
+      jobCount: 0,
+      hasError: false,
+      jobs: 'Initializing'
+    };
+  },
   computed: {
     ...mapState('app', ['settingsPanelVisible']),
     currentStatusClass() {
@@ -86,6 +95,9 @@ export default {
       return 'https://discord.gg/Uq7gcHh';
     }
   },
+  mounted() {
+    setTimeout(this.fetchData, 1000);
+  },
   methods: {
     ...mapMutations('app', ['setSettingsPanel']),
     getPollInterval() {
@@ -120,18 +132,6 @@ export default {
     clickSettings() {
       this.setSettingsPanel(!this.settingsPanelVisible);
     }
-  },
-  data: () => {
-    return {
-      status: '',
-      version: '0.1',
-      jobCount: 0,
-      hasError: false,
-      jobs: 'Initializing'
-    };
-  },
-  mounted() {
-    setTimeout(this.fetchData, 1000);
   }
 };
 </script>
diff --git a/src/components/StatusPanel.vue b/src/components/StatusPanel.vue
index 25ec658caa..489338a07c 100644
--- a/src/components/StatusPanel.vue
+++ b/src/components/StatusPanel.vue
@@ -2,23 +2,23 @@
   <div id="status">
     <textarea
       id="terminal"
-      v-model="message"
       ref="terminal"
+      v-model="message"
       readonly
       :class="terminalClasses"
     />
     <label
-      for="toggle-terminal"
       id="toggle-terminal-label"
+      for="toggle-terminal"
       :class="terminalClasses"
       @click="toggleTerminal"
       >{{ $t('toggleTerminal.label') }}</label
     >
     <font-awesome-icon
+      id="toggle-terminal"
       icon="chevron-up"
       size="lg"
       fixed-width
-      id="toggle-terminal"
       :title="$t('toggleTerminal.title')"
       :class="terminalClasses"
       @click="toggleTerminal"
@@ -28,7 +28,23 @@
 <script>
 import { mapGetters, mapMutations, mapState } from 'vuex';
 export default {
-  name: 'status-panel',
+  name: 'StatusPanel',
+  data: () => {
+    return {
+      isTerminalOpen: true
+    };
+  },
+  computed: {
+    ...mapGetters('status', ['message', 'scrollToLatest']),
+    ...mapState('app', ['compileDisabled']),
+    terminalClasses() {
+      const classes = [];
+      if (!this.isTerminalOpen) {
+        classes.push('collapsed');
+      }
+      return classes.join(' ');
+    }
+  },
   watch: {
     message(newV, oldV) {
       if (this.scrollToLatest && newV !== oldV) {
@@ -58,22 +74,6 @@ export default {
     toggleTerminal() {
       this.isTerminalOpen = !this.isTerminalOpen;
     }
-  },
-  computed: {
-    ...mapGetters('status', ['message', 'scrollToLatest']),
-    ...mapState('app', ['compileDisabled']),
-    terminalClasses() {
-      const classes = [];
-      if (!this.isTerminalOpen) {
-        classes.push('collapsed');
-      }
-      return classes.join(' ');
-    }
-  },
-  data: () => {
-    return {
-      isTerminalOpen: true
-    };
   }
 };
 </script>
diff --git a/src/components/TesterKey.vue b/src/components/TesterKey.vue
index 1202d38226..575197dc77 100644
--- a/src/components/TesterKey.vue
+++ b/src/components/TesterKey.vue
@@ -11,11 +11,14 @@
 <script>
 import BaseKey from './BaseKey.vue';
 export default {
-  name: 'tester-key',
+  name: 'TesterKey',
+  extends: BaseKey,
   props: {
-    layer: Number
+    layer: {
+      type: Number,
+      default: 0
+    }
   },
-  extends: BaseKey,
   computed: {
     myid() {
       return `key-${this.layer}-${this.id}`;
diff --git a/src/components/Veil.vue b/src/components/Veil.vue
index c661f40fef..cc17dd0166 100644
--- a/src/components/Veil.vue
+++ b/src/components/Veil.vue
@@ -1,13 +1,13 @@
 <template functional>
   <transition name="fade" appear>
-    <div class="veil-container" v-show="props.isVisible">
+    <div v-show="props.isVisible" class="veil-container">
       <slot name="contents">Something to Unveil</slot>
     </div>
   </transition>
 </template>
 <script>
 export default {
-  name: 'Veil',
+  name: 'VeilComponent',
   props: {
     isVisible: {
       type: Boolean,
diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue
index c5e86db58f..227919c28b 100644
--- a/src/components/VisualTesterKeymap.vue
+++ b/src/components/VisualTesterKeymap.vue
@@ -3,10 +3,10 @@
     <div class="layout-selector-radios">
       <slot v-for="_layout in availableLayouts">
         <button
-          class="layout-btn-select"
-          v-on:click="layout = _layout"
           :key="_layout"
+          class="layout-btn-select"
           :class="{ active: _layout === layout }"
+          @click="layout = _layout"
         >
           {{ _layout }}
         </button>
diff --git a/src/components/spinner.vue b/src/components/spinner.vue
index da92af2094..3ad108f0c7 100644
--- a/src/components/spinner.vue
+++ b/src/components/spinner.vue
@@ -1,5 +1,5 @@
 <template functional>
-  <VeilComponent :isVisible="props.isVisible">
+  <VeilComponent :is-visible="props.isVisible">
     <template #contents>
       <div class="spinner">
         <h1 class="status">{{ props.status }}</h1>
@@ -16,7 +16,7 @@
 </template>
 <script>
 export default {
-  name: 'spinner',
+  name: 'SpinnerComponent',
   props: {
     isVisible: {
       type: Boolean,