From 1d2aa3387d6a9762817060109ceb30d7d038b60b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 04:32:20 +0100
Subject: [PATCH 01/30] migration: remove @vue/compat + update to vue 3.4.21

---
 app/package.json                              |  3 +--
 app/src/App.vue                               |  1 -
 app/src/components/AdressInputSelect.vue      |  1 -
 app/src/components/CardCollapse.vue           |  1 -
 app/src/components/CardDeckFeed.vue           |  1 -
 app/src/components/ConfigPanel.vue            |  1 -
 app/src/components/ConfigPanels.vue           |  1 -
 app/src/components/LazyRenderer.vue           |  1 -
 app/src/components/MessageListGroup.vue       |  1 -
 app/src/components/QueryHeader.vue            |  1 -
 app/src/components/RecursiveListGroup.vue     |  1 -
 app/src/components/RoutableTabs.vue           |  1 -
 app/src/components/globals/AbstractForm.vue   |  1 -
 app/src/components/globals/CardForm.vue       |  1 -
 app/src/components/globals/DescriptionRow.vue |  1 -
 app/src/components/globals/ExplainWhat.vue    |  1 -
 app/src/components/globals/FormField.vue      |  1 -
 app/src/components/globals/ReadOnlyField.vue  |  1 -
 app/src/components/globals/TopBar.vue         |  1 -
 app/src/components/globals/ViewBase.vue       |  1 -
 app/src/components/globals/ViewSearch.vue     |  1 -
 app/src/components/globals/YAlert.vue         |  1 -
 app/src/components/globals/YBreadcrumb.vue    |  1 -
 app/src/components/globals/YCard.vue          |  1 -
 app/src/components/globals/YIcon.vue          |  1 -
 app/src/components/globals/YListGroupItem.vue |  1 -
 app/src/components/globals/YSpinner.vue       |  1 -
 .../globals/formItems/ButtonItem.vue          |  1 -
 .../globals/formItems/CheckboxItem.vue        |  1 -
 .../globals/formItems/DisplayTextItem.vue     |  1 -
 .../components/globals/formItems/FileItem.vue |  1 -
 .../globals/formItems/InputItem.vue           |  1 -
 .../globals/formItems/MarkdownItem.vue        |  1 -
 .../globals/formItems/ReadOnlyAlertItem.vue   |  1 -
 .../globals/formItems/SelectItem.vue          |  1 -
 .../components/globals/formItems/TagsItem.vue |  1 -
 .../globals/formItems/TagsSelectizeItem.vue   |  1 -
 .../globals/formItems/TextAreaItem.vue        |  1 -
 .../globals/skeletons/CardButtonsSkeleton.vue |  1 -
 .../globals/skeletons/CardFormSkeleton.vue    |  1 -
 .../globals/skeletons/CardInfoSkeleton.vue    |  1 -
 .../globals/skeletons/CardListSkeleton.vue    |  1 -
 .../globals/skeletons/ListGroupSkeleton.vue   |  1 -
 app/src/main.js                               | 27 +------------------
 app/src/views/HomeView.vue                    |  1 -
 app/src/views/LoginView.vue                   |  1 -
 app/src/views/PostInstall.vue                 |  1 -
 app/src/views/_partials/DomainForm.vue        |  1 -
 app/src/views/_partials/ErrorDisplay.vue      |  1 -
 app/src/views/_partials/HistoryConsole.vue    |  1 -
 .../views/_partials/ReconnectingDisplay.vue   |  1 -
 app/src/views/_partials/ViewLockOverlay.vue   |  1 -
 app/src/views/_partials/WaitingDisplay.vue    |  1 -
 app/src/views/_partials/WarningDisplay.vue    |  1 -
 app/src/views/app/AppCatalog.vue              |  1 -
 app/src/views/app/AppInfo.vue                 |  1 -
 app/src/views/app/AppInstall.vue              |  1 -
 app/src/views/app/AppList.vue                 |  1 -
 app/src/views/backup/BackupCreate.vue         |  1 -
 app/src/views/backup/BackupInfo.vue           |  1 -
 app/src/views/backup/BackupList.vue           |  1 -
 app/src/views/backup/BackupView.vue           |  1 -
 app/src/views/diagnosis/DiagnosisView.vue     |  1 -
 app/src/views/domain/DomainAdd.vue            |  1 -
 app/src/views/domain/DomainDns.vue            |  1 -
 app/src/views/domain/DomainInfo.vue           |  1 -
 app/src/views/domain/DomainList.vue           |  1 -
 app/src/views/group/GroupCreate.vue           |  1 -
 app/src/views/group/GroupList.vue             |  1 -
 app/src/views/service/ServiceInfo.vue         |  1 -
 app/src/views/service/ServiceList.vue         |  1 -
 app/src/views/tool/ToolFirewall.vue           |  1 -
 app/src/views/tool/ToolList.vue               |  1 -
 app/src/views/tool/ToolLog.vue                |  1 -
 app/src/views/tool/ToolLogs.vue               |  1 -
 app/src/views/tool/ToolMigrations.vue         |  1 -
 app/src/views/tool/ToolPower.vue              |  1 -
 app/src/views/tool/ToolSettings.vue           |  1 -
 app/src/views/tool/ToolWebadmin.vue           |  1 -
 app/src/views/update/SystemUpdate.vue         |  1 -
 app/src/views/user/UserCreate.vue             |  1 -
 app/src/views/user/UserEdit.vue               |  1 -
 app/src/views/user/UserImport.vue             |  1 -
 app/src/views/user/UserInfo.vue               |  1 -
 app/src/views/user/UserList.vue               |  1 -
 app/vite.config.js                            | 13 +--------
 86 files changed, 3 insertions(+), 123 deletions(-)

