From dc40b0f280f5728c7e72425aed7b144faa38cbdc Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sat, 14 Nov 2020 19:41:50 +0100
Subject: [PATCH] style(all): fix issues with updated linting config

---
 .eslintrc.js                             |  9 +++++++--
 components/Card.vue                      |  7 ++++++-
 components/ConnectionMonitor.vue         |  2 +-
 components/FilterButton.vue              |  2 +-
 components/HomeSection.vue               |  6 +++---
 components/LocaleSwitcher.vue            |  2 +-
 components/RelatedItems.vue              |  6 +++---
 components/UserButton.vue                |  2 +-
 layouts/default.vue                      |  2 +-
 pages/index.vue                          | 10 +++++-----
 pages/item/_itemId/play.vue              |  2 +-
 pages/library/_viewId.vue                | 12 ++++++------
 pages/login.vue                          | 10 +++++-----
 pages/person/_itemId/index.vue           | 12 ++++++------
 plugins/components/vueVirtualScroller.ts |  4 ++--
 plugins/components/vueperSlides.ts       |  4 ++--
 16 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 0ae4606a..1da5c1bf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,7 +19,6 @@ module.exports = {
     'plugin:import/typescript'
   ],
   plugins: ['prettier', 'promise', 'import', 'jsdoc'],
-  // add your custom rules here
   rules: {
     'import/newline-after-import': 'error',
     'import/order': 'error',
@@ -27,13 +26,19 @@ module.exports = {
     'promise/no-return-in-finally': 'error',
     'promise/prefer-await-to-callbacks': 'error',
     'promise/prefer-await-to-then': 'error',
+    // Force some component order stuff, formatting and such, for consistency
     'vue/component-name-in-template-casing': [
       'error',
       'kebab-case',
       {
         ignores: []
       }
-    ]
+    ],
+    'vue/order-in-components': 'error',
+    'vue/v-bind-style': 'error',
+    'vue/v-on-style': 'error',
+    'vue/v-slot-style': 'error',
+    'vue/attributes-order': 'error'
   },
   settings: {
     'import/resolver': {
diff --git a/components/Card.vue b/components/Card.vue
index 753bba91..75b3619f 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -41,7 +41,7 @@
               item.UserData.PlayedPercentage &&
               item.UserData.PlayedPercentage > 0
             "
-            v-model="item.UserData.PlayedPercentage"
+            v-model="progress"
             color="primary accent-4"
             class="align-self-end"
           />
@@ -196,6 +196,11 @@ export default Vue.extend({
         return `${this.item.ProductionYear} - ${endYear}`;
       }
       return '';
+    },
+    progress: {
+      get(): number | false {
+        return this.item.UserData?.PlayedPercentage || false;
+      }
     }
   }
 });
diff --git a/components/ConnectionMonitor.vue b/components/ConnectionMonitor.vue
index c61c654b..72f597b6 100644
--- a/components/ConnectionMonitor.vue
+++ b/components/ConnectionMonitor.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!$nuxt.isOnline">
     <v-tooltip bottom>
-      <template v-slot:activator="{ on, attrs }">
+      <template #activator="{ on, attrs }">
         <v-icon size="32" v-bind="attrs" v-on="on">
           mdi-network-off-outline
         </v-icon>
diff --git a/components/FilterButton.vue b/components/FilterButton.vue
index 694e57f8..2cb7fb60 100644
--- a/components/FilterButton.vue
+++ b/components/FilterButton.vue
@@ -1,6 +1,6 @@
 <template>
   <v-menu :offset-y="true" :close-on-content-click="false" max-width="250px">
-    <template v-slot:activator="{ on }">
+    <template #activator="{ on }">
       <v-btn class="ma-2" icon v-on="on" @click="getFilters">
         <v-icon>mdi-filter-variant</v-icon>
       </v-btn>
diff --git a/components/HomeSection.vue b/components/HomeSection.vue
index 53b31fbd..ad041bed 100644
--- a/components/HomeSection.vue
+++ b/components/HomeSection.vue
@@ -14,18 +14,18 @@
       fixed-height="true"
     >
       <vueper-slide v-for="item in items" :key="item.Id">
