<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', flexDirection: directionColumn ? 'column' : 'row' }"
        :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, Boolean],
    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>
