[WIP] Заменил инпуты с датой на baseInput, исправил стили, фикс станицы логина

src/components/base/BaseDetailInput.vue

@@ -4,19 +4,16 @@
     .flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
       span.w-4.icon(v-if="field.icon" :class="field.icon")
       base-input(v-model="data[field.label]" :with-icon="field.copy")
-        .copy.icon-copy.cursor-pointer(
+        .flex.items-center(v-if="field.copy && data[field.label]")
-          v-if="field.copy && data[field.label]",
+          .copy.icon-copy.cursor-pointer(@click="() => copyValue(data[field.label])")
-          @click="() => copyValue(data[field.label])"
+    base-input(v-if="field.type === 'date'" v-model="data[field.label]")
-        )
-    base-input-date(v-if="field.type === 'date'" v-model="data[field.label]")
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput.vue";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
 export default {
   name: "BaseDetailInput",
-  components: { BaseInput, BaseInputDate },
+  components: { BaseInput },
   props: {
     value: String,
     field: Object,

src/components/base/BaseInput.vue

@@ -1,10 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-2
+  base-input-container.gap-y-2(:label="label")
-    .label.font-semibold.text-sm.opacity-40(
-      v-if="label",
-      :class="labelClass",
-      :style="{color: 'var(--font-black-color)'}"
-    ) {{ label }}
     q-input(
       v-model="value",
       :input-class="textClass",
@@ -16,16 +11,19 @@
       :disable="disabled",
       :rules="rule",
       :mask="mask",
-      :maxlength="maxLength"
+      :maxlength="maxLength",
-      hide-bottom-space,
+      :autogrow="autogrow",
-      autogrow
+      hide-bottom-space
     )
       slot.cursor-pointer
 </template>
 
 <script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
 export default {
   name: "BaseInput",
+  components: { BaseInputContainer },
   props: {
     dense: {
       type: Boolean,
@@ -39,6 +37,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
     type: {
       default: "text",
     },
@@ -50,16 +52,19 @@ export default {
     disabled: Boolean,
     label: String,
     textStyle: String,
-    labelStyle: String,
   },
   emits: ["update:modelValue"],
   computed: {
     value: {
       get() {
-        return this.modelValue;
+        return this.type === "date"
+          ? this.modelValue?.toISOString().split("T")[0]
+          : this.modelValue;
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.type === "date"
+          ? this.$emit("update:modelValue", value ? new Date(value) : null)
+          : this.$emit("update:modelValue", value);
       },
     },
     textClass() {
@@ -71,15 +76,6 @@ export default {
             "text-base": true,
           };
     },
-    labelClass() {
-      return this.labelStyle
-        ? {
-            [this.labelStyle]: true,
-          }
-        : {
-            "text-sm": true,
-          };
-    },
   },
 };
 </script>

src/components/base/BaseInputContainer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col
-    .label {{ label }}
+    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
     slot
 </template>
 

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -32,9 +32,10 @@
         label="Клиент"
       )
     .flex.gap-x-4
-      base-input-date(
+      base-input(
         v-model="eventDate",
-        label="Дата"
+        label="Дата",
+        type="date"
       )
       .flex.gap-x-2.items-center
         base-input-time.item-input.text-base(
@@ -72,17 +73,16 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import * as moment from "moment/moment";
 import { statusesDictionary } from "../utils/statusesDictionary.js";
+
 export default {
   name: "FormChangeEvent",
   components: {
     BaseSelect,
     BaseInput,
-    BaseInputDate,
     BaseInputTime,
     BaseCustomSelect,
     TheNotificationProvider,

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -110,7 +110,8 @@
               :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
               :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
             )
-            base-input-date.input-date.text-sm(
+            base-input(
+              type="date",
               v-else-if="isChange && section !== 'docs' && section !== 'additional'",
               v-model="sectionInfo.issued_by_date"
             )
@@ -180,7 +181,7 @@ import ClientDetailSectionAddress from "@/pages/clients/components/ClientDetailS
 import TableChoiceAddingDoc from "@/pages/clients/components/TableChoiceAddingDoc";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
-import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
 import { detail } from "@/pages/clients/utils/tableConfig";
 import pdfIcon from "@/assets/icons/pdf.svg";
 import wordIcon from "@/assets/icons/word.svg";
@@ -193,7 +194,7 @@ export default {
   name: "ClientDetailInfoSection",
   components: {
     BaseButton,
-    BaseInputDate,
+    BaseInput,
     BasePopup,
     BaseModal,
     BaseLoader,
@@ -523,12 +524,4 @@ export default {
   width: 38px
   z-index: 1
   background: var(--light-grey-bg-color)
-
-.input
-  border: 1.5px solid var(--border-light-grey-color)
-  height: 40px
-
-.input-date
-  height: 40px
-  background-color: var(--default-white)
 </style>

src/pages/clients/components/ClientDetailInput.vue

@@ -4,7 +4,8 @@
     v-model="value",
     :placeholder="placeholder",
     :maxLength="maxLength",
-    :mask="sharp"
+    :mask="sharp",
+    :autogrow="choiceGrow"
   )
     slot
 </template>
@@ -26,6 +27,9 @@ export default {
     choiceType() {
       return !this.sharp ? "textarea" : "text";
     },
+    choiceGrow() {
+      return !this.sharp ? true : false;
+    },
     value: {
       get() {
         return this.modelValue;

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -7,7 +7,8 @@
         v-model="basicInfo.priority",
         label="Приоритет"
       )
-      base-input-date.input-info(
+      base-input.input-info(
+        type="date"
         v-model="basicInfo.birth_date",
         label="Дата рождения"
       )
@@ -44,7 +45,6 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import { column } from "@/pages/clients/utils/tableConfig";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
@@ -53,7 +53,6 @@ export default {
   name: "FormCreateBasicInfo",
   components: {
     BaseInput,
-    BaseInputDate,
     BaseAddingNetwork,
     BaseButton,
     BaseCustomSelect,

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -3,24 +3,25 @@
     .flex.flex-col.gap-y-6.px-4
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
-        base-input.input-info(
+        base-input(
           mask="#### ######",
           v-model="identityDocument.pass.series_number",
           placeholder="0000 000000",
           label="Серия и номер"
         )
-        base-input.input-info(
+        base-input(
           v-model="identityDocument.pass.issued_by_org",
           placeholder="Точно как в паспорте",
           label="Кем выдан"
         )
-        base-input.input-info(
+        base-input(
           mask="###-###",
           v-model="identityDocument.pass.issued_by_org_code",
           placeholder="000–000",
           label="Код подразделения"
         )
-        base-input-date.input-info.h-10(
+        base-input(
+          type="date"
           v-model="identityDocument.pass.issued_by_date",
           placeholder="Дата",
           label="Дата выдачи"
@@ -28,7 +29,7 @@
     .flex.flex-col.gap-y-6.px-4
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           mask="###-###-### ##",
@@ -36,7 +37,7 @@
           placeholder="000–000–000 00",
           label="Номер СНИЛС"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           mask="############",
@@ -52,11 +53,10 @@
 <script>
 import BaseButton from "@/components/base/BaseButton";
 import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate";
 
 export default {
   name: "FormCreateIdentityDocuments",
-  components: { BaseInput, BaseInputDate, BaseButton },
+  components: { BaseInput, BaseButton },
   props: {
     identityDocument: Object,
     saveClient: Function,
@@ -78,10 +78,10 @@ export default {
   &::-webkit-scrollbar-thumb
     border-radius: 8px
     background-color: var(--btn-blue-color)
-.input-info
+
-  color: var(--font-dark-blue-color)
 .title-info
   color: var(--font-dark-blue-color)
+
 .input-date
   border: 1.5px solid var(--border-light-grey-color)
 </style>

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -35,7 +35,6 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
@@ -48,7 +47,6 @@ export default {
   components: {
     BaseInput,
     BaseButton,
-    BaseInputDate,
     BaseSelect,
     MedicalBaseData,
     MedicalIdentityDocuments,

src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue

@@ -8,15 +8,18 @@
       label="Категория"          
     )
     .flex.justify-between.gap-4
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="signedDate",
         label="Дата подписания"
       )        
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="startDate",
         label="Начало оказания услуг"
       )        
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="endDate",
         label="Окончание оказания услуг"
       )         
@@ -30,14 +33,14 @@
 
 <script>
 import BaseStepper from "@/components/base/BaseStepper";
-import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 
 export default {
   name: "AgreementCommon",
   components: {
     BaseStepper,
-    BaseInputDate,
+    BaseInput,
     BaseCustomSelect,
   },
   data() {

src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue

@@ -8,15 +8,18 @@
       label="Категория"   
     )
     .flex.gap-x-4
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="signedDate",
         label="Дата подписания"
       )
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="startDate",
         label="Начало оказания услуг"
       )
-      base-input-date.w-48(
+      base-input(
+        type="date",
         v-model="endDate",
         label="Окончание оказания услуг"
       )         
@@ -29,13 +32,13 @@
 </template>
 
 <script>
-import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 
 export default {
   name: "AgreementServices",
   components: {
-    BaseInputDate,
+    BaseInput,
     BaseCustomSelect,
   },
   data() {

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -27,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-date(:width-input="277")
+              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")
@@ -83,11 +83,11 @@
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
+
 export default {
   name: "TableCreatePackageDoc",
-  components: { BaseInput, BaseButton, BaseInputDate, BaseSelect },
+  components: { BaseInput, BaseButton, BaseSelect },
   data() {
     return {
       isServices: false,

src/pages/clients/components/cells/TableCellBodyBirthday.vue

@@ -3,7 +3,8 @@
     :style="{ width : width + 'px'}"
   )
     span(v-if="!isOpenChange") {{ birthday }}
-    base-input-date.input.h-10(
+    base-input(
+      type="date",
       v-if="isOpenChange",
       @click.stop,
       v-model="value.age"
@@ -11,11 +12,11 @@
 </template>
 
 <script>
-import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
 import * as moment from "moment/moment";
 export default {
   name: "TableCellBodyBirthday",
-  components: { BaseInputDate },
+  components: { BaseInput },
   props: {
     value: Object,
     width: Number,
@@ -34,7 +35,3 @@ export default {
   },
 };
 </script>
-<style lang="sass" scoped>
-.input
-  background-color: var(--default-white)
-</style>

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -2,8 +2,8 @@
   .flex.box-border.px-4.items-center.gap-x-3.w-full.text-sm(
     :style="{ width : width + 'px'}",
   )
-    base-avatar(:size="36", :color="avatarColor", v-if="!photo") {{avatar}}
+    base-avatar(:size="36", :color="avatarColor", v-if="!photo && !isOpenChange") {{avatar}}
-    base-avatar(:size="36", v-else)
+    base-avatar(:size="36", v-else-if="photo && !isOpenChange")
       img.h-full.object-cover(:src="url + photo")
     span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
     .name(v-if="isOpenChange")

src/pages/login/TheLogin.vue

@@ -9,7 +9,7 @@
           .text-under.flex.not-italic.font-medium.text-base(
             :style="{color: this.underTextColor}"
           ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
-        .flex.flex-col.gap-y-2
+        .flex.flex-col.gap-y-5
           base-input.font-medium(
             :rule="[wrongData => !!wrongData]",
             v-model="user.username",
@@ -21,16 +21,15 @@
             v-model="user.password",
             :type="changeType",
             placeholder="Введите ваш пароль",
-            label="Пароль",
+            label="Пароль"
-            withIcon
           )
             .flex.items-center.cursor-pointer
               q-icon(
                 v-if="!wrongData && user.password"
-                :name="isView ? 'visibility_off' : 'visibility'",
+                :name="!isView ? 'visibility_off' : 'visibility'",
                 @click="changeView"
               )
-          span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
+          span.font-medium(:style="{color: this.redColor}", v-if="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -15,7 +15,8 @@
         )
         .flex.gap-x-4
           .input
-            base-input-date(
+            base-input(
+              type="date",
               label="Дата рождения",
               v-model="clientDetail.birth_date",
             )
@@ -53,7 +54,6 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
@@ -63,7 +63,6 @@ export default {
   name: "MedicalBaseData",
   components: {
     BaseInput,
-    BaseInputDate,
     BaseSelect,
     BaseButton,
     BaseRadioButtonsGroup,

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -3,7 +3,7 @@
     .flex.flex-col.gap-y-6
       span.font-bold Паспортные данные
       .flex.flex-col.gap-y-6
-        base-input.input(
+        base-input(
           label="Серия и номер",
           placeholder="0000 000000",
           v-model="clientDetail.identity_documents.number"
@@ -14,12 +14,13 @@
           v-model="clientDetail.identity_documents.issued_by_org"
         )
         .flex.gap-x-4
-          base-input.input(
+          base-input(
             label="Код подразделения",
             placeholder="000-000",
             v-model="clientDetail.identity_documents.issued_by_org_code"
           )
-          base-input-date.input(
+          base-input(
+            type="date",
             label="Дата выдачи",
             v-model="clientDetail.identity_documents.issued_by_date"
           )
@@ -27,21 +28,15 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 
 export default {
   name: "MedicalIdentityDocuments",
-  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  components: { BaseInput, BaseSelect, BaseButton },
   props: {
     changeIdentityDoc: Function,
     clientDetail: Object,
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.input
-  width: 277px
-</style>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -50,7 +50,6 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
@@ -59,7 +58,6 @@ export default {
   name: "MedicalPolicyDocuments",
   components: {
     BaseInput,
-    BaseInputDate,
     BaseSelect,
     BaseRadioButtonsGroup,
   },

src/pages/schedule/components/FormChangeShift.vue

@@ -7,7 +7,7 @@
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
     .flex.flex-col.gap-y-6
-      base-input-date(label="Дата")
+      base-input(label="Дата", type="date")
       base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
       base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
       .time-wrapper.flex.justify-center
@@ -19,13 +19,13 @@
 
 <script>
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "FormChangeShift",
-  components: { BaseCustomSelect, BaseInputDate, BaseInputTime, BaseButton },
+  components: { BaseCustomSelect, BaseInput, BaseInputTime, BaseButton },
   props: { closeForm: Function, timesShift: Object },
   data() {
     return {

src/pages/schedule/components/ScheduleBar.vue

@@ -47,7 +47,6 @@
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseInputTime from "@/components/base/BaseInputTime.vue";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
@@ -57,7 +56,6 @@ export default {
     BaseInput,
     BaseCustomSelect,
     BaseInputTime,
-    BaseInputDate,
   },
   props: {
     buttons: Array,