Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Utils/EmptyContent.vue

@@ -1,45 +1,32 @@
 <template>
   <div
-    class="empty-content"
-    :class="{ inline, 'text-center': center }"
+    class="flex flex-col items-center mt-80"
+    :class="{ 'mt-40 mb-10': inline, 'text-center': center }"
     role="note"
   >
-    <b-icon :icon="icon" size="is-large" />
-    <h2 class="empty-content__title">
+    <o-icon :icon="icon" customSize="48" />
+    <h2 class="mb-3">
       <!-- @slot Mandatory title -->
       <slot />
     </h2>
-    <p v-show="$slots.desc" :class="descriptionClasses">
+    <p v-show="slots.desc" :class="descriptionClasses">
       <!-- @slot Optional description -->
       <slot name="desc" />
     </p>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { useSlots } from "vue";
 
-@Component
-export default class EmptyContent extends Vue {
-  @Prop({ type: String, required: true }) icon!: string;
-  @Prop({ type: String, required: false, default: "" })
-  descriptionClasses!: string;
-  @Prop({ type: Boolean, required: false, default: false }) inline!: boolean;
-  @Prop({ type: Boolean, required: false, default: false }) center!: boolean;
-}
+withDefaults(
+  defineProps<{
+    icon: string;
+    descriptionClasses?: string;
+    inline?: boolean;
+    center?: boolean;
+  }>(),
+  { descriptionClasses: "", inline: false, center: false }
+);
+
+const slots = useSlots();
 </script>
-
-<style lang="scss">
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20vh;
-  &__title {
-    margin-bottom: 10px;
-  }
-  &.inline {
-    margin-top: 5vh;
-    margin-bottom: 2vh;
-  }
-}
-</style>