diff --git a/src/components/base/BaseCustomSelect.vue b/src/components/base/BaseCustomSelect.vue
index f739695..a517071 100644
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -1,27 +1,29 @@
- .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
- @click="open = !open",
- :class="{'open': open, 'border-none': borderNone}",
- )
- .placeholder.text-base.flex.items-center(
- :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",
+ .flex.flex-col.gap-y-2
+ .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
+ .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+ @click="open = !open",
+ :class="{'open': open, 'border-none': borderNone}",
)
- .items-container.mt-1(
- @click="closeOptions",
- v-click-outside="leaveSelect"
+ .placeholder.text-base.flex.items-center(
+ :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",
)
- .item.py-2.px-4.cursor-pointer(
- v-for="item in items",
- :key="item?.id",
- :class="{'center': center}",
- @click="clickItem(item?.id, item?.label)"
- ) {{ item?.label }}
+ .items-container.mt-1(
+ @click="closeOptions",
+ v-click-outside="leaveSelect"
+ )
+ .item.py-2.px-4.cursor-pointer(
+ v-for="item in items",
+ :key="item?.id",
+ :class="{'center': center}",
+ @click="clickItem(item?.id, item?.label)"
+ ) {{ item?.label }}
@@ -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)
diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index bc8921d..9dea0a9 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,5 +1,5 @@
- .flex.flex-col
+ .flex.flex-col.gap-y-2
.label(v-if="!!label") {{label}}
.field
input(
@@ -37,7 +37,7 @@ export default {
diff --git a/src/components/base/BaseInputTime.vue b/src/components/base/BaseInputTime.vue
index 539cf7f..3add825 100644
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -1,25 +1,21 @@
- .input-wrapper.flex.gap-x-2.px-4.box-border(
- class="py-2.5"
- :style="{ minWidth: widthInput + 'px' }"
- )
- input.input.w-full.outline-0.not-italic.cursor-text(
- :value="value"
- type="time"
- @input="$emit('update:value', $event.target.value)"
- :placeholder="placeholder"
- :maxlength="maxLength"
- )
- .slot(v-if="withIcon" :class="iconPosition")
- slot.cursor-pointer
+ .flex.flex-col.gap-y-2
+ .label.font-semibold.text-xxs.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
@@ -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
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index cfb94de..f4a42bc 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/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 {