Migrate to Vue 3 and Vite

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

js/src/components/Event/GroupedMultiEventMinimalistCard.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="events-wrapper">
-    <div class="month-group" v-for="key of keys" :key="key">
+    <div class="flex flex-col gap-4" v-for="key of keys" :key="key">
       <h2 class="is-size-5 month-name">
         {{ monthName(groupEvents(key)[0]) }}
       </h2>
       <event-minimalist-card
-        class="py-4"
         v-for="event in groupEvents(key)"
         :key="event.id"
         :event="event"
@@ -14,51 +13,46 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 import EventMinimalistCard from "./EventMinimalistCard.vue";
 
-@Component({
-  components: {
-    EventMinimalistCard,
-  },
-})
-export default class GroupedMultiEventMinimalistCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
+const props = withDefaults(
+  defineProps<{
+    events: IEvent[];
+    isCurrentActorMember?: boolean;
+  }>(),
+  { isCurrentActorMember: false }
+);
 
-  get monthlyGroupedEvents(): Map<string, IEvent[]> {
-    return this.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
-      const beginsOn = new Date(event.beginsOn);
-      const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
-      const monthEvents = acc.get(month) || [];
-      acc.set(month, [...monthEvents, event]);
-      return acc;
-    }, new Map());
-  }
-
-  get keys(): string[] {
-    return Array.from(this.monthlyGroupedEvents.keys()).sort((a, b) =>
-      b.localeCompare(a)
-    );
-  }
-
-  groupEvents(key: string): IEvent[] {
-    return this.monthlyGroupedEvents.get(key) || [];
-  }
-
-  monthName(event: IEvent): string {
+const monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {
+  return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {
     const beginsOn = new Date(event.beginsOn);
-    return new Intl.DateTimeFormat(undefined, {
-      month: "long",
-      year: "numeric",
-    }).format(beginsOn);
-  }
-}
+    const month = `${beginsOn.getUTCMonth()}-${beginsOn.getUTCFullYear()}`;
+    const monthEvents = acc.get(month) || [];
+    acc.set(month, [...monthEvents, event]);
+    return acc;
+  }, new Map());
+});
+
+const keys = computed((): string[] => {
+  return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) =>
+    b.localeCompare(a)
+  );
+});
+
+const groupEvents = (key: string): IEvent[] => {
+  return monthlyGroupedEvents.value.get(key) || [];
+};
+
+const monthName = (event: IEvent): string => {
+  const beginsOn = new Date(event.beginsOn);
+  return new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    year: "numeric",
+  }).format(beginsOn);
+};
 </script>
 <style lang="scss" scoped>
 .events-wrapper {