Merge branch 'ASTRA-156' into 'master'

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

See merge request andrusyakka/urban-couscous!477

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>

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: "Календарь",

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",

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",

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",

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,9 @@ 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%
 .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

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,55 @@ 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",
+      };
+    },
   },
 };
 </script>
@@ -162,13 +168,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>

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",

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>

src/components/base/BaseTextarea.vue.vue

@@ -0,0 +1,128 @@
+<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)
+  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
+</style>

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",

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")

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")

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,

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>
 

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>
 

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",

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",

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 {

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 {

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,

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="Поручить",

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(

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="Поручить",

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")

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(

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="Вид услуги")

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>
 

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>
 

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>
 

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>
 

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",

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],

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";

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",

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,

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",

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 {

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",

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",

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>

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 {

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

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 {

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>

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>

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>

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 Справка

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",

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",

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",

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,

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",

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>
 

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",

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>
 

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>
 

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(

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

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",

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(