ダイアログをQuasarのものに置き換える

package.json

@@ -64,7 +64,7 @@
     "shlex": "2.1.2",
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
-    "vue": "3.4.26",
+    "vue": "3.5.11",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "zod": "3.22.4"
@@ -99,7 +99,7 @@
     "@typescript-eslint/parser": "7.15.0",
     "@typescript-eslint/types": "7.15.0",
     "@typescript-eslint/utils": "7.15.0",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "5.1.4",
     "@vitest/browser": "2.1.2",
     "@vitest/ui": "2.1.2",
     "@voicevox/eslint-plugin": "file:./eslint-plugin",
@@ -128,12 +128,12 @@
     "ts-node": "10.9.1",
     "typescript": "5.5.2",
     "vite": "5.3.2",
-    "vite-plugin-checker": "0.7.0",
+    "vite-plugin-checker": "0.8.0",
     "vite-plugin-electron": "0.28.4",
     "vite-plugin-node-polyfills": "0.21.0",
     "vite-tsconfig-paths": "4.2.1",
     "vitest": "2.1.2",
-    "vue-tsc": "2.0.24",
+    "vue-tsc": "2.1.6",
     "yargs": "17.2.1"
   }
 }

src/backend/browser/sandbox.ts

@@ -7,7 +7,6 @@ import {
   writeFileImpl,
 } from "./fileImpl";
 import { getConfigManager } from "./browserConfig";
-
 import { IpcSOData } from "@/type/ipc";
 import {
   defaultHotkeySettings,
@@ -142,30 +141,6 @@ export const api: Sandbox = {
       ],
     });
   },
