Migrate to Vue 3 and Vite

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

js/src/components/Event/AddressAutoComplete.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="address-autocomplete">
-    <b-field expanded>
-      <b-autocomplete
+    <!-- <o-field expanded>
+      <o-autocomplete
         :data="addressData"
         v-model="queryText"
         :placeholder="$t('e.g. 10 Rue Jangot')"
@@ -15,31 +15,31 @@
         dir="auto"
       >
         <template #default="{ option }">
-          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <o-icon :icon="option.poiInfos.poiIcon.icon" />
           <b>{{ option.poiInfos.name }}</b
           ><br />
           <small>{{ option.poiInfos.alternativeName }}</small>
         </template>
-      </b-autocomplete>
-    </b-field>
-    <b-field
+      </o-autocomplete>
+    </o-field>
+    <o-field
       v-if="canDoGeoLocation"
       :message="fieldErrors"
       :type="{ 'is-danger': fieldErrors.length }"
     >
-      <b-button
+      <o-button
         type="is-text"
         v-if="!gettingLocation"
         icon-right="target"
         @click="locateMe"
         @keyup.enter="locateMe"
-        >{{ $t("Use my location") }}</b-button
+        >{{ $t("Use my location") }}</o-button
       >
       <span v-else>{{ $t("Getting location") }}</span>
-    </b-field>
+    </o-field> -->
     <!--
     <div v-if="selected && selected.geom" class="control">
-      <b-checkbox  @input="togglemap" />
+      <o-checkbox  @input="togglemap" />
       <label class="label">{{ $t("Show map") }}</label>
     </div>
 
@@ -59,16 +59,14 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
+import { Prop, Watch, Vue } from "vue-property-decorator";
 import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
+// import AddressAutoCompleteMixin from "@/mixins/AddressAutoCompleteMixin";
 
-@Component({
-  inheritAttrs: false,
-})
-export default class AddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
+// @Component({
+//   inheritAttrs: false,
+// })
+export default class AddressAutoComplete extends Vue {
   @Prop({ required: false, default: false }) type!: string | false;
   @Prop({ required: false, default: true, type: Boolean })
   doGeoLocation!: boolean;
@@ -103,7 +101,7 @@ export default class AddressAutoComplete extends Mixins(
   updateSelected(option: IAddress): void {
     if (option == null) return;
     this.selected = option;
-    this.$emit("input", this.selected);
+    // this.$emit("input", this.selected);
   }
 
   resetPopup(): void {

js/src/components/Event/DateCalendarIcon.story.vue

@@ -0,0 +1,14 @@
+<template>
+  <Story>
+    <Variant title="new">
+      <DateCalendarIcon :date="new Date().toString()" />
+    </Variant>
+    <Variant title="small">
+      <DateCalendarIcon :date="new Date().toString()" :small="true" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import DateCalendarIcon from "./DateCalendarIcon.vue";
+</script>

js/src/components/Event/DateCalendarIcon.vue

@@ -1,71 +1,51 @@
-<docs>
-### Example
-```vue
-  <DateCalendarIcon date="2019-10-05T18:41:11.720Z" />
-```
-
-```vue
-  <DateCalendarIcon
-    :date="new Date()"
-  />
-```
-</docs>
-
 <template>
   <div
-    class="datetime-container"
+    class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white"
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
     <div class="datetime-container-header" />
     <div class="datetime-container-content">
-      <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
-      <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
+      <time :datetime="dateObj.toISOString()" class="day block font-semibold">{{
+        day
+      }}</time>
+      <time
+        :datetime="dateObj.toISOString()"
+        class="month font-semibold block uppercase py-1 px-0"
+        >{{ month }}</time
+      >
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { computed } from "vue";
 
-@Component
-export default class DateCalendarIcon extends Vue {
-  /**
-   * `date` can be a string or an actual date object.
-   */
-  @Prop({ required: true }) date!: string;
-  @Prop({ required: false, default: false }) small!: boolean;
+const props = withDefaults(
+  defineProps<{
+    date: string;
+    small?: boolean;
+  }>(),
+  { small: false }
+);
 
-  get dateObj(): Date {
-    return new Date(this.$props.date);
-  }
+const dateObj = computed<Date>(() => new Date(props.date));
 
-  get month(): string {
-    return this.dateObj.toLocaleString(undefined, { month: "short" });
-  }
+const month = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { month: "short" })
+);
 
-  get day(): string {
-    return this.dateObj.toLocaleString(undefined, { day: "numeric" });
-  }
-  get smallStyle(): string {
-    return this.small ? "1.2" : "2";
-  }
-}
+const day = computed<string>(() =>
+  dateObj.value.toLocaleString(undefined, { day: "numeric" })
+);
+
+const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
 </script>
 
 <style lang="scss" scoped>
 div.datetime-container {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  align-items: stretch;
   width: calc(40px * var(--small));
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
   height: calc(40px * var(--small));
-  background: #fff;
 
   .datetime-container-header {
     height: calc(10px * var(--small));
@@ -76,15 +56,9 @@ div.datetime-container {
   }
 
   time {
-    display: block;
-    font-weight: 600;
-    color: $violet-3;
-
     &.month {
-      padding: 2px 0;
       font-size: 12px;
       line-height: 12px;
-      text-transform: uppercase;
     }
 
     &.day {

js/src/components/Event/EventBanner.vue

@@ -1,34 +1,16 @@
 <template>
-  <div class="banner-container">
+  <div class="flex justify-center h-80">
     <lazy-image-wrapper :picture="picture" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IMedia } from "@/types/media.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import LazyImageWrapper from "../Image/LazyImageWrapper.vue";
 
-@Component({
-  components: {
-    LazyImageWrapper,
-  },
-})
-export default class EventBanner extends Vue {
-  @Prop({ default: null, type: Object as PropType<IMedia> })
-  picture!: IMedia | null;
-}
+withDefaults(
+  defineProps<{
+    picture: IMedia | null;
+  }>(),
+  { picture: null }
+);
 </script>
-<style lang="scss" scoped>
-.banner-container {
-  display: flex;
-  justify-content: center;
-  height: 30vh;
-}
-::v-deep img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: 50% 50%;
-}
-</style>

js/src/components/Event/EventCard.story.vue

@@ -0,0 +1,145 @@
+<template>
+  <Story title="EventCard">
+    <Variant title="default">
+      <EventCard :event="event" />
+    </Variant>
+    <Variant title="long">
+      <EventCard :event="longEvent" />
+    </Variant>
+
+    <Variant title="tentative">
+      <EventCard :event="tentativeEvent" />
+    </Variant>
+
+    <Variant title="cancelled">
+      <EventCard :event="cancelledEvent" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+} from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import { reactive } from "vue";
+import EventCard from "./EventCard.vue";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const baseEvent: IEvent = {
+  uuid: "",
+  title: "A very interesting event",
+  description: "Things happen",
+  beginsOn: new Date(),
+  endsOn: new Date(),
+  physicalAddress: {
+    description: "Somewhere",
+    street: "",
+    locality: "",
+    region: "",
+    country: "",
+    type: "",
+    postalCode: "",
+  },
+  picture: {
+    id: "",
+    name: "",
+    alt: "",
+    metadata: {},
+    url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
+  },
+  url: "",
+  local: true,
+  slug: "",
+  publishAt: new Date(),
+  status: EventStatus.CONFIRMED,
+  visibility: EventVisibility.PUBLIC,
+  joinOptions: EventJoinOptions.FREE,
+  draft: false,
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 0,
+    moderator: 0,
+    administrator: 0,
+    going: 0,
+  },
+  participants: { total: 0, elements: [] },
+  relatedEvents: [],
+  tags: [{ slug: "something", title: "Something" }],
+  attributedTo: undefined,
+  organizerActor: {
+    ...baseActor,
+    name: "Hello",
+    avatar: {
+      ...baseActorAvatar,
+      url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
+    },
+  },
+  comments: [],
+  options: {
+    maximumAttendeeCapacity: 0,
+    remainingAttendeeCapacity: 0,
+    showRemainingAttendeeCapacity: false,
+    anonymousParticipation: false,
+    hideOrganizerWhenGroupEvent: false,
+    offers: [],
+    participationConditions: [],
+    attendees: [],
+    program: "",
+    commentModeration: CommentModeration.ALLOW_ALL,
+    showParticipationPrice: false,
+    showStartTime: false,
+    showEndTime: false,
+    timezone: null,
+    isOnline: false,
+  },
+  metadata: [],
+  contacts: [],
+  language: "en",
+  category: "hello",
+};
+
+const event = reactive<IEvent>(baseEvent);
+
+const longEvent = reactive<IEvent>({
+  ...baseEvent,
+  title:
+    "A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so.",
+});
+
+const tentativeEvent = reactive<IEvent>({
+  ...baseEvent,
+  status: EventStatus.TENTATIVE,
+});
+
+const cancelledEvent = reactive<IEvent>({
+  ...baseEvent,
+  status: EventStatus.CANCELLED,
+});
+</script>

js/src/components/Event/EventCard.vue

@@ -1,81 +1,85 @@
 <template>
   <router-link
-    class="card"
+    class="mbz-card max-w-xs"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
-    <div class="card-image">
-      <figure class="image is-16by9">
+    <div class="bg-secondary">
+      <figure class="block relative pt-40">
         <lazy-image-wrapper
           :picture="event.picture"
           style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
         />
         <div
-          class="tag-container"
+          class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1"
           v-if="event.tags || event.status !== EventStatus.CONFIRMED"
         >
-          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
+          <mobilizon-tag
+            variant="info"
+            v-if="event.status === EventStatus.TENTATIVE"
+          >
             {{ $t("Tentative") }}
-          </b-tag>
-          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
+          </mobilizon-tag>
+          <mobilizon-tag
+            variant="danger"
+            v-if="event.status === EventStatus.CANCELLED"
+          >
             {{ $t("Cancelled") }}
-          </b-tag>
+          </mobilizon-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
             v-for="tag in (event.tags || []).slice(0, 3)"
             :key="tag.slug"
           >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
+            <mobilizon-tag dir="auto">{{ tag.title }}</mobilizon-tag>
           </router-link>
         </div>
       </figure>
     </div>
-    <div class="card-content">
-      <div class="media">
-        <div class="media-left">
+    <div class="h-full p-2">
+      <div class="relative flex flex-col h-full">
+        <div class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-start">
           <date-calendar-icon
             :small="true"
             v-if="!mergedOptions.hideDate"
-            :date="event.beginsOn"
+            :date="event.beginsOn.toString()"
           />
         </div>
-        <div class="media-content">
+        <div class="flex-1 w-full flex flex-col justify-between">
           <h3
-            class="event-title"
+            class="text-lg leading-5 line-clamp-3 font-bold"
             :title="event.title"
             dir="auto"
             :lang="event.language"
           >
             {{ event.title }}
           </h3>
-          <div class="content-end">
-            <div class="event-organizer" dir="auto">
-              <figure
-                class="image is-24x24"
-                v-if="organizer(event) && organizer(event).avatar"
-              >
+          <div class="pt-3">
+            <div class="flex items-center" dir="auto">
+              <figure class="" v-if="actorAvatarURL">
                 <img
-                  class="is-rounded"
-                  :src="organizer(event).avatar.url"
+                  class="rounded-xl"
+                  :src="actorAvatarURL"
                   alt=""
+                  width="24"
+                  height="24"
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
-              <span class="organizer-name">
+              <account-circle v-else />
+              <span class="text-sm font-semibold ltr:pl-2 rtl:pr-2">
                 {{ organizerDisplayName(event) }}
               </span>
             </div>
             <inline-address
-              dir="auto"
               v-if="event.physicalAddress"
               :physical-address="event.physicalAddress"
             />
             <div
-              class="event-subtitle"
+              class="flex items-center text-sm"
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
-              <b-icon icon="video" />
-              <span>{{ $t("Online") }}</span>
+              <o-icon icon="video" />
+              <span class="ltr:pl-2 rtl:pr-2">{{ $t("Online") }}</span>
             </div>
           </div>
         </div>
@@ -84,189 +88,44 @@
   </router-link>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import {
   IEvent,
   IEventCardOptions,
   organizerDisplayName,
-  organizer,
+  organizerAvatarUrl,
 } from "@/types/event.model";
-import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
-import { Actor, Person } from "@/types/actor";
-import { EventStatus, ParticipantRole } from "@/types/enums";
+import { EventStatus } from "@/types/enums";
 import RouteName from "../../router/name";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class EventCard extends Vue {
-  @Prop({ required: true }) event!: IEvent;
+import { computed } from "vue";
+import MobilizonTag from "../Tag.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 
-  @Prop({ required: false }) options!: IEventCardOptions;
+const props = defineProps<{ event: IEvent; options?: IEventCardOptions }>();
+const defaultOptions: IEventCardOptions = {
+  hideDate: false,
+  loggedPerson: false,
+  hideDetails: false,
+  organizerActor: null,
+};
 
-  ParticipantRole = ParticipantRole;
+const mergedOptions = computed<IEventCardOptions>(() => ({
+  ...defaultOptions,
+  ...props.options,
+}));
 
-  EventStatus = EventStatus;
+// const actor = computed<Actor>(() => {
+//   return Object.assign(
+//     new Person(),
+//     props.event.organizerActor ?? mergedOptions.value.organizerActor
+//   );
+// });
 
-  RouteName = RouteName;
-
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  defaultOptions: IEventCardOptions = {
-    hideDate: false,
-    loggedPerson: false,
-    hideDetails: false,
-    organizerActor: null,
-    memberofGroup: false,
-  };
-
-  get mergedOptions(): IEventCardOptions {
-    return { ...this.defaultOptions, ...this.options };
-  }
-
-  get actor(): Actor {
-    return Object.assign(
-      new Person(),
-      this.event.organizerActor || this.mergedOptions.organizerActor
-    );
-  }
-}
+const actorAvatarURL = computed<string | null>(() =>
+  organizerAvatarUrl(props.event)
+);
 </script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-
-a.card {
-  display: block;
-  background: $secondary;
-  color: #3c376e;
-
-  &:hover {
-    // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-    transform: scale(1.01, 1.01);
-    &:after {
-      opacity: 1;
-    }
-  }
-
-  border-radius: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-
-  &:after {
-    content: "";
-    border-radius: 5px;
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-  }
-
-  div.tag-container {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    @include margin-right(-3px);
-    z-index: 10;
-    max-width: 40%;
-
-    a {
-      text-decoration: none;
-    }
-
-    span.tag {
-      margin: 5px auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: block;
-      font-size: 0.9em;
-      line-height: 1.75em;
-
-      &:not(.is-info, .is-danger) {
-        background-color: #e6e4f4;
-        color: $violet-3;
-      }
-      &.is-info {
-        color: $violet-3;
-      }
-    }
-  }
-
-  div.card-image {
-    background: $secondary;
-
-    figure.image {
-      background-size: cover;
-      background-position: center;
-    }
-  }
-
-  .card-content {
-    height: 100%;
-    padding: 0.5rem;
-
-    & > .media {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-
-      & > .media-left {
-        margin-top: -15px;
-        height: 0;
-        display: flex;
-        align-items: flex-end;
-        align-self: flex-start;
-        margin-bottom: 15px;
-        @include margin-left(0);
-      }
-
-      & > .media-content {
-        flex: 1;
-        width: 100%;
-        overflow-x: inherit;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-    }
-
-    .event-title {
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-    }
-
-    .content-end {
-      padding-top: 8px;
-    }
-
-    .event-subtitle {
-      font-size: 0.85rem;
-    }
-
-    .organizer-name {
-      font-size: 14px;
-    }
-  }
-}
-</style>

js/src/components/Event/EventFullDate.vue

@@ -1,35 +1,16 @@
-<docs>
-#### Give a translated and localized text that give the starting and ending datetime for an event.
-
-##### Start date with no ending
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" />
-```
-
-##### Start date with an ending the same day
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2015-10-06T20:41:11.720Z" />
-```
-
-##### Start date with an ending on a different day
-```vue
-<EventFullDate beginsOn="2015-10-06T18:41:11.720Z" endsOn="2032-10-06T18:41:11.720Z" />
-```
-</docs>
-
 <template>
   <p v-if="!endsOn">
     <span>{{
       formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
     }}</span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && showEndTime">
     <span>{{
@@ -40,13 +21,13 @@
       })
     }}</span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && !showEndTime">
     {{
@@ -74,13 +55,13 @@
       }}
     </span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ multipleTimeZones }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn && showStartTime">
     <span>
@@ -93,120 +74,117 @@
       }}
     </span>
     <br />
