Add missing deps, fix errors from eslint

.eslintrc.js

@@ -21,11 +21,12 @@ module.exports = {
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     'plugin:prettier/recommended',
-    'prettier/vue',
+    'prettier',
   ],
 
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': ['off'],
   },
 }

package-lock.json

@@ -21,17 +21,21 @@
         "core-js": "^3.25.5",
         "css-loader": "^6.7.1",
         "eslint": "^8.25.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-formatter-friendly": "^7.0.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-vue": "^9.6.0",
         "eslint-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^2.6.1",
+        "prettier": "^2.8.1",
         "rimraf": "^3.0.2",
         "style-loader": "^3.3.1",
         "vue": "^3.2.40",
         "vue-eslint-parser": "^9.1.0",
         "vue-loader": "^17.0.0",
         "vue-style-loader": "^4.1.3",
-        "webpack": "^5.74.0"
+        "webpack": "^5.74.0",
+        "webpack-merge": "^5.8.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2482,6 +2486,20 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2788,6 +2806,64 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-formatter-friendly": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-formatter-friendly/-/eslint-formatter-friendly-7.0.0.tgz",
+      "integrity": "sha512-WXg2D5kMHcRxIZA3ulxdevi8/BGTXu72pfOO5vXHqcAfClfIWDSlOljROjCSOCcKvilgmHz1jDWbvFCZHjMQ5w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "7.0.0",
+        "chalk": "2.4.2",
+        "extend": "3.0.2",
+        "strip-ansi": "5.2.0",
+        "text-table": "0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-formatter-friendly/node_modules/@babel/code-frame": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+      "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/highlight": "^7.0.0"
+      }
+    },
+    "node_modules/eslint-formatter-friendly/node_modules/ansi-regex": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eslint-formatter-friendly/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eslint-plugin-prettier": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
@@ -3142,6 +3218,12 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3547,12 +3629,33 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/jest-worker": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
@@ -3662,6 +3765,15 @@
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
       "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -4306,11 +4418,10 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.1",
+      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -4599,6 +4710,18 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4661,6 +4784,7 @@
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
       "dev": true
     },
     "node_modules/strip-ansi": {
@@ -5222,6 +5346,19 @@
         }
       }
     },
+    "node_modules/webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -5292,6 +5429,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -7153,6 +7296,17 @@
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
       "dev": true
     },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7452,6 +7606,52 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
+      "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-formatter-friendly": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-formatter-friendly/-/eslint-formatter-friendly-7.0.0.tgz",
+      "integrity": "sha512-WXg2D5kMHcRxIZA3ulxdevi8/BGTXu72pfOO5vXHqcAfClfIWDSlOljROjCSOCcKvilgmHz1jDWbvFCZHjMQ5w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.0.0",
+        "chalk": "2.4.2",
+        "extend": "3.0.2",
+        "strip-ansi": "5.2.0",
+        "text-table": "0.2.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+          "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.0.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
     "eslint-plugin-prettier": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
@@ -7627,6 +7827,12 @@
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7939,12 +8145,27 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true
+    },
     "jest-worker": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
@@ -8029,6 +8250,12 @@
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
       "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
     },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -8491,11 +8718,10 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.7.1",
+      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
-      "dev": true,
+      "dev": true
-      "peer": true
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",
@@ -8679,6 +8905,15 @@
         "randombytes": "^2.1.0"
       }
     },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9148,6 +9383,16 @@
         }
       }
     },
+    "webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      }
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -9163,6 +9408,12 @@
         "isexe": "^2.0.0"
       }
     },
+    "wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
+      "dev": true
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -27,17 +27,21 @@
     "core-js": "^3.25.5",
     "css-loader": "^6.7.1",
     "eslint": "^8.25.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-formatter-friendly": "^7.0.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.6.0",
     "eslint-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^2.6.1",
+    "prettier": "^2.8.1",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
     "vue": "^3.2.40",
     "vue-eslint-parser": "^9.1.0",
     "vue-loader": "^17.0.0",
     "vue-style-loader": "^4.1.3",
-    "webpack": "^5.74.0"
+    "webpack": "^5.74.0",
+    "webpack-merge": "^5.8.0"
   },
   "homepage": "https://vue-google-maps-community-fork.netlify.app",
   "license": "MIT",

src/components/autocomplete.vue

