From 27f25a882615418afdb62ff5b631fef81d327f57 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Jul 2023 18:17:57 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=A7=D0=B0=D1=81=D1=82=D0=B8=D1=87?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B7=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseInput.vue                  |   6 +-
 src/components/base/BaseAddingNetwork.vue     |   4 +-
 src/components/base/BaseInputDate.vue         | 217 +++++++++++-------
 src/components/base/BaseInputFullName.vue     |   6 +-
 src/components/base/BaseInputTime.vue         | 165 ++++++++-----
 src/components/base/Calendar/BaseCalendar.vue |  39 +++-
 .../base/Calendar/CalendarDates.vue           |   2 +-
 .../clients/components/ClientsTableHat.vue    |  15 +-
 .../components/FormCreateAddresses.vue        |  50 ++--
 .../components/FormCreateBasicInfo.vue        |  18 +-
 .../FormCreateIdentityDocuments.vue           |  36 +--
 .../MedicalProtocolCreateModal.vue            |  14 +-
 12 files changed, 347 insertions(+), 225 deletions(-)

diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
index 2e144bc..0fa13e6 100644
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -4,7 +4,7 @@
       v-model="value",
       :name="name",
       :multiple="multiple",
-      :class="{'font-input': true, 'doc': doc}",
+      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
       :input-style="{resize: resize,}",
       :borderless="borderless",
       :placeholder="placeholder",
