48 lines
995 B
Vue
48 lines
995 B
Vue
<template lang="pug">
|
|
.container.flex.flex-col.gap-y-2
|
|
.label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
|
|
.group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
|
|
.option(v-for="item in items")
|
|
input.mr-2(
|
|
type="radio",
|
|
:id="item?.id",
|
|
:value="item?.value",
|
|
v-model="value"
|
|
)
|
|
span {{item?.label}}
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseRadioButtonsGroup",
|
|
emits: ["update:modelValue"],
|
|
props: {
|
|
modelValue: String,
|
|
radioButtonsLabel: String,
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: "row",
|
|
},
|
|
},
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.label
|
|
color: var(--font-grey-color)
|
|
</style>
|