1
1
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-18 00:29:04 +09:00
cherrypick/packages/client/src/components/form/radios.vue

55 lines
933 B
Vue
Raw Normal View History

<script lang="ts">
import { defineComponent, h } from 'vue';
2021-09-30 00:50:45 +09:00
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() {
2021-07-19 23:30:12 +09:00
let options = this.$slots.default();
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', {
2021-09-30 00:50:45 +09:00
class: 'novjtcto'
}, [
2021-09-30 00:50:45 +09:00
...options.map(option => h(MkRadio, {
2021-07-19 23:30:12 +09:00
key: option.key,
2021-09-30 00:50:45 +09:00
value: option.props.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,
}, option.children))
]);
}
});
</script>
<style lang="scss">
2021-09-30 00:50:45 +09:00
.novjtcto {
&:first-child {
margin-top: 0;
}
2021-09-30 00:50:45 +09:00
&:last-child {
margin-bottom: 0;
}
}
</style>