YunoHost · Axolotle · Mar 12, 2024 · Mar 12, 2024 · Mar 12, 2024 · Mar 13, 2024
diff --git a/app/package.json b/app/package.json
@@ -15,30 +15,28 @@
   "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",
+    "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",
-    "vue": "3.3.4",
+    "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",
     "vue-showdown": "^4.2.0",
     "vuex": "^4.1.0"
   },
   "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
@@ -8,15 +8,15 @@
           :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>
             <img alt="YunoHost logo" src="./assets/logo_dark.png" width="40" />
           </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" />
@@ -53,6 +53,8 @@
       </main>
     </ViewLockOverlay>
 
+    <BModalOrchestrator />
+
     <!-- HISTORY CONSOLE -->
     <HistoryConsole />
 
@@ -85,7 +87,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>
@@ -101,7 +103,6 @@ import { mapGetters } from 'vuex'
 import { HistoryConsole, ViewLockOverlay } from '@/views/_partials'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'App',
 
   components: {
@@ -117,7 +118,7 @@ export default {
       'transitions',
       'transitionName',
       'waiting',
-      'theme',
+      'dark',
       'ssoLink',
     ]),
   },
@@ -141,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
         }
@@ -185,17 +186,15 @@ 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>
 
-<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/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
@@ -7,30 +7,24 @@
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
       @update:modelValue="onInput('localPart', $event)"
-      @blur="$parent.$emit('touch')"
     />
 
-    <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)"
-        @blur="$parent.$emit('touch')"
-      />
-    </BInputGroupAppend>
+    <SelectItem
+      :modelValue="modelValue.domain"
+      :choices="choices"
+      :aria-describedby="id + 'domain-desc'"
+      @update:modelValue="onInput('domain', $event)"
+    />
 
     <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"
     />
@@ -39,7 +33,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'AdressInputSelect',
 
   inheritAttrs: false,
@@ -63,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/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>
@@ -23,7 +23,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'CardCollapse',
 
   props: {
@@ -79,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/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
@@ -2,10 +2,9 @@
 // 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 {
-  compatConfig: { MODE: 3 },
   name: 'CardDeckFeed',
 
   props: {
@@ -16,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
@@ -57,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
@@ -78,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>
diff --git 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" />
@@ -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
@@ -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" />
@@ -32,7 +31,6 @@ import { defineAsyncComponent } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {
-  compatConfig: { MODE: 3 },
   name: 'ConfigPanels',
 
   inheritAttrs: false,
@@ -56,7 +54,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/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
@@ -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
@@ -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>
@@ -49,7 +49,6 @@
 
 <script>
 export default {
-  compatConfig: { MODE: 3 },
   name: 'QueryHeader',
 
   props: {
@@ -134,7 +133,7 @@ time {
   margin-left: 0.5rem;
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .xs-hide .request-desc {
     display: none;
   }