summaryrefslogtreecommitdiff
path: root/packages/client/src/components/form/radios.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/form/radios.vue')
-rw-r--r--packages/client/src/components/form/radios.vue54
1 files changed, 54 insertions, 0 deletions
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
new file mode 100644
index 0000000000..998a738202
--- /dev/null
+++ b/packages/client/src/components/form/radios.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+import MkRadio from './radio.vue';
+
+export default defineComponent({
+ components: {
+ MkRadio
+ },
+ props: {
+ modelValue: {
+ required: false
+ },
+ },
+ data() {
+ return {
+ value: this.modelValue,
+ }
+ },
+ watch: {
+ value() {
+ this.$emit('update:modelValue', this.value);
+ }
+ },
+ render() {
+ let options = this.$slots.default();
+
+ // なぜかFragmentになることがあるため
+ if (options.length === 1 && options[0].props == null) options = options[0].children;
+
+ return h('div', {
+ class: 'novjtcto'
+ }, [
+ ...options.map(option => h(MkRadio, {
+ key: option.key,
+ value: option.props.value,
+ modelValue: this.value,
+ 'onUpdate:modelValue': value => this.value = value,
+ }, option.children))
+ ]);
+ }
+});
+</script>
+
+<style lang="scss">
+.novjtcto {
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+</style>