[WIP] Заменил инпуты и радио инпуты

src/components/base/BaseRadioButtonsGroup.vue

@@ -1,20 +1,28 @@
 <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}}
+    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,
@@ -26,6 +34,14 @@ export default {
     directionColumn: Boolean,
     columnGap: String,
     rowGap: String,
+    size: {
+      type: String,
+      default: "sm",
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     value: {
@@ -61,6 +77,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.label
-  color: var(--font-grey-color)
+.q-gutter-x-md, .q-gutter-md
+  margin-left: -24px
 </style>