-    <b-switch
-      size="is-small"
+    <o-switch
+      size="small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn">
     {{
-      $t("From the {startDate} to the {endDate}", {
+      t("From the {startDate} to the {endDate}", {
         startDate: formatDate(beginsOn),
         endDate: formatDate(endsOn),
       })
     }}
   </p>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
+import {
+  formatDateString,
+  formatDateTimeString,
+  formatTimeString,
+} from "@/filters/datetime";
 import { getTimezoneOffset } from "date-fns-tz";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 
-@Component
-export default class EventFullDate extends Vue {
-  @Prop({ required: true }) beginsOn!: string;
-
-  @Prop({ required: false }) endsOn!: string;
-
-  @Prop({ required: false, default: true }) showStartTime!: boolean;
-
-  @Prop({ required: false, default: true }) showEndTime!: boolean;
-
-  @Prop({ required: false }) timezone!: string;
-
-  @Prop({ required: false }) userTimezone!: string;
-
-  showLocalTimezone = true;
-
-  get timezoneToShow(): string {
-    if (this.showLocalTimezone) {
-      return this.timezone;
-    }
-    return this.userActualTimezone;
+const props = withDefaults(
+  defineProps<{
+    beginsOn: string;
+    endsOn?: string;
+    showStartTime?: boolean;
+    showEndTime?: boolean;
+    timezone?: string;
+    userTimezone?: string;
+  }>(),
+  {
+    showStartTime: true,
+    showEndTime: true,
   }
+);
 
-  get userActualTimezone(): string {
-    if (this.userTimezone) {
-      return this.userTimezone;
-    }
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+const { t } = useI18n({ useScope: "global" });
+
+const showLocalTimezone = ref(true);
+
+const timezoneToShow = computed((): string | undefined => {
+  if (showLocalTimezone.value) {
+    return props.timezone;
   }
+  return userActualTimezone.value;
+});
 
-  formatDate(value: Date): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatDateString(value);
+const userActualTimezone = computed((): string => {
+  if (props.userTimezone) {
+    return props.userTimezone;
   }
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+});
 
-  formatTime(value: Date, timezone: string): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatTimeString(value, timezone || undefined);
-  }
+const formatDate = (value: string): string | undefined => {
+  return formatDateString(value);
+};
 
-  formatDateTimeString(
-    value: Date,
-    timezone: string,
-    showTime: boolean
-  ): string | undefined {
-    if (!this.$options.filters) return undefined;
-    return this.$options.filters.formatDateTimeString(
-      value,
-      timezone,
-      showTime
-    );
-  }
+const formatTime = (
+  value: string,
+  timezone: string | undefined = undefined
+): string | undefined => {
+  return formatTimeString(value, timezone ?? "Etc/UTC");
+};
 
-  isSameDay(): boolean {
-    const sameDay =
-      this.beginsOnDate.toDateString() === new Date(this.endsOn).toDateString();
-    return this.endsOn !== undefined && sameDay;
-  }
+const isSameDay = (): boolean => {
+  if (!props.endsOn) return false;
+  return (
+    beginsOnDate.value.toDateString() === new Date(props.endsOn).toDateString()
+  );
+};
 
-  get beginsOnDate(): Date {
-    return new Date(this.beginsOn);
-  }
+const beginsOnDate = computed((): Date => {
+  return new Date(props.beginsOn);
+});
 
-  get differentFromUserTimezone(): boolean {
-    return (
-      !!this.timezone &&
-      !!this.userActualTimezone &&
-      getTimezoneOffset(this.timezone, this.beginsOnDate) !==
-        getTimezoneOffset(this.userActualTimezone, this.beginsOnDate) &&
-      this.timezone !== this.userActualTimezone
-    );
-  }
+const differentFromUserTimezone = computed((): boolean => {
+  return (
+    !!props.timezone &&
+    !!userActualTimezone.value &&
+    getTimezoneOffset(props.timezone, beginsOnDate.value) !==
+      getTimezoneOffset(userActualTimezone.value, beginsOnDate.value) &&
+    props.timezone !== userActualTimezone.value
+  );
+});
 
-  get singleTimeZone(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Time in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
+const singleTimeZone = computed((): string => {
+  if (showLocalTimezone.value) {
+    return t("Local time ({timezone})", {
+      timezone: timezoneToShow,
     }) as string;
   }
+  return t("Time in your timezone ({timezone})", {
+    timezone: timezoneToShow,
+  }) as string;
+});
 
-  get multipleTimeZones(): string {
-    if (this.showLocalTimezone) {
-      return this.$t("Local time ({timezone})", {
-        timezone: this.timezoneToShow,
-      }) as string;
-    }
-    return this.$t("Times in your timezone ({timezone})", {
-      timezone: this.timezoneToShow,
+const multipleTimeZones = computed((): string => {
+  if (showLocalTimezone.value) {
+    return t("Local time ({timezone})", {
+      timezone: timezoneToShow,
     }) as string;
   }
-}
+  return t("Times in your timezone ({timezone})", {
+    timezone: timezoneToShow,
+  }) as string;
+});
 </script>

js/src/components/Event/EventListViewCard.story.vue

@@ -0,0 +1,143 @@
+<template>
+  <Story title="EventListViewCard">
+    <Variant title="default">
+      <EventListViewCard :event="baseEvent" />
+    </Variant>
+    <Variant title="long">
+      <EventListViewCard :event="longEvent" />
+    </Variant>
+
+    <!-- <Variant title="tentative">
+      <EventListViewCard :event="tentativeEvent" />
+    </Variant>
+
+    <Variant title="cancelled">
+      <EventListViewCard :event="cancelledEvent" />
+    </Variant> -->
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import {
+  ActorType,
+  CommentModeration,
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+} from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import { reactive } from "vue";
+import EventListViewCard from "./EventListViewCard.vue";
+
+const baseActorAvatar = {
+  id: "",
+  name: "",
+  alt: "",
+  metadata: {},
+  url: "https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg",
+};
+
+const baseActor: IActor = {
+  name: "Thomas Citharel",
+  preferredUsername: "tcit",
+  avatar: baseActorAvatar,
+  domain: null,
+  url: "",
+  summary: "",
+  suspended: false,
+  type: ActorType.PERSON,
+};
+
+const baseEvent: IEvent = {
+  uuid: "",
+  title: "A very interesting event",
+  description: "Things happen",
+  beginsOn: new Date().toISOString(),
+  endsOn: new Date().toISOString(),
+  physicalAddress: {
+    description: "Somewhere",
+    street: "",
+    locality: "",
+    region: "",
+    country: "",
+    type: "",
+    postalCode: "",
+  },
+  picture: {
+    id: "",
+    name: "",
+    alt: "",
+    metadata: {},
+    url: "https://mobilizon.fr/media/81d9c76aaf740f84eefb28cf2b9988bdd2495ab1f3246159fd688e242155cb23.png?name=Screenshot_20220315_171848.png",
+  },
+  url: "",
+  local: true,
+  slug: "",
+  publishAt: new Date().toISOString(),
+  status: EventStatus.CONFIRMED,
+  visibility: EventVisibility.PUBLIC,
+  joinOptions: EventJoinOptions.FREE,
+  draft: false,
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 0,
+    moderator: 0,
+    administrator: 0,
+    going: 0,
+  },
+  participants: { total: 0, elements: [] },
+  relatedEvents: [],
+  tags: [{ slug: "something", title: "Something" }],
+  attributedTo: undefined,
+  organizerActor: {
+    ...baseActor,
+    name: "Hello",
+    avatar: {
+      ...baseActorAvatar,
+      url: "https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png",
+    },
+  },
+  comments: [],
+  options: {
+    maximumAttendeeCapacity: 0,
+    remainingAttendeeCapacity: 0,
+    showRemainingAttendeeCapacity: false,
+    anonymousParticipation: false,
+    hideOrganizerWhenGroupEvent: false,
+    offers: [],
+    participationConditions: [],
+    attendees: [],
+    program: "",
+    commentModeration: CommentModeration.ALLOW_ALL,
+    showParticipationPrice: false,
+    showStartTime: false,
+    showEndTime: false,
+    timezone: null,
+    isOnline: false,
+  },
+  metadata: [],
+  contacts: [],
+  language: "en",
+  category: "hello",
+};
+
+const longEvent = reactive<IEvent>({
+  ...baseEvent,
+  title:
+    "A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so.",
+});
+
+// const tentativeEvent = reactive<IEvent>({
+//   ...baseEvent,
+//   status: EventStatus.TENTATIVE,
+// });
+
+// const cancelledEvent = reactive<IEvent>({
+//   ...baseEvent,
+//   status: EventStatus.CANCELLED,
+// });
+</script>

js/src/components/Event/EventListViewCard.vue

@@ -1,169 +1,83 @@
 <template>
-  <article class="box">
-    <div class="columns">
-      <div class="content column">
-        <div class="title-wrapper">
-          <div class="date-component">
-            <date-calendar-icon :date="event.beginsOn" :small="true" />
-          </div>
-          <router-link
-            :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
-          >
-            <h2 class="title">{{ event.title }}</h2>
-          </router-link>
-        </div>
-        <div class="participation-actor has-text-grey-dark">
-          <span v-if="event.physicalAddress && event.physicalAddress.locality">
-            {{ event.physicalAddress.locality }}
-          </span>
-          <span v-if="event.attributedTo && options.memberofGroup">
-            {{
-              $t("Created by {name}", {
-                name: usernameWithDomain(event.organizerActor),
-              })
-            }}
-          </span>
-          <span v-else-if="options.memberofGroup">
-            {{
-              $t("Organized by {name}", {
-                name: usernameWithDomain(event.organizerActor),
-              })
-            }}
-          </span>
-        </div>
-        <div class="columns">
-          <span class="column is-narrow">
-            <b-icon
-              icon="earth"
-              v-if="event.visibility === EventVisibility.PUBLIC"
-            />
-            <b-icon
-              icon="link"
-              v-if="event.visibility === EventVisibility.UNLISTED"
-            />
-            <b-icon
-              icon="lock"
-              v-if="event.visibility === EventVisibility.PRIVATE"
-            />
-          </span>
-          <span class="column is-narrow participant-stats">
-            <span v-if="event.options.maximumAttendeeCapacity !== 0">
-              {{
-                $t("{approved} / {total} seats", {
-                  approved: event.participantStats.participant,
-                  total: event.options.maximumAttendeeCapacity,
-                })
-              }}
-            </span>
-            <span v-else>
-              {{
-                $tc(
-                  "{count} participants",
-                  event.participantStats.participant,
-                  {
-                    count: event.participantStats.participant,
-                  }
-                )
-              }}
-            </span>
-          </span>
-        </div>
+  <article
+    class="bg-white dark:bg-gray-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2"
+  >
+    <div class="flex gap-2">
+      <div class="">
+        <date-calendar-icon :date="event.beginsOn.toString()" :small="true" />
       </div>
+      <router-link
+        :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+      >
+        <h2 class="text-2xl line-clamp-2">{{ event.title }}</h2>
+      </router-link>
+    </div>
+    <div class="">
+      <span v-if="event.physicalAddress && event.physicalAddress.locality">
+        {{ event.physicalAddress.locality }}
+      </span>
+      <span v-if="event.attributedTo">
+        {{
+          $t("Created by {name}", {
+            name: displayName(event.attributedTo),
+          })
+        }}
+      </span>
+      <span v-else>
+        {{
+          $t("Organized by {name}", {
+            name: displayName(event.organizerActor),
+          })
+        }}
+      </span>
+    </div>
+    <div class="flex gap-1">
+      <span>
+        <Earth v-if="event.visibility === EventVisibility.PUBLIC" />
+        <Link v-if="event.visibility === EventVisibility.UNLISTED" />
+        <Lock v-if="event.visibility === EventVisibility.PRIVATE" />
+      </span>
+      <span>
+        <span v-if="event.options.maximumAttendeeCapacity !== 0">
+          {{
+            $t("{approved} / {total} seats", {
+              approved: event.participantStats.participant,
+              total: event.options.maximumAttendeeCapacity,
+            })
+          }}
+        </span>
+        <span v-else>
+          {{
+            $t(
+              "{count} participants",
+              {
+                count: event.participantStats.participant,
+              },
+              event.participantStats.participant
+            )
+          }}
+        </span>
+      </span>
     </div>
   </article>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventCardOptions, IEvent } from "@/types/event.model";
-import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { IPerson, usernameWithDomain } from "@/types/actor";
-import { mixins } from "vue-class-component";
-import ActorMixin from "@/mixins/actor";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import EventMixin from "@/mixins/event";
-import { EventVisibility, ParticipantRole } from "@/types/enums";
+import { displayName } from "@/types/actor";
+import { EventVisibility } from "@/types/enums";
 import RouteName from "../../router/name";
+import Earth from "vue-material-design-icons/Earth.vue";
+import Link from "vue-material-design-icons/Link.vue";
+import Lock from "vue-material-design-icons/Lock.vue";
 
-const defaultOptions: IEventCardOptions = {
-  hideDate: true,
-  loggedPerson: false,
-  hideDetails: false,
-  organizerActor: null,
-  memberofGroup: false,
-};
-
-@Component({
-  components: {
-    DateCalendarIcon,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
-    },
-  },
-})
-export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
-  /**
-   * The participation associated
-   */
-  @Prop({ required: true }) event!: IEvent;
-
-  /**
-   * Options are merged with default options
-   */
-  @Prop({ required: false, default: () => defaultOptions })
-  options!: IEventCardOptions;
-
-  currentActor!: IPerson;
-
-  ParticipantRole = ParticipantRole;
-
-  EventVisibility = EventVisibility;
-
-  RouteName = RouteName;
-
-  usernameWithDomain = usernameWithDomain;
-}
+withDefaults(defineProps<{ event: IEvent; options?: IEventCardOptions }>(), {
+  options: (): IEventCardOptions => ({
+    hideDate: true,
+    loggedPerson: false,
+    hideDetails: false,
+    organizerActor: null,
+  }),
+});
 </script>
-
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-article.box {
-  div.content {
-    padding: 5px;
-
-    .participation-actor span,
-    .participant-stats span {
-      padding: 0 5px;
-
-      button {
-        height: auto;
-        padding-top: 0;
-      }
-    }
-
-    div.title-wrapper {
-      display: flex;
-      align-items: center;
-
-      div.date-component {
-        flex: 0;
-        @include margin-right(16px);
-      }
-
-      .title {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        font-weight: 400;
-        line-height: 1em;
-        font-size: 1.6em;
-        padding-bottom: 5px;
-        margin: auto 0;
-      }
-    }
-  }
-}
-</style>

js/src/components/Event/EventMap.vue

@@ -6,6 +6,7 @@
     <div class="modal-card-body">
       <section class="map">
         <map-leaflet
+          v-if="physicalAddress?.geom"
           :coords="physicalAddress.geom"
           :marker="{
             text: physicalAddress.fullName,
@@ -15,7 +16,7 @@
       </section>
       <section class="columns is-centered map-footer">
         <div class="column is-half has-text-centered">
-          <p class="address">
+          <p class="address" v-if="physicalAddress?.fullName">
             <i class="mdi mdi-map-marker"></i>
             {{ physicalAddress.fullName }}
           </p>
@@ -66,11 +67,10 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { Address, IAddress } from "@/types/address.model";
 import { RoutingTransportationType, RoutingType } from "@/types/enums";
-import { PropType } from "vue";
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { computed } from "vue";
 
 const RoutingParamType = {
   [RoutingType.OPENSTREETMAP]: {
@@ -87,77 +87,73 @@ const RoutingParamType = {
   },
 };
 
-@Component({
-  components: {
-    "map-leaflet": () =>
-      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
-  },
-})
-export default class EventMap extends Vue {
-  @Prop({ type: Object as PropType<IAddress> }) address!: IAddress;
-  @Prop({ type: String }) routingType!: RoutingType;
+const MapLeaflet = import("../../components/Map.vue");
 
-  get physicalAddress(): Address | null {
-    if (!this.address) return null;
+const props = defineProps<{
+  address: IAddress;
+  routingType: RoutingType;
+}>();
 
-    return new Address(this.address);
-  }
+const physicalAddress = computed((): Address | null => {
+  if (!props.address) return null;
 
-  makeNavigationPath(
-    transportationType: RoutingTransportationType
-  ): string | undefined {
-    const geometry = this.physicalAddress?.geom;
-    if (geometry) {
-      /**
-       * build urls to routing map
-       */
-      if (!RoutingParamType[this.routingType][transportationType]) {
-        return;
-      }
+  return new Address(props.address);
+});
 
-      const urlGeometry = geometry.split(";").reverse().join(",");
+const makeNavigationPath = (
+  transportationType: RoutingTransportationType
+): string | undefined => {
+  const geometry = physicalAddress.value?.geom;
+  if (geometry) {
+    /**
+     * build urls to routing map
+     */
+    if (!RoutingParamType[props.routingType][transportationType]) {
+      return;
+    }
 
-      switch (this.routingType) {
-        case RoutingType.GOOGLE_MAPS:
-          return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }`;
-        case RoutingType.OPENSTREETMAP:
-        default: {
-          const bboxX = geometry.split(";").reverse()[0];
-          const bboxY = geometry.split(";").reverse()[1];
-          return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
-            RoutingParamType[this.routingType][transportationType]
-          }#map=14/${bboxX}/${bboxY}`;
-        }
+    const urlGeometry = geometry.split(";").reverse().join(",");
+
+    switch (props.routingType) {
+      case RoutingType.GOOGLE_MAPS:
+        return `https://maps.google.com/?saddr=Current+Location&daddr=${urlGeometry}&${
+          RoutingParamType[props.routingType][transportationType]
+        }`;
+      case RoutingType.OPENSTREETMAP:
+      default: {
+        const bboxX = geometry.split(";").reverse()[0];
+        const bboxY = geometry.split(";").reverse()[1];
+        return `https://www.openstreetmap.org/directions?from=&to=${urlGeometry}&${
+          RoutingParamType[props.routingType][transportationType]
+        }#map=14/${bboxX}/${bboxY}`;
       }
     }
   }
+};
 
-  get addressLinkToRouteByCar(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.CAR);
-  }
+const addressLinkToRouteByCar = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.CAR);
+});
 
-  get addressLinkToRouteByBike(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.BIKE);
-  }
+const addressLinkToRouteByBike = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.BIKE);
+});
 
-  get addressLinkToRouteByFeet(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.FOOT);
-  }
+const addressLinkToRouteByFeet = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.FOOT);
+});
 