diff --git a/app/package.json b/app/package.json
index 49b3242f9..b61fa4b72 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,14 +15,13 @@
   "dependencies": {
     "@fontsource/fira-code": "^5.0.17",
     "@fontsource/firago": "^5.0.7",
-    "@vue/compat": "3.3.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "bootstrap-vue": "^2.23.1",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
-    "vue": "3.3.4",
+    "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^4.2.0",
diff --git a/app/src/App.vue b/app/src/App.vue
index 85985becf..42c5c8c29 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -101,7 +101,6 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index be5abd243..0a23f78c5 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ed70a418d..ef6471686 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -23,7 +23,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 752e139c6..e6bd4166d 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -5,7 +5,6 @@ import { h } from 'vue'
 import { BCardGroup } from 'bootstrap-vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 52a191afe..6220a6087 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -54,7 +54,6 @@
 import { filterObject } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanel',
 
   props: {
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index 4d531b2a7..e1ab25f22 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -32,7 +32,6 @@ import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,
diff --git a/app/src/components/LazyRenderer.vue b/app/src/components/LazyRenderer.vue
index b1b360af3..26b7b2097 100644
--- a/app/src/components/LazyRenderer.vue
+++ b/app/src/components/LazyRenderer.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LazyRenderer',
 
   props: {
diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
index dd62d721c..5b32d2126 100644
--- a/app/src/components/MessageListGroup.vue
+++ b/app/src/components/MessageListGroup.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MessageListGroup',
 
   props: {
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 38723aa54..321288bb5 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 415cdd30c..2e30a3dc6 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -45,7 +45,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RecursiveListGroup',
 
   props: {
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 707c3cbf5..1fa13bbe4 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'RoutableTabs',
 
   // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index e117c54ab..767fc9f2f 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -32,7 +32,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AbstractForm',
 
   props: {
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index b28d60f60..16e8d0adc 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -37,7 +37,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardForm',
 
   props: {
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index ec986a2f4..e7265c3df 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DescriptionRow',
 
   props: {
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 37c114d09..411bcdd79 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ExplainWhat',
 
   props: {
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 724e34dd3..bba49ece6 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FormField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index f22d08ac5..39949a728 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyField',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 7f0379c37..171eaed2e 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TopBar',
 
   props: {
diff --git a/app/src/components/globals/ViewBase.vue b/app/src/components/globals/ViewBase.vue
index dbc79d422..f1c696848 100644
--- a/app/src/components/globals/ViewBase.vue
+++ b/app/src/components/globals/ViewBase.vue
@@ -33,7 +33,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewBase',
 
   props: {
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 0fa71d2f1..cd2d7f068 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -57,7 +57,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3, INSTANCE_LISTENERS: false },
   name: 'ViewSearch',
 
   props: {
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 8d69995b5..5cc9a8533 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -18,7 +18,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YAlert',
 
   props: {
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 2a74e6839..858708a8e 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -20,7 +20,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YBreadcrumb',
 
   computed: {
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index 1f730810c..edf6c5b54 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -56,7 +56,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YCard',
 
   props: {
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 447f7ccfa..15fbcc8ce 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -7,7 +7,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YIcon',
   props: {
     iname: { type: String, required: true },
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 2d602ae5a..cf2cc82ab 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -14,7 +14,6 @@
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YListGroupItem',
 
   props: {
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 16ea4019e..388e80d57 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -6,7 +6,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'YSpinner',
 
   computed: {
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 42541441f..5bd09ad99 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ButtonItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 4753ab0db..8eb1b0319 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CheckboxItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/DisplayTextItem.vue b/app/src/components/globals/formItems/DisplayTextItem.vue
index e83740c22..3b85983ce 100644
--- a/app/src/components/globals/formItems/DisplayTextItem.vue
+++ b/app/src/components/globals/formItems/DisplayTextItem.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DisplayTextItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 4a4a4fa93..18a4ea533 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -30,7 +30,6 @@
 import { getFileContent } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'FileItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index de6d13dbb..752381247 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -18,7 +18,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'InputItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/MarkdownItem.vue b/app/src/components/globals/formItems/MarkdownItem.vue
index 9347c78e8..8f9501688 100644
--- a/app/src/components/globals/formItems/MarkdownItem.vue
+++ b/app/src/components/globals/formItems/MarkdownItem.vue
@@ -4,7 +4,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'MarkdownItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index c825da6f2..aa70ea26c 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -12,7 +12,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReadOnlyAlertItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 581c40dbb..f47a76f91 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -11,7 +11,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SelectItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index abccf055d..55dbdf29f 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
   props: {
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index ef23f8bde..b809c6604 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -93,7 +93,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TagsSelectizeItem',
 
   inheritAttrs: false,
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index f20c9ac21..7659026f3 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'TextAreaItem',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
index 0e64374ba..cd05d93b5 100644
--- a/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardButtonsSkeleton.vue
@@ -21,7 +21,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardButtonsSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 5ea6c9f9e..4cf810cfe 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -47,7 +47,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardFormSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardInfoSkeleton.vue b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
index 59cf82c31..7a5435ae6 100644
--- a/app/src/components/globals/skeletons/CardInfoSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardInfoSkeleton.vue
@@ -19,7 +19,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardInfoSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index bf1ed6e5f..0726603b7 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -23,7 +23,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardListSkeleton',
 
   props: {
diff --git a/app/src/components/globals/skeletons/ListGroupSkeleton.vue b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
index 41a381ad3..0f638d3ef 100644
--- a/app/src/components/globals/skeletons/ListGroupSkeleton.vue
+++ b/app/src/components/globals/skeletons/ListGroupSkeleton.vue
@@ -11,7 +11,6 @@
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ListGroupSkeleton',
 
   props: {
diff --git a/app/src/main.js b/app/src/main.js
index e99b41dd6..c6bd4686d 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,4 +1,4 @@
-import { createApp, configureCompat } from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import { VueShowdownPlugin } from 'vue-showdown'
@@ -18,31 +18,6 @@ app.use(store)
 app.use(router)
 app.use(i18n)
 
-configureCompat({
-  MODE: 2,
-  // warnings we can do something about should be fixed
-  // next warnings are suppressed because those come from bootstrap-vue (vue2)
-  INSTANCE_EVENT_EMITTER: 'suppress-warning',
-  COMPONENT_FUNCTIONAL: 'suppress-warning',
-  RENDER_FUNCTION: 'suppress-warning',
-  GLOBAL_EXTEND: 'suppress-warning',
-  GLOBAL_MOUNT: 'suppress-warning',
-  WATCH_ARRAY: 'suppress-warning',
-  GLOBAL_PROTOTYPE: 'suppress-warning',
-  INSTANCE_SCOPED_SLOTS: 'suppress-warning',
-  INSTANCE_LISTENERS: 'suppress-warning',
-  OPTIONS_DATA_MERGE: 'suppress-warning',
-  OPTIONS_BEFORE_DESTROY: 'suppress-warning',
-  INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
-  CUSTOM_DIR: 'suppress-warning',
-  // TODO
-  // ATTR_FALSE_VALUE: 'suppress-warning',
-  // ATTR_ENUMERATED_COERCION
-  // ATTR_FALSE_VALUE
-  // COMPONENT_V_MODEL: 'suppress-warning',
-  // COMPILER_V_BIND_SYNC
-})
-
 // Styles are imported in `src/App.vue` <style>
 app.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index e9a4c4606..ae303438d 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -16,7 +16,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HomeView',
 
   data() {
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index 79a5095c7..a05bb1975 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -39,7 +39,6 @@ import { useVuelidate } from '@vuelidate/core'
 import { alphalownumdot_, required, minLength } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'LoginView',
 
   props: {
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 145ae58d1..8b1e92e01 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -104,7 +104,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'PostInstall',
 
   components: {
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 20f245f2c..3ede67f63 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -129,7 +129,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainForm',
 
   props: {
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index 1bfa0c51e..fd11eea02 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -54,7 +54,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ErrorDisplay',
 
   components: {
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 725797c82..022fc0d03 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -94,7 +94,6 @@ import QueryHeader from '@/components/QueryHeader.vue'
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'HistoryConsole',
 
   components: {
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index acbf7dee5..65e94c4a4 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -43,7 +43,6 @@ import api from '@/api'
 import LoginView from '@/views/LoginView.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ReconnectingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index f1b3dc464..8450b12fd 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -30,7 +30,6 @@ import {
 import QueryHeader from '@/components/QueryHeader.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ViewLockOverlay',
 
   components: {
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index 89d9d821a..baee407db 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -30,7 +30,6 @@
 import MessageListGroup from '@/components/MessageListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WaitingDisplay',
 
   components: {
diff --git a/app/src/views/_partials/WarningDisplay.vue b/app/src/views/_partials/WarningDisplay.vue
index 000b9a96a..62360d187 100644
--- a/app/src/views/_partials/WarningDisplay.vue
+++ b/app/src/views/_partials/WarningDisplay.vue
@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'WarningDisplay',
 
   props: {
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index e63ee4185..edc67c49f 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -227,7 +227,6 @@ import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppCatalog',
 
   components: {
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index a2facae3d..860c20347 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -377,7 +377,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInfo',
 
   components: {
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 345b7dacd..1da7fb8f2 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -217,7 +217,6 @@ import {
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppInstall',
 
   components: {
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 171cfc1ce..20a2bbbf4 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -39,7 +39,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AppList',
 
   data() {
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 3a5d1a7fa..38c6cda8d 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -127,7 +127,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupCreate',
 
   props: {
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index dddf626c2..891fec748 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -142,7 +142,6 @@ import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupInfo',
 
   props: {
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 16a0701b6..5389b086d 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -49,7 +49,6 @@ import { distanceToNow, readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupList',
 
   props: {
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index 8202b19b4..f94a5f8b9 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'BackupView',
 
   data() {
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index aac150340..58549cee1 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -153,7 +153,6 @@ import { distanceToNow } from '@/helpers/filters/date'
 import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DiagnosisView',
 
   data() {
diff --git a/app/src/views/domain/DomainAdd.vue b/app/src/views/domain/DomainAdd.vue
index 73b8d6ac1..745a81ad3 100644
--- a/app/src/views/domain/DomainAdd.vue
+++ b/app/src/views/domain/DomainAdd.vue
@@ -14,7 +14,6 @@ import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainAdd',
 
   data() {
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index c99145a30..4ac881aaf 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -148,7 +148,6 @@ import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainDns',
 
   props: {
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 630f92791..b63c7578b 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -149,7 +149,6 @@ import ConfigPanels from '@/components/ConfigPanels.vue'
 import DomainDns from './DomainDns.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainInfo',
 
   components: {
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 7f194ce30..c95a96bfa 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -53,7 +53,6 @@ import { mapGetters } from 'vuex'
 import RecursiveListGroup from '@/components/RecursiveListGroup.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'DomainList',
 
   components: {
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index aad17ee7b..fb571677d 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -22,7 +22,6 @@ import api from '@/api'
 import { required, alphalownumdot_ } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'GroupCreate',
 
   setup() {
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 3b2d9afb2..aa1f6ed25 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -140,7 +140,6 @@ import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
 export default {
-  compatConfig: { MODE: 3 },
   name: 'GroupList',
 
   components: {
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 6270b35b0..fd9082e99 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -86,7 +86,6 @@ import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceInfo',
 
   props: {
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 189621dd2..789a3eed0 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -46,7 +46,6 @@
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ServiceList',
 
   data() {
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 371da98b9..2c722c2ea 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -125,7 +125,6 @@ import api from '@/api'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolFirewall',
 
   setup() {
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index ec611ac52..8c4cead27 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -15,7 +15,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolList',
 
   data() {
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 1c44d5549..2a4e0fd6c 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -78,7 +78,6 @@ import { escapeHtml } from '@/helpers/commons'
 import { readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLog',
 
   props: {
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 72161903c..62724a6b9 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -29,7 +29,6 @@
 import { distanceToNow, readableDate } from '@/helpers/filters/date'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolLogs',
 
   data() {
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 5210855aa..55e749baf 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -91,7 +91,6 @@ import api from '@/api'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolMigrations',
 
   data() {
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 7864da33a..0443f0434 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -37,7 +37,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolPower',
 
   methods: {
diff --git a/app/src/views/tool/ToolSettings.vue b/app/src/views/tool/ToolSettings.vue
index 4e71fa274..a42993034 100644
--- a/app/src/views/tool/ToolSettings.vue
+++ b/app/src/views/tool/ToolSettings.vue
@@ -23,7 +23,6 @@ import {
 import ConfigPanels from '@/components/ConfigPanels.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolSettingsConfig',
 
   components: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index b4ee2cc23..90200cf49 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -27,7 +27,6 @@ function mapStoreGetSet(props = [], action = 'commit') {
 }
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ToolWebadmin',
 
   data() {
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 2c0e49913..08b3cbbd6 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -144,7 +144,6 @@ import { mapGetters } from 'vuex'
 import CardCollapse from '@/components/CardCollapse.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'SystemUpdate',
 
   components: {
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 64557e5ae..7d62555d3 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -84,7 +84,6 @@ import {
 } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserCreate',
 
   setup() {
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 2cbe98209..e8ae18b6b 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -134,7 +134,6 @@ import {
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserEdit',
 
   props: {
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 9fd16f2e3..b0286b7f1 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -29,7 +29,6 @@ import { formatFormData } from '@/helpers/yunohostArguments'
 import { required } from '@/helpers/validators'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserImport',
 
   setup() {
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 922e47233..2929cfd40 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -106,7 +106,6 @@
 import api from '@/api'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserInfo',
 
   props: {
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 1b227bf5f..2622c4ea2 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -56,7 +56,6 @@
 import { mapGetters } from 'vuex'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'UserList',
 
   data() {
diff --git a/app/vite.config.js b/app/vite.config.js
index bd9be9d74..5086a3a44 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -23,7 +23,6 @@ export default defineConfig(({ command, mode }) => {
     },
     resolve: {
       alias: [
-        { find: 'vue', replacement: '@vue/compat' },
         // this is required for the SCSS modules imports with `~` (node_modules)
         {
           find: /^~(.*)$/,
@@ -47,17 +46,7 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [
-      createVuePlugin({
-        template: {
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2,
-            },
-          },
-        },
-      }),
-    ],
+    plugins: [createVuePlugin()],
     build: {
       rollupOptions: {
         output: {

From bba1aa85c21ef3dffa39e1dd01b9114c5218312c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 05:00:33 +0100
Subject: [PATCH 02/30] migration(vue3): COMPILER_V_ON_NATIVE

---
 app/src/components/globals/formItems/FileItem.vue          | 2 +-
 app/src/components/globals/formItems/SelectItem.vue        | 2 +-
 app/src/components/globals/formItems/TagsSelectizeItem.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 18a4ea533..02d7f3f51 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -21,7 +21,7 @@
       :browse-text="$t('words.browse')"
       @input="onInput"
       @blur="$parent.$emit('touch', name)"
-      @focusout.native="$parent.$emit('touch', name)"
+      @focusout="$parent.$emit('touch', name)"
     />
   </BButtonGroup>
 </template>
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index f47a76f91..2140f49f8 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,7 +5,7 @@
     :id="id"
     :options="choices"
     :required="required"
-    @blur.native="$emit('blur', modelValue)"
+    @blur="$emit('blur', modelValue)"
   />
 </template>
 
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index b809c6604..dd161f128 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -35,7 +35,7 @@
           variant="outline-dark"
           block
           menu-class="w-100"
-          @keydown.native="onDropdownKeydown"
+          @keydown="onDropdownKeydown"
         >
           <template #button-content>
             <YIcon iname="search-plus" /> {{ label }}

From ccc7298213c58eaf39f884426cd374e94baf4fbf Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 12 Mar 2024 18:36:14 +0100
Subject: [PATCH 03/30] migration(vue-i18n): legacy mode off

---
 app/src/components/globals/AbstractForm.vue   |  2 +-
 app/src/components/globals/CardForm.vue       |  2 +-
 app/src/components/globals/FormField.vue      |  2 +-
 app/src/components/globals/ReadOnlyField.vue  |  8 ++---
 app/src/components/globals/ViewSearch.vue     |  8 +++--
 .../globals/formItems/TagsSelectizeItem.vue   | 20 ++++++++----
 app/src/i18n/index.js                         |  3 +-
 app/src/main.js                               |  8 ++---
 app/src/views/LoginView.vue                   |  6 ++--
 app/src/views/PostInstall.vue                 | 16 +++++-----
 app/src/views/_partials/DomainForm.vue        | 18 +++++------
 app/src/views/app/AppCatalog.vue              | 24 +++++++-------
 app/src/views/app/AppInfo.vue                 | 12 +++----
 app/src/views/app/AppInstall.vue              | 16 ++++------
 app/src/views/backup/BackupCreate.vue         |  6 ++--
 app/src/views/backup/BackupInfo.vue           | 10 +++---
 app/src/views/backup/BackupList.vue           |  2 +-
 app/src/views/backup/BackupView.vue           |  2 +-
 app/src/views/domain/DomainDns.vue            |  2 +-
 app/src/views/domain/DomainInfo.vue           |  4 +--
 app/src/views/group/GroupCreate.vue           |  6 ++--
 app/src/views/group/GroupList.vue             |  4 +--
 app/src/views/service/ServiceInfo.vue         |  2 +-
 app/src/views/tool/ToolFirewall.vue           | 32 +++++++++----------
 app/src/views/tool/ToolMigrations.vue         |  2 +-
 app/src/views/tool/ToolPower.vue              |  2 +-
 app/src/views/tool/ToolWebadmin.vue           | 20 ++++++------
 app/src/views/update/SystemUpdate.vue         | 12 +++----
 app/src/views/user/UserCreate.vue             | 18 +++++------
 app/src/views/user/UserEdit.vue               | 28 ++++++++--------
 app/src/views/user/UserImport.vue             | 18 +++++------
 31 files changed, 156 insertions(+), 159 deletions(-)

diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 767fc9f2f..273073cac 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -48,7 +48,7 @@ export default {
     errorFeedback() {
       if (this.serverError) return this.serverError
       else if (this.validation && this.validation.$errors.length) {
-        return this.$i18n.t('form_errors.invalid_form')
+        return this.$t('form_errors.invalid_form')
       } else return ''
     },
   },
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 16e8d0adc..c63bbbeb7 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -53,7 +53,7 @@ export default {
     errorFeedback() {
       if (this.serverError) return this.serverError
       else if (this.validation && this.validation.$errors.length) {
-        return this.$i18n.t('form_errors.invalid_form')
+        return this.$t('form_errors.invalid_form')
       } else return ''
     },
   },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index bba49ece6..e08692e74 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -119,7 +119,7 @@ export default {
       const err = this.error
       if (err) {
         if (err.$message) return err.$message
-        return this.$i18n.t('form_errors.' + err.$validator, {
+        return this.$t('form_errors.' + err.$validator, {
           value: err.$model,
           ...err.$params,
         })
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 39949a728..0a631a691 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -38,15 +38,13 @@ export default {
     parseValue(value) {
       const item = this.component
       if (item === 'FileItem') value = value.file ? value.file.name : null
-      if (item === 'CheckboxItem') value = this.$i18n.t(value ? 'yes' : 'no')
+      if (item === 'CheckboxItem') value = this.$t(value ? 'yes' : 'no')
       if (item === 'TextAreaItem') value = value.replaceAll('\n', '<br>')
       if (Array.isArray(value)) {
-        value = value.length
-          ? value.join(this.$i18n.t('words.separator'))
-          : null
+        value = value.length ? value.join(this.$t('words.separator')) : null
       }
       if ([null, undefined, ''].includes(this.value))
-        value = this.$i18n.t('words.none')
+        value = this.$t('words.none')
       return value
     },
   },
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index cd2d7f068..94073c989 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -14,7 +14,7 @@
           :value="search"
           @input="$emit('update:search', $event)"
           :placeholder="
-            $t('search.for', { items: $tc('items.' + itemsName, 2) })
+            $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
           :disabled="!items"
         />
@@ -33,10 +33,12 @@
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{
-            $tc(
+            $t(
               items === null ? 'items_verbose_count' : 'search.not_found',
+              {
+                items: $t('items.' + itemsName, 0),
+              },
               0,
-              { items: $tc('items.' + itemsName, 0) },
             )
           }}
         </slot>
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index dd161f128..685576c41 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -49,9 +49,13 @@
                 label-size="sm"
                 :label-for="id + '-search-input'"
                 :invalid-feedback="
-                  $tc('search.not_found', 0, {
-                    items: $tc('items.' + itemsName, 0),
-                  })
+                  $t(
+                    'search.not_found',
+                    {
+                      items: $t('items.' + itemsName, 0),
+                    },
+                    0,
+                  )
                 "
                 :state="searchState"
                 :disabled="disabled"
@@ -80,9 +84,13 @@
           <BDropdownText v-if="!criteria && availableOptions.length === 0">
             <YIcon iname="exclamation-triangle" />
             {{
-              $tc('items_verbose_items_left', 0, {
-                items: $tc('items.' + itemsName, 0),
-              })
+              $t(
+                'items_verbose_items_left',
+                {
+                  items: $t('items.' + itemsName, 0),
+                },
+                0,
+              )
             }}
           </BDropdownText>
         </BDropdown>
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.js
index df48cfc58..fa6e965ef 100644
--- a/app/src/i18n/index.js
+++ b/app/src/i18n/index.js
@@ -6,6 +6,5 @@
 import { createI18n } from 'vue-i18n'
 
 export default createI18n({
-  // FIXME
-  legacy: true,
+  legacy: false,
 })
diff --git a/app/src/main.js b/app/src/main.js
index c6bd4686d..f130934ed 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -36,8 +36,8 @@ app.use(VueShowdownPlugin, {
 // FIXME find or wait for a better way
 app.config.globalProperties.$askConfirmation = function (message, props) {
   return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$i18n.t('ok'),
-    cancelTitle: this.$i18n.t('cancel'),
+    okTitle: this.$t('ok'),
+    cancelTitle: this.$t('cancel'),
     bodyBgVariant: 'warning',
     centered: true,
     bodyClass: [
@@ -58,8 +58,8 @@ app.config.globalProperties.$askMdConfirmation = function (
     props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
   })
   return this.$bvModal['msgBox' + (ok ? 'Ok' : 'Confirm')](content, {
-    okTitle: this.$i18n.t('yes'),
-    cancelTitle: this.$i18n.t('cancel'),
+    okTitle: this.$t('yes'),
+    cancelTitle: this.$t('cancel'),
     headerBgVariant: 'warning',
     headerClass: store.state.theme ? 'text-white' : 'text-black',
     centered: true,
diff --git a/app/src/views/LoginView.vue b/app/src/views/LoginView.vue
index a05bb1975..7e4f9435f 100644
--- a/app/src/views/LoginView.vue
+++ b/app/src/views/LoginView.vue
@@ -60,14 +60,14 @@ export default {
       },
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
             autocomplete: 'username',
           },
         },
         password: {
-          label: this.$i18n.t('password'),
+          label: this.$t('password'),
           props: {
             id: 'password',
             type: 'password',
@@ -109,7 +109,7 @@ export default {
         })
         .catch((err) => {
           if (err.name !== 'APIUnauthorizedError') throw err
-          this.serverError = this.$i18n.t('wrong_password_or_username')
+          this.serverError = this.$t('wrong_password_or_username')
         })
     },
   },
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index 8b1e92e01..ac9c0dd43 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -132,30 +132,30 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
           },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_admin_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_admin_password'),
           descriptionVariant: 'warning',
           props: { id: 'password', placeholder: '••••••••', type: 'password' },
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             placeholder: '••••••••',
@@ -180,7 +180,7 @@ export default {
 
     async setUser() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_postinstall', { domain: this.domain }),
+        this.$t('confirm_postinstall', { domain: this.domain }),
       )
       if (!confirmed) return
       this.performPostInstall()
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 3ede67f63..28de1fba9 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -157,26 +157,26 @@ export default {
 
       fields: {
         domain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'domain',
-            placeholder: this.$i18n.t('placeholder.domain'),
+            placeholder: this.$t('placeholder.domain'),
           },
         },
 
         dynDomain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'dyn-domain',
-            placeholder: this.$i18n.t('placeholder.domain').split('.')[0],
+            placeholder: this.$t('placeholder.domain').split('.')[0],
             type: 'domain',
             choices: ['nohost.me', 'noho.st', 'ynh.fr'],
           },
         },
 
         dynDomainPassword: {
-          label: this.$i18n.t('domain.add.dyn_dns_password'),
-          description: this.$i18n.t('domain.add.dyn_dns_password_desc'),
+          label: this.$t('domain.add.dyn_dns_password'),
+          description: this.$t('domain.add.dyn_dns_password_desc'),
           props: {
             id: 'dyn-dns-password',
             placeholder: '••••••••',
@@ -185,7 +185,7 @@ export default {
         },
 
         dynDomainPasswordConfirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'dyn-dns-password-confirmation',
             placeholder: '••••••••',
@@ -194,10 +194,10 @@ export default {
         },
 
         localDomain: {
-          label: this.$i18n.t('domain_name'),
+          label: this.$t('domain_name'),
           props: {
             id: 'dyn-domain',
-            placeholder: this.$i18n.t('placeholder.domain').split('.')[0],
+            placeholder: this.$t('placeholder.domain').split('.')[0],
             type: 'domain',
             choices: ['local', 'test'],
           },
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index edc67c49f..5f6afe7f6 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -15,7 +15,7 @@
           </BInputGroupPrepend>
           <BFormInput
             id="search-input"
-            :placeholder="$t('search.for', { items: $tc('items.apps', 2) })"
+            :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
             :value="search"
             @input="updateQuery('search', $event)"
           />
@@ -257,24 +257,24 @@ export default {
 
       // Filtering options
       qualityOptions: [
-        { value: 'high_quality', text: this.$i18n.t('only_highquality_apps') },
+        { value: 'high_quality', text: this.$t('only_highquality_apps') },
         {
           value: 'decent_quality',
-          text: this.$i18n.t('only_decent_quality_apps'),
+          text: this.$t('only_decent_quality_apps'),
         },
-        { value: 'working', text: this.$i18n.t('only_working_apps') },
-        { value: 'all', text: this.$i18n.t('all_apps') },
+        { value: 'working', text: this.$t('only_working_apps') },
+        { value: 'all', text: this.$t('all_apps') },
       ],
       categories: [
-        { text: this.$i18n.t('app_choose_category'), value: null },
-        { text: this.$i18n.t('all_apps'), value: 'all', icon: 'search' },
+        { text: this.$t('app_choose_category'), value: null },
+        { text: this.$t('all_apps'), value: 'all', icon: 'search' },
         // The rest is filled from api data
       ],
 
       // Custom install form
       customInstall: {
         field: {
-          label: this.$i18n.t('url'),
+          label: this.$t('url'),
           props: {
             id: 'custom-install',
             placeholder: 'https://some.git.forge.tld/USER/REPOSITORY',
@@ -321,11 +321,11 @@ export default {
           (cat) => cat.value === this.category,
         )
         if (category.subtags) {
-          const subtags = [{ text: this.$i18n.t('all'), value: 'all' }]
+          const subtags = [{ text: this.$t('all'), value: 'all' }]
           category.subtags.forEach((subtag) => {
             subtags.push({ text: subtag.title, value: subtag.id })
           })
-          subtags.push({ text: this.$i18n.t('others'), value: 'others' })
+          subtags.push({ text: this.$t('others'), value: 'others' })
           return subtags
         }
       }
@@ -404,7 +404,7 @@ export default {
       const app = this.apps.find((app) => app.id === appId)
       if (!app.decent_quality) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_install_app_' + app.state),
+          this.$t('confirm_install_app_' + app.state),
         )
         if (!confirmed) return
       }
@@ -414,7 +414,7 @@ export default {
     // INSTALL CUSTOM APP
     async onCustomInstallClick() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_install_custom_app'),
+        this.$t('confirm_install_custom_app'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 860c20347..435074de5 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -411,7 +411,7 @@ export default {
           {
             hasApplyButton: false,
             id: 'operations',
-            name: this.$i18n.t('operations'),
+            name: this.$t('operations'),
           },
         ],
         validations: {},
@@ -467,7 +467,7 @@ export default {
 
       const mainPermission = app.permissions[this.id + '.main']
       mainPermission.name = this.id + '.main'
-      mainPermission.title = this.$i18n.t('permission_main')
+      mainPermission.title = this.$t('permission_main')
       mainPermission.tileAvailable =
         mainPermission.url !== null && !mainPermission.url.startsWith('re:')
       form.labels.push({
@@ -507,7 +507,7 @@ export default {
         domain: app.settings.domain,
         alternativeTo: app.from_catalog.potential_alternative_to?.length
           ? app.from_catalog.potential_alternative_to.join(
-              this.$i18n.t('words.separator'),
+              this.$t('words.separator'),
             )
           : null,
         description: DESCRIPTION
@@ -517,7 +517,7 @@ export default {
           app.manifest.packaging_format >= 2
             ? {
                 archs: Array.isArray(archs)
-                  ? archs.join(this.$i18n.t('words.separator'))
+                  ? archs.join(this.$t('words.separator'))
                   : archs,
                 ldap: ldap === 'not_relevant' ? null : ldap,
                 sso: sso === 'not_relevant' ? null : sso,
@@ -647,7 +647,7 @@ export default {
 
     async changeUrl() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_app_change_url'),
+        this.$t('confirm_app_change_url'),
       )
       if (!confirmed) return
 
@@ -663,7 +663,7 @@ export default {
 
     async setAsDefaultDomain(undo = false) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_app_default'),
+        this.$t('confirm_app_default'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 1da7fb8f2..4922d9532 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -313,9 +313,7 @@ export default {
         name,
         alternativeTo:
           _app.potential_alternative_to && _app.potential_alternative_to.length
-            ? _app.potential_alternative_to.join(
-                this.$i18n.t('words.separator'),
-              )
+            ? _app.potential_alternative_to.join(this.$t('words.separator'))
             : null,
         description: formatI18nField(_app.doc.DESCRIPTION || _app.description),
         screenshot: _app.screenshot,
@@ -326,7 +324,7 @@ export default {
           _app.packaging_format >= 2
             ? {
                 archs: Array.isArray(archs)
-                  ? archs.join(this.$i18n.t('words.separator'))
+                  ? archs.join(this.$t('words.separator'))
                   : archs,
                 ldap: ldap === 'not_relevant' ? null : ldap,
                 sso: sso === 'not_relevant' ? null : sso,
@@ -382,7 +380,7 @@ export default {
     async performInstall() {
       if ('path' in this.form && this.form.path === '/') {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_install_domain_root', {
+          this.$t('confirm_install_domain_root', {
             domain: this.form.domain,
           }),
         )
@@ -406,16 +404,14 @@ export default {
           const postInstall = this.formatAppNotifs(notifications)
           if (postInstall) {
             const message =
-              this.$i18n.t('app.install.notifs.post.alert') +
-              '\n\n' +
-              postInstall
+              this.$t('app.install.notifs.post.alert') + '\n\n' + postInstall
             await this.$askMdConfirmation(
               message,
               {
-                title: this.$i18n.t('app.install.notifs.post.title', {
+                title: this.$t('app.install.notifs.post.title', {
                   name: this.app.name,
                 }),
-                okTitle: this.$i18n.t('ok'),
+                okTitle: this.$t('ok'),
               },
               true,
             )
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 38c6cda8d..578faefeb 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -155,12 +155,12 @@ export default {
           : hook
         if (groupId in data) {
           data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$i18n.t('hook_' + hook)
+          data[groupId].description += ', ' + this.$t('hook_' + hook)
         } else {
           data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
+            name: this.$t('hook_' + groupId),
             value: [hook],
-            description: this.$i18n.t(
+            description: this.$t(
               groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
             ),
           }
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 891fec748..f4af06bd4 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -177,13 +177,13 @@ export default {
           : hook
         if (groupId in data) {
           data[groupId].value.push(hook)
-          data[groupId].description += ', ' + this.$i18n.t('hook_' + hook)
+          data[groupId].description += ', ' + this.$t('hook_' + hook)
           data[groupId].size += size
         } else {
           data[groupId] = {
-            name: this.$i18n.t('hook_' + groupId),
+            name: this.$t('hook_' + groupId),
             value: [hook],
-            description: this.$i18n.t(
+            description: this.$t(
               groupId === hook ? `hook_${hook}_desc` : 'hook_' + hook,
             ),
             size,
@@ -216,7 +216,7 @@ export default {
 
     async restoreBackup() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_restore', { name: this.name }),
+        this.$t('confirm_restore', { name: this.name }),
       )
       if (!confirmed) return
 
@@ -246,7 +246,7 @@ export default {
 
     async deleteBackup() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_delete', { name: this.name }),
+        this.$t('confirm_delete', { name: this.name }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 5389b086d..875f33900 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -16,7 +16,7 @@
 
     <BAlert v-if="!archives" variant="warning">
       <YIcon iname="exclamation-triangle" />
-      {{ $tc('items_verbose_count', 0, { items: $tc('items.backups', 0) }) }}
+      {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>
 
     <BListGroup v-else>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index f94a5f8b9..b81f6ff6d 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -31,7 +31,7 @@ export default {
       storages: [
         {
           id: 'local',
-          name: this.$i18n.t('local_archives'),
+          name: this.$t('local_archives'),
           uri: '/home/yunohost.backup/',
         },
       ],
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 4ac881aaf..32b5371d7 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -247,7 +247,7 @@ export default {
     async pushDnsChanges() {
       if (this.force) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('domain.dns.push_force_confirm'),
+          this.$t('domain.dns.push_force_confirm'),
         )
         if (!confirmed) return
       }
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index b63c7578b..824e0da5e 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -53,7 +53,7 @@
         <span class="text-secondary px-2">
           ({{
             $t('domain.cert.valid_for', {
-              days: $tc('day_validity', cert.validity),
+              days: $t('day_validity', cert.validity),
             })
           }})
         </span>
@@ -280,7 +280,7 @@ export default {
 
     async setAsDefaultDomain() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_change_maindomain'),
+        this.$t('confirm_change_maindomain'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index fb571677d..ef30e5f08 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -37,11 +37,11 @@ export default {
       },
       serverError: '',
       groupname: {
-        label: this.$i18n.t('group_name'),
-        description: this.$i18n.t('group_format_name_help'),
+        label: this.$t('group_name'),
+        description: this.$t('group_format_name_help'),
         props: {
           id: 'groupname',
-          placeholder: this.$i18n.t('placeholder.groupname'),
+          placeholder: this.$t('placeholder.groupname'),
         },
       },
     }
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index aa1f6ed25..56db370ec 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -265,7 +265,7 @@ export default {
       const permId = this.permissions.find((perm) => perm.label === option).id
       if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('confirm_group_add_access_permission', {
+          this.$t('confirm_group_add_access_permission', {
             name: groupName,
             perm: option,
           }),
@@ -311,7 +311,7 @@ export default {
 
     async deleteGroup(groupName) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_delete', { name: groupName }),
+        this.$t('confirm_delete', { name: groupName }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index fd9082e99..574724943 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -133,7 +133,7 @@ export default {
 
     async updateService(action) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_service_' + action, { name: this.name }),
+        this.$t('confirm_service_' + action, { name: this.name }),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 2c722c2ea..c86e61058 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -140,27 +140,27 @@ export default {
 
       // Ports tables data
       fields: [
-        { key: 'port', label: this.$i18n.t('port') },
-        { key: 'ipv4', label: this.$i18n.t('ipv4') },
-        { key: 'ipv6', label: this.$i18n.t('ipv6') },
-        { key: 'uPnP', label: this.$i18n.t('upnp') },
+        { key: 'port', label: this.$t('port') },
+        { key: 'ipv4', label: this.$t('ipv4') },
+        { key: 'ipv6', label: this.$t('ipv6') },
+        { key: 'uPnP', label: this.$t('upnp') },
       ],
       protocols: undefined,
       portToToggle: undefined,
 
       // Ports form data
       actionChoices: [
-        { value: 'allow', text: this.$i18n.t('open') },
-        { value: 'disallow', text: this.$i18n.t('close') },
+        { value: 'allow', text: this.$t('open') },
+        { value: 'disallow', text: this.$t('close') },
       ],
       connectionChoices: [
-        { value: 'ipv4', text: this.$i18n.t('ipv4') },
-        { value: 'ipv6', text: this.$i18n.t('ipv6') },
+        { value: 'ipv4', text: this.$t('ipv4') },
+        { value: 'ipv6', text: this.$t('ipv6') },
       ],
       protocolChoices: [
-        { value: 'TCP', text: this.$i18n.t('tcp') },
-        { value: 'UDP', text: this.$i18n.t('udp') },
-        { value: 'Both', text: this.$i18n.t('both') },
+        { value: 'TCP', text: this.$t('tcp') },
+        { value: 'UDP', text: this.$t('udp') },
+        { value: 'Both', text: this.$t('both') },
       ],
       form: {
         action: 'allow',
@@ -216,7 +216,7 @@ export default {
 
     async togglePort({ action, port, protocol, connection }) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_firewall_' + action, {
+        this.$t('confirm_firewall_' + action, {
           port,
           protocol,
           connection,
@@ -226,9 +226,7 @@ export default {
         return Promise.resolve(confirmed)
       }
 
-      const actionTrad = this.$i18n.t(
-        { allow: 'open', disallow: 'close' }[action],
-      )
+      const actionTrad = this.$t({ allow: 'open', disallow: 'close' }[action])
       return api
         .put(
           `firewall/${protocol}/${action}/${port}?${connection}_only`,
@@ -248,7 +246,7 @@ export default {
     async toggleUpnp(value) {
       const action = this.upnpEnabled ? 'disable' : 'enable'
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_upnp_' + action),
+        this.$t('confirm_upnp_' + action),
       )
       if (!confirmed) return
 
@@ -256,7 +254,7 @@ export default {
         .put(
           'firewall/upnp/' + action,
           {},
-          { key: 'firewall.upnp', action: this.$i18n.t(action) },
+          { key: 'firewall.upnp', action: this.$t(action) },
         )
         .then(() => {
           // FIXME Couldn't test when it works.
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 55e749baf..bba1f2530 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -137,7 +137,7 @@ export default {
 
     async skipMigration(id) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_migrations_skip'),
+        this.$t('confirm_migrations_skip'),
       )
       if (!confirmed) return
       api
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index 0443f0434..b9435cb39 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -42,7 +42,7 @@ export default {
   methods: {
     async triggerAction(action) {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_reboot_action_' + action),
+        this.$t('confirm_reboot_action_' + action),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index 90200cf49..cd053f953 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -36,38 +36,36 @@ export default {
 
       fields: {
         locale: {
-          label: this.$i18n.t('tools_webadmin.language'),
+          label: this.$t('tools_webadmin.language'),
           component: 'SelectItem',
           props: { id: 'locale', choices: [] },
         },
 
         fallbackLocale: {
-          label: this.$i18n.t('tools_webadmin.fallback_language'),
-          description: this.$i18n.t(
-            'tools_webadmin.fallback_language_description',
-          ),
+          label: this.$t('tools_webadmin.fallback_language'),
+          description: this.$t('tools_webadmin.fallback_language_description'),
           component: 'SelectItem',
           props: { id: 'fallback-locale', choices: [] },
         },
 
         cache: {
           id: 'cache',
-          label: this.$i18n.t('tools_webadmin.cache'),
-          description: this.$i18n.t('tools_webadmin.cache_description'),
+          label: this.$t('tools_webadmin.cache'),
+          description: this.$t('tools_webadmin.cache_description'),
           component: 'CheckboxItem',
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
         transitions: {
           id: 'transitions',
-          label: this.$i18n.t('tools_webadmin.transitions'),
+          label: this.$t('tools_webadmin.transitions'),
           component: 'CheckboxItem',
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
         theme: {
           id: 'theme',
-          label: this.$i18n.t('tools_webadmin.theme'),
+          label: this.$t('tools_webadmin.theme'),
           component: 'CheckboxItem',
           props: { labels: { true: '🌙', false: '☀️' } },
         },
@@ -90,8 +88,8 @@ export default {
     if (import.meta.env.DEV) {
       this.fields.experimental = {
         id: 'experimental',
-        label: this.$i18n.t('tools_webadmin.experimental'),
-        description: this.$i18n.t('tools_webadmin.experimental_description'),
+        label: this.$t('tools_webadmin.experimental'),
+        description: this.$t('tools_webadmin.experimental_description'),
         component: 'CheckboxItem',
         props: { labels: { true: 'enabled', false: 'disabled' } },
       }
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 08b3cbbd6..349e33075 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -223,17 +223,15 @@ export default {
 
             if (postMessage) {
               const message =
-                this.$i18n.t('app.upgrade.notifs.post.alert') +
-                '\n\n' +
-                postMessage
+                this.$t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
               return this.$askMdConfirmation(
                 message,
                 {
-                  title: this.$i18n.t('app.upgrade.notifs.post.title', {
+                  title: this.$t('app.upgrade.notifs.post.title', {
                     name: app.name,
                   }),
-                  okTitle: this.$i18n.t(isLast ? 'ok' : 'app.upgrade.continue'),
-                  cancelTitle: this.$i18n.t('app.upgrade.stop'),
+                  okTitle: this.$t(isLast ? 'ok' : 'app.upgrade.continue'),
+                  cancelTitle: this.$t('app.upgrade.stop'),
                 },
                 isLast,
               )
@@ -251,7 +249,7 @@ export default {
 
     async performSystemUpgrade() {
       const confirmed = await this.$askConfirmation(
-        this.$i18n.t('confirm_update_system'),
+        this.$t('confirm_update_system'),
       )
       if (!confirmed) return
 
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 7d62555d3..f1d1e3f48 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -111,32 +111,32 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           props: {
             id: 'username',
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
           },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         domain: {
           id: 'mail',
-          label: this.$i18n.t('user_email'),
-          description: this.$i18n.t('tip_about_user_email'),
+          label: this.$t('user_email'),
+          description: this.$t('tip_about_user_email'),
           descriptionVariant: 'info',
           props: { choices: [] },
         },
 
         password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_user_password'),
           descriptionVariant: 'warning',
           props: {
             id: 'password',
@@ -146,7 +146,7 @@ export default {
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             placeholder: '••••••••',
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index e8ae18b6b..93b040156 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -167,51 +167,51 @@ export default {
 
       fields: {
         username: {
-          label: this.$i18n.t('user_username'),
+          label: this.$t('user_username'),
           value: this.name,
           props: { id: 'username', disabled: true },
         },
 
         fullname: {
-          label: this.$i18n.t('user_fullname'),
+          label: this.$t('user_fullname'),
           props: {
             id: 'fullname',
-            placeholder: this.$i18n.t('placeholder.fullname'),
+            placeholder: this.$t('placeholder.fullname'),
           },
         },
 
         mail: {
-          label: this.$i18n.t('user_email'),
+          label: this.$t('user_email'),
           props: { id: 'mail', choices: [] },
         },
 
         mailbox_quota: {
-          label: this.$i18n.t('user_mailbox_quota'),
-          description: this.$i18n.t('mailbox_quota_description'),
-          example: this.$i18n.t('mailbox_quota_example'),
+          label: this.$t('user_mailbox_quota'),
+          description: this.$t('mailbox_quota_description'),
+          example: this.$t('mailbox_quota_example'),
           props: {
             id: 'mailbox-quota',
-            placeholder: this.$i18n.t('mailbox_quota_placeholder'),
+            placeholder: this.$t('mailbox_quota_placeholder'),
           },
         },
 
         mail_aliases: {
           props: {
-            placeholder: this.$i18n.t('placeholder.username'),
+            placeholder: this.$t('placeholder.username'),
             choices: [],
           },
         },
 
         mail_forward: {
           props: {
-            placeholder: this.$i18n.t('user_new_forward'),
+            placeholder: this.$t('user_new_forward'),
             type: 'email',
           },
         },
 
         change_password: {
-          label: this.$i18n.t('password'),
-          description: this.$i18n.t('good_practices_about_user_password'),
+          label: this.$t('password'),
+          description: this.$t('good_practices_about_user_password'),
           descriptionVariant: 'warning',
           props: {
             id: 'change_password',
@@ -222,7 +222,7 @@ export default {
         },
 
         confirmation: {
-          label: this.$i18n.t('password_confirmation'),
+          label: this.$t('password_confirmation'),
           props: {
             id: 'confirmation',
             type: 'password',
@@ -315,7 +315,7 @@ export default {
       }
 
       if (Object.keys(data).length === 0) {
-        this.serverError = this.$i18n.t('error_modify_something')
+        this.serverError = this.$t('error_modify_something')
         return
       }
 
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index b0286b7f1..03ba1357d 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -49,19 +49,19 @@ export default {
 
       fields: {
         csvfile: {
-          label: this.$i18n.t('users_import_csv_file'),
-          description: this.$i18n.t('users_import_csv_file_desc'),
+          label: this.$t('users_import_csv_file'),
+          description: this.$t('users_import_csv_file_desc'),
           component: 'FileItem',
           props: {
             id: 'csvfile',
             accept: 'text/csv',
-            placeholder: this.$i18n.t('placeholder.file'),
+            placeholder: this.$t('placeholder.file'),
           },
         },
 
         update: {
-          label: this.$i18n.t('users_import_update'),
-          description: this.$i18n.t('users_import_update_desc'),
+          label: this.$t('users_import_update'),
+          description: this.$t('users_import_update_desc'),
           component: 'CheckboxItem',
           props: {
             id: 'update',
@@ -69,8 +69,8 @@ export default {
         },
 
         delete: {
-          label: this.$i18n.t('users_import_delete'),
-          description: this.$i18n.t('users_import_delete_desc'),
+          label: this.$t('users_import_delete'),
+          description: this.$t('users_import_delete_desc'),
           component: 'CheckboxItem',
           props: {
             id: 'delete',
@@ -90,8 +90,8 @@ export default {
     async onSubmit() {
       if (this.form.delete) {
         const confirmed = await this.$askConfirmation(
-          this.$i18n.t('users_import_confirm_destructive'),
-          { okTitle: this.$i18n.t('users_import_delete_others') },
+          this.$t('users_import_confirm_destructive'),
+          { okTitle: this.$t('users_import_delete_others') },
         )
         if (!confirmed) return
       }

From 1f45899d4b5e2ec44cff3fe4c676afd2baf5d9dc Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 13 Mar 2024 18:16:05 +0100
Subject: [PATCH 04/30] migration: bootstrap-vue to bootstrap-vue-next

---
 app/package.json                    |  7 +++----
 app/src/App.vue                     |  5 -----
 app/src/components/CardDeckFeed.vue |  2 +-
 app/src/main.js                     | 11 ++++-------
 app/src/scss/_variables.scss        |  9 ++++++---
 app/src/scss/main.scss              | 21 ++++++++++++---------
 app/vite.config.js                  |  9 ++++++++-
 7 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/app/package.json b/app/package.json
index b61fa4b72..912111fff 100644
--- a/app/package.json
+++ b/app/package.json
@@ -17,7 +17,8 @@
     "@fontsource/firago": "^5.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "bootstrap-vue": "^2.23.1",
+    "bootstrap": "^5.3.3",
+    "bootstrap-vue-next": "^0.16.6",
     "date-fns": "^3.3.1",
     "fork-awesome": "^1.2.0",
     "simple-evaluate": "^1.4.6",
@@ -29,15 +30,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "bootstrap": "^4.6.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.22.0",
-    "popper.js": "^1.16.0",
-    "portal-vue": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.4"
   },
   "browserslist": [
diff --git a/app/src/App.vue b/app/src/App.vue
index 42c5c8c29..65f22e43a 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -190,11 +190,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// Global import of Bootstrap and custom styles
-@import '@/scss/main.scss';
-</style>
-
 <style lang="scss" scoped>
 // generic style for <html>, <body> and <#app> is in `scss/main.scss`
 header {
diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index e6bd4166d..6bf733a8b 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -2,7 +2,7 @@
 // Implementation of the feed pattern
 // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 import { h } from 'vue'
-import { BCardGroup } from 'bootstrap-vue'
+import { BCardGroup } from 'bootstrap-vue-next'
 
 export default {
   name: 'CardDeckFeed',
diff --git a/app/src/main.js b/app/src/main.js
index f130934ed..4b636d710 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import BootstrapVue from 'bootstrap-vue'
+import { createBootstrap } from 'bootstrap-vue-next'
 import { VueShowdownPlugin } from 'vue-showdown'
 
 import store from './store'
@@ -10,6 +10,8 @@ import i18n from './i18n'
 import { registerGlobalErrorHandlers } from './api'
 import { initDefaultLocales } from './i18n/helpers'
 
+import '@/scss/main.scss'
+
 const app = createApp({
   ...App,
 })
@@ -18,12 +20,7 @@ app.use(store)
 app.use(router)
 app.use(i18n)
 
-// Styles are imported in `src/App.vue` <style>
-app.use(BootstrapVue, {
-  BSkeleton: { animation: 'none' },
-  BAlert: { show: true },
-  BBadge: { pill: true },
-})
+app.use(createBootstrap())
 
 app.use(VueShowdownPlugin, {
   flavor: 'github',
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 05cb003c8..a6cbd3796 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -25,6 +25,8 @@
 // For exemple, turning rounding of elements off, the bases colors, etc.
 // $enable-rounded: false;
 
+@import '~bootstrap/scss/functions.scss';
+
 $font-size-base: 0.9rem;
 $font-weight-bold: 500;
 
@@ -123,11 +125,12 @@ $custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
 );
 
 // Import default variables after the above setup to compute all other variables.
-@import '~bootstrap/scss/functions.scss';
 @import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins.scss';
-@import '~bootstrap-vue/src/variables';
+@import '~bootstrap/scss/variables-dark';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
 
 $hr-border-color: $gray-200;
 
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 6ed444d9e..f485673b9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -7,11 +7,11 @@
 
 // Dependencies SCSS imports
 // `~` allow to import a node_modules folder (resolved by Webpack)
-// @import "~bootstrap/scss/root";
+@import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/images';
-@import '~bootstrap/scss/code';
+@import '~bootstrap/scss/containers';
 @import '~bootstrap/scss/grid';
 @import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/forms';
@@ -19,18 +19,15 @@
 @import '~bootstrap/scss/transitions';
 @import '~bootstrap/scss/dropdown';
 @import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-@import '~bootstrap/scss/custom-forms';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/navbar';
 @import '~bootstrap/scss/card';
+// @import "~bootstrap/scss/accordion";
 @import '~bootstrap/scss/breadcrumb';
 // @import "~bootstrap/scss/pagination";
 @import '~bootstrap/scss/badge';
-// @import "~bootstrap/scss/jumbotron";
 @import '~bootstrap/scss/alert';
 @import '~bootstrap/scss/progress';
-// @import "~bootstrap/scss/media";
 @import '~bootstrap/scss/list-group';
 @import '~bootstrap/scss/close';
 // @import "~bootstrap/scss/toasts";
@@ -39,10 +36,16 @@
 @import '~bootstrap/scss/popover';
 // @import "~bootstrap/scss/carousel";
 @import '~bootstrap/scss/spinners';
-@import '~bootstrap/scss/utilities';
-// @import "~bootstrap/scss/print";
+@import '~bootstrap/scss/offcanvas';
+@import '~bootstrap/scss/placeholders';
 
-@import '~bootstrap-vue/src/index.scss';
+// Helpers
+@import '~bootstrap/scss/helpers';
+
+// Utilities
+@import '~bootstrap/scss/utilities/api';
+
+@import '~bootstrap-vue-next/src/styles/styles.scss';
 
 // Import fonts
 @import 'font';
diff --git a/app/vite.config.js b/app/vite.config.js
index 5086a3a44..6a5d6bacb 100644
--- a/app/vite.config.js
+++ b/app/vite.config.js
@@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'url'
 import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
 
 import supportedLocales from './src/i18n/supportedLocales'
 
@@ -46,7 +48,12 @@ export default defineConfig(({ command, mode }) => {
         },
       },
     },
-    plugins: [createVuePlugin()],
+    plugins: [
+      createVuePlugin(),
+      Components({
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
     build: {
       rollupOptions: {
         output: {

From ad2f792e8b9a2a25917365d4118890ecd83a3126 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 13 Mar 2024 19:55:20 +0100
Subject: [PATCH 05/30] refactor: rm previous light/dark theme hacks

---
 app/src/scss/_functions-override.scss | 250 --------------------------
 app/src/scss/_variables.scss          |  27 ---
 app/src/scss/main.scss                | 103 -----------
 3 files changed, 380 deletions(-)
 delete mode 100644 app/src/scss/_functions-override.scss

diff --git a/app/src/scss/_functions-override.scss b/app/src/scss/_functions-override.scss
deleted file mode 100644
index 08cf131ac..000000000
--- a/app/src/scss/_functions-override.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-@use 'sass:math';
-
-// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
-// Those functions overrides built-in bootstrap's computation color functions (that
-// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
-// variables to be used as primary colors and be instead computed on the fly with `calc()`s
-
-@function is-color($color) {
-  @if (type-of($color) == color) {
-    @return true;
-  }
-  @return false;
-}
-
-@function count-occurrences($string, $search) {
-  $searchIndex: str-index($string, $search);
-  $searchCount: 0;
-  @while $searchIndex {
-    $searchCount: $searchCount + 1;
-    $string: str-slice($string, $searchIndex + 1);
-    $searchIndex: str-index($string, $search);
-  }
-  @return $searchCount;
-}
-
-@function str-is-between($string, $first, $last) {
-  $firstCount: count-occurrences($string, $first);
-  $lastCount: count-occurrences($string, $last);
-  @return $firstCount == $lastCount;
-}
-
-@function recursive-color($color, $index: 0) {
-  $indices: (
-    0: h,
-    1: s,
-    2: l,
-    3: a,
-  );
-  // find end of part
-  $end: str-index($color, ',');
-  @while (
-    $end and not str-is-between(str-slice($color, 0, $end - 1), '(', ')')
-  ) {
-    $newEnd: str-index(str-slice($color, $end + 1), ',');
-    @if (not $newEnd) {
-      $newEnd: 0;
-    }
-    $end: 2 + $end + $newEnd;
-  }
-  @if ($end) {
-    $part: str-slice($color, 0, $end - 1);
-    $value: map-merge(
-      (
-        map-get($indices, $index): $part,
-      ),
-      recursive-color(str-slice($color, $end + 1), $index + 1)
-    );
-    @return $value;
-  }
-  @return ();
-}
-
-@function to-hsl($color) {
-  $c: inspect($color);
-
-  $h: 0;
-  $s: 0;
-  $l: 0;
-  $a: 1;
-
-  @if (is-color($color)) {
-    // std color
-    $h: hue($color);
-    $s: saturation($color);
-    $l: lightness($color);
-    $a: alpha($color);
-
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  @if (str-slice($c, 0, 3) == 'var') {
-    // var(--color)
-    $commaPos: str-index($c, ',');
-    $end: -2;
-    @if ($commaPos) {
-      $end: $commaPos - 1;
-    }
-    $var: str-slice($c, 7, $end);
-
-    $h: var(--#{$var}-h);
-    $s: var(--#{$var}-s);
-    $l: var(--#{$var}-l);
-    $a: var(--#{$var}-a, 1);
-
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  @if ($c == '0') {
-    @return (h: $h, s: $s, l: $l, a: $a);
-  }
-
-  // color is (maybe complex) calculated color
-  // e.g.: hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2)), hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2))
-  $startPos: str-index($c, '(');
-  $c: str-slice($c, $startPos + 1, -2); // 3 or 4 comma-separated vomplex values
-  @return recursive-color($c);
-  // $hEnd: str-index($c, ',');
-  // @if ($hEnd) {
-  //   $h: str-slice($c, 0, $hEnd - 1);
-  //   $c: str-slice($c, $hEnd + 1);
-  //   $sEnd: str-index($c, ',');
-  //   @if ($hEnd) {
-  //     $h: str-slice($c, 0, $hEnd - 1);
-  //     $c: str-slice($c, $hEnd + 1);
-  //     $sEnd: str-index($c, ',');
-  //   }
-  // }
-
-  // @return (h: $h, s: $s, l: $l, a: $a);
-}
-
-@function render-hsla($h, $s, $l, $a: 1) {
-  // @return hsla($h, #{$s}, #{$l}, $a);
-  // Error when using sass `hsla` with css variables, fallback to browser native `hsla`
-  @return unquote('hsla(#{$h}, #{$s}, #{$l}, #{$a})');
-}
-
-@function lighten($color, $amount) {
-  @if (is-color($color)) {
-    @return scale-color($color: $color, $lightness: $amount);
-  }
-
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-  @return render-hsla($h, $s, calc(#{$l} + #{$amount}), $a);
-}
-
-@function darken($color, $amount) {
-  @return lighten($color, $amount * -1);
-}
-
-@function rgba($red, $green, $blue: false, $alpha: false) {
-  $color: $red;
-
-  @if (not $blue and not $alpha) {
-    $alpha: $green;
-    $color: $red;
-  }
-
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  @return render-hsla($h, $s, $l, $alpha);
-}
-
-@function rgb($red, $green, $blue) {
-  @return rgba($red, $green, $blue, 1);
-}
-
-@function mix($color-1, $color-2, $weight: 50%) {
-  $c1: to-hsl($color-1);
-  $c2: to-hsl($color-2);
-
-  $h1: map-get($c1, h);
-  $s1: map-get($c1, s);
-  $l1: map-get($c1, l);
-  $a1: map-get($c1, a);
-
-  $h2: map-get($c2, h);
-  $s2: map-get($c2, s);
-  $l2: map-get($c2, l);
-  $a2: map-get($c2, a);
-
-  $h: calc((#{$h1} + #{$h2}) / 2);
-  $s: calc((#{$s1} + #{$s2}) / 2);
-  $l: calc((#{$l1} + #{$l2}) / 2);
-  $a: calc((#{$a1} + #{$a2}) / 2);
-
-  @return render-hsla($h, $s, $l, $a);
-}
-
-@function fade-in($color, $amount) {
-  $c: to-hsl($color);
-
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-  @if (not $a) {
-    $a: 1;
-  }
-
-  @return render-hsla($h, $s, $l, $a + $amount);
-}
-
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-  @if (is-color($color)) {
-    $r: red($color);
-    $g: green($color);
-    $b: blue($color);
-
-    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-    @if ($yiq >= $yiq-contrasted-threshold) {
-      @return $dark;
-    } @else {
-      @return $light;
-    }
-  } @else {
-    $c: to-hsl($color);
-    $l: map-get($c, l);
-
-    $th: calc($yiq-contrasted-threshold / 2.56); // convert hex to dec
-    $lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
-
-    // ignoring hue and saturation, just a light or dark gray
-    @return render-hsla(0, 0%, $lightness, 1);
-  }
-}
-
-// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a?permalink_comment_id=4053335#gistcomment-4053335
-@function theme-color-level($color-name: 'primary', $level: 0) {
-  $color: theme-color($color-name);
-  @if ($level == 0) {
-    @return $color;
-  }
-
-  $amount: math.div($theme-color-interval * abs($level), 100%);
-  $c: to-hsl($color);
-  $h: map-get($c, h);
-  $s: map-get($c, s);
-  $l: map-get($c, l);
-  $a: map-get($c, a);
-
-  @if ($level > 0) {
-    // Darken -X%: L = L * (1 - X)
-    // $rl: calc((#{$l} * #{1 - $amount}));
-    $rl: calc((#{$l} * #{$amount}));
-    @return render-hsla($h, $s, $rl, $a);
-  }
-  @if ($level < 0) {
-    // Ligthen +X%: L = L + X * (100 - L)
-    $rl: calc(#{$l} + #{$amount} * (100% - #{$l}));
-    @return render-hsla($h, $s, $rl, $a);
-  }
-}
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index a6cbd3796..635adaf35 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -57,15 +57,6 @@ $theme-colors: (
   'best': $purple,
 );
 
-$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
-
-$alert-bg-level: -10;
-$alert-border-level: -9;
-$alert-color-level: 5;
-
-$list-group-item-bg-level: -11;
-$list-group-item-color-level: 6;
-
 $code-color: $black;
 
 // Replace font-weight 300 with 200
@@ -107,25 +98,7 @@ $card-spacer-x: 1rem;
 
 $list-group-item-padding-x: 1rem;
 
-// Hard coded for scss compilation to pass
-$b-toast-background-opacity: 100%;
-
-// fixes for svg icon color not working with css variables
-@function get-checkbox-icon-checked($color) {
-  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
-}
-
-@function get-checkbox-icon-indeterminate($color) {
-  @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$color}' d='M0 2h4'/></svg>");
-}
-
-$custom-checkbox-indicator-icon-checked: get-checkbox-icon-checked('%23fff');
-$custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
-  '%23fff'
-);
-
 // Import default variables after the above setup to compute all other variables.
-@import '_functions-override.scss';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/variables-dark';
 @import '~bootstrap/scss/maps';
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index f485673b9..2afaecb7c 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -51,109 +51,6 @@
 @import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
-// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
-@mixin hsl-color($name, $h, $s, $l) {
-  --#{$name}: hsl(#{$h}, #{$s}, #{$l});
-  --#{$name}-h: #{$h};
-  --#{$name}-s: #{$s};
-  --#{$name}-l: #{$l};
-}
-
-:root {
-  color-scheme: light;
-
-  --yiq-contrasted-threshold: 150;
-
-  @include hsl-color('white', 0, 0%, 100%);
-  @include hsl-color('black', 0, 0%, 0%);
-  @include hsl-color('blue', 211, 64%, 50%);
-  @include hsl-color('indigo', 263, 90%, 51%);
-  @include hsl-color('purple', 280, 61%, 50%);
-  @include hsl-color('pink', 332, 79%, 58%);
-  @include hsl-color('red', 354, 70%, 54%);
-  @include hsl-color('orange', 27, 98%, 54%);
-  @include hsl-color('yellow', 45, 100%, 66%);
-  @include hsl-color('green', 134, 61%, 41%);
-  @include hsl-color('teal', 162, 73%, 46%);
-  @include hsl-color('cyan', 188, 78%, 41%);
-
-  @include hsl-color('gray-100', 210, 17%, 98%);
-  @include hsl-color('gray-200', 210, 16%, 93%);
-  @include hsl-color('gray-300', 210, 14%, 89%);
-  @include hsl-color('gray-400', 210, 14%, 83%);
-  @include hsl-color('gray-500', 210, 11%, 71%);
-  @include hsl-color('gray-600', 208, 7%, 46%);
-  @include hsl-color('gray-700', 210, 9%, 31%);
-  @include hsl-color('gray-800', 210, 10%, 23%);
-  @include hsl-color('gray-900', 210, 11%, 15%);
-
-  // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-  @each $color, $value in $theme-colors {
-    @include list-group-item-variant(
-      $color,
-      theme-color-level($color, $list-group-item-bg-level),
-      theme-color-level($color, $list-group-item-color-level)
-    );
-
-    .btn-#{$color} {
-      &:focus,
-      &.focus {
-        box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.3);
-      }
-    }
-  }
-}
-
-[dark-theme='true'] {
-  color-scheme: dark; // Ask browser to use dark mode native styling
-
-  --yiq-contrasted-threshold: 120;
-
-  @include hsl-color('white', 256, 0%, 12.5%);
-  @include hsl-color('black', 256, 0%, 100%);
-  @include hsl-color('blue', 210.7, 95.5%, 65.5%);
-  @include hsl-color('purple', 280, 77.8%, 62.9%);
-  @include hsl-color('red', 0, 100%, 67.6%);
-  @include hsl-color('green', 134.3, 74.4%, 67.8%);
-  @include hsl-color('cyan', 188.4, 91.4%, 72.5%);
-
-  @include hsl-color('gray-900', 256, 0%, 98%);
-  @include hsl-color('gray-800', 256, 0%, 93%);
-  @include hsl-color('gray-700', 256, 0%, 89%);
-  @include hsl-color('gray-600', 256, 0%, 83%);
-  @include hsl-color('gray-500', 256, 0%, 71%);
-  @include hsl-color('gray-400', 256, 0%, 46%);
-  @include hsl-color('gray-300', 256, 0%, 31%);
-  @include hsl-color('gray-200', 256, 0%, 23%);
-  @include hsl-color('gray-100', 256, 0%, 15%);
-
-  @each $color, $value in $theme-colors {
-    @include list-group-item-variant(
-      $color,
-      theme-color-level($color, -6),
-      theme-color-level($color, 2)
-    );
-
-    .alert-#{$color} {
-      @include alert-variant(
-        theme-color-level($color, -6),
-        theme-color-level($color, -5),
-        theme-color-level($color, 2)
-      );
-    }
-  }
-
-  // FIX svg fill not working with CSS variables
-  .custom-checkbox .custom-control-input {
-    &:checked ~ .custom-control-label::after {
-      background-image: escape-svg(get-checkbox-icon-checked('#202020'));
-    }
-
-    &:indeterminate ~ .custom-control-label::after {
-      background-image: escape-svg(get-checkbox-icon-indeterminate('#202020'));
-    }
-  }
-}
 
 // Style overrides happens after dependencies imports
 

From 4f047d92d332a9be0451c6caa1b63eca757f8394 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 13:39:11 +0100
Subject: [PATCH 06/30] migration(vue3): COMPONENT_V_MODEL

---
 app/src/components/globals/ViewSearch.vue        |  4 ++--
 .../globals/formItems/CheckboxItem.vue           |  5 ++---
 .../components/globals/formItems/FileItem.vue    |  2 +-
 .../components/globals/formItems/TagsItem.vue    |  4 ++--
 app/src/views/app/AppCatalog.vue                 | 16 ++++++++--------
 app/src/views/tool/ToolFirewall.vue              |  5 ++---
 app/src/views/user/UserEdit.vue                  |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 94073c989..de6912b03 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -11,8 +11,8 @@
 
         <BFormInput
           id="top-bar-search"
-          :value="search"
-          @input="$emit('update:search', $event)"
+          :modelValue="search"
+          @update:modelValue="$emit('update:search', $event)"
           :placeholder="
             $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 8eb1b0319..7da516a77 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,8 +1,7 @@
 <template>
-  <!-- FIXME vue3 - `modelValue`+`@update:model` doesn't work here, probably to the prop's name not being `value`. Sticking for now to `checked`+`@input` -->
   <BFormCheckbox
-    :checked="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 02d7f3f51..07392692a 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -19,7 +19,7 @@
       :drop-placeholder="dropPlaceholder"
       :state="state"
       :browse-text="$t('words.browse')"
-      @input="onInput"
+      @update:modelValue="onInput"
       @blur="$parent.$emit('touch', name)"
       @focusout="$parent.$emit('touch', name)"
     />
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 55dbdf29f..d19377521 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,7 +1,7 @@
 <template>
   <BFormTags
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5f6afe7f6..40ded865e 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -16,14 +16,14 @@
           <BFormInput
             id="search-input"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
-            :value="search"
-            @input="updateQuery('search', $event)"
+            :modelValue="search"
+            @update:modelValue="updateQuery('search', $event)"
           />
           <BInputGroupAppend>
             <BFormSelect
-              :value="quality"
+              :modelValue="quality"
               :options="qualityOptions"
-              @change="updateQuery('quality', $event)"
+              @update:modelValue="updateQuery('quality', $event)"
             />
           </BInputGroupAppend>
         </BInputGroup>
@@ -34,9 +34,9 @@
             <YIcon iname="filter" />
           </BInputGroupPrepend>
           <BFormSelect
-            :value="category"
+            :modelValue="category"
             :options="categories"
-            @change="updateQuery('category', $event)"
+            @update:modelValue="updateQuery('category', $event)"
           />
           <BInputGroupAppend>
             <BButton
@@ -63,9 +63,9 @@
           />
           <BFormSelect
             id="subtags-select"
-            :value="subtag"
+            :modelValue="subtag"
             :options="subtags"
-            @change="updateQuery('subtag', $event)"
+            @update:modelValue="updateQuery('subtag', $event)"
           />
         </BInputGroup>
       </div>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c86e61058..9e6d35b9c 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -20,10 +20,9 @@
           <template #cell()="data">
             <BFormCheckbox
               v-if="data.field.key !== 'uPnP'"
-              class="on-off-switch"
-              v-model="data.value"
+              :modelValue="data.value"
               switch
-              @change="
+              @update:modelValue="
                 onTablePortToggling(
                   data.item.port,
                   protocol,
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 93b040156..4e6418b6d 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -168,7 +168,7 @@ export default {
       fields: {
         username: {
           label: this.$t('user_username'),
-          value: this.name,
+          modelValue: this.name,
           props: { id: 'username', disabled: true },
         },
 

From 5892842cec96df5bf67757538f82b27e0c3d0e5f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 16:52:28 +0100
Subject: [PATCH 07/30] migration: rework dark theme enabling

---
 app/src/App.vue                               | 11 +++++++----
 app/src/components/globals/YListGroupItem.vue |  2 +-
 app/src/components/globals/YSpinner.vue       |  2 +-
 app/src/main.js                               |  4 ++--
 app/src/store/settings.js                     | 19 +++++++++++--------
 app/src/views/diagnosis/DiagnosisView.vue     |  2 +-
 app/src/views/tool/ToolWebadmin.vue           |  4 ++--
 app/src/views/update/SystemUpdate.vue         |  4 ++--
 8 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 65f22e43a..3608feb2d 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,7 +8,7 @@
           :disabled="waiting"
           exact-active-class="active"
         >
-          <span v-if="theme">
+          <span v-if="dark">
             <img alt="YunoHost logo" src="./assets/logo_light.png" width="40" />
           </span>
           <span v-else>
@@ -116,7 +116,7 @@ export default {
       'transitions',
       'transitionName',
       'waiting',
-      'theme',
+      'dark',
       'ssoLink',
     ]),
   },
@@ -184,8 +184,11 @@ export default {
     if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
       this.$store.commit('SET_SPINNER', 'spookycat')
     }
-
-    document.documentElement.setAttribute('dark-theme', this.theme) // updates the data-theme attribute
+    // updates the data-bs-theme attribute
+    document.documentElement.setAttribute(
+      'data-bs-theme',
+      this.dark ? 'dark' : 'light',
+    )
   },
 }
 </script>
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index cf2cc82ab..daf32ac04 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -63,7 +63,7 @@ export default {
     &-#{$color} {
       color: theme-color-level($color, 6);
 
-      [dark-theme='true'] & {
+      [data-bs-theme='light'] & {
         color: theme-color-level($color, -6);
       }
 
diff --git a/app/src/components/globals/YSpinner.vue b/app/src/components/globals/YSpinner.vue
index 388e80d57..a5741d68c 100644
--- a/app/src/components/globals/YSpinner.vue
+++ b/app/src/components/globals/YSpinner.vue
@@ -25,7 +25,7 @@ export default {
     background-image: url('../../assets/spinners/pacman_dark.gif');
     animation-name: back-and-forth-pacman;
 
-    [dark-theme='true'] & {
+    [data-bs-theme='dark'] & {
       background-image: url('../../assets/spinners/pacman_light.gif');
     }
 
diff --git a/app/src/main.js b/app/src/main.js
index 4b636d710..77627699d 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -40,7 +40,7 @@ app.config.globalProperties.$askConfirmation = function (message, props) {
     bodyClass: [
       'font-weight-bold',
       'rounded-top',
-      store.state.theme ? 'text-white' : 'text-black',
+      store.state.dark ? 'text-white' : 'text-black',
     ],
     ...props,
   })
@@ -58,7 +58,7 @@ app.config.globalProperties.$askMdConfirmation = function (
     okTitle: this.$t('yes'),
     cancelTitle: this.$t('cancel'),
     headerBgVariant: 'warning',
-    headerClass: store.state.theme ? 'text-white' : 'text-black',
+    headerClass: store.state.dark ? 'text-white' : 'text-black',
     centered: true,
     ...props,
   })
diff --git a/app/src/store/settings.js b/app/src/store/settings.js
index 68ba324ce..67a5d1a91 100644
--- a/app/src/store/settings.js
+++ b/app/src/store/settings.js
@@ -12,7 +12,7 @@ export default {
     fallbackLocale: localStorage.getItem('fallbackLocale'),
     cache: localStorage.getItem('cache') !== 'false',
     transitions: localStorage.getItem('transitions') !== 'false',
-    theme: localStorage.getItem('theme') === 'true',
+    dark: localStorage.getItem('dark') === 'true',
     experimental: localStorage.getItem('experimental') === 'true',
     spinner: 'pacman',
     supportedLocales,
@@ -48,10 +48,13 @@ export default {
       state.spinner = spinner
     },
 
-    SET_THEME(state, boolean) {
-      localStorage.setItem('theme', boolean)
-      state.theme = boolean
-      document.documentElement.setAttribute('dark-theme', boolean)
+    SET_DARK(state, boolean) {
+      localStorage.setItem('dark', boolean)
+      state.dark = boolean
+      document.documentElement.setAttribute(
+        'data-bs-theme',
+        boolean ? 'dark' : 'light',
+      )
     },
   },
 
@@ -68,8 +71,8 @@ export default {
       })
     },
 
-    UPDATE_THEME({ commit }, theme) {
-      commit('SET_THEME', theme)
+    UPDATE_DARK({ commit }, boolean) {
+      commit('SET_DARK', boolean)
     },
   },
 
@@ -78,7 +81,7 @@ export default {
     fallbackLocale: (state) => state.fallbackLocale,
     cache: (state) => state.cache,
     transitions: (state) => state.transitions,
-    theme: (state) => state.theme,
+    dark: (state) => state.dark,
     experimental: (state) => state.experimental,
     spinner: (state) => state.spinner,
 
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 58549cee1..1e99f9d33 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {
diff --git a/app/src/views/tool/ToolWebadmin.vue b/app/src/views/tool/ToolWebadmin.vue
index cd053f953..1b172e0db 100644
--- a/app/src/views/tool/ToolWebadmin.vue
+++ b/app/src/views/tool/ToolWebadmin.vue
@@ -63,7 +63,7 @@ export default {
           props: { labels: { true: 'enabled', false: 'disabled' } },
         },
 
-        theme: {
+        dark: {
           id: 'theme',
           label: this.$t('tools_webadmin.theme'),
           component: 'CheckboxItem',
@@ -77,7 +77,7 @@ export default {
 
   computed: {
     // Those are set/get computed properties
-    ...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
+    ...mapStoreGetSet(['locale', 'fallbackLocale', 'dark'], 'dispatch'),
     ...mapStoreGetSet(['cache', 'transitions', 'experimental']),
   },
 
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 349e33075..74a1bd9c7 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -91,7 +91,7 @@
       id="apps-pre-upgrade"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
-      :header-class="theme ? 'text-white' : 'text-black'"
+      :header-class="dark ? 'text-white' : 'text-black'"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
@@ -166,7 +166,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['theme']),
+    ...mapGetters(['dark']),
   },
 
   methods: {

From c7bd9af3a2a3ec3878b132144581626825c1e90e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 16:53:44 +0100
Subject: [PATCH 08/30] migration(bvn): add BSkeleton & BSkeletonWrapper
 component missing in bootstrap-vue-next

---
 .../globals/skeletons/BSkeleton.vue           | 34 +++++++++++++++++++
 .../globals/skeletons/BSkeletonWrapper.vue    | 22 ++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 app/src/components/globals/skeletons/BSkeleton.vue
 create mode 100644 app/src/components/globals/skeletons/BSkeletonWrapper.vue

diff --git a/app/src/components/globals/skeletons/BSkeleton.vue b/app/src/components/globals/skeletons/BSkeleton.vue
new file mode 100644
index 000000000..a9b7e2ba7
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeleton.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :style="{ height, width }" class="b-skeleton" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeleton',
+
+  props: {
+    height: { type: String, required: true },
+    width: { type: String, required: true },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: $gray-200;
+  cursor: wait;
+
+  height: $font-size-base;
+  margin-bottom: map-get($spacers, 1);
+
+  @if $enable-rounded {
+    border-radius: 0.25rem;
+  }
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
+}
+</style>
diff --git a/app/src/components/globals/skeletons/BSkeletonWrapper.vue b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
new file mode 100644
index 000000000..0d4932556
--- /dev/null
+++ b/app/src/components/globals/skeletons/BSkeletonWrapper.vue
@@ -0,0 +1,22 @@
+<template>
+  <div v-if="loading" class="b-skeleton-wrapper">
+    <slot name="loading" />
+  </div>
+  <slot v-else name="default" />
+</template>
+
+<script>
+export default {
+  name: 'BSkeletonWrapper',
+
+  props: {
+    loading: { type: Boolean, default: false },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.b-skeleton-wrapper {
+  cursor: wait;
+}
+</style>

From 6241ba4382c88f93f05e9b3228da3fe79066f6e0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 19:52:07 +0100
Subject: [PATCH 09/30] migration(bs5): media-breakpoint-down(): use breakpoint
 itself instead of next breakpoint

---
 app/src/components/QueryHeader.vue            | 2 +-
 app/src/components/globals/DescriptionRow.vue | 2 +-
 app/src/components/globals/ReadOnlyField.vue  | 2 +-
 app/src/components/globals/TopBar.vue         | 4 ++--
 app/src/scss/main.scss                        | 6 +++---
 app/src/views/_partials/HistoryConsole.vue    | 2 +-
 app/src/views/service/ServiceList.vue         | 2 +-
 app/src/views/tool/ToolFirewall.vue           | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 321288bb5..91a1c1941 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -133,7 +133,7 @@ time {
   margin-left: 0.5rem;
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .xs-hide .request-desc {
     display: none;
   }
diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
index e7265c3df..991d0742a 100644
--- a/app/src/components/globals/DescriptionRow.vue
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -42,7 +42,7 @@ export default {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
 
     &:not(:last-of-type) {
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 0a631a691..7948964ed 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -56,7 +56,7 @@ export default {
   @include media-breakpoint-up(md) {
     margin: 1rem 0;
   }
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
     &:not(:last-of-type) {
       margin-bottom: 0.5rem;
diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index 171eaed2e..72ba209e1 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -55,13 +55,13 @@ export default {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     .top-bar-group {
       flex-direction: column-reverse;
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column-reverse;
 
     #top-bar-right {
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 2afaecb7c..c1a1867e9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -115,7 +115,7 @@ body {
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column;
 
     &:not(:last-of-type) {
@@ -190,14 +190,14 @@ h3.card-title {
   display: flex;
   justify-content: space-between;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     .buttons {
       flex-direction: column;
       justify-content: space-between;
     }
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     flex-direction: column-reverse;
     margin-bottom: 2rem;
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 022fc0d03..e3bd1b178 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -247,7 +247,7 @@ export default {
     align-items: center;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     margin-left: -15px;
     width: calc(100% + 30px);
 
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 789a3eed0..8d0731e2e 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   h5 small {
     display: block;
     margin-top: 0.25rem;
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 9e6d35b9c..c426d82ae 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -313,7 +313,7 @@ export default {
   }
   span {
     visibility: hidden;
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       display: none;
     }
   }
@@ -326,7 +326,7 @@ export default {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     fieldset {
       width: 100%;
     }

From 9eb4b29cb87570e22860ffd019ecb559ca4c99a9 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 20:15:38 +0100
Subject: [PATCH 10/30] migration(bs5): update to new color functions

---
 app/src/components/CardCollapse.vue           | 2 +-
 app/src/components/RecursiveListGroup.vue     | 5 +++--
 app/src/components/globals/YIcon.vue          | 2 +-
 app/src/components/globals/YListGroupItem.vue | 6 +++---
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index ef6471686..37726594c 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -78,7 +78,7 @@ export default {
   @each $color, $value in $theme-colors {
     &-#{$color} {
       background-color: $value;
-      color: color-yiq($value);
+      color: color-contrast($value);
     }
   }
 }
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 2e30a3dc6..9a781ce97 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -112,8 +112,9 @@ export default {
     text-decoration: none;
     background-color: $list-group-hover-bg;
 
-    @include hover-focus() {
-      background-color: darken($list-group-hover-bg, 3%);
+    &:hover,
+    &:focus {
+      background-color: shade-color($gray-100, 3%);
     }
   }
 }
diff --git a/app/src/components/globals/YIcon.vue b/app/src/components/globals/YIcon.vue
index 15fbcc8ce..e25beedc8 100644
--- a/app/src/components/globals/YIcon.vue
+++ b/app/src/components/globals/YIcon.vue
@@ -48,7 +48,7 @@ export default {
     @each $color, $value in $theme-colors {
       &.#{$color} {
         background-color: $value;
-        color: color-yiq($value);
+        color: color-contrast($value);
       }
     }
   }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index daf32ac04..3ed5c9f44 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -61,15 +61,15 @@ export default {
 
   @each $color, $value in $theme-colors {
     &-#{$color} {
-      color: theme-color-level($color, 6);
+      color: tint-color($value, 50%);
 
       [data-bs-theme='light'] & {
-        color: theme-color-level($color, -6);
+        color: shade-color($value, 60%);
       }
 
       .yuno-list-group-item-status {
         background-color: $value;
-        color: color-yiq($value);
+        color: color-contrast($value);
       }
     }
   }

From 6d26ef596d3230f1450a5447edf430b224933efb Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 20:28:06 +0100
Subject: [PATCH 11/30] migration(bs5): rename left/right classes to start/end

---
 app/src/App.vue                                  |  4 ++--
 app/src/components/CardCollapse.vue              |  2 +-
 app/src/components/QueryHeader.vue               |  8 ++++----
 app/src/components/RecursiveListGroup.vue        |  2 +-
 app/src/components/globals/FormField.vue         |  2 +-
 app/src/components/globals/YAlert.vue            |  2 +-
 app/src/components/globals/YCard.vue             |  8 ++++----
 .../components/globals/formItems/ButtonItem.vue  |  2 +-
 .../globals/formItems/ReadOnlyAlertItem.vue      |  2 +-
 .../globals/skeletons/CardFormSkeleton.vue       |  2 +-
 .../globals/skeletons/CardListSkeleton.vue       |  2 +-
 app/src/views/HomeView.vue                       |  4 ++--
 app/src/views/_partials/DomainForm.vue           |  6 +++---
 app/src/views/_partials/HistoryConsole.vue       |  6 +++---
 app/src/views/_partials/ReconnectingDisplay.vue  |  2 +-
 app/src/views/app/AppCatalog.vue                 |  6 +++---
 app/src/views/app/AppInfo.vue                    | 14 +++++++-------
 app/src/views/app/AppInstall.vue                 |  6 +++---
 app/src/views/app/AppList.vue                    |  4 ++--
 app/src/views/backup/BackupCreate.vue            | 16 ++++++++--------
 app/src/views/backup/BackupInfo.vue              |  8 ++++----
 app/src/views/backup/BackupList.vue              |  4 ++--
 app/src/views/backup/BackupView.vue              |  4 ++--
 app/src/views/diagnosis/DiagnosisView.vue        |  8 ++++----
 app/src/views/domain/DomainInfo.vue              |  4 ++--
 app/src/views/domain/DomainList.vue              |  4 ++--
 app/src/views/service/ServiceList.vue            |  4 ++--
 app/src/views/tool/ToolList.vue                  |  4 ++--
 app/src/views/tool/ToolLogs.vue                  |  2 +-
 app/src/views/tool/ToolMigrations.vue            |  2 +-
 app/src/views/user/UserList.vue                  |  4 ++--
 31 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 3608feb2d..773da1524 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -16,7 +16,7 @@
           </span>
         </BNavbarBrand>
 
-        <BNavbarNav class="ml-auto">
+        <BNavbarNav class="ms-auto">
           <li class="nav-item">
             <BButton :href="ssoLink" variant="primary" size="sm" block>
               {{ $t('user_interface_link') }} <YIcon iname="user" />
@@ -85,7 +85,7 @@
           <BNavText
             v-if="yunohost"
             id="yunohost-version"
-            class="ml-md-auto text-center"
+            class="ms-md-auto text-center"
           >
             <span v-html="$t('footer_version', yunohost)" />
           </BNavText>
diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
index 37726594c..c36db2c19 100644
--- a/app/src/components/CardCollapse.vue
+++ b/app/src/components/CardCollapse.vue
@@ -9,7 +9,7 @@
             class="card-collapse-button"
           >
             {{ title }}
-            <YIcon class="ml-auto" iname="chevron-right" />
+            <YIcon class="ms-auto" iname="chevron-right" />
           </BButton>
         </h2>
       </slot>
diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
index 91a1c1941..456a437de 100644
--- a/app/src/components/QueryHeader.vue
+++ b/app/src/components/QueryHeader.vue
@@ -15,12 +15,12 @@
     <div v-if="request.errors || request.warnings">
       <!-- WEBSOCKET ERRORS COUNT -->
       <span class="count" v-if="request.errors">
-        {{ request.errors }}<YIcon iname="bug" class="text-danger ml-1" />
+        {{ request.errors }}<YIcon iname="bug" class="text-danger ms-1" />
       </span>
       <!-- WEBSOCKET WARNINGS COUNT -->
       <span class="count" v-if="request.warnings">
         {{ request.warnings
-        }}<YIcon iname="warning" class="text-warning ml-1" />
+        }}<YIcon iname="warning" class="text-warning ms-1" />
       </span>
     </div>
 
@@ -29,7 +29,7 @@
       v-if="showError && request.error"
       size="sm"
       pill
-      class="error-btn ml-auto py-0"
+      class="error-btn ms-auto py-0"
       variant="danger"
       @click="reviewError"
     >
@@ -40,7 +40,7 @@
     <time
       v-if="showTime"
       :datetime="hour(request.date)"
-      :class="request.error ? 'ml-2' : 'ml-auto'"
+      :class="request.error ? 'ms-2' : 'ms-auto'"
     >
       {{ hour(request.date) }}
     </time>
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 9a781ce97..9c5645369 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -15,7 +15,7 @@
           :aria-expanded="node.data.opened ? 'true' : 'false'"
           :aria-controls="'collapse-' + node.id"
           :class="node.data.opened ? 'not-collapsed' : 'collapsed'"
-          class="ml-2"
+          class="ms-2"
           @click.stop="node.data.opened = !node.data.opened"
         >
           <span class="sr-only">{{ toggleText }}</span>
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index e08692e74..7a6d4d00a 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -28,7 +28,7 @@
       <!-- Render description -->
       <template v-if="description || link">
         <div class="d-flex">
-          <BLink v-if="link" :to="link" :href="link.href" class="ml-auto">
+          <BLink v-if="link" :to="link" :href="link.href" class="ms-auto">
             {{ link.text }}
           </BLink>
         </div>
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 5cc9a8533..2032c42a6 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -6,7 +6,7 @@
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
   >
-    <YIcon :iname="_icon" class="mr-md-3 mb-md-0 mb-2 md" />
+    <YIcon :iname="_icon" class="me-md-3 mb-md-0 mb-2 md" />
 
     <div class="w-100">
       <slot name="default" />
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index edf6c5b54..a75564295 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -4,7 +4,7 @@
       <div class="w-100 d-flex align-items-center flex-wrap custom-header">
         <slot name="header">
           <Component :is="titleTag" class="custom-header-title">
-            <YIcon v-if="icon" :iname="icon" class="mr-2" />{{ title }}
+            <YIcon v-if="icon" :iname="icon" class="me-2" />{{ title }}
           </Component>
           <slot name="header-next" />
         </slot>
@@ -13,7 +13,7 @@
           v-if="hasButtons"
           class="mt-2 w-100 custom-header-buttons"
           :class="{
-            [`ml-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]:
+            [`ms-${buttonUnbreak}-auto mt-${buttonUnbreak}-0 w-${buttonUnbreak}-auto`]:
               buttonUnbreak,
           }"
         >
@@ -26,11 +26,11 @@
         @click="visible = !visible"
         size="sm"
         variant="outline-secondary"
-        class="align-self-center ml-auto"
+        class="align-self-center ms-auto"
         :class="{
           'not-collapsed': visible,
           collapsed: !visible,
-          [`ml-${buttonUnbreak}-2`]: buttonUnbreak,
+          [`ms-${buttonUnbreak}-2`]: buttonUnbreak,
         }"
       >
         <YIcon iname="chevron-right" />
diff --git a/app/src/components/globals/formItems/ButtonItem.vue b/app/src/components/globals/formItems/ButtonItem.vue
index 5bd09ad99..bac857995 100644
--- a/app/src/components/globals/formItems/ButtonItem.vue
+++ b/app/src/components/globals/formItems/ButtonItem.vue
@@ -6,7 +6,7 @@
     :disabled="!enabled"
     class="d-block mb-3"
   >
-    <YIcon :iname="icon_" class="mr-2" />
+    <YIcon :iname="icon_" class="me-2" />
     <span v-html="label" />
   </BButton>
 </template>
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index aa70ea26c..851bfafb1 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -4,7 +4,7 @@
     :variant="type"
     show
   >
-    <YIcon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
+    <YIcon :iname="icon_" class="me-md-3 mb-md-0 mb-2" :variant="type" />
 
     <VueShowdown :markdown="label" tag="span" class="markdown" />
   </BAlert>
diff --git a/app/src/components/globals/skeletons/CardFormSkeleton.vue b/app/src/components/globals/skeletons/CardFormSkeleton.vue
index 4cf810cfe..9b9cae02c 100644
--- a/app/src/components/globals/skeletons/CardFormSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardFormSkeleton.vue
@@ -23,7 +23,7 @@
           >
             <BSkeleton width="100%" height="38px" />
 
-            <BSkeleton width="38px" height="38px" class="ml-2" />
+            <BSkeleton width="38px" height="38px" class="ms-2" />
           </div>
 
           <BSkeleton v-else width="100%" height="38px" />
diff --git a/app/src/components/globals/skeletons/CardListSkeleton.vue b/app/src/components/globals/skeletons/CardListSkeleton.vue
index 0726603b7..277b37565 100644
--- a/app/src/components/globals/skeletons/CardListSkeleton.vue
+++ b/app/src/components/globals/skeletons/CardListSkeleton.vue
@@ -10,7 +10,7 @@
           <BSkeleton
             :width="randint(50, 100) + '%'"
             height="24px"
-            class="mr-3"
+            class="me-3"
           />
         </div>
         <BSkeleton :width="randint(30, 80) + '%'" height="24px" class="m-0" />
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index ae303438d..514bfdd4f 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -6,9 +6,9 @@
         :key="item.routeName"
         :to="{ name: item.routeName }"
       >
-        <YIcon :iname="item.icon" class="lg ml-1" />
+        <YIcon :iname="item.icon" class="lg ms-1" />
         <h4>{{ $t(item.translation) }}</h4>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 28de1fba9..8fe717304 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -26,7 +26,7 @@
     <BCollapse id="collapse-domain" v-model:visible="domainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_registrar_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_registrar_desc')" />
       </p>
 
       <FormField
@@ -53,7 +53,7 @@
     <BCollapse id="collapse-dynDomain" v-model:visible="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_yunohost_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_yunohost_desc')" />
       </p>
 
       <FormField
@@ -98,7 +98,7 @@
     <BCollapse id="collapse-localDomain" v-model:visible="localDomainIsVisible">
       <p class="mt-2 alert alert-info">
         <YIcon iname="info-circle" />
-        <span class="pl-1" v-html="$t('domain.add.from_local_desc')" />
+        <span class="ps-1" v-html="$t('domain.add.from_local_desc')" />
       </p>
 
       <FormField
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index e3bd1b178..73ab25e0b 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -25,7 +25,7 @@
         v-if="lastAction"
         size="sm"
         pill
-        class="ml-auto py-0"
+        class="ms-auto py-0"
         :variant="open ? 'light' : 'best'"
         @click.prevent="onLastActionClick"
         @keyup.enter.space.prevent="onLastActionClick"
@@ -35,7 +35,7 @@
       <QueryHeader
         v-if="lastAction"
         :request="lastAction"
-        class="w-auto ml-2 xs-hide"
+        class="w-auto ms-2 xs-hide"
       />
     </BCardHeader>
 
@@ -50,7 +50,7 @@
           v-for="(action, i) in history"
           :key="i"
           no-body
-          class="rounded-0 rounded-top border-left-0 border-right-0"
+          class="rounded-0 rounded-top border-start-0 border-right-0"
         >
           <!-- ACTION -->
           <BCardHeader
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index 65e94c4a4..be8094c63 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -22,7 +22,7 @@
         <BButton
           variant="success"
           v-t="'retry'"
-          class="ml-auto"
+          class="ms-auto"
           @click="tryToReconnect()"
         />
       </div>
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 40ded865e..ba5b1c403 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -120,7 +120,7 @@
 
               <small
                 v-if="app.state !== 'working' || app.high_quality"
-                class="d-flex align-items-center ml-2 position-relative"
+                class="d-flex align-items-center ms-2 position-relative"
               >
                 <BBadge
                   v-if="app.state !== 'working'"
@@ -195,11 +195,11 @@
       <BCardGroup deck>
         <BCard v-for="i in 15" :key="i" no-body style="min-height: 10rem">
           <div class="d-flex w-100 mt-auto">
-            <BSkeleton width="30px" height="30px" class="mr-2 ml-auto" />
+            <BSkeleton width="30px" height="30px" class="me-2 ms-auto" />
             <BSkeleton
               :width="randint(30, 70) + '%'"
               height="30px"
-              class="mr-auto"
+              class="me-auto"
             />
           </div>
           <BSkeleton
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 435074de5..4226ffd86 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -20,7 +20,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_install')"
         >
           <YIcon iname="check" />
@@ -51,7 +51,7 @@
         <BButton
           variant="primary"
           size="sm"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
           @click="dismissNotification('post_upgrade')"
         >
           <YIcon iname="check" />
@@ -83,7 +83,7 @@
           :href="app.url"
           target="_blank"
           variant="success"
-          class="ml-auto mr-2"
+          class="ms-auto me-2"
         >
           <YIcon iname="external-link" />
           {{ $t('app.open_this_app') }}
@@ -93,7 +93,7 @@
           v-b-modal.uninstall-modal
           id="uninstall"
           variant="danger"
-          :class="{ 'ml-auto': !app.url }"
+          :class="{ 'ms-auto': !app.url }"
         >
           <YIcon iname="trash-o" />
           {{ $t('uninstall') }}
@@ -196,7 +196,7 @@
             size="sm"
             :to="{ name: 'group-list' }"
             variant="info"
-            class="ml-2"
+            class="ms-2"
           >
             <YIcon iname="key-modern" />
             {{ $t('groups_and_permissions_manage') }}
@@ -274,7 +274,7 @@
       <BTabs card fill pills>
         <BTab v-for="[name, content] in app.doc.admin" :key="name">
           <template #title>
-            <YIcon iname="book" class="mr-2" />
+            <YIcon iname="book" class="me-2" />
             {{ name === 'admin' ? $t('app.doc.admin.title') : name }}
           </template>
           <VueShowdown :markdown="content" />
@@ -331,7 +331,7 @@
       <BListGroup flush>
         <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
           <BLink :href="link" target="_blank">
-            <YIcon :iname="appLinksIcons(key)" class="mr-1" />
+            <YIcon :iname="appLinksIcons(key)" class="me-1" />
             {{ $t('app.links.' + key) }}
           </BLink>
         </YListGroupItem>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4922d9532..e6a4b6d85 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -12,7 +12,7 @@
             :href="app.demo"
             target="_blank"
             variant="primary"
-            class="ml-auto"
+            class="ms-auto"
           >
             <YIcon iname="external-link" />
             {{ $t('app.install.try_demo') }}
@@ -90,7 +90,7 @@
         <BListGroup flush>
           <YListGroupItem v-for="[key, link] in app.links" :key="key" no-status>
             <BLink :href="link" target="_blank">
-              <YIcon :iname="appLinksIcons(key)" class="mr-1" />
+              <YIcon :iname="appLinksIcons(key)" class="me-1" />
               {{ $t('app.links.' + key) }}
             </BLink>
           </YListGroupItem>
@@ -105,7 +105,7 @@
           <dl class="antifeatures">
             <div v-for="antifeature in app.antifeatures" :key="antifeature.id">
               <dt class="d-inline">
-                <YIcon :iname="antifeature.icon" class="md mr-1" />
+                <YIcon :iname="antifeature.icon" class="md me-1" />
                 {{ antifeature.title }}:
               </dt>
               <dd class="d-inline">
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 20a2bbbf4..890a9792d 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -19,7 +19,7 @@
         v-for="{ id, description, label } in filteredApps"
         :key="id"
         :to="{ name: 'app-info', params: { id } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -31,7 +31,7 @@
           </p>
         </div>
 
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 578faefeb..699cd8b0b 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -19,7 +19,7 @@
           >
             <h4 class="m-0"><YIcon iname="cube" /> {{ $t('system') }}</h4>
 
-            <div class="ml-sm-auto mt-2 mt-sm-0">
+            <div class="ms-sm-auto mt-2 mt-sm-0">
               <BButton
                 @click="toggleSelected(true, 'system')"
                 v-t="'select_all'"
@@ -32,7 +32,7 @@
                 v-t="'select_none'"
                 size="sm"
                 variant="outline-dark"
-                class="ml-2"
+                class="ms-2"
               />
             </div>
           </BListGroupItem>
@@ -41,9 +41,9 @@
           <BListGroupItem
             v-for="(item, partName) in system"
             :key="partName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
               </h5>
@@ -67,7 +67,7 @@
               <YIcon iname="cubes" /> {{ $t('applications') }}
             </h4>
 
-            <div class="ml-sm-auto mt-2 mt-sm-0">
+            <div class="ms-sm-auto mt-2 mt-sm-0">
               <BButton
                 @click="toggleSelected(true, 'apps')"
                 v-t="'select_all'"
@@ -80,7 +80,7 @@
                 v-t="'select_none'"
                 size="sm"
                 variant="outline-dark"
-                class="ml-2"
+                class="ms-2"
               />
             </div>
           </BListGroupItem>
@@ -89,9 +89,9 @@
           <BListGroupItem
             v-for="(item, appName) in apps"
             :key="appName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary">{{ item.id }}</small>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index f4af06bd4..7d1191269 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -68,9 +68,9 @@
           <BListGroupItem
             v-for="(item, partName) in system"
             :key="partName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary" v-if="item.size">
@@ -89,9 +89,9 @@
           <BListGroupItem
             v-for="(item, appName) in apps"
             :key="appName"
-            class="d-flex justify-content-between align-items-center pr-0"
+            class="d-flex justify-content-between align-items-center pe-0"
           >
-            <div class="mr-2">
+            <div class="me-2">
               <h5 class="font-weight-bold">
                 {{ item.name }}
                 <small class="text-secondary">
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 875f33900..96cbce56a 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -25,7 +25,7 @@
         :key="name"
         :to="{ name: 'backup-info', params: { name, id } }"
         :title="readableDate(created_at)"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -38,7 +38,7 @@
             {{ path }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewBase>
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index b81f6ff6d..164447d31 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -5,7 +5,7 @@
         v-for="{ id, name, uri } in storages"
         :key="id"
         :to="{ name: 'backup-list', params: { id } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -16,7 +16,7 @@
             {{ uri }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </div>
diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 1e99f9d33..29dceb190 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -86,9 +86,9 @@
           :faded="item.ignored"
         >
           <div class="item-button d-flex align-items-center">
-            <p class="mb-0 mr-2" v-html="item.summary" />
+            <p class="mb-0 me-2" v-html="item.summary" />
 
-            <div class="d-flex flex-column flex-lg-row ml-auto">
+            <div class="d-flex flex-column flex-lg-row ms-auto">
               <BButton
                 v-if="item.ignored"
                 size="sm"
@@ -109,7 +109,7 @@
                 v-if="item.details"
                 size="sm"
                 variant="outline-dark"
-                class="ml-lg-2 mt-2 mt-lg-0"
+                class="ms-lg-2 mt-2 mt-lg-0"
                 v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <YIcon iname="level-down" /> {{ $t('details') }}
@@ -121,7 +121,7 @@
             v-if="item.details"
             :id="`collapse-${report.id}-item-${i}`"
           >
-            <ul class="mt-2 pl-4">
+            <ul class="mt-2 ps-4">
               <li
                 v-for="(detail, index) in item.details"
                 :key="index"
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 824e0da5e..74821d6c8 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -48,7 +48,7 @@
 
       <!-- DOMAIN CERT AUTHORITY -->
       <DescriptionRow :term="$t('domain.info.certificate_authority')">
-        <YIcon :iname="cert.icon" :variant="cert.variant" class="mr-1" />
+        <YIcon :iname="cert.icon" :variant="cert.variant" class="me-1" />
         {{ $t('domain.cert.types.' + cert.authority) }}
         <span class="text-secondary px-2">
           ({{
@@ -83,7 +83,7 @@
             v-for="app in domain.apps"
             :key="app.id"
             size="sm"
-            class="mr-2 mb-2"
+            class="me-2 mb-2"
           >
             <BButton
               class="py-0 font-weight-bold"
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index c95a96bfa..b42367a1b 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -22,7 +22,7 @@
     >
       <template #default="{ data, parent }">
         <div class="w-100 d-flex justify-content-between align-items-center">
-          <h5 class="mr-3">
+          <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
               <span class="font-weight-bold">
                 {{ data.name.replace(parent ? parent.data.name : null, '') }}
@@ -35,7 +35,7 @@
             <small
               v-if="data.name === mainDomain"
               :title="$t('domain.types.main_domain')"
-              class="ml-1"
+              class="ms-1"
               v-b-tooltip.hover
             >
               <YIcon iname="star" />
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 8d0731e2e..8ee867d5a 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -18,7 +18,7 @@
         } in filteredServices"
         :key="name"
         :to="{ name: 'service-info', params: { name } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -36,7 +36,7 @@
           </p>
         </div>
 
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>
diff --git a/app/src/views/tool/ToolList.vue b/app/src/views/tool/ToolList.vue
index 8c4cead27..2424d6d8e 100644
--- a/app/src/views/tool/ToolList.vue
+++ b/app/src/views/tool/ToolList.vue
@@ -6,9 +6,9 @@
       :key="item.routeName"
       :to="{ name: item.routeName }"
     >
-      <YIcon :iname="item.icon" class="lg ml-1" />
+      <YIcon :iname="item.icon" class="lg ms-1" />
       <h4>{{ $t(item.translation) }}</h4>
-      <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+      <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
     </BListGroupItem>
   </BListGroup>
 </template>
diff --git a/app/src/views/tool/ToolLogs.vue b/app/src/views/tool/ToolLogs.vue
index 62724a6b9..c263c133d 100644
--- a/app/src/views/tool/ToolLogs.vue
+++ b/app/src/views/tool/ToolLogs.vue
@@ -16,7 +16,7 @@
           :to="{ name: 'tool-log', params: { name: log.name || log.log_path } }"
           :title="readableDate(log.started_at)"
         >
-          <small class="mr-3">{{ distanceToNow(log.started_at) }} </small>
+          <small class="me-3">{{ distanceToNow(log.started_at) }} </small>
           <YIcon :iname="log.icon" :class="'text-' + log.class" />
           {{ log.description }}
         </BListGroupItem>
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index bba1f2530..1b42b7c15 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -22,7 +22,7 @@
           <div class="d-flex align-items-center">
             {{ number }}. {{ description }}
 
-            <div class="ml-auto">
+            <div class="ms-auto">
               <BButton @click="skipMigration(id)" size="sm" variant="warning">
                 <YIcon iname="close" /> {{ $t('skip') }}
               </BButton>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 2622c4ea2..ffdcdd000 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -35,7 +35,7 @@
         v-for="user in filteredUsers"
         :key="user.username"
         :to="{ name: 'user-info', params: { name: user.username } }"
-        class="d-flex justify-content-between align-items-center pr-0"
+        class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
           <h5 class="font-weight-bold">
@@ -46,7 +46,7 @@
             {{ user.mail }}
           </p>
         </div>
-        <YIcon iname="chevron-right" class="lg fs-sm ml-auto" />
+        <YIcon iname="chevron-right" class="lg fs-sm ms-auto" />
       </BListGroupItem>
     </BListGroup>
   </ViewSearch>

From 915023de1d75fa70d8e319cbbbdb6ab98d77d2af Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 21:42:38 +0100
Subject: [PATCH 12/30] migration(bs5): update scss variables (colors, etc.)

---
 app/src/scss/_variables.scss | 104 ++++++++++++++++++++++-------------
 app/src/scss/main.scss       |  16 +++++-
 2 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 635adaf35..48cbe7dca 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -27,45 +27,77 @@
 
 @import '~bootstrap/scss/functions.scss';
 
-$font-size-base: 0.9rem;
-$font-weight-bold: 500;
-
-$white: var(--white);
-$gray-100: var(--gray-100);
-$gray-200: var(--gray-200);
-$gray-300: var(--gray-300);
-$gray-400: var(--gray-400);
-$gray-500: var(--gray-500);
-$gray-600: var(--gray-600);
-$gray-700: var(--gray-700);
-$gray-800: var(--gray-800);
-$gray-900: var(--gray-900);
-$black: var(--black);
-
-$blue: var(--blue);
-$indigo: var(--indigo);
-$purple: var(--purple);
-$pink: var(--pink);
-$red: var(--red);
-$orange: var(--orange);
-$yellow: var(--yellow);
-$green: var(--green);
-$teal: var(--teal);
-$cyan: var(--cyan);
+$prefix: bs-;
+
+$white: #fff;
+$gray-100: #fafafa;
+$gray-200: #ededed;
+$gray-300: #e3e3e3;
+$gray-400: #d4d4d4;
+$gray-500:  	#b5b5b5;
+$gray-600: #757575;
+$gray-700:  	#4f4f4f;
+$gray-800: #3b3b3b;
+$gray-900: #262626;
+$black: #202020;
+
+$blue: #60a5fa;
+$indigo: #6812f3;
+$purple: #b957ea;
+$pink: #e93f8e;
+$red: #ff5a5a;
+$orange: #fd7e17;
+$yellow: #ffd452;
+$green: #70ea8d;
+$teal: #20cb98;
+$cyan: #7dd3fc;
+
+$primary: $blue;
+$secondary: $gray-600;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-900;
 
 $theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
   'best': $purple,
 );
 
+$min-contrast-ratio: 7;
+
+$spacer: 1rem;
+
+$body-bg-dark: $black;
+
+$border-color: $gray-400;
+$border-color-dark: $gray-800;
+$hr-border-color: var(--#{$prefix}border-color);
+
+$link-color: shift-color($primary, 40%);
 $code-color: $black;
+$code-color-dark: $black;
+$component-active-color: $black;
 
-// Replace font-weight 300 with 200
+// Adapt font-weight based on fira
 $font-weight-light: 200;
-$display1-weight: 200;
-$display2-weight: 200;
-$display3-weight: 200;
-$display4-weight: 200;
-$lead-font-weight: 200;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 500;
+$font-weight-bold: 700;
+
+$headings-font-weight: 500;
+
+$font-size-base: 0.9rem;
 
 // Set fonts
 $font-family-sans-serif:
@@ -91,12 +123,7 @@ $h3-font-size: $font-size-base * 1.4;
 $h4-font-size: $font-size-base * 1.25;
 $h5-font-size: $font-size-base * 1.1;
 
-$alert-padding-x: 1rem;
-
-$card-spacer-y: 0.6rem;
-$card-spacer-x: 1rem;
-
-$list-group-item-padding-x: 1rem;
+$list-group-item-padding-y: $spacer * 0.75;
 
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/variables';
@@ -131,6 +158,5 @@ $fa-font-size-base: $font-size-base;
 
 $thin-border: $hr-border-width solid $hr-border-color;
 
-$btn-padding-y-xs: 0.25rem;
+$btn-padding-y-xs: 0rem;
 $btn-padding-x-xs: 0.35rem;
-$btn-line-height-xs: 1.5;
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index c1a1867e9..1c15f2e21 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -75,14 +75,19 @@ body {
   align-items: center;
 }
 
+// BOOSTRAP OVERIDES/ADDITIONS
+
 // Add breakpoints for w-*
 @each $breakpoint in map-keys($grid-breakpoints) {
-  @each $size, $length in $sizes {
-    @include media-breakpoint-up($breakpoint) {
+  @include media-breakpoint-up($breakpoint) {
+    @each $size, $length in $position-values {
       .w-#{$breakpoint}-#{$size} {
         width: $length !important;
       }
     }
+    .w-#{$breakpoint}-auto {
+      width: auto !important;
+    }
   }
 }
 
@@ -92,11 +97,16 @@ body {
     $btn-padding-y-xs,
     $btn-padding-x-xs,
     $btn-font-size-sm,
-    $btn-line-height-xs,
     $btn-border-radius-sm
   );
 }
 
+.btn-outline-dark {
+  [data-bs-theme='dark'] & {
+    @include button-outline-variant($light);
+  }
+}
+
 // Allow state of input group to be displayed under the group
 .input-group .is-invalid ~ .invalid-feedback {
   display: block;

From 622e5be06145e78e46d8392fb92107cb68a96e41 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 17 Mar 2024 16:06:08 +0100
Subject: [PATCH 13/30] migration(bvn): update modals and modal system

---
 app/src/App.vue                       |  2 ++
 app/src/composables/useAutoModal.js   | 42 +++++++++++++++++++++++++++
 app/src/main.js                       | 35 ----------------------
 app/src/scss/main.scss                |  4 ++-
 app/src/views/PostInstall.vue         |  4 ++-
 app/src/views/app/AppCatalog.vue      |  6 ++--
 app/src/views/app/AppInfo.vue         | 10 +++----
 app/src/views/app/AppInstall.vue      |  9 +++---
 app/src/views/backup/BackupInfo.vue   | 11 +++++--
 app/src/views/domain/DomainDns.vue    |  9 +++++-
 app/src/views/domain/DomainInfo.vue   | 13 +++++++--
 app/src/views/group/GroupList.vue     | 11 +++++--
 app/src/views/service/ServiceInfo.vue |  9 +++++-
 app/src/views/tool/ToolFirewall.vue   |  6 ++--
 app/src/views/tool/ToolMigrations.vue |  9 +++++-
 app/src/views/tool/ToolPower.vue      |  9 +++++-
 app/src/views/update/SystemUpdate.vue | 19 ++++++++----
 app/src/views/user/UserImport.vue     |  4 ++-
 app/src/views/user/UserInfo.vue       |  3 +-
 19 files changed, 146 insertions(+), 69 deletions(-)
 create mode 100644 app/src/composables/useAutoModal.js

diff --git a/app/src/App.vue b/app/src/App.vue
index 773da1524..8347c71a0 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -53,6 +53,8 @@
       </main>
     </ViewLockOverlay>
 
+    <BModalOrchestrator />
+
     <!-- HISTORY CONSOLE -->
     <HistoryConsole />
 
diff --git a/app/src/composables/useAutoModal.js b/app/src/composables/useAutoModal.js
new file mode 100644
index 000000000..b0ba93ec9
--- /dev/null
+++ b/app/src/composables/useAutoModal.js
@@ -0,0 +1,42 @@
+import { h } from 'vue'
+import { useModalController, BModal } from 'bootstrap-vue-next'
+import { VueShowdown } from 'vue-showdown'
+
+export function useAutoModal() {
+  const { confirm, show } = useModalController()
+
+  return function (
+    message,
+    props_,
+    { markdown = false, cancelable = true } = {},
+  ) {
+    const props = {
+      okTitle: this.$t('ok'),
+      cancelTitle: this.$t('cancel'),
+      centered: true,
+      okOnly: !cancelable,
+      ...(markdown
+        ? { headerBgVariant: 'warning', headerClass: 'text-black' }
+        : {
+            hideHeader: true,
+            bodyBgVariant: 'warning',
+            bodyClass: ['fw-bold', 'rounded-top', 'text-black'],
+          }),
+      ...props_,
+    }
+
+    const fn = cancelable ? confirm : show
+    return fn?.({
+      props,
+      component: h(BModal, null, {
+        default: () =>
+          markdown
+            ? h(VueShowdown, {
+                markdown: message,
+                options: { headerLevelStart: 3 },
+              })
+            : message,
+      }),
+    })
+  }
+}
diff --git a/app/src/main.js b/app/src/main.js
index 77627699d..92f7cbcd1 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -29,41 +29,6 @@ app.use(VueShowdownPlugin, {
   },
 })
 
-// Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
-// FIXME find or wait for a better way
-app.config.globalProperties.$askConfirmation = function (message, props) {
-  return this.$bvModal.msgBoxConfirm(message, {
-    okTitle: this.$t('ok'),
-    cancelTitle: this.$t('cancel'),
-    bodyBgVariant: 'warning',
-    centered: true,
-    bodyClass: [
-      'font-weight-bold',
-      'rounded-top',
-      store.state.dark ? 'text-white' : 'text-black',
-    ],
-    ...props,
-  })
-}
-
-app.config.globalProperties.$askMdConfirmation = function (
-  markdown,
-  props,
-  ok = false,
-) {
-  const content = this.$createElement('vue-showdown', {
-    props: { markdown, flavor: 'github', options: { headerLevelStart: 4 } },
-  })
-  return this.$bvModal['msgBox' + (ok ? 'Ok' : 'Confirm')](content, {
-    okTitle: this.$t('yes'),
-    cancelTitle: this.$t('cancel'),
-    headerBgVariant: 'warning',
-    headerClass: store.state.dark ? 'text-white' : 'text-black',
-    centered: true,
-    ...props,
-  })
-}
-
 // Register global components
 const globalComponentsModules = import.meta.glob(
   ['@/components/globals/*.vue', '@/components/globals/*/*.vue'],
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 1c15f2e21..7e770aaa9 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -45,7 +45,9 @@
 // Utilities
 @import '~bootstrap/scss/utilities/api';
 
-@import '~bootstrap-vue-next/src/styles/styles.scss';
+// @import '~bootstrap-vue-next/src/styles/styles.scss';
+// FIXME modals doesn't appears if we import the scss
+@import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 
 // Import fonts
 @import 'font';
diff --git a/app/src/views/PostInstall.vue b/app/src/views/PostInstall.vue
index ac9c0dd43..599f77942 100644
--- a/app/src/views/PostInstall.vue
+++ b/app/src/views/PostInstall.vue
@@ -92,6 +92,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { DomainForm } from '@/views/_partials'
 import LoginView from '@/views/LoginView.vue'
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -114,6 +115,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -179,7 +181,7 @@ export default {
     },
 
     async setUser() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_postinstall', { domain: this.domain }),
       )
       if (!confirmed) return
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index ba5b1c403..5948d4ca2 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -223,6 +223,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import CardDeckFeed from '@/components/CardDeckFeed.vue'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { required, appRepoUrl } from '@/helpers/validators'
 import { randint } from '@/helpers/commons'
 
@@ -243,6 +244,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -403,7 +405,7 @@ export default {
     async onInstallClick(appId) {
       const app = this.apps.find((app) => app.id === appId)
       if (!app.decent_quality) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_install_app_' + app.state),
         )
         if (!confirmed) return
@@ -413,7 +415,7 @@ export default {
 
     // INSTALL CUSTOM APP
     async onCustomInstallClick() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_install_custom_app'),
       )
       if (!confirmed) return
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 4226ffd86..4b55fc60d 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -343,8 +343,8 @@
       id="uninstall-modal"
       :title="$t('confirm_uninstall', { name: id })"
       header-bg-variant="warning"
+      header-class="text-black"
       :body-class="{ 'd-none': !app.supports_purge }"
-      body-bg-variant=""
       @ok="uninstall"
     >
       <BFormGroup v-if="app.supports_purge">
@@ -366,6 +366,7 @@ import { mapGetters } from 'vuex'
 import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { humanPermissionName } from '@/helpers/filters/human'
 import { helpers, required } from '@/helpers/validators'
 import { isEmptyValue } from '@/helpers/commons'
@@ -390,6 +391,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -646,7 +648,7 @@ export default {
     },
 
     async changeUrl() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_app_change_url'),
       )
       if (!confirmed) return
@@ -662,9 +664,7 @@ export default {
     },
 
     async setAsDefaultDomain(undo = false) {
-      const confirmed = await this.$askConfirmation(
-        this.$t('confirm_app_default'),
-      )
+      const confirmed = await this.modalConfirm(this.$t('confirm_app_default'))
       if (!confirmed) return
 
       api
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index e6a4b6d85..4b8d9a976 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -209,6 +209,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import {
   formatYunoHostArguments,
   formatI18nField,
@@ -230,6 +231,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -379,7 +381,7 @@ export default {
 
     async performInstall() {
       if ('path' in this.form && this.form.path === '/') {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_install_domain_root', {
             domain: this.form.domain,
           }),
@@ -405,15 +407,14 @@ export default {
           if (postInstall) {
             const message =
               this.$t('app.install.notifs.post.alert') + '\n\n' + postInstall
-            await this.$askMdConfirmation(
+            await this.modalConfirm(
               message,
               {
                 title: this.$t('app.install.notifs.post.title', {
                   name: this.app.name,
                 }),
-                okTitle: this.$t('ok'),
               },
-              true,
+              { markdown: true, cancelable: false },
             )
           }
           this.$router.push({ name: 'app-list' })
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index 7d1191269..ccc1b3b53 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -137,6 +137,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { readableDate } from '@/helpers/filters/date'
 import { humanSize } from '@/helpers/filters/human'
 import { isEmptyValue } from '@/helpers/commons'
@@ -149,6 +150,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', `backups/${this.name}?with_details`]],
@@ -215,7 +222,7 @@ export default {
     },
 
     async restoreBackup() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_restore', { name: this.name }),
       )
       if (!confirmed) return
@@ -245,7 +252,7 @@ export default {
     },
 
     async deleteBackup() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_delete', { name: this.name }),
       )
       if (!confirmed) return
diff --git a/app/src/views/domain/DomainDns.vue b/app/src/views/domain/DomainDns.vue
index 32b5371d7..f480a35cc 100644
--- a/app/src/views/domain/DomainDns.vue
+++ b/app/src/views/domain/DomainDns.vue
@@ -145,6 +145,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { isEmptyValue } from '@/helpers/commons'
 
 export default {
@@ -154,6 +155,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['GET', `domains/${this.name}/dns/suggest`]],
@@ -246,7 +253,7 @@ export default {
 
     async pushDnsChanges() {
       if (this.force) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('domain.dns.push_force_confirm'),
         )
         if (!confirmed) return
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 74821d6c8..cccdbef82 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -125,8 +125,8 @@
       :title="$t('confirm_delete', { name: this.name })"
       @ok="deleteDomain"
       header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
+      header-class="text-black"
+      :body-class="{ 'd-none': !isMainDynDomain }"
     >
       <BFormGroup v-if="isMainDynDomain">
         <BFormCheckbox v-model="unsubscribeDomainFromDyndns">
@@ -141,6 +141,7 @@
 import { mapGetters } from 'vuex'
 
 import api, { objectToParams } from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import {
   formatFormData,
   formatYunoHostConfigPanels,
@@ -160,6 +161,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -279,7 +286,7 @@ export default {
     },
 
     async setAsDefaultDomain() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_change_maindomain'),
       )
       if (!confirmed) return
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 56db370ec..8b97b4760 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -134,6 +134,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { isEmptyValue } from '@/helpers/commons'
 import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem.vue'
 
@@ -146,6 +147,12 @@ export default {
     TagsSelectizeItem,
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -264,7 +271,7 @@ export default {
     async onPermissionChanged({ option, groupName, action, applyMethod }) {
       const permId = this.permissions.find((perm) => perm.label === option).id
       if (action === 'add' && ['sftp.main', 'ssh.main'].includes(permId)) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('confirm_group_add_access_permission', {
             name: groupName,
             perm: option,
@@ -310,7 +317,7 @@ export default {
     },
 
     async deleteGroup(groupName) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_delete', { name: groupName }),
       )
       if (!confirmed) return
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 574724943..d14eb7bbb 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -83,6 +83,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { distanceToNow } from '@/helpers/filters/date'
 
 export default {
@@ -92,6 +93,12 @@ export default {
     name: { type: String, required: true },
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -132,7 +139,7 @@ export default {
     },
 
     async updateService(action) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_service_' + action, { name: this.name }),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c426d82ae..1eab60e14 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -121,6 +121,7 @@
 import { useVuelidate } from '@vuelidate/core'
 
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { required, integer, between } from '@/helpers/validators'
 
 export default {
@@ -129,6 +130,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -214,7 +216,7 @@ export default {
     },
 
     async togglePort({ action, port, protocol, connection }) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_firewall_' + action, {
           port,
           protocol,
@@ -244,7 +246,7 @@ export default {
 
     async toggleUpnp(value) {
       const action = this.upnpEnabled ? 'disable' : 'enable'
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_upnp_' + action),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolMigrations.vue b/app/src/views/tool/ToolMigrations.vue
index 1b42b7c15..3d5086555 100644
--- a/app/src/views/tool/ToolMigrations.vue
+++ b/app/src/views/tool/ToolMigrations.vue
@@ -88,11 +88,18 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 
 // FIXME not tested with pending migrations (disclaimer and stuff)
 export default {
   name: 'ToolMigrations',
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [
@@ -136,7 +143,7 @@ export default {
     },
 
     async skipMigration(id) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_migrations_skip'),
       )
       if (!confirmed) return
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index b9435cb39..b6688881a 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -35,13 +35,20 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 
 export default {
   name: 'ToolPower',
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   methods: {
     async triggerAction(action) {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_reboot_action_' + action),
       )
       if (!confirmed) return
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 74a1bd9c7..390e44a01 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -88,10 +88,11 @@
     </YCard>
 
     <BModal
+      v-model="showPreUpgradeModal"
       id="apps-pre-upgrade"
       :title="$t('app.upgrade.confirm.title')"
       header-bg-variant="warning"
-      :header-class="dark ? 'text-white' : 'text-black'"
+      header-class="text-black"
       :ok-title="$t('system_upgrade_btn')"
       ok-variant="success"
       :cancel-title="$t('cancel')"
@@ -139,6 +140,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { mapGetters } from 'vuex'
 
 import CardCollapse from '@/components/CardCollapse.vue'
@@ -150,6 +152,12 @@ export default {
     CardCollapse,
   },
 
+  setup() {
+    return {
+      modalConfirm: useAutoModal(),
+    }
+  },
+
   data() {
     return {
       queries: [['PUT', 'update/all', {}, 'update']],
@@ -158,6 +166,7 @@ export default {
       apps: undefined,
       importantYunohostUpgrade: undefined,
       pendingMigrations: undefined,
+      showPreUpgradeModal: false,
       preUpgrade: {
         apps: [],
         notifs: [],
@@ -200,7 +209,7 @@ export default {
           : '',
       }))
       this.preUpgrade = { apps, hasNotifs: apps.some((app) => app.notif) }
-      this.$bvModal.show('apps-pre-upgrade')
+      this.showPreUpgradeModal = true
     },
 
     async performAppsUpgrade(ids) {
@@ -224,7 +233,7 @@ export default {
             if (postMessage) {
               const message =
                 this.$t('app.upgrade.notifs.post.alert') + '\n\n' + postMessage
-              return this.$askMdConfirmation(
+              return this.modalConfirm(
                 message,
                 {
                   title: this.$t('app.upgrade.notifs.post.title', {
@@ -233,7 +242,7 @@ export default {
                   okTitle: this.$t(isLast ? 'ok' : 'app.upgrade.continue'),
                   cancelTitle: this.$t('app.upgrade.stop'),
                 },
-                isLast,
+                { markdown: true, cancelable: !isLast },
               )
             } else {
               return Promise.resolve(true)
@@ -248,7 +257,7 @@ export default {
     },
 
     async performSystemUpgrade() {
-      const confirmed = await this.$askConfirmation(
+      const confirmed = await this.modalConfirm(
         this.$t('confirm_update_system'),
       )
       if (!confirmed) return
diff --git a/app/src/views/user/UserImport.vue b/app/src/views/user/UserImport.vue
index 03ba1357d..57916f1ac 100644
--- a/app/src/views/user/UserImport.vue
+++ b/app/src/views/user/UserImport.vue
@@ -23,6 +23,7 @@
 
 <script>
 import api from '@/api'
+import { useAutoModal } from '@/composables/useAutoModal'
 import { useVuelidate } from '@vuelidate/core'
 
 import { formatFormData } from '@/helpers/yunohostArguments'
@@ -34,6 +35,7 @@ export default {
   setup() {
     return {
       v$: useVuelidate(),
+      modalConfirm: useAutoModal(),
     }
   },
 
@@ -89,7 +91,7 @@ export default {
   methods: {
     async onSubmit() {
       if (this.form.delete) {
-        const confirmed = await this.$askConfirmation(
+        const confirmed = await this.modalConfirm(
           this.$t('users_import_confirm_destructive'),
           { okTitle: this.$t('users_import_delete_others') },
         )
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index 2929cfd40..d9b47bd39 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -83,8 +83,7 @@
       :title="$t('confirm_delete', { name: user.username })"
       @ok="deleteUser"
       header-bg-variant="warning"
-      body-class=""
-      body-bg-variant=""
+      header-class="text-black"
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">

From 6229e40ca8cb00a5ec6b3f70a14fbe2c3b1beac2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 15:40:21 +0100
Subject: [PATCH 14/30] fix: validation on blur

---
 app/src/components/AdressInputSelect.vue      |  2 --
 app/src/components/ConfigPanels.vue           |  2 +-
 app/src/components/globals/FormField.vue      | 31 +++++++++++--------
 .../components/globals/formItems/FileItem.vue | 11 +++++--
 .../globals/formItems/InputItem.vue           | 10 +++++-
 .../globals/formItems/SelectItem.vue          | 12 +++++--
 .../components/globals/formItems/TagsItem.vue | 10 +++++-
 .../globals/formItems/TextAreaItem.vue        | 10 +++++-
 8 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 0a23f78c5..2bb24d1a7 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -7,7 +7,6 @@
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
       @update:modelValue="onInput('localPart', $event)"
-      @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
@@ -20,7 +19,6 @@
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
         @update:modelValue="onInput('domain', $event)"
-        @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
 
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index e1ab25f22..b1869b31e 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -55,7 +55,7 @@ export default {
   setup(props) {
     const externalResults = toRef(props, 'externalResults')
     return {
-      v$: useVuelidate({ $externalResults: externalResults, $autoDirty: true }),
+      v$: useVuelidate({ $externalResults: externalResults }),
     }
   },
 
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 7a6d4d00a..18114508c 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import { provide } from 'vue'
+
 export default {
   name: 'FormField',
 
@@ -67,6 +69,22 @@ export default {
     validationIndex: { type: Number, default: null },
   },
 
+  setup(props) {
+    function touch(name) {
+      if (props.validation) {
+        // For fields that have multiple elements
+        if (name) {
+          props.validation[name].$touch()
+        } else {
+          props.validation.$touch()
+        }
+      }
+    }
+    provide('touch', touch)
+
+    return { touch }
+  },
+
   computed: {
     _id() {
       if (this.id) return this.id
@@ -127,19 +145,6 @@ export default {
       return ''
     },
   },
-
-  methods: {
-    touch(name) {
-      if (this.validation) {
-        // For fields that have multiple elements
-        if (name) {
-          this.validation[name].$touch()
-        } else {
-          this.validation.$touch()
-        }
-      }
-    },
-  },
 }
 </script>
 
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 07392692a..4aff57725 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -20,13 +20,14 @@
       :state="state"
       :browse-text="$t('words.browse')"
       @update:modelValue="onInput"
-      @blur="$parent.$emit('touch', name)"
-      @focusout="$parent.$emit('touch', name)"
+      @blur="touch(name)"
+      @focusout="touch(name)"
     />
   </BButtonGroup>
 </template>
 
 <script>
+import { inject } from 'vue'
 import { getFileContent } from '@/helpers/commons'
 
 export default {
@@ -43,6 +44,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   computed: {
     _placeholder: function () {
       return this.modelValue.file === null
diff --git a/app/src/components/globals/formItems/InputItem.vue b/app/src/components/globals/formItems/InputItem.vue
index 752381247..7bedd046c 100644
--- a/app/src/components/globals/formItems/InputItem.vue
+++ b/app/src/components/globals/formItems/InputItem.vue
@@ -12,11 +12,13 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'InputItem',
 
@@ -36,6 +38,12 @@ export default {
     name: { type: String, default: null },
   },
 
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
+
   data() {
     return {
       autocomplete_: this.autocomplete
diff --git a/app/src/components/globals/formItems/SelectItem.vue b/app/src/components/globals/formItems/SelectItem.vue
index 2140f49f8..3360bc923 100644
--- a/app/src/components/globals/formItems/SelectItem.vue
+++ b/app/src/components/globals/formItems/SelectItem.vue
@@ -5,20 +5,28 @@
     :id="id"
     :options="choices"
     :required="required"
-    @blur="$emit('blur', modelValue)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'SelectItem',
 
   props: {
     modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
-    choices: { type: [Array, Object], required: true },
+    choices: { type: Array, required: true },
     required: { type: Boolean, default: false },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index d19377521..5b9913a88 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -10,11 +10,13 @@
     remove-on-delete
     :state="state"
     :options="options"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TagsItem',
 
@@ -28,5 +30,11 @@ export default {
     name: { type: String, default: null },
     options: { type: Array, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>
diff --git a/app/src/components/globals/formItems/TextAreaItem.vue b/app/src/components/globals/formItems/TextAreaItem.vue
index 7659026f3..2e1b4bbf6 100644
--- a/app/src/components/globals/formItems/TextAreaItem.vue
+++ b/app/src/components/globals/formItems/TextAreaItem.vue
@@ -7,11 +7,13 @@
     :required="required"
     :state="state"
     rows="4"
-    @blur="$parent.$emit('touch', name)"
+    @blur="touch(name)"
   />
 </template>
 
 <script>
+import { inject } from 'vue'
+
 export default {
   name: 'TextAreaItem',
 
@@ -24,5 +26,11 @@ export default {
     state: { type: Boolean, default: null },
     name: { type: String, default: null },
   },
+
+  setup() {
+    return {
+      touch: inject('touch'),
+    }
+  },
 }
 </script>

From 2156196f8beb6c5c05ddde3d143d28e1c99ec241 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 16:25:36 +0100
Subject: [PATCH 15/30] fix: DomainAdd event bubbling

---
 app/src/components/globals/CardForm.vue | 2 +-
 app/src/views/_partials/DomainForm.vue  | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index c63bbbeb7..7ab7cb825 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -7,7 +7,7 @@
         :id="id"
         :inline="inline"
         :class="formClasses"
-        @submit.prevent="onSubmit"
+        @submit.prevent.stop="onSubmit"
         novalidate
       >
         <slot name="default" />
diff --git a/app/src/views/_partials/DomainForm.vue b/app/src/views/_partials/DomainForm.vue
index 8fe717304..db8b59ab8 100644
--- a/app/src/views/_partials/DomainForm.vue
+++ b/app/src/views/_partials/DomainForm.vue
@@ -131,6 +131,8 @@ import {
 export default {
   name: 'DomainForm',
 
+  inheritAttrs: false,
+
   props: {
     title: { type: String, required: true },
     submitText: { type: String, default: null },

From 6be1609f1057d23896aeb18159286d278b6b423e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 16:46:23 +0100
Subject: [PATCH 16/30] migration(vuex): currentRoute is now a ref

---
 app/src/store/info.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/store/info.js b/app/src/store/info.js
index a631b37dd..88aa1f388 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -158,16 +158,17 @@ export default {
       commit('SET_YUNOHOST_INFOS', null)
     },
 
-    DISCONNECT({ dispatch }, route = router.currentRoute) {
+    DISCONNECT({ dispatch }, route) {
       // FIXME vue3 currentRoute is now a ref (currentRoute.value)
       dispatch('RESET_CONNECTED')
-      if (router.currentRoute.name === 'login') return
+      if (router.currentRoute.value.name === 'login') return
+      const previousRoute = route ?? router.currentRoute.value
       router.push({
         name: 'login',
         // Add a redirect query if next route is not unknown (like `logout`) or `login`
         query:
-          route && !['login', null].includes(route.name)
-            ? { redirect: route.path }
+          previousRoute && !['login', null].includes(previousRoute.name)
+            ? { redirect: previousRoute.path }
             : {},
       })
     },

From 9ec1fbd714bc6e220cfbdb50cc7d40a120738fb0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 18 Mar 2024 18:24:00 +0100
Subject: [PATCH 17/30] fix: ConfigPanels event bubbling

---
 app/src/components/ConfigPanel.vue          | 2 +-
 app/src/components/ConfigPanels.vue         | 1 -
 app/src/components/RoutableTabs.vue         | 6 +-----
 app/src/components/globals/AbstractForm.vue | 5 +++--
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
index 6220a6087..4121ab610 100644
--- a/app/src/components/ConfigPanel.vue
+++ b/app/src/components/ConfigPanel.vue
@@ -6,7 +6,7 @@
       validation,
       serverError: panel.serverError,
     }"
-    @apply="onApply"
+    @submit="onApply"
     :no-footer="!panel.hasApplyButton"
   >
     <slot name="tab-top" />
diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
index b1869b31e..82d6abda4 100644
--- a/app/src/components/ConfigPanels.vue
+++ b/app/src/components/ConfigPanels.vue
@@ -5,7 +5,6 @@
       v-if="routes_.length > 1"
       v-bind="{ panels, forms, v: v$, ...$attrs }"
       :routes="routes_"
-      @apply="$emit('apply', $event)"
     >
       <template #tab-top>
         <slot name="tab-top" />
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 1fa13bbe4..193810c4f 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -16,11 +16,7 @@
 
     <!-- Bind extra props to the child view and forward child events to parent -->
     <RouterView v-slot="{ Component }">
-      <Component
-        v-bind="$attrs"
-        :is="Component"
-        @apply="$emit('apply', $event)"
-      >
+      <Component v-bind="$attrs" :is="Component">
         <template #tab-top>
           <slot name="tab-top" />
         </template>
diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index 273073cac..ed7581b54 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -34,6 +34,8 @@
 export default {
   name: 'AbstractForm',
 
+  inheritAttrs: false,
+
   props: {
     id: { type: String, default: 'ynh-form' },
     submitText: { type: String, default: null },
@@ -60,8 +62,7 @@ export default {
         v.$touch()
         if (v.$pending || v.$errors.length) return
       }
-      // Weird bug with `INSTANCE_LISTENERS: true` with 'submit' event (double exec before of conflict with native submit event?)
-      this.$emit('apply')
+      this.$emit('submit')
     },
   },
 }

From cb7b13f11231ca986516e5f6c23a0f5efb7f7b86 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:15:12 +0100
Subject: [PATCH 18/30] fix: temp fix for RoutableTabs link active class

---
 app/src/components/RoutableTabs.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index 193810c4f..3bdbef920 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,8 +6,10 @@
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          exact-active-class="active"
+          :active="$route.params.tabId === route.to.params.tabId"
         >
+          <!-- FIXME added :active="" because `exact-active-class` not working https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1754 -->
+          <!-- exact-active-class="active" -->
           <YIcon v-if="route.icon" :iname="route.icon" />
           {{ route.text }}
         </BNavItem>

From cc02444e3373641b3243e2efa2af5558ca17f309 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:15:49 +0100
Subject: [PATCH 19/30] fix: ExplainWhat popover

---
 app/src/components/globals/ExplainWhat.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 411bcdd79..ed3665ab5 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -2,16 +2,21 @@
   <span class="explain-what">
     <slot name="default" />
     <span class="explain-what-popover-container">
-      <BButton :id="id" href="#" variant="light">
+      <BButton
+        variant="light"
+        @focus="open = true"
+        @blur="open = false"
+        @click="open = !open"
+      >
         <YIcon iname="question" />
         <span class="sr-only">
           {{ $t('details_about', { subject: title }) }}
         </span>
       </BButton>
+      <!-- FIXME missing prop `trigger` in bvn https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1275 and looks like `placement` doesn't work -->
       <BPopover
-        placement="auto"
-        :target="id"
-        triggers="focus"
+        v-model="open"
+        placement="top"
         custom-class="explain-what-popover"
         :variant="variant"
         :title="title"
@@ -38,6 +43,12 @@ export default {
       return Object.assign({ md: 4, xl: 3 }, this.cols)
     },
   },
+
+  data() {
+    return {
+      open: false,
+    }
+  },
 }
 </script>
 

From 620694c42ddf08992a02b2c559cabb272c6d616c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:17:26 +0100
Subject: [PATCH 20/30] fix: CardDeckFeed slots slicing + keyboard navigation

---
 app/src/components/CardDeckFeed.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
index 6bf733a8b..c68484985 100644
--- a/app/src/components/CardDeckFeed.vue
+++ b/app/src/components/CardDeckFeed.vue
@@ -15,19 +15,19 @@ export default {
     return {
       busy: false,
       range: this.stacks,
-      childrenCount: this.$slots.default().length,
+      childrenCount: this.$slots.default()[0].children,
     }
   },
 
   methods: {
     getTopParent(prev) {
-      return prev.parentElement === this.$refs.feed
+      return prev.parentElement === this.$refs.feed.$el
         ? prev
         : this.getTopParent(prev.parentElement)
     },
 
     onScroll() {
-      const elem = this.$refs.feed
+      const elem = this.$refs.feed.$el
       if (
         window.innerHeight >
         elem.clientHeight + elem.getBoundingClientRect().top - 200
@@ -56,12 +56,12 @@ export default {
 
   mounted() {
     window.addEventListener('scroll', this.onScroll)
-    this.$refs.feed.addEventListener('keydown', this.onKeydown)
+    this.$refs.feed.$el.addEventListener('keydown', this.onKeydown)
     this.onScroll()
   },
 
   beforeUpdate() {
-    const slots = this.$slots.default()
+    const slots = this.$slots.default()[0].children
     if (this.childrenCount !== slots.length) {
       this.range = this.stacks
       this.childrenCount = slots.length
@@ -77,13 +77,15 @@ export default {
         'aria-busy': this.busy.toString(),
         ref: 'feed',
       },
-      this.$slots.default().slice(0, this.range),
+      {
+        default: () => this.$slots.default()[0].children.slice(0, this.range),
+      },
     )
   },
 
   beforeUnmount() {
     window.removeEventListener('scroll', this.onScroll)
-    this.$refs.feed.removeEventListener('keydown', this.onKeydown)
+    this.$refs.feed.$el.removeEventListener('keydown', this.onKeydown)
   },
 }
 </script>

From c730de8b3217d8359d5adab4bd4708ed245d3a9d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:18:01 +0100
Subject: [PATCH 21/30] fix: FileItem display

---
 .../components/globals/formItems/FileItem.vue | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 4aff57725..7bd3f2503 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -1,13 +1,15 @@
 <template>
-  <BButtonGroup class="w-100">
-    <BButton
-      v-if="!this.required && this.modelValue.file !== null"
-      @click="clearFiles"
-      variant="danger"
-    >
-      <span class="sr-only">{{ $t('delete') }}</span>
-      <YIcon iname="trash" />
-    </BButton>
+  <BInputGroup class="w-100">
+    <template #append>
+      <BButton
+        v-if="!this.required && this.modelValue.file !== null"
+        @click="clearFiles"
+        variant="danger"
+      >
+        <span class="sr-only">{{ $t('delete') }}</span>
+        <YIcon iname="trash" />
+      </BButton>
+    </template>
 
     <BFormFile
       :modelValue="modelValue.file"
@@ -23,7 +25,7 @@
       @blur="touch(name)"
       @focusout="touch(name)"
     />
-  </BButtonGroup>
+  </BInputGroup>
 </template>
 
 <script>
@@ -38,7 +40,7 @@ export default {
     modelValue: { type: Object, default: () => ({ file: null }) },
     placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
-    accept: { type: String, default: null },
+    accept: { type: String, default: '' },
     state: { type: Boolean, default: null },
     required: { type: Boolean, default: false },
     name: { type: String, default: null },
@@ -89,6 +91,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// fix https://getbootstrap.com/docs/5.2/migration/#forms
 :deep(.custom-file-label) {
   color: $input-placeholder-color;
 

From 4b33e67514dd8f1adb19964f5d93cdbfa6b3f5da Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:26:18 +0100
Subject: [PATCH 22/30] fix: misc component issues

---
 app/src/App.vue                               |  2 +-
 .../globals/formItems/TagsSelectizeItem.vue   |  2 +-
 app/src/store/data.js                         | 19 +++++++++++--------
 app/src/views/app/AppCatalog.vue              |  5 ++++-
 app/src/views/domain/DomainList.vue           | 11 +----------
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 8347c71a0..d5e7ae7bf 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -142,7 +142,7 @@ export default {
       if (key === copypastaCode[copypastastep++]) {
         if (copypastastep === copypastaCode.length) {
           document
-            .getElementsByClassName('unselectable')
+            .querySelectorAll('.unselectable')
             .forEach((element) => element.classList.remove('unselectable'))
           copypastastep = 0
         }
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index 685576c41..b85566c0b 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -175,7 +175,7 @@ export default {
       // Allow to start searching after dropdown opening
       if (
         !['Tab', 'Space'].includes(e.code) &&
-        e.target === this.$refs.dropdown.$el.lastElementChild
+        e.target === this.$refs.dropdown.$el.firstElementChild
       ) {
         this.$refs['search-input'].focus()
       }
diff --git a/app/src/store/data.js b/app/src/store/data.js
index c868490e1..e778f72ee 100644
--- a/app/src/store/data.js
+++ b/app/src/store/data.js
@@ -1,6 +1,7 @@
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
 import { stratify } from '@/helpers/data/tree'
+import { reactive } from 'vue'
 
 export function getParentDomain(domain, domains, highest = false) {
   const method = highest ? 'lastIndexOf' : 'indexOf'
@@ -277,14 +278,16 @@ export default {
       // action when state.domain change)
       const domains = getters.orderedDomains
       if (!domains) return
-      const dataset = domains.map((name) => ({
-        // data to build a hierarchy
-        name,
-        parent: getParentDomain(name, domains),
-        // utility data that will be used by `RecursiveListGroup` component
-        to: { name: 'domain-info', params: { name } },
-        opened: true,
-      }))
+      const dataset = reactive(
+        domains.map((name) => ({
+          // data to build a hierarchy
+          name,
+          parent: getParentDomain(name, domains),
+          // utility data that will be used by `RecursiveListGroup` component
+          to: { name: 'domain-info', params: { name } },
+          opened: true,
+        })),
+      )
       return stratify(dataset)
     },
 
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5948d4ca2..7f87ec1aa 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -80,7 +80,10 @@
         class="category-card"
       >
         <BCardTitle>
-          <BLink @click="updateQuery('category', cat.value)" class="card-link">
+          <BLink
+            @click.prevent="updateQuery('category', cat.value)"
+            class="card-link"
+          >
             <YIcon :iname="cat.icon" /> {{ cat.text }}
           </BLink>
         </BCardTitle>
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index b42367a1b..1b3b7399b 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -6,7 +6,6 @@
     items-name="domains"
     :queries="queries"
     :filtered-items="hasFilteredItems"
-    @queries-response="onQueriesResponse"
   >
     <template #top-bar-buttons>
       <BButton variant="success" :to="{ name: 'domain-add' }">
@@ -63,12 +62,11 @@ export default {
     return {
       queries: [['GET', { uri: 'domains', storeKey: 'domains' }]],
       search: '',
-      domainsTree: undefined,
     }
   },
 
   computed: {
-    ...mapGetters(['domains', 'mainDomain']),
+    ...mapGetters(['domains', 'mainDomain', 'domainsTree']),
 
     tree() {
       if (!this.domainsTree) return
@@ -86,12 +84,5 @@ export default {
       return this.tree.children || null
     },
   },
-
-  methods: {
-    onQueriesResponse() {
-      // Add the tree to `data` to make it reactive
-      this.domainsTree = this.$store.getters.domainsTree
-    },
-  },
 }
 </script>

From 94956c57eeacd97ac9cc33b821a6bc2da7a674ab Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:27:09 +0100
Subject: [PATCH 23/30] fix: adapt `choices` data structure

---
 app/src/helpers/yunohostArguments.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 9cd733bac..c6630ebe1 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -221,7 +221,7 @@ export function formatYunoHostArgument(arg) {
             label: arg.placeholder,
           })
         }
-        if (typeof value === 'string') {
+        if (typeof value === 'string' && value) {
           value = value.split(',')
         } else if (!value) {
           value = []
@@ -296,8 +296,15 @@ export function formatYunoHostArgument(arg) {
     prop = prop.split(':')
     const propName = prop[0]
     const argName = prop.slice(-1)[0]
+
     if (argName in arg) {
-      field.props.props[propName] = arg[argName]
+      if (propName === 'choices') {
+        field.props.props[propName] = Object.entries(arg[argName]).map(
+          ([value, text]) => ({ value, text }),
+        )
+      } else {
+        field.props.props[propName] = arg[argName]
+      }
     }
   }
 

From e87d76eea67528296d62dc7005837541e765cc50 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:28:06 +0100
Subject: [PATCH 24/30] fix: Diagnosis ignored count and display

---
 app/src/views/diagnosis/DiagnosisView.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/src/views/diagnosis/DiagnosisView.vue b/app/src/views/diagnosis/DiagnosisView.vue
index 29dceb190..565fd5e62 100644
--- a/app/src/views/diagnosis/DiagnosisView.vue
+++ b/app/src/views/diagnosis/DiagnosisView.vue
@@ -188,15 +188,19 @@ export default {
           item.issue = false
 
           if (item.ignored) {
-            item.variant = 'light'
             report.ignoreds++
-          } else if (status === 'warning') {
+          }
+          if (status === 'warning') {
             item.issue = true
-            report.warnings++
+            if (!item.ignored) {
+              report.warnings++
+            }
           } else if (status === 'error') {
             item.variant = 'danger'
             item.issue = true
-            report.errors++
+            if (!item.ignored) {
+              report.errors++
+            }
           }
         }
 
@@ -232,10 +236,11 @@ export default {
           item.ignored = action === 'ignore'
           if (item.ignored) {
             report[item.status.toLowerCase() + 's']--
+            report.ignoreds++
           } else {
+            report[item.status.toLowerCase() + 's']++
             report.ignoreds--
           }
-          this.formatReportItem(report, item)
         })
     },
 

From 183e281d04982d542a1f05418ad49df3a474ae3c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:39:52 +0100
Subject: [PATCH 25/30] fix: css misc fixes

---
 app/src/components/RecursiveListGroup.vue     |  6 +-
 app/src/components/globals/ExplainWhat.vue    | 24 +++++--
 app/src/components/globals/YListGroupItem.vue |  1 +
 .../globals/formItems/TagsSelectizeItem.vue   |  9 ++-
 app/src/scss/_variables.scss                  |  2 -
 app/src/scss/main.scss                        | 31 +++++++++
 app/src/views/_partials/ViewLockOverlay.vue   | 10 ++-
 app/src/views/app/AppCatalog.vue              | 10 +--
 app/src/views/group/GroupList.vue             |  4 +-
 app/src/views/tool/ToolFirewall.vue           | 65 +++++++------------
 app/src/views/user/UserCreate.vue             |  6 --
 app/src/views/user/UserEdit.vue               |  5 --
 app/src/views/user/UserInfo.vue               |  2 +-
 13 files changed, 105 insertions(+), 70 deletions(-)

diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 9c5645369..599537bd0 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -114,7 +114,11 @@ export default {
 
     &:hover,
     &:focus {
-      background-color: shade-color($gray-100, 3%);
+      background-color: shade-color($body-tertiary-bg, 3%);
+
+      [data-bs-theme='dark'] & {
+        background-color: tint-color($body-tertiary-bg-dark, 3%);
+      }
     }
   }
 }
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index ed3665ab5..5878a4497 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -58,18 +58,30 @@ export default {
 
   .btn {
     padding: 0;
-    margin-left: 0.1rem;
+    margin-left: 0.25rem;
     border-radius: 50rem;
     line-height: inherit;
     font-size: inherit;
   }
 
-  &-popover {
-    background-color: $white;
-    border-width: 2px;
+  :deep() {
+    .popover {
+      background-color: $gray-800;
+      color: $black;
+      border-width: 2px;
 
-    :deep(.popover-body) {
-      color: $dark;
+      [data-bs-theme='dark'] & {
+        background-color: $white;
+        color: $white;
+      }
+
+      .popover-body {
+        color: $white;
+
+        [data-bs-theme='dark'] & {
+          color: $black;
+        }
+      }
     }
   }
 }
diff --git a/app/src/components/globals/YListGroupItem.vue b/app/src/components/globals/YListGroupItem.vue
index 3ed5c9f44..5ac6962f8 100644
--- a/app/src/components/globals/YListGroupItem.vue
+++ b/app/src/components/globals/YListGroupItem.vue
@@ -49,6 +49,7 @@ export default {
 
   &-status {
     width: 2rem;
+    min-width: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/app/src/components/globals/formItems/TagsSelectizeItem.vue b/app/src/components/globals/formItems/TagsSelectizeItem.vue
index b85566c0b..525e39540 100644
--- a/app/src/components/globals/formItems/TagsSelectizeItem.vue
+++ b/app/src/components/globals/formItems/TagsSelectizeItem.vue
@@ -194,7 +194,14 @@ export default {
     padding-top: 0.5rem;
     position: sticky;
     top: 0;
-    background-color: $white;
+  }
+}
+
+// FIXME bvn fix (should be fixed in lib)
+:deep(.btn-group) {
+  display: block;
+  .btn {
+    width: 100%;
   }
 }
 </style>
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index 48cbe7dca..b484a8969 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -132,8 +132,6 @@ $list-group-item-padding-y: $spacer * 0.75;
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/utilities';
 
-$hr-border-color: $gray-200;
-
 $list-group-action-color: $gray-800;
 
 //  ╭──────────────────────────────────────╮
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 7e770aaa9..dbea35074 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -117,6 +117,29 @@ body {
 .tooltip {
   top: 0;
 }
+
+// BVN fixes
+// FIXME move to CardForm ?
+form {
+  .row {
+    margin-bottom: $spacer;
+  }
+  fieldset {
+    margin-bottom: $spacer;
+    width: 100%;
+    .row {
+      margin-bottom: 0;
+    }
+  }
+  .form-text {
+    display: block;
+
+    .alert {
+      margin-bottom: 0;
+    }
+  }
+}
+
 // Descriptive list (<b-row /> elems with <b-col> inside)
 // FIXME REMOVE when every infos switch to `DescriptionRow`
 .row-line {
@@ -247,6 +270,10 @@ code {
   background: $gray-300;
   padding: 0.15rem 0.25rem;
   border-radius: $border-radius;
+
+  [data-bs-theme='dark'] & {
+    background-color: $gray-800;
+  }
 }
 
 pre code {
@@ -258,6 +285,10 @@ pre code {
   padding: 1rem;
   background-color: $light;
   overflow: auto;
+
+  [data-bs-theme='dark'] & {
+    background-color: $dark;
+  }
 }
 
 .unselectable {
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index 8450b12fd..a32fe2636 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <BOverlay
-    variant="white"
+    :variant="dark ? 'dark' : 'light'"
     opacity="0.75"
     no-center
     :show="waiting || reconnecting || error !== null"
@@ -41,7 +41,13 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['waiting', 'reconnecting', 'error', 'currentRequest']),
+    ...mapGetters([
+      'waiting',
+      'reconnecting',
+      'error',
+      'currentRequest',
+      'dark',
+    ]),
 
     component() {
       const { error, reconnecting, currentRequest: request } = this
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 7f87ec1aa..c7542ae84 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -466,19 +466,20 @@ export default {
 .card-deck {
   padding: 0;
   margin-bottom: 0;
+  display: flex;
+  flex-flow: row wrap;
 
   > * {
-    margin-bottom: 2rem;
     flex-basis: 100%;
 
     @include media-breakpoint-up(md) {
       flex-basis: 50%;
-      max-width: calc(50% - 30px);
+      max-width: calc(50% - 0.75rem);
     }
 
     @include media-breakpoint-up(lg) {
       flex-basis: 33%;
-      max-width: calc(33.3% - 30px);
+      max-width: calc(33.3% - 1rem);
     }
   }
 
@@ -489,8 +490,9 @@ export default {
       border-color: $dark;
     }
 
-    .card-link {
+    :deep(.card-link) {
       color: inherit;
+      text-decoration: none;
 
       &::after {
         content: '';
diff --git a/app/src/views/group/GroupList.vue b/app/src/views/group/GroupList.vue
index 8b97b4760..b09d37679 100644
--- a/app/src/views/group/GroupList.vue
+++ b/app/src/views/group/GroupList.vue
@@ -45,11 +45,11 @@
 
         <BCol>
           <template v-if="group.isSpecial">
-            <p class="text-primary">
+            <p class="text-primary-emphasis">
               <YIcon iname="info-circle" />
               {{ $t('group_explain_' + groupName) }}
             </p>
-            <p class="text-primary" v-if="groupName === 'visitors'">
+            <p class="text-primary-emphasis" v-if="groupName === 'visitors'">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index 1eab60e14..30a475130 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -33,9 +33,7 @@
               "
             >
               <span
-                :class="
-                  'btn btn-sm py-0 btn-' + (data.value ? 'danger' : 'success')
-                "
+                :class="'btn btn-xs btn-' + (data.value ? 'danger' : 'success')"
               >
                 {{ $t(data.value ? 'close' : 'open') }}
               </span>
@@ -59,13 +57,13 @@
       :server-error="serverError"
       @submit.prevent="onFormPortToggling"
       inline
-      form-classes="d-flex justify-content-between align-items-start"
+      form-classes="d-flex flex-column flex-lg-row gap-3 justify-content-between align-items-start"
     >
       <BInputGroup :prepend="$t('action')">
         <BFormSelect v-model="form.action" :options="actionChoices" />
       </BInputGroup>
 
-      <FormField :validation="v$.form.port">
+      <FormField :validation="v$.form.port" class="mb-0">
         <BInputGroup :prepend="$t('port')">
           <InputItem
             id="input-port"
@@ -290,47 +288,34 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.on-off-switch) {
-  .custom-control-input {
-    &:checked ~ .custom-control-label::before {
-      border-color: $success;
-      background-color: $success;
-    }
-    &:not(:checked) ~ .custom-control-label {
-      &::before {
+:deep() {
+  .form-switch {
+    .form-check-input {
+      --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(255, 255, 255)'/></svg>") !important;
+      [data-bs-theme='dark'] * & {
+        --bs-form-switch-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgb(34, 38, 42)'/></svg>") !important;
+      }
+      &:checked {
+        border-color: $success;
+        background-color: $success;
+      }
+      &:not(:checked) {
         border-color: $danger;
         background-color: $danger;
       }
-      &::after {
-        background-color: $white;
-      }
     }
-  }
 
-  input:focus ~ .custom-control-label,
-  &:hover {
-    span {
-      visibility: visible;
-    }
-  }
-  span {
-    visibility: hidden;
-    @include media-breakpoint-down(sm) {
-      display: none;
+    input:focus ~ .custom-control-label,
+    &:hover {
+      span {
+        visibility: visible;
+      }
     }
-  }
-}
-
-:deep(form) {
-  margin-bottom: -1rem;
-
-  & > * {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-down(sm) {
-    fieldset {
-      width: 100%;
+    span {
+      visibility: hidden;
+      @include media-breakpoint-down(sm) {
+        display: none;
+      }
     }
   }
 }
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index f1d1e3f48..fa4eb56b9 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -199,9 +199,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.custom-select {
-  flex-basis: 40%;
-}
-</style>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 4e6418b6d..7d64224a2 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -361,11 +361,6 @@ export default {
   display: flex;
   justify-items: stretch;
 
-  .form-group {
-    margin-bottom: 0.5rem;
-    width: 100%;
-  }
-
   .btn-danger {
     align-self: flex-start;
     margin-left: 0.5rem;
diff --git a/app/src/views/user/UserInfo.vue b/app/src/views/user/UserInfo.vue
index d9b47bd39..b10095858 100644
--- a/app/src/views/user/UserInfo.vue
+++ b/app/src/views/user/UserInfo.vue
@@ -16,7 +16,7 @@
             <BCol>
               <strong>{{ $t('user_email') }}</strong>
             </BCol>
-            <BCol class="font-italic">
+            <BCol class="fst-italic">
               {{ user.mail }}
             </BCol>
           </BRow>

From e53c2c14d3993ba680f4bcd1acad0551e09da7e0 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:43:29 +0100
Subject: [PATCH 26/30] migration(bs5): font-weight-* to fw-*

---
 app/src/components/globals/FormField.vue     | 2 +-
 app/src/components/globals/ReadOnlyField.vue | 2 +-
 app/src/views/_partials/HistoryConsole.vue   | 2 +-
 app/src/views/app/AppInfo.vue                | 8 ++++----
 app/src/views/app/AppList.vue                | 2 +-
 app/src/views/backup/BackupCreate.vue        | 4 ++--
 app/src/views/backup/BackupInfo.vue          | 4 ++--
 app/src/views/backup/BackupList.vue          | 2 +-
 app/src/views/backup/BackupView.vue          | 2 +-
 app/src/views/domain/DomainInfo.vue          | 2 +-
 app/src/views/domain/DomainList.vue          | 2 +-
 app/src/views/service/ServiceList.vue        | 2 +-
 app/src/views/user/UserList.vue              | 2 +-
 13 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 18114508c..16b58903b 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -98,7 +98,7 @@ export default {
         const defaultAttrs = {
           'label-cols-md': 4,
           'label-cols-lg': 3,
-          'label-class': ['font-weight-bold', 'py-0'],
+          'label-class': ['fw-bold', 'py-0'],
         }
         if (!('label-cols' in attrs)) {
           for (const attr in defaultAttrs) {
diff --git a/app/src/components/globals/ReadOnlyField.vue b/app/src/components/globals/ReadOnlyField.vue
index 7948964ed..1fedf9521 100644
--- a/app/src/components/globals/ReadOnlyField.vue
+++ b/app/src/components/globals/ReadOnlyField.vue
@@ -1,6 +1,6 @@
 <template>
   <BRow no-gutters class="description-row">
-    <BCol v-bind="cols_" class="font-weight-bold">
+    <BCol v-bind="cols_" class="fw-bold">
       {{ label }}
     </BCol>
 
diff --git a/app/src/views/_partials/HistoryConsole.vue b/app/src/views/_partials/HistoryConsole.vue
index 73ab25e0b..d12fc2c3a 100644
--- a/app/src/views/_partials/HistoryConsole.vue
+++ b/app/src/views/_partials/HistoryConsole.vue
@@ -15,7 +15,7 @@
     >
       <h5 class="m-0">
         <YIcon iname="history" />
-        <span class="d-none d-sm-inline font-weight-bold">
+        <span class="d-none d-sm-inline fw-bold">
           {{ $t('history.title') }}
         </span>
       </h5>
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 4b55fc60d..877715c9e 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -136,7 +136,7 @@
         <!-- CHANGE PERMISSIONS LABEL -->
         <BFormGroup
           :label="$t('app_manage_label_and_tiles')"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
         >
           <FormField
             v-for="(perm, i) in app.permissions"
@@ -186,7 +186,7 @@
         <BFormGroup
           :label="$t('app_info_access_desc')"
           label-for="permissions"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           label-cols-lg="0"
         >
           {{
@@ -209,7 +209,7 @@
           :label="$t('app_info_changeurl_desc')"
           label-for="input-url"
           :label-cols-lg="app.supports_change_url ? 0 : 0"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           v-if="app.is_webapp"
         >
           <BInputGroup v-if="app.supports_change_url">
@@ -243,7 +243,7 @@
         <BFormGroup
           :label="$t('app_info_default_desc', { domain: app.domain })"
           label-for="main-domain"
-          label-class="font-weight-bold"
+          label-class="fw-bold"
           label-cols-md="4"
           v-if="app.is_webapp"
         >
diff --git a/app/src/views/app/AppList.vue b/app/src/views/app/AppList.vue
index 890a9792d..93fc8ffc5 100644
--- a/app/src/views/app/AppList.vue
+++ b/app/src/views/app/AppList.vue
@@ -22,7 +22,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ label }}
             <small class="text-secondary">{{ id }}</small>
           </h5>
diff --git a/app/src/views/backup/BackupCreate.vue b/app/src/views/backup/BackupCreate.vue
index 699cd8b0b..c340d1776 100644
--- a/app/src/views/backup/BackupCreate.vue
+++ b/app/src/views/backup/BackupCreate.vue
@@ -44,7 +44,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
               </h5>
               <p class="m-0 text-muted">
@@ -92,7 +92,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary">{{ item.id }}</small>
               </h5>
diff --git a/app/src/views/backup/BackupInfo.vue b/app/src/views/backup/BackupInfo.vue
index ccc1b3b53..74a355145 100644
--- a/app/src/views/backup/BackupInfo.vue
+++ b/app/src/views/backup/BackupInfo.vue
@@ -71,7 +71,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary" v-if="item.size">
                   ({{ humanSize(item.size) }})
@@ -92,7 +92,7 @@
             class="d-flex justify-content-between align-items-center pe-0"
           >
             <div class="me-2">
-              <h5 class="font-weight-bold">
+              <h5 class="fw-bold">
                 {{ item.name }}
                 <small class="text-secondary">
                   {{ appName }} ({{ humanSize(item.size) }})
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 96cbce56a..4a58bae44 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -28,7 +28,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ distanceToNow(created_at) }}
             <small class="text-secondary"
               >{{ name }} ({{ humanSize(size) }})</small
diff --git a/app/src/views/backup/BackupView.vue b/app/src/views/backup/BackupView.vue
index 164447d31..5601b05de 100644
--- a/app/src/views/backup/BackupView.vue
+++ b/app/src/views/backup/BackupView.vue
@@ -8,7 +8,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ name }}
             <small class="text-secondary">{{ id }}</small>
           </h5>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index cccdbef82..076a561a5 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -86,7 +86,7 @@
             class="me-2 mb-2"
           >
             <BButton
-              class="py-0 font-weight-bold"
+              class="py-0 fw-bold"
               variant="outline-dark"
               :to="{ name: 'app-info', params: { id: app.id } }"
             >
diff --git a/app/src/views/domain/DomainList.vue b/app/src/views/domain/DomainList.vue
index 1b3b7399b..48118a4d6 100644
--- a/app/src/views/domain/DomainList.vue
+++ b/app/src/views/domain/DomainList.vue
@@ -23,7 +23,7 @@
         <div class="w-100 d-flex justify-content-between align-items-center">
           <h5 class="me-3">
             <BLink :to="data.to" class="text-body text-decoration-none">
-              <span class="font-weight-bold">
+              <span class="fw-bold">
                 {{ data.name.replace(parent ? parent.data.name : null, '') }}
               </span>
               <span v-if="parent" class="text-secondary">
diff --git a/app/src/views/service/ServiceList.vue b/app/src/views/service/ServiceList.vue
index 8ee867d5a..874206a67 100644
--- a/app/src/views/service/ServiceList.vue
+++ b/app/src/views/service/ServiceList.vue
@@ -21,7 +21,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ name }}
             <small class="text-secondary">{{ description }}</small>
           </h5>
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index ffdcdd000..88a8319e8 100644
--- a/app/src/views/user/UserList.vue
+++ b/app/src/views/user/UserList.vue
@@ -38,7 +38,7 @@
         class="d-flex justify-content-between align-items-center pe-0"
       >
         <div>
-          <h5 class="font-weight-bold">
+          <h5 class="fw-bold">
             {{ user.username }}
             <small class="text-secondary">{{ user.fullname }}</small>
           </h5>

From 357405d2a3c2b5cf3e106849e52b2bd9693d53b8 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:06:03 +0100
Subject: [PATCH 27/30] migration(bvn): remove no longer necessary
 BInputGroupAppend|Prepend

---
 app/src/components/AdressInputSelect.vue  | 28 ++++-----------
 app/src/components/globals/ViewSearch.vue |  4 +--
 app/src/views/app/AppCatalog.vue          | 44 ++++++++++++-----------
 app/src/views/app/AppInfo.vue             | 30 +++++++---------
 app/src/views/user/UserCreate.vue         | 12 ++-----
 5 files changed, 48 insertions(+), 70 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 2bb24d1a7..42b88dddc 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -9,18 +9,14 @@
       @update:modelValue="onInput('localPart', $event)"
     />
 
-    <BInputGroupAppend>
-      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
-    </BInputGroupAppend>
+    <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
 
-    <BInputGroupAppend>
-      <SelectItem
-        :modelValue="modelValue.domain"
-        :choices="choices"
-        :aria-describedby="id + 'domain-desc'"
-        @update:modelValue="onInput('domain', $event)"
-      />
-    </BInputGroupAppend>
+    <SelectItem
+      :modelValue="modelValue.domain"
+      :choices="choices"
+      :aria-describedby="id + 'domain-desc'"
+      @update:modelValue="onInput('domain', $event)"
+    />
 
     <span
       class="sr-only"
@@ -60,13 +56,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.input-group-append ~ .input-group-append {
-  flex-basis: 40%;
-}
-select {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-</style>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index de6912b03..f808cbbe4 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -5,9 +5,9 @@
     </template>
     <template v-if="!hasCustomTopBar" #top-bar-group-left>
       <BInputGroup class="w-100">
-        <BInputGroupPrepend is-text>
+        <BInputGroupText>
           <YIcon iname="search" />
-        </BInputGroupPrepend>
+        </BInputGroupText>
 
         <BFormInput
           id="top-bar-search"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index c7542ae84..888a0a349 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -10,48 +10,49 @@
       <div id="view-top-bar">
         <!-- APP SEARCH -->
         <BInputGroup>
-          <BInputGroupPrepend is-text>
+          <BInputGroupText>
             <YIcon iname="search" />
-          </BInputGroupPrepend>
+          </BInputGroupText>
+
           <BFormInput
             id="search-input"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
             :modelValue="search"
             @update:modelValue="updateQuery('search', $event)"
           />
-          <BInputGroupAppend>
-            <BFormSelect
-              :modelValue="quality"
-              :options="qualityOptions"
-              @update:modelValue="updateQuery('quality', $event)"
-            />
-          </BInputGroupAppend>
+
+          <BFormSelect
+            :modelValue="quality"
+            :options="qualityOptions"
+            @update:modelValue="updateQuery('quality', $event)"
+          />
         </BInputGroup>
 
         <!-- CATEGORY SELECT -->
         <BInputGroup class="mt-3">
-          <BInputGroupPrepend is-text>
+          <BInputGroupText>
             <YIcon iname="filter" />
-          </BInputGroupPrepend>
+          </BInputGroupText>
+
           <BFormSelect
             :modelValue="category"
             :options="categories"
             @update:modelValue="updateQuery('category', $event)"
           />
-          <BInputGroupAppend>
-            <BButton
-              variant="primary"
-              :disabled="category === null"
-              @click="updateQuery('category', null)"
-            >
-              {{ $t('app_show_categories') }}
-            </BButton>
-          </BInputGroupAppend>
+
+          <BButton
+            variant="primary"
+            :disabled="category === null"
+            @click="updateQuery('category', null)"
+          >
+            {{ $t('app_show_categories') }}
+          </BButton>
         </BInputGroup>
 
         <!-- CATEGORIES SUBTAGS -->
         <BInputGroup v-if="subtags" class="mt-3 subtags">
-          <BInputGroupPrepend is-text> Subtags </BInputGroupPrepend>
+          <BInputGroupText>Subtags</BInputGroupText>
+
           <BFormRadioGroup
             id="subtags-radio"
             name="subtags"
@@ -61,6 +62,7 @@
             buttons
             button-variant="outline-secondary"
           />
+
           <BFormSelect
             id="subtags-select"
             :modelValue="subtag"
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index 877715c9e..eb9fdf03f 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -156,19 +156,19 @@
                   :id="'perm' + i"
                   :aria-describedby="'perm-' + i + '_group__BV_description_'"
                 />
-                <BInputGroupAppend v-if="perm.tileAvailable" is-text>
+
+                <BInputGroupText v-if="perm.tileAvailable">
                   <CheckboxItem
                     v-model="form.labels[i].show_tile"
                     :label="$t('permission_show_tile_enabled')"
                   />
-                </BInputGroupAppend>
-                <BInputGroupAppend>
-                  <BButton
-                    variant="info"
-                    v-t="'save'"
-                    @click="changeLabel(perm.name, form.labels[i])"
-                  />
-                </BInputGroupAppend>
+                </BInputGroupText>
+
+                <BButton
+                  variant="info"
+                  v-t="'save'"
+                  @click="changeLabel(perm.name, form.labels[i])"
+                />
               </BInputGroup>
             </template>
 
@@ -213,13 +213,11 @@
           v-if="app.is_webapp"
         >
           <BInputGroup v-if="app.supports_change_url">
-            <BInputGroupPrepend is-text> https:// </BInputGroupPrepend>
+            <BInputGroupText>https://</BInputGroupText>
 
-            <BInputGroupPrepend class="flex-grow-1">
-              <BFormSelect v-model="form.url.domain" :options="domains" />
-            </BInputGroupPrepend>
+            <BFormSelect v-model="form.url.domain" :options="domains" />
 
-            <BInputGroupPrepend is-text> / </BInputGroupPrepend>
+            <BInputGroupText>/</BInputGroupText>
 
             <BFormInput
               id="input-url"
@@ -227,9 +225,7 @@
               class="flex-grow-3"
             />
 
-            <BInputGroupAppend>
-              <BButton @click="changeUrl" variant="info" v-t="'save'" />
-            </BInputGroupAppend>
+            <BButton @click="changeUrl" variant="info" v-t="'save'" />
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index fa4eb56b9..d2095e496 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -30,15 +30,9 @@
       <FormField v-bind="fields.domain" :validation="v$.form.domain">
         <template #default="{ self }">
           <BInputGroup>
-            <BInputGroupAppend>
-              <BInputGroupText
-                id="local-part"
-                tag="label"
-                class="border-right-0"
-              >
-                {{ form.username }}@
-              </BInputGroupText>
-            </BInputGroupAppend>
+            <BInputGroupText id="local-part" tag="label" class="border-right-0">
+              {{ form.username }}@
+            </BInputGroupText>
 
             <SelectItem
               aria-labelledby="local-part"

From 26b691d9d646cf69b1edbb536f63a968f315227c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:15:55 +0100
Subject: [PATCH 28/30] migration(bs5): r/sr-only/visually-hidden

---
 app/src/components/AdressInputSelect.vue          | 4 ++--
 app/src/components/RecursiveListGroup.vue         | 2 +-
 app/src/components/globals/ExplainWhat.vue        | 2 +-
 app/src/components/globals/YBreadcrumb.vue        | 2 +-
 app/src/components/globals/YCard.vue              | 2 +-
 app/src/components/globals/formItems/FileItem.vue | 2 +-
 app/src/views/domain/DomainInfo.vue               | 2 +-
 app/src/views/user/UserEdit.vue                   | 4 ++--
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
index 42b88dddc..be10a063c 100644
--- a/app/src/components/AdressInputSelect.vue
+++ b/app/src/components/AdressInputSelect.vue
@@ -19,12 +19,12 @@
     />
 
     <span
-      class="sr-only"
+      class="visually-hidden"
       :id="id + 'local-part-desc'"
       v-t="'address.local_part_description.' + type"
     />
     <span
-      class="sr-only"
+      class="visually-hidden"
       :id="id + 'domain-desc'"
       v-t="'address.domain_description.' + type"
     />
diff --git a/app/src/components/RecursiveListGroup.vue b/app/src/components/RecursiveListGroup.vue
index 599537bd0..66a74f69f 100644
--- a/app/src/components/RecursiveListGroup.vue
+++ b/app/src/components/RecursiveListGroup.vue
@@ -18,7 +18,7 @@
           class="ms-2"
           @click.stop="node.data.opened = !node.data.opened"
         >
-          <span class="sr-only">{{ toggleText }}</span>
+          <span class="visually-hidden">{{ toggleText }}</span>
           <YIcon iname="chevron-right" />
         </BButton>
       </BListGroupItem>
diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 5878a4497..cc27000af 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -9,7 +9,7 @@
         @click="open = !open"
       >
         <YIcon iname="question" />
-        <span class="sr-only">
+        <span class="visually-hidden">
           {{ $t('details_about', { subject: title }) }}
         </span>
       </BButton>
diff --git a/app/src/components/globals/YBreadcrumb.vue b/app/src/components/globals/YBreadcrumb.vue
index 858708a8e..6e30430ec 100644
--- a/app/src/components/globals/YBreadcrumb.vue
+++ b/app/src/components/globals/YBreadcrumb.vue
@@ -1,7 +1,7 @@
 <template>
   <BBreadcrumb v-if="breadcrumb.length">
     <BBreadcrumbItem to="/">
-      <span class="sr-only">{{ $t('home') }}</span>
+      <span class="visually-hidden">{{ $t('home') }}</span>
       <YIcon iname="home" />
     </BBreadcrumbItem>
 
diff --git a/app/src/components/globals/YCard.vue b/app/src/components/globals/YCard.vue
index a75564295..6a1c3429f 100644
--- a/app/src/components/globals/YCard.vue
+++ b/app/src/components/globals/YCard.vue
@@ -34,7 +34,7 @@
         }"
       >
         <YIcon iname="chevron-right" />
-        <span class="sr-only">{{ $t('words.collapse') }}</span>
+        <span class="visually-hidden">{{ $t('words.collapse') }}</span>
       </BButton>
     </template>
 
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 7bd3f2503..ecadae23e 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -6,7 +6,7 @@
         @click="clearFiles"
         variant="danger"
       >
-        <span class="sr-only">{{ $t('delete') }}</span>
+        <span class="visually-hidden">{{ $t('delete') }}</span>
         <YIcon iname="trash" />
       </BButton>
     </template>
diff --git a/app/src/views/domain/DomainInfo.vue b/app/src/views/domain/DomainInfo.vue
index 076a561a5..4445929e2 100644
--- a/app/src/views/domain/DomainInfo.vue
+++ b/app/src/views/domain/DomainInfo.vue
@@ -98,7 +98,7 @@
               :href="'https://' + name + app.path"
               target="_blank"
             >
-              <span class="sr-only">{{ $t('app.visit_app') }}</span>
+              <span class="visually-hidden">{{ $t('app.visit_app') }}</span>
               <YIcon iname="external-link" />
             </BButton>
           </BButton-group>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 7d64224a2..bdb025451 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -59,7 +59,7 @@
 
           <BButton variant="danger" @click="removeEmailField('aliases', i)">
             <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="sr-only">{{ $t('delete') }}</span>
+            <span class="visually-hidden">{{ $t('delete') }}</span>
           </BButton>
         </div>
 
@@ -81,7 +81,7 @@
 
           <BButton variant="danger" @click="removeEmailField('forward', i)">
             <YIcon :title="$t('delete')" iname="trash-o" />
-            <span class="sr-only">{{ $t('delete') }}</span>
+            <span class="visually-hidden">{{ $t('delete') }}</span>
           </BButton>
         </div>
 

From dc530e36a1fb8dfb1cf7aefea93f57ebd9e5a13c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 03:29:26 +0100
Subject: [PATCH 29/30] migration(bvn): BAlert needs explicit show value

---
 app/src/components/globals/AbstractForm.vue            |  7 ++++++-
 app/src/components/globals/CardForm.vue                |  2 +-
 app/src/components/globals/ViewSearch.vue              |  6 +++++-
 app/src/components/globals/YAlert.vue                  |  1 +
 .../components/globals/formItems/ReadOnlyAlertItem.vue |  2 +-
 app/src/views/_partials/ErrorDisplay.vue               |  2 +-
 app/src/views/_partials/ReconnectingDisplay.vue        | 10 +++++++---
 app/src/views/app/AppInstall.vue                       |  2 +-
 app/src/views/backup/BackupList.vue                    |  2 +-
 9 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/src/components/globals/AbstractForm.vue b/app/src/components/globals/AbstractForm.vue
index ed7581b54..10934e691 100644
--- a/app/src/components/globals/AbstractForm.vue
+++ b/app/src/components/globals/AbstractForm.vue
@@ -13,7 +13,12 @@
         <slot name="default" />
 
         <slot name="server-error" v-bind="{ errorFeedback }">
-          <BAlert v-if="errorFeedback" variant="danger" class="my-3" icon="ban">
+          <BAlert
+            :modelValue="!!errorFeedback"
+            variant="danger"
+            class="my-3"
+            icon="ban"
+          >
             <div v-html="errorFeedback" />
           </BAlert>
         </slot>
diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 7ab7cb825..7c7128870 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -17,7 +17,7 @@
             variant="danger"
             class="my-3"
             icon="ban"
-            :show="errorFeedback !== ''"
+            :modelValue="errorFeedback !== ''"
           >
             <div v-html="errorFeedback" />
           </BAlert>
diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index f808cbbe4..8a1a7cc4b 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -29,7 +29,11 @@
     </template>
 
     <template #default>
-      <BAlert v-if="items === null || filteredItems === null" variant="warning">
+      <BAlert
+        v-if="items === null || filteredItems === null"
+        :modelValue="true"
+        variant="warning"
+      >
         <slot name="alert-message">
           <YIcon iname="exclamation-triangle" />
           {{
diff --git a/app/src/components/globals/YAlert.vue b/app/src/components/globals/YAlert.vue
index 2032c42a6..7456636e4 100644
--- a/app/src/components/globals/YAlert.vue
+++ b/app/src/components/globals/YAlert.vue
@@ -2,6 +2,7 @@
   <Component
     v-bind="$attrs"
     :is="alert ? 'BAlert' : 'div'"
+    :modelValue="alert ? true : null"
     :variant="alert ? variant : null"
     :class="{ ['alert alert-' + variant]: !alert }"
     class="yuno-alert d-flex flex-column flex-md-row align-items-center"
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index 851bfafb1..9e16dd862 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -2,7 +2,7 @@
   <BAlert
     class="d-flex flex-column flex-md-row align-items-center"
     :variant="type"
-    show
+    :modelValue="true"
   >
     <YIcon :iname="icon_" class="me-md-3 mb-md-0 mb-2" :variant="type" />
 
diff --git a/app/src/views/_partials/ErrorDisplay.vue b/app/src/views/_partials/ErrorDisplay.vue
index fd11eea02..997096ec5 100644
--- a/app/src/views/_partials/ErrorDisplay.vue
+++ b/app/src/views/_partials/ErrorDisplay.vue
@@ -23,7 +23,7 @@
 
       <p>
         <strong v-t="'api_error.error_message'" />
-        <BAlert class="mt-2" variant="danger">
+        <BAlert :modelValue="true" class="mt-2" variant="danger">
           <div v-html="error.message" />
         </BAlert>
       </p>
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
index be8094c63..25ea97118 100644
--- a/app/src/views/_partials/ReconnectingDisplay.vue
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -7,14 +7,14 @@
       <YSpinner class="mb-4" />
 
       <BAlert
-        v-if="origin"
+        :modelValue="!!origin"
         v-t="'api.reconnecting.reason.' + origin"
         :variant="origin === 'unknow' ? 'warning' : 'info'"
       />
     </template>
 
     <template v-if="status === 'failed'">
-      <BAlert variant="danger">
+      <BAlert :modelValue="true" variant="danger">
         <MarkdownItem :label="$t('api.reconnecting.failed')" />
       </BAlert>
 
@@ -29,7 +29,11 @@
     </template>
 
     <template v-if="status === 'expired'">
-      <BAlert variant="success" v-t="'api.reconnecting.session_expired'" />
+      <BAlert
+        :modelValue="true"
+        variant="success"
+        v-t="'api.reconnecting.session_expired'"
+      />
 
       <LoginView force-reload />
     </template>
diff --git a/app/src/views/app/AppInstall.vue b/app/src/views/app/AppInstall.vue
index 4b8d9a976..965d758c8 100644
--- a/app/src/views/app/AppInstall.vue
+++ b/app/src/views/app/AppInstall.vue
@@ -193,7 +193,7 @@
     </template>
 
     <!-- In case of a custom url with no manifest found -->
-    <BAlert v-else-if="app === null" variant="warning">
+    <BAlert :modelValue="app === null" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('app_install_custom_no_manifest') }}
     </BAlert>
diff --git a/app/src/views/backup/BackupList.vue b/app/src/views/backup/BackupList.vue
index 4a58bae44..a1a19f454 100644
--- a/app/src/views/backup/BackupList.vue
+++ b/app/src/views/backup/BackupList.vue
@@ -14,7 +14,7 @@
       />
     </template>
 
-    <BAlert v-if="!archives" variant="warning">
+    <BAlert v-if="!archives" :modelValue="!archives" variant="warning">
       <YIcon iname="exclamation-triangle" />
       {{ $t('items_verbose_count', { items: $t('items.backups', 0) }, 0) }}
     </BAlert>

From e4ab46b10ce0ef43a09343321c9a614ad6c7939d Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 20:48:04 +0100
Subject: [PATCH 30/30] chore: update yarn.lock

---
 app/yarn.lock | 1199 ++++++++++++++++++++++++++++---------------------
 1 file changed, 691 insertions(+), 508 deletions(-)

diff --git a/app/yarn.lock b/app/yarn.lock
index d0e7639ce..178d74834 100644
--- a/app/yarn.lock
+++ b/app/yarn.lock
@@ -7,127 +7,130 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@babel/parser@^7.23.5":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
-  integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
-
-"@babel/runtime@^7.21.0":
-  version "7.24.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
-  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
-
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+"@antfu/utils@^0.7.6":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
+  integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
+
+"@babel/parser@^7.23.9":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
+  integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
+
+"@esbuild/aix-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
+  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
+
+"@esbuild/android-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
+  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
+
+"@esbuild/android-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
+  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
+
+"@esbuild/android-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
+  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
+
+"@esbuild/darwin-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
+  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+
+"@esbuild/darwin-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
+  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+
+"@esbuild/freebsd-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
+  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
+
+"@esbuild/freebsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
+  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+
+"@esbuild/linux-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
+  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
+
+"@esbuild/linux-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
+  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
+
+"@esbuild/linux-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
+  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
+
+"@esbuild/linux-loong64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
+  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
+
+"@esbuild/linux-mips64el@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
+  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
+
+"@esbuild/linux-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
+  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
+
+"@esbuild/linux-riscv64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
+  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
+
+"@esbuild/linux-s390x@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
+  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
+
+"@esbuild/linux-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
+
+"@esbuild/netbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
+  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
+
+"@esbuild/openbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
+  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
+
+"@esbuild/sunos-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
+  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
+
+"@esbuild/win32-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
+  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
+
+"@esbuild/win32-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
+  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
+
+"@esbuild/win32-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
+  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -161,15 +164,44 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
-"@fontsource/fira-code@^4.5.13":
-  version "4.5.13"
-  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.13.tgz#7ddd62472f7e6002acf9371815090eecf5d28f8c"
-  integrity sha512-T1IG6/2AXSwEKwlrEm3kyIL3RQTMblPyj68HgnBGl0IBGFxgS5LZ7StRdDo/QimJ4Tz6FQGHuy1Y/ShNxaUefA==
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
 
-"@fontsource/firago@^4.5.3":
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-4.5.3.tgz#ba0c15105b20e161b7a31675697865851fc6175a"
-  integrity sha512-Kn6FBi6MGNPYwzVKUtgyWGUj0zV18El263ieZi8A7TM2LPKsfzON5ENeKfjyTKfYErkjg9ktwiNP3SLsEOSBNQ==
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
+"@floating-ui/vue@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.6.tgz#31860a12f1135d19554c232d99c5bab631c5c576"
+  integrity sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    "@floating-ui/utils" "^0.2.1"
+    vue-demi ">=0.13.0"
+
+"@fontsource/fira-code@^5.0.17":
+  version "5.0.17"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-5.0.17.tgz#7b0c402548190ea55a613fe19b879a5f4ddaf8ab"
+  integrity sha512-Ai0qE5PWvm6ETny7ToAitwdhYtO3YrNIHoa0arPquXxpnlRSB+OsJfhKnfgDKm6WMmCnxKOfsIslbVw5PqQvvQ==
+
+"@fontsource/firago@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@fontsource/firago/-/firago-5.0.7.tgz#24dfb34a1a1744001bc1d9c093e5233a1c84f12f"
+  integrity sha512-xuTYVOBSwev2IVp2dqgrnq3gABUnehn91Ii+R1TM5Jpvr86gCPrMxmqfL9fgpUb5r12u7U1LBVC20GypIy8jeg==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
@@ -190,6 +222,32 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@intlify/core-base@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.10.2.tgz#e7f8857f8011184e4afbdcfae7dbd85c50ba5271"
+  integrity sha512-HGStVnKobsJL0DoYIyRCGXBH63DMQqEZxDUGrkNI05FuTcruYUtOAxyL3zoAZu/uDGO6mcUvm3VXBaHG2GdZCg==
+  dependencies:
+    "@intlify/message-compiler" "9.10.2"
+    "@intlify/shared" "9.10.2"
+
+"@intlify/message-compiler@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.10.2.tgz#c44cbb915bdd0d62780a38595a84006c781f717a"
+  integrity sha512-ntY/kfBwQRtX5Zh6wL8cSATujPzWW2ZQd1QwKyWwAy5fMqJyyixHMeovN4fmEyCqSu+hFfYOE63nU94evsy4YA==
+  dependencies:
+    "@intlify/shared" "9.10.2"
+    source-map-js "^1.0.2"
+
+"@intlify/shared@9.10.2":
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.10.2.tgz#693300ea033868cbe4086b832170612f002e24a9"
+  integrity sha512-ttHCAJkRy7R5W2S9RVnN9KYQYPIpV2+GiS79T4EE37nrPyH6/1SrOh3bmdCRC1T3ocL8qCDx7x2lBJ0xaITU7Q==
+
+"@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==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -198,12 +256,12 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.8":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -211,47 +269,236 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@nuxt/opencollective@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@nuxt/opencollective/-/opencollective-0.3.3.tgz#80ff0eb8f6fca1d0ed5a089b9688f41bff2dd8ab"
-  integrity sha512-6IKCd+gP0HliixqZT/p8nW3tucD6Sv/u/eR2A9X4rxT/6hXlMzA4GZQzq4d2qnBAwSwGpmKyzkyTjNjrhaA25A==
-  dependencies:
-    chalk "^4.1.0"
-    consola "^2.15.0"
-    node-fetch "^2.6.7"
-
 "@pkgr/core@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
+"@rollup/pluginutils@^5.0.4":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
+"@rollup/rollup-android-arm-eabi@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz#b98786c1304b4ff8db3a873180b778649b5dff2b"
+  integrity sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==
+
+"@rollup/rollup-android-arm64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz#8833679af11172b1bf1ab7cb3bad84df4caf0c9e"
+  integrity sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==
+
+"@rollup/rollup-darwin-arm64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz#ef02d73e0a95d406e0eb4fd61a53d5d17775659b"
+  integrity sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==
+
+"@rollup/rollup-darwin-x64@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz#3ce5b9bcf92b3341a5c1c58a3e6bcce0ea9e7455"
+  integrity sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz#3d3d2c018bdd8e037c6bfedd52acfff1c97e4be4"
+  integrity sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==
+
+"@rollup/rollup-linux-arm64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz#5fc8cc978ff396eaa136d7bfe05b5b9138064143"
+  integrity sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==
+
+"@rollup/rollup-linux-arm64-musl@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz#f2ae7d7bed416ffa26d6b948ac5772b520700eef"
+  integrity sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==
+
+"@rollup/rollup-linux-riscv64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz#303d57a328ee9a50c85385936f31cf62306d30b6"
+  integrity sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==
+
+"@rollup/rollup-linux-x64-gnu@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz#f672f6508f090fc73f08ba40ff76c20b57424778"
+  integrity sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==
+
+"@rollup/rollup-linux-x64-musl@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz#d2f34b1b157f3e7f13925bca3288192a66755a89"
+  integrity sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==
+
+"@rollup/rollup-win32-arm64-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz#8ffecc980ae4d9899eb2f9c4ae471a8d58d2da6b"
+  integrity sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==
+
+"@rollup/rollup-win32-ia32-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz#a7505884f415662e088365b9218b2b03a88fc6f2"
+  integrity sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==
+
+"@rollup/rollup-win32-x64-msvc@4.13.0":
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz#6abd79db7ff8d01a58865ba20a63cfd23d9e2a10"
+  integrity sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==
+
+"@types/estree@1.0.5", "@types/estree@^1.0.0":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
+
+"@types/showdown@^2.0.1":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.6.tgz#3d7affd5f971b4a17783ec2b23b4ad3b97477b7e"
+  integrity sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==
+
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vitejs/plugin-vue2@^2.2.0":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.3.1.tgz#53078d3d9d50d9863f1fbb1c1ef7791a5fcd4948"
-  integrity sha512-/ksaaz2SRLN11JQhLdEUhDzOn909WEk99q9t9w+N12GjQCljzv7GyvAbD/p20aBUjHkvpGOoQ+FCOkG+mjDF4A==
+"@vitejs/plugin-vue@^5.0.4":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz#508d6a0f2440f86945835d903fcc0d95d1bb8a37"
+  integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
 
-"@vue/compiler-sfc@2.7.16":
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
-  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
+"@vue/compiler-core@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
+  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
   dependencies:
-    "@babel/parser" "^7.23.5"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
+    "@babel/parser" "^7.23.9"
+    "@vue/shared" "3.4.21"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
+  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
+  dependencies:
+    "@vue/compiler-core" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/compiler-sfc@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
+  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.21"
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/compiler-ssr" "3.4.21"
+    "@vue/shared" "3.4.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.7"
+    postcss "^8.4.35"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
+  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
+  dependencies:
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
+  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
+
+"@vue/reactivity@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.21.tgz#affd3415115b8ebf4927c8d2a0d6a24bccfa9f02"
+  integrity sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==
+  dependencies:
+    "@vue/shared" "3.4.21"
+
+"@vue/runtime-core@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.21.tgz#3749c3f024a64c4c27ecd75aea4ca35634db0062"
+  integrity sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==
+  dependencies:
+    "@vue/reactivity" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/runtime-dom@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz#91f867ef64eff232cac45095ab28ebc93ac74588"
+  integrity sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==
+  dependencies:
+    "@vue/runtime-core" "3.4.21"
+    "@vue/shared" "3.4.21"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.21.tgz#150751579d26661ee3ed26a28604667fa4222a97"
+  integrity sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==
+  dependencies:
+    "@vue/compiler-ssr" "3.4.21"
+    "@vue/shared" "3.4.21"
+
+"@vue/shared@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
+  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
+
+"@vuelidate/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vuelidate/validators@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vueuse/core@^10.7.2":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
+  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.9.0"
+    "@vueuse/shared" "10.9.0"
+    vue-demi ">=0.14.7"
+
+"@vueuse/metadata@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
+  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+
+"@vueuse/shared@10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
+  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+  dependencies:
+    vue-demi ">=0.14.7"
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.9.0:
+acorn@^8.11.3, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -266,23 +513,11 @@ ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ansi-regex@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.1.tgz#164daac87ab2d6f6db3a29875e2d1766582dabed"
-  integrity sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==
-
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
-ansi-styles@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  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"
@@ -309,30 +544,27 @@ balanced-match@^1.0.0:
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-bootstrap-vue@^2.22.0:
-  version "2.23.1"
-  resolved "https://registry.yarnpkg.com/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz#8f866f7cda27eb0e7e13a0bea8d55d8fc7a82199"
-  integrity sha512-SEWkG4LzmMuWjQdSYmAQk1G/oOKm37dtNfjB5kxq0YafnL2W6qUAmeDTcIZVbPiQd2OQlIkWOMPBRGySk/zGsg==
+bootstrap-vue-next@^0.16.6:
+  version "0.16.6"
+  resolved "https://registry.yarnpkg.com/bootstrap-vue-next/-/bootstrap-vue-next-0.16.6.tgz#bd35ad1ed64692badd8c7093fd238b5d6fc65ab0"
+  integrity sha512-CDjq3KgIOALJO/Zvmcgxqavv1NznFROUl7yWHAmp4T4R8IRJLfyMj1zizjw2OzCvQ+uJ9PZ28T1Cx7xq8+m2xg==
   dependencies:
-    "@nuxt/opencollective" "^0.3.2"
-    bootstrap "^4.6.1"
-    popper.js "^1.16.1"
-    portal-vue "^2.1.7"
-    vue-functional-data-merge "^3.1.0"
+    "@floating-ui/vue" "^1.0.6"
+    "@vueuse/core" "^10.7.2"
 
-bootstrap@^4.6.0, bootstrap@^4.6.1:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
-  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -342,7 +574,14 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@~3.0.2:
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -354,12 +593,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.0.0:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
-  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -367,7 +601,7 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0":
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -382,22 +616,6 @@ chalk@^4.0.0, chalk@^4.1.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -405,26 +623,21 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+commander@^9.0.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-consola@^2.15.0:
-  version "2.15.3"
-  resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
-  integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
-
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -439,17 +652,15 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-csstype@^3.1.0:
+csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-date-fns@^2.29.3:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
+date-fns@^3.3.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
 debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
@@ -458,11 +669,6 @@ debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -475,38 +681,39 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
-  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.19.3:
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
+    "@esbuild/aix-ppc64" "0.19.12"
+    "@esbuild/android-arm" "0.19.12"
+    "@esbuild/android-arm64" "0.19.12"
+    "@esbuild/android-x64" "0.19.12"
+    "@esbuild/darwin-arm64" "0.19.12"
+    "@esbuild/darwin-x64" "0.19.12"
+    "@esbuild/freebsd-arm64" "0.19.12"
+    "@esbuild/freebsd-x64" "0.19.12"
+    "@esbuild/linux-arm" "0.19.12"
+    "@esbuild/linux-arm64" "0.19.12"
+    "@esbuild/linux-ia32" "0.19.12"
+    "@esbuild/linux-loong64" "0.19.12"
+    "@esbuild/linux-mips64el" "0.19.12"
+    "@esbuild/linux-ppc64" "0.19.12"
+    "@esbuild/linux-riscv64" "0.19.12"
+    "@esbuild/linux-s390x" "0.19.12"
+    "@esbuild/linux-x64" "0.19.12"
+    "@esbuild/netbsd-x64" "0.19.12"
+    "@esbuild/openbsd-x64" "0.19.12"
+    "@esbuild/sunos-x64" "0.19.12"
+    "@esbuild/win32-arm64" "0.19.12"
+    "@esbuild/win32-ia32" "0.19.12"
+    "@esbuild/win32-x64" "0.19.12"
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
@@ -526,10 +733,10 @@ eslint-plugin-prettier@^5.1.3:
     prettier-linter-helpers "^1.0.0"
     synckit "^0.8.6"
 
-eslint-plugin-vue@^9.10.0:
-  version "9.22.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.22.0.tgz#e8a625adb0b6ce3b65635dd74fec8345146f8e26"
-  integrity sha512-7wCXv5zuVnBtZE/74z4yZ0CM8AjH6bk4MQGm7hZjUC2DBppKU5ioeOk5LGSg/s9a1ZJnIsdPLJpXnu1Rc+cVHg==
+eslint-plugin-vue@^9.22.0:
+  version "9.23.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.23.0.tgz#1354a33b0cd21e0cb373557ff73c5d7a6698fbcd"
+  integrity sha512-Bqd/b7hGYGrlV+wP/g77tjyFmp81lh5TMw0be9093X02SyelxRRfCI6/IsGq/J7Um0YwB9s0Ry0wlFyjPdmtUw==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     natural-compare "^1.4.0"
@@ -552,7 +759,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.36.0:
+eslint@^8.57.0:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -624,6 +831,11 @@ estraverse@^5.1.0, 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"
@@ -639,6 +851,17 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
+fast-glob@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -670,13 +893,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
-  dependencies:
-    locate-path "^3.0.0"
-
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -709,21 +925,28 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-get-caller-file@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
 get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
@@ -731,13 +954,6 @@ glob-parent@^6.0.2:
   dependencies:
     is-glob "^4.0.3"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob@^7.1.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -767,6 +983,13 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+hasown@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 ignore@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -810,16 +1033,18 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-core-module@^2.13.0:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
-
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -879,13 +1104,10 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-locate-path@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
-  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
-  dependencies:
-    p-locate "^3.0.0"
-    path-exists "^3.0.0"
+local-pkg@^0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
+  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
 
 locate-path@^6.0.0:
   version "6.0.0"
@@ -911,6 +1133,26 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.30.3, magic-string@^0.30.7:
+  version "0.30.8"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
+  integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -918,6 +1160,13 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -933,13 +1182,6 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-node-fetch@^2.6.7:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
-  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
-  dependencies:
-    whatwg-url "^5.0.0"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -971,13 +1213,6 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
-p-limit@^2.0.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
-  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
-  dependencies:
-    p-try "^2.0.0"
-
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
@@ -985,13 +1220,6 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-locate@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
-  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
-  dependencies:
-    p-limit "^2.0.0"
-
 p-locate@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
@@ -999,11 +1227,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-try@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
-  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -1011,11 +1234,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-path-exists@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
-
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1031,42 +1249,37 @@ path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-popper.js@^1.16.0, popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
-portal-vue@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
-
 postcss-selector-parser@^6.0.15:
-  version "6.0.15"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
-  integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.27:
-  version "8.4.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
-  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+postcss@^8.4.35:
+  version "8.4.37"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.37.tgz#4505f992cd0c20e03d25f13b31901640b2db731a"
+  integrity sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==
   dependencies:
     nanoid "^3.3.7"
     picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -1080,11 +1293,6 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-"prettier@^1.18.2 || ^2.0.0":
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
-
 prettier@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
@@ -1107,26 +1315,20 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-regenerator-runtime@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
-  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@@ -1139,11 +1341,26 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^3.27.1:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollup@^4.2.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.13.0.tgz#dd2ae144b4cdc2ea25420477f68d4937a721237a"
+  integrity sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==
+  dependencies:
+    "@types/estree" "1.0.5"
   optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.13.0"
+    "@rollup/rollup-android-arm64" "4.13.0"
+    "@rollup/rollup-darwin-arm64" "4.13.0"
+    "@rollup/rollup-darwin-x64" "4.13.0"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.13.0"
+    "@rollup/rollup-linux-arm64-gnu" "4.13.0"
+    "@rollup/rollup-linux-arm64-musl" "4.13.0"
+    "@rollup/rollup-linux-riscv64-gnu" "4.13.0"
+    "@rollup/rollup-linux-x64-gnu" "4.13.0"
+    "@rollup/rollup-linux-x64-musl" "4.13.0"
+    "@rollup/rollup-win32-arm64-msvc" "4.13.0"
+    "@rollup/rollup-win32-ia32-msvc" "4.13.0"
+    "@rollup/rollup-win32-x64-msvc" "4.13.0"
     fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
@@ -1153,10 +1370,10 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-sass@^1.60.0:
-  version "1.71.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.71.1.tgz#dfb09c63ce63f89353777bbd4a88c0a38386ee54"
-  integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==
+sass@^1.71.1:
+  version "1.72.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.72.0.tgz#5b9978943fcfb32b25a6a5acb102fc9dabbbf41c"
+  integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -1169,11 +1386,6 @@ semver@^7.3.6, semver@^7.6.0:
   dependencies:
     lru-cache "^6.0.0"
 
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -1186,12 +1398,12 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-showdown@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
-  integrity sha512-9cGuS382HcvExtf5AHk7Cb4pAeQQ+h0eTr33V1mu+crYWV4KvWAw6el92bDrqGEk5d46Ai/fhbEUwqJ/mTCNEA==
+showdown@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
+  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
   dependencies:
-    yargs "^14.2"
+    commander "^9.0.0"
 
 simple-evaluate@^1.4.6:
   version "1.4.6"
@@ -1200,31 +1412,10 @@ simple-evaluate@^1.4.6:
   dependencies:
     get-value "^2.0.6"
 
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
-  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
-  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
-  dependencies:
-    ansi-regex "^4.1.0"
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 strip-ansi@^6.0.1:
   version "6.0.1"
@@ -1245,6 +1436,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 synckit@^0.8.6:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
@@ -1265,11 +1461,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tr46@~0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
-
 tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
@@ -1287,6 +1478,32 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+unplugin-vue-components@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.26.0.tgz#6d79caa770039a1eb3d7c09fdd28778ea20afef3"
+  integrity sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==
+  dependencies:
+    "@antfu/utils" "^0.7.6"
+    "@rollup/pluginutils" "^5.0.4"
+    chokidar "^3.5.3"
+    debug "^4.3.4"
+    fast-glob "^3.3.1"
+    local-pkg "^0.4.3"
+    magic-string "^0.30.3"
+    minimatch "^9.0.3"
+    resolve "^1.22.4"
+    unplugin "^1.4.0"
+
+unplugin@^1.4.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.10.0.tgz#9cb8140f61e3fbcf27c7c38d305e9d62d5dbbf0b"
+  integrity sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==
+  dependencies:
+    acorn "^8.11.3"
+    chokidar "^3.6.0"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.6.1"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -1299,16 +1516,26 @@ util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-vite@^4.2.1:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
-  integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
+vite@^5.1.4:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.6.tgz#706dae5fab9e97f57578469eef1405fc483943e4"
+  integrity sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.27"
-    rollup "^3.27.1"
+    esbuild "^0.19.3"
+    postcss "^8.4.35"
+    rollup "^4.2.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
+
+vue-demi@>=0.13.0, vue-demi@>=0.14.7:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
 
 vue-eslint-parser@^9.4.2:
   version "9.4.2"
@@ -1323,63 +1550,58 @@ vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-functional-data-merge@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz#08a7797583b7f35680587f8a1d51d729aa1dc657"
-  integrity sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA==
-
-vue-i18n@^8.28.2:
-  version "8.28.2"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.28.2.tgz#913558066e274395c0a9f40b2f3393d5c2636840"
-  integrity sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==
-
-vue-router@^3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
-
-vue-showdown@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/vue-showdown/-/vue-showdown-2.4.1.tgz#7cd94597dc1f9ae1286f8a8aab04abfa69b522aa"
-  integrity sha512-bjIadKGnP6XrX41gWL/lKl+7D3t22XXAIPZji/wt0sK32hEK/ejALfN1BSRWcs7oEe+EFOsJG9KRoC+B5HDmnQ==
+vue-i18n@^9.10.1:
+  version "9.10.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.10.2.tgz#6f4b5d76bce649f1e18bb9b7767b72962b3e30a3"
+  integrity sha512-ECJ8RIFd+3c1d3m1pctQ6ywG5Yj8Efy1oYoAKQ9neRdkLbuKLVeW4gaY5HPkD/9ssf1pOnUrmIFjx2/gkGxmEw==
   dependencies:
-    showdown "^1.9.0"
+    "@intlify/core-base" "9.10.2"
+    "@intlify/shared" "9.10.2"
+    "@vue/devtools-api" "^6.5.0"
 
-vue@^2.7.14:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
-  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+vue-router@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.0.tgz#d5913f27bf68a0a178ee798c3c88be471811a235"
+  integrity sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
   dependencies:
-    "@vue/compiler-sfc" "2.7.16"
-    csstype "^3.1.0"
+    "@vue/devtools-api" "^6.5.1"
 
-vuelidate@^0.7.7:
-  version "0.7.7"
-  resolved "https://registry.yarnpkg.com/vuelidate/-/vuelidate-0.7.7.tgz#5df3930a63ddecf56fde7bdacea9dbaf0c9bf899"
-  integrity sha512-pT/U2lDI67wkIqI4tum7cMSIfGcAMfB+Phtqh2ttdXURwvHRBJEAQ0tVbUsW9Upg83Q5QH59bnCoXI7A9JDGnA==
-
-vuex@^3.6.2:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+vue-showdown@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/vue-showdown/-/vue-showdown-4.2.0.tgz#6da563e4d77b9b23f1bdb4905acec09061975442"
+  integrity sha512-2/daUw8TsMFCAb+6yRC87eM4U/B/vp/oCWPbSlUSNbttKitIiQ7NCDRVzhjPmNVIzzToEBnQNonZEE5ZJyTzIg==
+  dependencies:
+    "@types/showdown" "^2.0.1"
+    showdown "^2.1.0"
+    vue "^3.3.4"
 
-webidl-conversions@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+vue@^3.3.4, vue@^3.4.21:
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.21.tgz#69ec30e267d358ee3a0ce16612ba89e00aaeb731"
+  integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
+  dependencies:
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/compiler-sfc" "3.4.21"
+    "@vue/runtime-dom" "3.4.21"
+    "@vue/server-renderer" "3.4.21"
+    "@vue/shared" "3.4.21"
 
-whatwg-url@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+vuex@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
   dependencies:
-    tr46 "~0.0.3"
-    webidl-conversions "^3.0.0"
+    "@vue/devtools-api" "^6.0.0-beta.11"
 
-which-module@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.1.tgz#776b1fe35d90aebe99e8ac15eb24093389a4a409"
-  integrity sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==
+webpack-sources@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
+
+webpack-virtual-modules@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
+  integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
 
 which@^2.0.1:
   version "2.0.2"
@@ -1388,15 +1610,6 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -1407,41 +1620,11 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
-y18n@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
-  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yargs-parser@^15.0.1:
-  version "15.0.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
-  integrity sha512-/MVEVjTXy/cGAjdtQf8dW3V9b97bPN7rNn8ETj6BmAQL7ibC7O1Q9SPJbGjgh3SlwoBNXMzj/ZGIj8mBgl12YA==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^14.2:
-  version "14.2.3"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
-  integrity sha512-ZbotRWhF+lkjijC/VhmOT9wSgyBQ7+zr13+YLkhfsSiTriYsMzkTUFP18pFhWwBeMa5gUc1MzbhrO6/VB7c9Xg==
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.1"
-
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"