misskey/packages/client/src/components/form/radios.vue
2022-06-28 22:32:01 +09:00

83 lines
1.4 KiB
Vue

<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();
const label = this.$slots.label && this.$slots.label();
const caption = this.$slots.caption && this.$slots.caption();
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', {
class: 'novjtcto',
}, [
...(label ? [h('div', {
class: 'label',
}, [label])] : []),
h('div', {
class: 'body',
}, options.map(option => h(MkRadio, {
key: option.key,
value: option.props.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,
}, option.children)),
),
...(caption ? [h('div', {
class: 'caption',
}, [caption])] : []),
]);
},
});
</script>
<style lang="scss">
.novjtcto {
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
}
> .body {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
}
</style>