chore: clean up accumulated vue warnings

src/components/AnyKey.vue

@@ -15,14 +15,14 @@
     @dragenter.prevent="dragenter"
   ><div :class="`${hasFocus ? 'key-layer-title-focus' : 'key-layer-title'}`">{{ displayName }}<div><input
   v-if="isShowingKeymapLegends"
+  ref="input"
+  v-model="value" 
+  :style="`width:calc(${this.charLength}ch + 6px);`"
   class="key-layer-input"
+  spellcheck="false"
   @focus.prevent.stop="focus"
   @blur.prevent.stop="blur"
-  @click.prevent.stop="clickignore"
-  ref="input"
-  spellcheck="false"
-  :style="`width:calc(${this.charLength}ch + 6px);`"
-  v-model="value" /></div></div><div
+  @click.prevent.stop="clickignore" /></div></div><div
         v-if="visible"
         class="remove"
         @click.stop="remove"
@@ -32,7 +32,7 @@
 import { mapMutations } from 'vuex';
 import BaseKey from './BaseKey.vue';
 export default {
-  name: 'any-key',
+  name: 'AnyKey',
   extends: BaseKey,
   data() {
     return {

src/components/BaseKey.vue

@@ -1,8 +1,8 @@
 <template>
   <!-- prettier-ignore -->
   <div
-    draggable
     :id="myid"
+    draggable
     class="key"
     :class="myclasses"
     :style="mystyles"
@@ -99,27 +99,64 @@ const getKeySizeClass = (unitheight, unitwidth) => {
 };
 
 export default {
-  name: 'base-key',
+  name: 'BaseKey',
   props: {
-    id: Number,
-    meta: Object,
-    w: Number,
-    h: Number,
-    y: Number,
-    x: Number,
-    uh: Number,
-    uw: Number,
-    colorway: String,
+    id: {
+      type: Number,
+      default: 0
+    },
+    meta: {
+      type: Object,
+      default: () => {}
+    },
+    w: {
+      type: Number,
+      default: 0
+    },
+    h: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    uh: {
+      type: Number,
+      default: 0
+    },
+    uw: {
+      type: Number,
+      default: 0
+    },
+    colorway: {
+      type: String,
+      default: ''
+    },
     legends: {
       type: String,
       default: 'keymap'
     },
-    matrix: Array,
+    matrix: {
+      type: Array,
+      default: () => []
+    },
     printable: {
       type: Boolean,
       default: false
     }
   },
+  data() {
+    return {
+      inHover: false,
+      inSwap: false,
+      platform: undefined
+    };
+  },
   computed: {
     ...mapState('keymap', ['config']),
     ...mapState('keymap', { curLayer: 'layer' }),
@@ -324,13 +361,6 @@ export default {
       }
       this.setSelectedContent(id);
     }
-  },
-  data() {
-    return {
-      inHover: false,
-      inSwap: false,
-      platform: undefined
-    };
   }
 };
 </script>

src/components/BaseKeymap.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'base-keymap',
+  name: 'BaseKeymap',
   computed: {
     styles() {
       let keySize = 0.85;

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>

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>

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') }}

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>

src/components/Keycodes.vue

@@ -21,32 +21,32 @@
     <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
           ></span
         >
         <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,17 +66,14 @@ import Space from '@/components/Space.vue';
 import store from '@/store';
 
 export default {
-  name: 'keycodes',
+  name: 'KeycodesComponent',
   components: { Keycode, Space },
   props: {},
   data() {
     return {
       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']),

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 {