build(lint): upgrade vue ruleset to ‘recommended’

.eslintrc.json

@@ -5,11 +5,12 @@
         "es6": true,
         "node": true
     },
-    "extends": ["plugin:vue/essential", "eslint:recommended", "@vue/typescript", "prettier"],
+    "extends": ["plugin:vue/recommended", "eslint:recommended", "@vue/typescript", "prettier"],
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
     },
+    "rules": { "vue/no-v-html": 0, "vue/component-tags-order": 0, "vue/attributes-order": 0 },
     "parser": "vue-eslint-parser",
     "parserOptions": {
         "parser": "@typescript-eslint/parser",

src/App.vue

@@ -32,7 +32,7 @@
 
         <v-main id="content" :style="mainStyle">
             <overlay-scrollbars class="main-content-scrollbar">
-                <v-container fluid id="page-container" class="container px-3 px-sm-6 py-sm-6 mx-auto">
+                <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
                     <router-view></router-view>
                 </v-container>
             </overlay-scrollbars>

src/components/CommandHelpModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-dialog transition="dialog-bottom-transition" max-width="600" scrollable v-model="isOpen" :fullscreen="isMobile">
+    <v-dialog v-model="isOpen" transition="dialog-bottom-transition" max-width="600" scrollable :fullscreen="isMobile">
         <template #activator="{ on, attrs }">
             <template v-if="inToolbar">
                 <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
@@ -21,7 +21,7 @@
                 icon="mdi-help"
                 card-class="command-help-dialog"
                 :margin-bottom="false">
-                <template v-slot:buttons>
+                <template #buttons>
                     <v-btn icon tile @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-title>

src/components/TheConnectingDialog.vue

@@ -17,10 +17,10 @@
                     </span>
                 </v-toolbar-title>
             </v-toolbar>
-            <v-card-text class="pt-5" v-if="isConnecting">
+            <v-card-text v-if="isConnecting" class="pt-5">
                 <v-progress-linear color="white" indeterminate></v-progress-linear>
             </v-card-text>
-            <v-card-text class="pt-5" v-if="!isConnecting && connectingFailed">
+            <v-card-text v-if="!isConnecting && connectingFailed" class="pt-5">
                 <connection-status :moonraker="false"></connection-status>
                 <p class="text-center mt-3">{{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}</p>
                 <template v-if="counter > 2">
@@ -33,7 +33,7 @@
                     <v-divider class="mt-4 mb-5"></v-divider>
                 </template>
                 <div class="text-center">
-                    <v-btn @click="reconnect" class="primary--text">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
+                    <v-btn class="primary--text" @click="reconnect">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>

src/components/TheEditor.vue

@@ -3,8 +3,8 @@
 <template>
     <div>
         <v-dialog
-            persistent
             v-model="show"
+            persistent
             fullscreen
             hide-overlay
             :transition="false"
@@ -19,12 +19,12 @@
                     ' ' +
                     (isWriteable ? changed : '(' + $t('Editor.FileReadOnly') + ')')
                 ">
-                <template v-slot:buttons>
+                <template #buttons>
                     <v-btn
+                        v-if="restartServiceName === 'klipper'"
                         text
                         tile
                         href="https://www.klipper3d.org/Config_Reference.html"
-                        v-if="restartServiceName === 'klipper'"
                         target="_blank"
                         class="d-none d-md-flex">
                         <v-icon small class="mr-1">mdi-help</v-icon>
@@ -44,8 +44,8 @@
                         color="primary"
                         text
                         tile
-                        @click="save(restartServiceName)"
-                        class="d-none d-sm-flex">
+                        class="d-none d-sm-flex"
+                        @click="save(restartServiceName)">
                         <v-icon small class="mr-1">mdi-restart</v-icon>
                         {{ $t('Editor.SaveRestart') }}
                     </v-btn>
@@ -58,7 +58,7 @@
                             ref="editor"
                             v-model="sourcecode"
                             :name="filename"
-                            v-bind:file-extension="fileExtension"></codemirror-async>
+                            :file-extension="fileExtension"></codemirror-async>
                     </overlay-scrollbars>
                 </v-card-text>
             </panel>
@@ -82,8 +82,8 @@
             <template v-else>
                 <v-progress-linear class="mt-2" indeterminate></v-progress-linear>
             </template>
-            <template v-slot:action="{ attrs }">
-                <v-btn color="red" text v-bind="attrs" @click="cancelDownload" style="min-width: auto" tile>
+            <template #action="{ attrs }">
+                <v-btn color="red" text v-bind="attrs" style="min-width: auto" tile @click="cancelDownload">
                     <v-icon class="0">mdi-close</v-icon>
                 </v-btn>
             </template>
@@ -94,7 +94,7 @@
                 icon="mdi-help-circle"
                 :title="$t('Editor.UnsavedChanges')"
                 :margin-bottom="false">
-                <template v-slot:buttons>
+                <template #buttons>
                     <v-btn icon tile @click="dialogConfirmChange = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-3">

src/components/TheSelectPrinterDialog.vue

@@ -8,7 +8,7 @@
             :title="panelTitle"
             :margin-bottom="false"
             toolbar-color="toolbar">
-            <template v-slot:buttons>
+            <template #buttons>
                 <template v-if="!isConnecting && !connectingFailed">
                     <template v-if="dialogEditPrinter.bool">
                         <v-btn icon tile class="minwidth-0" @click="dialogEditPrinter.bool = false">
@@ -17,16 +17,16 @@
                     </template>
                     <template v-else-if="dialogAddPrinter.bool">
                         <v-btn
+                            v-if="dialogAddPrinter.bool"
                             icon
                             tile
                             class="minwidth-0"
-                            v-if="dialogAddPrinter.bool"
                             @click="dialogAddPrinter.bool = false">
                             <v-icon>mdi-close-thick</v-icon>
                         </v-btn>
                     </template>
                     <template v-else-if="printers.length > 0">
-                        <v-btn icon tile class="minwidth-0" @click="checkPrinters" color="primary">
+                        <v-btn icon tile class="minwidth-0" color="primary" @click="checkPrinters">
                             <v-icon>mdi-sync</v-icon>
                         </v-btn>
                     </template>
@@ -47,10 +47,10 @@
                         }}
                     </p>
                     <div class="text-center">
