Improve MkRadios

2 files changed, 40 insertions, 37 deletions

diff --git a/src/client/components/ui/radios.vue b/src/client/components/ui/radios.vue
index 2fdeab4ce9..ea2d983afe 100644
--- a/src/client/components/ui/radios.vue
+++ b/src/client/components/ui/radios.vue
@@ -1,14 +1,5 @@
-<template>
-<div
-	class="novjtcto"
->
-	<div><slot></slot></div>
-	<MkRadio v-for="def in defs" v-model="value" :value="def.value" :key="def.value">{{ def.label }}</MkRadio>
-</div>
-</template>
-
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 import MkRadio from '@/components/ui/radio.vue';
 
 export default defineComponent({
@@ -32,6 +23,22 @@ export default defineComponent({
 		value() {
 			this.$emit('update:modelValue', this.value);
 		}
+	},
+	render() {
+		const label = this.$slots.desc();
+		const options = this.$slots.default();
+
+		return h('div', {
+			class: 'novjtcto'
+		}, [
+			h('div', label),
+			...options.map(option => h(MkRadio, {
+				key: option.props.value,
+				value: option.props.value,
+				modelValue: this.value,
+				'onUpdate:modelValue': value => this.value = value,
+			}, option.children))
+		]);
 	}
 });
 </script>
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index cdaf7f50fd..c88c573ae6 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -3,13 +3,11 @@
 	<section class="_card _vMargin">
 		<div class="_title"><Fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
-			<MkRadios v-model="serverDisconnectedBehavior" :defs="[
-					{ label: $t('_serverDisconnectedBehavior.reload'), value: 'reload' },
-					{ label: $t('_serverDisconnectedBehavior.dialog'), value: 'dialog' },
-					{ label: $t('_serverDisconnectedBehavior.quiet'), value: 'quiet' },
-				]"
-			>
-				{{ $t('whenServerDisconnected') }}
+			<MkRadios v-model="serverDisconnectedBehavior">
+				<template #desc>{{ $t('whenServerDisconnected') }}</template>
+				<option value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</option>
+				<option value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</option>
+				<option value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</option>
 			</MkRadios>
 			<MkSwitch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</MkSwitch>
 			<MkSwitch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</MkSwitch>
@@ -28,13 +26,11 @@
 			<MkSwitch v-model:value="defaultSideView">{{ $t('openInSideView') }}</MkSwitch>
 		</div>
 		<div class="_content">
-			<MkRadios v-model="chatOpenBehavior" :defs="[
-					{ label: $t('showInPage'), value: 'page' },
-					{ label: $t('openInWindow'), value: 'window' },
-					{ label: $t('popout'), value: 'popout' },
-				]"
-			>
-				{{ $t('chatOpenBehavior') }}
+			<MkRadios v-model="chatOpenBehavior">
+				<template #desc>{{ $t('chatOpenBehavior') }}</template>
+				<option value="page">{{ $t('showInPage') }}</option>
+				<option value="window">{{ $t('openInWindow') }}</option>
+				<option value="popout">{{ $t('popout') }}</option>
 			</MkRadios>
 		</div>
 	</section>
@@ -49,19 +45,19 @@
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><Mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</MkSwitch>
-		</div>
-		<div class="_content">
-			<div>{{ $t('fontSize') }}</div>
-			<MkRadio v-model="fontSize" value="small"><span style="font-size: 14px;">Aa</span></MkRadio>
-			<MkRadio v-model="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></MkRadio>
-			<MkRadio v-model="fontSize" value="large"><span style="font-size: 18px;">Aa</span></MkRadio>
-			<MkRadio v-model="fontSize" value="veryLarge"><span style="font-size: 20px;">Aa</span></MkRadio>
-		</div>
-		<div class="_content">
-			<div>{{ $t('instanceTicker') }}</div>
-			<MkRadio v-model="instanceTicker" value="none">{{ $t('_instanceTicker.none') }}</MkRadio>
-			<MkRadio v-model="instanceTicker" value="remote">{{ $t('_instanceTicker.remote') }}</MkRadio>
-			<MkRadio v-model="instanceTicker" value="always">{{ $t('_instanceTicker.always') }}</MkRadio>
+			<MkRadios v-model="fontSize">
+				<template #desc>{{ $t('fontSize') }}</template>
+				<option value="small"><span style="font-size: 14px;">Aa</span></option>
+				<option :value="null"><span style="font-size: 16px;">Aa</span></option>
+				<option value="large"><span style="font-size: 18px;">Aa</span></option>
+				<option value="veryLarge"><span style="font-size: 20px;">Aa</span></option>
+			</MkRadios>
+			<MkRadios v-model="instanceTicker">
+				<template #desc>{{ $t('instanceTicker') }}</template>
+				<option value="none">{{ $t('_instanceTicker.none') }}</option>
+				<option value="remote">{{ $t('_instanceTicker.remote') }}</option>
+				<option value="always">{{ $t('_instanceTicker.always') }}</option>
+			</MkRadios>
 		</div>
 	</section>