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

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -1,23 +1,32 @@
 <template lang="pug">
-  .wrap.flex.flex-col.gap-y-6
-    .flex.flex.flex-col.gap-y-9
+  .wrapper.flex.flex-col.gap-y-6.justify-between
+    .flex.flex.flex-col.gap-y-6
       span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
-      .flex.justify-center.items-center.gap-x-2
-        base-button.button(:size="32", :rounded="true")
-          span(v-if="isBaseData") 1
-          .icon-ok.text-xs(v-else)
-        span(:style="{color: 'var(--btn-blue-color)'}") Основное
-        .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
-          span(v-if="isBaseData") 2
-          .icon-ok.text-xs(v-else)
-        span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
-        .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
-        span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
-    medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
-    medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
-    medical-policy-documents(v-if="isPolicyDoc")
+      .flex.self-center
+        base-stepper(
+          :steps="steps",
+          :currentStep="currentStep"
+        )
+      component(v-bind:is="currentTabComponent")
+    .flex.justify-between
+      .flex
+        base-button.font-semibold(
+            :size="40",
+            @click="prevStep",
+            v-if="currentStep !== 0",
+            outlined,
+          ) Назад
+      .flex
+        base-button.font-semibold(
+          :size="40",
+          @click="nextStep",
+          v-if="currentStep < steps.length-1",
+        ) Далее
+        base-button.font-semibold(
+          :size="40",
+          @click="finish",
+          v-if="currentStep === steps.length-1"
+        ) Создать медицинскую карту
 </template>
 
 <script>
@@ -28,6 +37,7 @@ import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
 import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
+import BaseStepper from "@/components/base/BaseStepper.vue";
 
 export default {
   name: "FormCreateMedicalCard",
@@ -39,68 +49,54 @@ export default {
     MedicalBaseData,
     MedicalIdentityDocuments,
     MedicalPolicyDocuments,
+    BaseStepper,
   },
   data() {
     return {
       isBaseData: true,
       isIdentityDoc: false,
       isPolicyDoc: false,
+      currentStep: 0,
+      steps: [
+        {
+          id: 0,
+          label: "1",
+          value: "Основное",
+          component: "medical-base-data",
+        },
+        {
+          id: 1,
+          label: "2",
+          value: "ДУЛ",
+          component: "medical-identity-documents",
+        },
+        {
+          id: 2,
+          label: "3",
+          value: "Полис",
+          component: "medical-policy-documents",
+        },
+      ],
     };
   },
+  computed: {
+    currentTabComponent: function () {
+      return this.steps[this.currentStep]?.component;
+    },
+  },
   methods: {
-    changeBaseData() {
-      this.isBaseData = !this.isBaseData;
-      this.isIdentityDoc = !this.isIdentityDoc;
+    nextStep() {
+      this.currentStep += 1;
     },
-    changeIdentityDoc() {
-      this.isIdentityDoc = !this.isIdentityDoc;
-      this.isPolicyDoc = !this.isPolicyDoc;
+    prevStep() {
+      this.currentStep -= 1;
     },
+    finish() {},
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.wrap
+.wrapper
   width: 570px
-  height: fit-content
-  min-height: 485px
-
-.services-wrapper
-  border: 1px solid var(--btn-grey-color)
-  border-radius: 8px
-
-.list-services
-  overflow-y: auto
-  max-height: 280px
-
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.button
-  &:hover
-    background-color: var(--btn-blue-color)
-    border: none
-
-.active-button
-  background: var(--btn-grey-color)
-  color: var(--font-dark-blue-color)
-  border-color: var(--btn-grey-color)
-  &:hover
-    background-color: var(--btn-grey-color)
-    border: none
-
-.line
-  width: 78px
-  border: 1.5px solid var(--btn-grey-color)
-
-.place
-  width: 100%
-  border: 2px dashed var(--font-grey-color)
-  border-radius: 4px
-  color: var(--font-grey-color)
-
-.counter
-  color: var(--font-grey-color)
 </style>