Merge pull request #2 from Hiroshiba/hiho-counter-pr-ce45b91d

#2290 の変更提案プルリクエスト

src/components/Dialog/DictionaryEditWordDialog.vue

@@ -161,56 +161,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, Ref, ComputedRef } from "vue";
+import { inject, ref } from "vue";
 import { QInput } from "quasar";
+import { DictionaryManageDialogContext } from "./DictionaryManageDialog.vue";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
-import { AccentPhrase, UserDictWord } from "@/openapi";
-import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const store = useStore();
 
-/**
- * injectで親コンポーネント(components/Dialog/DictionaryManageDialog.vue)から変数と関数を共有してもらう
- */
-const wordEditing = inject("wordEditing") as boolean;
-const surfaceInput = inject("surfaceInput") as Ref<QInput>;
-const selectedId = inject("selectedId") as string;
-const uiLocked = inject("uiLocked") as boolean;
-const userDict = inject("userDict") as Record<string, UserDictWord>;
-const isOnlyHiraOrKana = inject("isOnlyHiraOrKana") as boolean;
-const accentPhrase = inject("accentPhrase") as AccentPhrase;
-const voiceComputed = inject("voiceComputed") as ComputedRef<{
-  engineId: string & EngineId;
-  speakerId: string & SpeakerId;
-  styleId: number & StyleId;
-}>;
-const surface = inject("surface") as string;
-const yomi = inject("yomi") as string;
-const wordPriority = inject("wordPriority") as Ref<number>;
-const isWordChanged = inject("isWordChanged") as ComputedRef<
-  boolean | "" | AccentPhrase | undefined
->;
-const setYomi = inject("setYomi") as (
-  text: string,
-  changeWord?: boolean,
-) => Promise<void>;
-const createUILockAction = inject("createUILockAction") as <T>(
-  action: Promise<T>,
-) => Promise<T>;
-const loadingDictProcess = inject("loadingDictProcess") as () => Promise<void>;
-const computeRegisteredAccent = inject(
-  "computeRegisteredAccent",
-) as () => number;
-const discardOrNotDialog = inject("discardOrNotDialog") as (
-  okCallback: () => void,
-) => Promise<void>;
-const toInitialState = inject("toInitialState") as () => void;
-const toWordEditingState = inject("toWordEditingState") as () => void;
-const cancel = inject("cancel") as () => void;
+const context = inject<DictionaryManageDialogContext>(
+  "dictionaryManageDialogContext",
+);
+if (context == undefined)
+  throw new Error(`dictionaryManageDialogContext == undefined`);
+const {
+  wordEditing,
+  surfaceInput,
+  selectedId,
+  uiLocked,
+  userDict,
+  isOnlyHiraOrKana,
+  accentPhrase,
+  voiceComputed,
+  surface,
+  yomi,
+  wordPriority,
+  isWordChanged,
+  setYomi,
+  createUILockAction,
+  loadingDictProcess,
+  computeRegisteredAccent,
+  discardOrNotDialog,
+  toInitialState,
+  toWordEditingState,
+  cancel,
+} = context;
 
 // 音声再生機構
 const nowGenerating = ref(false);

src/components/Dialog/DictionaryManageDialog.vue

@@ -116,13 +116,44 @@
             </QList>
           </div>
 
-          <DictionaryEditWordDialog></DictionaryEditWordDialog>
+          <DictionaryEditWordDialog />
         </QPage>
       </QPageContainer>
     </QLayout>
   </QDialog>
 </template>
 
+<script lang="ts">
+import { Ref, ComputedRef } from "vue";
+
+export interface DictionaryManageDialogContext {
+  wordEditing: Ref<boolean>;
+  surfaceInput: Ref<QInput | undefined>;
+  selectedId: Ref<string>;
+  uiLocked: Ref<boolean>;
+  userDict: Ref<Record<string, UserDictWord>>;
+  isOnlyHiraOrKana: Ref<boolean>;
+  accentPhrase: Ref<AccentPhrase | undefined>;
+  voiceComputed: ComputedRef<{
+    engineId: string;
+    speakerId: string;
+    styleId: number;
+  }>;
+  surface: Ref<string>;
+  yomi: Ref<string>;
+  wordPriority: Ref<number>;
+  isWordChanged: ComputedRef<boolean>;
+  setYomi: (text: string, changeWord?: boolean) => Promise<void>;
+  createUILockAction: <T>(action: Promise<T>) => Promise<T>;
+  loadingDictProcess: () => Promise<void>;
+  computeRegisteredAccent: () => number;
+  discardOrNotDialog: (okCallback: () => void) => Promise<void>;
+  toInitialState: () => void;
+  toWordEditingState: () => void;
+  cancel: () => void;
+}
+</script>
+
 <script setup lang="ts">
 import { computed, ref, watch, provide } from "vue";
 import { QInput } from "quasar";
@@ -287,7 +318,9 @@ const wordPriority = ref(defaultDictPriority);
 // 操作（ステートの移動）
 const isWordChanged = computed(() => {
   if (selectedId.value === "") {
-    return surface.value && yomi.value && accentPhrase.value;
+    return (
+      surface.value != "" && yomi.value != "" && accentPhrase.value != undefined
+    );
   }
   // 一旦代入することで、userDictそのものが更新された時もcomputedするようにする
   const dict = userDict.value;
@@ -390,26 +423,28 @@ const toDialogClosedState = () => {
 /**
  * provideで子コンポーネント(components/Dialog/DictionaryEditWordDialog.vue)に変数と関数を共有する
  */
-provide("wordEditing", wordEditing);
-provide("surfaceInput", surfaceInput);
-provide("selectedId", selectedId);
-provide("uiLocked", uiLocked);
-provide("userDict", userDict);
-provide("isOnlyHiraOrKana", isOnlyHiraOrKana);
-provide("accentPhrase", accentPhrase);
-provide("voiceComputed", voiceComputed);
-provide("surface", surface);
-provide("yomi", yomi);
-provide("wordPriority", wordPriority);
-provide("isWordChanged", isWordChanged);
-provide("setYomi", setYomi);
-provide("createUILockAction", createUILockAction);
-provide("loadingDictProcess", loadingDictProcess);
-provide("computeRegisteredAccent", computeRegisteredAccent);
-provide("discardOrNotDialog", discardOrNotDialog);
-provide("toInitialState", toInitialState);
-provide("toWordEditingState", toWordEditingState);
-provide("cancel", cancel);
+provide<DictionaryManageDialogContext>("dictionaryManageDialogContext", {
+  wordEditing,
+  surfaceInput,
+  selectedId,
+  uiLocked,
+  userDict,
+  isOnlyHiraOrKana,
+  accentPhrase,
+  voiceComputed,
+  surface,
+  yomi,
+  wordPriority,
+  isWordChanged,
+  setYomi,
+  createUILockAction,
+  loadingDictProcess,
+  computeRegisteredAccent,
+  discardOrNotDialog,
+  toInitialState,
+  toWordEditingState,
+  cancel,
+});
 </script>
 
 <style lang="scss" scoped>