AllDialogからHelpDialogを切り出す (#2419)

Co-authored-by: Hiroshiba Kazuyuki <[email protected]>
VOICEVOX · Dec 22, 2024 · 3ce3069 · 3ce3069
1 parent f1e3966
commit 3ce3069
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 49 deletions.
diff --git a/src/components/Dialog/AllDialog.vue b/src/components/Dialog/AllDialog.vue
@@ -3,7 +3,6 @@
     v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
   />
   <AcceptTermsDialog v-model="isAcceptTermsDialogOpenComputed" />
-  <HelpDialog v-model="isHelpDialogOpenComputed" />
   <SettingDialog v-model="isSettingDialogOpenComputed" />
   <HotkeySettingDialog v-model="isHotkeySettingDialogOpenComputed" />
   <ToolBarCustomDialog v-model="isToolbarSettingDialogOpenComputed" />
@@ -28,7 +27,6 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
 import SettingDialog from "@/components/Dialog/SettingDialog/SettingDialog.vue";
 import HotkeySettingDialog from "@/components/Dialog/HotkeySettingDialog.vue";
 import ToolBarCustomDialog from "@/components/Dialog/ToolBarCustomDialog.vue";
@@ -49,12 +47,6 @@ const props = defineProps<{
 }>();
 const store = useStore();
 
-// ライセンス表示
-const isHelpDialogOpenComputed = computed({
-  get: () => store.state.isHelpDialogOpen,
-  set: (val) => store.actions.SET_DIALOG_OPEN({ isHelpDialogOpen: val }),
-});
-
 // 設定
 const isSettingDialogOpenComputed = computed({
   get: () => store.state.isSettingDialogOpen,

diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <QDialog
-    v-model="modelValueComputed"
+    ref="dialogRef"
     maximized
     transitionShow="jump-up"
     transitionHide="jump-down"
@@ -32,7 +32,7 @@
               icon="close"
               color="display"
               aria-label="ヘルプを閉じる"
-              @click="modelValueComputed = false"
+              @click="onDialogOK"
             />
           </QToolbar>
         </QHeader>
@@ -74,6 +74,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import type { Component } from "vue";
+import { useDialogPluginComponent } from "quasar";
 import MarkdownView from "./HelpMarkdownViewSection.vue";
 import OssLicense from "./HelpOssLicenseSection.vue";
 import UpdateInfo from "./HelpUpdateInfoSection.vue";
@@ -99,17 +100,7 @@ type PageSeparator = {
 };
 type PageData = PageItem | PageSeparator;
 
-const props = defineProps<{
-  modelValue: boolean;
-}>();
-const emit = defineEmits<{
-  (e: "update:modelValue", val: boolean): void;
-}>();
-
-const modelValueComputed = computed({
-  get: () => props.modelValue,
-  set: (val) => emit("update:modelValue", val),
-});
+const { dialogRef, onDialogOK } = useDialogPluginComponent();
 
 // エディタのアップデート確認
 const store = useStore();
@@ -132,21 +123,21 @@ const newUpdateResult = useFetchNewUpdateInfos(
 const licenses = ref<Record<string, string>[]>();
 void store.actions.GET_OSS_LICENSES().then((obj) => (licenses.value = obj));
 
-const policy = ref<string>();
+const policy = ref<string>("");
 void store.actions.GET_POLICY_TEXT().then((obj) => (policy.value = obj));
 
-const howToUse = ref<string>();
+const howToUse = ref<string>("");
 void store.actions.GET_HOW_TO_USE_TEXT().then((obj) => (howToUse.value = obj));
 
-const ossCommunityInfos = ref<string>();
+const ossCommunityInfos = ref<string>("");
 void store.actions
   .GET_OSS_COMMUNITY_INFOS()
   .then((obj) => (ossCommunityInfos.value = obj));
 
-const qAndA = ref<string>();
+const qAndA = ref<string>("");
 void store.actions.GET_Q_AND_A_TEXT().then((obj) => (qAndA.value = obj));
 
-const contact = ref<string>();
+const contact = ref<string>("");
 void store.actions.GET_CONTACT_TEXT().then((obj) => (contact.value = obj));
 
 const pagedata = computed(() => {
@@ -202,7 +193,7 @@ const pagedata = computed(() => {
             }
           : {
               isUpdateAvailable: false,
-              latestVersion: undefined,
+              latestVersion: "",
             }),
       },
     },

diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed } from "vue";
 import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
@@ -21,12 +21,10 @@ const props = defineProps<{
   markdown: string;
 }>();
 
-const documentHtml = ref("");
-
 const md = useMarkdownIt();
 
-onMounted(async () => {
-  documentHtml.value = md.render(props.markdown);
+const documentHtml = computed(() => {
+  return md.render(props.markdown);
 });
 </script>
 

diff --git a/src/components/Menu/MenuBar/MenuBar.vue b/src/components/Menu/MenuBar/MenuBar.vue
@@ -28,14 +28,15 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, Dialog } from "quasar";
 import { MenuItemData, MenuItemRoot } from "../type";
 import MenuButton from "../MenuButton.vue";
 import TitleBarButtons from "./TitleBarButtons.vue";
 import TitleBarEditorSwitcher from "./TitleBarEditorSwitcher.vue";
 import { useStore } from "@/store";
 import { HotkeyAction, useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { useEngineIcons } from "@/composables/useEngineIcons";
+import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
 
 const props = defineProps<{
   /** 「ファイル」メニューのサブメニュー */
@@ -113,13 +114,11 @@ watch(titleText, (newTitle) => {
   window.document.title = newTitle;
 });
 
+// FIXME: この関数は不要なはず
 const closeAllDialog = () => {
   void store.actions.SET_DIALOG_OPEN({
     isSettingDialogOpen: false,
   });
-  void store.actions.SET_DIALOG_OPEN({
-    isHelpDialogOpen: false,
-  });
   void store.actions.SET_DIALOG_OPEN({
     isHotkeySettingDialogOpen: false,
   });
@@ -134,12 +133,6 @@ const closeAllDialog = () => {
   });
 };
 
-const openHelpDialog = () => {
-  void store.actions.SET_DIALOG_OPEN({
-    isHelpDialogOpen: true,
-  });
-};
-
 const toggleFullScreen = async () => {
   window.backend.toggleFullScreen();
 };
@@ -538,11 +531,10 @@ const menudata = computed<MenuItemData[]>(() => [
     type: "button",
     label: "ヘルプ",
     onClick: () => {
-      if (store.state.isHelpDialogOpen) closeAllDialog();
-      else {
-        closeAllDialog();
-        openHelpDialog();
-      }
+      closeAllDialog();
+      Dialog.create({
+        component: HelpDialog,
+      });
     },
     disableWhenUiLocked: false,
   },

diff --git a/src/store/type.ts b/src/store/type.ts
@@ -1968,7 +1968,6 @@ export type UiStoreState = {
 } & DialogStates;
 
 export type DialogStates = {
-  isHelpDialogOpen: boolean;
   isSettingDialogOpen: boolean;
   isCharacterOrderDialogOpen: boolean;
   isDefaultStyleSelectDialogOpen: boolean;

diff --git a/src/store/ui.ts b/src/store/ui.ts
@@ -68,7 +68,6 @@ export const uiStoreState: UiStoreState = {
   reloadingLock: false,
   inheritAudioInfo: true,
   activePointScrollMode: "OFF",
-  isHelpDialogOpen: false,
   isSettingDialogOpen: false,
   isHotkeySettingDialogOpen: false,
   isToolbarSettingDialogOpen: false,