chore: clean up vue warnings

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 {

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']),

src/components/LayerKey.vue

@@ -1,8 +1,8 @@
 <template>
  <!-- prettier-ignore -->
  <div
- draggable
  :id="myid"
+ draggable
  class="key key-layer"
  :class="myclasses"
  :style="mystyles"