[WIP] Заменил BaseInputTime на BaseInput, исправил стили

src/components/base/BaseInput.vue

@@ -47,7 +47,7 @@ export default {
     mask: String,
     maxLength: String,
     rule: Array,
-    modelValue: String,
+    modelValue: String || Date,
     placeholder: String,
     disabled: Boolean,
     label: String,

src/components/base/BaseInputContainer.vue

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

src/components/base/BaseInputTime.vue

@@ -1,54 +0,0 @@
-<template lang="pug">
-  .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
-    .input-wrapper.flex.gap-x-2.px-4.box-border.py-2.h-10
-      input.input.w-full.outline-0.not-italic.cursor-text(
-        v-model="value"
-        type="time"
-        :placeholder="placeholder"
-      )
-      .slot(v-if="withIcon" :class="iconPosition")
-        slot.cursor-pointer
-</template>
-
-<script>
-export default {
-  name: "BaseInputTime",
-  props: {
-    modelValue: String,
-    withIcon: {
-      default: false,
-    },
-    iconPosition: {
-      default: "right",
-    },
-    placeholder: String,
-    label: String,
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.left
-  order: -1
-.right
-  order: 1
-.input-wrapper
-  border-radius: 4px
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-  border: 1.5px solid var(--border-light-grey-color)
-input::-webkit-calendar-picker-indicator
-  cursor: pointer
-</style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -37,13 +37,15 @@
         label="Дата",
         type="date"
       )
-      .flex.gap-x-2.items-center
+      .flex.gap-x-2.items-center.justify-between
-        base-input-time.item-input.text-base(
+        base-input(
+          type="time",
           v-model="startTime",
           label="Начало"
         )
         span.mt-4 —
-        base-input-time.item-input.text-base(
+        base-input(
+          type="time",
           v-model="endTime",
           label="Конец"
         )
@@ -71,7 +73,6 @@
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 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 BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
@@ -83,7 +84,6 @@ export default {
   components: {
     BaseSelect,
     BaseInput,
-    BaseInputTime,
     BaseCustomSelect,
     TheNotificationProvider,
   },
@@ -603,16 +603,6 @@ export default {
   width: 344px
   background-color: var(--default-white)
 
-.item-input
-  appearance: none
-  border: none
-  outline: none
-  &::-webkit-calendar-picker-indicator
-    display: none
-    -webkit-appearance: none
-  &::placeholder
-    color: var(--font-black-color-1)
-
 .date-input
   width: 174px
   border-radius: 4px

src/pages/clients/components/FormCreateAdditional.vue

@@ -40,7 +40,6 @@ export default {
   min-height: 443px
   max-height: 443px
   overflow-y: auto
-  color: var(--font-dark-blue-color)
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track

src/pages/clients/components/FormCreateAddresses.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .wrapper-addresses.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
     .flex.flex-col.gap-y-6.px-4
-      base-input.input-info(
+      base-input(
         v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
         label="Полный адрес"
@@ -10,42 +10,42 @@
         .line.absolute
         span.text-sm.separator.px-2 или
       .grid.grid-cols-2.gap-y-6.gap-x-4
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="Введите город",
           v-model="addresses.city",
           label="Город"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="Введите область",
           v-model="addresses.region",
           label="Область"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="Введите улицу",
           v-model="addresses.street",
           label="Введите улицу"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="Номер дома",
           v-model="addresses.house_number",
           label="Дом"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="Номер квартиры",
           v-model="addresses.apartment_number",
           label="Квартира"
         )
-        base-input.input-info(
+        base-input(
           disabled,
           filled,
           placeholder="000000",
@@ -79,7 +79,6 @@ export default {
   min-height: 443px
   max-height: 443px
   overflow-y: auto
-  color: var(--font-grey-color)
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track
@@ -88,15 +87,13 @@ 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)
 .line
   width: 570px
   height: 1px
   background-color: var(--border-light-grey-color)
   z-index: -1
+
 .separator
   color: var(--font-dark-blue-color)
   background-color: var(--default-white)

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -7,18 +7,18 @@
         v-model="basicInfo.priority",
         label="Приоритет"
       )
-      base-input.input-info(
+      base-input(
         type="date"
         v-model="basicInfo.birth_date",
         label="Дата рождения"
       )
-      base-input.input-info(
+      base-input(
         v-model="phone.username",
         placeholder="+7 (915) 644–92–23",
         mask="+7 (###) ###-##-##",
         label="Номер телефона"
       )
-      base-input.input-info(
+      base-input(
         v-model="email.username",
         placeholder="user@yandex.ru",
         label="Email"
@@ -81,7 +81,6 @@ export default {
   min-height: 336px
   max-height: 443px
   overflow-y: auto
-  color: var(--font-grey-color)
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track
@@ -90,8 +89,6 @@ export default {
   &::-webkit-scrollbar-thumb
     border-radius: 8px
     background-color: var(--btn-blue-color)
-.input-info
-  color: var(--font-dark-blue-color)
 .obligatory
   color: var(--font-obligatory-color)
 .add-network

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -69,7 +69,6 @@ export default {
   min-height: 443px
   max-height: 443px
   overflow-y: auto
-  color: var(--font-grey-color)
   &::-webkit-scrollbar
     width: 4px
   &::-webkit-scrollbar-track

src/pages/schedule/components/FormChangeShift.vue

@@ -10,9 +10,10 @@
       base-input(label="Дата", type="date")
       base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
       base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
-      .time-wrapper.flex.justify-center
+      .time-wrapper.flex.justify-center.gap-x-6
-        base-input-time.px-4.item-input.text-base(label="Начало", v-model="timesShift.start_time")
+        base-input(type="time", label="Начало", v-model="timesShift.start_time")
-        base-input-time.px-4.item-input.text-base(label="Конец", v-model="timesShift.end_time")
+        .flex.items-center.mt-4 —
+        base-input(type="time", label="Конец", v-model="timesShift.end_time")
       .flex.justify-center
         base-button.font-semibold(:size="40") Сохранить
 </template>
@@ -20,12 +21,11 @@
 <script>
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.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, BaseInput, BaseInputTime, BaseButton },
+  components: { BaseCustomSelect, BaseInput, BaseButton },
   props: { closeForm: Function, timesShift: Object },
   data() {
     return {

src/pages/schedule/components/ScheduleBar.vue

@@ -1,12 +1,15 @@
 <template lang="pug">
   .wrapper-bar.flex.flex-col.gap-y-4.p-5.justify-between
     .flex.w-full.justify-around.gap-x-4
-      .time-wrapper.flex.justify-between
+      .time-wrapper.flex.justify-between.p-7
-        base-input-time.py-14px.px-4.justify-around.items-center(
+        base-input(
+          type="time",
           v-model="times.start_time",
           label="Начало"
         )
-        base-input-time.py-14px.px-4.justify-around.items-center(
+        .flex.items-center.mt-6 —
+        base-input(
+          type="time",
           v-model="times.end_time",
           label="Конец"
         )
@@ -46,7 +49,6 @@
 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
-import BaseInputTime from "@/components/base/BaseInputTime.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
@@ -55,7 +57,6 @@ export default {
     BaseButton,
     BaseInput,
     BaseCustomSelect,
-    BaseInputTime,
   },
   props: {
     buttons: Array,
@@ -91,6 +92,7 @@ export default {
   width: calc(100vw - 136px)
 
 .time-wrapper
+  min-width: 320px
   height: 120px
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px