use only camel case for props

2025-12-06 10:08:52 +08:00 · 2025-03-30 21:01:06 +02:00
parent 559e04200c
commit 77df3a8446
21 changed files with 111 additions and 109 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,7 +14,9 @@ module.exports = {
    'vue/no-mutating-props': 'warn',
    'vue/no-reserved-component-names': 'warn',
    'vue/no-v-model-argument': 'off',
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': ['error', 'never']
  },
  overrides: [
    {
--- a/src/components/CsvJsonImport/index.vue
+++ b/src/components/CsvJsonImport/index.vue
@@ -1,10 +1,10 @@
 <template>
  <modal
-    :modal-id="dialogName"
+    :modalId="dialogName"
    class="dialog"
-    content-class="import-modal"
+    contentClass="import-modal"
    scrollable
-    :click-to-close="false"
+    :clickToClose="false"
  >
    <div class="dialog-header">
      {{ typeName }} import
@@ -17,7 +17,7 @@
        label="Table name"
        width="484px"
        :disabled="disableDialog"
-        :error-msg="tableNameError"
+        :errorMsg="tableNameError"
      />
      <div v-if="!isJson && !isNdJson" class="chars">
        <delimiter-selector
@@ -45,7 +45,7 @@
            The character used to escape the quote character within a field
            (e.g. "column with ""quotes"" in text").
          '
-          max-hint-width="242px"
+          maxHintWidth="242px"
          width="93px"
          :disabled="disableDialog"
          class="char-input"
--- a/src/components/DbUploader.vue
+++ b/src/components/DbUploader.vue
@@ -47,7 +47,7 @@
      ref="addCsvJson"
      :file="file"
      :db="newDb"
-      dialog-name="importFromCsvJson"
+      dialogName="importFromCsvJson"
      @cancel="cancelImport"
      @finish="finish"
    />
--- a/src/components/LoadingDialog.vue
+++ b/src/components/LoadingDialog.vue
@@ -1,10 +1,10 @@
 <template>
  <modal
-    :modal-id="name"
+    :modalId="name"
    class="dialog"
-    :click-to-close="false"
-    :content-transition="{ name: 'loading-dialog' }"
-    :overlay-transition="{ name: 'loading-dialog' }"
+    :clickToClose="false"
+    :contentTransition="{ name: 'loading-dialog' }"
+    :overlayTransition="{ name: 'loading-dialog' }"
  >
    <div class="dialog-header">
      {{ title }}
--- a/src/components/SqlTable/Pager.vue
+++ b/src/components/SqlTable/Pager.vue
@@ -1,19 +1,19 @@
 <template>
  <paginate
    v-model="page"
-    :page-count="pageCount"
-    :page-range="5"
-    :margin-pages="1"
-    :prev-text="chevron"
-    :next-text="chevron"
-    :no-li-surround="true"
-    container-class="paginator-continer"
-    page-link-class="paginator-page-link"
-    active-class="paginator-active-page"
-    break-view-link-class="paginator-break"
-    next-link-class="paginator-next"
-    prev-link-class="paginator-prev"
-    disabled-class="paginator-disabled"
+    :pageCount="pageCount"
+    :pageRange="5"
+    :marginPages="1"
+    :prevText="chevron"
+    :nextText="chevron"
+    :noLiSurround="true"
+    containerClass="paginator-continer"
+    pageLinkClass="paginator-page-link"
+    activeClass="paginator-active-page"
+    breakViewLinkClass="paginator-break"
+    nextLinkClass="paginator-next"
+    prevLinkClass="paginator-prev"
+    disabledClass="paginator-disabled"
  />
 </template>

--- a/src/components/SqlTable/index.vue
+++ b/src/components/SqlTable/index.vue
@@ -62,7 +62,7 @@
      <pager
        v-show="pageCount > 1"
        v-model="currentPage"
-        :page-count="pageCount"
+        :pageCount="pageCount"
      />
    </div>
  </div>
--- a/src/components/TextField.vue
+++ b/src/components/TextField.vue
@@ -9,7 +9,7 @@
        v-if="hint"
        class="hint"
        :hint="hint"
-        :max-width="maxHintWidth || '149px'"
+        :maxWidth="maxHintWidth || '149px'"
      />
    </div>
    <input
--- a/src/views/MainView/AppDiagnosticInfo.vue
+++ b/src/views/MainView/AppDiagnosticInfo.vue
@@ -5,7 +5,7 @@
      src="~@/assets/images/info.svg"
      @click="$modal.show('app-info')"
    />
-    <modal modal-id="app-info" class="dialog" content-class="app-info-modal">
+    <modal modalId="app-info" class="dialog" contentClass="app-info-modal">
      <div class="dialog-header">
        App info
        <close-icon @click="$modal.hide('app-info')" />
--- a/src/views/MainView/Inquiries/index.vue
+++ b/src/views/MainView/Inquiries/index.vue
@@ -122,7 +122,7 @@
                      <copy-icon @click="duplicateInquiry(index)" />
                      <export-icon
                        tooltip="Export inquiry to file"
-                        tooltip-position="top-left"
+                        tooltipPosition="top-left"
                        @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                      />
                      <delete-icon
@@ -140,7 +140,7 @@
    </div>

    <!--Rename Inquiry dialog  -->
-    <modal modal-id="rename" class="dialog" content-style="width: 560px;">
+    <modal modalId="rename" class="dialog" contentStyle="width: 560px;">
      <div class="dialog-header">
        Rename inquiry
        <close-icon @click="$modal.hide('rename')" />
@@ -149,7 +149,7 @@
        <text-field
          v-model="newName"
          label="New inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
          width="100%"
        />
      </div>
@@ -160,7 +160,7 @@
    </modal>

    <!--Delete Inquiry dialog  -->
-    <modal modal-id="delete" class="dialog" content-style="width: 480px;">
+    <modal modalId="delete" class="dialog" contentStyle="width: 480px;">
      <div class="dialog-header">
        Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
        <close-icon @click="$modal.hide('delete')" />
--- a/src/views/MainView/MainMenu.vue
+++ b/src/views/MainView/MainMenu.vue
@@ -25,7 +25,7 @@
    </div>

    <!--Save Inquiry dialog  -->
-    <modal modal-id="save" class="dialog" content-style="width: 560px;">
+    <modal modalId="save" class="dialog" contentStyle="width: 560px;">
      <div class="dialog-header">
        Save inquiry
        <close-icon @click="cancelSave" />
@@ -39,7 +39,7 @@
        <text-field
          v-model="name"
          label="Inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
          width="100%"
        />
      </div>
--- a/src/views/MainView/Workspace/Schema/index.vue
+++ b/src/views/MainView/Workspace/Schema/index.vue
@@ -26,7 +26,7 @@
      ref="addCsvJson"
      :file="file"
      :db="$store.state.db"
-      dialog-name="addCsvJson"
+      dialogName="addCsvJson"
    />
  </div>
 </template>
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -15,12 +15,12 @@
        :layout="state.layout"
        :frames="state.frames"
        :config="config"
-        :data-sources="dataSources"
-        :data-source-options="dataSourceOptions"
+        :dataSources="dataSources"
+        :dataSourceOptions="dataSourceOptions"
        :plotly="plotly"
-        :use-resize-handler="useResizeHandler"
+        :useResizeHandler="useResizeHandler"
        :debug="true"
-        :advanced-trace-type-selector="true"
+        :advancedTraceTypeSelector="true"
        @update="update"
        @render="onRender"
      />
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
@@ -9,11 +9,11 @@
          :options="colsToSelect"
          :disabled="colsToSelect.length === 0"
          :multiple="true"
-          :hide-selected="true"
-          :close-on-select="true"
-          :show-labels="false"
+          :hideSelected="true"
+          :closeOnSelect="true"
+          :showLabels="false"
          :max="colsToSelect.length"
-          open-direction="bottom"
+          openDirection="bottom"
          placeholder=""
        >
          <template #maxElements>
@@ -37,12 +37,12 @@
          :options="rowsToSelect"
          :disabled="rowsToSelect.length === 0"
          :multiple="true"
-          :hide-selected="true"
-          :close-on-select="true"
-          :show-labels="false"
+          :hideSelected="true"
+          :closeOnSelect="true"
+          :showLabels="false"
          :max="rowsToSelect.length"
-          :option-height="29"
-          open-direction="bottom"
+          :optionHeight="29"
+          openDirection="bottom"
          placeholder=""
        >
          <template #maxElements>
@@ -65,12 +65,12 @@
          class="sqliteviz-select short aggregator"
          :options="aggregators"
          label="name"
-          track-by="name"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          trackBy="name"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
          placeholder="Choose a function"
        >
          <template #noResult>
@@ -84,11 +84,11 @@
          class="sqliteviz-select aggr-arg"
          :options="keyNames"
          :disabled="keyNames.length === 0"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
          placeholder="Choose an argument"
        />

@@ -98,11 +98,11 @@
          class="sqliteviz-select aggr-arg"
          :options="keyNames"
          :disabled="keyNames.length === 0"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
          placeholder="Choose a second argument"
        />
      </div>
@@ -114,13 +114,13 @@
          class="sqliteviz-select short renderer"
          :options="renderers"
          label="name"
-          track-by="name"
-          :close-on-select="true"
-          :allow-empty="false"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          trackBy="name"
+          :closeOnSelect="true"
+          :allowEmpty="false"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
          placeholder="Choose a view"
        >
          <template #noResult>
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
@@ -6,7 +6,7 @@
    </div>
    <pivot-ui
      v-model="pivotOptions"
-      :key-names="columns"
+      :keyNames="columns"
      @update="$emit('update')"
    />
    <div ref="pivotOutput" class="pivot-output" />
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
@@ -4,9 +4,9 @@
      <component
        :is="mode"
        ref="viewComponent"
-        v-model:import-to-png-enabled="importToPngEnabled"
-        v-model:import-to-svg-enabled="importToSvgEnabled"
-        :init-options="mode === initMode ? initOptions : undefined"
+        v-model:importToPngEnabled="importToPngEnabled"
+        v-model:importToSvgEnabled="importToSvgEnabled"
+        :initOptions="mode === initMode ? initOptions : undefined"
        :data-sources="dataSource"
        @loading-image-completed="loadingImage = false"
        @update="$emit('update')"
@@ -16,7 +16,7 @@
      <icon-button
        :active="mode === 'chart'"
        tooltip="Switch to chart"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="mode = 'chart'"
      >
        <chart-icon />
@@ -25,7 +25,7 @@
        ref="pivotBtn"
        :active="mode === 'pivot'"
        tooltip="Switch to pivot"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="mode = 'pivot'"
      >
        <pivot-icon />
@@ -37,7 +37,7 @@
        :disabled="!importToPngEnabled || loadingImage"
        :loading="loadingImage"
        tooltip="Save as PNG image"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="saveAsPng"
      >
        <png-icon />
@@ -46,7 +46,7 @@
        ref="svgExportBtn"
        :disabled="!importToSvgEnabled"
        tooltip="Save as SVG"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="saveAsSvg"
      >
        <export-to-svg-icon />
@@ -55,7 +55,7 @@
      <icon-button
        ref="htmlExportBtn"
        tooltip="Save as HTML"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="saveAsHtml"
      >
        <HtmlIcon />
@@ -64,7 +64,7 @@
        ref="copyToClipboardBtn"
        :loading="copyingImage"
        tooltip="Copy visualisation to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="prepareCopy"
      >
        <clipboard-icon />
@@ -72,9 +72,9 @@
    </side-tool-bar>

    <loading-dialog
-      loading-msg="Rendering the visualisation..."
-      success-msg="Image is ready"
-      action-btn-name="Copy"
+      loadingMsg="Rendering the visualisation..."
+      successMsg="Image is ready"
+      actionBtnName="Copy"
      name="prepareCopy"
      title="Copy to clipboard"
      :loading="preparingCopy"
--- a/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
@@ -3,7 +3,7 @@
    <icon-button
      :disabled="modelValue === 0"
      tooltip="First row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      class="first"
      @click="$emit('update:modelValue', 0)"
    >
@@ -12,7 +12,7 @@
    <icon-button
      :disabled="modelValue === 0"
      tooltip="Previous row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      class="prev"
      @click="$emit('update:modelValue', modelValue - 1)"
    >
@@ -21,7 +21,7 @@
    <icon-button
      :disabled="modelValue === total - 1"
      tooltip="Next row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      class="next"
      @click="$emit('update:modelValue', modelValue + 1)"
    >
@@ -30,7 +30,7 @@
    <icon-button
      :disabled="modelValue === total - 1"
      tooltip="Last row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      class="last"
      @click="$emit('update:modelValue', total - 1)"
    >
--- a/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue
@@ -21,7 +21,7 @@
        <div class="value-viewer-container">
          <value-viewer
            v-show="selectedCell"
-            :cell-value="
+            :cellValue="
              selectedCell
                ? result.values[result.columns[selectedCell.dataset.col]][
                    selectedCell.dataset.row
@@ -40,7 +40,7 @@
      <icon-button
        :disabled="!result"
        tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="exportToCsv"
      >
        <export-to-csv-icon />
@@ -50,7 +50,7 @@
        ref="copyToClipboardBtn"
        :disabled="!result"
        tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="prepareCopy"
      >
        <clipboard-icon />
@@ -60,7 +60,7 @@
        ref="rowBtn"
        :disabled="!result"
        tooltip="View record"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        :active="viewRecord"
        @click="toggleViewRecord"
      >
@@ -71,7 +71,7 @@
        ref="viewCellValueBtn"
        :disabled="!result"
        tooltip="View value"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        :active="viewValuePanelVisible"
        @click="toggleViewValuePanel"
      >
@@ -80,9 +80,9 @@
    </side-tool-bar>

    <loading-dialog
-      loading-msg="Building CSV..."
-      success-msg="CSV is ready"
-      action-btn-name="Copy"
+      loadingMsg="Building CSV..."
+      successMsg="CSV is ready"
+      actionBtnName="Copy"
      name="prepareCSVCopy"
      title="Copy to clipboard"
      :loading="preparingCopy"
@@ -113,9 +113,9 @@
          v-if="result && !viewRecord"
          :data-set="result"
          :time="time"
-          :page-size="pageSize"
+          :pageSize="pageSize"
          :page="defaultPage"
-          :selected-cell-coordinates="defaultSelectedCell"
+          :selectedCellCoordinates="defaultSelectedCell"
          class="straight"
          @update-selected-cell="onUpdateSelectedCell"
        />
@@ -125,8 +125,8 @@
          ref="recordView"
          :data-set="result"
          :time="time"
-          :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-          :row-index="selectedCell ? +selectedCell.dataset.row : 0"
+          :selectedColumnIndex="selectedCell ? +selectedCell.dataset.col : 0"
+          :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
          @update-selected-cell="onUpdateSelectedCell"
        />
      </div>
--- a/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
@@ -4,7 +4,7 @@
      ref="sqlEditorBtn"
      :active="panel === 'sqlEditor'"
      tooltip="Switch panel to SQL editor"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      @click="$emit('switchTo', 'sqlEditor')"
    >
      <sql-editor-icon />
@@ -14,7 +14,7 @@
      ref="tableBtn"
      :active="panel === 'table'"
      tooltip="Switch panel to result set"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      @click="$emit('switchTo', 'table')"
    >
      <table-icon />
@@ -24,7 +24,7 @@
      ref="dataViewBtn"
      :active="panel === 'dataView'"
      tooltip="Switch panel to data view"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
      @click="$emit('switchTo', 'dataView')"
    >
      <data-view-icon />
--- a/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue
@@ -5,7 +5,7 @@
        ref="cm"
        v-model:value="query"
        :options="cmOptions"
-        :original-style="true"
+        :originalStyle="true"
        @change="onChange"
      />
    </div>
@@ -15,7 +15,7 @@
        :disabled="runDisabled"
        :loading="isGettingResults"
        tooltip="Run SQL query"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
        @click="$emit('run')"
      >
        <run-icon :disabled="runDisabled" />
--- a/src/views/MainView/Workspace/Tabs/Tab/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/index.vue
@@ -25,7 +25,7 @@
      <sql-editor
        ref="sqlEditor"
        v-model="tab.query"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
        @switch-to="onSwitchView('sqlEditor', $event)"
        @run="tab.execute()"
      />
@@ -39,7 +39,7 @@
      <run-result
        :tab="tab"
        :result="tab.result"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
        :error="tab.error"
        :time="tab.time"
        @switch-to="onSwitchView('table', $event)"
@@ -54,8 +54,8 @@
      <data-view
        ref="dataView"
        :data-source="(tab.result && tab.result.values) || null"
-        :init-options="tab.viewOptions"
-        :init-mode="tab.viewType"
+        :initOptions="tab.viewOptions"
+        :initMode="tab.viewType"
        @switch-to="onSwitchView('dataView', $event)"
        @update="onDataViewUpdate"
      />
--- a/src/views/MainView/Workspace/Tabs/index.vue
+++ b/src/views/MainView/Workspace/Tabs/index.vue
@@ -29,7 +29,7 @@
    </div>

    <!--Close tab warning dialog  -->
-    <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
+    <modal modalId="close-warn" class="dialog" contentStyle="width: 560px;">
      <div class="dialog-header">
        Close tab
        {{