linter

src/views/MainView/AppDiagnosticInfo.vue

@@ -15,7 +15,7 @@
           {{ item.name }}
           <div class="divider" />
           <div class="options">
-            <div v-for="(opt, index) in item.info" :key="index">
+            <div v-for="(opt, optIndex) in item.info" :key="optIndex">
               {{ opt }}
             </div>
           </div>

src/views/MainView/Inquiries/index.vue

@@ -1,22 +1,22 @@
 <template>
   <div id="my-inquiries-container">
-    <div id="start-guide" v-if="allInquiries.length === 0">
+    <div v-if="allInquiries.length === 0" id="start-guide">
       You don't have saved inquiries so far.
       <span class="link" @click="emitCreateTabEvent">Create</span>
       the one from scratch or
-      <span @click="importInquiries" class="link">import</span> from a file.
+      <span class="link" @click="importInquiries">import</span> from a file.
     </div>
     <div
-      id="loading-predefined-status"
       v-if="$store.state.loadingPredefinedInquiries"
+      id="loading-predefined-status"
     >
       <loading-indicator />
       Loading predefined inquiries...
     </div>
     <div
+      v-show="allInquiries.length > 0"
       id="my-inquiries-content"
       ref="my-inquiries-content"
-      v-show="allInquiries.length > 0"
     >
       <div id="my-inquiries-toolbar">
         <div id="toolbar-buttons">
@@ -28,17 +28,17 @@
             Import
           </button>
           <button
+            v-show="selectedInquiriesCount > 0"
             id="toolbar-btns-export"
             class="toolbar"
-            v-show="selectedInquiriesCount > 0"
             @click="exportSelectedInquiries()"
           >
             Export
           </button>
           <button
+            v-show="selectedNotPredefinedCount > 0"
             id="toolbar-btns-delete"
             class="toolbar"
-            v-show="selectedNotPredefinedCount > 0"
             @click="showDeleteDialog(selectedInquiriesIds)"
           >
             Delete
@@ -46,9 +46,9 @@
         </div>
         <div id="toolbar-search">
           <text-field
+            v-model="filter"
             placeholder="Search inquiry by name"
             width="300px"
-            v-model="filter"
           />
         </div>
       </div>
@@ -60,7 +60,7 @@
       <div v-show="showedInquiries.length > 0" class="rounded-bg">
         <div class="header-container">
           <div>
-            <div class="fixed-header" ref="name-th">
+            <div ref="name-th" class="fixed-header">
               <check-box
                 ref="mainCheckBox"
                 theme="light"
@@ -99,9 +99,9 @@
                     >
                       Predefined
                       <span
+                        ref="tooltip"
                         class="icon-tooltip"
                         :style="tooltipStyle"
-                        ref="tooltip"
                       >
                         Predefined inquiries come from the server. These
                         inquiries can’t be deleted or renamed.
@@ -121,9 +121,9 @@
                       />
                       <copy-icon @click="duplicateInquiry(index)" />
                       <export-icon
-                        @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                         tooltip="Export inquiry to file"
                         tooltip-position="top-left"
+                        @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                       />
                       <delete-icon
                         v-if="!inquiry.isPredefined"
@@ -147,9 +147,9 @@
       </div>
       <div class="dialog-body">
         <text-field
+          v-model="newName"
           label="New inquiry name"
           :error-msg="errorMsg"
-          v-model="newName"
           width="100%"
         />
       </div>

src/views/MainView/Inquiries/svg/copy.vue

@@ -20,7 +20,7 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
       Duplicate inquiry
     </span>
   </span>
@@ -31,8 +31,8 @@ import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'CopyIcon',
-  emits: ['click'],
   mixins: [tooltipMixin],
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/views/MainView/Inquiries/svg/delete.vue

@@ -18,7 +18,7 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
       Delete inquiry
     </span>
   </span>
@@ -29,8 +29,8 @@ import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'DeleteIcon',
-  emits: ['click'],
   mixins: [tooltipMixin],
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/views/MainView/Inquiries/svg/rename.vue