-  get addressLinkToRouteByTransit(): undefined | string {
-    return this.makeNavigationPath(RoutingTransportationType.TRANSIT);
-  }
-}
+const addressLinkToRouteByTransit = computed((): undefined | string => {
+  return makeNavigationPath(RoutingTransportationType.TRANSIT);
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 .modal-card-head {
   justify-content: flex-end;
-  button.delete {
-    @include margin-right(1rem);
-  }
+  // button.delete {
+  //   @include margin-right(1rem);
+  // }
 }
 
 section.map {

js/src/components/Event/EventMetadataBlock.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
-    <h2>{{ title }}</h2>
-    <div class="eventMetadataBlock">
+    <h2 class="text-2xl">{{ title }}</h2>
+    <div class="flex items-center mb-3 gap-1 eventMetadataBlock">
+      <slot name="icon"></slot>
       <!-- Custom icons -->
-      <span
+      <!-- <span
         class="icon is-medium"
         v-if="icon && icon.substring(0, 7) === 'mz:icon'"
       >
@@ -13,30 +14,19 @@
           height="32"
         />
       </span>
-      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
-      <div class="content-wrapper" :class="{ 'padding-left': icon }">
+      <o-icon v-else-if="icon" :icon="icon" size="is-medium" /> -->
+      <div class="content-wrapper">
         <slot></slot>
       </div>
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class EventMetadataBlock extends Vue {
-  @Prop({ required: false, type: String }) icon!: string;
-
-  @Prop({ required: true, type: String }) title!: string;
-}
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+}>();
 </script>
 <style lang="scss" scoped>
-h2 {
-  font-size: 1.8rem;
-  font-weight: 500;
-  color: $violet;
-}
-
 div.eventMetadataBlock {
   display: flex;
   align-items: center;

js/src/components/Event/EventMetadataItem.vue

@@ -1,142 +1,143 @@
 <template>
-  <div class="card card-content">
-    <div class="media">
-      <div class="media-left">
+  <div
+    class="block p-4 bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
+  >
+    <div class="flex flex-wrap gap-1 w-full items-center">
+      <div class="">
         <img
           v-if="
-            metadataItem.icon && metadataItem.icon.substring(0, 7) === 'mz:icon'
+            modelValue.icon && modelValue.icon.substring(0, 7) === 'mz:icon'
           "
-          :src="`/img/${metadataItem.icon.substring(8)}_monochrome.svg`"
+          :src="`/img/${modelValue.icon.substring(8)}_monochrome.svg`"
           width="24"
           height="24"
           alt=""
         />
 
-        <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
-        <b-icon v-else icon="help-circle" />
+        <o-icon
+          v-else-if="modelValue.icon"
+          :icon="modelValue.icon"
+          customSize="24"
+        />
+        <o-icon v-else icon="help-circle" customSize="24" />
       </div>
-      <div class="media-content">
-        <b>{{ metadataItem.title || metadataItem.label }}</b>
+      <div class="flex-1">
+        <b>{{ modelValue.title || modelValue.label }}</b>
         <br />
         <small>
-          {{ metadataItem.description }}
+          {{ modelValue.description }}
         </small>
         <div
           v-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType === EventMetadataKeyType.CHOICE &&
-            metadataItem.choices
+            modelValue.type === EventMetadataType.STRING &&
+            modelValue.keyType === EventMetadataKeyType.CHOICE &&
+            modelValue.choices
           "
         >
-          <b-field v-for="(value, key) in metadataItem.choices" :key="key">
-            <b-radio v-model="metadataItemValue" :native-value="key">{{
+          <o-field v-for="(value, key) in modelValue.choices" :key="key">
+            <o-radio v-model="metadataItemValue" :native-value="key">{{
               value
-            }}</b-radio>
-          </b-field>
+            }}</o-radio>
+          </o-field>
         </div>
-        <b-field
+        <o-field
           v-else-if="
-            metadataItem.type === EventMetadataType.STRING &&
-            metadataItem.keyType == EventMetadataKeyType.URL
+            modelValue.type === EventMetadataType.STRING &&
+            modelValue.keyType == EventMetadataKeyType.URL
           "
         >
-          <b-input
+          <o-input
             @blur="validatePattern"
             ref="urlInput"
             type="url"
             :pattern="
-              metadataItem.pattern ? metadataItem.pattern.source : undefined
+              modelValue.pattern ? modelValue.pattern.source : undefined
             "
             :validation-message="$t(`This URL doesn't seem to be valid`)"
             required
             v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
+            :placeholder="modelValue.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
-          <b-input
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.STRING">
+          <o-input
             v-model="metadataItemValue"
-            :placeholder="metadataItem.placeholder"
+            :placeholder="modelValue.placeholder"
           />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
-          <b-numberinput v-model="metadataItemValue" />
-        </b-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
-          <b-checkbox v-model="metadataItemValue">
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.INTEGER">
+          <o-input type="number" v-model="metadataItemValue" />
+        </o-field>
+        <o-field v-else-if="modelValue.type === EventMetadataType.BOOLEAN">
+          <o-checkbox v-model="metadataItemValue">
             {{
               metadataItemValue === "true"
-                ? metadataItem.choices["true"]
-                : metadataItem.choices["false"]
+                ? modelValue?.choices?.true
+                : modelValue?.choices?.false
             }}
-          </b-checkbox>
-        </b-field>
+          </o-checkbox>
+        </o-field>
       </div>
-      <b-button
+      <o-button
         icon-left="close"
-        @click="$emit('removeItem', metadataItem.key)"
+        @click="$emit('removeItem', modelValue.key)"
       />
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import { computed, ref } from "vue";
 
-@Component
-export default class EventMetadataItem extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  value!: IEventMetadataDescription;
+const props = defineProps<{
+  modelValue: IEventMetadataDescription;
+}>();
 
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
+const emit = defineEmits(["update:modelValue", "removeItem"]);
 
-  @Ref("urlInput") readonly urlInput!: any;
+const urlInput = ref<any>(null);
 
-  get metadataItem(): IEventMetadataDescription {
-    return this.value;
-  }
-
-  get metadataItemValue(): string {
-    return this.metadataItem.value;
-  }
-
-  set metadataItemValue(value: string) {
-    if (this.validate(value)) {
-      this.$emit("input", { ...this.metadataItem, value: value.toString() });
+const metadataItemValue = computed({
+  get(): string {
+    return props.modelValue.value;
+  },
+  set(value: string) {
+    if (validate(value)) {
+      emit("update:modelValue", {
+        ...props.modelValue,
+        value: value.toString(),
+      });
     }
-  }
+  },
+});
 
-  validatePattern(): void {
-    this.urlInput.checkHtml5Validity();
-  }
+const validatePattern = (): void => {
+  urlInput.value?.checkHtml5Validity();
+};
 
-  private validate(value: string): boolean {
-    if (this.metadataItem.keyType === EventMetadataKeyType.URL) {
-      try {
-        const url = new URL(value);
-        if (!["http:", "https:", "mailto:"].includes(url.protocol))
-          return false;
-        if (this.metadataItem.pattern) {
-          return value.match(this.metadataItem.pattern) !== null;
-        }
-      } catch {
-        return false;
+const validate = (value: string): boolean => {
+  if (props.modelValue.keyType === EventMetadataKeyType.URL) {
+    try {
+      const url = new URL(value);
+      if (!["http:", "https:", "mailto:"].includes(url.protocol)) return false;
+      if (props.modelValue.pattern) {
+        return value.match(props.modelValue.pattern) !== null;
       }
+    } catch {
+      return false;
     }
-    return true;
   }
-}
+  return true;
+};
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 .card .media {
   align-items: center;
 
-  & > button {
-    @include margin-left(1rem);
-  }
+  // & > button {
+  //   @include margin-left(1rem);
+  // }
 }
 </style>

js/src/components/Event/EventMetadataList.vue

@@ -3,18 +3,18 @@
     <div class="mb-4">
       <div v-for="(item, index) in metadata" :key="item.key" class="my-2">
         <event-metadata-item
-          :value="metadata[index]"
-          @input="updateSingleMetadata"
+          :modelValue="metadata[index]"
+          @update:modelValue="updateSingleMetadata"
           @removeItem="removeItem"
         />
       </div>
     </div>
-    <b-field
+    <o-field
       grouped
       :label="$t('Find or add an element')"
       label-for="event-metadata-autocomplete"
     >
-      <b-autocomplete
+      <o-autocomplete
         expanded
         :clear-on-select="true"
         v-model="search"
@@ -25,12 +25,12 @@
         open-on-focus
         :placeholder="$t('e.g. Accessibility, Twitch, PeerTube')"
         id="event-metadata-autocomplete"
-        @select="(option) => addElement(option)"
+        @select="addElement"
         dir="auto"
       >
-        <template slot-scope="props">
-          <div class="media">
-            <div class="media-left">
+        <template v-slot="props">
+          <div class="dark:bg-violet-3 p-1 flex items-center gap-1">
+            <div class="">
               <img
                 v-if="
                   props.option.icon &&
@@ -41,10 +41,10 @@
                 height="24"
                 alt=""
               />
-              <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
-              <b-icon v-else icon="help-circle" />
+              <o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
+              <o-icon v-else icon="help-circle" />
             </div>
-            <div class="media-content">
+            <div class="">
               <b>{{ props.option.label }}</b>
               <br />
               <small>
@@ -56,14 +56,14 @@
         <template #empty>{{
           $t("No results for {search}", { search })
         }}</template>
-      </b-autocomplete>
+      </o-autocomplete>
       <p class="control">
-        <b-button @click="showNewElementModal = true">
+        <o-button @click="showNewElementModal = true">
           {{ $t("Add new…") }}
-        </b-button>
+        </o-button>
       </p>
-    </b-field>
-    <b-modal
+    </o-field>
+    <o-modal
       has-modal-card
       v-model="showNewElementModal"
       :close-button-aria-label="$t('Close')"
@@ -78,147 +78,142 @@
         </header>
         <div class="modal-card-body">
           <form @submit="addNewElement">
-            <b-field :label="$t('Element title')">
-              <b-input v-model="newElement.title" />
-            </b-field>
-            <b-field :label="$t('Element value')">
-              <b-input v-model="newElement.value" />
-            </b-field>
-            <b-button type="is-primary" native-type="submit">{{
+            <o-field :label="$t('Element title')">
+              <o-input v-model="newElement.title" />
+            </o-field>
+            <o-field :label="$t('Element value')">
+              <o-input v-model="newElement.value" />
+            </o-field>
+            <o-button variant="primary" native-type="submit">{{
               $t("Add")
-            }}</b-button>
+            }}</o-button>
           </form>
         </div>
       </div>
-    </b-modal>
+    </o-modal>
   </section>
 </template>
-<script lang="ts">
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
+<script lang="ts" setup>
+import { IEventMetadataDescription } from "@/types/event-metadata";
 import cloneDeep from "lodash/cloneDeep";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed, reactive, ref } from "vue";
 import EventMetadataItem from "./EventMetadataItem.vue";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { EventMetadataCategories, EventMetadataType } from "@/types/enums";
+import { useI18n } from "vue-i18n";
 
 type GroupedIEventMetadata = Array<{
   category: string;
-  items: IEventMetadata[];
+  items: IEventMetadataDescription[];
 }>;
 
-@Component({
-  components: {
-    EventMetadataItem,
-  },
-})
-export default class EventMetadataList extends Vue {
-  @Prop({ type: Array as PropType<Array<IEventMetadata>>, required: true })
-  value!: IEventMetadata[];
+const props = defineProps<{
+  modelValue: IEventMetadataDescription[];
+}>();
 
-  newElement = {
-    title: "",
-    value: "",
-  };
+const emit = defineEmits(["update:modelValue"]);
 
-  search = "";
+const newElement = reactive({
+  title: "",
+  value: "",
+});
 
-  data: IEventMetadataDescription[] = eventMetaDataList;
+const { t } = useI18n({ useScope: "global" });
 
-  showNewElementModal = false;
+const search = ref("");
 
-  get metadata(): IEventMetadata[] {
-    return this.value.map((val) => {
-      const def = this.data.find((dat) => dat.key === val.key);
+const data: IEventMetadataDescription[] = eventMetaDataList;
+
+const showNewElementModal = ref(false);
+
+const metadata = computed({
+  get(): IEventMetadataDescription[] {
+    return props.modelValue.map((val) => {
+      const def = data.find((dat) => dat.key === val.key);
       return {
         ...def,
         ...val,
       };
     }) as any[];
-  }
-
-  set metadata(metadata: IEventMetadata[]) {
-    this.$emit(
-      "input",
+  },
+  set(metadata: IEventMetadataDescription[]) {
+    emit(
+      "update:modelValue",
       metadata.filter((elem) => elem)
     );
-  }
+  },
+});
 
-  localizedCategories: Record<EventMetadataCategories, string> = {
-    [EventMetadataCategories.ACCESSIBILITY]: this.$t("Accessibility") as string,
-    [EventMetadataCategories.LIVE]: this.$t("Live") as string,
-    [EventMetadataCategories.REPLAY]: this.$t("Replay") as string,
-    [EventMetadataCategories.TOOLS]: this.$t("Tools") as string,
-    [EventMetadataCategories.SOCIAL]: this.$t("Social") as string,
-    [EventMetadataCategories.DETAILS]: this.$t("Details") as string,
-    [EventMetadataCategories.BOOKING]: this.$t("Booking") as string,
-    [EventMetadataCategories.VIDEO_CONFERENCE]: this.$t(
-      "Video Conference"
-    ) as string,
-  };
+const localizedCategories: Record<EventMetadataCategories, string> = {
+  [EventMetadataCategories.ACCESSIBILITY]: t("Accessibility") as string,
+  [EventMetadataCategories.LIVE]: t("Live") as string,
+  [EventMetadataCategories.REPLAY]: t("Replay") as string,
+  [EventMetadataCategories.TOOLS]: t("Tools") as string,
+  [EventMetadataCategories.SOCIAL]: t("Social") as string,
+  [EventMetadataCategories.DETAILS]: t("Details") as string,
+  [EventMetadataCategories.BOOKING]: t("Booking") as string,
+  [EventMetadataCategories.VIDEO_CONFERENCE]: t("Video Conference") as string,
+};
 
-  get filteredDataArray(): GroupedIEventMetadata {
-    return this.data
-      .filter((option) => {
-        return (
-          option.label
-            .toString()
-            .toLowerCase()
-            .indexOf(this.search.toLowerCase()) >= 0
-        );
-      })
-      .filter(({ key }) => {
-        return !this.metadata.map(({ key: key2 }) => key2).includes(key);
-      })
-      .reduce(
-        (acc: GroupedIEventMetadata, current: IEventMetadataDescription) => {
-          const group = acc.find(
-            (elem) =>
-              elem.category === this.localizedCategories[current.category]
-          );
-          if (group) {
-            group.items.push(current);
-          } else {
-            acc.push({
-              category: this.localizedCategories[current.category],
-              items: [current],
-            });
-          }
-          return acc;
-        },
-        []
+const filteredDataArray = computed((): GroupedIEventMetadata => {
+  return data
+    .filter((option) => {
+      return (
+        option.label
+          .toString()
+          .toLowerCase()
+          .indexOf(search.value.toLowerCase()) >= 0
       );
-  }
+    })
+    .filter(({ key }) => {
+      return !metadata.value.map(({ key: key2 }) => key2).includes(key);
+    })
+    .reduce(
+      (acc: GroupedIEventMetadata, current: IEventMetadataDescription) => {
+        const group = acc.find(
+          (elem) => elem.category === localizedCategories[current.category]
+        );
+        if (group) {
+          group.items.push(current);
+        } else {
+          acc.push({
+            category: localizedCategories[current.category],
+            items: [current],
+          });
+        }
+        return acc;
+      },
+      []
+    );
+});
 
-  updateSingleMetadata(element: IEventMetadataDescription): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === element.key);
-    metadataClone.splice(index, 1, element);
-    this.$emit("input", metadataClone);
-  }
+const updateSingleMetadata = (element: IEventMetadataDescription): void => {
+  const metadataClone = cloneDeep(metadata.value);
+  const index = metadataClone.findIndex((elem) => elem.key === element.key);
+  metadataClone.splice(index, 1, element);
+  emit("update:modelValue", metadataClone);
+};
 
-  removeItem(itemKey: string): void {
-    const metadataClone = cloneDeep(this.metadata);
-    const index = metadataClone.findIndex((elem) => elem.key === itemKey);
-    metadataClone.splice(index, 1);
-    this.$emit("input", metadataClone);
-  }
+const removeItem = (itemKey: string): void => {
+  const metadataClone = cloneDeep(metadata.value);
+  const index = metadataClone.findIndex((elem) => elem.key === itemKey);
+  metadataClone.splice(index, 1);
+  emit("update:modelValue", metadataClone);
+};
 
-  addElement(element: IEventMetadata): void {
-    this.metadata = [...this.metadata, element];
-  }
+const addElement = (element: IEventMetadataDescription): void => {
+  metadata.value = [...metadata.value, element];
+};
 
-  addNewElement(e: Event): void {
-    e.preventDefault();
-    this.addElement({
-      ...this.newElement,
-      type: EventMetadataType.STRING,
-      key: `mz:plain:${(Math.random() + 1).toString(36).substring(7)}`,
-    });
-    this.showNewElementModal = false;
-  }
-}
+const addNewElement = (e: Event): void => {
+  e.preventDefault();
+  addElement({
+    ...newElement,
+    type: EventMetadataType.STRING,
+    key: `mz:plain:${(Math.random() + 1).toString(36).substring(7)}`,
+    category: EventMetadataCategories.DETAILS,
+    label: "",
+  });
+  showNewElementModal.value = false;
+};
 </script>

js/src/components/Event/EventMetadataSidebar.vue

@@ -9,25 +9,25 @@
         <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
           <address-info :address="physicalAddress" />
-          <b-button
+          <o-button
             type="is-text"
             class="map-show-button"
             @click="$emit('showMapModal', true)"
             v-if="physicalAddress.geom"
           >
             {{ $t("Show map") }}
-          </b-button>
+          </o-button>
         </div>
       </div>
     </event-metadata-block>
     <event-metadata-block :title="$t('Date and time')" icon="calendar">
       <event-full-date
-        :beginsOn="event.beginsOn"
+        :beginsOn="event.beginsOn.toString()"
         :show-start-time="event.options.showStartTime"
         :show-end-time="event.options.showEndTime"
-        :timezone="event.options.timezone"
+        :timezone="event.options.timezone ?? undefined"
         :userTimezone="userTimezone"
-        :endsOn="event.endsOn"
+        :endsOn="event.endsOn?.toString()"
       />
     </event-metadata-block>
     <event-metadata-block
@@ -52,7 +52,11 @@
           :inline="true"
         />
       </router-link>
-      <actor-card v-else :actor="event.organizerActor" :inline="true" />
+      <actor-card
+        v-else-if="event.organizerActor"
+        :actor="event.organizerActor"
+        :inline="true"
+      />
       <actor-card
         :inline="true"
         :actor="contact"
@@ -129,107 +133,84 @@
     </event-metadata-block>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { Address } from "@/types/address.model";
-import { IConfig } from "@/types/config.model";
 import { EventMetadataKeyType, EventMetadataType } from "@/types/enums";
 import { IEvent } from "@/types/event.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 import RouteName from "../../router/name";
 import { usernameWithDomain } from "../../types/actor";
 import EventMetadataBlock from "./EventMetadataBlock.vue";
 import EventFullDate from "./EventFullDate.vue";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import AddressInfo from "../../components/Address/AddressInfo.vue";
-import {
-  IEventMetadata,
-  IEventMetadataDescription,
-} from "@/types/event-metadata";
+import { IEventMetadataDescription } from "@/types/event-metadata";
 import { eventMetaDataList } from "../../services/EventMetadata";
 import { IUser } from "@/types/current-user.model";
 
-@Component({
-  components: {
-    EventMetadataBlock,
-    EventFullDate,
-    PopoverActorCard,
-    ActorCard,
-    AddressInfo,
-  },
-})
-export default class EventMetadataSidebar extends Vue {
-  @Prop({ type: Object as PropType<IEvent>, required: true }) event!: IEvent;
-  @Prop({ type: Object as PropType<IConfig>, required: true }) config!: IConfig;
-  @Prop({ required: true }) user!: IUser | undefined;
-  @Prop({ required: false, default: false }) showMap!: boolean;
+const props = withDefaults(
+  defineProps<{
+    event: IEvent;
+    user: IUser | undefined;
+    showMap?: boolean;
+  }>(),
+  { showMap: false }
+);
 
-  RouteName = RouteName;
+const physicalAddress = computed((): Address | null => {
+  if (!props.event.physicalAddress) return null;
 
-  usernameWithDomain = usernameWithDomain;
+  return new Address(props.event.physicalAddress);
+});
 
-  eventMetaDataList = eventMetaDataList;
+const extraMetadata = computed((): IEventMetadataDescription[] => {
+  return props.event.metadata.map((val) => {
+    const def = eventMetaDataList.find((dat) => dat.key === val.key);
+    return {
+      ...def,
+      ...val,
+    };
+  });
+});
 
-  EventMetadataType = EventMetadataType;
-  EventMetadataKeyType = EventMetadataKeyType;
-
-  get physicalAddress(): Address | null {
-    if (!this.event.physicalAddress) return null;
-
-    return new Address(this.event.physicalAddress);
+const urlToHostname = (url: string | undefined): string | null => {
+  if (!url) return null;
+  try {
+    return new URL(url).hostname;
+  } catch (e) {
+    return null;
   }
+};
 
-  get extraMetadata(): IEventMetadata[] {
-    return this.event.metadata.map((val) => {
-      const def = eventMetaDataList.find((dat) => dat.key === val.key);
-      return {
-        ...def,
-        ...val,
-      };
-    });
+const simpleURL = (url: string): string | null => {
+  try {
+    const uri = new URL(url);
+    return `${removeWWW(uri.hostname)}${uri.pathname}${uri.search}${uri.hash}`;
+  } catch (e) {
+    return null;
   }
+};
 
-  urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
+const removeWWW = (string: string): string => {
+  return string.replace(/^www./, "");
+};
+
+const accountURL = (extra: IEventMetadataDescription): string | undefined => {
+  switch (extra.key) {
+    case "mz:social:twitter:account": {
+      const handle =
+        extra.value[0] === "@" ? extra.value.slice(1) : extra.value;
+      return `https://twitter.com/${handle}`;
     }
   }
+};
 
-  simpleURL(url: string): string | null {
-    try {
-      const uri = new URL(url);
-      return `${this.removeWWW(uri.hostname)}${uri.pathname}${uri.search}${
-        uri.hash
-      }`;
-    } catch (e) {
-      return null;
-    }
-  }
-
-  private removeWWW(string: string): string {
-    return string.replace(/^www./, "");
-  }
-
-  accountURL(extra: IEventMetadataDescription): string | undefined {
-    switch (extra.key) {
-      case "mz:social:twitter:account": {
-        const handle =
-          extra.value[0] === "@" ? extra.value.slice(1) : extra.value;
-        return `https://twitter.com/${handle}`;
-      }
-    }
-  }
-
-  get userTimezone(): string | undefined {
-    return this.user?.settings?.timezone;
-  }
-}
+const userTimezone = computed((): string | undefined => {
+  return props.user?.settings?.timezone;
+});
 </script>
 <style lang="scss" scoped>
-::v-deep .metadata-organized-by {
+:deep(.metadata-organized-by) {
   .v-popover.popover .trigger {
     width: 100%;
     .media-content {

js/src/components/Event/EventMinimalistCard.vue

@@ -1,32 +1,36 @@
 <template>
   <router-link
-    class="event-minimalist-card-wrapper bg-white rounded-lg shadow-md"
+    class="block md:flex gap-x-2 gap-y-3 bg-white dark:bg-violet-2 rounded-lg shadow-md w-full"
     dir="auto"
     :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
   >
     <div class="event-preview mr-0 ml-0">
-      <div>
-        <div class="date-component">
-          <date-calendar-icon :date="event.beginsOn" :small="true" />
+      <div class="relative w-full">
+        <div class="flex absolute bottom-2 left-2 z-10 date-component">
+          <date-calendar-icon :date="event.beginsOn.toString()" :small="true" />
         </div>
         <lazy-image-wrapper
           :picture="event.picture"
           :rounded="true"
-          style="height: 100%; position: absolute; top: 0; left: 0; width: 100%"
+          class="object-cover flex-none h-32 md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
         />
       </div>
     </div>
-    <div class="title-info-wrapper has-text-grey-dark">
-      <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
+    <div class="title-info-wrapper p-2">
+      <h3
+        class="event-minimalist-title pb-2 text-lg leading-6 line-clamp-3 font-bold text-violet-title dark:text-white"
+        :lang="event.language"
+        dir="auto"
+      >
         <b-tag
-          type="is-info"
+          variant="info"
           class="mr-1"
           v-if="event.status === EventStatus.TENTATIVE"
         >
           {{ $t("Tentative") }}
         </b-tag>
         <b-tag
-          type="is-danger"
+          variant="danger"
           class="mr-1"
           v-if="event.status === EventStatus.CANCELLED"
         >
@@ -34,7 +38,7 @@
         </b-tag>
         <b-tag
           class="mr-2"
-          type="is-warning"
+          variant="warning"
           size="is-medium"
           v-if="event.draft"
           >{{ $t("Draft") }}</b-tag
@@ -50,47 +54,51 @@
         class="event-subtitle"
         v-else-if="event.options && event.options.isOnline"
       >
-        <b-icon icon="video" />
+        <Video />
         <span>{{ $t("Online") }}</span>
       </div>
-      <div class="event-subtitle event-organizer" v-if="showOrganizer">
+      <div class="event-subtitle event-organizer flex" v-if="showOrganizer">
         <figure
           class="image is-24x24"
-          v-if="organizer(event) && organizer(event).avatar"
+          v-if="organizer(event) && organizer(event)?.avatar"
         >
-          <img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
+          <img class="is-rounded" :src="organizer(event)?.avatar?.url" alt="" />
         </figure>
-        <b-icon v-else icon="account-circle" />
+        <AccountCircle v-else />
         <span class="organizer-name">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
-      <p class="participant-metadata">
-        <b-icon icon="account-multiple" />
+      <p class="flex gap-1">
+        <AccountMultiple />
         <span v-if="event.options.maximumAttendeeCapacity !== 0">
           {{
-            $tc(
+            $t(
               "{available}/{capacity} available places",
-              event.options.maximumAttendeeCapacity -
-                event.participantStats.participant,
               {
                 available:
                   event.options.maximumAttendeeCapacity -
                   event.participantStats.participant,
                 capacity: event.options.maximumAttendeeCapacity,
-              }
+              },
+              event.options.maximumAttendeeCapacity -
+                event.participantStats.participant
             )
           }}
         </span>
         <span v-else>
           {{
-            $tc("{count} participants", event.participantStats.participant, {
-              count: event.participantStats.participant,
-            })
+            $t(
+              "{count} participants",
+              {
+                count: event.participantStats.participant,
+              },
+              event.participantStats.participant
+            )
           }}
         </span>
         <span v-if="event.participantStats.notApproved > 0">
-          <b-button
+          <o-button
             type="is-text"
             @click="
               gotToWithCheck(participation, {
@@ -101,105 +109,92 @@
             "
           >
             {{
-              $tc(
+              $t(
                 "{count} requests waiting",
-                event.participantStats.notApproved,
+
                 {
                   count: event.participantStats.notApproved,
-                }
+                },
+                event.participantStats.notApproved
               )
             }}
-          </b-button>
+          </o-button>
         </span>
       </p>
     </div>
   </router-link>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { IEvent, organizer, organizerDisplayName } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { EventStatus, ParticipantRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
+import Video from "vue-material-design-icons/Video.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-})
-export default class EventMinimalistCard extends Vue {
-  @Prop({ required: true, type: Object }) event!: IEvent;
-  @Prop({ required: false, type: Boolean, default: false })
-  showOrganizer!: boolean;
-
-  RouteName = RouteName;
-
-  ParticipantRole = ParticipantRole;
-
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  EventStatus = EventStatus;
-}
+withDefaults(
+  defineProps<{
+    event: IEvent;
+    showOrganizer?: boolean;
+  }>(),
+  { showOrganizer: false }
+);
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
-@import "@/variables.scss";
+// @import "node_modules/bulma/sass/utilities/mixins.sass";
+// @import "@/variables.scss";
 
 .event-minimalist-card-wrapper {
-  display: grid;
-  grid-gap: 5px 10px;
+  // display: grid;
+  // grid-gap: 5px 10px;
   grid-template-areas: "preview" "body";
-  color: initial;
+  // color: initial;
 
-  @include desktop {
-    grid-template-columns: 200px 3fr;
-    grid-template-areas: "preview body";
-  }
+  // @include desktop {
+  grid-template-columns: 200px 3fr;
+  grid-template-areas: "preview body";
+  // }
 
-  .event-preview {
-    & > div {
-      position: relative;
-      height: 120px;
-      width: 100%;
+  // .event-preview {
+  //   & > div {
+  //     position: relative;
+  //     height: 120px;
+  //     width: 100%;
 
-      div.date-component {
-        display: flex;
-        position: absolute;
-        bottom: 5px;
-        left: 5px;
-        z-index: 1;
-      }
-    }
-  }
+  //     div.date-component {
+  //       display: flex;
+  //       position: absolute;
+  //       bottom: 5px;
+  //       left: 5px;
+  //       z-index: 1;
+  //     }
+  //   }
+  // }
 
-  .calendar-icon {
-    @include margin-right(1rem);
-  }
+  // .calendar-icon {
+  //   @include margin-right(1rem);
+  // }
 
   .title-info-wrapper {
     flex: 2;
 
-    .event-minimalist-title {
-      padding-bottom: 5px;
-      font-size: 18px;
-      line-height: 24px;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-weight: bold;
-      color: $title-color;
-    }
+    // .event-minimalist-title {
+    //   padding-bottom: 5px;
+    //   font-size: 18px;
+    //   line-height: 24px;
+    //   display: -webkit-box;
+    //   -webkit-line-clamp: 3;
+    //   -webkit-box-orient: vertical;
+    //   overflow: hidden;
+    //   font-weight: bold;
+    //   color: $title-color;
+    // }
 
-    ::v-deep .icon {
+    :deep(.icon) {
       vertical-align: middle;
     }
   }

js/src/components/Event/EventParticipationCard.vue

@@ -1,7 +1,13 @@
 <template>
-  <article class="box mb-5 mt-4">
-    <div class="identity-header" dir="auto">
-      <figure class="image is-24x24" v-if="participation.actor.avatar">
+  <article class="bg-white dark:bg-mbz-purple mb-5 mt-4 p-0">
+    <div
+      class="bg-mbz-yellow-2 flex p-2 text-violet-title rounded-t-lg"
+      dir="auto"
+    >
+      <figure
+        class="image is-24x24 ltr:pr-1 rtl:pl-1"
+        v-if="participation.actor.avatar"
+      >
         <img
           class="is-rounded"
           :src="participation.actor.avatar.url"
@@ -10,20 +16,23 @@
           width="24"
         />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <AccountCircle class="ltr:pr-1 rtl:pl-1" v-else />
       {{ displayNameAndUsername(participation.actor) }}
     </div>
-    <div class="list-card">
-      <div class="content-and-actions">
-        <div class="event-preview mr-0 ml-0">
-          <div>
-            <div class="date-component">
+    <div class="list-card flex flex-col relative">
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-1.5 gapt-x-3"
+      >
+        <div class="mr-0 ml-0">
+          <div class="h-36 relative w-full">
+            <div class="flex absolute bottom-2 left-2 z-10">
               <date-calendar-icon
-                :date="participation.event.beginsOn"
+                :date="participation.event.beginsOn.toString()"
                 :small="true"
               />
             </div>
             <router-link
+              class="h-full"
               :to="{
                 name: RouteName.EVENT,
                 params: { uuid: participation.event.uuid },
@@ -43,10 +52,10 @@
             </router-link>
           </div>
         </div>
-        <div class="list-card-content">
-          <div class="title-wrapper" dir="auto">
+        <div class="list-card-content lg:col-span-2 flex-1 p-2">
+          <div class="flex items-center pt-2" dir="auto">
             <b-tag
-              type="is-info"
+              variant="info"
               class="mr-1 mb-1"
               size="is-medium"
               v-if="participation.event.status === EventStatus.TENTATIVE"
@@ -54,7 +63,7 @@
               {{ $t("Tentative") }}
             </b-tag>
             <b-tag
-              type="is-danger"
+              variant="danger"
               class="mr-1 mb-1"
               size="is-medium"
               v-if="participation.event.status === EventStatus.CANCELLED"
@@ -67,52 +76,46 @@
                 params: { uuid: participation.event.uuid },
               }"
             >
-              <h3 class="title" :lang="participation.event.language">
+              <h3
+                class="line-clamp-3 font-bold mx-auto my-0 text-lg text-violet-title dark:text-white"
+                :lang="participation.event.language"
+              >
                 {{ participation.event.title }}
               </h3>
             </router-link>
           </div>
           <inline-address
             v-if="participation.event.physicalAddress"
-            class="event-subtitle"
             :physical-address="participation.event.physicalAddress"
           />
           <div
-            class="event-subtitle"
             v-else-if="
               participation.event.options &&
               participation.event.options.isOnline
             "
           >
-            <b-icon icon="video" />
+            <Video />
             <span>{{ $t("Online") }}</span>
           </div>
-          <div class="event-subtitle event-organizer">
-            <figure
-              class="image is-24x24"
-              v-if="
-                organizer(participation.event) &&
-                organizer(participation.event).avatar
-              "
-            >
+          <div class="flex gap-1">
+            <figure class="" v-if="actorAvatarURL">
               <img
-                class="is-rounded"
-                :src="organizer(participation.event).avatar.url"
+                class="rounded"
+                :src="actorAvatarURL"
                 alt=""
+                width="24"
+                height="24"
               />
             </figure>
-            <b-icon v-else icon="account-circle" />
-            <span class="organizer-name">
+            <AccountCircle v-else />
+            <span>
               {{ organizerDisplayName(participation.event) }}
             </span>
           </div>
-          <div class="event-subtitle event-participants">
-            <b-icon
-              :class="{ 'has-text-danger': lastSeatsLeft }"
-              icon="account-group"
-            />
+          <div class="flex">
+            <AccountGroup :class="{ 'has-text-danger': lastSeatsLeft }" />
             <span
-              class="participant-stats"
+              class="flex items-center py-0 px-2"
               v-if="participation.role !== ParticipantRole.NOT_APPROVED"
             >
               <!-- Less than 10 seats left -->
@@ -129,32 +132,32 @@
                 "
               >
                 {{
-                  $tc(
+                  $t(
                     "{available}/{capacity} available places",
-                    participation.event.options.maximumAttendeeCapacity -
-                      participation.event.participantStats.participant,
                     {
                       available:
                         participation.event.options.maximumAttendeeCapacity -
                         participation.event.participantStats.participant,
                       capacity:
                         participation.event.options.maximumAttendeeCapacity,
-                    }
+                    },
+                    participation.event.options.maximumAttendeeCapacity -
+                      participation.event.participantStats.participant
                   )
                 }}
               </span>
               <span v-else>
                 {{
-                  $tc(
+                  $t(
                     "{count} participants",
-                    participation.event.participantStats.participant,
                     {
                       count: participation.event.participantStats.participant,
-                    }
+                    },
+                    participation.event.participantStats.participant
                   )
                 }}
               </span>
-              <b-button
+              <o-button
                 v-if="participation.event.participantStats.notApproved > 0"
                 type="is-text"
                 @click="
@@ -166,32 +169,36 @@
                 "
               >
                 {{
-                  $tc(
+                  $t(
                     "{count} requests waiting",
-                    participation.event.participantStats.notApproved,
                     {
                       count: participation.event.participantStats.notApproved,
-                    }
+                    },
+                    participation.event.participantStats.notApproved
                   )
                 }}
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>
-        <div class="actions">
-          <b-dropdown aria-role="list" position="is-bottom-left">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
-              {{ $t("Actions") }}
-            </b-button>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
+        <o-dropdown aria-role="list">
+          <template #trigger>
+            <o-button icon-right="dots-horizontal">
+              {{ $t("Actions") }}
+            </o-button>
+          </template>
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.EDIT_EVENT,
@@ -199,13 +206,17 @@
                 })
               "
             >
-              <b-icon icon="pencil" />
+              <Pencil />
               {{ $t("Edit") }}
-            </b-dropdown-item>
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="participation.role === ParticipantRole.CREATOR"
-              aria-role="listitem"
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="participation.role === ParticipantRole.CREATOR"
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.DUPLICATE_EVENT,
@@ -213,32 +224,37 @@
                 })
               "
             >
-              <b-icon icon="content-duplicate" />
+              <ContentDuplicate />
               {{ $t("Duplicate") }}
-            </b-dropdown-item>
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
-              @click="openDeleteEventModalWrapper"
-            >
-              <b-icon icon="delete" />
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div @click="openDeleteEventModalWrapper" class="flex gap-1">
+              <Delete />
               {{ $t("Delete") }}
-            </b-dropdown-item>
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item
-              v-if="
-                ![
-                  ParticipantRole.PARTICIPANT,
-                  ParticipantRole.NOT_APPROVED,
-                ].includes(participation.role)
-              "
-              aria-role="listitem"
+          <o-dropdown-item
+            aria-role="listitem"
+            v-if="
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
+            "
+          >
+            <div
+              class="flex gap-1"
               @click="
                 gotToWithCheck(participation, {
                   name: RouteName.PARTICIPATIONS,
@@ -246,304 +262,383 @@
                 })
               "
             >
-              <b-icon icon="account-multiple-plus" />
+              <AccountMultiplePlus />
               {{ $t("Manage participations") }}
-            </b-dropdown-item>
+            </div>
+          </o-dropdown-item>
 
-            <b-dropdown-item aria-role="listitem" has-link>
-              <router-link
-                :to="{
-                  name: RouteName.EVENT,
-                  params: { uuid: participation.event.uuid },
-                }"
-              >
-                <b-icon icon="view-compact" />
-                {{ $t("View event page") }}
-              </router-link>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
+          <o-dropdown-item aria-role="listitem">
+            <router-link
+              class="flex gap-1"
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: participation.event.uuid },
+              }"
+            >
+              <ViewCompact />
+              {{ $t("View event page") }}
+            </router-link>
+          </o-dropdown-item>
+        </o-dropdown>
       </div>
     </div>
   </article>
 </template>
 
-<script lang="ts">
-import { Component, Prop } from "vue-property-decorator";
+<script lang="ts" setup>
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
-import { mixins } from "vue-class-component";
-import { RawLocation, Route } from "vue-router";
 import { EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
-import { IParticipant } from "../../types/participant.model";
+import { IParticipant } from "@/types/participant.model";
 import {
+  IEvent,
   IEventCardOptions,
   organizer,
+  organizerAvatarUrl,
   organizerDisplayName,
-} from "../../types/event.model";
-import { displayNameAndUsername, IActor, IPerson } from "../../types/actor";
-import ActorMixin from "../../mixins/actor";
-import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
-import EventMixin from "../../mixins/event";
-import RouteName from "../../router/name";
-import { changeIdentity } from "../../utils/auth";
-import PopoverActorCard from "../Account/PopoverActorCard.vue";
+} from "@/types/event.model";
+import { displayNameAndUsername, IActor, IPerson } from "@/types/actor";
+import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import RouteName from "@/router/name";
+import { changeIdentity } from "@/utils/identity";
 import LazyImageWrapper from "@/components/Image/LazyImageWrapper.vue";
 import InlineAddress from "@/components/Address/InlineAddress.vue";
-import { PropType } from "vue";
+import { RouteLocationRaw, useRouter } from "vue-router";
+import Pencil from "vue-material-design-icons/Pencil.vue";
+import ContentDuplicate from "vue-material-design-icons/ContentDuplicate.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.vue";
+import ViewCompact from "vue-material-design-icons/ViewCompact.vue";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
+import Video from "vue-material-design-icons/Video.vue";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { computed, inject } from "vue";
+import { useQuery } from "@vue/apollo-composable";
+import { useI18n } from "vue-i18n";
+import { Dialog } from "@/plugins/dialog";
+import { Snackbar } from "@/plugins/snackbar";
+import { useDeleteEvent } from "@/composition/apollo/event";
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
   loggedPerson: false,
   hideDetails: false,
   organizerActor: null,
-  memberofGroup: false,
 };
 
-@Component({
-  components: {
-    DateCalendarIcon,
-    PopoverActorCard,
-    LazyImageWrapper,
-    InlineAddress,
-  },
-  apollo: {
-    currentActor: {
-      query: CURRENT_ACTOR_CLIENT,
+const props = withDefaults(
+  defineProps<{
+    participation: IParticipant;
+    options: IEventCardOptions;
+  }>(),
+  {
+    options: () => ({
+      hideDate: true,
+      loggedPerson: false,
+      hideDetails: false,
+      organizerActor: null,
+    }),
+  }
+);
+
+const emit = defineEmits(["eventDeleted"]);
+
+const { result: currentActorResult } = useQuery(CURRENT_ACTOR_CLIENT);
+const currentActor = computed(() => currentActorResult.value?.currentActor);
+const { t } = useI18n({ useScope: "global" });
+
+const mergedOptions = computed<IEventCardOptions>(() => {
+  return { ...defaultOptions, ...props.options };
+});
+
+const dialog = inject<Dialog>("dialog");
+
+const openDeleteEventModal = (
+  event: IEvent,
+  callback: (anEvent: IEvent) => any
+): void => {
+  function escapeRegExp(string: string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+  }
+  const participantsLength = event.participantStats.participant;
+  const prefix = participantsLength
+    ? t(
+        "There are {participants} participants.",
+        {
+          participants: participantsLength,
+        },
+        participantsLength
+      )
+    : "";
+
+  dialog?.prompt({
+    variant: "danger",
+    title: t("Delete event"),
+    message: `${prefix}
+      ${t(
+        "Are you sure you want to delete this event? This action cannot be reverted."
+      )}
+      <br><br>
+      ${t('To confirm, type your event title "{eventTitle}"', {
+        eventTitle: event.title,
+      })}`,
+    confirmText: t("Delete {eventTitle}", {
+      eventTitle: event.title,
+    }),
+    inputAttrs: {
+      placeholder: event.title,
+      pattern: escapeRegExp(event.title),
     },
-  },
-})
-export default class EventParticipationCard extends mixins(
-  ActorMixin,
-  EventMixin
-) {
+    onConfirm: () => callback(event),
+  });
+};
+
+const { oruga } = useProgrammatic();
+const snackbar = inject<Snackbar>("snackbar");
+
+const {
+  mutate: deleteEvent,
+  onDone: onDeleteEventDone,
+  onError: onDeleteEventError,
+} = useDeleteEvent();
+
+onDeleteEventDone(() => {
   /**
-   * The participation associated
+   * When the event corresponding has been deleted (by the organizer).
+   * A notification is already triggered.
+   *
+   * @type {string}
    */
-  @Prop({ required: true, type: Object as PropType<IParticipant> })
-  participation!: IParticipant;
+  emit("eventDeleted", props.participation.event.id);
 
-  /**
-   * Options are merged with default options
-   */
-  @Prop({ required: false, default: () => defaultOptions })
-  options!: IEventCardOptions;
+  oruga.notification.open({
+    message: t("Event {eventTitle} deleted", {
+      eventTitle: props.participation.event.title,
+    }),
+    variant: "success",
+    position: "bottom-right",
+    duration: 5000,
+  });
+});
 
-  currentActor!: IPerson;
+onDeleteEventError((error) => {
+  snackbar?.open({
+    message: error.message,
+    variant: "danger",
+    position: "bottom",
+  });
 
-  ParticipantRole = ParticipantRole;
+  console.error(error);
+});
 
-  EventVisibility = EventVisibility;
+/**
+ * Delete the event
+ */
+const openDeleteEventModalWrapper = () => {
+  openDeleteEventModal(
+    props.participation.event,
+    deleteEvent(props.participation.event)
+  );
+};
 
-  displayNameAndUsername = displayNameAndUsername;
+const router = useRouter();
 
-  organizerDisplayName = organizerDisplayName;
-
-  organizer = organizer;
-
-  RouteName = RouteName;
-
-  EventStatus = EventStatus;
-
-  get mergedOptions(): IEventCardOptions {
-    return { ...defaultOptions, ...this.options };
+const gotToWithCheck = async (
+  participation: IParticipant,
+  route: RouteLocationRaw
+): Promise<any> => {
+  if (
+    participation.actor.id !== currentActor.value.id &&
+    participation.event.organizerActor
+  ) {
+    const organizerActor = participation.event.organizerActor as IPerson;
+    await changeIdentity(organizerActor);
+    oruga.notification.open({
+      message: t(
+        "Current identity has been changed to {identityName} in order to manage this event.",
+        {
+          identityName: organizerActor.preferredUsername,
+        }
+      ),
+      variant: "info",
+      position: "bottom-right",
+      duration: 5000,
+    });
   }
+  return router.push(route);
+};
 
-  /**
-   * Delete the event
-   */
-  async openDeleteEventModalWrapper(): Promise<void> {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    await this.openDeleteEventModal(this.participation.event);
+const organizerActor = computed<IActor | undefined>(() => {
+  if (
+    props.participation.event.attributedTo &&
+    props.participation.event.attributedTo.id
+  ) {
+    return props.participation.event.attributedTo;
   }
+  return props.participation.event.organizerActor;
+});
 
-  async gotToWithCheck(
-    participation: IParticipant,
-    route: RawLocation
-  ): Promise<Route> {
-    if (
-      participation.actor.id !== this.currentActor.id &&
-      participation.event.organizerActor
-    ) {
-      const organizerActor = participation.event.organizerActor as IPerson;
-      await changeIdentity(this.$apollo.provider.defaultClient, organizerActor);
-      this.$buefy.notification.open({
-        message: this.$t(
-          "Current identity has been changed to {identityName} in order to manage this event.",
-          {
-            identityName: organizerActor.preferredUsername,
-          }
-        ) as string,
-        type: "is-info",
-        position: "is-bottom-right",
-        duration: 5000,
-      });
-    }
-    return this.$router.push(route);
+const seatsLeft = computed<number | null>(() => {
+  if (props.participation.event.options.maximumAttendeeCapacity > 0) {
+    return (
+      props.participation.event.options.maximumAttendeeCapacity -
+      props.participation.event.participantStats.participant
+    );
   }
+  return null;
+});
 
-  get organizerActor(): IActor | undefined {
-    if (
-      this.participation.event.attributedTo &&
-      this.participation.event.attributedTo.id
-    ) {
-      return this.participation.event.attributedTo;
-    }
-    return this.participation.event.organizerActor;
+const lastSeatsLeft = computed<boolean>(() => {
+  if (seatsLeft.value) {
+    return seatsLeft.value < 10;
   }
+  return false;
+});
 
-  get seatsLeft(): number | null {
-    if (this.participation.event.options.maximumAttendeeCapacity > 0) {
-      return (
-        this.participation.event.options.maximumAttendeeCapacity -
-        this.participation.event.participantStats.participant
-      );
-    }
-    return null;
-  }
+const actorAvatarURL = computed<string | null>(() =>
+  organizerAvatarUrl(props.participation.event)
+);
 
-  get lastSeatsLeft(): boolean {
-    if (this.seatsLeft) {
-      return this.seatsLeft < 10;
-    }
-    return false;
-  }
-}
+// export default class EventParticipationCard extends mixins(
+//   ActorMixin,
+//   EventMixin
+// ) {
+
+// }
 </script>
 
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-@use "@/styles/_event-card";
-@import "~bulma/sass/utilities/mixins.sass";
+// @import "node_modules/bulma/sass/utilities/mixins.sass";
 
 article.box {
-  div.tag-container {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    @include margin-left(-5px);
-    z-index: 10;
-    max-width: 40%;
+  // div.tag-container {
+  //   position: absolute;
+  //   top: 10px;
+  //   right: 0;
+  //   @include margin-left(-5px);
+  //   z-index: 10;
+  //   max-width: 40%;
 
-    span.tag {
-      margin: 5px auto;
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-      /*word-break: break-all;*/
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: block;
-      /*text-align: right;*/
-      font-size: 1em;
-      /*padding: 0 1px;*/
-      line-height: 1.75em;
-    }
-  }
+  //   span.tag {
+  //     margin: 5px auto;
+  //     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+  //     /*word-break: break-all;*/
+  //     text-overflow: ellipsis;
+  //     overflow: hidden;
+  //     display: block;
+  //     /*text-align: right;*/
+  //     font-size: 1em;
+  //     /*padding: 0 1px;*/
+  //     line-height: 1.75em;
+  //   }
+  // }
 
   .list-card {
-    display: flex;
-    padding: 0 6px 0 0;
-    position: relative;
-    flex-direction: column;
+    // display: flex;
+    // padding: 0 6px 0 0;
+    // position: relative;
+    // flex-direction: column;
 
     .content-and-actions {
-      display: grid;
-      grid-gap: 5px 10px;
+      // display: grid;
+      // grid-gap: 5px 10px;
       grid-template-areas: "preview" "body" "actions";
 
-      @include tablet {
-        grid-template-columns: 1fr 3fr;
-        grid-template-areas: "preview body" "actions actions";
-      }
+      // @include tablet {
+      //   grid-template-columns: 1fr 3fr;
+      //   grid-template-areas: "preview body" "actions actions";
+      // }
 
-      @include desktop {
-        grid-template-columns: 1fr 3fr 1fr;
-        grid-template-areas: "preview body actions";
-      }
+      // @include desktop {
+      //   grid-template-columns: 1fr 3fr 1fr;
+      //   grid-template-areas: "preview body actions";
+      // }
 
       .event-preview {
         grid-area: preview;
 
         & > div {
           height: 128px;
-          width: 100%;
-          position: relative;
+          // width: 100%;
+          // position: relative;
 
-          div.date-component {
-            display: flex;
-            position: absolute;
-            bottom: 5px;
-            left: 5px;
-            z-index: 1;
-          }
+          // div.date-component {
+          //   display: flex;
+          //   position: absolute;
+          //   bottom: 5px;
+          //   left: 5px;
+          //   z-index: 1;
+          // }
 
-          img {
-            width: 100%;
-            object-position: center;
-            object-fit: cover;
-            height: 100%;
-          }
+          // img {
+          //   width: 100%;
+          //   object-position: center;
+          //   object-fit: cover;
+          //   height: 100%;
+          // }
         }
       }
 
       .actions {
-        padding: 7px;
-        cursor: pointer;
-        align-self: center;
-        justify-self: center;
+        //   padding: 7px;
+        //   cursor: pointer;
+        //   align-self: center;
+        //   justify-self: center;
         grid-area: actions;
       }
 
       div.list-card-content {
-        flex: 1;
-        padding: 5px;
+        // flex: 1;
+        // padding: 5px;
         grid-area: body;
 
-        .participant-stats {
-          display: flex;
-          align-items: center;
-          padding: 0 5px;
-        }
+        // .participant-stats {
+        //   display: flex;
+        //   align-items: center;
+        //   padding: 0 5px;
+        // }
 
-        div.title-wrapper {
-          display: flex;
-          align-items: center;
-          padding-top: 5px;
+        // div.title-wrapper {
+        //   display: flex;
+        //   align-items: center;
+        //   padding-top: 5px;
 
-          a {
-            text-decoration: none;
-            padding-bottom: 5px;
-          }
+        //   a {
+        //     text-decoration: none;
+        //     padding-bottom: 5px;
+        //   }
 
-          .title {
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            font-size: 18px;
-            line-height: 24px;
-            margin: auto 0;
-            font-weight: bold;
-            color: $title-color;
-          }
-        }
+        //   .title {
+        //     display: -webkit-box;
+        //     -webkit-line-clamp: 3;
+        //     -webkit-box-orient: vertical;
+        //     overflow: hidden;
+        //     font-size: 18px;
+        //     line-height: 24px;
+        //     margin: auto 0;
+        //     font-weight: bold;
+        //     color: $title-color;
+        //   }
+        // }
       }
     }
   }
 
-  .identity-header {
-    background: $yellow-2;
-    display: flex;
-    padding: 5px;
+  // .identity-header {
+  //   background: $yellow-2;
+  //   display: flex;
+  //   padding: 5px;
 
-    figure,
-    span.icon {
-      @include padding-right(3px);
-    }
-  }
+  //   figure,
+  //   span.icon {
+  //     @include padding-right(3px);
+  //   }
+  // }
 
-  & > .columns {
-    padding: 1.25rem;
-  }
-  padding: 0;
+  // & > .columns {
+  //   padding: 1.25rem;
+  // }
+  // padding: 0;
 }
 </style>

js/src/components/Event/FullAddressAutoComplete.vue

@@ -1,56 +1,65 @@
 <template>
-  <div class="address-autocomplete columns is-desktop">
-    <div class="column">
-      <b-field
+  <div class="address-autocomplete">
+    <div class="">
+      <o-field
         :label-for="id"
         expanded
         :message="fieldErrors"
-        :type="{ 'is-danger': fieldErrors.length }"
+        :type="{ 'is-danger': fieldErrors }"
+        class="!-mt-2"
       >
-        <template slot="label">
+        <template #label>
           {{ actualLabel }}
           <span
             class="is-size-6 has-text-weight-normal"
             v-if="gettingLocation"
-            >{{ $t("Getting location") }}</span
+            >{{ t("Getting location") }}</span
           >
         </template>
-        <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
-          <b-button
+        <p class="control" v-if="canShowLocateMeButton">
+          <o-loading
+            :full-page="false"
+            v-model:active="gettingLocation"
+            :can-cancel="false"
+            :container="mapMarker?.$el"
+          />
+          <o-button
+            ref="mapMarker"
             icon-right="map-marker"
             @click="locateMe"
-            :title="$t('Use my location')"
+            :title="t('Use my location')"
           />
         </p>
-        <b-autocomplete
+        <o-autocomplete
           :data="addressData"
           v-model="queryText"
-          :placeholder="$t('e.g. 10 Rue Jangot')"
-          field="fullName"
+          :placeholder="placeholderWithDefault"
+          :customFormatter="(elem: IAddress) => addressFullName(elem)"
           :loading="isFetching"
-          @typing="fetchAsyncData"
+          :debounceTyping="debounceDelay"
+          @typing="asyncData"
           :icon="canShowLocateMeButton ? null : 'map-marker'"
           expanded
           @select="updateSelected"
-          v-bind="$attrs"
           :id="id"
           :disabled="disabled"
           dir="auto"
+          class="!mt-0"
         >
           <template #default="{ option }">
-            <b-icon :icon="option.poiInfos.poiIcon.icon" />
+            <o-icon :icon="option.poiInfos.poiIcon.icon" />
             <b>{{ option.poiInfos.name }}</b
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
           </template>
           <template #empty>
-            <span v-if="isFetching">{{ $t("Searching…") }}</span>
+            <span v-if="isFetching">{{ t("Searching…") }}</span>
             <div v-else-if="queryText.length >= 3" class="is-enabled">
               <span>{{
-                $t('No results for "{queryText}"', { queryText })
+                t('No results for "{queryText}"', { queryText })
               }}</span>
               <span>{{
-                $t(
+                t(
                   "You can try another search term or drag and drop the marker on the map",
                   {
                     queryText,
@@ -58,24 +67,24 @@
                 )
               }}</span>
               <!--                        <p class="control" @click="openNewAddressModal">-->
-              <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
+              <!--                            <button type="button" class="button is-primary">{{ t('Add') }}</button>-->
               <!--                        </p>-->
             </div>
           </template>
-        </b-autocomplete>
-        <b-button
+        </o-autocomplete>
+        <o-button
           :disabled="!queryText"
           @click="resetAddress"
           class="reset-area"
           icon-left="close"
-          :title="$t('Clear address field')"
+          :title="t('Clear address field')"
         />
-      </b-field>
+      </o-field>
       <div
-        class="card"
-        v-if="!hideSelected && (selected.originId || selected.url)"
+        class="mt-2 p-2 rounded-lg shadow-md dark:bg-violet-3"
+        v-if="!hideSelected && (selected?.originId || selected?.url)"
       >
-        <div class="card-content">
+        <div class="">
           <address-info
             :address="selected"
             :show-icon="true"
@@ -86,7 +95,7 @@
       </div>
     </div>
     <div
-      class="map column"
+      class="map"
       v-if="!hideMap && selected && selected.geom && selected.poiInfos"
     >
       <map-leaflet
@@ -102,85 +111,245 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
-import { LatLng } from "leaflet";
-import { Address, IAddress } from "../../types/address.model";
-import AddressAutoCompleteMixin from "../../mixins/AddressAutoCompleteMixin";
+<script lang="ts" setup>
+import type { LatLng } from "leaflet";
+import { Address, IAddress, addressFullName } from "../../types/address.model";
 import AddressInfo from "../../components/Address/AddressInfo.vue";
+import { computed, ref, watch, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
+import { useGeocodingAutocomplete } from "@/composition/apollo/config";
+import { ADDRESS } from "@/graphql/address";
+import { useReverseGeocode } from "@/composition/apollo/address";
+import { useLazyQuery } from "@vue/apollo-composable";
+const MapLeaflet = defineAsyncComponent(() => import("../Map.vue"));
 
-@Component({
-  inheritAttrs: false,
-  components: {
-    AddressInfo,
+const props = withDefaults(
+  defineProps<{
+    modelValue: IAddress | null;
+    label?: string;
+    userTimezone?: string;
+    disabled?: boolean;
+    hideMap?: boolean;
+    hideSelected?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    label: "",
+    disabled: false,
+    hideMap: false,
+    hideSelected: false,
+  }
+);
+
+const addressModalActive = ref(false);
+
+const componentId = 0;
+
+const emit = defineEmits(["update:modelValue"]);
+
+const gettingLocationError = ref<string | null>(null);
+const gettingLocation = ref(false);
+const mapDefaultZoom = ref(15);
+
+const addressData = ref<IAddress[]>([]);
+
+const selected = ref<IAddress | null>(null);
+
+const isFetching = ref(false);
+
+const mapMarker = ref();
+
+const placeholderWithDefault = computed(
+  () => props.placeholder ?? t("e.g. 10 Rue Jangot")
+);
+
+// created(): void {
+//   componentId += 1;
+// }
+
+const id = computed((): string => {
+  return `full-address-autocomplete-${componentId}`;
+});
+
+const modelValue = computed(() => props.modelValue);
+
+watch(modelValue, () => {
+  if (!modelValue.value) return;
+  selected.value = modelValue.value;
+});
+
+const updateSelected = (option: IAddress): void => {
+  if (option == null) return;
+  selected.value = option;
+  emit("update:modelValue", selected.value);
+};
+
+const resetPopup = (): void => {
+  selected.value = new Address();
+};
+
+const openNewAddressModal = (): void => {
+  resetPopup();
+  addressModalActive.value = true;
+};
+
+const checkCurrentPosition = (e: LatLng): boolean => {
+  if (!selected.value?.geom) return false;
+  const lat = parseFloat(selected.value?.geom.split(";")[1]);
+  const lon = parseFloat(selected.value?.geom.split(";")[0]);
+
+  return e.lat === lat && e.lng === lon;
+};
+
+const { t, locale } = useI18n({ useScope: "global" });
+
+const actualLabel = computed((): string => {
+  return props.label ?? (t("Find an address") as string);
+});
+
+// eslint-disable-next-line class-methods-use-this
+const canShowLocateMeButton = computed((): boolean => {
+  return window.isSecureContext;
+});
+
+const { geocodingAutocomplete } = useGeocodingAutocomplete();
+
+const debounceDelay = computed(() =>
+  geocodingAutocomplete.value === true ? 200 : 2000
+);
+
+const { onResult: onAddressSearchResult, load: searchAddress } = useLazyQuery<{
+  searchAddress: IAddress[];
+}>(ADDRESS);
+
+onAddressSearchResult((result) => {
+  if (result.loading) return;
+  const { data } = result;
+  addressData.value = data.searchAddress.map(
+    (address: IAddress) => new Address(address)
+  );
+  isFetching.value = false;
+});
+
+const asyncData = async (query: string): Promise<void> => {
+  if (!query.length) {
+    addressData.value = [];
+    selected.value = new Address();
+    return;
+  }
+
+  if (query.length < 3) {
+    addressData.value = [];
+    return;
+  }
+
+  isFetching.value = true;
+
+  searchAddress(undefined, {
+    query,
+    locale: locale.value,
+  });
+};
+
+const queryText = computed({
+  get() {
+    return selected.value ? addressFullName(selected.value) : "";
   },
-})
-export default class FullAddressAutoComplete extends Mixins(
-  AddressAutoCompleteMixin
-) {
-  @Prop({ required: false, default: "" }) label!: string;
-  @Prop({ required: false }) userTimezone!: string;
-  @Prop({ required: false, default: false, type: Boolean }) disabled!: boolean;
-  @Prop({ required: false, default: false, type: Boolean }) hideMap!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  hideSelected!: boolean;
+  set(text) {
+    if (text === "" && selected.value?.id) {
+      console.log("doing reset");
+      resetAddress();
+    }
+  },
+});
 
-  addressModalActive = false;
+const resetAddress = (): void => {
+  emit("update:modelValue", null);
+  selected.value = new Address();
+};
 
-  private static componentId = 0;
-
-  created(): void {
-    FullAddressAutoComplete.componentId += 1;
+const locateMe = async (): Promise<void> => {
+  gettingLocation.value = true;
+  gettingLocationError.value = null;
+  try {
+    const location = await getLocation();
+    mapDefaultZoom.value = 12;
+    reverseGeoCode(
+      new LatLng(location.coords.latitude, location.coords.longitude),
+      12
+    );
+  } catch (e: any) {
+    gettingLocationError.value = e.message;
   }
+  gettingLocation.value = false;
+};
 
-  get id(): string {
-    return `full-address-autocomplete-${FullAddressAutoComplete.componentId}`;
+const { onResult: onReverseGeocodeResult, load: loadReverseGeocode } =
+  useReverseGeocode();
+
+onReverseGeocodeResult((result) => {
+  if (result.loading !== false) return;
+  const { data } = result;
+  addressData.value = data.reverseGeocode.map(
+    (elem: IAddress) => new Address(elem)
+  );
+
+  if (addressData.value.length > 0) {
+    const defaultAddress = new Address(addressData.value[0]);
+    selected.value = defaultAddress;
+    emit("update:modelValue", selected.value);
   }
+});
 
-  @Watch("value")
-  updateEditing(): void {
-    if (!(this.value && this.value.id)) return;
-    this.selected = this.value;
-  }
+const reverseGeoCode = (e: LatLng, zoom: number) => {
+  // If the position has been updated through autocomplete selection, no need to geocode it!
+  if (checkCurrentPosition(e)) return;
 
-  updateSelected(option: IAddress): void {
-    if (option == null) return;
-    this.selected = option;
-    this.$emit("input", this.selected);
-  }
+  loadReverseGeocode(undefined, {
+    latitude: e.lat,
+    longitude: e.lng,
+    zoom,
+    locale: locale.value as string,
+  });
+};
 
-  resetPopup(): void {
-    this.selected = new Address();
-  }
+// eslint-disable-next-line no-undef
+const getLocation = async (): Promise<GeolocationPosition> => {
+  let errorMessage = t("Failed to get location.");
+  return new Promise((resolve, reject) => {
+    if (!("geolocation" in navigator)) {
+      reject(new Error(errorMessage as string));
+    }
 
-  openNewAddressModal(): void {
-    this.resetPopup();
-    this.addressModalActive = true;
-  }
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        resolve(pos);
+      },
+      (err) => {
+        switch (err.code) {
+          case GeolocationPositionError.PERMISSION_DENIED:
+            errorMessage = t("The geolocation prompt was denied.");
+            break;
+          case GeolocationPositionError.POSITION_UNAVAILABLE:
+            errorMessage = t("Your position was not available.");
+            break;
+          case GeolocationPositionError.TIMEOUT:
+            errorMessage = t("Geolocation was not determined in time.");
+            break;
+          default:
+            errorMessage = err.message;
+        }
+        reject(new Error(errorMessage as string));
+      }
+    );
+  });
+};
 
-  checkCurrentPosition(e: LatLng): boolean {
-    if (!this.selected || !this.selected.geom) return false;
-    const lat = parseFloat(this.selected.geom.split(";")[1]);
-    const lon = parseFloat(this.selected.geom.split(";")[0]);
-
-    return e.lat === lat && e.lng === lon;
-  }
-
-  get actualLabel(): string {
-    return this.label || (this.$t("Find an address") as string);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  get canShowLocateMeButton(): boolean {
-    return window.isSecureContext;
-  }
-}
+const fieldErrors = computed(() => {
+  return gettingLocationError.value;
+});
 </script>
 <style lang="scss">
-.address-autocomplete {
-  margin-bottom: 0.75rem;
-}
-
 .autocomplete {
   .dropdown-menu {
     z-index: 2000;

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 {

js/src/components/Event/Integrations/Etherpad.vue

@@ -9,16 +9,10 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
 
-@Component
-export default class EtherpadIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
-}
+defineProps<{ metadata: IEventMetadataDescription }>();
 </script>
 <style lang="scss" scoped>
 .etherpad {

js/src/components/Event/Integrations/JitsiMeet.vue

@@ -9,16 +9,9 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class JitsiMeetIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
-}
+defineProps<{ metadata: IEventMetadataDescription }>();
 </script>
 <style lang="scss" scoped>
 .jitsi-meet {

js/src/components/Event/Integrations/PeerTube.vue

@@ -12,30 +12,25 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class PeerTubeIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get videoDetails(): { host: string; uuid: string } | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1] && matches[2]) {
-        return { host: matches[1], uuid: matches[2] };
-      }
+const videoDetails = computed((): { host: string; uuid: string } | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1] && matches[2]) {
+      return { host: matches[1], uuid: matches[2] };
     }
-    return null;
   }
+  return null;
+});
 
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+const origin = computed((): string => {
+  return window.location.hostname;
+});
 </script>
 <style lang="scss" scoped>
 .peertube {

js/src/components/Event/Integrations/Twitch.vue

@@ -13,30 +13,25 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class TwitchIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get channelName(): string | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1]) {
-        return matches[1];
-      }
+const channelName = computed((): string | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1]) {
+      return matches[1];
     }
-    return null;
   }
+  return null;
+});
 
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+const origin = computed((): string => {
+  return window.location.hostname;
+});
 </script>
 <style lang="scss" scoped>
 .twitch {

js/src/components/Event/Integrations/YouTube.vue

@@ -13,30 +13,25 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { computed } from "vue";
 
-@Component
-export default class YouTubeIntegration extends Vue {
-  @Prop({ type: Object as PropType<IEventMetadataDescription>, required: true })
-  metadata!: IEventMetadataDescription;
+const props = defineProps<{ metadata: IEventMetadataDescription }>();
 
-  get videoID(): string | null {
-    if (this.metadata.pattern) {
-      const matches = this.metadata.pattern.exec(this.metadata.value);
-      if (matches && matches[1]) {
-        return matches[1];
-      }
+const videoID = computed((): string | null => {
+  if (props.metadata.pattern) {
+    const matches = props.metadata.pattern.exec(props.metadata.value);
+    if (matches && matches[1]) {
+      return matches[1];
     }
-    return null;
   }
+  return null;
+});
 
-  get origin(): string {
-    return window.location.hostname;
-  }
-}
+const origin = computed((): string => {
+  return window.location.hostname;
+});
 </script>
 <style lang="scss" scoped>
 .youtube {

js/src/components/Event/MultiCard.vue

@@ -8,20 +8,14 @@
     />
   </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 EventCard from "./EventCard.vue";
-@Component({
-  components: {
-    EventCard,
-  },
-})
-export default class MultiCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-}
+
+defineProps<{
+  events: IEvent[];
+}>();
 </script>
 <style lang="scss" scoped>
 .multi-card-event {

js/src/components/Event/MultiEventMinimalistCard.vue

@@ -9,25 +9,21 @@
     />
   </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 EventMinimalistCard from "./EventMinimalistCard.vue";
 
-@Component({
-  components: {
-    EventMinimalistCard,
-  },
-})
-export default class MultiEventMinimalistCard extends Vue {
-  @Prop({ type: Array as PropType<IEvent[]>, required: true })
-  events!: IEvent[];
-  @Prop({ required: false, type: Boolean, default: false })
-  isCurrentActorMember!: boolean;
-  @Prop({ required: false, type: Boolean, default: false })
-  showOrganizer!: boolean;
-}
+withDefaults(
+  defineProps<{
+    events: IEvent[];
+    isCurrentActorMember?: boolean;
+    showOrganizer?: boolean;
+  }>(),
+  {
+    isCurrentActorMember: false,
+    showOrganizer: false,
+  }
+);
 </script>
 <style lang="scss" scoped>
 .events-wrapper {

js/src/components/Event/OrganizerPicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="list is-hoverable">
-    <b-input
+    <o-input
       dir="auto"
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
@@ -18,7 +18,7 @@
       <li
         class="relative focus-within:shadow-lg"
         v-for="availableActor in actualFilteredAvailableActors"
-        :key="availableActor.id"
+        :key="availableActor?.id"
       >
         <input
           class="sr-only peer"
@@ -26,126 +26,127 @@
           :value="availableActor"
           name="availableActors"
           v-model="selectedActor"
-          :id="`availableActor-${availableActor.id}`"
+          :id="`availableActor-${availableActor?.id}`"
         />
         <label
-          class="flex flex-wrap p-3 bg-white border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
-          :for="`availableActor-${availableActor.id}`"
+          class="flex flex-wrap p-3 bg-white hover:bg-gray-50 dark:bg-violet-3 dark:hover:bg-violet-3/60 border border-gray-300 rounded-lg cursor-pointer peer-checked:ring-primary peer-checked:ring-2 peer-checked:border-transparent"
+          :for="`availableActor-${availableActor?.id}`"
         >
-          <figure class="image is-48x48" v-if="availableActor.avatar">
+          <figure class="" v-if="availableActor?.avatar">
             <img
-              class="image is-rounded"
+              class="rounded"
               :src="availableActor.avatar.url"
               alt=""
+              width="48"
+              height="48"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
-          <div>
-            <h3>{{ availableActor.name }}</h3>
-            <small>{{ `@${availableActor.preferredUsername}` }}</small>
+          <AccountCircle v-else :size="48" />
+          <div class="flex-1">
+            <h3>{{ availableActor?.name }}</h3>
+            <small>{{ `@${availableActor?.preferredUsername}` }}</small>
           </div>
         </label>
       </li>
     </transition-group>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IPerson, IActor, Actor } from "@/types/actor";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  LOGGED_USER_MEMBERSHIPS,
-} from "@/graphql/actor";
-import { Paginate } from "@/types/paginate";
+<script lang="ts" setup>
+import { IActor } from "@/types/actor";
+import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
 import { IMember } from "@/types/actor/member.model";
 import { MemberRole } from "@/types/enums";
+import { computed, ref } from "vue";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
+import { IUser } from "@/types/current-user.model";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useQuery } from "@vue/apollo-composable";
 
-@Component({
-  apollo: {
-    groupMemberships: {
-      query: LOGGED_USER_MEMBERSHIPS,
-      update: (data) => data.loggedUser.memberships,
-      variables() {
-        return {
-          page: 1,
-          limit: 10,
-          membershipName: this.actorFilter,
-        };
-      },
-    },
-    identities: IDENTITIES,
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-})
-export default class OrganizerPicker extends Vue {
-  @Prop() value!: IActor;
+const props = withDefaults(
+  defineProps<{ modelValue: IActor; restrictModeratorLevel?: boolean }>(),
+  { restrictModeratorLevel: false }
+);
 
-  @Prop({ required: false, default: false }) restrictModeratorLevel!: boolean;
+const emit = defineEmits(["update:modelValue"]);
 
-  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+const { currentActor } = useCurrentActorClient();
+const { identities } = useCurrentUserIdentities();
 
-  currentActor!: IPerson;
+const actorFilter = ref("");
 
-  actorFilter = "";
-
-  get selectedActor(): IActor | undefined {
-    if (this.value?.id) {
-      return this.value;
+const { result: groupMembershipsResult } = useQuery<{
+  loggedUser: Pick<IUser, "memberships">;
+}>(LOGGED_USER_MEMBERSHIPS, () => ({
+  page: 1,
+  limit: 10,
+  membershipName: actorFilter.value,
+}));
+const groupMemberships = computed(
+  () =>
+    groupMembershipsResult.value?.loggedUser.memberships ?? {
+      elements: [],
+      total: 0,
     }
-    if (this.currentActor) {
-      return this.identities.find(
-        (identity) => identity.id === this.currentActor.id
+);
+
+const selectedActor = computed({
+  get(): IActor | undefined {
+    if (props.modelValue?.id) {
+      return props.modelValue;
+    }
+    if (currentActor.value) {
+      return (identities.value ?? []).find(
+        (identity) => identity.id === currentActor.value?.id
       );
     }
     return undefined;
+  },
+
+  set(actor: IActor | undefined) {
+    emit("update:modelValue", actor);
+  },
+});
+
+const actualMemberships = computed((): IMember[] => {
+  if (props.restrictModeratorLevel) {
+    return groupMemberships.value.elements.filter((membership: IMember) =>
+      [
+        MemberRole.ADMINISTRATOR,
+        MemberRole.MODERATOR,
+        MemberRole.CREATOR,
+      ].includes(membership.role)
+    );
   }
+  return groupMemberships.value.elements;
+});
 
-  set selectedActor(actor: IActor | undefined) {
-    this.$emit("input", actor);
-  }
+const actualAvailableActors = computed((): (IActor | undefined)[] => {
+  return [
+    currentActor.value,
+    ...(identities.value ?? []).filter(
+      (identity: IActor) => identity.id !== currentActor.value?.id
+    ),
+    ...actualMemberships.value.map((member) => member.parent),
+  ].filter((elem) => elem);
+});
 
-  identities: IActor[] = [];
-
-  Actor = Actor;
-
-  get actualMemberships(): IMember[] {
-    if (this.restrictModeratorLevel) {
-      return this.groupMemberships.elements.filter((membership: IMember) =>
-        [
-          MemberRole.ADMINISTRATOR,
-          MemberRole.MODERATOR,
-          MemberRole.CREATOR,
-        ].includes(membership.role)
-      );
-    }
-    return this.groupMemberships.elements;
-  }
-
-  get actualAvailableActors(): IActor[] {
+const actualFilteredAvailableActors = computed((): (IActor | undefined)[] => {
+  return (actualAvailableActors.value ?? []).filter((actor) => {
+    if (actor === undefined) return false;
     return [
-      this.currentActor,
-      ...this.identities.filter(
-        (identity: IActor) => identity.id !== this.currentActor?.id
-      ),
-      ...this.actualMemberships.map((member) => member.parent),
-    ].filter((elem) => elem);
-  }
-
-  get actualFilteredAvailableActors(): IActor[] {
-    return this.actualAvailableActors.filter((actor) => {
-      return [
-        actor.preferredUsername.toLowerCase(),
-        actor.name?.toLowerCase(),
-        actor.domain?.toLowerCase(),
-      ].some((match) => match?.includes(this.actorFilter.toLowerCase()));
-    });
-  }
-}
+      actor.preferredUsername.toLowerCase(),
+      actor.name?.toLowerCase(),
+      actor.domain?.toLowerCase(),
+    ].some((match) => match?.includes(actorFilter.value.toLowerCase()));
+  });
+});
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-::v-deep .list-item {
+:deep(.list-item) {
   box-sizing: content-box;
 
   label.b-radio {
@@ -155,14 +156,14 @@ export default class OrganizerPicker extends Vue {
       padding: 0.25rem 0;
       align-items: center;
 
-      figure.image,
-      span.icon.media-left {
-        @include margin-right(0.5rem);
-      }
+      // figure.image,
+      // span.icon.media-left {
+      //   @include margin-right(0.5rem);
+      // }
 
-      span.icon.media-left {
-        @include margin-left(-0.25rem);
-      }
+      // span.icon.media-left {
+      //   @include margin-left(-0.25rem);
+      // }
     }
   }
 }

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -1,38 +1,40 @@
 <template>
   <div
-    class="bg-white border border-gray-300 rounded-lg cursor-pointer"
+    class="bg-white dark:bg-violet-3 border border-gray-300 rounded-lg cursor-pointer"
     v-if="selectedActor"
   >
     <!-- If we have a current actor (inline) -->
     <div
       v-if="inline && selectedActor.id"
-      class="inline box"
+      class=""
       dir="auto"
       @click="isComponentModalActive = true"
     >
-      <div class="media">
-        <div class="media-left">
-          <figure class="image is-48x48" v-if="selectedActor.avatar">
+      <div class="flex gap-1 p-4">
+        <div class="">
+          <figure class="" v-if="selectedActor.avatar">
             <img
-              class="image is-rounded"
+              class="rounded"
               :src="selectedActor.avatar.url"
-              :alt="selectedActor.avatar.alt || ''"
+              :alt="selectedActor.avatar.alt ?? ''"
+              height="48"
+              width="48"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <AccountCircle v-else :size="48" />
         </div>
-        <div class="media-content" v-if="selectedActor.name">
-          <p class="is-4">{{ selectedActor.name }}</p>
-          <p class="is-6 has-text-grey-dark">
+        <div class="flex-1" v-if="selectedActor.name">
+          <p class="">{{ selectedActor.name }}</p>
+          <p class="">
             {{ `@${selectedActor.preferredUsername}` }}
           </p>
         </div>
-        <div class="media-content" v-else>
+        <div class="flex-1" v-else>
           {{ `@${selectedActor.preferredUsername}` }}
         </div>
-        <b-button type="is-text" @click="isComponentModalActive = true">
+        <o-button type="text" @click="isComponentModalActive = true">
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <!-- If we have a current actor -->
@@ -42,35 +44,37 @@
       @click="isComponentModalActive = true"
     >
       <img
-        class="image is-48x48"
+        class="rounded"
         v-if="selectedActor.avatar"
         :src="selectedActor.avatar.url"
         :alt="selectedActor.avatar.alt"
+        width="48"
+        height="48"
       />
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <AccountCircle v-else :size="48" />
     </span>
-    <b-modal
-      :active.sync="isComponentModalActive"
+    <o-modal
+      v-model:active="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
     >
-      <div class="modal-card">
-        <header class="modal-card-head">
-          <p class="modal-card-title">{{ $t("Pick a profile or a group") }}</p>
+      <div class="p-2 rounded">
+        <header class="">
+          <h2 class="">{{ $t("Pick a profile or a group") }}</h2>
         </header>
-        <section class="modal-card-body">
-          <div class="columns">
-            <div class="column actor-picker">
+        <section class="">
+          <div class="flex gap-2">
+            <div class="actor-picker">
               <organizer-picker
                 v-model="selectedActor"
                 @input="relay"
                 :restrict-moderator-level="true"
               />
             </div>
-            <div class="column contact-picker">
+            <div class="contact-picker">
               <div v-if="isSelectedActorAGroup">
                 <p>{{ $t("Add a contact") }}</p>
-                <b-input
+                <o-input
                   :placeholder="$t('Filter by name')"
                   :value="contactFilter"
                   @input="debounceSetFilterByName"
@@ -82,36 +86,34 @@
                     v-for="actor in filteredActorMembers"
                     :key="actor.id"
                   >
-                    <b-checkbox
+                    <o-checkbox
                       v-model="actualContacts"
                       :native-value="actor.id"
                     >
-                      <div class="media">
-                        <div class="media-left">
-                          <figure class="image is-48x48" v-if="actor.avatar">
+                      <div class="flex gap-1">
+                        <div class="">
+                          <figure class="" v-if="actor.avatar">
                             <img
-                              class="image is-rounded"
+                              class="rounded"
                               :src="actor.avatar.url"
                               :alt="actor.avatar.alt"
+                              width="48"
+                              height="48"
                             />
                           </figure>
-                          <b-icon
-                            v-else
-                            size="is-large"
-                            icon="account-circle"
-                          />
+                          <AccountCircle v-else :size="48" />
                         </div>
-                        <div class="media-content" v-if="actor.name">
-                          <p class="is-4">{{ actor.name }}</p>
-                          <p class="is-6 has-text-grey-dark">
+                        <div class="" v-if="actor.name">
+                          <p class="">{{ actor.name }}</p>
+                          <p class="">
                             {{ `@${usernameWithDomain(actor)}` }}
                           </p>
                         </div>
-                        <div class="media-content" v-else>
+                        <div class="" v-else>
                           {{ `@${usernameWithDomain(actor)}` }}
                         </div>
                       </div>
-                    </b-checkbox>
+                    </o-checkbox>
                   </p>
                 </div>
                 <div
@@ -124,35 +126,36 @@
                   </empty-content>
                 </div>
               </div>
-              <div v-else class="content has-text-grey-dark has-text-centered">
+              <div v-else class="">
                 <p>{{ $t("Your profile will be shown as contact.") }}</p>
               </div>
             </div>
           </div>
         </section>
-        <footer class="modal-card-foot">
-          <button class="button is-primary" type="button" @click="pickActor">
+        <footer class="">
+          <o-button variant="primary" @click="pickActor">
             {{ $t("Pick") }}
-          </button>
+          </o-button>
         </footer>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { IMember } from "@/types/actor/member.model";
-import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
+<script lang="ts" setup>
+import { IActor, IGroup, usernameWithDomain } from "../../types/actor";
 import OrganizerPicker from "./OrganizerPicker.vue";
 import EmptyContent from "../Utils/EmptyContent.vue";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  PERSON_GROUP_MEMBERSHIPS,
-} from "../../graphql/actor";
-import { Paginate } from "../../types/paginate";
+import { PERSON_GROUP_MEMBERSHIPS } from "../../graphql/actor";
 import { GROUP_MEMBERS } from "@/graphql/member";
 import { ActorType, MemberRole } from "@/types/enums";
+import { useQuery } from "@vue/apollo-composable";
+import { computed, ref, watch } from "vue";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
+import { useRoute } from "vue-router";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import debounce from "lodash/debounce";
 
 const MEMBER_ROLES = [
@@ -162,144 +165,133 @@ const MEMBER_ROLES = [
   MemberRole.MEMBER,
 ];
 
-@Component({
-  components: { OrganizerPicker, EmptyContent },
-  apollo: {
-    members: {
-      query: GROUP_MEMBERS,
-      variables() {
-        return {
-          groupName: usernameWithDomain(this.selectedActor),
-          page: this.membersPage,
-          limit: 10,
-          roles: MEMBER_ROLES.join(","),
-          name: this.contactFilter,
-        };
-      },
-      update: (data) => data.group.members,
-      skip() {
-        return (
-          !this.selectedActor || this.selectedActor.type !== ActorType.GROUP
-        );
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-    personMemberships: {
-      query: PERSON_GROUP_MEMBERSHIPS,
-      variables() {
-        return {
-          id: this.currentActor?.id,
-          page: 1,
-          limit: 10,
-          groupId: this.$route.query?.actorId,
-        };
-      },
-      update: (data) => data.person.memberships,
-    },
-    identities: IDENTITIES,
-  },
-})
-export default class OrganizerPickerWrapper extends Vue {
-  @Prop({ type: Object, required: false }) value!: IActor;
+const { currentActor } = useCurrentActorClient();
 
-  @Prop({ default: true, type: Boolean }) inline!: boolean;
+const route = useRoute();
 
-  @Prop({ type: Array, required: false, default: () => [] })
-  contacts!: IActor[];
+const { result: personMembershipsResult } = useQuery(
+  PERSON_GROUP_MEMBERSHIPS,
+  () => ({
+    id: currentActor.value?.id,
+    page: 1,
+    limit: 10,
+    groupId: route.query?.actorId,
+  })
+);
 
-  currentActor!: IPerson;
-
-  identities!: IPerson[];
-
-  isComponentModalActive = false;
-
-  contactFilter = "";
-
-  usernameWithDomain = usernameWithDomain;
-
-  members: Paginate<IMember> = { elements: [], total: 0 };
-
-  membersPage = 1;
-
-  personMemberships: Paginate<IMember> = { elements: [], total: 0 };
-
-  data(): Record<string, unknown> {
-    return {
-      debounceSetFilterByName: debounce(this.setContactFilter, 1000),
-    };
-  }
-
-  get actualContacts(): (string | undefined)[] {
-    return this.contacts.map(({ id }) => id);
-  }
-
-  set actualContacts(contactsIds: (string | undefined)[]) {
-    this.$emit(
-      "update:contacts",
-      this.actorMembers.filter(({ id }) => contactsIds.includes(id))
-    );
-  }
-
-  setContactFilter(contactFilter: string) {
-    this.contactFilter = contactFilter;
-  }
-
-  @Watch("personMemberships")
-  setInitialActor(): void {
-    if (
-      this.personMemberships?.elements[0]?.parent?.id ===
-      this.$route.query?.actorId
-    ) {
-      this.selectedActor = this.personMemberships?.elements[0]?.parent;
+const personMemberships = computed(
+  () =>
+    personMembershipsResult.value?.person.memberships ?? {
+      elements: [],
+      total: 0,
     }
-  }
+);
 
-  get selectedActor(): IActor | undefined {
-    if (this.value?.id) {
-      return this.value;
+const { identities } = useCurrentUserIdentities();
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: IActor;
+    inline?: boolean;
+    contacts?: IActor[];
+  }>(),
+  { inline: true, contacts: () => [] }
+);
+
+const emit = defineEmits(["update:modelValue", "update:Contacts"]);
+
+const selectedActor = computed({
+  get(): IActor | undefined {
+    if (props.modelValue?.id) {
+      return props.modelValue;
     }
-    if (this.currentActor) {
-      return this.identities.find(
-        (identity) => identity.id === this.currentActor.id
+    if (currentActor.value) {
+      return (identities.value ?? []).find(
+        (identity) => identity.id === currentActor.value?.id
       );
     }
     return undefined;
-  }
+  },
+  set(selectedActor: IActor | undefined) {
+    emit("update:modelValue", selectedActor);
+  },
+});
 
-  set selectedActor(selectedActor: IActor | undefined) {
-    this.$emit("input", selectedActor);
-  }
+const isComponentModalActive = ref(false);
+const contactFilter = ref("");
+const membersPage = ref(1);
 
-  async relay(group: IGroup): Promise<void> {
-    this.actualContacts = [];
-    this.selectedActor = group;
-  }
+const { result: membersResult } = useQuery(
+  GROUP_MEMBERS,
+  () => ({
+    groupName: usernameWithDomain(selectedActor.value),
+    page: membersPage.value,
+    limit: 10,
+    roles: MEMBER_ROLES.join(","),
+    name: contactFilter.value,
+  }),
+  () => ({ enabled: selectedActor.value?.type === ActorType.GROUP })
+);
 
-  pickActor(): void {
-    this.isComponentModalActive = false;
-  }
+const members = computed(
+  () => membersResult.value?.members ?? { elements: [], total: 0 }
+);
 
-  get actorMembers(): IActor[] {
-    if (this.isSelectedActorAGroup) {
-      return this.members.elements.map(({ actor }: { actor: IActor }) => actor);
-    }
-    return [];
-  }
+const actualContacts = computed({
+  get(): (string | undefined)[] {
+    return props.contacts.map(({ id }) => id);
+  },
+  set(contactsIds: (string | undefined)[]) {
+    emit(
+      "update:Contacts",
+      actorMembers.value.filter(({ id }) => contactsIds.includes(id))
+    );
+  },
+});
 
-  get filteredActorMembers(): IActor[] {
-    return this.actorMembers.filter((actor) => {
-      return [
-        actor.preferredUsername.toLowerCase(),
-        actor.name?.toLowerCase(),
-        actor.domain?.toLowerCase(),
-      ];
-    });
-  }
+const setContactFilter = (newContactFilter: string) => {
+  contactFilter.value = newContactFilter;
+};
 
-  get isSelectedActorAGroup(): boolean {
-    return this.selectedActor?.type === ActorType.GROUP;
+const debounceSetFilterByName = debounce(setContactFilter, 1000);
+
+watch(personMemberships, () => {
+  if (
+    personMemberships.value?.elements[0]?.parent?.id === route.query?.actorId
+  ) {
+    selectedActor.value = personMemberships.value?.elements[0]?.parent;
   }
-}
+});
+
+const relay = async (group: IGroup): Promise<void> => {
+  actualContacts.value = [];
+  selectedActor.value = group;
+};
+
+const pickActor = (): void => {
+  isComponentModalActive.value = false;
+};
+
+const actorMembers = computed((): IActor[] => {
+  if (isSelectedActorAGroup.value) {
+    return members.value.elements.map(({ actor }: { actor: IActor }) => actor);
+  }
+  return [];
+});
+
+const filteredActorMembers = computed((): IActor[] => {
+  return actorMembers.value.filter((actor) => {
+    return [
+      actor.preferredUsername.toLowerCase(),
+      actor.name?.toLowerCase(),
+      actor.domain?.toLowerCase(),
+    ];
+  });
+});
+
+const isSelectedActorAGroup = computed((): boolean => {
+  return selectedActor.value?.type === ActorType.GROUP;
+});
 </script>
 <style lang="scss" scoped>
 .modal-card-body .columns .column {

js/src/components/Event/ParticipationButton.story.vue

@@ -0,0 +1,114 @@
+<template>
+  <Story>
+    <Variant title="Unlogged">
+      <ParticipationButton
+        :event="event"
+        :current-actor="emptyCurrentActor"
+        :participation="undefined"
+        :identities="[]"
+      />
+    </Variant>
+    <Variant title="Basic">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="undefined"
+        :identities="identities"
+        @join-event="hstEvent('Join event', $event)"
+        @join-modal="hstEvent('Join modal', $event)"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Basic with confirmation">
+      <ParticipationButton
+        :event="{ ...event, joinOptions: EventJoinOptions.RESTRICTED }"
+        :current-actor="currentActor"
+        :participation="undefined"
+        :identities="identities"
+        @join-event-with-confirmation="
+          hstEvent('Join Event with confirmation', $event)
+        "
+        @join-modal="hstEvent('Join modal', $event)"
+      />
+    </Variant>
+    <Variant title="Participating">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="participation"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Pending approval">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="{
+          ...participation,
+          role: ParticipantRole.NOT_APPROVED,
+        }"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+    <Variant title="Rejected">
+      <ParticipationButton
+        :event="event"
+        :current-actor="currentActor"
+        :participation="{
+          ...participation,
+          role: ParticipantRole.REJECTED,
+        }"
+        :identities="identities"
+        @confirm-leave="hstEvent('Confirm leave', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { IActor, IPerson } from "@/types/actor";
+import { EventJoinOptions, ParticipantRole } from "@/types/enums";
+import { IEvent } from "@/types/event.model";
+import ParticipationButton from "./ParticipationButton.vue";
+import { hstEvent } from "histoire/client";
+import { IParticipant } from "@/types/participant.model";
+
+const emptyCurrentActor: IPerson = {};
+
+const currentActor: IPerson = {
+  id: "1",
+  preferredUsername: "tcit",
+  name: "Thomas",
+  avatar: {
+    url: "https://mobilizon.fr/media/3a5f18c058a8193b1febfaf561f94ae8b91f85ac64c01ddf5ad7b251fb43baf5.jpg?name=profil.jpg",
+  },
+};
+
+const participation: IParticipant = {
+  actor: currentActor,
+  role: ParticipantRole.PARTICIPANT,
+};
+
+const identities: IPerson[] = [
+  currentActor,
+  {
+    id: "2",
+    preferredUsername: "another",
+    name: "Another",
+    avatar: {
+      url: "https://mobilizon.fr/media/95ab5ba92287ab4857bb517cadae2a7ab6a553748d1c48cefc27e2b7ab640fea.jpg?name=FB_IMG_16150214351371162.jpg",
+    },
+  },
+];
+
+const event: IEvent = {
+  title: "hello",
+  url: "https://mobilizon.fr/events/an-uuid",
+  options: {
+    anonymousParticipation: false,
+  },
+  joinOptions: EventJoinOptions.FREE,
+};
+</script>

js/src/components/Event/ParticipationButton.vue

@@ -1,90 +1,61 @@
-import {EventJoinOptions} from "@/types/event.model";
-<docs>
-A button to set your participation
-
-##### If the participant has been confirmed
-```vue
-<ParticipationButton :participation="{ role: 'PARTICIPANT' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant has not being approved yet
-```vue
-<ParticipationButton :participation="{ role: 'NOT_APPROVED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant has been rejected
-```vue
-<ParticipationButton :participation="{ role: 'REJECTED' }" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-
-##### If the participant doesn't exist yet
-```vue
-<ParticipationButton :participation="null" :currentActor="{ preferredUsername: 'test', avatar: { url: 'https://huit.re/EPX7vs1j' } }" />
-```
-</docs>
-
 <template>
-  <div class="participation-button">
-    <b-dropdown
-      aria-role="list"
-      position="is-bottom-left"
+  <div>
+    <o-dropdown
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >
       <template #trigger="{ active }">
-        <b-button
-          type="is-success"
-          size="is-large"
+        <o-button
+          variant="success"
+          size="large"
           icon-left="check"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
-          {{ $t("I participate") }}
-        </b-button>
+          {{ t("I participate") }}
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="confirmLeave"
         @keyup.enter="confirmLeave"
-        class="has-text-danger"
-        >{{ $t("Cancel my participation…") }}</b-dropdown-item
-      >
-    </b-dropdown>
+        class=""
+        >{{ t("Cancel my participation…") }}
+      </o-dropdown-item>
+    </o-dropdown>
 
     <div
       v-else-if="
         participation && participation.role === ParticipantRole.NOT_APPROVED
       "
+      class="flex flex-col"
     >
-      <b-dropdown
-        aria-role="list"
-        position="is-bottom-left"
-        class="dropdown-disabled"
-      >
-        <button class="button is-success is-large" type="button" slot="trigger">
-          <b-icon icon="timer-sand-empty" />
-          <template>
-            <span>{{ $t("I participate") }}</span>
-          </template>
-          <b-icon icon="menu-down" />
-        </button>
+      <o-dropdown>
+        <template #trigger>
+          <o-button variant="success" size="large" type="button">
+            <template class="flex items-center">
+              <TimerSandEmpty />
+              <span>{{ t("I participate") }}</span>
+              <MenuDown />
+            </template>
+          </o-button>
+        </template>
 
-        <!--                <b-dropdown-item :value="false" aria-role="listitem">-->
-        <!--                  {{ $t('Change my identity…')}}-->
-        <!--                </b-dropdown-item>-->
+        <o-dropdown-item :value="false" aria-role="listitem">
+          {{ t("Change my identity…") }}
+        </o-dropdown-item>
 
-        <b-dropdown-item
+        <o-dropdown-item
           :value="false"
           aria-role="listitem"
           @click="confirmLeave"
           @keyup.enter="confirmLeave"
-          class="has-text-danger"
-          >{{ $t("Cancel my participation request…") }}</b-dropdown-item
+          class=""
+          >{{ t("Cancel my participation request…") }}</o-dropdown-item
         >
-      </b-dropdown>
-      <small>{{ $t("Participation requested!") }}</small>
-      <br />
-      <small>{{ $t("Waiting for organization team approval.") }}</small>
+      </o-dropdown>
+      <p>{{ t("Participation requested!") }}</p>
+      <p>{{ t("Waiting for organization team approval.") }}</p>
     </div>
 
     <div
@@ -94,63 +65,63 @@ A button to set your participation
     >
       <span>
         {{
-          $t(
+          t(
             "Unfortunately, your participation request was rejected by the organizers."
           )
         }}
       </span>
     </div>
 
-    <b-dropdown
-      aria-role="list"
-      position="is-bottom-left"
-      v-else-if="!participation && currentActor.id"
-    >
+    <o-dropdown v-else-if="!participation && currentActor?.id">
       <template #trigger="{ active }">
-        <b-button
-          type="is-primary"
-          size="is-large"
+        <o-button
+          variant="primary"
+          size="large"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
-          {{ $t("Participate") }}
-        </b-button>
+          {{ t("Participate") }}
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="true"
         aria-role="listitem"
         @click="joinEvent(currentActor)"
         @keyup.enter="joinEvent(currentActor)"
       >
-        <div class="media">
-          <div class="media-left" v-if="currentActor.avatar">
-            <figure class="image is-32x32">
-              <img class="is-rounded" :src="currentActor.avatar.url" alt />
-            </figure>
-          </div>
-          <div class="media-content">
+        <div class="flex gap-2 items-center">
+          <figure class="" v-if="currentActor?.avatar">
+            <img
+              class="rounded-xl"
+              :src="currentActor.avatar.url"
+              alt=""
+              width="24"
+              height="24"
+            />
+          </figure>
+          <AccountCircle v-else />
+          <div class="">
             <span>
               {{
-                $t("as {identity}", {
-                  identity:
-                    currentActor.name || `@${currentActor.preferredUsername}`,
+                t("as {identity}", {
+                  identity: displayName(currentActor),
                 })
               }}
             </span>
           </div>
         </div>
-      </b-dropdown-item>
+      </o-dropdown-item>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="joinModal"
         @keyup.enter="joinModal"
-        v-if="identities.length > 1"
-        >{{ $t("with another identity…") }}</b-dropdown-item
+        v-if="(identities ?? []).length > 1"
+        >{{ t("with another identity…") }}</o-dropdown-item
       >
-    </b-dropdown>
-    <b-button
+    </o-dropdown>
+    <o-button
       rel="nofollow"
       tag="router-link"
       :to="{
@@ -158,110 +129,72 @@ A button to set your participation
         params: { uuid: event.uuid },
       }"
       v-else-if="!participation && hasAnonymousParticipationMethods"
-      type="is-primary"
-      size="is-large"
+      variant="primary"
+      size="large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ t("Participate") }}</o-button
     >
-    <b-button
+    <o-button
       tag="router-link"
       rel="nofollow"
       :to="{
         name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
         params: { uuid: event.uuid },
       }"
-      v-else-if="!currentActor.id"
-      type="is-primary"
-      size="is-large"
+      v-else-if="!currentActor?.id"
+      variant="primary"
+      size="large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ t("Participate") }}</o-button
     >
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import { IParticipant } from "../../types/participant.model";
 import { IEvent } from "../../types/event.model";
-import { IPerson, Person } from "../../types/actor";
-import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
-import { CURRENT_USER_CLIENT } from "../../graphql/user";
-import { CONFIG } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
+import { IPerson, displayName } from "../../types/actor";
 import RouteName from "../../router/name";
+import { computed } from "vue";
+import MenuDown from "vue-material-design-icons/MenuDown.vue";
+import { useI18n } from "vue-i18n";
+import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import TimerSandEmpty from "vue-material-design-icons/TimerSandEmpty.vue";
 
-@Component({
-  apollo: {
-    currentUser: {
-      query: CURRENT_USER_CLIENT,
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-    config: CONFIG,
-    identities: {
-      query: IDENTITIES,
-      update: ({ identities }) =>
-        identities
-          ? identities.map((identity: IPerson) => new Person(identity))
-          : [],
-      skip() {
-        return this.currentUser.isLoggedIn === false;
-      },
-    },
-  },
-})
-export default class ParticipationButton extends Vue {
-  @Prop({ required: true }) participation!: IParticipant;
+const props = defineProps<{
+  participation: IParticipant | undefined;
+  event: IEvent;
+  currentActor: IPerson;
+  identities: IPerson[];
+}>();
 
-  @Prop({ required: true }) event!: IEvent;
+const emit = defineEmits([
+  "join-event-with-confirmation",
+  "join-event",
+  "join-modal",
+  "confirm-leave",
+]);
 
-  @Prop({ required: true }) currentActor!: IPerson;
+const { t } = useI18n({ useScope: "global" });
 
-  ParticipantRole = ParticipantRole;
-
-  identities: IPerson[] = [];
-
-  config!: IConfig;
-
-  RouteName = RouteName;
-
-  joinEvent(actor: IPerson): void {
-    if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
-      this.$emit("join-event-with-confirmation", actor);
-    } else {
-      this.$emit("join-event", actor);
-    }
+const joinEvent = (actor: IPerson | undefined): void => {
+  if (props.event.joinOptions === EventJoinOptions.RESTRICTED) {
+    emit("join-event-with-confirmation", actor);
+  } else {
+    emit("join-event", actor);
   }
+};
 
-  joinModal(): void {
-    this.$emit("join-modal");
-  }
+const joinModal = (): void => {
+  emit("join-modal");
+};
 
-  confirmLeave(): void {
-    this.$emit("confirm-leave");
-  }
+const confirmLeave = (): void => {
+  emit("confirm-leave");
+};
 
-  get hasAnonymousParticipationMethods(): boolean {
-    return this.event.options.anonymousParticipation;
-  }
-}
+const hasAnonymousParticipationMethods = computed((): boolean => {
+  return props.event.options.anonymousParticipation;
+});
 </script>
-
-<style lang="scss" scoped>
-.participation-button {
-  .dropdown {
-    display: flex;
-    justify-content: flex-end;
-
-    &.dropdown-disabled button {
-      opacity: 0.5;
-    }
-  }
-}
-
-.anonymousParticipationModal {
-  ::v-deep .animation-content {
-    z-index: 1;
-  }
-}
-</style>

js/src/components/Event/RecentEventCardWrapper.vue

@@ -2,8 +2,8 @@
   <div>
     <p class="time">
       {{
-        formatDistanceToNow(new Date(event.publishAt || event.insertedAt), {
-          locale: $dateFnsLocale,
+        formatDistanceToNow(new Date(event.publishAt), {
+          locale: dateFnsLocale,
           addSuffix: true,
         }) || $t("Right now")
       }}
@@ -11,22 +11,16 @@
     <EventCard :event="event" />
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IEvent } from "@/types/event.model";
 import { formatDistanceToNow } from "date-fns";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { inject } from "vue";
 import EventCard from "./EventCard.vue";
+defineProps<{
+  event: IEvent;
+}>();
 
-@Component({
-  components: {
-    EventCard,
-  },
-})
-export default class RecentEventCardWrapper extends Vue {
-  @Prop({ required: true, type: Object }) event!: IEvent;
-
-  formatDistanceToNow = formatDistanceToNow;
-}
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
 <style lang="scss" scoped>
 p.time {

js/src/components/Event/ShareEventModal.story.vue

@@ -0,0 +1,29 @@
+<template>
+  <Story>
+    <Variant title="Public">
+      <ShareEventModal :event="event" />
+    </Variant>
+    <Variant title="Private">
+      <ShareEventModal
+        :event="{ ...event, visibility: EventVisibility.PRIVATE }"
+      />
+    </Variant>
+    <Variant title="Cancelled">
+      <ShareEventModal :event="{ ...event, status: EventStatus.CANCELLED }" />
+    </Variant>
+    <Variant title="No seats left">
+      <ShareEventModal :event="event" :event-capacity-o-k="false" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { EventVisibility, EventStatus } from "@/types/enums";
+import ShareEventModal from "./ShareEventModal.vue";
+
+const event = {
+  title: "hello",
+  url: "https://mobilizon.fr/events/an-uuid",
+  visibility: EventVisibility.PUBLIC,
+};
+</script>

js/src/components/Event/ShareEventModal.vue

@@ -1,220 +1,49 @@
 <template>
-  <div class="modal-card">
-    <header class="modal-card-head">
-      <p class="modal-card-title">{{ $t("Share this event") }}</p>
-    </header>
-
-    <section class="modal-card-body is-flex" v-if="event">
-      <div class="container has-text-centered">
-        <b-notification
-          type="is-warning"
-          v-if="event.visibility !== EventVisibility.PUBLIC"
-          :closable="false"
-        >
-          {{
-            $t(
-              "This event is accessible only through it's link. Be careful where you post this link."
-            )
-          }}
-        </b-notification>
-        <b-notification
-          type="is-danger"
-          v-if="event.status === EventStatus.CANCELLED"
-          :closable="false"
-        >
-          {{ $t("This event has been cancelled.") }}
-        </b-notification>
-        <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
-          {{ $t("All the places have already been taken") }}
-        </small>
-        <b-field :label="$t('Event URL')" label-for="event-url-text">
-          <b-input
-            id="event-url-text"
-            ref="eventURLInput"
-            :value="event.url"
-            expanded
-          />
-          <p class="control">
-            <b-tooltip
-              :label="$t('URL copied to clipboard')"
-              :active="showCopiedTooltip"
-              always
-              type="is-success"
-              position="is-left"
-            >
-              <b-button
-                type="is-primary"
-                icon-right="content-paste"
-                native-type="button"
-                @click="copyURL"
-                @keyup.enter="copyURL"
-                :title="$t('Copy URL to clipboard')"
-              />
-            </b-tooltip>
-          </p>
-        </b-field>
-        <div>
-          <a
-            :href="twitterShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="mastodonShareUrl"
-            class="mastodon"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Mastodon"
-          >
-            <mastodon-logo />
-          </a>
-          <a
-            :href="facebookShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="whatsAppShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="telegramShareUrl"
-            class="telegram"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Telegram"
-          >
-            <telegram-logo />
-          </a>
-          <a
-            :href="linkedInShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
-          /></a>
-          <a
-            :href="diasporaShareUrl"
-            class="diaspora"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Diaspora"
-          >
-            <diaspora-logo />
-          </a>
-          <a
-            :href="emailShareUrl"
-            target="_blank"
-            rel="nofollow noopener"
-            title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
-          /></a>
-        </div>
-      </div>
-    </section>
+  <div class="dark:text-white">
+    <ShareModal
+      :title="t('Share this event')"
+      :text="event.title"
+      :url="event.url"
+      :input-label="t('Event URL')"
+    >
+      <o-notification
+        variant="warning"
+        v-if="event.visibility !== EventVisibility.PUBLIC"
+        :closable="false"
+      >
+        {{
+          $t(
+            "This event is accessible only through it's link. Be careful where you post this link."
+          )
+        }}
+      </o-notification>
+      <o-notification
+        variant="danger"
+        v-if="event.status === EventStatus.CANCELLED"
+        :closable="false"
+      >
+        {{ $t("This event has been cancelled.") }}
+      </o-notification>
+      <o-notification variant="warning" v-if="!eventCapacityOK">
+        {{ $t("All the places have already been taken") }}
+      </o-notification>
+    </ShareModal>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+<script lang="ts" setup>
 import { EventStatus, EventVisibility } from "@/types/enums";
-import { IEvent } from "../../types/event.model";
-import DiasporaLogo from "../Share/DiasporaLogo.vue";
-import MastodonLogo from "../Share/MastodonLogo.vue";
-import TelegramLogo from "../Share/TelegramLogo.vue";
+import { useI18n } from "vue-i18n";
+import { IEvent } from "@/types/event.model";
+import ShareModal from "@/components/Share/ShareModal.vue";
 
-@Component({
-  components: {
-    DiasporaLogo,
-    MastodonLogo,
-    TelegramLogo,
-  },
-})
-export default class ShareEventModal extends Vue {
-  @Prop({ type: Object, required: true }) event!: IEvent;
+const props = withDefaults(
+  defineProps<{
+    event: IEvent;
+    eventCapacityOK?: boolean;
+  }>(),
+  { eventCapacityOK: true }
+);
 
-  @Prop({ type: Boolean, required: false, default: true })
-  eventCapacityOK!: boolean;
-
-  @Ref("eventURLInput") readonly eventURLInput!: any;
-
-  EventVisibility = EventVisibility;
-
-  EventStatus = EventStatus;
-
-  showCopiedTooltip = false;
-
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.event.url
-    )}&text=${this.event.title}`;
-  }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-      this.event.url
-    )}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.event.url
-    )}&title=${this.event.title}`;
-  }
-
-  get whatsAppShareUrl(): string {
-    return `https://wa.me/?text=${encodeURIComponent(this.basicTextToEncode)}`;
-  }
-
-  get telegramShareUrl(): string {
-    return `https://t.me/share/url?url=${encodeURIComponent(
-      this.event.url
-    )}&text=${encodeURIComponent(this.event.title)}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.event.url}&subject=${this.event.title}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      this.event.title
-    )}&url=${encodeURIComponent(this.event.url)}`;
-  }
-
-  get mastodonShareUrl(): string {
-    return `https://toot.kytta.dev/?text=${encodeURIComponent(
-      this.basicTextToEncode
-    )}`;
-  }
-
-  get basicTextToEncode(): string {
-    return `${this.event.title}\r\n${this.event.url}`;
-  }
-
-  copyURL(): void {
-    this.eventURLInput.$refs.input.select();
-    document.execCommand("copy");
-    this.showCopiedTooltip = true;
-    setTimeout(() => {
-      this.showCopiedTooltip = false;
-    }, 2000);
-  }
-}
+const { t } = useI18n({ useScope: "global" });
 </script>
-<style lang="scss" scoped>
-.diaspora,
-.mastodon,
-.telegram {
-  ::v-deep span svg {
-    width: 2.25rem;
-  }
-}
-</style>

js/src/components/Event/SkeletonEventResult.story.vue

@@ -0,0 +1,17 @@
+<template>
+  <Story>
+    <Variant title="row">
+      <SkeletonEventResult />
+    </Variant>
+    <Variant title="column">
+      <SkeletonEventResult view-mode="column" />
+    </Variant>
+    <Variant title="not minimal">
+      <SkeletonEventResult :minimal="false" />
+    </Variant>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import SkeletonEventResult from "./SkeletonEventResult.vue";
+</script>

js/src/components/Event/SkeletonEventResult.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    :class="`bg-white dark:bg-slate-800 shadow rounded-md ${
+      isRowMode ? 'max-w-4xl' : 'max-w-sm'
+    } w-full mx-auto`"
+  >
+    <div
+      :class="`animate-pulse flex flex-col items-center ${
+        isRowMode ? 'md:flex-row' : 'md:flex-col'
+      }`"
+    >
+      <div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700" />
+
+      <div
+        class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"
+      >
+        <span class="h-2 bg-slate-700"></span>
+        <span class="mb-2 h-4 bg-slate-700"></span>
+
+        <div class="flex space-x-4 flex-row">
+          <div class="rounded-full bg-slate-700 h-10 w-10"></div>
+          <div class="flex flex-col flex-1 space-y-2">
+            <div class="h-3 bg-slate-700"></div>
+            <div class="h-2 bg-slate-700"></div>
+          </div>
+        </div>
+        <div class="h-3 bg-slate-700 mt-3 w-60" v-if="!minimal"></div>
+        <div class="flex" v-if="!minimal">
+          <div
+            class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"
+            v-for="i in 3"
+            :key="i"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+const props = withDefaults(
+  defineProps<{
+    viewMode?: string;
+    minimal?: boolean;
+  }>(),
+  { viewMode: "row", minimal: true }
+);
+
+const isRowMode = computed<boolean>(() => props.viewMode == "row");
+</script>

js/src/components/Event/TagInput.story.vue

@@ -0,0 +1,23 @@
+<template>
+  <Story>
+    <Variant title="new">
+      <TagInput v-model="tags" :fetch-tags="fetchTags" />
+    </Variant>
+    <!-- <Variant title="small">
+      <TagInput v-model="tags" />
+    </Variant> -->
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { ITag } from "@/types/tag.model";
+import { reactive } from "vue";
+import TagInput from "./TagInput.vue";
+
+const tags = reactive<ITag[]>([{ title: "Hello", slug: "hello" }]);
+
+const fetchTags = async (text: string) =>
+  new Promise<ITag[]>((resolve, reject) => {
+    resolve([{ title: "Welcome", slug: "welcome" }]);
+  });
+</script>

js/src/components/Event/TagInput.vue

@@ -1,104 +1,91 @@
 <template>
-  <b-field :label-for="id">
-    <template slot="label">
+  <o-field :label-for="id">
+    <template #label>
       {{ $t("Add some tags") }}
-      <b-tooltip
-        type="is-dark"
+      <o-tooltip
+        type="dark"
         :label="
           $t('You can add tags by hitting the Enter key or by adding a comma')
         "
       >
-        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
-      </b-tooltip>
+        <HelpCircleOutline :size="16" />
+      </o-tooltip>
     </template>
-    <b-taginput
+    <o-inputitems
       v-model="tagsStrings"
       :data="filteredTags"
-      autocomplete
+      :autocomplete="true"
       :allow-new="true"
       :field="'title'"
       icon="label"
-      maxlength="20"
-      maxtags="10"
+      :maxlength="20"
+      :maxitems="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
       @typing="debouncedGetFilteredTags"
       :id="id"
       dir="auto"
     >
-    </b-taginput>
-  </b-field>
+    </o-inputitems>
+  </o-field>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import differenceBy from "lodash/differenceBy";
 import { ITag } from "../../types/tag.model";
-import { FILTER_TAGS } from "@/graphql/tags";
 import debounce from "lodash/debounce";
+import { computed, onBeforeMount, ref } from "vue";
+import HelpCircleOutline from "vue-material-design-icons/HelpCircleOutline.vue";
 
-@Component({
-  apollo: {
-    tags: {
-      query: FILTER_TAGS,
-      variables() {
-        return {
-          filter: this.text,
-        };
-      },
-    },
+const props = defineProps<{
+  modelValue: ITag[];
+  fetchTags: (text: string) => Promise<ITag[]>;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const text = ref("");
+
+const tags = ref<ITag[]>([]);
+
+let componentId = 0;
+
+onBeforeMount(() => {
+  componentId += 1;
+});
+
+const id = computed((): string => {
+  return `tag-input-${componentId}`;
+});
+
+const getFilteredTags = async (newText: string): Promise<void> => {
+  text.value = newText;
+  tags.value = await props.fetchTags(newText);
+};
+
+const debouncedGetFilteredTags = debounce(getFilteredTags, 200);
+
+const filteredTags = computed((): ITag[] => {
+  return differenceBy(tags.value, props.modelValue, "id").filter(
+    (option) =>
+      option.title.toString().toLowerCase().indexOf(text.value.toLowerCase()) >=
+        0 ||
+      option.slug.toString().toLowerCase().indexOf(text.value.toLowerCase()) >=
+        0
+  );
+});
+
+const tagsStrings = computed({
+  get(): string[] {
+    return props.modelValue.map((tag: ITag) => tag.title);
   },
-})
-export default class TagInput extends Vue {
-  @Prop({ required: true }) value!: ITag[];
-
-  tags!: ITag[];
-
-  text = "";
-
-  private static componentId = 0;
-
-  created(): void {
-    TagInput.componentId += 1;
-  }
-
-  get id(): string {
-    return `tag-input-${TagInput.componentId}`;
-  }
-
-  data(): Record<string, unknown> {
-    return {
-      debouncedGetFilteredTags: debounce(this.getFilteredTags, 200),
-    };
-  }
-
-  async getFilteredTags(text: string): Promise<void> {
-    this.text = text;
-    await this.$apollo.queries.tags.refetch();
-  }
-
-  get filteredTags(): ITag[] {
-    return differenceBy(this.tags, this.value, "id").filter(
-      (option) =>
-        option.title
-          .toString()
-          .toLowerCase()
-          .indexOf(this.text.toLowerCase()) >= 0 ||
-        option.slug.toString().toLowerCase().indexOf(this.text.toLowerCase()) >=
-          0
-    );
-  }
-
-  get tagsStrings(): string[] {
-    return (this.value || []).map((tag: ITag) => tag.title);
-  }
-
-  set tagsStrings(tagsStrings: string[]) {
+  set(tagsStrings: string[]) {
+    console.debug("tagsStrings", tagsStrings);
     const tagEntities = tagsStrings.map((tag: string | ITag) => {
       if (typeof tag !== "string") {
         return tag;
       }
       return { title: tag, slug: tag } as ITag;
     });
-    this.$emit("input", tagEntities);
-  }
-}
+    emit("update:modelValue", tagEntities);
+  },
+});
 </script>