Dependency updates (#389)

* Update Node.js (and npm) to latest LTS

* Update dependencies to latest minor versions

* Fix vue-select styling

* Update jest to latest major version

* Switch to do-vue branch with fixed templating

* Switch back to do-vue master

* Update do-bulma to latest version

.nvmrc

@@ -1 +1 @@
-v16.16.0
+v16.17.1

package.json

@@ -5,8 +5,8 @@
   "private": true,
   "license": "MIT",
   "engines": {
-    "node": "^16.16.0",
-    "npm": "^8.11.0"
+    "node": "^16.17.1",
+    "npm": "^8.15.0"
   },
   "main": "src/nginxconfig/mount.js",
   "type": "module",
@@ -53,41 +53,41 @@
     "json-to-pretty-yaml": "^1.2.2",
     "memory-tar-create": "0.0.3",
     "pretty-checkbox-vue": "^1.1.9",
-    "prismjs": "^1.28.0",
+    "prismjs": "^1.29.0",
     "qs": "^6.11.0",
     "simple-js-sha2-256": "^1.0.7",
-    "vue": "^3.2.37",
-    "vue-i18n": "^9.1.10",
-    "vue-select": "^4.0.0-beta.3",
+    "vue": "^3.2.40",
+    "vue-i18n": "^9.2.2",
+    "vue-select": "^4.0.0-beta.5",
     "webpack-require-from": "^1.8.6"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
-    "@babel/runtime": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/runtime": "^7.19.0",
     "@vue/cli-service": "^5.0.8",
     "ajv": "^8.11.0",
     "chalk": "^5.0.1",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.23.5",
+    "core-js": "^3.25.3",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^8.20.0",
-    "eslint-plugin-vue": "^9.2.0",
+    "eslint": "^8.24.0",
+    "eslint-plugin-vue": "^9.5.1",
     "esm": "^3.2.25",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "node-fetch": "^3.2.9",
-    "postcss": "^8.4.14",
-    "sass": "^1.53.0",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "node-fetch": "^3.2.10",
+    "postcss": "^8.4.17",
+    "sass": "^1.55.0",
     "sass-loader": "^13.0.2",
-    "stylelint": "^14.9.1",
+    "stylelint": "^14.13.0",
     "stylelint-config-standard-scss": "^5.0.0",
     "stylelint-order": "^5.0.0",
-    "vue-template-compiler": "^2.7.7",
-    "webpack": "^5.73.0",
-    "webpack-bundle-analyzer": "^4.5.0"
+    "vue-template-compiler": "^2.7.10",
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^4.6.1"
   },
   "overrides": {
     "@vue/cli-service": {

src/nginxconfig/mount.js

@@ -26,6 +26,7 @@ THE SOFTWARE.
 
 // Load in the app
 import './scss/style.scss';
+import 'vue-select/dist/vue-select.css';
 import { createApp } from 'vue';
 import './util/prism_bundle';
 import { getI18n } from './i18n/setup';

src/nginxconfig/scss/_callout.scss

@@ -33,7 +33,7 @@ THE SOFTWARE.
 
   &.floating {
     bottom: 0;
-    box-shadow: inset 0 0 0 $border-size $border-color;
+    box-shadow: inset 0 0 0 $border-size $border;
     max-width: calc(100% - 1rem);
     position: fixed;
     right: 0;

src/nginxconfig/scss/_vue-select.scss

@@ -26,6 +26,11 @@ THE SOFTWARE.
 
 // stylelint-disable selector-class-pattern
 .v-select {
+  --vs-border-color: #{$border};
+  --vs-border-radius: #{$border-radius};
+  --vs-dropdown-box-shadow: 0 2px 4px #{rgba($dark-blue, .06)};
+  --vs-dropdown-option--active-bg: #{$primary}; // stylelint-disable-line custom-property-pattern
+
   &.vs--open {
     > ul {
       opacity: 1;
@@ -100,6 +105,7 @@ THE SOFTWARE.
 
   .vs__dropdown-menu {
     .vs__dropdown-option {
+      padding: .25rem 1.25rem;
       white-space: normal;
     }
   }

src/nginxconfig/scss/style.scss

@@ -38,13 +38,6 @@ $callout: #f3f5f9;
 
   @import "~pretty-checkbox/src/pretty-checkbox";
 
-  $vs-border-color: $border;
-  $vs-border-radius: $border-radius;
-  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
-  $vs-state-active-bg: $primary;
-
-  @import "~vue-select/src/scss/vue-select";
-
   // Local imports
   @import "header";
   @import "tabs";