@@ -18,7 +18,7 @@
         fill="#A2B1C6"
       />
     </svg>
-    <span class="icon-tooltip" :style="tooltipStyle" ref="tooltip">
+    <span ref="tooltip" class="icon-tooltip" :style="tooltipStyle">
       Rename inquiry
     </span>
   </span>
@@ -29,8 +29,8 @@ import tooltipMixin from '@/tooltipMixin'
 
 export default {
   name: 'RenameIcon',
-  emits: ['click'],
   mixins: [tooltipMixin],
+  emits: ['click'],
   methods: {
     onClick() {
       this.hideTooltip()

src/views/MainView/MainMenu.vue

@@ -10,8 +10,8 @@
     </div>
     <div id="nav-buttons">
       <button
-        id="save-btn"
         v-show="currentInquiry && $route.path === '/workspace'"
+        id="save-btn"
         class="primary"
         :disabled="isSaved"
         @click="checkInquiryBeforeSave"
@@ -37,9 +37,9 @@
           modifications will be saved as a new inquiry. Enter the name for it.
         </div>
         <text-field
+          v-model="name"
           label="Inquiry name"
           :error-msg="errorMsg"
-          v-model="name"
           width="100%"
         />
       </div>

src/views/MainView/Workspace/Schema/TableDescription.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div @click="colVisible = !colVisible" class="table-name">
+    <div class="table-name" @click="colVisible = !colVisible">
       <tree-chevron :expanded="colVisible" />
       {{ name }}
     </div>
@@ -19,7 +19,10 @@ import TreeChevron from '@/components/svg/treeChevron'
 export default {
   name: 'TableDescription',
   components: { TreeChevron },
-  props: ['name', 'columns'],
+  props: {
+    name: String,
+    columns: Array
+  },
   data() {
     return {
       colVisible: false

src/views/MainView/Workspace/Schema/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="schema-container">
     <div id="schema-filter">
-      <text-field placeholder="Search table" width="100%" v-model="filter" />
+      <text-field v-model="filter" placeholder="Search table" width="100%" />
     </div>
     <div id="db">
-      <div @click="schemaVisible = !schemaVisible" class="db-name">
+      <div class="db-name" @click="schemaVisible = !schemaVisible">
         <tree-chevron v-show="schema.length > 0" :expanded="schemaVisible" />
         {{ dbName }}
       </div>

src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="chart-container" ref="chartContainer">
-    <div class="warning chart-warning" v-show="!dataSources && visible">
+  <div ref="chartContainer" class="chart-container">
+    <div v-show="!dataSources && visible" class="warning chart-warning">
       There is no data to build a chart. Run your SQL query and make sure the
       result is not empty.
     </div>
@@ -10,17 +10,17 @@
     >
       <PlotlyEditor
         v-show="visible"
+        ref="plotlyEditor"
         :data="state.data"
         :layout="state.layout"
         :frames="state.frames"
         :config="config"
-        :dataSources="dataSources"
-        :dataSourceOptions="dataSourceOptions"
+        :data-sources="dataSources"
+        :data-source-options="dataSourceOptions"
         :plotly="plotly"
-        :useResizeHandler="useResizeHandler"
+        :use-resize-handler="useResizeHandler"
         :debug="true"
-        :advancedTraceTypeSelector="true"
-        ref="plotlyEditor"
+        :advanced-trace-type-selector="true"
         @update="update"
         @render="onRender"
       />
@@ -40,17 +40,17 @@ import events from '@/lib/utils/events'
 
 export default {
   name: 'Chart',
-  props: [
-    'dataSources',
-    'initOptions',
-    'importToPngEnabled',
-    'importToSvgEnabled',
-    'forPivot'
-  ],
-  emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
   components: {
     PlotlyEditor: applyPureReactInVue(ReactPlotlyEditorWithPlotRef)
   },
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    importToPngEnabled: Boolean,
+    importToSvgEnabled: Boolean,
+    forPivot: Boolean
+  },
+  emits: ['update:importToSvgEnabled', 'update', 'loadingImageCompleted'],
   data() {
     return {
       plotly,
@@ -74,6 +74,16 @@ export default {
       return chartHelper.getOptionsFromDataSources(this.dataSources)
     }
   },
+  watch: {
+    dataSources() {
+      // we need to update state.data in order to update the graph
+      // https://github.com/plotly/react-chart-editor/issues/948
+      if (this.dataSources) {
+        dereference.default(this.state.data, this.dataSources)
+        this.updatePlotly()
+      }
+    }
+  },
   created() {
     // https://github.com/plotly/plotly.js/issues/4555
     plotly.setPlotConfig({
@@ -113,21 +123,11 @@ export default {
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.chartContainer)
   },
-  watch: {
-    dataSources() {
-      // we need to update state.data in order to update the graph
-      // https://github.com/plotly/react-chart-editor/issues/948
-      if (this.dataSources) {
-        dereference.default(this.state.data, this.dataSources)
-        this.updatePlotly()
-      }
-    }
-  },
   methods: {
     async handleResize() {
       this.updatePlotly()
     },
-    onRender(data, layout, frames) {
+    onRender() {
       // TODO: check changes and enable Save button if needed
     },
     update(data, layout, frames) {

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/PivotSortBtn.vue

@@ -14,11 +14,14 @@ import SortIcon from '@/components/svg/sort'
 
 export default {
   name: 'PivotSortBtn',
-  props: ['direction', 'modelValue'],
-  emits: ['update:modelValue'],
   components: {
     SortIcon
   },
+  props: {
+    direction: String,
+    modelValue: String
+  },
+  emits: ['update:modelValue'],
   methods: {
     changeSorting() {
       if (this.modelValue === 'key_a_to_z') {

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue

@@ -4,12 +4,12 @@
       <div class="row">
         <label>Columns</label>
         <multiselect
-          class="sqliteviz-select cols"
           v-model="cols"
+          class="sqliteviz-select cols"
           :options="colsToSelect"
           :disabled="colsToSelect.length === 0"
           :multiple="true"
-          :hideSelected="true"
+          :hide-selected="true"
           :close-on-select="true"
           :show-labels="false"
           :max="colsToSelect.length"
@@ -26,18 +26,18 @@
             <span class="no-results">No Results</span>
           </template>
         </multiselect>
-        <pivot-sort-btn class="sort-btn" direction="col" v-model="colOrder" />
+        <pivot-sort-btn v-model="colOrder" class="sort-btn" direction="col" />
       </div>
 
       <div class="row">
         <label>Rows</label>
         <multiselect
-          class="sqliteviz-select rows"
           v-model="rows"
+          class="sqliteviz-select rows"
           :options="rowsToSelect"
           :disabled="rowsToSelect.length === 0"
           :multiple="true"
-          :hideSelected="true"
+          :hide-selected="true"
           :close-on-select="true"
           :show-labels="false"
           :max="rowsToSelect.length"
@@ -55,20 +55,20 @@
             <span class="no-results">No Results</span>
           </template>
         </multiselect>
-        <pivot-sort-btn class="sort-btn" direction="row" v-model="rowOrder" />
+        <pivot-sort-btn v-model="rowOrder" class="sort-btn" direction="row" />
       </div>
 
       <div class="row aggregator">
         <label>Aggregator</label>
         <multiselect
-          class="sqliteviz-select short aggregator"
           v-model="aggregator"
+          class="sqliteviz-select short aggregator"
           :options="aggregators"
           label="name"
           track-by="name"
           :close-on-select="true"
           :show-labels="false"
-          :hideSelected="true"
+          :hide-selected="true"
           :option-height="29"
           open-direction="bottom"
           placeholder="Choose a function"
@@ -79,28 +79,28 @@
         </multiselect>
 
         <multiselect
-          class="sqliteviz-select aggr-arg"
           v-show="valCount > 0"
           v-model="val1"
+          class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
           :close-on-select="true"
           :show-labels="false"
-          :hideSelected="true"
+          :hide-selected="true"
           :option-height="29"
           open-direction="bottom"
           placeholder="Choose an argument"
         />
 
         <multiselect
-          class="sqliteviz-select aggr-arg"
           v-show="valCount > 1"
           v-model="val2"
+          class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
           :close-on-select="true"
           :show-labels="false"
-          :hideSelected="true"
+          :hide-selected="true"
           :option-height="29"
           open-direction="bottom"
           placeholder="Choose a second argument"
@@ -110,15 +110,15 @@
       <div class="row">
         <label>View</label>
         <multiselect
-          class="sqliteviz-select short renderer"
           v-model="renderer"
+          class="sqliteviz-select short renderer"
           :options="renderers"
           label="name"
           track-by="name"
           :close-on-select="true"
           :allow-empty="false"
           :show-labels="false"
-          :hideSelected="true"
+          :hide-selected="true"
           :option-height="29"
           open-direction="bottom"
           placeholder="Choose a view"
@@ -129,7 +129,7 @@
         </multiselect>
       </div>
     </div>
-    <span @click="collapsed = !collapsed" class="switcher">
+    <span class="switcher" @click="collapsed = !collapsed">
       {{ collapsed ? 'Show pivot settings' : 'Hide pivot settings' }}
     </span>
   </div>
@@ -147,13 +147,16 @@ import {
 } from '../pivotHelper'
 
 export default {
-  name: 'pivotUi',
-  props: ['keyNames', 'modelValue'],
-  emits: ['update:modelValue', 'update'],
+  name: 'PivotUi',
   components: {
     Multiselect,
     PivotSortBtn
   },
+  props: {
+    keyNames: Array,
+    modelValue: Object
+  },
+  emits: ['update:modelValue', 'update'],
   data() {
     const aggregatorName =
       (this.modelValue && this.modelValue.aggregatorName) || 'Count'

src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="pivot-container">
-    <div class="warning pivot-warning" v-show="!dataSources">
+    <div v-show="!dataSources" class="warning pivot-warning">
       There is no data to build a pivot. Run your SQL query and make sure the
       result is not empty.
     </div>
     <pivot-ui
-      :key-names="columns"
       v-model="pivotOptions"
+      :key-names="columns"
       @update="$emit('update')"
     />
     <div ref="pivotOutput" class="pivot-output" />
     <div
-      ref="customChartOutput"
       v-show="viewCustomChart"
+      ref="customChartOutput"
       class="custom-chart-output"
     >
       <chart
         ref="customChart"
         v-bind="customChartComponentProps"
         @update="$emit('update')"
-        @loadingImageCompleted="$emit('loadingImageCompleted')"
+        @loading-image-completed="$emit('loadingImageCompleted')"
       />
     </div>
   </div>
@@ -32,28 +32,28 @@ import 'pivottable'
 import 'pivottable/dist/pivot.css'
 import PivotUi from './PivotUi'
 import pivotHelper from './pivotHelper'
-import Chart from '@/views/Main/Workspace/Tabs/Tab/DataView/Chart'
+import Chart from '@/views/MainView/Workspace/Tabs/Tab/DataView/Chart'
 import chartHelper from '@/lib/chartHelper'
 import events from '@/lib/utils/events'
 
 export default {
-  name: 'pivot',
-  props: [
-    'dataSources',
-    'initOptions',
-    'importToPngEnabled',
-    'importToSvgEnabled'
-  ],
+  name: 'Pivot',
+  components: {
+    PivotUi,
+    Chart
+  },
+  props: {
+    dataSources: Object,
+    initOptions: Object,
+    importToPngEnabled: Boolean,
+    importToSvgEnabled: Boolean
+  },
   emits: [
     'loadingImageCompleted',
     'update',
     'update:importToSvgEnabled',
     'update:importToPngEnabled'
   ],
-  components: {
-    PivotUi,
-    Chart
-  },
   data() {
     return {
       resizeObserver: null,

src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue

@@ -3,30 +3,30 @@
     <div class="data-view-panel-content">
       <component
         :is="mode"
-        :init-options="mode === initMode ? initOptions : undefined"
-        :data-sources="dataSource"
+        ref="viewComponent"
         v-model:import-to-png-enabled="importToPngEnabled"
         v-model:import-to-svg-enabled="importToSvgEnabled"
-        @loadingImageCompleted="loadingImage = false"
-        ref="viewComponent"
+        :init-options="mode === initMode ? initOptions : undefined"
+        :data-sources="dataSource"
+        @loading-image-completed="loadingImage = false"
         @update="$emit('update')"
       />
     </div>
-    <side-tool-bar panel="dataView" @switchTo="$emit('switchTo', $event)">
+    <side-tool-bar panel="dataView" @switch-to="$emit('switchTo', $event)">
       <icon-button
         :active="mode === 'chart'"
-        @click="mode = 'chart'"
         tooltip="Switch to chart"
         tooltip-position="top-left"
+        @click="mode = 'chart'"
       >
         <chart-icon />
       </icon-button>
       <icon-button
         ref="pivotBtn"
         :active="mode === 'pivot'"
-        @click="mode = 'pivot'"
         tooltip="Switch to pivot"
         tooltip-position="top-left"
+        @click="mode = 'pivot'"
       >
         <pivot-icon />
       </icon-button>
@@ -72,9 +72,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loadingMsg="Rendering the visualisation..."
-      successMsg="Image is ready"
-      actionBtnName="Copy"
+      loading-msg="Rendering the visualisation..."
+      success-msg="Image is ready"
+      action-btn-name="Copy"
       name="prepareCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
@@ -102,8 +102,6 @@ import events from '@/lib/utils/events'
 
 export default {
   name: 'DataView',
-  props: ['dataSource', 'initOptions', 'initMode'],
-  emits: ['update', 'switchTo'],
   components: {
     Chart,
     Pivot,
@@ -117,6 +115,12 @@ export default {
     ClipboardIcon,
     loadingDialog
   },
+  props: {
+    dataSource: Object,
+    initOptions: Object,
+    initMode: String
+  },
+  emits: ['update', 'switchTo'],
   data() {
     return {
       mode: this.initMode || 'chart',

src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue

@@ -53,7 +53,8 @@ export default {
   props: {
     modelValue: Number,
     total: Number
-  }
+  },
+  emits: ['update:modelValue']
 }
 </script>
 

src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/index.vue

@@ -21,11 +21,11 @@
               {{ col }}
             </th>
             <td
+              :key="index"
               :data-col="index"
               :data-row="currentRowIndex"
               :data-isNull="isNull(getCellValue(col))"
               :data-isBlob="isBlob(getCellValue(col))"
-              :key="index"
               :aria-selected="false"
               @click="onCellClick"
             >
@@ -75,16 +75,6 @@ export default {
       return this.dataSet.values[this.columns[0]].length
     }
   },
-  mounted() {
-    const col = this.selectedColumnIndex
-    const row = this.currentRowIndex
-    const cell = this.$refs.table.querySelector(
-      `td[data-col="${col}"][data-row="${row}"]`
-    )
-    if (cell) {
-      this.selectCell(cell)
-    }
-  },
   watch: {
     async currentRowIndex() {
       await nextTick()
@@ -95,6 +85,16 @@ export default {
       }
     }
   },
+  mounted() {
+    const col = this.selectedColumnIndex
+    const row = this.currentRowIndex
+    const cell = this.$refs.table.querySelector(
+      `td[data-col="${col}"][data-row="${row}"]`
+    )
+    if (cell) {
+      this.selectCell(cell)
+    }
+  },
   methods: {
     isBlob(value) {
       return value && ArrayBuffer.isView(value)

src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="run-result-panel" ref="runResultPanel">
+  <div ref="runResultPanel" class="run-result-panel">
     <component
       :is="viewValuePanelVisible ? 'splitpanes' : 'div'"
       :before="{ size: 50, max: 100 }"
@@ -17,11 +17,11 @@
         :id="'run-result-result-set-' + tab.id"
         class="result-set-container"
       />
-      <template #right-pane v-if="viewValuePanelVisible">
+      <template v-if="viewValuePanelVisible" #right-pane>
         <div class="value-viewer-container">
           <value-viewer
             v-show="selectedCell"
-            :cellValue="
+            :cell-value="
               selectedCell
                 ? result.values[result.columns[selectedCell.dataset.col]][
                     selectedCell.dataset.row
@@ -36,7 +36,7 @@
       </template>
     </component>
 
-    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
+    <side-tool-bar panel="table" @switch-to="$emit('switchTo', $event)">
       <icon-button
         :disabled="!result"
         tooltip="Export result set to CSV file"
@@ -80,9 +80,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loadingMsg="Building CSV..."
-      successMsg="CSV is ready"
-      actionBtnName="Copy"
+      loading-msg="Building CSV..."
+      success-msg="CSV is ready"
+      action-btn-name="Copy"
       name="prepareCSVCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
@@ -113,21 +113,21 @@
           v-if="result && !viewRecord"
           :data-set="result"
           :time="time"
-          :pageSize="pageSize"
+          :page-size="pageSize"
           :page="defaultPage"
           :selected-cell-coordinates="defaultSelectedCell"
           class="straight"
-          @updateSelectedCell="onUpdateSelectedCell"
+          @update-selected-cell="onUpdateSelectedCell"
         />
 
         <record
-          ref="recordView"
           v-if="result && viewRecord"
+          ref="recordView"
           :data-set="result"
           :time="time"
           :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-          :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
-          @updateSelectedCell="onUpdateSelectedCell"
+          :row-index="selectedCell ? +selectedCell.dataset.row : 0"
+          @update-selected-cell="onUpdateSelectedCell"
         />
       </div>
     </teleport>
@@ -156,6 +156,21 @@ import Record from './Record/index.vue'
 
 export default {
   name: 'RunResult',
+  components: {
+    SqlTable,
+    LoadingIndicator,
+    Logs,
+    SideToolBar,
+    ExportToCsvIcon,
+    IconButton,
+    ClipboardIcon,
+    ViewCellValueIcon,
+    RowIcon,
+    loadingDialog,
+    ValueViewer,
+    Record,
+    Splitpanes
+  },
   props: {
     tab: Object,
     result: Object,
@@ -178,21 +193,6 @@ export default {
       enableTeleport: this.$store.state.isWorkspaceVisible
     }
   },
-  components: {
-    SqlTable,
-    LoadingIndicator,
-    Logs,
-    SideToolBar,
-    ExportToCsvIcon,
-    IconButton,
-    ClipboardIcon,
-    ViewCellValueIcon,
-    RowIcon,
-    loadingDialog,
-    ValueViewer,
-    Record,
-    Splitpanes
-  },
   computed: {
     resultSetTeleportTarget() {
       if (!this.enableTeleport) {
@@ -207,6 +207,12 @@ export default {
       return base + tabIdPostfix
     }
   },
+  watch: {
+    result() {
+      this.defaultSelectedCell = null
+      this.selectedCell = null
+    }
+  },
   activated() {
     this.enableTeleport = true
   },
@@ -221,12 +227,6 @@ export default {
   beforeUnmount() {
     this.resizeObserver.unobserve(this.$refs.runResultPanel)
   },
-  watch: {
-    result() {
-      this.defaultSelectedCell = null
-      this.selectedCell = null
-    }
-  },
   methods: {
     handleResize() {
       this.calculatePageSize()

src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue

@@ -30,7 +30,7 @@
       <data-view-icon />
     </icon-button>
 
-    <div class="side-tool-bar-divider" v-if="$slots.default" />
+    <div v-if="$slots.default" class="side-tool-bar-divider" />
 
     <slot />
   </div>
@@ -44,14 +44,16 @@ import DataViewIcon from '@/components/svg/dataView'
 
 export default {
   name: 'SideToolBar',
-  props: ['panel'],
-  emits: ['switchTo'],
   components: {
     IconButton,
     SqlEditorIcon,
     DataViewIcon,
     TableIcon
-  }
+  },
+  props: {
+    panel: String
+  },
+  emits: ['switchTo']
 }
 </script>
 

src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue

@@ -9,7 +9,7 @@
         @change="onChange"
       />
     </div>
-    <side-tool-bar panel="sqlEditor" @switchTo="$emit('switchTo', $event)">
+    <side-tool-bar panel="sqlEditor" @switch-to="$emit('switchTo', $event)">
       <icon-button
         ref="runBtn"
         :disabled="runDisabled"
@@ -39,14 +39,14 @@ import RunIcon from '@/components/svg/run'
 
 export default {
   name: 'SqlEditor',
-  props: ['modelValue', 'isGettingResults'],
-  emits: ['update:modelValue', 'run', 'switchTo'],
   components: {
     Codemirror,
     SideToolBar,
     IconButton,
     RunIcon
   },
+  props: { modelValue: String, isGettingResults: Boolean },
+  emits: ['update:modelValue', 'run', 'switchTo'],
   data() {
     return {
       query: this.modelValue,

src/views/MainView/Workspace/Tabs/Tab/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-content-container" v-show="isActive">
+  <div v-show="isActive" class="tab-content-container">
     <splitpanes
       class="query-results-splitter"
       horizontal
@@ -26,7 +26,7 @@
         ref="sqlEditor"
         v-model="tab.query"
         :is-getting-results="tab.isGettingResults"
-        @switchTo="onSwitchView('sqlEditor', $event)"
+        @switch-to="onSwitchView('sqlEditor', $event)"
         @run="tab.execute()"
       />
     </teleport>
@@ -42,7 +42,7 @@
         :is-getting-results="tab.isGettingResults"
         :error="tab.error"
         :time="tab.time"
-        @switchTo="onSwitchView('table', $event)"
+        @switch-to="onSwitchView('table', $event)"
       />
     </teleport>
 
@@ -52,11 +52,11 @@
       :disabled="!enableTeleport"
     >
       <data-view
+        ref="dataView"
         :data-source="(tab.result && tab.result.values) || null"
         :init-options="tab.viewOptions"
         :init-mode="tab.viewType"
-        ref="dataView"
-        @switchTo="onSwitchView('dataView', $event)"
+        @switch-to="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
       />
     </teleport>
@@ -74,16 +74,16 @@ import events from '@/lib/utils/events'
 
 export default {
   name: 'Tab',
-  props: {
-    tab: Object
-  },
-  emits: [],
   components: {
     SqlEditor,
     DataView,
     RunResult,
     Splitpanes
   },
+  props: {
+    tab: Object
+  },
+  emits: [],
   data() {
     return {
       topPaneSize: this.tab.maximize

src/views/MainView/Workspace/Tabs/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="tabs">
-    <div id="tabs-header" v-if="tabs.length > 0">
+    <div v-if="tabs.length > 0" id="tabs-header">
       <div
         v-for="(tab, index) in tabs"
         :key="index"
-        @click="selectTab(tab.id)"
         :class="[{ 'tab-selected': tab.id === selectedTabId }, 'tab']"
+        @click="selectTab(tab.id)"
       >
         <div class="tab-name">
           <span v-show="!tab.isSaved" class="star">*</span>
@@ -69,11 +69,11 @@ import CloseIcon from '@/components/svg/close'
 import eventBus from '@/lib/eventBus'
 
 export default {
-  emits: [],
   components: {
     Tab,
     CloseIcon
   },
+  emits: [],
   data() {
     return {
       closingTab: null

src/views/MainView/index.vue

@@ -14,7 +14,7 @@ import MainMenu from './MainMenu'
 import '@/assets/styles/scrollbars.css'
 
 export default {
-  name: 'Main',
+  name: 'MainView',
   components: { MainMenu }
 }
 </script>