refactor(frontend): MkRadiosの指定をpropsから行うように (#16597)

* refactor(frontend): MkRadiosの指定をpropsから行うように

* spdx

* fix lint

* fix: mkradiosを動的slotsに対応させる

* fix: remove comment [ci skip]

* fix lint

* fix lint

* migrate

* rename

* fix

* fix

* fix types

* remove unused imports

* fix

* wip

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

1 files changed, 10 insertions, 4 deletions

diff --git a/packages/frontend/src/components/MkForm.vue b/packages/frontend/src/components/MkForm.vue
index 3d4724e6b7..1ece0ad4c3 100644
--- a/packages/frontend/src/components/MkForm.vue
+++ b/packages/frontend/src/components/MkForm.vue
@@ -26,9 +26,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSelect v-else-if="v.type === 'enum'" v-model="values[k]" :items="getMkSelectDef(v)">
 			<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
 		</MkSelect>
-		<MkRadios v-else-if="v.type === 'radio'" v-model="values[k]">
+		<MkRadios v-else-if="v.type === 'radio'" v-model="values[k]" :options="getRadioOptionsDef(v)">
 			<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
-			<option v-for="option in v.options" :key="getRadioKey(option)" :value="option.value">{{ option.label }}</option>
 		</MkRadios>
 		<MkRange v-else-if="v.type === 'range'" v-model="values[k]" :min="v.min" :max="v.max" :step="v.step" :textConverter="v.textConverter">
 			<template #label><span v-text="v.label || k"></span><span v-if="v.required === false"> ({{ i18n.ts.optional }})</span></template>
@@ -60,6 +59,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import { i18n } from '@/i18n.js';
 import type { MkSelectItem } from '@/components/MkSelect.vue';
+import type { MkRadiosOption } from '@/components/MkRadios.vue';
 import type { Form, EnumFormItem, RadioFormItem } from '@/utility/form.js';
 
 const props = defineProps<{
@@ -113,7 +113,13 @@ function getMkSelectDef(def: EnumFormItem): MkSelectItem[] {
 	});
 }
 
-function getRadioKey(e: RadioFormItem['options'][number]) {
-	return typeof e.value === 'string' ? e.value : JSON.stringify(e.value);
+function getRadioOptionsDef(def: RadioFormItem): MkRadiosOption[] {
+	return def.options.map<MkRadiosOption>((v) => {
+		if (typeof v === 'string') {
+			return { value: v, label: v };
+		} else {
+			return { value: v.value, label: v.label };
+		}
+	});
 }
 </script>