-                        <v-btn text @click="switchToChangePrinter" color="white" class="mr-3">
+                        <v-btn text color="white" class="mr-3" @click="switchToChangePrinter">
                             {{ $t('SelectPrinterDialog.ChangePrinter') }}
                         </v-btn>
-                        <v-btn text @click="reconnect" color="primary">{{ $t('SelectPrinterDialog.TryAgain') }}</v-btn>
+                        <v-btn text color="primary" @click="reconnect">{{ $t('SelectPrinterDialog.TryAgain') }}</v-btn>
                     </div>
                 </v-card-text>
             </template>
@@ -133,22 +133,22 @@
                 <v-card-text class="mt-3">
                     <v-row v-if="printers.length">
                         <v-col class="px-6">
-                            <v-row v-for="(printer, index) in printers" v-bind:key="index">
+                            <v-row v-for="(printer, index) in printers" :key="index">
                                 <v-col
                                     class="rounded transition-swing toolbar py-2 px-2 mb-2 overflow-hidden"
                                     style="cursor: pointer"
                                     @click="connect(printer)">
                                     <v-row align="center">
                                         <v-col class="col-auto pr-0">
                                             <v-progress-circular
+                                                v-if="printer.socket.isConnecting"
                                                 indeterminate
                                                 color="primary"
-                                                v-if="printer.socket.isConnecting"
                                                 size="24"
                                                 width="2.5"></v-progress-circular>
                                             <v-icon
