ダイアログをQuasarのものに置き換える (#2286)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <[email protected]>

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);