@@ -78,6 +78,7 @@ export default {
     name: String,
     important: Boolean,
     size: String,
+    circle: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -214,4 +215,7 @@ export default {
   font-weight: 500
   font-size: 12px
   line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>
diff --git a/src/components/base/BaseAddingNetwork.vue b/src/components/base/BaseAddingNetwork.vue
index 23c6261..df6a6aa 100644
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
     base-select(:items="items", v-model="network.kind")  
-    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined, :rule="ruleInput", no-error-icon)
+    base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput";
+import BaseInput from "@/components/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "TableAddingNetwork",
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index dc86285..8bd9919 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,27 +1,18 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+    q-input.input(
       v-model="value",
       :name="name",
-      :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
-      :borderless="borderless",
+      :input-style="{resize: resize}",
       :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
       :readonly="readonly",
       :disable="disabled",
-      :filled="filled",
-      mask="##.##.####"
-      :bg-color="filled || standout ? '' : 'white'",
+      mask="##.##.####",
       :rules="[checkInput]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
-      :maxlength="maxLength",
-      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
+      no-error-icon,
       :accept="accept",
       :debounce="debounce",
       hide-bottom-space,
@@ -31,60 +22,32 @@
         q-icon(
           name="app:calendar",
           class="cursor-pointer",
-          size="16px"
+          size="18px"
         )
-          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
-            q-date(
-              v-model="value",
-              mask="DD.MM.YYYY",
-              minimal
+          q-menu(
+            :style="{'margin-top': '8px !important'}",
+            v-model="calendarVisibility",
+            transition-show="scale",
+            transition-hide="scale",
+            self="top middle",
+            :offset="[118, 14]"
+          )
+            base-calendar(
+              v-model="internalDate",
+              :start-year="2000",
+              :save="closeCalendar",
+              @update:model-value="transmitInternalDate"
             )
-              .flex.items-center.justify-end
-                q-btn(
-                  v-close-popup,
-                  label="Закрыть",
-                  color="primary",
-                  flat,
-                  no-caps
-                )
 </template>
 
 <script>
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import * as moment from "moment/moment";
+import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 export default {
   name: "BaseInputDate",
-  components: { BaseInputContainer },
+  components: { BaseInputContainer, BaseCalendar },
   props: {
-    circle: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
     accept: {
       type: String,
       default: "",
@@ -95,11 +58,7 @@ export default {
     },
     debounce: [String, Number],
     width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
     lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
     itemAligned: Boolean,
     modelValue: Date,
     placeholder: String,
@@ -108,18 +67,30 @@ export default {
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
+    size: String,
   },
   emits: ["update:modelValue"],
+  data() {
+    return {
+      calendarVisibility: false,
+      internalDate: null,
+    };
+  },
   computed: {
     value: {
       get() {
         if (
           moment(this.modelValue).isValid() &&
           typeof this.modelValue === "object"
-        )
+        ) {
+          this.changeInternalDate(moment(this.modelValue));
           return moment(this.modelValue).format("DD.MM.YYYY");
-        if (moment(this.convertFormat(this.modelValue)).isValid())
+        }
+        if (moment(this.convertFormat(this.modelValue)).isValid()) {
+          this.changeInternalDate(moment(this.modelValue));
           return this.modelValue;
+        }
+        this.changeInternalDate(null);
         return null;
       },
       set(value) {
@@ -131,6 +102,50 @@ export default {
         );
       },
     },
+    sizeVariable() {
+      switch (this.size) {
+        case "XS":
+          return {
+            "--input-height": "28px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "S":
+          return {
+            "--input-height": "32px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "M":
+          return {
+            "--input-height": "40px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        default:
+          return {
+            "--input-height": "56px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+      }
+    },
   },
   methods: {
     convertFormat(date) {
@@ -141,6 +156,15 @@ export default {
     checkInput(val) {
       return moment(this.convertFormat(val)).isValid();
     },
+    closeCalendar() {
+      this.calendarVisibility = false;
+    },
+    changeInternalDate(value) {
+      this.internalDate = value;
+    },
+    transmitInternalDate(value) {
+      this.value = value?.format("DD.MM.YYYY");
+    },
   },
 };
 </script>
@@ -149,17 +173,56 @@ export default {
 .font-input
   font-feature-settings: 'pnum' on, 'lnum' on
 
-.circle
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-</style>
-<style lang="sass">
-.q-field--standout.q-field--readonly .q-field__control:before
-  border: none !important
-.q-field--standout .q-field__control
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
   background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>
diff --git a/src/components/base/BaseInputFullName.vue b/src/components/base/BaseInputFullName.vue
index e60278c..7746d12 100644
--- a/src/components/base/BaseInputFullName.vue
+++ b/src/components/base/BaseInputFullName.vue
@@ -29,7 +29,7 @@
               type="file",
               id="image-upload",
               accept="image/*",
-              @change="(e) => previewImage(e)"
+              @change="(e) => previewImage(e)",
             )
             .avatar.flex.absolute.items-center.gap-x-6
               img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
@@ -41,14 +41,14 @@
                 padding="2px 0 0 0"
               )
                 q-icon(name="app:ok", size="20px")
-    base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
+    base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", size="M")
 </template>
 
 <script>
 import BaseModal from "./BaseModal.vue";
-import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "BaseInputFullName",
diff --git a/src/components/base/BaseInputTime.vue b/src/components/base/BaseInputTime.vue
index c3b4d3f..d623076 100644
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -1,36 +1,28 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+    q-input.input(
       v-model="value",
       :name="name",
-      :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
-      :borderless="borderless",
+      :class="{'font-input': true}",
+      :input-style="{ resize: resize}",
       :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
       :readonly="readonly",
       :disable="disabled",
-      :filled="filled",
-      :bg-color="filled || standout ? '' : 'white'",
       :rules="[checkTime]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
       mask="time",
-      :maxlength="maxLength",
-      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
       :accept="accept",
       :debounce="debounce",
-      hide-bottom-space
+      hide-bottom-space,
+      no-error-icon
     )
       template(v-slot:append)
         q-icon(
           name="app:time",
           class="cursor-pointer",
-          size="16px"
+          size="19px"
         )
           q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
             q-time(v-model="value", mask="HH:mm")
@@ -51,35 +43,6 @@ export default {
   name: "BaseInputTime",
   components: { BaseInputContainer },
   props: {
-    circle: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
     accept: {
       type: String,
       default: "",
@@ -90,12 +53,8 @@ export default {
     },
     debounce: [String, Number],
     width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
     rule: Array,
     lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
     itemAligned: Boolean,
     modelValue: String,
     placeholder: String,
@@ -104,6 +63,7 @@ export default {
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
+    size: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -115,6 +75,50 @@ export default {
         this.$emit("update:modelValue", this.checkTime(value) ? value : null);
       },
     },
+    sizeVariable() {
+      switch (this.size) {
+        case "XS":
+          return {
+            "--input-height": "28px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "S":
+          return {
+            "--input-height": "32px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "M":
+          return {
+            "--input-height": "40px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        default:
+          return {
+            "--input-height": "56px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+      }
+    },
   },
   methods: {
     checkTime(val) {
@@ -133,17 +137,56 @@ export default {
 .font-input
   font-feature-settings: 'pnum' on, 'lnum' on
 
-.circle
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-</style>
-<style lang="sass">
-.q-field--standout.q-field--readonly .q-field__control:before
-  border: none !important
-.q-field--standout .q-field__control
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
   background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>
diff --git a/src/components/base/Calendar/BaseCalendar.vue b/src/components/base/Calendar/BaseCalendar.vue
index 9da9b69..e68cc6b 100644
--- a/src/components/base/Calendar/BaseCalendar.vue
+++ b/src/components/base/Calendar/BaseCalendar.vue
@@ -56,11 +56,16 @@ export default {
       type: Function,
       default: () => {},
     },
+    cancel: {
+      type: Function,
+      default: () => {},
+    },
     width: {
       type: String,
       default: "286px",
     },
   },
+  emits: ["update:modelValue"],
   data() {
     return {
       internalDate: moment(),
@@ -95,10 +100,10 @@ export default {
       },
     },
     internalMonth() {
-      let formattedMonth = this.internalDate.format("MMMM");
+      let formattedMonth = this.internalDate?.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.internalDate.format("YYYY")}`;
+      } ${this.internalDate?.format("YYYY")}`;
     },
   },
   methods: {
@@ -106,20 +111,34 @@ export default {
       this.currentForm = this.forms.find((elem) => elem.component === form);
     },
     changeDate() {
-      if (this.range) {
-        this.internalDate = this.value?.from?.clone();
-        this.externalValue = {
-          from: this.value?.from?.clone(),
-          to: this.value?.to?.clone(),
-        };
+      if (this.value) {
+        if (this.range) {
+          this.internalDate = this.value?.from?.clone();
+          this.externalValue = {
+            from: this.value?.from?.clone(),
+            to: this.value?.to?.clone(),
+          };
+        } else {
+          this.internalDate = this.value?.clone();
+          this.externalValue = this.value?.clone();
+        }
       } else {
-        this.internalDate = this.value?.clone();
-        this.externalValue = this.value?.clone();
+        if (this.range) {
+          this.internalDate = moment();
+          this.externalValue = {
+            from: null,
+            to: null,
+          };
+        } else {
+          this.internalDate = moment();
+          this.externalValue = null;
+        }
       }
     },
     cancelChanges() {
       this.changeDate();
       this.changeForm("CalendarDates");
+      this.cancel();
     },
     saveExternalChanges() {
       if (this.range)
diff --git a/src/components/base/Calendar/CalendarDates.vue b/src/components/base/Calendar/CalendarDates.vue
index 9fc435e..ffd24b8 100644
--- a/src/components/base/Calendar/CalendarDates.vue
+++ b/src/components/base/Calendar/CalendarDates.vue
@@ -163,7 +163,7 @@ export default {
     },
     selectDate(date) {
       if (!this.range) {
-        this.externalValue = date;
+        this.externalValue = date.clone();
         return;
       }
       if (this.rangeCount) {
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
index 48e0f73..9dda1ca 100644
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -2,16 +2,15 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input(
-          :with-icon="true",
-          icon-position="left",
+        base-input.search(
           v-model="searchClient",
           placeholder="Введите фамилию",
           @keyup.enter="searchLastName",
-          outlined
+          size="M",
+          :width="280",
+          :icon-left="!searchClient"
         )
-          .flex.items-center.cursor-pointer
-            .icon-search
+          q-icon(name="app:search", size="18px", v-if="!searchClient")
       base-button(
         v-if="createdClientName === ''",
         @click="searchLastName",
@@ -42,8 +41,8 @@
 
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
-import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "ClientsTableHat",
@@ -97,4 +96,6 @@ export default {
   min-width: 280px
 .on-left
   margin-right: 10px
+.search :deep(.q-field__prepend)
+  padding-right: 6px !important
 </style>
diff --git a/src/pages/clients/components/FormCreateAddresses.vue b/src/pages/clients/components/FormCreateAddresses.vue
index 748fb96..84832a8 100644
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -5,66 +5,60 @@
         v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
         label="Полный адрес",
-        outlined
+        size="M"
       )
       .flex.items-center.justify-center.relative
         .line.absolute
         span.text-sm.separator.px-2 или
       .grid.grid-cols-2.gap-y-6.gap-x-4
         base-input(
-          disabled,
-          filled,
-          placeholder="Введите город",
           v-model="addresses.city",
           label="Город",
-          outlined
+          placeholder="Введите город",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          placeholder="Введите область",
           v-model="addresses.region",
           label="Область",
-          outlined
+          placeholder="Введите область",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          placeholder="Введите улицу",
           v-model="addresses.street",
           label="Улица",
-          outlined
+          placeholder="Введите улицу",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          placeholder="Номер дома",
           v-model="addresses.house_number",
           label="Дом",
-          outlined
+          placeholder="Номер дома",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          placeholder="Номер квартиры",
           v-model="addresses.apartment_number",
           label="Квартира",
-          outlined
+          placeholder="Номер квартиры",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          placeholder="000000",
-          mask="######",
           v-model="addresses.zip_code",
           label="Индекс",
-          outlined
+          mask="######",
+          placeholder="000000",
+          disabled,
+          size="M"
         )
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
+import BaseInput from "@/components/BaseInput.vue";
 
 export default {
   name: "FormCreateAddresses",
@@ -79,7 +73,7 @@ export default {
 
 <style lang="sass" scoped>
 .wrapper-addresses
-  height: 368px
+  height: 380px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index 8ec87e3..3d9b6ea 100644
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -7,27 +7,27 @@
         v-model="basicInfo.priority",
         label="Приоритет"
       )
-      base-input(
-        type="date"
+      base-input-date(
         v-model="basicInfo.birth_date",
+        size="M",
+        important,
         label="Дата рождения",
-        outlined,
-        important
+        placeholder="Дата рождения"
       )
       base-input(
         v-model="phone.username",
         placeholder="+7 (915) 644–92–23",
         mask="+7 (###) ###-##-##",
         label="Номер телефона",
-        outlined,
+        size="M",
         important
       )
       base-input(
         v-model="email.username",
         placeholder="user@yandex.ru",
         label="Email",
-        outlined,
-        important
+        important,
+        size="M",
       )
       .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
         span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
@@ -43,9 +43,10 @@
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import BaseSelect from "@/components/base/BaseSelect";
+import BaseInput from "@/components/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 
 export default {
   name: "FormCreateBasicInfo",
@@ -53,6 +54,7 @@ export default {
     BaseInput,
     BaseAddingNetwork,
     BaseSelect,
+    BaseInputDate,
   },
   props: {
     priorityList: Array,
diff --git a/src/pages/clients/components/FormCreateIdentityDocuments.vue b/src/pages/clients/components/FormCreateIdentityDocuments.vue
index 2b0ef19..15b0d6a 100644
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -4,59 +4,59 @@
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          mask="#### ######",
           v-model="identityDocument.pass.series_number",
+          mask="#### ######",
           placeholder="0000 000000",
           label="Серия и номер",
-          outlined
+          size="M"
         )
         base-input(
           v-model="identityDocument.pass.issued_by_org",
           placeholder="Точно как в паспорте",
           label="Кем выдан",
-          outlined
+          size="M"
         )
         base-input(
-          mask="###-###",
           v-model="identityDocument.pass.issued_by_org_code",
+          mask="###-###",
           placeholder="000–000",
           label="Код подразделения",
-          outlined
+          size="M"
         )
-        base-input(
-          type="date"
+        base-input-date(
           v-model="identityDocument.pass.issued_by_date",
           placeholder="Дата",
           label="Дата выдачи",
-          outlined
+          size="M"
         )
     .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          disabled,
-          filled,
-          mask="###-###-### ##",
           v-model="identityDocument.snils.number",
+          mask="###-###-### ##",
           placeholder="000–000–000 00",
-          label="Номер СНИЛС"
+          label="Номер СНИЛС",
+          disabled,
+          size="M"
         )
         base-input(
-          disabled,
-          filled,
-          mask="############",
           v-model="identityDocument.inn.number",
           placeholder="000000000000",
-          label="Номер ИНН"
+          mask="############",
+          label="Номер ИНН",
+          disabled,
+          size="M"
         )
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput";
+import BaseInput from "@/components/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
 
 export default {
   name: "FormCreateIdentityDocuments",
-  components: { BaseInput },
+  components: { BaseInput, BaseInputDate },
   props: {
     identityDocument: Object,
     saveClient: Function,
diff --git a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
index b1a6fc2..af31800 100644
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
@@ -6,18 +6,14 @@
         label="Дата осмотра",
         placeholder="Выберите дату"
         :width="202",
-        type="date",
-        textColor="var(--font-dark-blue-color)"
-        outlined,
+        size="M"
       )
       base-input-time(
         v-model="protocolData.startTime"
         label="Время осмотра",
         :width="202",
-        outlined,
-        type="time",
-        textColor="var(--font-dark-blue-color)",
-        placeholder="Выберите время"
+        placeholder="Выберите время",
+        size="M"
       )
     .flex.flex-col.gap-y-6px
       span.color-grey.line-height.text-sm.font-semibold Врач
@@ -70,8 +66,8 @@ export default {
   data() {
     return {
       protocolData: {
-        date: new Date(),
-        startTime: moment().format("HH:mm"),
+        date: null,
+        startTime: null,
       },
     };
   },