linter

Author: lana-k

.eslintrc.js renamed to .eslintrc.cjs

@@ -13,7 +13,8 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
     'vue/no-mutating-props': 'warn',
     'vue/no-reserved-component-names': 'warn',
-    'vue/no-v-model-argument': 'off'
+    'vue/no-v-model-argument': 'off',
+    'vue/require-default-prop': 'off'
   },
   overrides: [
     {

src/App.vue

@@ -11,9 +11,6 @@ import { ModalsContainer } from 'vue-final-modal'
 
 export default {
   components: { ModalsContainer },
-  created() {
-    this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
-  },
   computed: {
     inquiries() {
       return this.$store.state.inquiries
@@ -26,6 +23,9 @@ export default {
         storedInquiries.updateStorage(this.inquiries)
       }
     }
+  },
+  created() {
+    this.$store.commit('setInquiries', storedInquiries.getStoredInquiries())
   }
 }
 </script>

src/components/CsvJsonImport/DelimiterSelector/index.vue

@@ -8,18 +8,18 @@
     >
       <div class="value">
         <input
-          :class="{ filled: filled }"
           ref="delimiterInput"
+          v-model="inputValue"
+          :class="{ filled: filled }"
           type="text"
           maxlength="1"
-          v-model="inputValue"
-          @click.stop
           :disabled="disabled"
+          @click.stop
         />
         <div class="name">{{ getSymbolName(modelValue) }}</div>
       </div>
       <div class="controls" @click.stop>
-        <clear-icon @click="clear" :disabled="disabled" />
+        <clear-icon :disabled="disabled" @click="clear" />
         <drop-down-chevron
           :disabled="disabled"
           @click="!disabled && (showOptions = !showOptions)"
@@ -30,8 +30,8 @@
       <div
         v-for="(option, index) in options"
         :key="index"
-        @click="chooseOption(option)"
         class="option"
+        @click="chooseOption(option)"
       >
         <pre>{{ option }}</pre>
         <div>{{ getSymbolName(option) }}</div>
@@ -47,9 +47,13 @@ import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  props: ['modelValue', 'width', 'disabled'],
-  emits: ['update:modelValue'],
   components: { DropDownChevron, ClearIcon },
+  props: {
+    modelValue: String,
+    width: String,
+    disabled: Boolean
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
       showOptions: false,
@@ -84,7 +88,7 @@ export default {
       this.inputValue = option
       this.showOptions = false
     },
-    onContainerClick(event) {
+    onContainerClick() {
       this.$refs.delimiterInput.focus()
     },
 

src/components/CsvJsonImport/index.vue

@@ -4,20 +4,20 @@
     class="dialog"
     content-class="import-modal"
     scrollable
-    :clickToClose="false"
+    :click-to-close="false"
   >
     <div class="dialog-header">
       {{ typeName }} import
-      <close-icon @click="cancelImport" :disabled="disableDialog" />
+      <close-icon :disabled="disableDialog" @click="cancelImport" />
     </div>
     <div class="dialog-body">
       <text-field
-        label="Table name"
+        id="csv-json-table-name"
         v-model="tableName"
+        label="Table name"
         width="484px"
         :disabled="disableDialog"
         :error-msg="tableNameError"
-        id="csv-json-table-name"
       />
       <div v-if="!isJson && !isNdJson" class="chars">
         <delimiter-selector
@@ -28,27 +28,27 @@
           @input="preview"
         />
         <text-field
+          id="quote-char"
+          v-model="quoteChar"
           label="Quote char"
           hint="The character used to quote fields."
-          v-model="quoteChar"
           width="93px"
           :disabled="disableDialog"
           class="char-input"
-          id="quote-char"
           @input="preview"
         />
         <text-field
+          id="escape-char"
+          v-model="escapeChar"
           label="Escape char"
           hint='
             The character used to escape the quote character within a field
             (e.g. "column with ""quotes"" in text").
           '
           max-hint-width="242px"
-          v-model="escapeChar"
           width="93px"
           :disabled="disableDialog"
           class="char-input"
-          id="escape-char"
           @input="preview"
         />
       </div>
@@ -70,28 +70,28 @@
     </div>
     <div class="dialog-buttons-container">
       <button
+        id="import-cancel"
         class="secondary"
         :disabled="disableDialog"
         @click="cancelImport"
-        id="import-cancel"
       >
         Cancel
       </button>
       <button
         v-show="!importCompleted"
+        id="import-start"
         class="primary"
         :disabled="disableDialog || disableImport"
         @click="loadToDb(file)"
-        id="import-start"
       >
         Import
       </button>
       <button
         v-show="importCompleted"
+        id="import-finish"
         class="primary"
         :disabled="disableDialog"
         @click="finish"
-        id="import-finish"
       >
         Finish
       </button>

src/components/DbUploader.vue

@@ -63,6 +63,10 @@ import events from '@/lib/utils/events'
 
 export default {
   name: 'DbUploader',
+  components: {
+    ChangeDbIcon,
+    CsvJsonImport
+  },
   props: {
     type: {
       type: String,
@@ -79,10 +83,6 @@ export default {
     }
   },
   emits: [],
-  components: {
-    ChangeDbIcon,
-    CsvJsonImport
-  },
   data() {
     return {
       state: '',

src/components/IconButton.vue

@@ -12,9 +12,9 @@
     </div>
     <span
       v-if="tooltip"
+      ref="tooltip"
       class="icon-tooltip"
       :style="tooltipStyle"
-      ref="tooltip"
     >
       {{ tooltip }}
     </span>
@@ -27,10 +27,16 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 
 export default {
   name: 'SideBarButton',
-  props: ['active', 'disabled', 'tooltip', 'tooltipPosition', 'loading'],
-  emits: ['click'],
   components: { LoadingIndicator },
   mixins: [tooltipMixin],
+  props: {
+    active: Boolean,
+    disabled: Boolean,
+    tooltip: String,
+    tooltipPosition: String,
+    loading: Boolean
+  },
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/components/LoadingDialog.vue

@@ -2,13 +2,13 @@
   <modal
     :modal-id="name"
     class="dialog"
-    :clickToClose="false"
-    :contentTransition="{ name: 'loading-dialog' }"
-    :overlayTransition="{ name: 'loading-dialog' }"
+    :click-to-close="false"
+    :content-transition="{ name: 'loading-dialog' }"
+    :overlay-transition="{ name: 'loading-dialog' }"
   >
     <div class="dialog-header">
       {{ title }}
-      <close-icon @click="$emit('cancel')" :disabled="loading" />
+      <close-icon :disabled="loading" @click="$emit('cancel')" />
     </div>
     <div class="dialog-body">
       <div v-if="loading" class="loading-dialog-body">
@@ -49,7 +49,8 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 import CloseIcon from '@/components/svg/close'
 
 export default {
-  name: 'loadingDialog',
+  name: 'LoadingDialog',
+  components: { LoadingIndicator, CloseIcon },
   props: {
     loadingMsg: String,
     successMsg: String,
@@ -66,7 +67,6 @@ export default {
       }
     }
   },
-  components: { LoadingIndicator, CloseIcon },
   methods: {
     cancel() {
       this.$emit('cancel')

src/components/Logs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="logs-container" ref="logsContainer">
+  <div ref="logsContainer" class="logs-container">
     <div v-for="(msg, index) in messages" :key="index" class="msg">
       <img v-if="msg.type === 'error'" src="~@/assets/images/error.svg" />
       <img
@@ -21,10 +21,10 @@
 import LoadingIndicator from '@/components/LoadingIndicator'
 
 export default {
-  name: 'logs',
-  props: ['messages'],
-  emits: [],
+  name: 'Logs',
   components: { LoadingIndicator },
+  props: { messages: Array },
+  emits: [],
   watch: {
     'messages.length': 'scrollToBottom'
   },

src/components/Splitpanes/index.vue

@@ -8,13 +8,13 @@
     ]"
   >
     <div
-      class="movable-splitter"
       ref="movableSplitter"
+      class="movable-splitter"
       :style="movableSplitterStyle"
     />
     <div
-      class="splitpanes-pane"
       ref="left"
+      class="splitpanes-pane"
       :size="paneBefore.size"
       max-size="30"
       :style="styles.before"
@@ -64,7 +64,7 @@
       </div>
     </div>
     <!-- splitter end -->
-    <div class="splitpanes-pane" ref="right" :style="styles.after">
+    <div ref="right" class="splitpanes-pane" :style="styles.after">
       <slot name="right-pane" />
     </div>
   </div>
@@ -158,6 +158,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.container = this.$refs.container
+  },
 
   methods: {
     bindEvents() {
@@ -242,9 +245,6 @@ export default {
         this.paneAfter.size = this.beforeMinimising.after
       }
     }
-  },
-  mounted() {
-    this.container = this.$refs.container
   }
 }
 </script>

src/components/SqlTable/Pager.vue

@@ -1,5 +1,6 @@
 <template>
   <paginate
+    v-model="page"
     :page-count="pageCount"
     :page-range="5"
     :margin-pages="1"
@@ -13,7 +14,6 @@
     next-link-class="paginator-next"
     prev-link-class="paginator-prev"
     disabled-class="paginator-disabled"
-    v-model="page"
   />
 </template>
 
@@ -23,7 +23,10 @@ import Paginate from 'vuejs-paginate-next'
 export default {
   name: 'Pager',
   components: { Paginate },
-  props: ['pageCount', 'modelValue'],
+  props: {
+    pageCount: Number,
+    modelValue: Number
+  },
   emits: ['update:modelValue'],
   data() {
     return {