YunoHost · alexAubin · Mar 2, 2024 · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024
diff --git a/app/src/App.vue b/app/src/App.vue
@@ -2,8 +2,8 @@
   <div id="app" class="container">
     <!-- HEADER -->
     <header>
-      <b-navbar>
-        <b-navbar-brand
+      <BNavbar>
+        <BNavbarBrand
           :to="{ name: 'home' }" :disabled="waiting"
           exact exact-active-class="active"
         >
@@ -13,67 +13,67 @@
           <span v-else>
             <img alt="YunoHost logo" src="./assets/logo_dark.png" width="40">
           </span>
-        </b-navbar-brand>
+        </BNavbarBrand>
 
-        <b-navbar-nav class="ml-auto">
+        <BNavbarNav class="ml-auto">
           <li class="nav-item">
-            <b-button
+            <BButton
               :href="ssoLink"
               variant="primary" size="sm" block
             >
-              {{ $t('user_interface_link') }} <icon iname="user" />
-            </b-button>
+              {{ $t('user_interface_link') }} <YIcon iname="user" />
+            </BButton>
           </li>
 
           <li class="nav-item" v-show="connected">
-            <b-button
+            <BButton
               @click.prevent="logout"
               variant="outline-dark" block size="sm"
             >
-              {{ $t('logout') }} <icon iname="sign-out" />
-            </b-button>
+              {{ $t('logout') }} <YIcon iname="sign-out" />
+            </BButton>
           </li>
-        </b-navbar-nav>
-      </b-navbar>
+        </BNavbarNav>
+      </BNavbar>
     </header>
 
     <!-- MAIN -->
-    <view-lock-overlay>
-      <breadcrumb />
+    <ViewLockOverlay>
+      <YBreadcrumb />
 
       <main id="main">
-        <!-- The `key` on router-view make sure that if a link points to a page that
+        <!-- The `key` on RouterView make sure that if a link points to a page that
         use the same component as the previous one, it will be refreshed -->
-        <transition v-if="transitions" :name="transitionName">
-          <router-view class="animated" :key="routerKey" />
-        </transition>
-        <router-view v-else class="static" :key="routerKey" />
+        <Transition v-if="transitions" :name="transitionName">
+          <RouterView class="animated" :key="routerKey" />
+        </Transition>
+        <RouterView v-else class="static" :key="routerKey" />
       </main>
-    </view-lock-overlay>
+    </ViewLockOverlay>
 
     <!-- HISTORY CONSOLE -->
-    <history-console />
+    <HistoryConsole />
 
     <!-- FOOTER -->
     <footer class="py-3 mt-auto">
       <nav>
-        <b-nav class="justify-content-center">
-          <b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes="text-secondary">
-            <icon iname="book" /> {{ $t('footer.documentation') }}
-          </b-nav-item>
-          <b-nav-item href="https://yunohost.org/help" target="_blank" link-classes="text-secondary">
-            <icon iname="life-ring" /> {{ $t('footer.help') }}
-          </b-nav-item>
-          <b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes="text-secondary">
-            <icon iname="heart" /> {{ $t('footer.donate') }}
-          </b-nav-item>
-
-          <b-nav-text
+        <BNav class="justify-content-center">
+          <BNavItem href="https://yunohost.org/docs" target="_blank" link-classes="text-secondary">
+            <YIcon iname="book" /> {{ $t('footer.documentation') }}
+          </BNavItem>
+          <BNavItem href="https://yunohost.org/help" target="_blank" link-classes="text-secondary">
+            <YIcon iname="life-ring" /> {{ $t('footer.help') }}
+          </BNavItem>
+          <BNavItem href="https://donate.yunohost.org/" target="_blank" link-classes="text-secondary">
+            <YIcon iname="heart" /> {{ $t('footer.donate') }}
+          </BNavItem>
+
+          <BNavText
             v-if="yunohost" id="yunohost-version" class="ml-md-auto text-center"
           >
             <span v-html="$t('footer_version', yunohost)" />
-          </b-nav-text>
-        </b-nav>
+          </BNavText>
+        </BNav>
       </nav>
     </footer>
   </div>
