EditorHome.vueにあるdialogをquasarのuseDialogPluginComponentで開くようにする

[Hiroshiba]

内容

EditorHomeではアプリケーション全体で開かれるダイアログをあらかじめコンポーネントとして配置しています。

voicevox/src/views/EditorHome.vue

Lines 151 to 170 in c2f9ca4

	<help-dialog v-model="isHelpDialogOpenComputed" />
	<setting-dialog v-model="isSettingDialogOpenComputed" />
	<hotkey-setting-dialog v-model="isHotkeySettingDialogOpenComputed" />
	<header-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
	<character-order-dialog
	v-if="orderedAllCharacterInfos.length > 0"
	v-model="isCharacterOrderDialogOpenComputed"
	:character-infos="orderedAllCharacterInfos"
	/>
	<default-style-list-dialog
	v-if="orderedAllCharacterInfos.length > 0"
	v-model="isDefaultStyleSelectDialogOpenComputed"
	:character-infos="orderedAllCharacterInfos"
	/>
	<dictionary-manage-dialog v-model="isDictionaryManageDialogOpenComputed" />
	<engine-manage-dialog v-model="isEngineManageDialogOpenComputed" />
	<accept-retrieve-telemetry-dialog
	v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
	/>
	<accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />

これの影響でダイアログの開閉状態をアプリケーション全体で管理する形になり、かつダイアログのオープンやクローズに反応して何かの関数を実行するためにwatchを使う必要があり、少し困難になっています。

quasarのuseDialogPluginComponentを使えば開閉状態のコントロールや開閉状態にフックした処理の実行などが素直に書けるはずです。
配置してあるダイアログをこれを使ってなるべく開閉するようになればこの課題は解決です。

Pros 良くなる点

管理がしやすくなりそう。

Cons 悪くなる点

実現方法

とりあえず簡単そうなダイアログを1つ置き換えられるかどうかをチェックするのが良さそうに思います。
すでにuseDialogPluginComponentを使っている箇所がいくつかあると思うので参考になるかもです。

その他

• [project-library-manage] ライブラリのインストール・アンインストール処理を実装 #1497 (comment)

初心者歓迎タスクラベルがついていますがプログラミングの難度的には難しいと思います。
プログラミングに慣れている方がVuejsになれるのに適しているタスクだと思います。

[jdkfx]

多分今はsrc/views/EditorHome.vueじゃなくて、src/components/Dialog/AllDialog.vueかもしれない

[Hiroshiba]

こちらなのですが、v-modelにするときれいに書けることがわかったのでそちらになりました！！

• refactor: ヘルプダイアログを除くcomputed+@update:modelValueパターンで開くダイアログをdefineModelを使うようにする #2624

@jdkfx さん、 @madosuki さん、ありがとうございました！！