Migrate to Vue 3 and Vite

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

js/src/plugins/dateFns.ts

@@ -1,17 +1,23 @@
-import Locale from "date-fns";
-import VueInstance from "vue";
+import type { Locale } from "date-fns";
+import { App } from "vue";
 
-declare module "vue/types/vue" {
-  interface Vue {
-    $dateFnsLocale: Locale;
-  }
-}
+export const dateFnsPlugin = {
+  install(app: App, options: { locale: string }) {
+    function dateFnsfileForLanguage(lang: string) {
+      const matches: Record<string, string> = {
+        en_US: "en-US",
+        en: "en-US",
+      };
+      return matches[lang] ?? lang;
+    }
 
-export function DateFnsPlugin(
-  vue: typeof VueInstance,
-  { locale }: { locale: string }
-): void {
-  import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => {
-    VueInstance.prototype.$dateFnsLocale = localeEntity;
-  });
-}
+    import(
+      `../../node_modules/date-fns/esm/locale/${dateFnsfileForLanguage(
+        options.locale
+      )}/index.js`
+    ).then((localeEntity: { default: Locale }) => {
+      app.provide("dateFnsLocale", localeEntity.default);
+      app.config.globalProperties.$dateFnsLocale = localeEntity.default;
+    });
+  },
+};

js/src/plugins/dialog.ts

@@ -0,0 +1,99 @@
+import DialogComponent from "@/components/core/Dialog.vue";
+import { App } from "vue";
+
+export class Dialog {
+  private app: App;
+
+  constructor(app: App) {
+    this.app = app;
+  }
+
+  prompt({
+    title,
+    message,
+    confirmText,
+    cancelText,
+    type,
+    hasIcon,
+    size,
+    onConfirm,
+    onCancel,
+    inputAttrs,
+    variant,
+  }: {
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    type?: string;
+    hasIcon?: boolean;
+    size?: string;
+    onConfirm?: (prompt: string) => void;
+    onCancel?: (source: string) => void;
+    inputAttrs: Record<string, any>;
+    variant?: string;
+  }) {
+    this.app.config.globalProperties.$oruga.modal.open({
+      component: DialogComponent,
+      props: {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        type,
+        hasIcon,
+        size,
+        onConfirm,
+        onCancel,
+        inputAttrs,
+        variant,
+      },
+    });
+  }
+
+  confirm({
+    title,
+    message,
+    confirmText,
+    cancelText,
+    type,
+    hasIcon,
+    size,
+    onConfirm,
+    onCancel,
+  }: {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    type: string;
+    hasIcon?: boolean;
+    size?: string;
+    onConfirm: () => any;
+    onCancel?: (source: string) => any;
+  }) {
+    console.debug("confirming something");
+    this.app.config.globalProperties.$oruga.modal.open({
+      component: DialogComponent,
+      props: {
+        title,
+        message,
+        confirmText,
+        cancelText,
+        type,
+        hasIcon,
+        size,
+        onConfirm,
+        onCancel,
+      },
+    });
+  }
+}
+
+export const dialogPlugin = {
+  install(app: App) {
+    const dialog = new Dialog(app);
+    app.config.globalProperties.$dialog = dialog;
+    app.provide("dialog", dialog);
+  },
+};

js/src/plugins/notifier.ts

@@ -1,40 +1,10 @@
-/* eslint-disable no-shadow */
-import VueInstance from "vue";
-import { ColorModifiers } from "buefy/types/helpers.d";
-import { Route, RawLocation } from "vue-router";
-
-declare module "vue/types/vue" {
-  interface Vue {
-    $notifier: {
-      success: (message: string) => void;
-      error: (message: string) => void;
-      info: (message: string) => void;
-    };
-    beforeRouteEnter?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteLeave?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteUpdate?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-  }
-}
+import { App } from "vue";
 
 export class Notifier {
-  private readonly vue: typeof VueInstance;
+  private app: App;
 
-  constructor(vue: typeof VueInstance) {
-    this.vue = vue;
+  constructor(app: App) {
+    this.app = app;
   }
 
   success(message: string): void {
@@ -49,8 +19,8 @@ export class Notifier {
     this.notification(message, "is-info");
   }
 
-  private notification(message: string, type: ColorModifiers) {
-    this.vue.prototype.$buefy.notification.open({
+  private notification(message: string, type: string) {
+    this.app.config.globalProperties.$oruga.notification.open({
       message,
       duration: 5000,
       position: "is-bottom-right",
@@ -60,7 +30,10 @@ export class Notifier {
   }
 }
 
-/* eslint-disable */
-export function NotifierPlugin(vue: typeof VueInstance): void {
-  vue.prototype.$notifier = new Notifier(vue);
-}
+export const notifierPlugin = {
+  install(app: App) {
+    const notifier = new Notifier(app);
+    app.config.globalProperties.$notifier = notifier;
+    app.provide("notifier", notifier);
+  },
+};

js/src/plugins/snackbar.ts

@@ -0,0 +1,55 @@
+import SnackbarComponent from "@/components/core/Snackbar.vue";
+import { App } from "vue";
+
+export class Snackbar {
+  private app: App;
+
+  constructor(app: App) {
+    this.app = app;
+  }
+
+  open({
+    message,
+    queue,
+    indefinite,
+    variant,
+    position,
+    actionText,
+    cancelText,
+    onAction,
+  }: {
+    message?: string;
+    queue?: boolean;
+    indefinite?: boolean;
+    variant?: string;
+    position?: string;
+    actionText?: string;
+    cancelText?: string;
+    onAction?: () => any;
+  }) {
+    this.app.config.globalProperties.$oruga.notification.open({
+      component: SnackbarComponent,
+      props: {
+        message,
+        // queue,
+        // indefinite,
+        actionText,
+        cancelText,
+        onAction,
+        position: position ?? "bottom-right",
+        variant: variant ?? "dark",
+      },
+      position: position ?? "bottom-right",
+      variant: variant ?? "dark",
+      duration: 5000000,
+    });
+  }
+}
+
+export const snackbarPlugin = {
+  install(app: App) {
+    const snackbar = new Snackbar(app);
+    app.config.globalProperties.$snackbar = snackbar;
+    app.provide("snackbar", snackbar);
+  },
+};