style: eslint fixes

eslint.config.js

@@ -5,15 +5,7 @@ import globals from "globals"
 import typescriptEslint from "typescript-eslint"
 
 export default typescriptEslint.config(
-    {
-        ignores: [
-            "*.d.ts",
-            "**/coverage",
-            "**/dist",
-            "assets/",
-            "src/dev.ts",
-        ],
-    },
+    { ignores: ["*.d.ts", "**/coverage", "**/dist", "assets/", "src/dev.ts"] },
     {
         extends: [
             eslint.configs.recommended,
@@ -44,4 +36,4 @@ export default typescriptEslint.config(
         },
     },
     eslintConfigPrettier
-)
+)

src/components/ActionButtons/ActionButtons.ts

@@ -2,11 +2,6 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
     name: "VdtActionButtons",
-    methods: {
-        triggerAction(action: string) {
-            this.$emit("userEvent", { action: action, data: this.data })
-        },
-    },
     props: {
         actions: {
             type: Array as () => string[],
@@ -18,4 +13,9 @@ export default defineComponent({
         },
         data: Object,
     },
+    methods: {
+        triggerAction(action: string) {
+            this.$emit("userEvent", { action: action, data: this.data })
+        },
+    },
 })

src/components/DataTable.ts

@@ -154,7 +154,7 @@ export default defineComponent({
                 if (key !== "" && value[key]) {
                     index = value[key]
                 }
-                return { ...(value as Object), _key: index }
+                return { ...(value as object), _key: index }
             })
 
             if (isNullable(search)) {
@@ -172,7 +172,7 @@ export default defineComponent({
          * The data after sorting it by the desirable columns
          */
         dataSorted() {
-            var { dataFiltered: data, columnsBeingSorted } = this
+            const { dataFiltered: data, columnsBeingSorted } = this
 
             // do not sort if there is no rows or no data to sort
             if (columnsBeingSorted.length === 0 || data.length === 0) {
@@ -201,7 +201,7 @@ export default defineComponent({
             const { dataFiltered, currentPerPage, currentPage } = this
             if (
                 dataFiltered.length === 0 ||
-                (currentPerPage as Number | String) === "*"
+                (currentPerPage as number | string) === "*"
             ) {
                 return 0
             }
@@ -213,7 +213,7 @@ export default defineComponent({
          */
         lastEntry() {
             const { currentPerPage } = this
-            if ((currentPerPage as Number | String) === "*") {
+            if ((currentPerPage as number | string) === "*") {
                 return this.filteredEntries
             }
             return Math.min(
@@ -258,7 +258,7 @@ export default defineComponent({
                 filteredEntries,
                 totalEntries,
             ]
-            if ((currentPerPage as Number | String) === "*") {
+            if ((currentPerPage as number | string) === "*") {
                 return infoAllText
             }
             const searchValues = [":first", ":last", ":filtered", ":total"]
@@ -281,7 +281,7 @@ export default defineComponent({
          */
         numberOfPages() {
             const { currentPerPage } = this
-            if ((currentPerPage as Number | String) === "*") return 1
+            if ((currentPerPage as number | string) === "*") return 1
             return Math.max(
                 Math.ceil(this.filteredEntries / this.currentPerPage),
                 1
@@ -454,6 +454,23 @@ export default defineComponent({
         },
     },
 
+    watch: {
+        columns: { handler: "parseColumnProps", deep: true, immediate: true },
+        columnKeys: {
+            handler: "parseColumnProps",
+            deep: true,
+            immediate: true,
+        },
+        columnsBeingSorted: {
+            handler: "updateData",
+            deep: false,
+            immediate: false,
+        },
+        text: { handler: "parseTextProps", deep: true, immediate: true },
+        lang: { handler: "parseTextProps" },
+        perPageSizes: { handler: "setDefaults" },
+    },
+
     mounted() {
         this.setDefaults()
         this.updateData()
@@ -554,7 +571,7 @@ export default defineComponent({
             if (this.sortingMode === "single") {
                 // mark other columns as not being sorted
                 // skipping the current column
-                for (let col of this.sortableColumns as Column[]) {
+                for (const col of this.sortableColumns as Column[]) {
                     if (col.id !== column.id) {
                         col.sortingMode = SORTING_MODE.NONE
                         col.sortingIndex = -1
@@ -664,7 +681,7 @@ export default defineComponent({
             // update current per page so that
             // the user will see the same first
             // rows that were being displayed
-            if ((this.currentPerPage as Number | String) === "*") {
+            if ((this.currentPerPage as number | string) === "*") {
                 newCurrentPage = 1
             } else {
                 newCurrentPage = Math.floor(previousFirstEntry / newPerPage) + 1
@@ -713,7 +730,7 @@ export default defineComponent({
          * @returns string
          */
         getSortQuery() {
-            let { columnsBeingSorted } = this
+            const { columnsBeingSorted } = this
 
             // nothing being sorted
             if (columnsBeingSorted.length == 0) return ""
@@ -729,21 +746,4 @@ export default defineComponent({
             return searchQueryUri
         },
     },
-
-    watch: {
-        columns: { handler: "parseColumnProps", deep: true, immediate: true },
-        columnKeys: {
-            handler: "parseColumnProps",
-            deep: true,
-            immediate: true,
-        },
-        columnsBeingSorted: {
-            handler: "updateData",
-            deep: false,
-            immediate: false,
-        },
-        text: { handler: "parseTextProps", deep: true, immediate: true },
-        lang: { handler: "parseTextProps" },
-        perPageSizes: { handler: "setDefaults" },
-    },
 })

src/components/ExportData/ExportData.ts

@@ -4,16 +4,31 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
     name: "VdtExportData",
+    props: {
+        data: Array,
+        allowedExports: Array,
+        downloadButtonText: String,
+        downloadFileName: String,
+        downloadText: String,
+    },
     setup() {
         return { selectedExport: "" }
     },
+    watch: {
+        allowedExports: {
+            handler(value) {
+                this.selectedExport = value[0]
+            },
+            immediate: true,
+        },
+    },
     methods: {
         download() {
             if (this.selectedExport === "pdf") {
                 return this.downloadPdf()
             }
             exportFromJSON({
-                data: this.data as Object,
+                data: this.data as object,
                 fileName: this.downloadFileName,
                 exportType: this.selectedExport as ExportType,
             })
@@ -33,19 +48,4 @@ export default defineComponent({
             })
         },
     },
-    props: {
-        data: Array,
-        allowedExports: Array,
-        downloadButtonText: String,
-        downloadFileName: String,
-        downloadText: String,
-    },
-    watch: {
-        allowedExports: {
-            handler(value) {
-                this.selectedExport = value[0]
-            },
-            immediate: true,
-        },
-    },
 })

src/components/ExportData/ExportData.vue

@@ -1,12 +1,12 @@
 <template>
     <div
-        class="vdt-export"
         ref="el"
+        class="vdt-export"
     >
         <span>{{ downloadText }}</span>
         <select
-            class="vdt-input"
             v-model="selectedExport"
+            class="vdt-input"
         >
             <option
                 v-for="(exportType, i) in allowedExports"

src/components/Pagination/Pagination.ts

@@ -2,14 +2,6 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
     name: "VdtPagination",
-    setup() {
-        return { pageToGo: 1 }
-    },
-    methods: {
-        setCurrentPage(page: any) {
-            this.$emit("set-page", Number(page))
-        },
-    },
     props: {
         paginationSearchButtonText: String,
         paginationSearchText: String,
@@ -23,6 +15,9 @@ export default defineComponent({
         nextPage: Number,
         pagination: Array,
     },
+    setup() {
+        return { pageToGo: 1 }
+    },
     watch: {
         currentPage(value) {
             this.pageToGo = value
@@ -37,4 +32,9 @@ export default defineComponent({
             return value
         },
     },
+    methods: {
+        setCurrentPage(page: any) {
+            this.$emit("set-page", Number(page))
+        },
+    },
 })

src/components/Pagination/Pagination.vue

@@ -11,8 +11,8 @@
                 @keyup.enter="setCurrentPage(pageToGo)"
             />
             <button
-                @click="setCurrentPage(pageToGo)"
                 class="vdt-btn vdt-btn-primary"
+                @click="setCurrentPage(pageToGo)"
             >
                 {{ paginationSearchButtonText }}
             </button>
@@ -43,8 +43,8 @@
             </li>
             <li
                 class="vdt-page-item"
-                @click="setCurrentPage(nextPage)"
                 :class="{ disabled: isLastPage }"
+                @click="setCurrentPage(nextPage)"
             >
                 <span class="vdt-page-link">
                     {{ nextButtonText }}

src/components/PerPage/PerPage.ts

@@ -2,6 +2,12 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
     name: "VdtPerPage",
+    props: {
+        perPageText: { type: String, required: true },
+        perPageAllText: { type: String, required: true },
+        currentPerPage: { type: [Number, String], required: true },
+        perPageSizes: { type: Array, required: true },
+    },
     computed: {
         textBeforeOptions() {
             return (this.perPageText.split(":entries")[0] || "").trim()
@@ -15,10 +21,4 @@ export default defineComponent({
             return string !== ""
         },
     },
-    props: {
-        perPageText: { type: String, required: true },
-        perPageAllText: { type: String, required: true },
-        currentPerPage: { type: [Number, String], required: true },
-        perPageSizes: { type: Array, required: true },
-    },
 })

src/components/PerPage/PerPage.vue

@@ -2,8 +2,8 @@
     <div class="vdt-perpage">
         <span>{{ textBeforeOptions }}</span>
         <select
-            @input="$emit('set-per-page')"
             :value="currentPerPage"
+            @input="$emit('set-per-page')"
         >
             <option
                 v-for="(val, i) in perPageSizes"

src/components/Table/Table.ts

@@ -2,12 +2,6 @@ import { defineComponent } from "vue"
 
 export default defineComponent({
     name: "VdtTable",
-    methods: {
-        // Propagate upwards an event from a user custom component
-        emitUserEvent(payload: any) {
-            this.$emit("user-event", payload)
-        },
-    },
     props: {
         tableClass: String,
         columns: Array as () => any,
@@ -23,4 +17,10 @@ export default defineComponent({
         sortingIconComponent: [Object, String],
         sortingIndexComponent: [Object, String],
     },
+    methods: {
+        // Propagate upwards an event from a user custom component
+        emitUserEvent(payload: any) {
+            this.$emit("user-event", payload)
+        },
+    },
 })