-                                                :color="printer.socket.isConnected ? 'green' : 'red'"
-                                                v-if="!printer.socket.isConnecting">
+                                                v-if="!printer.socket.isConnecting"
+                                                :color="printer.socket.isConnected ? 'green' : 'red'">
                                                 mdi-{{
                                                     printer.socket.isConnected ? 'checkbox-marked-circle' : 'cancel'
                                                 }}
@@ -162,7 +162,7 @@
                                                 icon
                                                 large
                                                 class="mr-1"
-                                                v-on:click.stop.prevent="editPrinter(printer)">
+                                                @click.stop.prevent="editPrinter(printer)">
                                                 <v-icon small>mdi-pencil</v-icon>
                                             </v-btn>
                                         </v-col>
@@ -173,7 +173,7 @@
                     </v-row>
                     <v-row v-if="showCorsInfo">
                         <v-col>
-                            <p class="text-center" v-if="this.printers.length === 0">
+                            <p v-if="printers.length === 0" class="text-center">
                                 {{ $t('SelectPrinterDialog.Hello') }}
                             </p>
                             <p class="text-center">

src/components/TheSettingsMenu.vue

@@ -8,23 +8,23 @@
             width="900"
             persistent
             :fullscreen="isMobile"
-            @keydown.esc="showSettings = false"
-            scrollable>
+            scrollable
+            @keydown.esc="showSettings = false">
             <panel
                 :title="$t('Settings.InterfaceSettings')"
                 icon="mdi-cogs"
                 card-class="settings-menu-dialog"
                 :margin-bottom="false"
                 style="overflow: hidden"
                 :height="isMobile ? 0 : 548">
-                <template v-slot:buttons>
+                <template #buttons>
                     <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">
                         <v-tab
                             v-for="(tab, index) of tabTitles"
-                            v-bind:key="index"
+                            :key="index"
                             :href="'#' + tab.name"
                             class="justify-start">
                             <v-icon left v-html="tab.icon"></v-icon>
@@ -33,12 +33,12 @@
                     </v-tabs>
                 </template>
                 <v-row class="flex-row flex-nowrap">
-                    <v-col class="col-auto pr-0" v-if="!isMobile">
-                        <overlay-scrollbars class="settings-tabs-bar height500" ref="settingsTabsScroll">
+                    <v-col v-if="!isMobile" class="col-auto pr-0">
+                        <overlay-scrollbars ref="settingsTabsScroll" class="settings-tabs-bar height500">
                             <v-tabs v-model="activeTab" :vertical="true">
                                 <v-tab
                                     v-for="(tab, index) of tabTitles"
-                                    v-bind:key="index"
+                                    :key="index"
                                     :href="'#' + tab.name"
                                     class="justify-start"
                                     style="width: 200px">
@@ -50,8 +50,8 @@
                     </v-col>
                     <v-col :class="isMobile ? '' : 'pl-0'" :style="isMobile ? '' : 'min-width: 500px;'">
                         <overlay-scrollbars
-                            :class="'settings-tabs ' + (isMobile ? '' : 'height500')"
                             ref="settingsScroll"
+                            :class="'settings-tabs ' + (isMobile ? '' : 'height500')"
                             :options="{ overflowBehavior: { x: 'hidden' } }">
                             <component :is="'settings-' + activeTab + '-tab'" @scrollToTop="scrollToTop"></component>
                         </overlay-scrollbars>

src/components/TheSidebar.vue

@@ -43,10 +43,10 @@
 </style>
 <template>
     <v-navigation-drawer
+        :key="navigationStyle"
         v-model="naviDrawer"
         :src="sidebarBackground"
         :mini-variant="navigationStyle === 'iconsOnly'"
-        :key="navigationStyle"
         :width="navigationWidth"
         :temporary="boolNaviTemp"
         clipped
