From f090f81759f48ceef0c0b3b39efdf47d00d6e274 Mon Sep 17 00:00:00 2001
From: liszt01 <himuroland@gmail.com>
Date: Tue, 17 Oct 2023 22:38:53 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
 =?UTF-8?q?=E3=82=B0=E3=82=92=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/UpdateNotificationDialog.vue   | 31 ++++++++++++++++++
 voicevox_src/src/views/EditorHome.vue         | 32 +++----------------
 2 files changed, 35 insertions(+), 28 deletions(-)
 create mode 100644 voicevox_src/src/components/UpdateNotificationDialog.vue

diff --git a/voicevox_src/src/components/UpdateNotificationDialog.vue b/voicevox_src/src/components/UpdateNotificationDialog.vue
new file mode 100644
index 0000000..d8f0050
--- /dev/null
+++ b/voicevox_src/src/components/UpdateNotificationDialog.vue
@@ -0,0 +1,31 @@
+<template>
+    <q-dialog v-if="props.isUpdateAvailable" v-model="showUpdateNotificationDialog">
+        <q-card>
+            <q-card-section class="text-h6">
+                新しいアップデートがあります！
+            </q-card-section>
+            <q-card-section>
+                <!-- href の前にコロンつけないとダメ -->
+                <q-btn color="primary" :href="props.downloadLink" tag="a" target="_blank" label="ダウンロードページへ"
+                    @click="closeUpdateNotificationDialog" />
+                <q-btn label="後で" @click="closeUpdateNotificationDialog" />
+            </q-card-section>
+        </q-card>
+    </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props =
+    defineProps<{
+        downloadLink: string;
+        isUpdateAvailable: boolean;
+    }>();
+
+const showUpdateNotificationDialog = ref(true);
+
+const closeUpdateNotificationDialog = () => {
+    showUpdateNotificationDialog.value = false;
+};
+</script>
diff --git a/voicevox_src/src/views/EditorHome.vue b/voicevox_src/src/views/EditorHome.vue
index ef72f6c..4c1d198 100644
--- a/voicevox_src/src/views/EditorHome.vue
+++ b/voicevox_src/src/views/EditorHome.vue
@@ -7,6 +7,9 @@
     <q-page-container>
       <q-page class="main-row-panes">
         <progress-dialog />
+        <!-- アップデート可能ダイアログ -->
+        <!-- なぜかパスカルケースとケバブケースが対応しているみたい & コロンつけないとバグる -->
+        <update-notification-dialog downloadLink="https://voicevox.hiroshiba.jp/" :is-update-available="true"/>
 
         <!-- TODO: 複数エンジン対応 -->
         <!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
@@ -44,23 +47,6 @@
               >
               <q-btn v-else outline @click="openQa">Q&Aを見る</q-btn>
             </template>
-	          <!-- ダイアログ テスト -->
-            <q-dialog v-model="showModal" v-if="props.isUpdateAvailable">
-              <q-card>
-                <q-card-section class="text-h6">
-                  新しいアップデートがあります！
-                </q-card-section>
-                <q-card-section>
-                  <q-btn color="primary"
-                    to="https://voicevox.hiroshiba.jp"
-                    tag="a"
-                    target="_blank"
-                    label="アップデートする"
-                    @click="closeModal" />
-                  <q-btn label="後で通知する" @click="closeModal" />
-                </q-card-section>
-              </q-card>
-            </q-dialog>
           </div>
         </div>
         <q-splitter
@@ -232,15 +218,11 @@ import {
 } from "@/type/preload";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { parseCombo, setHotkeyFunctions } from "@/store/setting";
-import { UpdateInfo } from "@/type/preload";
+import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue"
 
 const props =
   defineProps<{
     projectFilePath: string;
-    latestVersion: string;
-    downloadLink: string;
-    updateInfos: UpdateInfo[];
-    isUpdateAvailable: boolean;
   }>();
 
 const store = useStore();
