rudeshark.net/packages/client/src/components/form/radios.vue

84 lines
1.4 KiB
Vue
Raw Normal View History

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