egirlskey/packages/frontend/src/components/MkRadios.vue

84 lines
1.5 KiB
Vue
Raw Normal View History

<script lang="ts">
import { defineComponent, h } from 'vue';
2023-01-07 06:09:46 +00:00
import MkRadio from './MkRadio.vue';
export default defineComponent({
components: {
2022-06-28 13:32:01 +00:00
MkRadio,
},
props: {
modelValue: {
2022-06-28 13:32:01 +00:00
required: false,
},
},
data() {
return {
value: this.modelValue,
};
},
watch: {
value() {
this.$emit('update:modelValue', this.value);
2022-06-28 13:32:01 +00:00
},
},
render() {
2021-07-19 14:30:12 +00:00
let options = this.$slots.default();
2021-11-28 11:07:37 +00:00
const label = this.$slots.label && this.$slots.label();
const caption = this.$slots.caption && this.$slots.caption();
2021-07-19 14:30:12 +00:00
// なぜかFragmentになることがあるため
if (options.length === 1 && options[0].props == null) options = options[0].children;
return h('div', {
2022-06-28 13:32:01 +00:00
class: 'novjtcto',
}, [
2021-11-28 11:07:37 +00:00
...(label ? [h('div', {
2022-06-28 13:32:01 +00:00
class: 'label',
2021-11-28 11:07:37 +00:00
}, [label])] : []),
h('div', {
2022-06-28 13:32:01 +00:00
class: 'body',
2021-11-28 11:07:37 +00:00
}, options.map(option => h(MkRadio, {
2022-06-28 13:32:01 +00:00
key: option.key,
value: option.props.value,
modelValue: this.value,
'onUpdate:modelValue': value => this.value = value,
}, option.children)),
2021-11-28 11:07:37 +00:00
),
...(caption ? [h('div', {
2022-06-28 13:32:01 +00:00
class: 'caption',
2021-11-28 11:07:37 +00:00
}, [caption])] : []),
]);
2022-06-28 13:32:01 +00:00
},
});
</script>
<style lang="scss">
2021-09-29 15:50:45 +00:00
.novjtcto {
2021-11-28 11:07:37 +00:00
> .label {
font-size: 0.85em;
padding: 0 0 8px 0;
user-select: none;
&:empty {
display: none;
}
}
> .body {
2022-06-28 13:32:01 +00:00
display: flex;
gap: 12px;
flex-wrap: wrap;
2021-09-29 15:50:45 +00:00
}
2021-11-28 11:07:37 +00:00
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
}
</style>