@@ -866,12 +848,6 @@ watch(activeAudioKey, (audioKey) => {
 const showAddAudioItemButton = computed(() => {
   return store.state.showAddAudioItemButton;
 });
-
-const showModal = ref(true);
-
-function closeModal() {
-  showModal.value = false;
-}
 </script>
 
 <style scoped lang="scss">

From 07bc3aef3c5811ed36d01d70a93f791ab1ffed36 Mon Sep 17 00:00:00 2001
From: liszt01 <himuroland@gmail.com>
Date: Wed, 18 Oct 2023 18:43:17 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=82=A2=E3=83=83=E3=83=97=E3=83=87?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E5=8F=AF=E8=83=BD=E3=83=80=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=81=AE=E5=BC=95=E6=95=B0=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/UpdateNotificationDialog.vue   | 69 +++++++++++--------
 voicevox_src/src/views/EditorHome.vue         | 19 ++++-
 2 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/voicevox_src/src/components/UpdateNotificationDialog.vue b/voicevox_src/src/components/UpdateNotificationDialog.vue
index d8f0050..2133358 100644
--- a/voicevox_src/src/components/UpdateNotificationDialog.vue
+++ b/voicevox_src/src/components/UpdateNotificationDialog.vue
@@ -1,31 +1,46 @@
 <template>
-    <q-dialog v-if="props.isUpdateAvailable" v-model="showUpdateNotificationDialog">
-        <q-card>
-            <q-card-section class="text-h6">
-                新しいアップデートがあります！
-            </q-card-section>
-            <q-card-section>
-                <!-- href の前にコロンつけないとダメ -->
-                <q-btn color="primary" :href="props.downloadLink" tag="a" target="_blank" label="ダウンロードページへ"
-                    @click="closeUpdateNotificationDialog" />
-                <q-btn label="後で" @click="closeUpdateNotificationDialog" />
-            </q-card-section>
-        </q-card>
+    <q-dialog v-model="modelValueComputed">
+      <q-card>
+        <q-card-section class="text-h6">
+          新しいアップデートがあります！
+        </q-card-section>
+        <q-card-section>
+          <!-- href の前にコロンつけないとダメ -->
+          <q-btn
+            color="primary"
+            :href="downloadLink"
+            tag="a"
+            target="_blank"
+            label="ダウンロードページへ"
+            @click="toDialogClosedState"
+          />
+          <q-btn label="後で" @click="toDialogClosedState" />
+        </q-card-section>
+      </q-card>
     </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-
-const props =
+  </template>
+  
+  <script setup lang="ts">
+  import { computed } from "vue";
+  
+  const props =
     defineProps<{
-        downloadLink: string;
-        isUpdateAvailable: boolean;
+      modelValue: boolean;
     }>();
-
-const showUpdateNotificationDialog = ref(true);
-
-const closeUpdateNotificationDialog = () => {
-    showUpdateNotificationDialog.value = false;
-};
-</script>
+  const emit =
+    defineEmits<{
+      (e: "update:modelValue", val: boolean): void;
+    }>();
+  
+  const modelValueComputed = computed({
+    get: () => props.modelValue,
+    set: (val) => emit("update:modelValue", val),
+  });
+  
+  const toDialogClosedState = () => {
+    modelValueComputed.value = false;
+  };
+  
+  const downloadLink = "https://voicevox.hiroshiba.jp/";
+  </script>
+  
\ No newline at end of file
diff --git a/voicevox_src/src/views/EditorHome.vue b/voicevox_src/src/views/EditorHome.vue
index 4c1d198..0d678be 100644
--- a/voicevox_src/src/views/EditorHome.vue
+++ b/voicevox_src/src/views/EditorHome.vue
@@ -8,8 +8,11 @@
       <q-page class="main-row-panes">
         <progress-dialog />
         <!-- アップデート可能ダイアログ -->
-        <!-- なぜかパスカルケースとケバブケースが対応しているみたい & コロンつけないとバグる -->
-        <update-notification-dialog downloadLink="https://voicevox.hiroshiba.jp/" :is-update-available="true"/>
+        <!-- なぜかパスカルケースとケバブケースが対応しているみたい -->
+        <update-notification-dialog
+          v-if="isUpdateAvailable"
+          v-model="isUpdateNotificationDialogOpenComputed"
+        />
 
         <!-- TODO: 複数エンジン対応 -->
         <!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
@@ -218,7 +221,7 @@ import {
 } from "@/type/preload";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { parseCombo, setHotkeyFunctions } from "@/store/setting";
-import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue"
+import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue";
 
 const props =
   defineProps<{
@@ -848,6 +851,16 @@ watch(activeAudioKey, (audioKey) => {
 const showAddAudioItemButton = computed(() => {
   return store.state.showAddAudioItemButton;
 });
+
+// アップデート可能ダイアログ
+const isUpdateAvailable = ref<boolean>(true);
+const isUpdateNotificationDialogOpenComputed = ref<boolean>(true);
+/* 他のis.*OpenComputedと同じように以下のようにしたい. type.tsとui.tsに追記する必要がある.
+= computed({
+  get: () => store.state.isUpdateNotificationDialogOpen,
+  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isUpdateNotificationDialogOpen: val }),
+});
+*/
 </script>
 
 <style scoped lang="scss">