WIP Изменила стиль кнопок, расставила запятые

src/components/base/BaseButton.vue

@@ -3,20 +3,20 @@
     :disabled="disabled",
     :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added}"
     :style="{height: size + 'px', minWidth: size + 'px'}"
-    )
+  )
     .button-container
       span.icon-container(
         :class="leftIcon",
         v-if="leftIcon",
         :style="{fontSize: iconLeftSize + 'px'}"
-        )
+      )
       slot
       .split(v-if="split")
       span.icon-container(
         :class="rightIcon",
-        v-if="rightIcon"
+        v-if="rightIcon",
         :style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
-        )
+      )
 </template>
 
 <script>

src/components/base/BaseInput.vue

@@ -50,10 +50,11 @@ export default {
 .right
   order: 1
 .input-wrapper
-  border: 2px solid var(--border-light-grey-color)
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
   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

src/pages/calendar/TheCalendar.vue

@@ -1,46 +1,46 @@
 <template lang="pug">
   .calendar-container.flex
     calendar-sidebar(
-      @width="changeWidth"
+      @width="changeWidth",
-      :team-data="employeesData"
+      :team-data="employeesData",
-      :open-form-create="openFormCreateEvent"
+      :open-form-create="openFormCreateEvent",
       :event-types="eventTypes"
     )
     calendar-schedule(
-      :owners-data="employeesData"
+      :owners-data="employeesData",
-      :current-date="currentDate"
+      :current-date="currentDate",
-      :time-information="timeInformation"
+      :time-information="timeInformation",
-      :events-data="eventsData"
+      :events-data="eventsData",
-      :members-data="membersData"
+      :members-data="membersData",
-      :sidebar-width="sidebarWidth"
+      :sidebar-width="sidebarWidth",
-      :event-types="eventTypes"
+      :event-types="eventTypes",
-      :change-form-was-closed="changeFormWasClosed"
+      :change-form-was-closed="changeFormWasClosed",
-      @previous-date="switchPreviousDate"
+      @previous-date="switchPreviousDate",
-      @next-date="switchNextDate"
+      @next-date="switchNextDate",
-      @selected-layout="changeCalendarLayout"
+      @selected-layout="changeCalendarLayout",
-      @open-change-form="openFormCreateEvent"
+      @open-change-form="openFormCreateEvent",
-      @reset-change-form="resetChangeFormState"
+      @reset-change-form="resetChangeFormState",
-      @selected-event="writeEventData"
+      @selected-event="writeEventData",
       @delete-event="openModal"
     )
     calendar-form-add-event(
-      v-if="isOpenForm"
+      v-if="isOpenForm",
-      :close-form="closeFormCreateEvent"
+      :close-form="closeFormCreateEvent",
-      :owners-data="employeesData"
+      :owners-data="employeesData",
-      :members-data="membersData"
+      :members-data="membersData",
-      :selected-event-data="selectedEvent"
+      :selected-event-data="selectedEvent",
-      :event-types="eventTypes"
+      :event-types="eventTypes",
-      @clear-selected-event-data="clearSelectedEvent"
+      @clear-selected-event-data="clearSelectedEvent",
       @close-change-form="setChangeFormState"
     )
     base-modal(
-      v-model="showModal"
+      v-model="showModal",
       title="Удаление события"
     ) 
       calendar-delete-modal(
-        :event-types="eventTypes"
+        :event-types="eventTypes",
-        :owner-event="selectedEvent"
+        :owner-event="selectedEvent",
-        :close-modal="changeShowModal"
+        :close-modal="changeShowModal",
         @update-events="fetchEventsData"
       )
 </template>

src/pages/calendar/components/CalendarBackground.vue

@@ -5,7 +5,7 @@
     .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
-          v-for="hour in timeCoil"
+          v-for="hour in timeCoil",
           :key="hour"
         )
           .middle-line

src/pages/calendar/components/CalendarClockColumn.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
   .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-5.px-3
     span.text-base(
-      v-for="hour in timeCoil"
+      v-for="hour in timeCoil",
-      :key="hour"
+      :key="hour",
       :class="currentHourStyle(hour)"
     ) {{ hour }}
 </template>

