ContextMenuをContainer/Presentationに分離する (VOICEVOX#2376)

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

src/components/Dialog/DictionaryManageDialog.vue

@@ -289,7 +289,7 @@
 import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";

src/components/Menu/ContextMenu/Container.vue

@@ -0,0 +1,34 @@
+<!-- StoreのUI_LOCKEDを参照してContextMenuを表示する -->
+
+<template>
+  <Presentation ref="contextMenu" :header :menudata :uiLocked />
+</template>
+
+<script lang="ts">
+export type { ContextMenuItemData } from "./Presentation.vue";
+</script>
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+import type { ComponentExposed } from "vue-component-type-helpers";
+import Presentation, { ContextMenuItemData } from "./Presentation.vue";
+import { useStore } from "@/store";
+
+defineOptions({
+  name: "ContextMenu",
+});
+
+defineProps<{
+  header?: string;
+  menudata: ContextMenuItemData[];
+}>();
+defineExpose({
+  hide: () => {
+    contextMenu.value?.hide();
+  },
+});
+
+const store = useStore();
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+const contextMenu =
+  useTemplateRef<ComponentExposed<typeof Presentation>>("contextMenu");
+</script>

src/components/Menu/ContextMenu.vue → src/components/Menu/ContextMenu/Presentation.vue

@@ -26,23 +26,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { QMenu } from "quasar";
-import MenuItem from "./MenuItem.vue";
-import { MenuItemButton, MenuItemSeparator } from "./type";
-import { useStore } from "@/store";
+import MenuItem from "../MenuItem.vue";
+import { MenuItemButton, MenuItemSeparator } from "../type";
 
 defineProps<{
   header?: string;
   menudata: ContextMenuItemData[];
+
+  uiLocked?: boolean;
 }>();
 defineExpose({
   hide: () => {
     contextMenu.value?.hide();
   },
 });
-const store = useStore();
-const uiLocked = computed(() => store.getters.UI_LOCKED);
 
 const contextMenu = ref<QMenu>();
 /**

src/components/Sing/PlayheadPositionDisplay.vue

@@ -18,7 +18,7 @@ import { ref, computed } from "vue";
 import { useStore } from "@/store";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 import {
   getTimeSignaturePositions,
   MeasuresBeats,

src/components/Sing/ScoreSequencer.vue

@@ -172,7 +172,7 @@ import {
 } from "vue";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 import { NoteId } from "@/type/preload";
 import { useStore } from "@/store";
 import { Note, SequencerEditTarget } from "@/store/type";

src/components/Sing/SequencerNote.vue

@@ -75,7 +75,7 @@ import {
 } from "@/sing/viewHelper";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 
 const props = defineProps<{
   note: Note;

src/components/Sing/SideBar/TrackItem.vue

@@ -165,7 +165,7 @@ import { computed, watchEffect, ref } from "vue";
 import CharacterSelectMenu from "@/components/Sing/CharacterMenuButton/CharacterSelectMenu.vue";
 import SingerIcon from "@/components/Sing/SingerIcon.vue";
 import { useStore } from "@/store";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { shouldPlayTracks } from "@/sing/domain";
 import { CharacterInfo, StyleInfo, TrackId } from "@/type/preload";
 

src/components/Talk/AccentPhrase.vue

@@ -208,7 +208,7 @@ import { computed, ref } from "vue";
 import AudioAccent from "./AudioAccent.vue";
 import AudioParameter from "./AudioParameter.vue";
 import { MenuItemButton } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useStore } from "@/store";
 import { AudioKey, MoraDataType } from "@/type/preload";
 import { Mora } from "@/openapi/models/Mora";

src/components/Talk/AudioCell.vue

@@ -114,7 +114,7 @@ import { computed, watch, ref, nextTick } from "vue";
 import { QInput } from "quasar";
 import CharacterButton from "@/components/CharacterButton.vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useStore } from "@/store";
 import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";

src/composables/useRightClickContextMenu.ts

@@ -6,7 +6,7 @@
 import { QInput } from "quasar";
 import { ref, Ref, nextTick } from "vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
 /**