83 lines
1.6 KiB
Vue
83 lines
1.6 KiB
Vue
<template lang="pug">
|
|
.container.flex.flex-col.gap-y-2
|
|
base-input-container(
|
|
v-if="radioButtonsLabel",
|
|
:label="radioButtonsLabel"
|
|
)
|
|
q-option-group(
|
|
class="q-gutter-md",
|
|
:size="size",
|
|
:options="items"
|
|
type="radio",
|
|
:id="item?.id",
|
|
:value="item?.value",
|
|
v-model="value",
|
|
:inline="inline"
|
|
)
|
|
span {{item?.label}}
|
|
</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: String,
|
|
rowGap: String,
|
|
size: {
|
|
type: String,
|
|
default: "sm",
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
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>
|
|
.q-gutter-x-md, .q-gutter-md
|
|
margin-left: -24px
|
|
</style>
|