Migrate to Vue 3 and Vite

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

js/src/components/Address/AddressInfo.story.vue

@@ -0,0 +1,31 @@
+<template>
+  <Story>
+    <Variant title="Basic">
+      <AddressInfo :address="address" />
+    </Variant>
+
+    <Variant title="Basic with timezone">
+      <AddressInfo
+        :address="address"
+        :show-timezone="true"
+        :user-timezone="'Europe/Berlin'"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { reactive } from "vue";
+import AddressInfo from "./AddressInfo.vue";
+
+const address = reactive<IAddress>({
+  description: "Locaux Motiv",
+  street: "10 Rue Jangot",
+  locality: "Lyon",
+  postalCode: "69007",
+  region: "Auvergne Rhône-Alpes",
+  country: "France",
+  type: "",
+  timezone: "Europe/Dublin",
+});
+</script>

js/src/components/Address/AddressInfo.vue

@@ -1,22 +1,22 @@
 <template>
   <address dir="auto">
-    <b-icon
+    <o-icon
       v-if="showIcon"
-      :icon="address.poiInfos.poiIcon.icon"
+      :icon="poiInfos?.poiIcon.icon"
       size="is-medium"
       class="icon"
     />
     <p>
       <span
         class="addressDescription"
-        :title="address.poiInfos.name"
-        v-if="address.poiInfos.name"
+        :title="poiInfos.name"
+        v-if="poiInfos?.name"
       >
-        {{ address.poiInfos.name }}
+        {{ poiInfos.name }}
       </span>
-      <br v-if="address.poiInfos.name" />
-      <span class="has-text-grey-dark">
-        {{ address.poiInfos.alternativeName }}
+      <br v-if="poiInfos?.name" />
+      <span>
+        {{ poiInfos?.alternativeName }}
       </span>
       <br />
       <small
@@ -25,7 +25,6 @@
           longShortTimezoneNamesDifferent &&
           timezoneLongNameValid
         "
-        class="has-text-grey-dark"
       >
         🌐
         {{
@@ -35,72 +34,75 @@
           })
         }}
       </small>
-      <small v-else-if="userTimezoneDifferent" class="has-text-grey-dark">
+      <small v-else-if="userTimezoneDifferent" class="">
         🌐 {{ timezoneShortName }}
       </small>
     </p>
   </address>
 </template>
-<script lang="ts">
-import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
+import { addressToPoiInfos, IAddress } from "@/types/address.model";
+import { computed } from "vue";
 
