refactor: update packages + lint

Author: dragosct

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
   },
   parserOptions: {
-    parser: "babel-eslint"
-  }
+    parser: "babel-eslint",
+  },
 };

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/app"]
+  presets: ["@vue/app"],
 };

package.json

@@ -9,30 +9,30 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "3.6.4",
+    "core-js": "3.18.2",
     "chartist": "0.11.4",
-    "google-maps": "4.2.3",
-    "vue": "2.6.11",
+    "google-maps": "4.3.3",
+    "vue": "2.6.14",
     "vue-clickaway": "2.2.2",
     "vue-github-buttons": "3.1.0",
-    "vue-material": "1.0.0-beta-11",
-    "vue-router": "3.1.6",
-    "vue-social-sharing": "2.4.7"
+    "vue-material": "1.0.0-beta-15",
+    "vue-router": "3.5.2",
+    "vue-social-sharing": "3.0.8"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.2.3",
-    "@vue/cli-plugin-eslint": "4.2.3",
-    "@vue/cli-plugin-router": "4.2.3",
-    "@vue/cli-service": "4.2.3",
+    "@vue/cli-plugin-babel": "4.5.13",
+    "@vue/cli-plugin-eslint": "4.5.13",
+    "@vue/cli-plugin-router": "4.5.13",
+    "@vue/cli-service": "4.5.13",
     "@vue/eslint-config-prettier": "6.0.0",
     "babel-eslint": "10.1.0",
-    "eslint": "6.8.0",
-    "eslint-plugin-prettier": "3.1.2",
-    "eslint-plugin-vue": "6.2.2",
+    "eslint": "7.32.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-vue": "7.19.1",
     "es6-promise": "4.2.8",
-    "prettier": "1.19.1",
-    "sass": "1.26.2",
-    "sass-loader": "8.0.2",
-    "vue-template-compiler": "2.6.11"
+    "prettier": "2.4.1",
+    "sass": "1.42.1",
+    "sass-loader": "10.1.1",
+    "vue-template-compiler": "2.6.14"
   }
 }

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };

src/components/Cards/ChartCard.vue

@@ -22,45 +22,45 @@ export default {
   props: {
     footerText: {
       type: String,
-      default: ""
+      default: "",
     },
     headerTitle: {
       type: String,
-      default: "Chart title"
+      default: "Chart title",
     },
     chartType: {
       type: String,
-      default: "Line" // Line | Pie | Bar
+      default: "Line", // Line | Pie | Bar
     },
     chartOptions: {
       type: Object,
       default: () => {
         return {};
-      }
+      },
     },
     chartResponsiveOptions: {
       type: Array,
       default: () => {
         return [];
-      }
+      },
     },
     chartData: {
       type: Object,
       default: () => {
         return {
           labels: [],
-          series: []
+          series: [],
         };
-      }
+      },
     },
     dataBackgroundColor: {
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
-      chartId: "no-id"
+      chartId: "no-id",
     };
   },
   methods: {
@@ -81,16 +81,16 @@ export default {
     },
     getRandomInt(min, max) {
       return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
+    },
   },
   mounted() {
     this.updateChartId();
-    import("chartist").then(Chartist => {
+    import("chartist").then((Chartist) => {
       let ChartistLib = Chartist.default || Chartist;
       this.$nextTick(() => {
         this.initChart(ChartistLib);
       });
     });
-  }
+  },
 };
 </script>

src/components/Cards/NavTabsCard.vue

@@ -8,6 +8,6 @@
 
 <script>
 export default {
-  name: "nav-tabs-card"
+  name: "nav-tabs-card",
 };
 </script>

src/components/Cards/StatsCard.vue

@@ -19,8 +19,8 @@ export default {
   props: {
     dataBackgroundColor: {
       type: String,
-      default: ""
-    }
-  }
+      default: "",
+    },
+  },
 };
 </script>

src/components/Dropdown.vue

@@ -26,11 +26,11 @@ export default {
   name: "drop-down",
   props: {
     title: String,
-    icon: String
+    icon: String,
   },
   data() {
     return {
-      isOpen: false
+      isOpen: false,
     };
   },
   methods: {
@@ -39,7 +39,7 @@ export default {
     },
     closeDropDown() {
       this.isOpen = false;
-    }
-  }
+    },
+  },
 };
 </script>

src/components/NotificationPlugin/Notification.vue

@@ -29,28 +29,28 @@ export default {
     icon: String,
     verticalAlign: {
       type: String,
-      default: "top"
+      default: "top",
     },
     horizontalAlign: {
       type: String,
-      default: "center"
+      default: "center",
     },
     type: {
       type: String,
-      default: "info"
+      default: "info",
     },
     timeout: {
       type: Number,
-      default: 2500
+      default: 2500,
     },
     timestamp: {
       type: Date,
-      default: () => new Date()
-    }
+      default: () => new Date(),
+    },
   },
   data() {
     return {
-      elmHeight: 0
+      elmHeight: 0,
     };
   },
   computed: {
@@ -63,7 +63,7 @@ export default {
     customPosition() {
       let initialMargin = 20;
       let alertHeight = this.elmHeight + 10;
-      let sameAlertsCount = this.$notifications.state.filter(alert => {
+      let sameAlertsCount = this.$notifications.state.filter((alert) => {
         return (
           alert.horizontalAlign === this.horizontalAlign &&
           alert.verticalAlign === this.verticalAlign &&
@@ -78,19 +78,19 @@ export default {
         styles.bottom = `${pixels}px`;
       }
       return styles;
-    }
+    },
   },
   methods: {
     close() {
       this.$emit("on-close", this.timestamp);
-    }
+    },
   },
   mounted() {
     this.elmHeight = this.$el.clientHeight;
     if (this.timeout) {
       setTimeout(this.close, this.timeout);
     }
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/NotificationPlugin/Notifications.vue

@@ -20,18 +20,18 @@
 import Notification from "./Notification.vue";
 export default {
   components: {
-    Notification
+    Notification,
   },
   data() {
     return {
-      notifications: this.$notifications.state
+      notifications: this.$notifications.state,
     };
   },
   methods: {
     removeNotification(timestamp) {
       this.$notifications.removeNotification(timestamp);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">

src/components/NotificationPlugin/index.js

@@ -4,7 +4,9 @@ const NotificationStore = {
   state: [], // here the notifications will be added
 
   removeNotification(timestamp) {
-    const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp);
+    const indexToDelete = this.state.findIndex(
+      (n) => n.timestamp === timestamp
+    );
     if (indexToDelete !== -1) {
       this.state.splice(indexToDelete, 1);
     }
@@ -18,41 +20,41 @@ const NotificationStore = {
   },
   notify(notification) {
     if (Array.isArray(notification)) {
-      notification.forEach(notificationInstance => {
+      notification.forEach((notificationInstance) => {
         this.addNotification(notificationInstance);
       });
     } else {
       this.addNotification(notification);
     }
-  }
+  },
 };
 
 var NotificationsPlugin = {
   install(Vue) {
     Vue.mixin({
       data() {
         return {
-          notificationStore: NotificationStore
+          notificationStore: NotificationStore,
         };
       },
       methods: {
         notify(notification) {
           this.notificationStore.notify(notification);
-        }
-      }
+        },
+      },
     });
     Object.defineProperty(Vue.prototype, "$notify", {
       get() {
         return this.$root.notify;
-      }
+      },
     });
     Object.defineProperty(Vue.prototype, "$notifications", {
       get() {
         return this.$root.notificationStore;
-      }
+      },
     });
     Vue.component("Notifications", Notifications);
-  }
+  },
 };
 
 export default NotificationsPlugin;