fix(frontend): MkFormで入力に不備がある場合は完了ボタンを押して続行できないように (#17096)

* fix(frontend): MkFormで入力に不備がある場合は完了ボタンを押して続行できないように

* fix lint

1 files changed, 10 insertions, 2 deletions

diff --git a/packages/frontend/src/components/MkWidgetSettingsDialog.vue b/packages/frontend/src/components/MkWidgetSettingsDialog.vue
index 63f294770c..41fec2a9e0 100644
--- a/packages/frontend/src/components/MkWidgetSettingsDialog.vue
+++ b/packages/frontend/src/components/MkWidgetSettingsDialog.vue
@@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:height="600"
 	:scroll="false"
 	:withOkButton="true"
+	:okButtonDisabled="!canSave"
 	@close="cancel()"
 	@ok="save()"
 	@closed="emit('closed')"
@@ -38,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template #controls>
 			<div class="_spacer">
-				<MkForm v-model="settings" :form="form"/>
+				<MkForm v-model="settings" :form="form" @canSaveStateChange="onCanSaveStateChanged"/>
 			</div>
 		</template>
 	</MkPreviewWithControls>
@@ -46,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { reactive, useTemplateRef, ref, computed, watch, onBeforeUnmount, onMounted } from 'vue';
+import { useTemplateRef, ref, computed, onBeforeUnmount, onMounted } from 'vue';
 import MkPreviewWithControls from './MkPreviewWithControls.vue';
 import type { Form } from '@/utility/form.js';
 import { deepClone } from '@/utility/clone.js';
@@ -70,7 +71,14 @@ const dialog = useTemplateRef('dialog');
 
 const settings = ref<Record<string, any>>(deepClone(props.currentSettings));
 
+const canSave = ref(true);
+
+function onCanSaveStateChanged(newCanSave: boolean) {
+	canSave.value = newCanSave;
+}
+
 function save() {
+	if (!canSave.value) return;
 	emit('saved', deepClone(settings.value));
 	dialog.value?.close();
 }