src/pages/calendar/components/CalendarColumn.vue

@@ -4,8 +4,8 @@
       .flex.items-center
         base-avatar.mr-2(:size="32", :color="ownerData.color")
           img(
-            :src="ownerData.avatar"
+            :src="ownerData.avatar",
-            alt="Team member"
+            alt="Team member",
             v-if="ownerData.avatar"
           )
           span(v-if="!ownerData.avatar") {{ defaultAvatar }}
@@ -14,16 +14,16 @@
       column-header-checkbox
     .body.pl-1
       calendar-event-card(
-        v-for="event in dayEvents"
+        v-for="event in dayEvents",
-        :key="event.id"
+        :key="event.id",
-        :id="event.id"
+        :id="event.id",
-        :ownerEvent="event"
+        :ownerEvent="event",
-        :event-types="eventTypes"
+        :event-types="eventTypes",
-        :style="eventCardPosition(event.start, event.end)"
+        :style="eventCardPosition(event.start, event.end)",
-        :change-form-was-closed="changeFormWasClosed"
+        :change-form-was-closed="changeFormWasClosed",
-        @selected-event="transmitEventData"
+        @selected-event="transmitEventData",
-        @reset-change-form="transmitResetChangeForm"
+        @reset-change-form="transmitResetChangeForm",
-        @delete-event="transmitDeleteEvent"
+        @delete-event="transmitDeleteEvent",
         :schedule-body-ref="scheduleBodyRef"
       )
 </template>

src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
-    :class="{disable: !isChecked}"
+    :class="{disable: !isChecked}",
     @click="changeState"
   )
     .icon-doc-ok.text-xxl

src/pages/calendar/components/CalendarEventCard.vue

@@ -22,12 +22,12 @@
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
     calendar-event-description-card(
-      v-if="isOpenDescriptionCard"
+      v-if="isOpenDescriptionCard",
-      :owner-event="ownerEvent"
+      :owner-event="ownerEvent",
-      :event-types="eventTypes"
+      :event-types="eventTypes",
-      @selected-event="transmitEventData"
+      @selected-event="transmitEventData",
-      @close-description-card="closeDescriptionCard"
+      @close-description-card="closeDescriptionCard",
-      @delete-event="transmitDeleteEvent"
+      @delete-event="transmitDeleteEvent",
       :schedule-body-ref="scheduleBodyRef"
     )
   </template>

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -2,7 +2,7 @@
   .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
     :style="{...typeColor, ...position, ...constantWidth}",
     v-click-outside="close",
-    :class="{'shadow': !disabled}"
+    :class="{'shadow': !disabled}",
     ref="descriptionCard"
   )
     .flex.justify-between.items-center.mb-2

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -10,8 +10,8 @@
       .flex.flex-col.gap-y-2
         span.text-xs.opacity-40.font-bold.leading-3 Вид события
         base-custom-select.select(
-          v-model="kind"
+          v-model="kind",
-          :items="kindEvents"
+          :items="kindEvents",
           placeholder="Вид события"
         )
       .flex.flex-col(class="gap-y-1.5")
@@ -52,7 +52,7 @@
       v-if="!selectedEventData.id",
       :size="40",
       :disabled="disabledCreateButton",
-      @click="sendEventData"
+      @click="sendEventData",
     ) Создать событие
     base-button.update-button.text-base.font-semibold(
       v-else,

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
   .layout-switch-wrapper.inline-block
     button#day.py-2.px-3(
-      :class="dayLayoutState"
+      :class="dayLayoutState",
       @click="changeSelectedLayout"
     ) День
     button#week.py-2.px-3(
