use only camel case for props

Author: lana-k

.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: [
     {

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"

src/components/DbUploader.vue

@@ -47,7 +47,7 @@
       ref="addCsvJson"
       :file="file"
       :db="newDb"
-      dialog-name="importFromCsvJson"
+      dialogName="importFromCsvJson"
       @cancel="cancelImport"
       @finish="finish"
     />

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

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>
 

src/components/SqlTable/index.vue

@@ -62,7 +62,7 @@
       <pager
         v-show="pageCount > 1"
         v-model="currentPage"
-        :page-count="pageCount"
+        :pageCount="pageCount"
       />
     </div>
   </div>

src/components/TextField.vue

@@ -9,7 +9,7 @@
         v-if="hint"
         class="hint"
         :hint="hint"
-        :max-width="maxHintWidth || '149px'"
+        :maxWidth="maxHintWidth || '149px'"
       />
     </div>
     <input

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')" />

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')" />

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>