67 lines
1.4 KiB
Vue
67 lines
1.4 KiB
Vue
<template lang="pug">
|
|
.container.flex.flex-col.gap-y-2
|
|
.label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
|
|
.group.flex.text-base(:class="radioGroupClasses")
|
|
.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: () => [],
|
|
},
|
|
directionColumn: Boolean,
|
|
columnGap: String,
|
|
rowGap: String,
|
|
},
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
radioGroupClasses() {
|
|
if (this.directionColumn) {
|
|
return this.columnGap
|
|
? {
|
|
"flex-col": true,
|
|
[this.columnGap]: true,
|
|
}
|
|
: {
|
|
"flex-col": true,
|
|
"gap-y-1": true,
|
|
};
|
|
}
|
|
if (this.rowGap)
|
|
return {
|
|
[this.rowGap]: true,
|
|
};
|
|
return {
|
|
"gap-x-4": true,
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.label
|
|
color: var(--font-grey-color)
|
|
</style>
|