Merge pull request #5800 from aignatov-bio/ai-sci-8847-upgrade-to-vue-3

Initial upgrade to VUE 3 [SCI-8847]
2024-09-21 15:36:22 +08:00 · 2023-10-24 13:46:11 +02:00 · 2023-10-24 13:46:11 +02:00 · 6db2da292f
parent 040379039f 1dd178fb4d
commit 6db2da292f
21 changed files with 320 additions and 349 deletions
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@ -1,20 +1,16 @@
 /* global notTurbolinksPreview */

 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ActionToolbar from '../../vue/components/action_toolbar.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 window.initActionToolbar = () => {
  if (window.actionToolbarComponent) return;
  if (notTurbolinksPreview()) {
-    new Vue({
-      el: '#actionToolbar',
-      components: {
-        ActionToolbar
-      }
-    });
+    const app = createApp({});
+    app.component('ActionToolbar', ActionToolbar);
+    app.use(TurbolinksAdapter);
+    app.config.globalProperties.i18n = window.I18n;
+    app.mount('#actionToolbar');
  }
 }
--- a/app/javascript/packs/vue/assign_items_to_task_modal.js
+++ b/app/javascript/packs/vue/assign_items_to_task_modal.js
@ -1,22 +1,13 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import AssignItemsToTaskModalContainer from '../../vue/assign_items_to_tasks_modal/container.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-
-Vue.use(TurbolinksAdapter);
-Vue.use(PerfectScrollbar);
-Vue.prototype.i18n = window.I18n;

 function initAssignItemsToTaskModalComponent() {
  const container = $('.assign-items-to-task-modal-container');
  if (container.length) {
-    window.AssignItemsToTaskModalComponentContainer = new Vue({
-      el: '.assign-items-to-task-modal-container',
-      name: 'AssignItemsToTaskModalComponent',
-      components: {
-        'assign-items-to-task-modal-container': AssignItemsToTaskModalContainer
-      },
+    const app = createApp({
      data() {
        return {
          visibility: false,
@ -39,6 +30,13 @@ function initAssignItemsToTaskModalComponent() {
        }
      }
    });
+    app.component('AssignItemsToTaskModalContainer', AssignItemsToTaskModalContainer);
+    app.use(TurbolinksAdapter);
+    app.use(PerfectScrollbar);
+    app.config.globalProperties.i18n = window.I18n;
+    app.mount('.assign-items-to-task-modal-container');
+
+    window.AssignItemsToTaskModalComponentContainer = app;
  }
 }

--- a/app/javascript/packs/vue/export_stock_consumption_modal.js
+++ b/app/javascript/packs/vue/export_stock_consumption_modal.js
@ -1,21 +1,17 @@
 /* global notTurbolinksPreview */

 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ExportStockConsumptionModal from '../../vue/repository_row/export_stock_consumption_modal.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 window.initExportStockConsumptionModal = () => {
  if (window.exportStockConsumptionModalComponent) return;

  if (notTurbolinksPreview()) {
-    new Vue({
-      el: '#exportStockConsumtionModal',
-      components: {
-        ExportStockConsumptionModal,
-      },
-    });
+    const app = createApp({});
+    app.component('ExportStockConsumptionModal', ExportStockConsumptionModal);
+    app.use(TurbolinksAdapter);
+    app.config.globalProperties.i18n = window.I18n;
+    app.mount('#exportStockConsumtionModal');
  }
 };
--- a/app/javascript/packs/vue/label_template.js
+++ b/app/javascript/packs/vue/label_template.js
@ -1,17 +1,9 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import LabelTemplateContainer from '../../vue/label_template/container.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 window.initLabelTemplateComponent = () => {
-
-  new Vue({
-    el: '#labelTemplateContainer',
-    components: {
-      'label-template-container': LabelTemplateContainer
-    },
+  const app = createApp({
    data() {
      return {
        labelTemplateUrl: $('#labelTemplateContainer').data('label-template-url'),
@ -21,6 +13,10 @@ window.initLabelTemplateComponent = () => {
      };
    }
  });
+  app.component('LabelTemplateContainer', LabelTemplateContainer);
+  app.use(TurbolinksAdapter);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#labelTemplateContainer');
 };

 initLabelTemplateComponent();
--- a/app/javascript/packs/vue/navigation/breadcrumbs.js
+++ b/app/javascript/packs/vue/navigation/breadcrumbs.js
@ -1,17 +1,14 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import Breadcrumbs from '../../../vue/navigation/breadcrumbs/breadcrumbs.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';

-Vue.use(TurbolinksAdapter);
-Vue.use(PerfectScrollbar);
-Vue.prototype.i18n = window.I18n;

-window.breadcrumbsComponent = new Vue({
-  el: '#breadcrumbs',
-  name: 'BreadcrumbsContainer',
-  components: {
-    breadcrumbs: Breadcrumbs
-  }
-});
+const app = createApp({});
+app.component('Breadcrumbs', Breadcrumbs);
+app.use(PerfectScrollbar);
+app.use(TurbolinksAdapter);
+app.config.globalProperties.i18n = window.I18n;
+app.mount('#breadcrumbs');
+window.breadcrumbsComponent = app;
--- a/app/javascript/packs/vue/navigation/navigator.js
+++ b/app/javascript/packs/vue/navigation/navigator.js
@ -1,19 +1,10 @@
-
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import NavigatorContainer from '../../../vue/navigation/navigator.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-
-Vue.use(PerfectScrollbar);
-
-Vue.prototype.i18n = window.I18n;

 function addNavigationNavigatorContainer() {
-  let navigator = new Vue({
-    el: '#sciNavigationNavigatorContainer',
-    components: {
-      'navigator-container': NavigatorContainer
-    },
+  const app = createApp({
    data() {
      return {
        reloadCurrentLevel: false,
@ -53,8 +44,12 @@ function addNavigationNavigatorContainer() {
      }
    }
  });
+  app.component('NavigatorContainer', NavigatorContainer);
+  app.use(PerfectScrollbar);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#sciNavigationNavigatorContainer');

-  window.navigatorContainer = navigator
+  window.navigatorContainer = app;
 }

 if (document.readyState !== 'loading') {
--- a/app/javascript/packs/vue/navigation/top_menu.js
+++ b/app/javascript/packs/vue/navigation/top_menu.js
@ -1,21 +1,16 @@
-
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import TopMenuContainer from '../../../vue/navigation/top_menu.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
 import outsideClick from '../directives/outside_click';

-Vue.use(PerfectScrollbar);
-Vue.directive('click-outside', outsideClick);
-Vue.prototype.i18n = window.I18n;
-
 function addNavigationTopMenuContainer() {
-  new Vue({
-    el: '#sciNavigationTopMenuContainer',
-    components: {
-      'top-menu-container': TopMenuContainer
-    }
-  });
+  const app = createApp({});
+  app.component('TopMenuContainer', TopMenuContainer);
+  app.use(PerfectScrollbar);
+  app.directive('click-outside', outsideClick);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#sciNavigationTopMenuContainer');
 }

 if (document.readyState !== 'loading') {
--- a/app/javascript/packs/vue/open_vector_editor.js
+++ b/app/javascript/packs/vue/open_vector_editor.js
@ -1,11 +1,9 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import OpenVectorEditor from '../../vue/ove/OpenVectorEditor.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
-new Vue({
-  el: '#open-vector-editor',
-  components: { OpenVectorEditor }
-});
+const app = createApp({});
+app.component('OpenVectorEditor', OpenVectorEditor);
+app.use(TurbolinksAdapter);
+app.config.globalProperties.i18n = window.I18n;
+app.mount('#open-vector-editor');
--- a/app/javascript/packs/vue/protocol.js
+++ b/app/javascript/packs/vue/protocol.js
@ -1,21 +1,28 @@
 /* global HelperModule */

 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolContainer from '../../vue/protocol/container.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
 import outsideClick from './directives/outside_click';

-
-Vue.use(PerfectScrollbar);
-Vue.use(TurbolinksAdapter);
-Vue.directive('click-outside', outsideClick);
-Vue.prototype.i18n = window.I18n;
-Vue.prototype.inlineEditing = window.inlineEditing;
-Vue.prototype.ActiveStoragePreviews = window.ActiveStoragePreviews;
-
 window.initProtocolComponent = () => {
-  Vue.prototype.dateFormat = $('#protocolContainer').data('date-format');
+  const app = createApp({
+    data() {
+      return {
+        protocolUrl: $('#protocolContainer').data('protocol-url'),
+      };
+    },
+  });
+  app.component('ProtocolContainer', ProtocolContainer);
+  app.use(PerfectScrollbar);
+  app.use(TurbolinksAdapter);
+  app.directive('click-outside', outsideClick);
+  app.config.globalProperties.i18n = window.I18n;
+  app.config.globalProperties.inlineEditing = window.inlineEditing;
+  app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
+  app.config.globalProperties.dateFormat = $('#protocolContainer').data('date-format');
+  app.mount('#protocolContainer');

  $('.protocols-show').on('click', '#protocol-versions-modal .delete-draft', (e) => {
    const url = e.currentTarget.dataset.url;
@ -28,18 +35,6 @@ window.initProtocolComponent = () => {
  $('#deleteDraftModal form').on('ajax:error', function(_ev, data) {
    HelperModule.flashAlertMsg(data.responseJSON.message, 'danger');
  });
-
-  new Vue({
-    el: '#protocolContainer',
-    components: {
-      'protocol-container': ProtocolContainer
-    },
-    data() {
-      return {
-        protocolUrl: $('#protocolContainer').data('protocol-url')
-      };
-    }
-  });
 };

 initProtocolComponent();
--- a/app/javascript/packs/vue/protocol_file_import_modal.js
+++ b/app/javascript/packs/vue/protocol_file_import_modal.js
@ -1,18 +1,13 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import ProtocolFileImportModal from '../../vue/protocol_import/file_import_modal.vue';

-
-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 window.initProtocolFileImportModalComponent = () => {
-  new Vue({
-    el: '#protocolFileImportModal',
-    components: {
-      'protocol-file-import-modal': ProtocolFileImportModal
-    }
-  });
+  const app = createApp({});
+  app.component('ProtocolFileImportModal', ProtocolFileImportModal);
+  app.use(TurbolinksAdapter);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#protocolFileImportModal');
 };

 initProtocolFileImportModalComponent();
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@ -1,12 +1,9 @@
 /* global I18n */

 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import FilterContainer from '../../vue/repository_filter/container.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 const DEFAULT_FILTERS = [
  {
    id: 1,
@ -62,7 +59,6 @@ const DEFAULT_FILTERS = [

 window.repositoryFilterObject = null;
 window.initRepositoryFilter = () => {
-  Vue.prototype.dateFormat = $('#filterContainer').data('date-format')
  const defaultColumns = [
    { id: 'assigned', name: I18n.t('repositories.table.assigned_tasks'), data_type: 'RepositoryMyModuleValue' },
    { id: 'row_id', name: I18n.t('repositories.table.id'), data_type: 'RepositoryTextValue' },
@ -72,8 +68,7 @@ window.initRepositoryFilter = () => {
    { id: 'archived_by', name: I18n.t('repositories.table.archived_by'), data_type: 'RepositoryUserValue' },
    { id: 'archived_on', name: I18n.t('repositories.table.archived_on'), data_type: 'RepositoryDateTimeValue' }
  ];
-  const repositoryFilterContainer = new Vue({
-    el: '#filterContainer',
+  const app = createApp({
    data: () => ({
      filters: [],
      defaultFilters: DEFAULT_FILTERS,
@ -86,10 +81,6 @@ window.initRepositoryFilter = () => {
    created() {
      this.dataTableElement = $($('#filterContainer').data('datatable-id'));
    },
-
-    components: {
-      'filter-container': FilterContainer
-    },
    computed: {
      filtersJSON() {
        return this.filters.filter((f) => !f.isBlank).map((f) => ({
@ -143,6 +134,12 @@ window.initRepositoryFilter = () => {
      }
    }
  });
+  app.component('FilterContainer', FilterContainer);
+  app.use(TurbolinksAdapter);
+  app.config.globalProperties.i18n = window.I18n;
+  app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
+  app.mount('#filterContainer');
+  const repositoryFilterContainer = app;

  $.get($('#filterContainer').data('my-modules-url'), (data) => {
    repositoryFilterContainer.my_modules = data.data;
--- a/app/javascript/packs/vue/repository_item_sidebar.js
+++ b/app/javascript/packs/vue/repository_item_sidebar.js
@ -1,19 +1,16 @@
 /* global notTurbolinksPreview */

 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;

 function initRepositoryItemSidebar() {
-  new Vue({
-    el: '#repositoryItemSidebar',
-    components: {
-      RepositoryItemSidebar
-    }
-  });
+  const app = createApp({});
+  app.component('RepositoryItemSidebar', RepositoryItemSidebar);
+  app.use(TurbolinksAdapter);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#repositoryItemSidebar');
 }

 initRepositoryItemSidebar();
--- a/app/javascript/packs/vue/repository_print_modal.js
+++ b/app/javascript/packs/vue/repository_print_modal.js
@ -1,19 +1,11 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import PrintModalContainer from '../../vue/repository_print_modal/container.vue';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-
 function initPrintModalComponent() {
  const container = $('.print-label-modal-container');
  if (container.length) {
-    window.PrintModalComponent = new Vue({
-      el: '.print-label-modal-container',
-      name: 'PrintModalComponent',
-      components: {
-        'print-modal-container': PrintModalContainer
-      },
+    const app = createApp({
      data() {
        return {
          showModal: false,
@ -36,6 +28,11 @@ function initPrintModalComponent() {
        }
      }
    });
+    app.component('PrintModalContainer', PrintModalContainer);
+    app.use(TurbolinksAdapter);
+    app.config.globalProperties.i18n = window.I18n;
+    app.mount('.print-label-modal-container');
+    window.PrintModalComponent = app;
  }
 }

--- a/app/javascript/packs/vue/repository_search.js
+++ b/app/javascript/packs/vue/repository_search.js
@ -1,18 +1,15 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import RepositorySearchContainer from '../../vue/repository_search/container.vue';
 import outsideClick from './directives/outside_click';

-Vue.use(TurbolinksAdapter);
-Vue.prototype.i18n = window.I18n;
-Vue.directive('click-outside', outsideClick);
-
 window.initRepositorySearch = () => {
-  window.RepositorySearchComponent = new Vue({
-    el: '#inventorySearchComponent',
-    name: 'RepositorySearchComponent',
-    components: {
-      'repository_search_container': RepositorySearchContainer
-    }
-  });
+  const app = createApp({});
+  app.component('RepositorySearchContainer', RepositorySearchContainer);
+  app.use(TurbolinksAdapter);
+  app.directive('click-outside', outsideClick);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('#inventorySearchComponent');
+
+  window.RepositorySearchComponent = app;
 }
--- a/app/javascript/packs/vue/results.js
+++ b/app/javascript/packs/vue/results.js
@ -1,19 +1,14 @@
 import TurbolinksAdapter from 'vue-turbolinks';
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import Results from '../../vue/results/results.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
 import outsideClick from './directives/outside_click';

-
-Vue.use(PerfectScrollbar);
-Vue.use(TurbolinksAdapter);
-Vue.directive('click-outside', outsideClick);
-Vue.prototype.i18n = window.I18n;
-Vue.prototype.ActiveStoragePreviews = window.ActiveStoragePreviews;
-
-new Vue({
-  el: '#results',
-  components: {
-    Results
-  }
-});
+const app = createApp({});
+app.component('Results', Results);
+app.use(TurbolinksAdapter);
+app.use(PerfectScrollbar);
+app.directive('click-outside', outsideClick);
+app.config.globalProperties.i18n = window.I18n;
+app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
+app.mount('#results');
--- a/app/javascript/packs/vue/share_task_container.js
+++ b/app/javascript/packs/vue/share_task_container.js
@ -1,20 +1,14 @@
-import Vue from 'vue/dist/vue.esm';
+import PerfectScrollbar from 'vue3-perfect-scrollbar';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
 import ShareLinkContainer from '../../vue/shareable_links/container.vue';
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-
-
-Vue.use(PerfectScrollbar);
-
-Vue.prototype.i18n = window.I18n;

 function initShareTaskContainer() {
-  new Vue({
-    el: '.share-task-container',
-    components: {
-      'share-task-container': ShareLinkContainer
-    }
-  });
+  const app = createApp({});
+  app.component('ShareLinkContainer', ShareLinkContainer);
+  app.use(PerfectScrollbar);
+  app.config.globalProperties.i18n = window.I18n;
+  app.mount('.share-task-container');
 }

 initShareTaskContainer();
--- a/app/javascript/vue/navigation/breadcrumbs/breadcrumbs_dropdown.vue
+++ b/app/javascript/vue/navigation/breadcrumbs/breadcrumbs_dropdown.vue
@ -38,7 +38,7 @@
 </template>

 <script>
-import { PerfectScrollbar } from 'vue2-perfect-scrollbar';
+import { PerfectScrollbar } from 'vue3-perfect-scrollbar';

 export default {
  name: "BreadcrumbsDropdown",
--- a/app/javascript/vue/protocol_import/file_import_modal.vue
+++ b/app/javascript/vue/protocol_import/file_import_modal.vue
@ -88,8 +88,6 @@
        $.get(`/jobs/${this.jobId}/status`, (data) => {
          let status = data.status;

-          console.log(data)
-
          switch (status) {
            case 'pending':
              break;
--- a/app/javascript/vue/shared/select.vue
+++ b/app/javascript/vue/shared/select.vue
@ -36,7 +36,6 @@
  </div>
 </template>
 <script>
-  import PerfectScrollbar from 'vue2-perfect-scrollbar';
  import outsideClick from '../../packs/vue/directives/outside_click';

  export default {
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@joeattardi/emoji-button": "^4.6.2",
    "@teselagen/ove": "^0.3.23",
+    "@vue/compiler-sfc": "^3.3.4",
    "ajv": "6.12.6",
    "autoprefixer": "10.4.14",
    "axios": "^1.4.0",
@ -76,12 +77,10 @@
    "tui-color-picker": "^2.2.0",
    "tui-image-editor": "github:scinote-eln/tui.image-editor#3_15_2_updated",
    "twemoji": "^12.1.4",
-    "vue": "^2.6.11",
-    "vue-loader": "^15.9.1",
-    "vue-template-compiler": "^2.6.12",
+    "vue": "^3.3.4",
+    "vue-loader": "^16.0.0",
    "vue-turbolinks": "^2.2.1",
-    "vue2-perfect-scrollbar": "^1.5.56",
-    "vue2-scrollspy": "^2.3.1",
+    "vue3-perfect-scrollbar": "^1.6.1",
    "vuedraggable": "^2.24.3",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.10.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -321,7 +321,12 @@
    chalk "^2.4.2"
    js-tokens "^4.0.0"

-"@babel/parser@^7.18.4", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
+"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
+  version "7.22.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
+  integrity sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==
+
+"@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
  version "7.21.4"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
  integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
@ -1218,6 +1223,11 @@
  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==

+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
  version "0.3.17"
  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
@ -1506,11 +1516,6 @@
  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
  integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==

-"@tweenjs/tween.js@^17.2.0":
-  version "17.6.0"
-  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-17.6.0.tgz#61bc86c372bcc5a9f744e661dd6ae16f5ee7d0ef"
-  integrity sha512-utSXj0WHi4qr/iyfFHGMJBaL+ixQ2N7BAmx1R5g8jBqykJfjBUQ0hKWwXf767hbALC3zOoOIofKYSDWu5n04JQ==
-
 "@types/debug@^4.0.0":
  version "4.1.8"
  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@ -1632,30 +1637,95 @@
  dependencies:
    "@use-gesture/core" "10.2.27"

-"@vue/compiler-sfc@2.7.14":
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
-  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
  dependencies:
-    "@babel/parser" "^7.18.4"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"

-"@vue/component-compiler-utils@^3.1.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
-  integrity sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
  dependencies:
-    consolidate "^0.15.1"
-    hash-sum "^1.0.2"
-    lru-cache "^4.1.2"
-    merge-source-map "^1.1.0"
-    postcss "^7.0.36"
-    postcss-selector-parser "^6.0.2"
-    source-map "~0.6.1"
-    vue-template-es2015-compiler "^1.9.0"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+    postcss "^8.1.10"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+  dependencies:
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+  dependencies:
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+  dependencies:
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    csstype "^3.1.1"
+
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
+
+"@vue/shared@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==

 "@webassemblyjs/ast@1.11.1":
  version "1.11.1"
@ -1925,6 +1995,13 @@ ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
 ansis@1.5.2:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/ansis/-/ansis-1.5.2.tgz#c9bada6ff5dd88b0b979ab8df0b51096b9dda4bb"
@ -2129,7 +2206,7 @@ babel-plugin-polyfill-regenerator@^0.4.1:
  dependencies:
    "@babel/helper-define-polyfill-provider" "^0.3.3"

-babel-runtime@^6.11.6, babel-runtime@^6.26.0:
+babel-runtime@^6.11.6:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
@ -2181,7 +2258,7 @@ bl@^4.0.3:
    inherits "^2.0.4"
    readable-stream "^3.4.0"

-bluebird@3.7.2, bluebird@^3.1.1, bluebird@^3.7.2:
+bluebird@3.7.2, bluebird@^3.7.2:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@ -2440,6 +2517,14 @@ chalk@^2.3.0, chalk@^2.4.2:
    escape-string-regexp "^1.0.5"
    supports-color "^5.3.0"

+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-emitter@^0.1.2:
  version "0.1.6"
  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@ -2644,13 +2729,6 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==

-consolidate@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
-  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
-  dependencies:
-    bluebird "^3.1.1"
-
 constants-browserify@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@ -2913,16 +2991,11 @@ cssstyle@^2.3.0:
  dependencies:
    cssom "~0.3.6"

-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.1.1:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

-csstype@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
-  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
-
 data-urls@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@ -2937,11 +3010,6 @@ dayjs@^1.10.4:
  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a"
  integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==

-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-
 debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.3:
  version "4.3.4"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@ -3299,6 +3367,11 @@ estraverse@^5.2.0:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==

+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@ -3708,10 +3781,10 @@ hash-base@^3.0.0:
    readable-stream "^3.6.0"
    safe-buffer "^5.2.0"

-hash-sum@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
-  integrity sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==

 hash.js@^1.0.0, hash.js@^1.0.3:
  version "1.1.7"
@ -3726,11 +3799,6 @@ hast-util-whitespace@^2.0.0:
  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
  integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==

-he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 history@^4.7.2:
  version "4.10.1"
  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@ -4357,7 +4425,7 @@ loader-runner@^4.2.0:
  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==

-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.1.0:
  version "1.4.2"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
  integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
@ -4444,14 +4512,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
  dependencies:
    js-tokens "^3.0.0 || ^4.0.0"

-lru-cache@^4.1.2:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
-  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
-  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
-
 lru-cache@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@ -4471,6 +4531,13 @@ lru-cache@^7.7.1:
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==

+magic-string@^0.30.0:
+  version "0.30.1"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.1.tgz#ce5cd4b0a81a5d032bd69aab4522299b2166284d"
+  integrity sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@ -4680,13 +4747,6 @@ memoize-one@^6.0.0:
  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==

-merge-source-map@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
-  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
-  dependencies:
-    source-map "^0.6.1"
-
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -5154,7 +5214,7 @@ nanoid@^2.1.0:
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==

-nanoid@^3.3.6:
+nanoid@^3.3.4, nanoid@^3.3.6:
  version "3.3.6"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
@ -5806,7 +5866,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

-postcss@8.4.31, postcss@^8.4.14, postcss@^8.4.19:
+postcss@8.4.31:
  version "8.4.31"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@ -5815,7 +5875,7 @@ postcss@8.4.31, postcss@^8.4.14, postcss@^8.4.19:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^7.0.1, postcss@^7.0.36:
+postcss@^7.0.1:
  version "7.0.39"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
@ -5823,6 +5883,24 @@ postcss@^7.0.1, postcss@^7.0.36:
    picocolors "^0.2.1"
    source-map "^0.6.1"

+postcss@^8.1.10:
+  version "8.4.26"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.26.tgz#1bc62ab19f8e1e5463d98cf74af39702a00a9e94"
+  integrity sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+postcss@^8.4.19:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@ -5833,11 +5911,6 @@ prettier@^1.13.7:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==

-"prettier@^1.18.2 || ^2.0.0":
-  version "2.8.7"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
-  integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
-
 process-nextick-args@~2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@ -5885,11 +5958,6 @@ prr@~1.0.1:
  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==

-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
-
 psl@^1.1.33:
  version "1.9.0"
  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@ -6817,6 +6885,13 @@ supports-color@^5.3.0:
  dependencies:
    has-flag "^3.0.0"

+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-color@^8.0.0:
  version "8.1.1"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
@ -7352,72 +7427,39 @@ vm-browserify@^1.1.2:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==

-vue-hot-reload-api@^2.3.0:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
-  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
-
-vue-loader@^15.9.1:
-  version "15.10.1"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.10.1.tgz#c451c4cd05a911aae7b5dbbbc09fb913fb3cca18"
-  integrity sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==
+vue-loader@^16.0.0:
+  version "16.8.3"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"
+  integrity sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==
  dependencies:
-    "@vue/component-compiler-utils" "^3.1.0"
-    hash-sum "^1.0.2"
-    loader-utils "^1.1.0"
-    vue-hot-reload-api "^2.3.0"
-    vue-style-loader "^4.1.0"
-
-vue-style-loader@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
-  integrity sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==
-  dependencies:
-    hash-sum "^1.0.2"
-    loader-utils "^1.0.2"
-
-vue-template-compiler@^2.6.12:
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
-  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
-vue-template-es2015-compiler@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
-  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
+    chalk "^4.1.0"
+    hash-sum "^2.0.0"
+    loader-utils "^2.0.0"

 vue-turbolinks@^2.2.1:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/vue-turbolinks/-/vue-turbolinks-2.2.2.tgz#6b7b5c4120f5586907ef977be4b63a734bf8cd36"
  integrity sha512-pPO2Fr+1UgdhUK9dc5OhjLSeYi5LZAm/VZBXOVQgLHCO31bRjAof/+W/e/6SHCbnb1xdZb1gW5T9MX0k9ejSAQ==

-vue2-perfect-scrollbar@^1.5.56:
-  version "1.5.56"
-  resolved "https://registry.yarnpkg.com/vue2-perfect-scrollbar/-/vue2-perfect-scrollbar-1.5.56.tgz#4aeef8d8894a26f2df3e08a71a637825d3a6ffd6"
-  integrity sha512-0ciZFj8kfMnsVkEi9BYf16HoybdN8bju8zj4Okwlrg9+rJp6i/PYXh+ZWsdeQn6jLDMi6CRSNEsaTsLPStIVHQ==
+vue3-perfect-scrollbar@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/vue3-perfect-scrollbar/-/vue3-perfect-scrollbar-1.6.1.tgz#296e0e0c61a8f6278184f5b09bb45d137af92327"
+  integrity sha512-r9wfxlFwVyHXMPKG0PnR7fDfJPQ20KEVzKQfSU5by2WKYz2PwV0bTfyfejmEyZXsXL0O8VtSWtgxfPuFR2AGOg==
  dependencies:
    cssnano "^5.1.14"
    perfect-scrollbar "^1.5.5"
    postcss-import "^12.0.0"

-vue2-scrollspy@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/vue2-scrollspy/-/vue2-scrollspy-2.3.1.tgz#7a2aba7ea53e020cdd47851c56594a41731e88f4"
-  integrity sha512-nynFYH9zwfXHfhopQyFT6uxe8Vgz9c46/NibJzI24h8FAHBnlzEe9EXNhUy+wcfr+BEa4Q22V5GvnigTtbmPaQ==
+vue@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
  dependencies:
-    "@tweenjs/tween.js" "^17.2.0"
-    babel-runtime "^6.26.0"
-
-vue@^2.6.11:
-  version "2.7.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
-  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
-  dependencies:
-    "@vue/compiler-sfc" "2.7.14"
-    csstype "^3.1.0"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"

 vuedraggable@^2.24.3:
  version "2.24.3"
@ -7666,11 +7708,6 @@ xtend@^4.0.1, xtend@^4.0.2:
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
-  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
-
 yallist@^3.0.2:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"