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

src/components/base/BaseCustomSelect.vue

@@ -1,27 +1,29 @@
 <template lang="pug">
-  .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+  .flex.flex-col.gap-y-2
-    @click="open = !open",
+    .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
-    :class="{'open': open, 'border-none': borderNone}",
+    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
-  )
+      @click="open = !open",
-    .placeholder.text-base.flex.items-center(
+      :class="{'open': open, 'border-none': borderNone}",
-      :class="{'value-color': value.label || placeholderOpacity}"
-    ) {{ value.label || placeholder }}
-    .flex.items-center
-      .select-form-separator.cursor-pointer.mr-4(v-if="separator")
-      span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
-    base-options(
-      v-if="open",
     )
-      .items-container.mt-1(
+      .placeholder.text-base.flex.items-center(
-        @click="closeOptions",
+        :class="{'value-color': value.label || placeholderOpacity}"
-        v-click-outside="leaveSelect"
+      ) {{ value.label || placeholder }}
+      .flex.items-center
+        .select-form-separator.cursor-pointer.mr-4(v-if="separator")
+        span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
+      base-options(
+        v-if="open",
       )
-        .item.py-2.px-4.cursor-pointer(
+        .items-container.mt-1(
-          v-for="item in items",
+          @click="closeOptions",
-          :key="item?.id",
+          v-click-outside="leaveSelect"
-          :class="{'center': center}",
+        )
-          @click="clickItem(item?.id, item?.label)"
+          .item.py-2.px-4.cursor-pointer(
-        ) {{ item?.label }}
+            v-for="item in items",
+            :key="item?.id",
+            :class="{'center': center}",
+            @click="clickItem(item?.id, item?.label)"
+          ) {{ item?.label }}
 </template>
 
 <script>
@@ -40,6 +42,7 @@ export default {
     separator: Boolean,
     placeholderOpacity: Boolean,
     center: Boolean,
+    label: String,
   },
   emits: ["update:modelValue"],
   data() {

src/components/base/BaseInput.vue

@@ -1,20 +1,16 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
+  .flex.flex-col.gap-y-2
-    :class="{'border-none': borderNone, 'date-input': dateInput}",
+    .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
-    :style="{ minWidth: widthInput + 'px' }"
+    .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
-  )
+      :class="{'border-none': borderNone}"
-    input.input.w-full.outline-0.not-italic(
-      :class="{date:type === 'date'}",
-      :value="value",
-      :type="type",
-      @input="$emit('update:value', $event.target.value)",
-      :placeholder="placeholder",
-      :maxLength="maxLength",
-      :max="maxDate",
-      :disabled="disabled"
     )
-    .slot(v-if="withIcon", :class="iconPosition")
+      input.input.w-full.outline-0.not-italic(
-      slot.cursor-pointer
+        v-model="value",
+        :placeholder="placeholder",
+        :disabled="disabled"
+      )
+      .slot(v-if="withIcon", :class="iconPosition")
+        slot.cursor-pointer
 </template>
 
 <script>
@@ -22,11 +18,7 @@
 export default {
   name: "BaseInput",
   props: {
-    type: {
+    modelValue: String,
-      default: "text",
-    },
-    maxLength: Number,
-    value: String,
     withIcon: {
       default: false,
     },
@@ -34,11 +26,20 @@ export default {
       default: "right",
     },
     placeholder: String,
-    widthInput: Number,
     borderNone: Boolean,
     disabled: Boolean,
-    maxDate: String,
+    label: String,
-    dateInput: Boolean,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>
@@ -55,12 +56,10 @@ export default {
   background-color: var(--default-white)
   color: var(--font-black-color)
   height: 40px
-.date
-  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
-  &::-webkit-calendar-picker-indicator
-    opacity: 0
 .border-none
   border: none
 .input
   background-color: inherit
+.label
+  color: var(--font-black-color)
 </style>

src/components/base/BaseInputDate.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col
+  .flex.flex-col.gap-y-2
     .label(v-if="!!label") {{label}}
     .field
       input(
@@ -37,7 +37,7 @@ export default {
 
 <style lang="sass" scoped>
 .field
-  height: 100%
+  height: 40px
   display: flex
   align-items: center
   border: 1.5px solid var(--border-light-grey-color)
@@ -55,6 +55,7 @@ export default {
 
 .label
   font-weight: 600
-  font-size: 14px
+  font-size: 12px
-  line-height: 135%
+  line-height: 14px
+  opacity: 0.4
 </style>

src/components/base/BaseInputTime.vue

@@ -1,25 +1,21 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(
+  .flex.flex-col.gap-y-2
-    class="py-2.5"
+    .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
-    :style="{ minWidth: widthInput + 'px' }"
+    .input-wrapper.flex.gap-x-2.px-4.box-border.py-2.h-10
-  )
+      input.input.w-full.outline-0.not-italic.cursor-text(
-    input.input.w-full.outline-0.not-italic.cursor-text(
+        v-model="value"
-      :value="value"
+        type="time"
-      type="time"
+        :placeholder="placeholder"
-      @input="$emit('update:value', $event.target.value)"
+      )
-      :placeholder="placeholder"
+      .slot(v-if="withIcon" :class="iconPosition")
-      :maxlength="maxLength"
+        slot.cursor-pointer
-    )
-    .slot(v-if="withIcon" :class="iconPosition")
-      slot.cursor-pointer
 </template>
 
 <script>
 export default {
   name: "BaseInputTime",
   props: {
-    maxLength: Number,
+    modelValue: String,
-    value: String,
     withIcon: {
       default: false,
     },
@@ -27,7 +23,18 @@ export default {
       default: "right",
     },
     placeholder: String,
-    widthInput: Number,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>
@@ -41,6 +48,7 @@ export default {
   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

@@ -7,54 +7,45 @@
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
     .flex.flex-col.gap-y-8
-      .flex.flex-col.gap-y-2
+      base-custom-select(
-        span.text-xxs.opacity-40.font-bold.leading-3 Статус приема
+        v-if="selectedEventData.id"
-        base-custom-select.select(
+        v-model="status",
-          v-if="selectedEventData.id"
+        :items="eventStatuses",
-          v-model="status",
+        label="Статус приема"
-          :items="eventStatuses",
+      )
-          placeholder="Статус приема"
+      base-input(
+        v-else,
+        disabled,
+        v-model="status.label",
+        label="Статус приема"
+      )
+      base-custom-select(
+        :items="ownersList",
+        v-model="employees.employee",
+        placeholder="Выберите сотрудника"
+        label="Сотрудник"
+      )
+      base-custom-select(
+        :items="membersList",
+        v-model="members.person",
+        placeholder="Выберите клиента",
+        label="Клиент"
+      )
+    .flex.gap-x-4
+      base-input-date(
+        v-model="eventDate",
+        label="Дата"
+      )
+      .flex.gap-x-2.items-center
+        base-input-time.item-input.text-base(
+          v-model="startTime",
+          label="Начало"
         )
-        base-input(
+        span.mt-4 —
-          v-else,
+        base-input-time.item-input.text-base(
-          disabled,
+          v-model="endTime",
-          v-model:value="status.label"
+          label="Конец"
         )
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-xxs.opacity-40.font-bold Сотрудник
-        base-custom-select.select(
-          :items="ownersList",
-          v-model="employees.employee",
-          placeholder="Выберите сотрудника"
-        )
-        
-      .flex.flex-col(class="gap-y-1.5")
-        span.text-xxs.opacity-40.font-bold Клиент
-        base-custom-select.select(
-          :items="membersList",
-          v-model="members.person",
-          placeholder="Выберите клиента",
-        )
-    .flex.flex-col.gap-y-8
-      .flex.gap-x-4
-        .flex.gap-x-2
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Дата
-            base-input-date.h-10(v-model="eventDate")
-        .flex.gap-x-2.items-center
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Начало
-            base-input-time.item-input.text-base.select(
-              v-model:value="startTime",
-              :width-input="72"
-            )
-          span.mt-4 —
-          .flex.flex-col(class="gap-y-1.5")
-            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Конец
-            base-input-time.item-input.text-base.select(
-              v-model:value="endTime",
-              :width-input="72"
-            )
     base-button.create-button.text-base.font-semibold(
       v-if="!selectedEventData.id",
       :size="40",
@@ -597,7 +588,6 @@ export default {
 
 <style lang="sass" scoped>
 .event-form
-  height: fit-content
   width: 634px
   background-color: var(--default-white)
   box-shadow: var(--default-shadow)
@@ -613,18 +603,12 @@ export default {
   appearance: none
   border: none
   outline: none
-  height: 40px
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
   &::placeholder
     color: var(--font-black-color-1)
 
-.time-input
-  width: 72px
-  border-radius: 4px
-  background-color: var(--default-white)
-
 .date-input
   width: 174px
   border-radius: 4px
@@ -644,7 +628,6 @@ export default {
   width: 183px
 
 .select
-  height: 40px
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px