-  showMessageDialog(obj: {
-    type: "none" | "info" | "error" | "question" | "warning";
-    title: string;
-    message: string;
-  }) {
-    window.alert(`${obj.title}\n${obj.message}`);
-    // NOTE: どの呼び出し元も、return valueを使用していないので雑に対応している
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return Promise.resolve({} as any);
-  },
-  showQuestionDialog(obj: {
-    type: "none" | "info" | "error" | "question" | "warning";
-    title: string;
-    message: string;
-    buttons: string[];
-    cancelId?: number;
-    defaultId?: number;
-  }) {
-    // FIXME
-    // TODO: 例えば動的にdialog要素をDOMに生成して、それを表示させるみたいのはあるかもしれない
-    throw new Error(
-      `Not implemented: showQuestionDialog, request: ${JSON.stringify(obj)}`,
-    );
-  },
   async showImportFileDialog(obj: {
     name?: string;
     extensions?: string[];

src/backend/electron/main.ts

@@ -605,33 +605,6 @@ registerIpcMainHandle<IpcMainHandle>({
     return result.filePaths;
   },
 
-  SHOW_MESSAGE_DIALOG: (_, { type, title, message }) => {
-    return dialog.showMessageBox(win, {
-      type,
-      title,
-      message,
-    });
-  },
-
-  SHOW_QUESTION_DIALOG: (
-    _,
-    { type, title, message, buttons, cancelId, defaultId },
-  ) => {
-    return dialog
-      .showMessageBox(win, {
-        type,
-        buttons,
-        title,
-        message,
-        noLink: true,
-        cancelId,
-        defaultId,
-      })
-      .then((value) => {
-        return value.response;
-      });
-  },
-
   SHOW_WARNING_DIALOG: (_, { title, message }) => {
     return dialog.showMessageBox(win, {
       type: "warning",

src/backend/electron/preload.ts

@@ -67,28 +67,6 @@ const api: Sandbox = {
     return ipcRendererInvokeProxy.SHOW_PROJECT_LOAD_DIALOG({ title });
   },
 
-  showMessageDialog: ({ type, title, message }) => {
-    return ipcRendererInvokeProxy.SHOW_MESSAGE_DIALOG({ type, title, message });
-  },
-
-  showQuestionDialog: ({
-    type,
-    title,
-    message,
-    buttons,
-    cancelId,
-    defaultId,
-  }) => {
-    return ipcRendererInvokeProxy.SHOW_QUESTION_DIALOG({
-      type,
-      title,
-      message,
-      buttons,
-      cancelId,
-      defaultId,
-    });
-  },
-
   showImportFileDialog: ({ title, name, extensions }) => {
     return ipcRendererInvokeProxy.SHOW_IMPORT_FILE_DIALOG({
       title,

src/components/Dialog/Dialog.ts

@@ -1,5 +1,8 @@
-import { Dialog, DialogChainObject, Notify, Loading } from "quasar";
+import { Dialog, Notify, Loading } from "quasar";
 import SaveAllResultDialog from "./SaveAllResultDialog.vue";
+import QuestionDialog from "./TextDialog/QuestionDialog.vue";
+import MessageDialog from "./TextDialog/MessageDialog.vue";
+import { DialogType } from "./TextDialog/common";
 import { AudioKey, ConfirmedTips } from "@/type/preload";
 import {
   AllActions,
@@ -12,29 +15,35 @@ import { withProgressDotNotation as withProgress } from "@/store/ui";
 
 type MediaType = "audio" | "text";
 
-export type CommonDialogResult = "OK" | "CANCEL";
-export type CommonDialogOptions = {
-  alert: {
-    title: string;
-    message: string;
-    ok?: string;
-  };
-  confirm: {
-    title: string;
-    message: string;
-    html?: boolean;
-    actionName: string;
-    cancel?: string;
-  };
-  warning: {
-    title: string;
-    message: string;
-    actionName: string;
-    cancel?: string;
-  };
+export type TextDialogResult = "OK" | "CANCEL";
+export type AlertDialogOptions = {
+  type?: DialogType;
+  title: string;
+  message: string;
+  ok?: string;
+};
+export type ConfirmDialogOptions = {
+  type?: DialogType;
+  title: string;
+  message: string;
+  actionName: string;
+  cancel?: string;
+};
+export type WarningDialogOptions = {
+  type?: DialogType;
+  title: string;
+  message: string;
+  actionName: string;
+  cancel?: string;
+};
+export type QuestionDialogOptions = {
+  type?: DialogType;
+  title: string;
+  message: string;
+  buttons: string[];
+  cancel: number;
+  default?: number;
 };
-export type CommonDialogType = keyof CommonDialogOptions;
-type CommonDialogCallback = (value: CommonDialogResult) => void;
 
 export type NotifyAndNotShowAgainButtonOption = {
   message: string;
@@ -46,99 +55,84 @@ export type NotifyAndNotShowAgainButtonOption = {
 export type LoadingScreenOption = { message: string };
 
 // 汎用ダイアログを表示
-export const showAlertDialog = async (
-  options: CommonDialogOptions["alert"],
-) => {
+export const showAlertDialog = async (options: AlertDialogOptions) => {
   options.ok ??= "閉じる";
 
-  return new Promise((resolve: CommonDialogCallback) => {
-    setCommonDialogCallback(
-      Dialog.create({
-        title: options.title,
-        message: options.message,
-        ok: {
-          label: options.ok,
-          flat: true,
-          textColor: "display",
-        },
-      }),
-      resolve,
-    );
-  });
+  const { promise, resolve } = Promise.withResolvers<void>();
+  Dialog.create({
+    component: MessageDialog,
+    componentProps: {
+      type: options.type ?? "info",
+      title: options.title,
+      message: options.message,
+      ok: options.ok,
+    },
+  }).onOk(() => resolve());
+
+  await promise;
+
+  return "OK" as const;
 };
 
-/**
- * htmlフラグを`true`にする場合、外部からの汚染された文字列を`title`や`message`に含めてはいけません。
- * see https://quasar.dev/quasar-plugins/dialog#using-html
- */
-export const showConfirmDialog = async (
-  options: CommonDialogOptions["confirm"],
-) => {
+export const showConfirmDialog = async (options: ConfirmDialogOptions) => {
   options.cancel ??= "キャンセル";
 
-  return new Promise((resolve: CommonDialogCallback) => {
-    setCommonDialogCallback(
-      Dialog.create({
-        title: options.title,
-        message: options.message,
-        persistent: true, // ダイアログ外側押下時・Esc押下時にユーザが設定ができたと思い込むことを防止する
-        focus: "ok",
-        html: options.html,
-        ok: {
-          flat: true,
-          label: options.actionName,
-          textColor: "display",
-        },
-        cancel: {
-          flat: true,
-          label: options.cancel,
-          textColor: "display",
-        },
-      }),
-      resolve,
-    );
-  });
+  const { promise, resolve } = Promise.withResolvers<number>();
+  Dialog.create({
+    component: QuestionDialog,
+    componentProps: {
+      type: options.type ?? "question",
+      title: options.title,
+      message: options.message,
+      buttons: [options.cancel, options.actionName],
+      default: 1,
+    },
+  }).onOk(({ index }: { index: number }) => resolve(index));
+
+  const index = await promise;
+
+  return index === 1 ? "OK" : "CANCEL";
 };
 
-export const showWarningDialog = async (
-  options: CommonDialogOptions["warning"],
-) => {
+export const showWarningDialog = async (options: WarningDialogOptions) => {
   options.cancel ??= "キャンセル";
 
-  return new Promise((resolve: CommonDialogCallback) => {
-    setCommonDialogCallback(
-      Dialog.create({
-        title: options.title,
-        message: options.message,
-        persistent: true,
-        focus: "cancel",
-        ok: {
-          label: options.actionName,
-          flat: true,
-          textColor: "warning",
-        },
-        cancel: {
-          label: options.cancel,
-          flat: true,
-          textColor: "display",
-        },
-      }),
-      resolve,
-    );
-  });
+  const { promise, resolve } = Promise.withResolvers<number>();
+  Dialog.create({
+    component: QuestionDialog,
+    componentProps: {
+      type: options.type ?? "warning",
+      title: options.title,
+      message: options.message,
+      buttons: [options.cancel, options.actionName],
+      default: 0,
+    },
+  }).onOk(({ index }: { index: number }) => resolve(index));
+
+  const index = await promise;
+
+  return index === 1 ? "OK" : "CANCEL";
 };
 
-const setCommonDialogCallback = (
-  dialog: DialogChainObject,
-  resolve: (result: CommonDialogResult) => void,
-) => {
-  return dialog
-    .onOk(() => {
-      resolve("OK");
-    })
-    .onCancel(() => {
-      resolve("CANCEL");
-    });
+export const showQuestionDialog = async (options: QuestionDialogOptions) => {
+  const { promise, resolve } = Promise.withResolvers<number>();
+  Dialog.create({
+    component: QuestionDialog,
+    componentProps: {
+      type: options.type ?? "question",
+      title: options.title,
+      message: options.message,
+      buttons: options.buttons,
+      persistent: options.cancel == undefined,
+      default: options.default,
+    },
+  })
+    .onOk(({ index }: { index: number }) => resolve(index))
+    .onCancel(() => resolve(options.cancel));
+
+  const index = await promise;
+
+  return index;
 };
 
 export async function generateAndSaveOneAudioWithDialog({

src/components/Dialog/HotkeySettingDialog.vue

@@ -265,8 +265,7 @@ const setHotkeyDialogOpened = () => {
 const resetHotkey = async (action: string) => {
   const result = await store.dispatch("SHOW_CONFIRM_DIALOG", {
     title: "ショートカットキーを初期値に戻します",
-    message: `${action}のショートカットキーを初期値に戻します。<br/>本当に戻しますか？`,
-    html: true,
+    message: `${action}のショートカットキーを初期値に戻します。\n本当に戻しますか？`,
     actionName: "初期値に戻す",
     cancel: "初期値に戻さない",
   });

src/components/Dialog/ImportSongProjectDialog.vue

@@ -327,11 +327,6 @@ const handleCancel = () => {
 </script>
 
 <style scoped lang="scss">
-.dialog-card {
-  width: 700px;
-  max-width: 80vw;
-}
-
 .scrollable-area {
   overflow-y: auto;
   max-height: calc(100vh - 100px - 295px);