WIP Переделала inputs в agreement и medical

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -1,81 +1,72 @@
 <template lang="pug">
-  .flex-col
-    .flex-col
-      .font-semibold.text-smm ФИО пациента 
-      base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+  .flex.flex-col.gap-y-6
+    base-input(
+      label="ФИО пациента",
+      v-model="patient.full_name"
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
       )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes"    
-        )
-    .flex-col
-      .font-semibold.text-smm ФИО Заказчика 
       base-input(
-        :width-input="200",
-        v-model="patient.full_name"
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
+      )
+    base-input(
+      v-model="patient.full_name"
+      label="ФИО Заказчика",
+    )
+    .flex.justify-between
+      base-custom-select.w-80(
+        placeholder="Тип документа",
+        v-model="patient.doc_type",
+        :items="patentIdentityDocumentTypes",
+        label="Документ, удостоверяющий личность"            
+      )
+      base-input(
+        v-model="patient.seriesAndNumber", 
+        disabled,
+        v-mask="'#### ######'"  
+        label="Серия и номер" 
+      )
+    .flex.justify-between
+      base-input.w-80(
+        v-model="patient.address",
+        label="Адрес"  
+      )
+      base-input(
+        v-model="patient.phone",
+        v-mask="'+7 (###) ###-##-##'",
+        label="Телефон" 
       )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Документ, удостоверяющий личность
-        base-custom-select.select.text-sm(
-          placeholder="Тип документа",
-          v-model="patient.doc_type",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Серия и номер
-        base-input(
-          v-model="patient.seriesAndNumber", 
-          disabled,                  
-        )
-    .flex
-      .flex-col
-        .font-semibold.text-smm Телефон
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes",            
-        )
-      .flex-col
-        .font-semibold.text-smm Адрес
-        base-custom-select.select.text-sm(
-          v-model="patient.phone",
-          :items="patentIdentityDocumentTypes" )
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import { mask } from "vue-the-mask";
 export default {
   name: "AgreementPerson",
   components: {
     BaseInput,
     BaseCustomSelect,
   },
+  directives: { mask },
   data() {
     return {
       patient: {
@@ -85,10 +76,8 @@ export default {
           label: "",
         },
         seriesAndNumber: "2354 125423",
-        phone: {
-          id: null,
-          label: "",
-        },
+        phone: "",
+        address: "",
       },
     };
   },