WIP Частично заменила инпуты

src/components/base/BaseInputDate.vue

@@ -1,27 +1,18 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+    q-input.input(
       v-model="value",
       :name="name",
-      :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
-      :borderless="borderless",
+      :input-style="{resize: resize}",
       :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
       :readonly="readonly",
       :disable="disabled",
-      :filled="filled",
-      mask="##.##.####"
-      :bg-color="filled || standout ? '' : 'white'",
+      mask="##.##.####",
       :rules="[checkInput]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
-      :maxlength="maxLength",
-      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
+      no-error-icon,
       :accept="accept",
       :debounce="debounce",
       hide-bottom-space,
@@ -31,60 +22,32 @@
         q-icon(
           name="app:calendar",
           class="cursor-pointer",
-          size="16px"
+          size="18px"
         )
-          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
-            q-date(
-              v-model="value",
-              mask="DD.MM.YYYY",
-              minimal
+          q-menu(
+            :style="{'margin-top': '8px !important'}",
+            v-model="calendarVisibility",
+            transition-show="scale",
+            transition-hide="scale",
+            self="top middle",
+            :offset="[118, 14]"
+          )
+            base-calendar(
+              v-model="internalDate",
+              :start-year="2000",
+              :save="closeCalendar",
+              @update:model-value="transmitInternalDate"
             )
-              .flex.items-center.justify-end
-                q-btn(
-                  v-close-popup,
-                  label="Закрыть",
-                  color="primary",
-                  flat,
-                  no-caps
-                )
 </template>
 
 <script>
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import * as moment from "moment/moment";
+import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 export default {
   name: "BaseInputDate",
-  components: { BaseInputContainer },
+  components: { BaseInputContainer, BaseCalendar },
   props: {
-    circle: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
     accept: {
       type: String,
       default: "",
@@ -95,11 +58,7 @@ export default {
     },
     debounce: [String, Number],
     width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
     lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
     itemAligned: Boolean,
     modelValue: Date,
     placeholder: String,
@@ -108,18 +67,30 @@ export default {
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
+    size: String,
   },
   emits: ["update:modelValue"],
+  data() {
+    return {
+      calendarVisibility: false,
+      internalDate: null,
+    };
+  },
   computed: {
     value: {
       get() {
         if (
           moment(this.modelValue).isValid() &&
           typeof this.modelValue === "object"
-        )
+        ) {
+          this.changeInternalDate(moment(this.modelValue));
           return moment(this.modelValue).format("DD.MM.YYYY");
-        if (moment(this.convertFormat(this.modelValue)).isValid())
+        }
+        if (moment(this.convertFormat(this.modelValue)).isValid()) {
+          this.changeInternalDate(moment(this.modelValue));
           return this.modelValue;
+        }
+        this.changeInternalDate(null);
         return null;
       },
       set(value) {
@@ -131,6 +102,50 @@ export default {
         );
       },
     },
+    sizeVariable() {
+      switch (this.size) {
+        case "XS":
+          return {
+            "--input-height": "28px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "S":
+          return {
+            "--input-height": "32px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "M":
+          return {
+            "--input-height": "40px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        default:
+          return {
+            "--input-height": "56px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+      }
+    },
   },
   methods: {
     convertFormat(date) {
@@ -141,6 +156,15 @@ export default {
     checkInput(val) {
       return moment(this.convertFormat(val)).isValid();
     },
+    closeCalendar() {
+      this.calendarVisibility = false;
+    },
+    changeInternalDate(value) {
+      this.internalDate = value;
+    },
+    transmitInternalDate(value) {
+      this.value = value?.format("DD.MM.YYYY");
+    },
   },
 };
 </script>
@@ -149,17 +173,56 @@ export default {
 .font-input
   font-feature-settings: 'pnum' on, 'lnum' on
 
-.circle
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-</style>
-<style lang="sass">
-.q-field--standout.q-field--readonly .q-field__control:before
-  border: none !important
-.q-field--standout .q-field__control
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
   background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>