UI整理

src/client/components/ui/radio.vue

@@ -18,7 +18,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -51,7 +50,7 @@ export default defineComponent({
 .novjtctn {
 	position: relative;
 	display: inline-block;
-	margin: 16px 32px 0 0;
+	margin: 8px 20px 0 0;
 	text-align: left;
 	cursor: pointer;
 	transition: all 0.3s;

src/client/components/ui/radios.vue

@@ -0,0 +1,51 @@
+<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 MkRadio from '@/components/ui/radio.vue';
+
+export default defineComponent({
+	components: {
+		MkRadio
+	},
+	props: {
+		defs: {
+			required: true
+		},
+		modelValue: {
+			required: false
+		},
+	},
+	data() {
+		return {
+			value: this.modelValue,
+		}
+	},
+	watch: {
+		value() {
+			this.$emit('update:modelValue', this.value);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.novjtcto {
+	margin: 32px 0;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+</style>