WIP Переделала инпуты

src/components/BaseInput.vue

@@ -0,0 +1,217 @@
+<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="{'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
+      template(v-slot:append, v-if="iconRight")
+        slot
+      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,
+  },
+  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",
+          };
+        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
+</style>

src/components/base/BaseButton.vue

@@ -51,13 +51,6 @@ export default {
         "min-height": "40px",
       };
     },
-    btnWidth() {
-      return !this.width === "auto"
-        ? {
-            "min-width": this.width,
-          }
-        : {};
-    },
     miniSize() {
       return this.type === "mini";
     },

src/components/base/BaseClientFormCreate.vue

@@ -63,7 +63,11 @@
                       padding="2px 0 0 0"
                     )
                       q-icon(name="app:ok", size="20px")
-          base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+          base-input.w-full(
+            v-model="infoClient.basic.full_name",
+            placeholder="ФИО*",
+            size="M"
+          )
       .flex.flex-col.flex-auto.l.gap-y-8
         .flex
           button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -94,7 +98,6 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
 import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
-import BaseInput from "@/components/base/BaseInput";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
@@ -103,6 +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";
 
 export default {
   name: "BaseClientFormClient",

src/components/base/BaseInputContainer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+  .flex.flex-col.gap-y-6px
+    .label.font-semibold.text-sm(v-if="label") {{ label }}
       span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
     slot
 </template>
@@ -14,3 +14,9 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.label
+  color: var(--font-grey-color)
+  line-height: 135%
+</style>

src/components/base/Calendar/BaseCalendar.vue

@@ -56,6 +56,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    width: {
+      type: String,
+      default: "286px",
+    },
   },
   data() {
     return {