-      :class="weekLayoutState"
+      :class="weekLayoutState",
       @click="changeSelectedLayout"
     ) Неделя
 </template>

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,55 +1,55 @@
 <template lang="pug">
   .schedule.mx-2.pb-22px(
-    ref="schedule"
+    ref="schedule",
     :style="scheduleWidth"
   )
     calendar-header(
-      :current-date="currentDate"
+      :current-date="currentDate",
-      :is-current-date="isCurrentDate"
+      :is-current-date="isCurrentDate",
-      @previous-date="previousDate"
+      @previous-date="previousDate",
-      @next-date="nextDate"
+      @next-date="nextDate",
       @selected-layout="selectedLayout"
     )
     .schedule-body(
-      @scroll="changeScrollingState"
+      @scroll="changeScrollingState",
       ref="scheduleBody"
     )
       .hiding-container.fixed(v-if="isScrolling")
       .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
-          v-for="(owner, index) in filteredOwners"
+          v-for="(owner, index) in filteredOwners",
-          :key="owner.id"
+          :key="owner.id",
-          :owner-data="owner"
+          :owner-data="owner",
-          :day-events="filterEventsByOwner(owner)"
+          :day-events="filterEventsByOwner(owner)",
-          :day-start-time="validateStartTime"
+          :day-start-time="validateStartTime",
-          :day-end-time="validateEndTime"
+          :day-end-time="validateEndTime",
-          :style="columnSize"
+          :style="columnSize",
-          :event-types="eventTypes"
+          :event-types="eventTypes",
-          :change-form-was-closed="changeFormWasClosed"
+          :change-form-was-closed="changeFormWasClosed",
-          @selected-event="transmitEventData"
+          @selected-event="transmitEventData",
-          @reset-change-form="transmitResetChangeForm"
+          @reset-change-form="transmitResetChangeForm",
-          @delete-event="transmitDeleteEvent"
+          @delete-event="transmitDeleteEvent",
           :schedule-body-ref="$refs.scheduleBody"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
           calendar-clock-column(
-            :timeCoil="timeCoil"
+            :timeCoil="timeCoil",
-            :current-time="currentTime"
+            :current-time="currentTime",
-            :is-current-date="isCurrentDate"
+            :is-current-date="isCurrentDate",
             :day-end-time="validateEndTime"
           )
           .time-circle-indicator.left-74px(
-            v-if="isShownIndicator"
+            v-if="isShownIndicator",
             :style="circleIndicatorLocation"
           )  
         span.time-line-indicator.block.left-20(
-          v-if="isShownIndicator"
+          v-if="isShownIndicator",
           :style="lineIndicatorLocation"
         )
         .flex(:class="calendarBackgroundWidth")
           calendar-background(
-            :time-coil="timeCoil"
+            :time-coil="timeCoil",
             :owners-count="ownersCount"
           )
 </template>

src/pages/clients/components/ClientsTableHat.vue

@@ -2,18 +2,28 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input(:with-icon="true", icon-position="left", v-model:value="searchClient")
+        base-input(
+          :with-icon="true",
+          icon-position="left",
+          v-model:value="searchClient",
+          placeholder="Введите фамилию"
+        )
           .icon-search
-      button.filter-button.flex.items-center.justify-center.box-border(
+      base-button(
-        class="px-2.5"
+        outlined,
-        @click="searchLastName"
+        @click="searchLastName",
-      )
+        :size=40
-        .icon-filter.text-xl.leading-4
+      ) Поиск
-      button.filter-button.flex.items-center.justify-center.px-10px(@click="resetLastName") Очистить  
+      base-button(
-    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
+        v-if="searchClient.length > 0",
+        secondary,
+        @click="resetLastName",
+        :size=40
+      ) Очистить
+    clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
-      base-button(left-icon="icon-download" :icon-left-size="16" :size="40" :outlined="true")
+      base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
-      base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openForm")
+      base-button(left-icon="icon-plus", :icon-left-size="13", :size="40", @click="openForm")
         span.font-semibold Создать
 </template>
 
@@ -53,8 +63,4 @@ export default {
 <style lang="sass" scoped>
 .input
   width: 280px
-  height: fit-content
-.filter-button
-  border-radius: 4px
-  border: 2px solid var(--border-light-grey-color)
 </style>