@@ -209,7 +209,7 @@ main {
     top: 0;
     transform: translate(-100vw, 0);
   }
-  // hack to hide last transition provoqued by the <router-view> element change
+  // hack to hide last transition provoqued by the <RouterView> element change
   // while disabling the transitions in ToolWebAdmin
   .static ~ .animated {
     display: none;

diff --git a/app/src/components/AdressInputSelect.vue b/app/src/components/AdressInputSelect.vue
@@ -1,6 +1,6 @@
 <template>
-  <b-input-group v-bind="$attrs">
-    <input-item
+  <BInputGroup v-bind="$attrs">
+    <InputItem
       :id="id"
       :value="value.localPart"
       :placeholder="placeholder"
@@ -10,23 +10,23 @@
       @blur="$parent.$emit('touch')"
     />
 
-    <b-input-group-append>
-      <b-input-group-text>{{ value.separator }}</b-input-group-text>
-    </b-input-group-append>
+    <BInputGroupAppend>
+      <BInputGroupText>{{ value.separator }}</BInputGroupText>
+    </BInputGroupAppend>
 
-    <b-input-group-append>
-      <select-item
+    <BInputGroupAppend>
+      <SelectItem
         :value="value.domain"
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
         @input="onInput('domain', $event)"
         @blur="$parent.$emit('touch')"
       />
-    </b-input-group-append>
+    </BInputGroupAppend>
 
     <span class="sr-only" :id="id + 'local-part-desc'" v-t="'address.local_part_description.' + type" />
     <span class="sr-only" :id="id + 'domain-desc'" v-t="'address.domain_description.' + type" />
-  </b-input-group>
+  </BInputGroup>
 </template>
 
 <script>

diff --git a/app/src/components/CardCollapse.vue b/app/src/components/CardCollapse.vue
@@ -1,26 +1,28 @@
 <template>
-  <b-card
+  <BCard
     v-bind="$attrs"
     no-body :class="_class"
   >
-    <slot name="header" slot="header">
-      <h2>
-        <b-button v-b-toggle="id" :variant="variant" class="card-collapse-button">
-          {{ title }}
-          <icon class="ml-auto" iname="chevron-right" />
-        </b-button>
-      </h2>
-    </slot>
+    <template #header>
+      <slot name="header">
+        <h2>
+          <BButton v-b-toggle="id" :variant="variant" class="card-collapse-button">
+            {{ title }}
+            <YIcon class="ml-auto" iname="chevron-right" />
+          </BButton>
+        </h2>
+      </slot>
+    </template>
 
-    <b-collapse :id="id" :visible="visible" role="region">
+    <BCollapse :id="id" :visible="visible" role="region">
       <slot name="default" />
-    </b-collapse>
-  </b-card>
+    </BCollapse>
+  </BCard>
 </template>
 
 <script>
 export default {
-  name: 'CollapseCard',
+  name: 'CardCollapse',
 
   props: {
     id: { type: String, required: true },

diff --git a/app/src/components/CardDeckFeed.vue b/app/src/components/CardDeckFeed.vue
@@ -63,7 +63,7 @@ export default {
 
   render (h) {
     return h(
-      'b-card-group',
+      'BCardGroup',
       {
         attrs: { role: 'feed', 'aria-busy': this.busy.toString() },
         props: { deck: true },

diff --git a/app/src/components/ConfigPanel.vue b/app/src/components/ConfigPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <abstract-form
+  <AbstractForm
     v-bind="{ id: panel.id + '-form', validation, serverError: panel.serverError }"
     @submit.prevent.stop="onApply"
     :no-footer="!panel.hasApplyButton"
@@ -13,31 +13,31 @@
     <slot name="tab-before" />
 
     <template v-for="section in panel.sections">
-      <component
+      <Component
         v-if="section.visible"
         :is="section.name ? 'section' : 'div'"
         :key="section.id"
         class="panel-section"
       >
-        <b-card-title v-if="section.name" title-tag="h3">
+        <BCardTitle v-if="section.name" title-tag="h3">
           {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
-        </b-card-title>
+        </BCardTitle>
 
         <template v-for="(field, fname) in section.fields">
           <!-- FIXME rework the whole component chain to avoid direct mutation of the `forms` props -->
           <!-- eslint-disable -->
-          <component
+          <Component
             v-if="field.visible" :is="field.is" v-bind="field.props"
             v-model="forms[panel.id][fname]" :validation="validation[fname]" :key="fname"
             @action.stop="onAction(section.id, fname, section.fields)"
           />
           <!-- eslint-enable -->
         </template>
-      </component>
+      </Component>
     </template>
 
     <slot name="tab-after" />
-  </abstract-form>
+  </AbstractForm>
 </template>
 
 <script>

diff --git a/app/src/components/ConfigPanels.vue b/app/src/components/ConfigPanels.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="config-panel">
-    <routable-tabs
+    <RoutableTabs
       v-if="routes_.length > 1"
       :routes="routes_"
       v-bind="{ panels, forms, v: $v, ...$attrs }"
@@ -15,13 +15,13 @@
       <template #tab-after>
         <slot name="tab-after" />
       </template>
-    </routable-tabs>
+    </RoutableTabs>
 
-    <card v-else :title="routes_[0].text" :icon="routes_[0].icon">
+    <YCard v-else :title="routes_[0].text" :icon="routes_[0].icon">
       <slot name="tab-top" />
       <slot name="tab-before" />
       <slot name="tab-after" />
-    </card>
+    </YCard>
   </div>
 </template>
 

diff --git a/app/src/components/MessageListGroup.vue b/app/src/components/MessageListGroup.vue
@@ -1,21 +1,21 @@
 <template>
-  <b-list-group
+  <BListGroup
     v-bind="$attrs" flush
     :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
     @scroll="onScroll"
   >
-    <yuno-list-group-item
+    <YListGroupItem
       v-if="limit && messages.length > limit"
       variant="info" v-t="'api.partial_logs'"
     />
 
-    <yuno-list-group-item
+    <YListGroupItem
       v-for="({ color, text }, i) in reducedMessages" :key="i"
       :variant="color" size="xs"
     >
       <span v-html="text" />
-    </yuno-list-group-item>
-  </b-list-group>
+    </YListGroupItem>
+  </BListGroup>
 </template>
 
 <script>

diff --git a/app/src/components/QueryHeader.vue b/app/src/components/QueryHeader.vue
@@ -11,28 +11,28 @@
     <div v-if="request.errors || request.warnings">
       <!-- WEBSOCKET ERRORS COUNT -->
       <span class="count" v-if="request.errors">
-        {{ request.errors }}<icon iname="bug" class="text-danger ml-1" />
+        {{ request.errors }}<YIcon iname="bug" class="text-danger ml-1" />
       </span>
       <!-- WEBSOCKET WARNINGS COUNT -->
       <span class="count" v-if="request.warnings">
-        {{ request.warnings }}<icon iname="warning" class="text-warning ml-1" />
+        {{ request.warnings }}<YIcon iname="warning" class="text-warning ml-1" />
       </span>
     </div>
 
     <!-- VIEW ERROR BUTTON -->
-    <b-button
+    <BButton
       v-if="showError && request.error"
       size="sm" pill
       class="error-btn ml-auto py-0"
       variant="danger"
       @click="reviewError"
     >
       <small v-t="'api_error.view_error'" />
-    </b-button>
+    </BButton>
 
     <!-- TIME DISPLAY -->
-    <time v-if="showTime" :datetime="request.date | hour" :class="request.error ? 'ml-2' : 'ml-auto'">
-      {{ request.date | hour }}
+    <time v-if="showTime" :datetime="hour(request.date)" :class="request.error ? 'ml-2' : 'ml-auto'">
+      {{ hour(request.date) }}
     </time>
   </div>
 </template>
@@ -71,12 +71,6 @@ export default {
   methods: {
     reviewError () {
       this.$store.dispatch('REVIEW_ERROR', this.request)
-    }
-  },
-
-  filters: {
-    readableUri (uri) {
-      return uri.split('?')[0].split('/').join(' > ') // replace('/', ' > ')
     },
 
     hour (date) {