updated dependencies, migration boostrap v4 to v5

Author: Yeliazar

babel.config.js

@@ -3,6 +3,7 @@ module.exports = {
     '@vue/app'
   ],
   plugins: [
-    "@babel/plugin-proposal-optional-chaining"
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-syntax-optional-chaining"
   ]
 };

package.json

@@ -10,8 +10,8 @@
     "node": "node server.js"
   },
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.17",
-    "@amcharts/amcharts4-geodata": "^4.1.19",
+    "@amcharts/amcharts4": "^4.10.26",
+    "@amcharts/amcharts4-geodata": "^4.1.23",
     "@ckeditor/ckeditor5-build-classic": "^12.4.0",
     "@ckeditor/ckeditor5-vue": "^1.0.3",
     "@fullcalendar/core": "^4.4.2",
@@ -21,45 +21,45 @@
     "@fullcalendar/vue": "^4.4.2",
     "animate.css": "^4.1.1",
     "animated-number-vue": "^1.0.0",
-    "apexcharts": "^3.26.0",
-    "awesome-bootstrap-checkbox": "^1.0.1",
-    "axios": "^0.23.0",
-    "bootstrap": "^4.6.0",
-    "bootstrap-vue": "2.21.2",
+    "apexcharts": "^3.35.3",
+    "awesome-bootstrap-checkbox": "https://github.com/flatlogic/awesome-bootstrap-checkbox#bump-to-bootstrap5",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
+    "bootstrap-vue": "2.22.0",
     "chart.js": "^2.9.4",
-    "chroma-js": "^2.1.1",
+    "chroma-js": "^2.4.2",
     "css-loader": "^1.0.1",
     "echarts": "^4.9.0",
     "expose-loader": "^0.7.5",
     "font-awesome": "4.7.0",
     "glyphicons-halflings": "^1.9.1",
     "highcharts": "^7.2.2",
-    "highcharts-vue": "^1.3.5",
+    "highcharts-vue": "^1.4.0",
     "imports-loader": "^0.8.0",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "1.3.0",
-    "mavon-editor": "^2.9.1",
-    "moment": "^2.29.1",
+    "mavon-editor": "^2.10.4",
+    "moment": "^2.29.4",
     "node-sass": "^4.14.1",
     "rickshaw": "1.7.1",
     "sass-loader": "^7.3.1",
     "skycons": "^1.0.0",
-    "v-calendar": "^1.0.8",
+    "v-calendar": "^1.1.1",
     "v-mask": "^1.3.4",
     "vee-validate": "^2.2.15",
-    "vue": "^2.6.12",
-    "vue-apexcharts": "^1.6.1",
+    "vue": "^2.7.6",
+    "vue-apexcharts": "^1.6.2",
     "vue-bootstrap-slider": "2.1.8",
     "vue-carousel": "^0.18.0",
     "vue-chartjs": "^3.5.1",
-    "vue-code-highlight": "^0.7.6",
+    "vue-code-highlight": "^0.7.8",
     "vue-color": "^2.8.1",
     "vue-draggable-nested-tree": "^2.2.20",
     "vue-echarts": "^4.1.0",
     "vue-form-wizard": "^0.8.4",
     "vue-gallery": "^1.5.0",
     "vue-input-tag": "^2.0.7",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.4",
     "vue-select": "^2.6.4",
     "vue-tables-2": "^1.6.25",
     "vue-textarea-autosize": "^1.1.1",

src/styles/_mixins.scss

@@ -96,3 +96,105 @@
     background-color: $color;
   }
 }
+
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+//
+// Originally added during our alphas and maintained during betas, this mixin was
+// designed to prevent `:hover` stickiness on iOS-an issue where hover styles
+// would persist after initial touch.
+//
+// For backward compatibility, we've kept these mixins and updated them to
+// always return their regular pseudo-classes instead of a shimmed media query.
+//
+// Issue: https://github.com/twbs/bootstrap/issues/25195
+
+@mixin hover() {
+  &:hover { @content; }
+}
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin plain-hover-focus() {
+  &,
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin hover-focus-active() {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}
+
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    color: $color !important;
+  }
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus() {
+        color: shade-color($color, $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+  //@include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
+}
+
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    :hover, :focus {
+      background-color: shade-color($color, 10) !important;
+    }
+  }
+  //@include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+  //@include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
+}
+
+@mixin badge-variant($bg) {
+  color: color-contrast($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-contrast($bg);
+      background-color: ($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
+  }
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}

src/styles/_variables.scss

@@ -227,3 +227,9 @@ $padding-small-horizontal:  0.75rem !default;
 // -------------------------
 
 $screen-lg-height: 670px !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$hr-border-color:             rgba($black, .1) !default;
+$table-cell-padding:          .75rem !default;
+$emphasized-link-hover-darken-percentage: 15% !default;
+$badge-focus-width:          .2rem !default;