60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template lang="pug">
|
|
.container.flex.flex-col.gap-y-2
|
|
base-input-container(
|
|
:label="radioButtonsLabel"
|
|
)
|
|
q-option-group.flex(
|
|
class="q-gutter-md",
|
|
:style="{ columnGap: columnGap + 'px', rowGap: rowGap + 'px' }"
|
|
:size="size",
|
|
:options="items",
|
|
type="radio",
|
|
v-model="value",
|
|
:inline="inline"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInputContainer from "@/components/base/BaseInputContainer";
|
|
|
|
export default {
|
|
name: "BaseRadioButtonsGroup",
|
|
components: { BaseInputContainer },
|
|
emits: ["update:modelValue"],
|
|
props: {
|
|
modelValue: String,
|
|
radioButtonsLabel: String,
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
directionColumn: Boolean,
|
|
columnGap: Number,
|
|
rowGap: Number,
|
|
size: {
|
|
type: String,
|
|
default: "sm",
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.q-gutter-x-md, .q-gutter-md
|
|
margin-left: -24px
|
|
</style>
|