[WIP] Заменил степпер на квазаровский, фикс стилей

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -39,8 +39,7 @@
           mask="###-###-### ##",
           v-model="identityDocument.snils.number",
           placeholder="000–000–000 00",
-          label="Номер СНИЛС",
-          outlined
+          label="Номер СНИЛС"
         )
         base-input(
           disabled,
@@ -48,8 +47,7 @@
           mask="############",
           v-model="identityDocument.inn.number",
           placeholder="000000000000",
-          label="Номер ИНН",
-          outlined
+          label="Номер ИНН"
         )
 </template>
 

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -3,43 +3,18 @@
     .flex.flex.flex-col.gap-y-6
       span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
       .flex.self-center
-        base-stepper(
+        base-stepper-quasar(
           :steps="steps",
-          :currentStep="currentStep"
-        )
-      component(
-        v-bind:is="currentTabComponent",
-        :client-detail="clientData",
-      )
-    .flex.justify-between
-      .flex
-        q-btn(
-          @click="prevStep",
-          v-if="currentStep !== 0",
-          outline,
-          no-caps,
-          label="Назад",
-          color="primary",
-          padding="8px 24px"
-        )
-      .flex
-        q-btn(
-          @click="nextStep",
-          v-if="currentStep < steps.length-1",
-          no-caps,
-          label="Далее",
-          color="primary",
-          padding="8px 24px"
-        )
-        q-btn(
-          @click="finish",
-          v-if="currentStep === steps.length-1",
-          no-caps,
-          label="Создать медицинскую карту",
-          style="width: 272px",
-          color="primary",
-          padding="8px 24px"
+          :currentStep="currentStep",
+          :next-step="nextStep",
+          :prev-step="prevStep",
+          finishLabel="Создать медицинскую карту",
+          flat
         )
+          component(
+            v-bind:is="currentTabComponent",
+            :client-detail="clientData"
+          )
 </template>
 
 <script>
@@ -48,8 +23,8 @@ 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";
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
+import BaseStepperQuasar from "@/components/base/BaseStepperQuasar";
 
 export default {
   name: "FormCreateMedicalCard",
@@ -59,7 +34,7 @@ export default {
     MedicalBaseData,
     MedicalIdentityDocuments,
     MedicalPolicyDocuments,
-    BaseStepper,
+    BaseStepperQuasar,
   },
   props: {
     selectedClientId: String,

src/pages/clients/components/StepperCreateAgreement.vue

@@ -1,56 +1,29 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.justify-between
-    .flex.flex-col.gap-y-6
-      span.font-bold.text-xl Договор
-      .flex.self-center
-        base-stepper(
-          :steps="steps",
-          :currentStep="currentStep"
-        )      
-      component(v-bind:is="currentTabComponent")     
-    .flex.justify-between
-      .flex
-        q-btn(
-          @click="prevStep",
-          v-if="currentStep !== 0",
-          outline,
-          no-caps,
-          label="Назад",
-          color="primary",
-          padding="8px 24px"
-        )
-      .flex
-        q-btn(
-          @click="nextStep",
-          v-if="currentStep < steps.length-1",
-          no-caps,
-          label="Далее",
-          color="primary",
-          padding="8px 24px"
-        )
-        q-btn(
-          @click="finish",
-          v-if="currentStep === steps.length-1",
-          no-caps,
-          label="Завершить",
-          color="primary",
-          padding="8px 24px"
-        )
+  .flex.flex-col.justify-between
+    span.font-bold.text-xl Договор
+    base-stepper-quasar(
+      :currentStep="currentStep",
+      :steps="steps",
+      :next-step="nextStep",
+      :prev-step="prevStep",
+      flat
+    )
+      component(v-bind:is="currentTabComponent")
 </template>
 
 <script>
-import BaseStepper from "@/components/base/BaseStepper";
 import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
 import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
 import AgreementServices from "./FormsAgreementCreate/AgreementServices";
+import BaseStepperQuasar from "@/components/base/BaseStepperQuasar";
 
 export default {
   name: "StepperCreateAgreement",
   components: {
-    BaseStepper,
     AgreementCommon,
     AgreementPerson,
     AgreementServices,
+    BaseStepperQuasar,
   },
   data() {
     return {