-        <template v-slot:content>
+        <template #content>
           <card :shape="section.shape" :item="item" />
         </template>
       </vueper-slide>
 
-      <template v-slot:arrow-left>
+      <template #arrow-left>
         <v-btn icon large>
           <v-icon>mdi-arrow-left</v-icon>
         </v-btn>
       </template>
 
-      <template v-slot:arrow-right>
+      <template #arrow-right>
         <v-btn icon large>
           <v-icon>mdi-arrow-right</v-icon>
         </v-btn>
diff --git a/components/LocaleSwitcher.vue b/components/LocaleSwitcher.vue
index 191d0716..be27bccb 100644
--- a/components/LocaleSwitcher.vue
+++ b/components/LocaleSwitcher.vue
@@ -1,6 +1,6 @@
 <template>
   <v-menu offset-y>
-    <template v-slot:activator="{ on, attrs }">
+    <template #activator="{ on, attrs }">
       <v-btn icon size="36" v-bind="attrs" v-on="on">
         <v-icon>mdi-web</v-icon>
       </v-btn>
diff --git a/components/RelatedItems.vue b/components/RelatedItems.vue
index bd6a0263..2889e2d5 100644
--- a/components/RelatedItems.vue
+++ b/components/RelatedItems.vue
@@ -14,18 +14,18 @@
         fixed-height="true"
       >
         <vueper-slide v-for="item in relatedItems" :key="item.Id">
-          <template v-slot:content>
+          <template #content>
             <card :item="item" />
           </template>
         </vueper-slide>
 
-        <template v-slot:arrow-left>
+        <template #arrow-left>
           <v-btn icon large>
             <v-icon>mdi-arrow-left</v-icon>
           </v-btn>
         </template>
 
-        <template v-slot:arrow-right>
+        <template #arrow-right>
           <v-btn icon large>
             <v-icon>mdi-arrow-right</v-icon>
           </v-btn>
diff --git a/components/UserButton.vue b/components/UserButton.vue
index 34a47751..1fb66215 100644
--- a/components/UserButton.vue
+++ b/components/UserButton.vue
@@ -1,6 +1,6 @@
 <template>
   <v-menu offset-y>
-    <template v-slot:activator="{ on, attrs }">
+    <template #activator="{ on, attrs }">
       <v-btn icon v-bind="attrs" v-on="on">
         <v-avatar>
           <v-img
diff --git a/layouts/default.vue b/layouts/default.vue
index 5888edc0..27fa754f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,7 @@
       :temporary="$vuetify.breakpoint.mobile"
       app
     >
-      <template v-slot:prepend>
+      <template #prepend>
         <div class="d-flex align-center full-width pa-6">
           <v-avatar size="48" color="primary" class="mr-4">
             <img
diff --git a/pages/index.vue b/pages/index.vue
index f966f13a..524da954 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -28,6 +28,11 @@ export default Vue.extend({
       homeSections: [] as HomeSection[]
     };
   },
+  head() {
+    return {
+      title: this.$store.state.page.title
+    };
+  },
   async created() {
     this.setPageTitle({ title: this.$t('home') });
 
@@ -130,11 +135,6 @@ export default Vue.extend({
   },
   methods: {
     ...mapActions('page', ['setPageTitle'])
-  },
-  head() {
-    return {
-      title: this.$store.state.page.title
-    };
   }
 });
 </script>