@@ -1,16 +1,8 @@
 <template>
   <template v-if="$slots['input']">
-    <slot
+    <slot name="input" v-bind="$attrs"></slot>
-      name="input"
-      v-bind="$attrs"
-    ></slot>
   </template>
-  <input
+  <input v-else-if="!$slots['input']" ref="input" v-bind="$attrs" v-on="$attrs" />
-    v-else-if="!$slots['input']"
-    ref="input"
-    v-bind="$attrs"
-    v-on="$attrs"
-  />
 </template>
 
 <script>
@@ -49,15 +41,15 @@ const props = {
 
 export default {
   mounted() {
-    const _this = this;
+    const _this = this
     this.$gmapApiPromiseLazy().then(() => {
       // get correct input from fallback or slot
       let refInput = _this.$refs.input
       if (_this.$slots.input) {
-        const refName = _this.$slots.input()[0].props.ref;
+        const refName = _this.$slots.input()[0].props.ref
-        const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName];
+        const scopedInput = _this.$slots.input()[0].ref.i.ctx.$refs[refName]
         if (scopedInput) {
-          refInput = scopedInput.$el.getElementsByTagName('input')[0];
+          refInput = scopedInput.$el.getElementsByTagName('input')[0]
         }
       }
       if (this.selectFirstOnEnter) {

src/components/build-component.js

@@ -44,17 +44,8 @@ import MapElementMixin from './mapElementMixin'
  *
  */
 export default function (options) {
-  const {
+  const { mappedProps, name, ctr, ctrArgs, events, beforeCreate, afterCreate, props, ...rest } =
-    mappedProps,
+    options
-    name,
-    ctr,
-    ctrArgs,
-    events,
-    beforeCreate,
-    afterCreate,
-    props,
-    ...rest
-  } = options
 
   const promiseName = `$${name}Promise`
   const instanceName = `$${name}Object`

src/components/cluster.vue

@@ -4,8 +4,12 @@
   </div>
 </template>
 <script>
-import {DefaultRenderer, MarkerClusterer, SuperClusterAlgorithm} from '@googlemaps/markerclusterer';
+import {
-import buildComponent from './build-component.js';
+  DefaultRenderer,
+  MarkerClusterer,
+  SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer'
+import buildComponent from './build-component.js'
 
 const props = {
   algorithm: {
@@ -15,15 +19,12 @@ const props = {
   },
   renderer: {
     type: Object,
-    default: new DefaultRenderer,
+    default: new DefaultRenderer(),
     noBind: true,
   },
-};
+}
 
-const events = [
+const events = ['clusteringbegin', 'clusteringend']
-  'clusteringbegin',
-  'clusteringend',
-];
 
 export default buildComponent({
   mappedProps: props,
@@ -31,28 +32,28 @@ export default buildComponent({
   name: 'cluster',
   ctr: () => {
     if (typeof MarkerClusterer === 'undefined') {
-      const errorMessage = 'MarkerClusterer is not installed!';
+      const errorMessage = 'MarkerClusterer is not installed!'
-      console.error(errorMessage);
+      console.error(errorMessage)
-      throw new Error(errorMessage);
+      throw new Error(errorMessage)
     }
-    return MarkerClusterer;
+    return MarkerClusterer
   },
-  ctrArgs: ({map, ...otherOptions}) => [{map, ...otherOptions}],
+  ctrArgs: ({ map, ...otherOptions }) => [{ map, ...otherOptions }],
   afterCreate(inst) {
     const reinsertMarkers = () => {
-      const oldMarkers = inst.getMarkers();
+      const oldMarkers = inst.getMarkers()
-      inst.clearMarkers();
+      inst.clearMarkers()
-      inst.addMarkers(oldMarkers);
+      inst.addMarkers(oldMarkers)
-    };
+    }
     for (let prop in props) {
       if (props[prop].twoWay) {
-        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers);
+        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers)
       }
     }
   },
   updated() {
     if (this.$clusterObject) {
-      this.$clusterObject.render();
+      this.$clusterObject.render()
     }
   },
   beforeUnmount() {
@@ -60,14 +61,14 @@ export default buildComponent({
     if (this.$children && this.$children.length) {
       this.$children.forEach((marker) => {
         if (marker.$clusterObject === this.$clusterObject) {
-          marker.$clusterObject = null;
+          marker.$clusterObject = null
         }
-      });
+      })
     }
 
     if (this.$clusterObject) {
-      this.$clusterObject.clearMarkers();
+      this.$clusterObject.clearMarkers()
     }
   },
-});
+})
 </script>

src/components/heatmap.js

@@ -4,16 +4,15 @@ const props = {
   options: {
     type: Object,
     twoWay: false,
-    default: () => {
+    default: () => {},
-    },
   },
   data: {
     type: Array,
-    twoWay: true
+    twoWay: true,
   },
 }
 
-const events = [];
+const events = []
 
 export default buildComponent({
   mappedProps: props,
@@ -21,5 +20,3 @@ export default buildComponent({
   ctr: () => google.maps.visualization.HeatmapLayer,
   events,
 })
-
-

src/components/map.vue

@@ -103,7 +103,19 @@ const customMethods = {
 
 export default {
   mixins: [mountableMixin],
-  props: mappedPropsToVueProps({...props, ...events.reduce((obj, eventName) => ({...obj, [`on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(/[-_]+(.)?/g, (_, c) => c ? c.toUpperCase() : '')]: Function}), {}) } ),
+  props: mappedPropsToVueProps({
+    ...props,
+    ...events.reduce(
+      (obj, eventName) => ({
+        ...obj,
+        [`on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(
+          /[-_]+(.)?/g,
+          (_, c) => (c ? c.toUpperCase() : '')
+        )]: Function,
+      }),
+      {}
+    ),
+  }),
   inheritAttrs: false,
 
   provide() {

src/components/marker.vue

@@ -1,10 +1,15 @@
 <template>
-  <div @click="()=> {console.log('sdfsd')}">
+  <div
+    @click="
+      () => {
+        console.log('sdfsd')
+      }
+    "
+  >
     <slot></slot>
   </div>
 </template>
 <script>
-
 import buildComponent from './build-component.js'
 
 const props = {
@@ -112,10 +117,10 @@ export default buildComponent({
   },
 
   afterCreate(inst) {
-    events.forEach((event)=> {
+    events.forEach((event) => {
-      inst.addListener(event, (payload)=> {
+      inst.addListener(event, (payload) => {
         this.$emit(event, payload)
-      });
+      })
     })
     if (this.$clusterPromise) {
       this.$clusterPromise.then((co) => {

src/components/polygon.js

@@ -83,9 +83,11 @@ export default buildComponent({
           eventListeners.push([mvcArray, mvcArray.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
+            eventListeners.map(
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              (
-            ) => google.maps.event.removeListener(listenerHandle))
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },
@@ -115,9 +117,11 @@ export default buildComponent({
           eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
+            eventListeners.map(
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              (
-            ) => google.maps.event.removeListener(listenerHandle))
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },

src/components/polyline.js

@@ -67,9 +67,11 @@ export default buildComponent({
           eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
 
           clearEvents = () => {
-            eventListeners.map((
+            eventListeners.map(
-              [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              (
-            ) => google.maps.event.removeListener(listenerHandle))
+                [obj, listenerHandle] // eslint-disable-line no-unused-vars
+              ) => google.maps.event.removeListener(listenerHandle)
+            )
           }
         }
       },

src/load-google-maps.js

@@ -1,16 +1,15 @@
-import {Env} from "./utils/env";
+import { Env } from './utils/env'
-import {createMapScript} from "./utils/create-map-script";
+import { createMapScript } from './utils/create-map-script'
 
 let isApiSetUp = false
-export function loadGMapApi (options) {
+export function loadGMapApi(options) {
-
   if (Env.isServer()) {
-    return;
+    return
   }
 
   if (!isApiSetUp) {
     isApiSetUp = true
-    const googleMapScript = createMapScript(options);
+    const googleMapScript = createMapScript(options)
     document.head.appendChild(googleMapScript)
   } else {
     throw new Error('You already started the loading of google maps')

src/main.js

@@ -15,8 +15,8 @@ import Autocomplete from './components/autocomplete.vue'
 import MapElementMixin from './components/mapElementMixin'
 import buildComponent from './components/build-component'
 import MountableMixin from './utils/mountableMixin'
-import {Env} from "./utils/env";
+import { Env } from './utils/env'
-let GMapApi = null;
+let GMapApi = null
 
 export {
   loadGMapApi,

src/utils/bindEvents.js

@@ -1,6 +1,9 @@
 export default (vueInst, googleMapsInst, events) => {
   for (let eventName of events) {
-    const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(/[-_]+(.)?/g, (_, c) => c ? c.toUpperCase() : '');
+    const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`.replace(
+      /[-_]+(.)?/g,
+      (_, c) => (c ? c.toUpperCase() : '')
+    )
 
     if (vueInst.$props[propName] || vueInst.$attrs[propName]) {
       googleMapsInst.addListener(eventName, (ev) => {

src/utils/bindProps.js

@@ -1,5 +1,5 @@
 import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
-import {Str} from "./string";
+import { Str } from './string'
 
 export function getPropsValues(vueInst, props) {
   return Object.keys(props).reduce((acc, prop) => {
@@ -39,7 +39,8 @@ export function bindProps(vueInst, googleMapsInst, props) {
     // although this may really be the user's responsibility
     if (type !== Object || !trackProperties) {
       // Track the object deeply
-      vueInst.$watch(attribute,
+      vueInst.$watch(
+        attribute,
         () => {
           const attributeValue = vueInst[attribute]
 

src/utils/create-map-script.js

@@ -15,11 +15,12 @@ export function createMapScript(options) {
   let url =
     baseUrl +
     Object.keys(options)
-      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key])).join('&')
+      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key]))
+      .join('&')
 
   googleMapScript.setAttribute('src', url)
   googleMapScript.setAttribute('async', '')
   googleMapScript.setAttribute('defer', '')
 
-  return googleMapScript;
+  return googleMapScript
 }

src/utils/env.js

@@ -1,5 +1,5 @@
 export class Env {
   static isServer() {
-    return typeof document === 'undefined';
+    return typeof document === 'undefined'
   }
 }

src/utils/event.js

@@ -1,3 +0,0 @@
-export class eventUtils {
-
-}

src/utils/lazyValue.js

@@ -1,15 +1,15 @@
 // lazy-value by sindresorhus
 
-export default fn => {
+export default (fn) => {
-  let called = false;
+  let called = false
-  let result;
+  let result
 
   return () => {
     if (!called) {
-      called = true;
+      called = true
-      result = fn();
+      result = fn()
     }
 
-    return result;
+    return result
-  };
+  }
-};
+}

src/utils/load-google-maps.js

@@ -1,143 +1,136 @@
 export class Loader {
-    constructor({
+  constructor({ apiKey, libraries = [], language, region, version, mapIds }) {
-                    apiKey,
+    // @ts-ignore
-                    libraries = [],
+    this.callbacks = []
-                    language,
+    this.CALLBACK = '__googleMapsCallback'
-                    region,
+    this.version = version
-                    version,
+    this.apiKey = apiKey
-                    mapIds
+    this.libraries = libraries
-                }) {
+    // @ts-ignore
-        // @ts-ignore
+    this.language = language
-        this.callbacks = [];
+    // @ts-ignore
-        this.CALLBACK = "__googleMapsCallback";
+    this.region = region
-        this.version = version;
+    this.URL = 'https://maps.googleapis.com/maps/api/js'
-        this.apiKey = apiKey;
+    // @ts-ignore
-        this.libraries = libraries;
+    this.mapIds = mapIds
-        // @ts-ignore
+  }
-        this.language = language;
+  /**
-        // @ts-ignore
+   * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].
-        this.region = region;
+   *
-        this.URL = 'https://maps.googleapis.com/maps/api/js';
+   * @ignore
-        // @ts-ignore
+   */
-        this.mapIds = mapIds;
+  createUrl() {
-    }
+    let url = this.URL
-    /**
+    console.log(this.URL)
-     * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].
-     *
-     * @ignore
-     */
-    createUrl() {
-        let url = this.URL;
-        console.log(this.URL)
 
-        url += `?callback=${this.CALLBACK}`;
+    url += `?callback=${this.CALLBACK}`
 
-        if (this.apiKey) {
+    if (this.apiKey) {
-            url += `&key=${this.apiKey}`;
+      url += `&key=${this.apiKey}`
-        }
-
-        if (this.libraries.length > 0) {
-            url += `&libraries=${this.libraries.join(",")}`;
-        }
-
-        if (this.language) {
-            url += `&language=${this.language}`;
-        }
-
-        if (this.region) {
-            url += `&region=${this.region}`;
-        }
-
-        if (this.version) {
-            url += `&v=${this.version}`;
-        }
-
-        if (this.mapIds) {
-            url += `&map_ids=${this.mapIds.join(",")}`;
-        }
-
-        return url;
     }
 
-    /**
+    if (this.libraries.length > 0) {
-     * Load the Google Maps JavaScript API script and return a Promise.
+      url += `&libraries=${this.libraries.join(',')}`
-     */
-    load() {
-        return this.loadPromise();
     }
 
-    /**
+    if (this.language) {
-     * Load the Google Maps JavaScript API script and return a Promise.
+      url += `&language=${this.language}`
-     *
-     * @ignore
-     */
-    loadPromise() {
-        return new Promise((resolve, reject) => {
-            this.loadCallback((err) => {
-                if (!err) {
-                    resolve();
-                } else {
-                    reject(err);
-                }
-            });
-        });
     }
 
-    /**
+    if (this.region) {
-     * Load the Google Maps JavaScript API script with a callback.
+      url += `&region=${this.region}`
-     */
-    loadCallback(fn) {
-        this.callbacks.push(fn);
-        this.execute();
     }
 
-    /**
+    if (this.version) {
-     * Set the script on document.
+      url += `&v=${this.version}`
-     */
-    setScript() {
-        const url = this.createUrl();
-        const script = document.createElement("script");
-
-        script.type = "text/javascript";
-        script.src = url;
-        // @ts-ignore
-        script.onerror = this.loadErrorCallback.bind(this);
-        script.defer = true;
-        script.async = true;
-        document.head.appendChild(script);
     }
 
-    loadErrorCallback(e) {
+    if (this.mapIds) {
-        this.onerrorEvent = e;
+      url += `&map_ids=${this.mapIds.join(',')}`
-        this.callback();
     }
 
-    setCallback() {
+    return url
-        window.__googleMapsCallback = this.callback.bind(this);
+  }
-    }
 
-    callback() {
+  /**
-        this.done = true;
+   * Load the Google Maps JavaScript API script and return a Promise.
-        this.loading = false;
+   */
+  load() {
+    return this.loadPromise()
+  }
 
-        this.callbacks.forEach(cb => {
+  /**
-            cb(this.onerrorEvent);
+   * Load the Google Maps JavaScript API script and return a Promise.
-        });
+   *
-
+   * @ignore
-        this.callbacks = [];
+   */
-    }
+  loadPromise() {
-
+    return new Promise((resolve, reject) => {
-    execute() {
+      this.loadCallback((err) => {
-        if (this.done) {
+        if (!err) {
-            this.callback();
+          resolve()
         } else {
-            if (this.loading) {
+          reject(err)
-                // do nothing but wait
-            } else {
-                this.loading = true;
-                this.setCallback();
-                this.setScript();
-            }
         }
+      })
+    })
+  }
+
+  /**
+   * Load the Google Maps JavaScript API script with a callback.
+   */
+  loadCallback(fn) {
+    this.callbacks.push(fn)
+    this.execute()
+  }
+
+  /**
+   * Set the script on document.
+   */
+  setScript() {
+    const url = this.createUrl()
+    const script = document.createElement('script')
+
+    script.type = 'text/javascript'
+    script.src = url
+    // @ts-ignore
+    script.onerror = this.loadErrorCallback.bind(this)
+    script.defer = true
+    script.async = true
+    document.head.appendChild(script)
+  }
+
+  loadErrorCallback(e) {
+    this.onerrorEvent = e
+    this.callback()
+  }
+
+  setCallback() {
+    window.__googleMapsCallback = this.callback.bind(this)
+  }
+
+  callback() {
+    this.done = true
+    this.loading = false
+
+    this.callbacks.forEach((cb) => {
+      cb(this.onerrorEvent)
+    })
+
+    this.callbacks = []
+  }
+
+  execute() {
+    if (this.done) {
+      this.callback()
+    } else {
+      if (this.loading) {
+        // do nothing but wait
+      } else {
+        this.loading = true
+        this.setCallback()
+        this.setScript()
+      }
     }
+  }
 }

src/utils/mountableMixin.js

@@ -29,7 +29,7 @@ export default {
       this.resize()
     },
     isFunction(functionToCheck) {
-      return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
+      return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
     },
     _delayedResizeCallback() {
       this.$nextTick(() => this._resizeCallback())