-@Component
-export default class AddressInfo extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  address!: IAddress;
-
-  @Prop({ required: false, default: false, type: Boolean }) showIcon!: boolean;
-  @Prop({ required: false, default: false, type: Boolean })
-  showTimezone!: boolean;
-  @Prop({ required: false, type: String }) userTimezone!: string;
-
-  get userTimezoneDifferent(): boolean {
-    return (
-      this.userTimezone != undefined &&
-      this.address.timezone != undefined &&
-      this.userTimezone !== this.address.timezone
-    );
+const props = withDefaults(
+  defineProps<{
+    address: IAddress;
+    showIcon?: boolean;
+    showTimezone?: boolean;
+    userTimezone?: string;
+  }>(),
+  {
+    showIcon: false,
+    showTimezone: false,
   }
+);
 
-  get longShortTimezoneNamesDifferent(): boolean {
-    return (
-      this.timezoneLongName != undefined &&
-      this.timezoneShortName != undefined &&
-      this.timezoneLongName !== this.timezoneShortName
-    );
-  }
+const poiInfos = computed(() => addressToPoiInfos(props.address));
 
-  get timezoneLongName(): string | undefined {
-    return this.timezoneName("long");
-  }
+const userTimezoneDifferent = computed((): boolean => {
+  return (
+    props.userTimezone != undefined &&
+    props.address.timezone != undefined &&
+    props.userTimezone !== props.address.timezone
+  );
+});
 
-  get timezoneShortName(): string | undefined {
-    return this.timezoneName("short");
-  }
+const longShortTimezoneNamesDifferent = computed((): boolean => {
+  return (
+    timezoneLongName.value != undefined &&
+    timezoneShortName.value != undefined &&
+    timezoneLongName.value !== timezoneShortName.value
+  );
+});
 
-  get timezoneLongNameValid(): boolean {
-    return (
-      this.timezoneLongName != undefined && !this.timezoneLongName.match(/UTC/)
-    );
-  }
+const timezoneLongName = computed((): string | undefined => {
+  return timezoneName("long");
+});
 
-  private timezoneName(format: "long" | "short"): string | undefined {
-    return this.extractTimezone(
-      new Intl.DateTimeFormat(undefined, {
-        timeZoneName: format,
-        timeZone: this.address.timezone,
-      }).formatToParts()
-    );
-  }
+const timezoneShortName = computed((): string | undefined => {
+  return timezoneName("short");
+});
 
-  private extractTimezone(
-    parts: Intl.DateTimeFormatPart[]
-  ): string | undefined {
-    return parts.find((part) => part.type === "timeZoneName")?.value;
-  }
-}
+const timezoneLongNameValid = computed((): boolean => {
+  return (
+    timezoneLongName.value != undefined && !timezoneLongName.value.match(/UTC/)
+  );
+});
+
+const timezoneName = (format: "long" | "short"): string | undefined => {
+  return extractTimezone(
+    new Intl.DateTimeFormat(undefined, {
+      timeZoneName: format,
+      timeZone: props.address.timezone,
+    }).formatToParts()
+  );
+};
+
+const extractTimezone = (
+  parts: Intl.DateTimeFormatPart[]
+): string | undefined => {
+  return parts.find((part) => part.type === "timeZoneName")?.value;
+};
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;

js/src/components/Address/InlineAddress.story.vue

@@ -0,0 +1,27 @@
+<template>
+  <Story>
+    <Variant title="with locality">
+      <InlineAddress :physicalAddress="address" />
+    </Variant>
+
+    <Variant title="without locality">
+      <InlineAddress :physicalAddress="{ ...address, locality: null }" />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { reactive } from "vue";
+import InlineAddress from "./InlineAddress.vue";
+
+const address = reactive<IAddress>({
+  description: "Locaux Motiv",
+  street: "10 Rue Jangot",
+  locality: "Lyon",
+  postalCode: "69007",
+  region: "Auvergne Rhône-Alpes",
+  country: "France",
+  type: "",
+  timezone: "Europe/Dublin",
+});
+</script>

js/src/components/Address/InlineAddress.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    class="truncate"
+    class="truncate flex gap-1"
+    dir="auto"
     :title="
       isDescriptionDifferentFromLocality
         ? `${physicalAddress.description}, ${physicalAddress.locality}`
         : physicalAddress.description
     "
   >
-    <b-icon icon="map-marker" />
+    <MapMarker />
     <span v-if="physicalAddress.locality">
       {{ physicalAddress.locality }}
     </span>
@@ -16,21 +17,19 @@
     </span>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { IAddress } from "@/types/address.model";
-import { PropType } from "vue";
-import { Prop, Vue, Component } from "vue-property-decorator";
+import MapMarker from "vue-material-design-icons/MapMarker.vue";
+import { computed } from "vue";
 
-@Component
-export default class InlineAddress extends Vue {
-  @Prop({ required: true, type: Object as PropType<IAddress> })
-  physicalAddress!: IAddress;
+const props = defineProps<{
+  physicalAddress: IAddress;
+}>();
 
-  get isDescriptionDifferentFromLocality(): boolean {
-    return (
-      this.physicalAddress?.description !== this.physicalAddress?.locality &&
-      this.physicalAddress?.description !== undefined
-    );
-  }
-}
+const isDescriptionDifferentFromLocality = computed<boolean>(() => {
+  return (
+    props.physicalAddress?.description !== props.physicalAddress?.locality &&
+    props.physicalAddress?.description !== undefined
+  );
+});
 </script>