diff --git a/pages/item/_itemId/play.vue b/pages/item/_itemId/play.vue
index 378a5390..934b8a94 100644
--- a/pages/item/_itemId/play.vue
+++ b/pages/item/_itemId/play.vue
@@ -14,8 +14,8 @@ import { BaseItemDto } from '~/api/api';
 import imageHelper from '~/mixins/imageHelper';
 
 export default Vue.extend({
-  layout: 'fullpage',
   mixins: [imageHelper],
+  layout: 'fullpage',
   data() {
     return {
       poster: '',
diff --git a/pages/library/_viewId.vue b/pages/library/_viewId.vue
index cbd84a72..2fc86484 100644
--- a/pages/library/_viewId.vue
+++ b/pages/library/_viewId.vue
@@ -38,7 +38,7 @@
       :buffer="$vuetify.breakpoint.height * 1.5"
       page-mode
     >
-      <template v-slot="{ item, index, active }">
+      <template #default="{ item, index, active }">
         <dynamic-scroller-item
           :item="item"
           :active="active"
@@ -84,6 +84,11 @@ export default Vue.extend({
       collectionInfoItem: {}
     };
   },
+  head() {
+    return {
+      title: this.$store.state.page.title
+    };
+  },
   computed: {
     itemsChunks: {
       get() {
@@ -223,11 +228,6 @@ export default Vue.extend({
       this.sortDirection = !this.sortDirection;
       this.sortItems();
     }
-  },
-  head() {
-    return {
-      title: this.$store.state.page.title
-    };
   }
 });
 </script>
diff --git a/pages/login.vue b/pages/login.vue
index 3cc8aee6..b286fcd4 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -15,16 +15,16 @@ import { mapActions } from 'vuex';
 
 export default Vue.extend({
   layout: 'fullpage',
+  head() {
+    return {
+      title: this.$store.state.page.title
+    };
+  },
   created() {
     this.setPageTitle({ title: this.$t('login') });
   },
   methods: {
     ...mapActions('page', ['setPageTitle'])
-  },
-  head() {
-    return {
-      title: this.$store.state.page.title
-    };
   }
 });
 </script>
diff --git a/pages/person/_itemId/index.vue b/pages/person/_itemId/index.vue
index edd47b37..91d6da68 100644
--- a/pages/person/_itemId/index.vue
+++ b/pages/person/_itemId/index.vue
@@ -64,18 +64,18 @@
               fixed-height="true"
             >
               <vueper-slide v-for="movie in movies" :key="movie.Id">
-                <template v-slot:content>
+                <template #content>
                   <card :item="movie" />
                 </template>
               </vueper-slide>
 
-              <template v-slot:arrow-left>
+              <template #arrow-left>
                 <v-btn icon large>
                   <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>
               </template>
 
-              <template v-slot:arrow-right>
+              <template #arrow-right>
                 <v-btn icon large>
                   <v-icon>mdi-arrow-right</v-icon>
                 </v-btn>
@@ -99,18 +99,18 @@
               fixed-height="true"
             >
               <vueper-slide v-for="show in shows" :key="show.Id">
-                <template v-slot:content>
+                <template #content>
                   <card :item="show" />
                 </template>
               </vueper-slide>
 
-              <template v-slot:arrow-left>
+              <template #arrow-left>
                 <v-btn icon large>
                   <v-icon>mdi-arrow-left</v-icon>
                 </v-btn>
               </template>
 
-              <template v-slot:arrow-right>
+              <template #arrow-right>
                 <v-btn icon large>
                   <v-icon>mdi-arrow-right</v-icon>
                 </v-btn>
diff --git a/plugins/components/vueVirtualScroller.ts b/plugins/components/vueVirtualScroller.ts
index c9ff0549..afb52c83 100644
--- a/plugins/components/vueVirtualScroller.ts
+++ b/plugins/components/vueVirtualScroller.ts
@@ -4,5 +4,5 @@ import Vue from 'vue';
 import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
-Vue.component('dynamic-scroller', DynamicScroller);
-Vue.component('dynamic-scroller-item', DynamicScrollerItem);
+Vue.component('DynamicSroller', DynamicScroller);
+Vue.component('DynamicScrollerItem', DynamicScrollerItem);
diff --git a/plugins/components/vueperSlides.ts b/plugins/components/vueperSlides.ts
index 0c76e55d..34773e84 100644
--- a/plugins/components/vueperSlides.ts
+++ b/plugins/components/vueperSlides.ts
@@ -4,5 +4,5 @@ import Vue from 'vue';
 import { VueperSlides, VueperSlide } from 'vueperslides';
 import 'vueperslides/dist/vueperslides.css';
 
-Vue.component('vueper-slides', VueperSlides);
-Vue.component('vueper-slide', VueperSlide);
+Vue.component('VueperSlides', VueperSlides);
+Vue.component('VueperSlide', VueperSlide);