Sharkey/src/client/components/form/radios.vue

55 lines
933 B
Vue
Raw Normal View History

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