WIP Перемещен инпут

2023-07-18 17:39:53 +03:00
parent 1fdc22a1be
commit 51470f0ed3
61 changed files with 670 additions and 585 deletions
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -1,229 +0,0 @@
-<template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
-    q-input.input(
-      v-model="value",
-      :name="name",
-      :multiple="multiple",
-      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{resize: resize}",
-      :borderless="borderless",
-      :placeholder="placeholder",
-      outlined,
-      :type="type",
-      :readonly="readonly",
-      :disable="disabled",
-      :rules="rule",
-      :lazy-rules="lazyRule",
-      :item-aligned="itemAligned",
-      no-error-icon,
-      :standout="readonly",
-      :mask="mask",
-      :autogrow="autogrow",
-      :accept="accept",
-      :debounce="debounce",
-      :shadow-text="shadowText",
-      :autofocus="autofocus",
-      hide-bottom-space
-    )
-      template(v-slot:prepend, v-if="iconLeft")
-        slot(name="iconLeft")
-      template(v-slot:append, v-if="iconRight")
-        slot(name="iconRight")
-      slot(v-if="!iconLeft && !iconRight")
-</template>
-
-<script>
-import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
-
-export default {
-  name: "BaseInput",
-  components: { BaseInputContainer },
-  props: {
-    multiple: Boolean,
-    doc: Boolean,
-    autofocus: Boolean,
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      default: "text",
-    },
-    accept: {
-      type: String,
-      default: "",
-    },
-    resize: {
-      type: String,
-      default: "none",
-    },
-    shadowText: String,
-    mask: String,
-    debounce: [String, Number],
-    width: Number,
-    rule: Array,
-    lazyRule: [Boolean, String],
-    itemAligned: Boolean,
-    modelValue: [String, Date, Number],
-    placeholder: String,
-    disabled: Boolean,
-    label: String,
-    readonly: Boolean,
-    iconLeft: Boolean,
-    iconRight: Boolean,
-    name: String,
-    important: Boolean,
-    size: String,
-    circle: Boolean,
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        if (this.type === "date") {
-          return this.modelValue
-            ? this.modelValue?.toISOString().split("T")[0]
-            : null;
-        }
-        return this.modelValue;
-      },
-      set(value) {
-        this.type === "date"
-          ? this.$emit("update:modelValue", value ? new Date(value) : null)
-          : this.$emit("update:modelValue", value);
-      },
-    },
-    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",
-          };
-        case "auto":
-          return {
-            "--input-height": "auto",
-            "--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",
-          };
-      }
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.font-input
-  font-feature-settings: 'pnum' on, 'lnum' on
-
-.circle
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-
-.doc
-  width: 100%
-  height: 100%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-  ::file-selector-button
-    cursor: pointer
-
-.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>
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -23,12 +23,8 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
-import BaseSelect from "@/components/base/BaseSelect";
-
 export default {
  name: "HeaderInputs",
-  components: { BaseInput, BaseSelect },
  data() {
    return {
      selectedFilter: "Календарь",
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -5,7 +5,7 @@
 </template>

 <script>
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
  name: "TableAddingNetwork",
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -64,7 +64,7 @@

 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseCategorySelection",
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -106,7 +106,7 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import * as moment from "moment";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseClientFormClient",
--- a/src/components/base/BaseDownload.vue
+++ b/src/components/base/BaseDownload.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-  label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+  label.download.flex.relative.items-center.justify-center.rounded(
    :style="{height: `${height}px`, width: width ? `${width}px` : '100%'}"
  )
-    base-input.w-full.h-full(
+    base-input.w-full(
      @change="(e) => addNewFiles(e)",
      doc,
      type="file",
      :accept="getAccept",
      id="upload"
-      borderless,
-      :multiple="multiple"
+      :size="`${height}px`"
+      :height="`${height}px`"
    )
    q-icon.absolute(
      v-if="withIcon",
      name="app:download",
      :size="sizeIcon"
      )
-    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
+    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-base.w-full(
      v-else,
      :style="{color: 'var(--font-grey-color)'}"
    )
@@ -42,7 +42,7 @@ export default {
    multiple: Boolean,
    height: {
      type: Number,
-      default: 93,
+      default: 92,
    },
    width: Number,
    type: {
@@ -91,15 +91,15 @@ export default {
 </script>

 <style lang="sass" scoped>
-#upload :deep(.q-field__native)
-  cursor: pointer
-  height: 100%
-  padding: 0
-#upload :deep(.q-field__control)
-  height: 100%
+// #upload :deep(.q-field__native)
+//   cursor: pointer
+//   height: 100%
+//   padding: 0
+// #upload :deep(.q-field__control)
+//   height: 100%
 .download
-  border: 1px dashed var(--font-grey-color)
-  background-color: var(--default-white)
+  background-color: var(--bg-light-grey)
+  border-radius: 4px
  &:hover .q-icon
    opacity: 0.6
  & .q-icon
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,29 +1,24 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
+    q-input.input(
      v-model="value",
      :name="name",
      :multiple="multiple",
      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
+      :input-style="{resize: resize, height: height}",
      :borderless="borderless",
      :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
      :type="type",
      :readonly="readonly",
      :disable="disabled",
-      :filled="filled",
-      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
+      no-error-icon,
+      :standout="readonly",
      :mask="mask",
-      :maxlength="maxLength",
      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
      :accept="accept",
      :debounce="debounce",
      :shadow-text="shadowText",
@@ -31,10 +26,10 @@
      hide-bottom-space
    )
      template(v-slot:prepend, v-if="iconLeft")
-        slot
+        slot(name="iconLeft")
      template(v-slot:append, v-if="iconRight")
-        slot
-      slot.cursor-pointer(v-if="!iconLeft && !iconRight")
+        slot(name="iconRight")
+      slot(v-if="!iconLeft && !iconRight")
 </template>

 <script>
@@ -45,41 +40,8 @@ export default {
  components: { BaseInputContainer },
  props: {
    multiple: Boolean,
-    circle: Boolean,
    doc: Boolean,
    autofocus: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    fontSize: {
-      type: String,
-      default: "14px",
-    },
-    fontWeight: {
-      type: Number,
-      default: 500,
-    },
-    minHeight: {
-      type: String,
-      default: "0px",
-    },
-    lineHeight: {
-      type: String,
-      default: "19px",
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
    borderless: {
      type: Boolean,
      default: false,
@@ -91,10 +53,6 @@ export default {
    type: {
      default: "text",
    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
    accept: {
      type: String,
      default: "",
@@ -107,12 +65,8 @@ export default {
    mask: String,
    debounce: [String, Number],
    width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
    rule: Array,
    lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
    itemAligned: Boolean,
    modelValue: [String, Date, Number],
    placeholder: String,
@@ -123,6 +77,9 @@ export default {
    iconRight: Boolean,
    name: String,
    important: Boolean,
+    size: String,
+    circle: Boolean,
+    height: String,
  },
  emits: ["update:modelValue"],
  computed: {
@@ -141,6 +98,104 @@ export default {
          : this.$emit("update:modelValue", value);
      },
    },
+    sizeVariable() {
+      if (this.size === "XS")
+        return {
+          "--input-height": "28px",
+          "--text-size": "12px",
+          "--line-height": "135%",
+          "--px": "0 8px",
+          "--py": "10px 0",
+        };
+      if (this.size === "S")
+        return {
+          "--input-height": "32px",
+          "--text-size": "12px",
+          "--line-height": "135%",
+          "--px": "0 8px",
+          "--py": "10px 0",
+        };
+      if (this.size === "M")
+        return {
+          "--input-height": "40px",
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      if (this.size === "L")
+        return {
+          "--input-height": "48px",
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      if (this.size)
+        return {
+          "--input-height": this.size,
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      return {
+        "--input-height": "56px",
+        "--text-size": "16px",
+        "--line-height": "normal",
+        "--px": "0 16px",
+        "--py": "8px 0",
+      };
+      // 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",
+      //     };
+      //   case "auto":
+      //     return {
+      //       "--input-height": "auto",
+      //       "--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",
+      //     };
+    },
  },
 };
 </script>
@@ -162,13 +217,63 @@ export default {
  height: 100%
  z-index: 5
  opacity: 0
-  cursor: pointer
+  cursor: pointer !important
  ::file-selector-button
    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(input[type="file" i])
+  cursor: pointer
+
+.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>
--- a/src/components/base/BaseInputFullName.vue
+++ b/src/components/base/BaseInputFullName.vue
@@ -48,7 +48,7 @@
 import BaseModal from "./BaseModal.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseInputFullName",
--- a/src/components/base/BaseInputNumber.vue
+++ b/src/components/base/BaseInputNumber.vue
@@ -1,30 +1,23 @@
 <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(
      ref="numberInput"
      v-model="value",
      :name="name",
      :multiple="multiple",
-      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize }",
-      :borderless="borderless",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ resize: resize }",
      :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
      type="number",
      :readonly="readonly",
      :disable="disabled",
-      :filled="filled",
-      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule || ruleNumberInput",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
+      no-error-icon,
      :mask="mask",
-      :maxlength="maxLength",
      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
      :accept="accept",
      :debounce="null",
      :shadow-text="shadowText"
@@ -48,14 +41,13 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import { ruleNumberInput } from "@/shared/utils/rulesInputs";
 import { roundNumber } from "@/shared/utils/methodsObjects";

 export default {
  name: "BaseInputNumber",
-  components: { BaseInput, BaseInputContainer },
+  components: { BaseInputContainer },
  data() {
    return {
      intervalId: 0,
@@ -80,35 +72,10 @@ export default {
    reverseValue: Boolean,
    multiple: Boolean,
    circle: Boolean,
-    doc: 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: "",
@@ -121,15 +88,8 @@ export default {
    mask: String,
    debounce: [String, Number],
    width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
    rule: Array,
    lazyRule: String,
-    noErrorIcon: {
-      type: Boolean,
-      default: true,
-    },
    itemAligned: Boolean,
    modelValue: [Number],
    placeholder: String,
@@ -138,6 +98,7 @@ export default {
    readonly: Boolean,
    iconLeft: Boolean,
    name: String,
+    size: String,
  },
  emits: ["update:modelValue"],
  methods: {
@@ -197,6 +158,59 @@ export default {
    rounding() {
      return String(this.step).split(".")[1]?.length || 0;
    },
+
+    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": "2px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "auto":
+          return {
+            "--input-height": "auto",
+            "--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",
+          };
+      }
+    },
  },
 };
 </script>
@@ -214,4 +228,57 @@ input[type=number]::-webkit-inner-spin-button
  color: var(--font-grey-color)
  &:hover
    color: var(--font-dark-blue-color)
+
+.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>
--- a/src/components/base/BaseTextarea.vue.vue
+++ b/src/components/base/BaseTextarea.vue.vue
@@ -0,0 +1,132 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px'}")
+    q-input.input(
+      v-model="value",
+      :name="name",
+      :multiple="multiple",
+      :input-style="{resize: resize, 'font-input': true, height: height}",
+      :placeholder="placeholder",
+      outlined,
+      type="textarea",
+      :readonly="readonly",
+      :disable="disabled",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      no-error-icon,
+      :autogrow="autogrow",
+      :accept="accept",
+      :debounce="debounce",
+      :shadow-text="shadowText",
+      :autofocus="autofocus",
+      hide-bottom-space
+    )
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInput",
+  components: { BaseInputContainer },
+  props: {
+    multiple: Boolean,
+    autofocus: Boolean,
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    shadowText: String,
+    mask: String,
+    debounce: [String, Number],
+    width: Number,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    itemAligned: Boolean,
+    modelValue: [String, Date, Number],
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    name: String,
+    height: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: 16px
+  line-height: normal
+  color: var(--font-dark-blue-color)
+  padding: 12px 16px
+  &::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: 0 0
+  &: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>
--- a/src/components/base/BaseUploadPhoto.vue
+++ b/src/components/base/BaseUploadPhoto.vue
@@ -25,10 +25,10 @@
 </template>

 <script>
-import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseModalUploadPhoto",
--- a/src/components/kit/KitLongList.vue
+++ b/src/components/kit/KitLongList.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  base-input-container(:label="label")
    .relative    
-      base-input(type="text", v-model="value.label", outlined)
+      base-input(type="text", v-model="value.label", size="M")
        template(#icon)
          .icon(@click="isExpand = !isExpand")
      .menu(v-if="isExpand")
--- a/src/components/kit/KitShortList.vue
+++ b/src/components/kit/KitShortList.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  base-input-container(:label="label")
    .relative
-      base-input(type="text", v-model="value.label", outlined)
+      base-input(type="text", v-model="value.label", size="M")
        template(#icon)
          .icon(@click="isExpand = !isExpand")
      .menu(v-if="isExpand")
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -116,16 +116,16 @@
              :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
              :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
            )
-            base-input(
-              type="date",
-              v-else-if="isChange && section !== 'docs' && section !== 'additional'",
-              v-model="sectionInfo.issued_by_date",
-              outlined
-            )
-              .copy.icon-copy.cursor-pointer(
-                v-if="item.copy",
-                @click="() => copyValue(item)"
+            .bg-white(v-else-if="isChange && section !== 'docs' && section !== 'additional'",)
+              base-input(
+                type="date",
+                v-model="sectionInfo.issued_by_date",
+                size="S"
              )
+                .copy.icon-copy.cursor-pointer(
+                  v-if="item.copy",
+                  @click="() => copyValue(item)"
+                )
            .separation.flex.items-center.justify-center.relative.mt-10px.mb(
              v-if="section === 'addresses' && isChange",
              class="gap-y-1.5"
@@ -194,6 +194,7 @@ import exelIcon from "@/assets/icons/exel.svg";
 import * as moment from "moment";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 import StepperCreateAgreement from "./StepperCreateAgreement";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";

 export default {
  name: "ClientDetailInfoSection",
@@ -209,6 +210,7 @@ export default {
    TableChoiceAddingDoc,
    TableCreateNote,
    StepperCreateAgreement,
+    BaseInputDate,
  },
  props: {
    saveNewDoc: Function,
--- a/src/pages/clients/components/ClientDetailInput.vue
+++ b/src/pages/clients/components/ClientDetailInput.vue
@@ -1,13 +1,14 @@
 <template lang="pug">
-  base-input(
-    :type="choiceType"
-    v-model="value",
-    :placeholder="placeholder",
-    :maxLength="maxLength",
-    :mask="sharp",
-    :autogrow="choiceGrow",
-    outlined
-  )
+  .bg-white
+    base-input(
+      :type="choiceType"
+      v-model="value",
+      :placeholder="placeholder",
+      :maxLength="maxLength",
+      :mask="sharp",
+      :autogrow="choiceGrow",
+      :size="!choiceGrow ? 'S' : 'auto'"
+    )
    slot
 </template>

--- a/src/pages/clients/components/ClientDetailSectionAddress.vue
+++ b/src/pages/clients/components/ClientDetailSectionAddress.vue
@@ -11,20 +11,16 @@
    base-input(
      disabled,
      placeholder="Введите область",
-      labelStyle="text-xxs",
-      textStyle="text-sm",
      v-model="dopeAddress.region",
      label="Область",
-      outlined
+      size="S"
    )
    base-input(
      disabled,
      placeholder="Введите улицу",
-      labelStyle="text-xxs",
-      textStyle="text-sm",
      v-model="dopeAddress.street",
      label="Улица",
-      outlined
+      size="S"
    )
    .flex.gap-x-4
      base-input(
@@ -32,17 +28,14 @@
        placeholder="Дом",
        label="Дом"
        v-model="dopeAddress.house",
-        labelStyle="text-xxs",
-        textStyle="text-sm",
+        size="S"
      )
      base-input(
        disabled,
        placeholder="Квартира",
        label="Квартира",
        v-model="dopeAddress.flat",
-        labelStyle="text-xxs",
-        textStyle="text-sm",
-        outlined
+        size="S"
      )
    base-input(
      disabled,
@@ -50,9 +43,7 @@
      placeholder="000000",
      label="Индекс",
      v-model="dopeAddress.index",
-      labelStyle="text-xxs",
-      textStyle="text-sm",
-      outlined
+      size="S"
    )
 </template>

--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -10,7 +10,8 @@
          :width="280",
          :icon-left="!searchClient"
        )
-          q-icon(name="app:search", size="18px", v-if="!searchClient")
+          template(v-slot:iconLeft, v-if="!searchClient")
+            q-icon(name="app:search", size="18px")
      base-button(
        v-if="createdClientName === ''",
        @click="searchLastName",
@@ -42,7 +43,7 @@
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ClientsTableHat",
--- a/src/pages/clients/components/FormCreateAddresses.vue
+++ b/src/pages/clients/components/FormCreateAddresses.vue
@@ -58,7 +58,7 @@

 <script>
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "FormCreateAddresses",
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -45,7 +45,7 @@
 <script>
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import BaseSelect from "@/components/base/BaseSelect";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";

 export default {
--- a/src/pages/clients/components/FormCreateIdentityDocuments.vue
+++ b/src/pages/clients/components/FormCreateIdentityDocuments.vue
@@ -51,7 +51,7 @@
 </template>

 <script>
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";

 export default {
--- a/src/pages/clients/components/FormCreateMedicalCard.vue
+++ b/src/pages/clients/components/FormCreateMedicalCard.vue
@@ -19,8 +19,6 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
-import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/oldMedicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/oldMedicalCard/components/MedicalIdentityDocuments";
 import MedicalPolicyDocuments from "@/pages/oldMedicalCard/components/MedicalPolicyDocuments";
@@ -33,8 +31,6 @@ export default {
  name: "FormCreateMedicalCard",
  mixins: [v_model],
  components: {
-    BaseInput,
-    BaseSelect,
    MedicalBaseData,
    MedicalIdentityDocuments,
    MedicalPolicyDocuments,
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue
@@ -12,19 +12,19 @@
        type="date",
        v-model="signedDate",
        label="Дата подписания",
-        outlined
+        size="M"
      )        
      base-input(
        type="date",
        v-model="startDate",
        label="Начало оказания услуг"
-        outlined
+        size="M"
      )        
      base-input(
        type="date",
        v-model="endDate",
        label="Окончание оказания услуг"
-        outlined
+        size="M"
      )         
    base-select(
      placeholder="Поручить",
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue
@@ -4,8 +4,8 @@
    base-input(
      label="ФИО пациента",
      v-model="patientFullName",
-      disabled
-      outlined
+      disabled,
+      size="M"
    )
    //-.flex.justify-between
      base-select.w-80(
--- a/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
+++ b/src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue
@@ -11,20 +11,20 @@
      base-input(
        type="date",
        v-model="signedDate",
-        label="Дата подписания"
-        outlined
+        label="Дата подписания",
+        size="M"
      )
      base-input(
        type="date",
        v-model="startDate",
-        label="Начало оказания услуг"
-        outlined
+        label="Начало оказания услуг",
+        size="M"
      )
      base-input(
        type="date",
        v-model="endDate",
-        label="Окончание оказания услуг"
-        outlined
+        label="Окончание оказания услуг",
+        size="M"
      )         
    base-select(
      placeholder="Поручить",
--- a/src/pages/clients/components/TableAddingNewAdditional.vue
+++ b/src/pages/clients/components/TableAddingNewAdditional.vue
@@ -3,7 +3,7 @@
    .corner
    .wrap.flex.flex-col.p-4.gap-y-4
      .flex.flex-col.gap-y-1
-        base-input(:with-icon="true" v-model="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
+        base-input(v-model="newAdditionalData.header", placeholder="Заголовок")
          span.counter {{`${newAdditionalData.header.length}/140`}}
        .description.flex.px-4.py-3
          textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")
--- a/src/pages/clients/components/TableCreateNote.vue
+++ b/src/pages/clients/components/TableCreateNote.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  .flex.flex-col.gap-y-3.p-4(:style="{'width': '485px'}")
    .flex.flex-col.gap-y-3.relative
-      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40", outlined)
+      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40")
      .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
    .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
      textarea.place-input.w-full.outline-0.not-italic.resize-none(
--- a/src/pages/clients/components/TableCreatePackageDoc.vue
+++ b/src/pages/clients/components/TableCreatePackageDoc.vue
@@ -18,7 +18,6 @@
          base-input(
            v-model="patient",
            placeholder="Введите название для пакета документов",
-            outlined
          )
            span.counter 
        .flex.gap-x-4
@@ -28,7 +27,7 @@
          .flex.flex-col(class="gap-y-1.5")
            .counter.font-semibold.text-smm Дата подписания
            .input-date.flex.h-10.justify-center
-              base-input(type="date", :width-input="277", outlined)
+              base-input(type="date", :width-input="277")
      .flex.flex-col.gap-y-6
        span.font-bold Дополнительное
        .flex.flex-col.mb-124px(class="gap-y-1.5")
@@ -46,7 +45,6 @@
              icon-position="left",
              :width-input="310",
              placeholder="Поиск",
-              outlined
            )
              .counter.icon-search
            base-select.h-10(placeholder="Вид услуги")
--- a/src/pages/clients/components/cells/TableCellBodyBirthday.vue
+++ b/src/pages/clients/components/cells/TableCellBodyBirthday.vue
@@ -3,13 +3,13 @@
    :style="{ width : width + 'px'}"
  )
    span(v-if="!isOpenChange") {{ birthday }}
-    base-input(
+    base-input.bg-white(
      :width="140"
      type="date",
      v-if="isOpenChange",
      @click.stop,
      v-model="value.age",
-      outlined
+      size="M"
    )
 </template>

--- a/src/pages/clients/components/cells/TableCellBodyEmail.vue
+++ b/src/pages/clients/components/cells/TableCellBodyEmail.vue
@@ -8,12 +8,12 @@
      @mouseleave="changeHover"
    ) {{maxValue}}
    .email
-      base-input(
+      base-input.bg-white(
        v-if="isOpenChange",
        @click.stop,
        v-model="value.email.username",
        :placeholder="value.email.username",
-        outlined
+        size="M"
      )
 </template>

--- a/src/pages/clients/components/cells/TableCellBodyName.vue
+++ b/src/pages/clients/components/cells/TableCellBodyName.vue
@@ -7,11 +7,11 @@
      img.h-full.object-cover(:src="url + photo")
    span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
    .name(v-if="isOpenChange")
-      base-input(
+      base-input.bg-white(
        @click.stop,
        v-model="value.fullName",
        placeholder="Фамилия Имя Отчество",
-        outlined
+        size="M"
      )
 </template>

--- a/src/pages/clients/components/cells/TableCellBodyPhone.vue
+++ b/src/pages/clients/components/cells/TableCellBodyPhone.vue
@@ -4,12 +4,12 @@
      v-if="!isOpenChange"
    ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
    .phone(v-if="isOpenChange")
-      base-input(
+      base-input.bg-white(
        @click.stop,
        v-model="value.phone.username",
        :placeholder="value.phone.username",
        mask="+7 (###) ###-##-##",
-        outlined
+        size="M"
      )
 </template>

--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -48,7 +48,7 @@ import logoMark from "@/assets/images/logoMark.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 import eye_open from "@/assets/icons/eye_open.svg";
 import eye_close from "@/assets/icons/eye_close.svg";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "TheLogin",
--- a/src/pages/newCalendar/components/CalendarHeader.vue
+++ b/src/pages/newCalendar/components/CalendarHeader.vue
@@ -5,8 +5,10 @@
      :width="280",
      size="M",
      placeholder="Найти ...",
+      icon-left
    )
-      q-icon(name="app:search", size="20px")
+      template(v-slot:iconLeft)
+        q-icon(name="app:search", size="20px")
    .flex.gap-x-4.items-center.justify-center
      q-btn(
        color="secondary",
@@ -21,7 +23,6 @@
      base-input.search(
        size="M"
        :width="300",
-        iconRight,
        v-model="currentWeek",
      )
        .h-5.w-5.flex.items-center.justify-center
@@ -73,7 +74,7 @@ import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import { mapState, mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import DateSwitcherSvg from "@/pages/newCalendar/components/CalendarDateSwitcherSvg.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 export default {
  name: "CalendarHeader",
  mixins: [v_model],
--- a/src/pages/newCalendar/components/CalendarOpenSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarOpenSidebar.vue
@@ -83,7 +83,7 @@
 import arrow from "@/assets/icons/double_left_arrow.svg";
 import icon_ok from "@/assets/icons/icon_ok.svg";
 import sort_word from "@/assets/icons/sort_word.svg";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import BaseButton from "@/components/base/BaseButton.vue";
--- a/src/pages/newCalendar/components/CalendarSidebar.vue
+++ b/src/pages/newCalendar/components/CalendarSidebar.vue
@@ -127,7 +127,7 @@ import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "CalendarSidebar",
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -63,7 +63,6 @@ import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo"
 import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
@@ -77,7 +76,6 @@ export default {
    FormCreateIdentityDocuments,
    FormCreateAddresses,
    FormCreateAttachments,
-    BaseInput,
    BaseInputFullName,
    BaseCalendar,
    HeaderRecordForm,
--- a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
+++ b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue
@@ -14,33 +14,25 @@
          .w-32.justify-start
            .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }}
          .flex.min-w-64.gap-2.w-full.items-center
-            base-input( 
+            base-input(
              :readonly="!isEdit" 
              v-model="allergy.name"
              @update:model-value="checkChangeInput"
              name="name"
              :rule="configData.name.rules"
-              no-error-icon
              :width="350"
              placeholder="Аллерген"
-              type="text"  
-              :standout="!isEdit" 
-              :outlined="isEdit" 
-              text-color="black"
-              )
+              size="M"
+            )
            base-input.w-full(
              :readonly="!isEdit" 
              v-model="allergy.title"
              @update:model-value="checkChangeInput"
              name="title"
              :rule="configData.title.rules"
-              no-error-icon
-              placeholder="Проявление аллергии"
-              type="text"  
-              :standout="!isEdit" 
-              :outlined="isEdit" 
-              text-color="black"
-              )
+              placeholder="Проявление аллергии",
+              size="M"
+            )
            .delete-contact.icon-cancel.text-xxs.cursor-pointer(
              v-if="isEdit" 
              @click="() => deleteAllergy(index)"
@@ -60,7 +52,6 @@

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider.vue";
 import { getFieldsNameUnvalidated } from "@/shared/utils/changesObjects";
 import { addNotification } from "@/components/Notifications/notificationContext";
@@ -68,6 +59,7 @@ import { checkChangeData } from "@/shared/utils/changesObjects";
 import { allergiesConfig } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapState, mapGetters } from "vuex";
 import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "AllergiesForm",
--- a/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/BasicDataForm.vue
@@ -78,7 +78,7 @@ import {
  errorMap,
 } from "@/pages/newMedicalCard/utils/medicalConfig.js";
 import { mapGetters, mapState } from "vuex";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";

 export default {
--- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue
@@ -76,7 +76,7 @@ import {
 import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData";
 import { mapState, mapGetters } from "vuex";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ContactsForm",
--- a/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
@@ -85,7 +85,7 @@ import {
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 import { addNotification } from "@/components/Notifications/notificationContext";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
  name: "DocumentsForm",
--- a/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
+++ b/src/pages/newMedicalCard/components/BasicDataForms/InsuranceForm.vue
@@ -50,9 +50,8 @@
          )
            q-field.items-center.categories(
              :style="{cursor: isEdit ? 'pointer' : 'default'}",
-              standout,
              :readonly="!isEdit",
-              :outlined="isEdit",
+              outlined
            ) {{selectCategory(basic[insurance.insuranceKey][field.key])}}
            base-modal(
              default-padding,
@@ -104,7 +103,7 @@ import BaseUploadPhoto from "@/components/base/BaseUploadPhoto.vue";
 import BaseCategorySelection from "@/components/base/BaseCategorySelection.vue";
 import { checkChangeData } from "@/shared/utils/changesObjects";
 import { addNotification } from "@/components/Notifications/notificationContext";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "InsuranceForm",
@@ -425,6 +424,7 @@ export default {
  height: 40px
  color: var(--font-dark-blue-color)
  padding: 0 16px
+  background: var(--bg-light-grey) !important
  &:before
    border: none !important
    transition: none
@@ -439,4 +439,16 @@ export default {
  line-height: normal
  color: var(--font-dark-blue-color)
  padding: 8px 0
+  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
 </style>
--- a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
+++ b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue
@@ -51,39 +51,47 @@
                        )
            .flex.w-full.relative(v-else)
              q-menu.h-fit(
-                v-if="field.key === 'last_name'"
-                fit 
-                v-model="isOpenListConfidant"
-                :style="{'max-height': '160px', 'position': 'fixed !important'}"
-                no-focus 
-                anchor="bottom right" 
+                v-if="field.key === 'last_name'",
+                fit,
+                v-model="isOpenListConfidant",
+                :style="{'max-height': '160px', 'position': 'fixed !important'}",
+                no-focus,
+                anchor="bottom right",
                self="top right"
-                )
+              )
                .flex.flex-col.w-full.h-full.overflow-y-auto
                  .confidant-item.flex.h-10.items-center.cursor-pointer.text-base.px-2(
                    v-for="person in listPersons" 
                    :id="person.id"
                    @click="(e) => choiceConfidant(e)"
-                    ) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}           
+                  ) {{ `${person.last_name || ""} ${person.first_name || ""} ${person.patronymic || ""}` }}
+              base-textarea.w-full(
+                v-if="field.type === 'textarea'",
+                :readonly="!isEdit",
+                v-model="confidant[field.key].value",
+                @update:model-value="(val) => checkChangeInput(val, field.key)",
+                :mask="field.mask",
+                :type="field.type",
+                :name="field.key",
+                :placeholder="field.placeholder",
+                height="96px"
+              )
              base-input.w-full(
-                :readonly="!isEdit" 
-                v-model="confidant[field.key].value"
-                @update:model-value="(val) => checkChangeInput(val, field.key)"
-                :mask="field.mask"
-                :type="field.type"
-                :name="field.key"
-                :placeholder="field.placeholder" 
-                :standout="!isEdit" 
-                :outlined="isEdit"
-                no-error-icon
-                :rule="field.rules"
-                text-color="black"
-                )
+                v-else,
+                :readonly="!isEdit",
+                v-model="confidant[field.key].value",
+                @update:model-value="(val) => checkChangeInput(val, field.key)",
+                :mask="field.mask",
+                :type="field.type",
+                :name="field.key",
+                :placeholder="field.placeholder",
+                :rule="field.rules",
+                size="M"
+              )
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 import BasePopup from "@/components/base/BasePopup.vue";
@@ -102,6 +110,8 @@ import {
  mapNetworks,
 } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { fetchWrapper } from "@/shared/fetchWrapper";
+import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ConfidantForm",
@@ -114,6 +124,7 @@ export default {
    BasePopup,
    BaseAddingNetwork,
    TheNotificationProvider,
+    BaseTextarea,
  },
  data() {
    return {
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateCreateModal.vue
@@ -14,7 +14,7 @@
          .grey-border.rounded-md.flex.w-full.py-2.pr-4.pl-2.justify-between.items-center(v-for="picture in dataEntry.pictures")
            .flex.items-center
              img.grey-border.rounded.w-8.h-8.mr-3(:src="picture.photo")
-              span.name.text-base.font-normal.mr-2.whitespace-pre-wrap {{picture.name}}
+              span.name.text-base.font-normal.mr-2.whitespace-pre-wrap.color-dark {{picture.name}}
              span.text-smm.font-normal.whitespace-nowrap(:style="{color: 'var(--font-dark-grey-color)'}") {{`${picture.size} МБ`}}
            q-icon.delete-img.cursor-pointer(
              @click="() => deleteImg(picture.id)",
@@ -23,18 +23,11 @@
              )
        .flex.flex-col.gap-y-6px.justify-start.w-full
          span.text-smm.font-semibold.title-inputs Комментарий врача
-          .flex.comments.rounded
-            base-input.w-full.min-h-75(
-              v-model="dataEntry.comment",
-              type="textarea",
-              borderless,
-              dense,
-              placeholder="Введите описание"
-              autogrow,
-              min-height="75px",
-              font-size="16px",
-              :text-color="!dataEntry.comment ? 'var(--font-grey-color)' : 'var(--font-dark-blue-color)'"
-              )
+          base-textarea.w-full(
+            v-model="dataEntry.comment",
+            placeholder="Введите описание"
+            height="92px"
+          )
      .flex.gap-x-2.text-smm
        base-button(
          width="126px",
@@ -51,16 +44,21 @@

 <script>
 import BaseModal from "@/components/base/BaseModal.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseDownload from "@/components/base/BaseDownload.vue";
 import { mapActions } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
 import moment from "moment";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";

 export default {
  name: "HealthStateCreateModal",
-  components: { BaseModal, BaseDownload, BaseInput, BaseButton },
+  components: {
+    BaseModal,
+    BaseDownload,
+    BaseButton,
+    BaseTextarea,
+  },
  mixins: [v_model],
  data() {
    return {
@@ -113,15 +111,14 @@ export default {
 </script>

 <style lang="sass" scoped>
+.color-dark
+  color: var(--font-dark-blue-color)
 .name
  max-width: 270px
 .delete-img
  color: var(--font-grey-color)
  &:hover
    opacity: 0.7
-.comments
-  border: 1px solid var(--border-light-grey-color)
-  padding: 3px 8px 6px 16px
 .title-inputs
  color: var(--font-grey-color)
 .form-wrapper
--- a/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
+++ b/src/pages/newMedicalCard/components/HealthState/HealthStateForm.vue
@@ -56,17 +56,17 @@
          with-icon,
          size-icon="18px",
          :returned-fields="['photo', 'id', 'name', 'size']"
-          )
+          :width="216"
+          :height="92"
+        )
      .flex.w-full.flex-col.gap-y-2
        .flex.font-semibold.text-sm(:style="{color: 'var(--font-grey-color)'}") Комментарий врача
-        .flex.comments.rounded(v-if="isEdit")
-          q-input.w-full(
-            v-model="value.comment",
-            type="textarea",
-            borderless,
-            dense,
-            :input-style="{'min-height': '75px', 'font-weight': '500'}"
-            )
+        base-textarea.w-full(
+          v-if="isEdit",
+          v-model="value.comment",
+          size="126px",
+          height="126px"
+        )
        .flex.flex-col.w-full.pl-10px(v-else)
          .flex(v-for="comment in getListComment")
            .flex.gap-x-10px.w-full(v-if="comment")
@@ -77,20 +77,20 @@

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput";
 import BaseDownload from "@/components/base/BaseDownload.vue";
 import BaseModalShowingPicture from "@/components/base/BaseModalShowingPicture.vue";
 import moment from "moment";
 import { mapActions, mapGetters } from "vuex";
 import { v_model } from "@/shared/mixins/v-model";
+import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";

 export default {
  name: "HealthStateForm",
  components: {
    MedicalFormWrapper,
    BaseModalShowingPicture,
-    BaseInput,
    BaseDownload,
+    BaseTextarea,
  },
  data() {
    return {
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ClinicalForm.vue
@@ -19,12 +19,15 @@
              ) {{item.label + " - " + item.value}}
          .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
            .flex.gap-x-2
-              base-input(placeholder="Поиск", outlined, :width="452", iconLeft)
-                q-icon(
-                  name="app:icon-search",
-                  size="20px",
-                  style="color: var(--font-grey-color)"
-                )
+              base-input.search(
+                placeholder="Поиск",
+                :width="452",
+                iconLeft,
+                size="M",
+                icon-left
+              )
+                template(v-slot:iconLeft)
+                  q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
              .button
                q-btn(
                  icon="filter_alt",
@@ -47,9 +50,9 @@

 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import { mapState } from "vuex";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ClinicalForm",
@@ -165,4 +168,7 @@ export default {

 .q-checkbox :deep(.q-checkbox__inner:before)
  background: none !important
+
+.search :deep(.q-field__prepend)
+  padding-right: 6px
 </style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DataForm.vue
@@ -15,7 +15,7 @@
              :class="{'pointer': fillInspection || change}"
              v-for="tag in protocolData[data.state].complaints", :key="tag.id"
            ) {{ tag }}
-          base-input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите данные...")
+          q-input.input.px-3(v-if="change || fillInspection", type="textarea", autogrow, borderless, placeholder="Введите данные...")
        template(v-if="!(change || fillInspection)", v-for="file in protocolData[data.state].files")
          .wrap.flex.flex-col.gap-1.gap-y-3(v-if="file?.data?.length")
            .title.font-semibold.text-smm.mb-2 {{file.name}}
@@ -34,8 +34,15 @@
                  .title.font-medium.text-xsx {{item.size + " Мб"}}
        .filter.flex.flex-col.gap-y-4.relative(v-if="change || fillInspection")
          .flex.gap-x-2
-            base-input(placeholder="Поиск", outlined, :width="232", iconLeft)
-              q-icon(name="app:icon-search", size="20px", style="color: var(--font-grey-color)")
+            base-input.search(
+              placeholder="Поиск",
+              :width="232",
+              iconLeft,
+              icon-left,
+              size="M",
+            )
+              template(v-slot:iconLeft)
+                q-icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
            .button
              q-btn(
                icon="filter_alt",
@@ -77,8 +84,8 @@
            type="file",
            id="upload",
            :accept="checkedName(file.name) ? '.xlsx, .xls, .doc, .docx, .pdf, .odt' : 'image/*'",
-            borderless,
            multiple
+            size="62px"
          )
          .text.flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full
            span {{checkedName(file.name) ? 'Загрузите документ' : 'Загрузите скан документа'}}
@@ -103,9 +110,9 @@
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import { mapState } from "vuex";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "DataForm",
@@ -308,7 +315,7 @@ export default {

 .download
  height: 62px
-  border: 1px dashed var(--border-light-grey-color)
+  background-color: var(--bg-light-grey)
  border-radius: 4px
  cursor: pointer

@@ -345,4 +352,17 @@ export default {
  border-radius: 4px
  width: fit-content
  padding: 8px 16px 8px 8px
+
+.search :deep(.q-field__prepend)
+  padding-right: 6px
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: 14px
+  line-height: 135%
+  color: var(--font-dark-blue-color)
+  padding: 4px 0
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
 </style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/DiseaseForm.vue
@@ -16,24 +16,24 @@
            size="36px"
          )
        .textarea.flex.w-full
-          base-input.w-full(
+          base-textarea.w-full(
            v-model="protocolData[data.state].text",
            type="textarea",
-            outlined,
            resize="vertical",
-            placeholder="Введите данные..."
+            placeholder="Введите данные...",
+            height="126px"
          )
      .font-medium.text-smm(v-else) {{protocolData[data.state]?.text}}
 </template>

 <script>
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 import { mapState } from "vuex";
+import BaseTextarea from "@/components/base/BaseTextarea.vue.vue";

 export default {
  name: "DiseaseForm",
-  components: { MedicalFormWrapper, BaseInput },
+  components: { MedicalFormWrapper, BaseTextarea },
  props: {
    data: Object,
    fillInspection: Boolean,
@@ -77,8 +77,4 @@ export default {
 .q-checkbox :deep(.q-checkbox__bg)
  border-radius: 4px
  border: 1.5px solid var(--font-grey-color)
-
-.textarea
-  box-sizing: border-box
-  min-height: 130px
 </style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue
@@ -23,10 +23,10 @@
      base-input-number(
        v-else,
        v-model="modelValue",
-        outlined,
        :step="0.1",
        :max="10",
        :min="0"
+        size="M"
      )
      .rounded.grey-background.py-3.px-4.blue-color
        span.font-bold.text-base.line-height Справка
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue
@@ -16,10 +16,10 @@
          :max="data.config[key].max",
          reverse-value
          :label="data.config[key].label",
-          outlined,
          :shadow-text="data.config[key].shadowText",
-          :placeholder="`0${data.config[key].shadowText}`"
-          )
+          :placeholder="`0${data.config[key].shadowText}`",
+          size="M"
+        )
        .flex.flex-col.gap-y-2.w-full(v-if="data.key === 'thermometry'")
          base-input.w-full(
            v-model="dataValue.result",
@@ -69,7 +69,7 @@ import BaseInputNumber from "@/components/base/BaseInputNumber.vue";
 import { thermometryResultsMap } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { mapState } from "vuex";
 import { mapActions } from "vuex";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ThermometryForm",
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MedicalFormTag.vue
@@ -69,7 +69,7 @@ import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWra
 import TagCreationForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue";
 import BaseModal from "@/components/base/BaseModal.vue";
 import { mapState } from "vuex";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "MedicalFormTag",
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/TagCreationForm.vue
@@ -29,7 +29,7 @@
            q-icon(name="app:icon-plus", size="10px",)
            span Добавить категорию
      .flex.flex-col(class="gap-x-1.5")
-        new-base-input(
+        base-input(
          v-model="model.tag",
          label="Текст тега",
          placeholder="Введите тег",
@@ -53,7 +53,7 @@

 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "TagCreationForm",
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolCreateModal.vue
@@ -43,7 +43,6 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
@@ -53,7 +52,6 @@ import BaseButton from "@/components/base/BaseButton.vue";
 export default {
  name: "MedicalProtocolCreateModal",
  components: {
-    BaseInput,
    BaseAvatar,
    BaseInputDate,
    BaseInputTime,
--- a/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/oldCalendar/components/CalendarFormAddEvent.vue
@@ -18,7 +18,7 @@
          disabled,
          v-model="status.label",
          label="Статус приема",
-          outlined
+          size="M"
        )
        base-select(
          :items="ownersList",
@@ -37,21 +37,21 @@
          v-model="eventDate",
          label="Дата",
          type="date",
-          outlined
+          size="M"
        )
        .flex.gap-x-2.items-center.justify-between
          base-input(
            type="time",
            v-model="startTime",
            label="Начало",
-            outlined
+            size="M"
          )
          span.mt-4 —
          base-input(
            type="time",
            v-model="endTime",
            label="Конец",
-            outlined
+            size="M"
          )
      q-btn.create-button(
        v-if="!selectedEventData.id",
--- a/src/pages/oldMedicalCard/components/MedicalBaseData.vue
+++ b/src/pages/oldMedicalCard/components/MedicalBaseData.vue
@@ -7,7 +7,7 @@
          placeholder="ФИО*",
          v-model="clientDetail.fullName",
          disabled,
-          outlined
+          size="M"
        )
        base-radio-buttons-group(
          :items="gendersList",
@@ -21,7 +21,7 @@
              type="date",
              label="Дата рождения",
              v-model="clientDetail.birth_date",
-              outlined
+              size="M"
            )
          .input
            base-input(
@@ -29,20 +29,20 @@
              mask="###-###-### ##",
              label="СНИЛС",
              v-model="clientDetail.insurance_number",
-              outlined
+              size="M"
            )
        .flex.flex-col.gap-y-6
          base-input(
            label="Адрес регистрации",
            placeholder="Введите полный адрес",
            v-model="clientDetail.registration_address"
-            outlined
+            size="M"
          )
          base-input(
            label="Фактический адрес места жительства",
            placeholder="Введите полный адрес",
            v-model="clientDetail.temporary_address"
-            outlined
+            size="M"
          )
        .flex.gap-x-4
          .input
@@ -51,14 +51,14 @@
              placeholder="+7 (915) 644–92–23",
              mask="+7 (###) ###-##-##",
              v-model="clientDetail.phone",
-              outlined
+              size="M"
            )
          .input
            base-input(
              label="Email",
              placeholder="user@yandex.ru"
              v-model="clientDetail.email",
-              outlined
+              size="M"
            )
 </template>

--- a/src/pages/oldMedicalCard/components/MedicalCardWrapper.vue
+++ b/src/pages/oldMedicalCard/components/MedicalCardWrapper.vue
@@ -97,7 +97,7 @@
          .flex.flex-col.gap-y-2(v-for="(key, index) in Object.keys(dentalIndications)")
            span.font-bold.text-xsx {{`${index+1}. ${configData.dental_indications[key]}`}}
            medical-dental-formula(v-if="key === 'dental_formula'" :formula-data="dentalIndications[key]")
-            base-input(v-model="dentalIndications[key]" outlined v-else)
+            base-input(v-model="dentalIndications[key]", v-else, size="M")
        .flex.justify-center
          q-btn(
            @click="validateFormCard",
--- a/src/pages/oldMedicalCard/components/MedicalIdentityDocuments.vue
+++ b/src/pages/oldMedicalCard/components/MedicalIdentityDocuments.vue
@@ -8,13 +8,13 @@
          placeholder="0000 000000",
          mask="#### ######",
          v-model="clientDetail.identity_documents.series_number",
-          outlined
+          size="M"
        )
        base-input(
          label="Кем выдан",
          placeholder="Точно как в паспорте",
          v-model="clientDetail.identity_documents.issued_by_org",
-          outlined
+          size="M"
        )
        .flex.gap-x-4
          base-input(
@@ -22,13 +22,13 @@
            placeholder="000-000",
            mask="###-###",
            v-model="clientDetail.identity_documents.issued_by_org_code",
-            outlined
+            size="M"
          )
          base-input(
            type="date",
            label="Дата выдачи",
            v-model="clientDetail.identity_documents.issued_by_date",
-            outlined
+            size="M"
          )
 </template>

--- a/src/pages/oldMedicalCard/components/MedicalPolicyDocuments.vue
+++ b/src/pages/oldMedicalCard/components/MedicalPolicyDocuments.vue
@@ -15,13 +15,13 @@
          v-model="clientDetail.OMSPolicy.number",
          mask="###### ##########",
          :disabled="!selectedOMSPolicy",
-          outlined
+          size="M"
        )
        base-input.input(
          label="Страховая организация полиса ОМС",
          v-model="clientDetail.OMSPolicy.organization",
          :disabled="!selectedOMSPolicy",
-          outlined
+          size="M"
        )
      .flex.flex-col.gap-y-4
        base-input.input(
@@ -30,33 +30,33 @@
          v-model="clientDetail.DMSPolicy.number",
          mask="###### ##########",
          :disabled="selectedOMSPolicy",
-          outlined
+          size="M"
        )
        base-input.input(
          label="Страховая организация полиса ДМС",
          v-model="clientDetail.DMSPolicy.organization",
          :disabled="selectedOMSPolicy",
-          outlined
+          size="M"
        )
    base-input(
      label="Код категории льготы",
      placeholder="000",
      mask="###"
      v-model="clientDetail.benefit_code",
-      outlined
+      size="M"
    )
    base-input(
      label="К кому обращаться в случае необходимости",
      placeholder="ФИО*",
      v-model="clientDetail.confidant_name",
-      outlined
+      size="M"
    )
    base-input(
      label="Номер телефона",
      placeholder="+7 (915) 644–92–23",
      mask="+7 (###) ###-##-##",
      v-model="clientDetail.confidant_phone",
-      outlined
+      size="M"
    )
 </template>

--- a/src/pages/schedule/components/FormChangeShift.vue
+++ b/src/pages/schedule/components/FormChangeShift.vue
@@ -9,14 +9,14 @@
        label="Дата",
        type="date",
        v-model="replacementSheet.date",
-        outlined
+        size="M"
      )
      base-input(,
        type="text"
        v-model="replacementSheet.currentEmployee",
        label="Текущий сотрудник",
        outlined,
-        disabled
+        size="M"
      )
      base-select(
        :items="ownersList",
@@ -29,14 +29,14 @@
          type="time",
          label="Начало",
          v-model="replacementSheet.start_time",
-          outlined
+          size="M"
        )
        .flex.items-center.mt-4 —
        base-input(
          type="time",
          label="Конец",
          v-model="replacementSheet.end_time",
-          outlined
+          size="M"
        )
      .flex.justify-center
        q-btn(
--- a/src/pages/schedule/components/ScheduleBar.vue
+++ b/src/pages/schedule/components/ScheduleBar.vue
@@ -6,14 +6,14 @@
          type="time",
          v-model="times.start_time",
          label="Начало",
-          outlined
+          size="M"
        )
        .flex.items-center.mt-6 —
        base-input.items-center(
          type="time",
          v-model="times.end_time",
          label="Конец",
-          outlined
+          size="M"
        )
      .status-wrapper.flex.flex-col.gap-y-3.p-3
        .flex.justify-center.items-center.h-10
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/src/pages/schedule/components/ScheduleHeader.vue
@@ -21,22 +21,16 @@
          )
        .flex(:style="{width: '180px'}")
          base-input.relative(
-            :placeholder="dateString"
-            outlined,
+            :placeholder="dateString",
+            size="M",
+            :width="180"
          )
-            .flex.items-center
-              q-icon(
-                size="20px",
-                name="event",
-                class="cursor-pointer",
-                style="color: var(--font-dark-blue-color)"
-              )
-                q-popup-proxy(
-                  cover,
-                  transition-show="scale",
-                  transition-hide="scale"
-                )
-                  q-date(v-model="date", minimal, class="font-input")
+            q-icon(
+              size="20px",
+              name="app:calendar",
+              class="cursor-pointer",
+              style="color: var(--font-dark-blue-color)"
+            )
      .toogle.flex
        q-btn(
          label="Время",
@@ -58,8 +52,8 @@

 <script>
 import * as moment from "moment";
-import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "ScheduleHeader",
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/src/pages/schedule/components/ScheduleTable.vue
@@ -3,7 +3,7 @@
    .schedule-header.flex.justify-between.py-4.px-6
      base-input(
        placeholder="Поиск",
-        outlined
+        size="M"
      )
        .flex.items-center.cursor-pointer
          q-icon(