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

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
-        span.text-xxs.opacity-40.font-bold.leading-3 Статус приема
-        base-custom-select.select(
-          v-if="selectedEventData.id"
-          v-model="status",
-          :items="eventStatuses",
-          placeholder="Статус приема"
+      base-custom-select(
+        v-if="selectedEventData.id"
+        v-model="status",
+        :items="eventStatuses",
+        label="Статус приема"
+      )
+      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(
-          v-else,
-          disabled,
-          v-model:value="status.label"
+        span.mt-4 —
+        base-input-time.item-input.text-base(
+          v-model="endTime",
+          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