@@ -56,15 +56,15 @@
             <v-list class="pr-0 pt-0 ml-0">
                 <v-list-item-group active-class="active-nav-item">
                     <v-list-item
+                        v-if="isMobile"
                         router
                         to="/"
                         :class="
                             'sidebar-logo no-text-decoration no-background no-border ' +
                             (navigationStyle === 'iconsOnly' ? 'pa-0 justify-center' : '')
                         "
                         :style="'height: ' + topbarHeight + 'px'"
-                        :ripple="false"
-                        v-if="isMobile">
+                        :ripple="false">
                         <template v-if="sidebarLogo">
                             <img :src="sidebarLogo" :style="logoCssVars" class="nav-logo" alt="Logo" />
                         </template>
@@ -81,7 +81,7 @@
                     </v-list-item>
                     <template v-if="countPrinters">
                         <v-tooltip right :open-delay="500" :disabled="navigationStyle !== 'iconsOnly'">
-                            <template v-slot:activator="{ on, attrs }">
+                            <template #activator="{ on, attrs }">
                                 <v-list-item
                                     router
                                     to="/allPrinters"
@@ -104,7 +104,7 @@
                     </template>
                     <div v-for="(category, index) in naviPoints" :key="index">
                         <v-tooltip right :open-delay="500" :disabled="navigationStyle !== 'iconsOnly'">
-                            <template v-slot:activator="{ on, attrs }">
+                            <template #activator="{ on, attrs }">
                                 <v-list-item
                                     router
                                     :to="category.path"
@@ -127,7 +127,7 @@
                 </v-list-item-group>
             </v-list>
         </overlay-scrollbars>
-        <template v-slot:append>
+        <template #append>
             <v-list-item class="small-list-item mb-2">
                 <v-list-item-icon class="menu-item-icon">
                     <about-modal></about-modal>

src/components/TheThrottledStates.vue

@@ -2,12 +2,12 @@
 
 <template>
     <v-menu
+        v-if="throttledStateFlags.length"
+        v-model="showMenu"
         bottom
         :offset-y="true"
-        :close-on-content-click="false"
-        v-model="showMenu"
-        v-if="throttledStateFlags.length">
-        <template v-slot:activator="{ on, attrs }">
+        :close-on-content-click="false">
+        <template #activator="{ on, attrs }">
             <v-btn :color="currentFlags.length ? 'error' : 'warning'" icon tile class="mr-3" v-bind="attrs" v-on="on">
                 <v-icon>mdi-raspberry-pi</v-icon>
             </v-btn>
@@ -28,7 +28,7 @@
                 </v-list-item>
             </template>
             <template v-if="previouslyFlags.length">
-                <v-divider class="my-2" v-if="currentFlags.length"></v-divider>
+                <v-divider v-if="currentFlags.length" class="my-2"></v-divider>
                 <v-subheader class="" style="height: auto">
                     {{ $t('App.ThrottledStates.HeadlinePreviouslyFlags') }}
                 </v-subheader>

src/components/TheTimelapseRenderingSnackbar.vue

@@ -4,8 +4,8 @@
     <div>
         <v-snackbar v-model="boolShowDialogRunning" :timeout="-1" :value="true" fixed right bottom dark>
             <div>{{ $t('Timelapse.TimelapseRendering') }}...</div>
-            <v-progress-linear class="mt-2" v-if="progress > 0" :value="progress" indeterminate></v-progress-linear>
-            <v-progress-linear class="mt-2" v-if="progress === 0" indeterminate></v-progress-linear>
+            <v-progress-linear v-if="progress > 0" class="mt-2" :value="progress" indeterminate></v-progress-linear>
+            <v-progress-linear v-if="progress === 0" class="mt-2" indeterminate></v-progress-linear>
         </v-snackbar>
         <v-snackbar v-model="boolShowDialogSuccess" :timeout="5000" :value="true" fixed right bottom dark>
             <div>