Upgrade dependencies

Also rename a few components to match the multi-word recommendation and
add "Map" to the ignorelist of the vue/multi-word-component-names ESLint
rule.

A couple of major version bumps are currently blocked by upgrading the
project to Vue 3.

.eslintrc.js

@@ -21,6 +21,12 @@ module.exports = {
         htmlWhitespaceSensitivity: "ignore",
       },
     ],
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Map"],
+      },
+    ],
   },
   parserOptions: {
     parser: "babel-eslint",

package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.19.1",
+    "core-js": "^3.21.0",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
@@ -28,7 +28,7 @@
     "vue": "^2.6.14",
     "vue-ctk-date-time-picker": "^2.5.0",
     "vue-feather-icons": "^5.1.0",
-    "vue-i18n": "^8.26.7",
+    "vue-i18n": "^8.27.0",
     "vue-js-modal": "^2.0.1",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
@@ -41,20 +41,20 @@
     "@vue/cli-plugin-eslint": "~4.5.15",
     "@vue/cli-plugin-unit-jest": "~4.5.15",
     "@vue/cli-service": "~4.5.15",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^27.5.1",
     "cors-anywhere": "^0.4.4",
     "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^7.17.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.4.1",
     "jest-fetch-mock": "^3.0.3",
-    "lint-staged": "^12.1.2",
+    "lint-staged": "^12.3.3",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "prettier": "^2.5.0",
-    "sass": "^1.43.5",
+    "prettier": "^2.5.1",
+    "sass": "^1.49.7",
     "sass-loader": "^10.1.1",
     "vue-cli-plugin-i18n": "~2.3.1",
     "vue-template-compiler": "^2.6.14"

src/App.vue

@@ -20,9 +20,9 @@ import { mapActions } from "vuex";
 import * as types from "@/store/mutation-types";
 import { log } from "@/logging";
 import AppHeader from "@/components/AppHeader";
-import DownloadModal from "@/components/modals/Download";
-import InformationModal from "@/components/modals/Information";
-import LoadingModal from "@/components/modals/Loading";
+import DownloadModal from "@/components/modals/DownloadModal";
+import InformationModal from "@/components/modals/InformationModal";
+import LoadingModal from "@/components/modals/LoadingModal";
 
 export default {
   components: { AppHeader, DownloadModal, InformationModal, LoadingModal },

src/components/AppHeader.vue

@@ -32,7 +32,10 @@
       </div>
       <div class="nav-item">
         <LayersIcon size="1x" aria-hidden="true" role="img" />
-        <Dropdown :label="$t('Layer settings')" :title="$t('Show/hide layers')">
+        <DropdownButton
+          :label="$t('Layer settings')"
+          :title="$t('Show/hide layers')"
+        >
           <label v-for="option in layerSettingsOptions" :key="option.layer">
             <input
               type="checkbox"
@@ -46,7 +49,7 @@
             />
             {{ option.label }}
           </label>
-        </Dropdown>
+        </DropdownButton>
       </div>
       <div class="nav-item">
         <CalendarIcon size="1x" aria-hidden="true" role="img" />
@@ -188,7 +191,7 @@ import {
 import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
 import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
 
-import Dropdown from "@/components/Dropdown";
+import DropdownButton from "@/components/DropdownButton";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";
 import { humanReadableDistance } from "@/util";
@@ -206,7 +209,7 @@ export default {
     SmartphoneIcon,
     UserIcon,
     VueCtkDateTimePicker,
-    Dropdown,
+    DropdownButton,
   },
   data() {
     return {