useDialogPluginComponentでAllDialogから一部移動してみる

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,

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="onDialogCancel"
             />
           </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, onDialogCancel } = useDialogPluginComponent();
 
 // エディタのアップデート確認
 const store = useStore();
@@ -132,7 +123,7 @@ 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>();
@@ -202,7 +193,7 @@ const pagedata = computed(() => {
             }
           : {
               isUpdateAvailable: false,
-              latestVersion: undefined,
+              latestVersion: "",
             }),
       },
     },

src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
 import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
@@ -28,6 +28,13 @@ const md = useMarkdownIt();
 onMounted(async () => {
   documentHtml.value = md.render(props.markdown);
 });
+
+watch(
+  () => props.markdown,
+  (newMarkdown) => {
+    documentHtml.value = md.render(newMarkdown);
+  },
+);
 </script>
 
 <style scoped lang="scss">

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<{
   /** 「ファイル」メニューのサブメニュー */
@@ -117,9 +118,6 @@ 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 +132,6 @@ const closeAllDialog = () => {
   });
 };
 
-const openHelpDialog = () => {
-  void store.actions.SET_DIALOG_OPEN({
-    isHelpDialogOpen: true,
-  });
-};
-
 const toggleFullScreen = async () => {
   window.backend.toggleFullScreen();
 };
@@ -538,11 +530,9 @@ const menudata = computed<MenuItemData[]>(() => [
     type: "button",
     label: "ヘルプ",
     onClick: () => {
-      if (store.state.isHelpDialogOpen) closeAllDialog();
-      else {
-        closeAllDialog();
-        openHelpDialog();
-      }
+      Dialog.create({
+        component: HelpDialog,
+      });
     },
     disableWhenUiLocked: false,
   },