WIP Добавила радиокнопки для выбора пола

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -4,13 +4,22 @@
       span.font-bold Основное
       .flex.flex-col.gap-y-6
         base-input.w-full(placeholder="ФИО*")
+        base-radio-buttons-group(
+          :items="gendersList",
+          radioButtonsLabel="Пол",
+          v-model="gender",
+        )
         .flex.gap-x-4
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Дата рождения
             base-input-date.input-date.h-10(:width-input="277")
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm СНИЛС
-            base-input(:width-input="277", placeholder="000–000–000 00")
+            base-input(
+              :width-input="277",
+              placeholder="000–000–000 00",
+              v-mask="'###-###-### ##'"
+            )
         .flex.flex-col.gap-y-6
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Адрес регистрации
@@ -29,9 +38,6 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Email
             base-input(:width-input="277", placeholder="user@yandex.ru")
-    .flex.py-2.justify-between
-      base-button(:size="40", @click="changeBaseData")
-        span.font-semibold Далее
 </template>
 
 <script>
@@ -40,13 +46,34 @@ import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
+import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 
 export default {
   name: "MedicalBaseData",
-  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  components: {
+    BaseInput,
+    BaseInputDate,
+    BaseSelect,
+    BaseButton,
+    BaseRadioButtonsGroup,
+  },
   directives: { mask },
-  props: {
-    changeBaseData: Function,
+  data() {
+    return {
+      gendersList: [
+        {
+          id: "1",
+          label: "Мужской",
+          value: "male",
+        },
+        {
+          id: "2",
+          label: "Женский",
+          value: "woman",
+        },
+      ],
+      gender: "",
+    };
   },
 };
 </script>