Merge pull request #128 from flowforge/chore-eslint-rule-increase

Increase ESLint Vue.js Requirements
FlowFuse · Mar 9, 2023 · dc3e97a · dc3e97a
2 parents 49e00d5 + 45f01cd
commit dc3e97a
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 67 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -18,7 +18,7 @@
     "overrides": [{
         "files": "src/**",
         "extends": [
-            "plugin:vue/vue3-strongly-recommended"
+            "plugin:vue/vue3-recommended"
         ],
         "rules": {
             // plugin:vue

diff --git a/src/components/Check.vue b/src/components/Check.vue
@@ -10,14 +10,14 @@ import { CheckIcon } from '@heroicons/vue/outline'
 
 export default {
     name: 'ff-check',
+    components: {
+        CheckIcon
+    },
     props: {
         value: {
             default: false,
             type: Boolean
         }
-    },
-    components: {
-        CheckIcon
     }
 }
 </script>
diff --git a/src/components/DialogBox.vue b/src/components/DialogBox.vue
@@ -2,13 +2,13 @@
     <div class="ff-dialog-container" :class="'ff-dialog-container--' + (open ? 'open' : 'closed')">
         <div class="ff-dialog-box">
             <div class="ff-dialog-header">{{ header }}</div>
-            <div class="ff-dialog-content" ref="content">
+            <div ref="content" class="ff-dialog-content">
                 <slot></slot>
             </div>
             <div class="ff-dialog-actions">
                 <slot name="actions">
-                    <ff-button @click="cancel()" kind="secondary">Cancel</ff-button>
-                    <ff-button @click="confirm()" :kind="kind" :disabled="disablePrimary">{{ confirmLabel }}</ff-button>
+                    <ff-button kind="secondary" @click="cancel()">Cancel</ff-button>
+                    <ff-button :kind="kind" :disabled="disablePrimary" @click="confirm()">{{ confirmLabel }}</ff-button>
                 </slot>
             </div>
         </div>
@@ -18,7 +18,6 @@
 <script>
 export default {
     name: 'ff-dialog',
-    emits: ['cancel', 'confirm'],
     props: {
         header: {
             type: String,
@@ -41,16 +40,17 @@ export default {
             default: true
         }
     },
-    watch: {
-        open: function () {
-            this.$refs.content.scrollTop = 0
-        }
-    },
+    emits: ['cancel', 'confirm'],
     data () {
         return {
             open: false
         }
     },
+    watch: {
+        open: function () {
+            this.$refs.content.scrollTop = 0
+        }
+    },
     methods: {
         show () {
             this.open = true

diff --git a/src/components/Help.vue b/src/components/Help.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="ff-help-tooltip ff-icon" v-ff-tooltip:[position]="text">
+    <span v-ff-tooltip:[position]="text" class="ff-help-tooltip ff-icon">
         <QuestionMarkCircleIcon />
     </span>
 </template>
@@ -10,6 +10,9 @@ import { QuestionMarkCircleIcon } from '@heroicons/vue/solid'
 
 export default {
     name: 'ff-help',
+    components: {
+        QuestionMarkCircleIcon
+    },
     props: {
         text: {
             required: true,
@@ -19,9 +22,6 @@ export default {
             default: 'right',
             type: String
         }
-    },
-    components: {
-        QuestionMarkCircleIcon
     }
 }
 </script>
diff --git a/src/components/KebabMenu.vue b/src/components/KebabMenu.vue
@@ -5,8 +5,8 @@
         <DotsVerticalIcon v-if="!open" @click.stop="openOptions()" />
         <DotsVerticalIcon v-if="open" @click.stop="closeOptions()" />
         <template v-if="open">
-            <ul class="ff-kebab-options" :class="'ff-kebab-options--' + menuAlign"
-                v-click-outside="closeOptions"
+            <ul v-click-outside="closeOptions" class="ff-kebab-options"
+                :class="'ff-kebab-options--' + menuAlign"
             >
                 <slot></slot>
             </ul>
@@ -20,16 +20,16 @@ import { DotsVerticalIcon } from '@heroicons/vue/solid'
 
 export default {
     name: 'ff-kebab-menu',
+    components: {
+        DotsVerticalIcon
+    },
     props: {
         // eslint-disable-next-line vue/prop-name-casing
         'menu-align': {
             type: String,
             default: 'right'
         }
     },
-    components: {
-        DotsVerticalIcon
-    },
     data () {
         return {
             open: false

diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <li class="ff-list-item" :class="[className, this.disabled ? 'disabled' : ''] ">
+    <li class="ff-list-item" :class="[className, disabled ? 'disabled' : ''] ">
         <component :is="icon" />
         <label>{{ label }}</label>
     </li>

diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
@@ -1,4 +1,5 @@
 <template>
+    <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-html="markdownToHtml"></div>
 </template>
 

diff --git a/src/components/NotificationToast.vue b/src/components/NotificationToast.vue
@@ -9,7 +9,7 @@
             </div>
             <span class="ff-notification-toast--close">
                 <XIcon v-if="showClose" @click="close()" />
-                <div class="countdown-wrapper" v-if="countdown">
+                <div v-if="countdown" class="countdown-wrapper">
                     <div class="countdown-pie countdown-spinner" :style="'animation: rota ' + (countdown/1000) + 's linear infinite;'"></div>
                     <div class="countdown-pie countdown-filler" :style="'animation: fill ' + (countdown/1000) + 's steps(1, end) infinite;'"></div>
                     <div class="countdown-mask" :style="'animation: mask ' + (countdown/1000) + 's steps(1, end) infinite;'"></div>
@@ -28,7 +28,9 @@ import { XIcon } from '@heroicons/vue/solid'
 
 export default {
     name: 'ff-notification-toast',
-    emits: ['close'],
+    components: {
+        XIcon
+    },
     props: {
         message: {
             default: null,
@@ -47,9 +49,7 @@ export default {
             type: Boolean
         }
     },
-    components: {
-        XIcon
-    },
+    emits: ['close'],
     computed: {
         showActions: function () {
             return this.$slots.actions

diff --git a/src/components/data-table/DataTable.vue b/src/components/data-table/DataTable.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="ff-data-table">
         <div v-if="showOptions" class="ff-data-table--options">
-            <ff-text-input v-if="showSearch" class="ff-data-table--search" data-form="search"
-                :placeholder="searchPlaceholder" v-model="filterTerm"
+            <ff-text-input v-if="showSearch" v-model="filterTerm" class="ff-data-table--search"
+                data-form="search" :placeholder="searchPlaceholder"
             >
                 <template #icon><SearchIcon /></template>
             </ff-text-input>
-            <div class="ff-data-table--actions" v-if="$slots.actions">
+            <div v-if="$slots.actions" class="ff-data-table--actions">
                 <slot name="actions"></slot>
             </div>
         </div>
@@ -24,9 +24,9 @@
                                 <!-- Internal div required to have flex w/sorting icons -->
                                 <div>
                                     {{ col.label }}
-                                    <SwitchVerticalIcon class="ff-icon ff-icon-sm" v-if="col.sortable && col.key !== sort.key" />
-                                    <SortAscendingIcon class="ff-icon ff-icon-sm icon-sorted" v-if="col.sortable && col.key === sort.key && sort.order === 'asc'" />
-                                    <SortDescendingIcon class="ff-icon ff-icon-sm icon-sorted" v-if="col.sortable && col.key === sort.key && sort.order === 'desc'" />
+                                    <SwitchVerticalIcon v-if="col.sortable && col.key !== sort.key" class="ff-icon ff-icon-sm" />
+                                    <SortAscendingIcon v-if="col.sortable && col.key === sort.key && sort.order === 'asc'" class="ff-icon ff-icon-sm icon-sorted" />
+                                    <SortDescendingIcon v-if="col.sortable && col.key === sort.key && sort.order === 'desc'" class="ff-icon ff-icon-sm icon-sorted" />
                                 </div>
                             </ff-data-table-cell>
                             <ff-data-table-cell v-if="hasContextMenu"></ff-data-table-cell>
@@ -59,7 +59,7 @@
             </slot>
         </table>
         <div v-if="showLoadMore" class="ff-loadmore">
-            <span @click="$emit('load-more')" data-action="load-more">Load More...</span>
+            <span data-action="load-more" @click="$emit('load-more')">Load More...</span>
         </div>
     </div>
 </template>
@@ -116,7 +116,12 @@ function searchObjectProps (object, searchTerm, searchProps = []) {
 
 export default {
     name: 'ff-data-table',
-    emits: ['update:search', 'load-more', 'row-selected'],
+    components: {
+        SearchIcon,
+        SwitchVerticalIcon,
+        SortAscendingIcon,
+        SortDescendingIcon
+    },
     props: {
         columns: {
             type: Array,
@@ -163,6 +168,22 @@ export default {
             default: 'No Data Found'
         }
     },
+    emits: ['update:search', 'load-more', 'row-selected'],
+    data () {
+        return {
+            internalSearch: '',
+            sort: {
+                highlightColumn: null,
+                key: '',
+                order: 'desc'
+            },
+            pagination: {
+                active: -1,
+                max: -1
+            },
+            orders: ['desc', 'asc']
+        }
+    },
     computed: {
         showOptions: function () {
             return this.showSearch || this.$slots.actions
@@ -221,21 +242,6 @@ export default {
             }
         }
     },
-    data () {
-        return {
-            internalSearch: '',
-            sort: {
-                highlightColumn: null,
-                key: '',
-                order: 'desc'
-            },
-            pagination: {
-                active: -1,
-                max: -1
-            },
-            orders: ['desc', 'asc']
-        }
-    },
     methods: {
         filterRows (rows) {
             const search = this.internalSearch
@@ -294,12 +300,6 @@ export default {
             }
             return obj
         }
-    },
-    components: {
-        SearchIcon,
-        SwitchVerticalIcon,
-        SortAscendingIcon,
-        SortDescendingIcon
     }
 }
 </script>
diff --git a/src/components/form/DropdownOption.vue b/src/components/form/DropdownOption.vue
@@ -17,6 +17,12 @@ export default {
             type: String
         }
     },
+    mounted () {
+        this.registerOption({
+            value: this.value,
+            label: this.label
+        })
+    },
     methods: {
         select () {
             this.$parent.value = {
@@ -27,12 +33,6 @@ export default {
         registerOption (option) {
             this.$parent.registerOption(option)
         }
-    },
-    mounted () {
-        this.registerOption({
-            value: this.value,
-            label: this.label
-        })
     }
 }
 </script>
diff --git a/src/components/form/TextInput.vue b/src/components/form/TextInput.vue
@@ -2,11 +2,11 @@
     <div class="ff-input ff-text-input" :class="{'ff-input--error': error}">
         <slot name="icon"></slot>
         <input
+            ref="input"
             :type="type"
             :placeholder="placeholder"
             :disabled="disabled"
             :value="modelValue"
-            ref="input"
             @change="$emit('update:modelValue', $event.target.value)"
             @input="$emit('update:modelValue', $event.target.value)"
             @blur="$emit('blur')" @keyup.enter="$emit('enter', $evt)"
@@ -17,7 +17,6 @@
 <script>
 export default {
     name: 'ff-text-input',
-    emits: ['update:modelValue', 'input', 'blur', 'keyup', 'enter'],
     props: {
         // broker standard text-input props
         disabled: {
@@ -47,6 +46,7 @@ export default {
             default: ''
         }
     },
+    emits: ['update:modelValue', 'input', 'blur', 'keyup', 'enter'],
     methods: {
         focus () {
             this.$refs.input?.focus()

diff --git a/src/components/tabs/Tabs.vue b/src/components/tabs/Tabs.vue
@@ -1,8 +1,8 @@
 <template>
     <div ref="ff-tabs">
         <ul class="ff-tabs" :class="'ff-tabs--' + orientation">
-            <li v-for="(tab, $index) in tabs" :key="tab.label" @click="selectTab($index)"
-                class="ff-tab-option transition-fade--color" :class="{'ff-tab-option--active': tab.isActive}"
+            <li v-for="(tab, $index) in tabs" :key="tab.label" class="ff-tab-option transition-fade--color"
+                :class="{'ff-tab-option--active': tab.isActive}" @click="selectTab($index)"
             >
                 {{ tab.label }}
             </li>