[WIP] Заменил селекты, попровил стили

src/components/HeaderInputs.vue

@@ -13,7 +13,13 @@
           .icon-wrapper.mr-2.flex.justify-center
             .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
           .flex.items-center {{ filter }}
-    base-input.p-4(type="text", square, placeholder="Искать ...", borderless)
+    base-input.p-4(
+      type="text",
+      placeholder="Искать ...",
+      text-color="var(--btn-blue-color)",
+      borderless,
+      square
+    )
 </template>
 
 <script>

src/components/base/BaseSelect.vue

@@ -1,49 +1,35 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .font-semibold.opacity-40(
+    base-input-container(:label="label")
-      v-if="label",
+      q-select(
-      :class="labelClass"
+        v-model="value",
-    ) {{ label }}
+        :options="items",
-    .base-select(
+        :disable="disable",
-      @click="invertOpen",
+        bg-color="var(--bg-disable-grey-color)"
-      :class="{'open': open && !disable, 'border-none': borderNone}",
+        outlined,
-      :style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
+        dense,
-      ref="select"
+        emit-value,
+        map-options,
       )
-      .placeholder(
+        template(v-slot:selected)
-        :class="{'value-color': value || placeholderOpacity, ...textClass}",
+          span {{ textSelect }}
-        :style="{'color': !disable || '#9ca3af', 'opacity': 1}"
-      ) {{ value || placeholder }}
-      .flex.items-center
-        .select-form-separator.cursor-pointer.mr-4(v-if="separator")
-        span.icon-down-arrow.open-icon(:class="{'open': open && !disable }")
-      base-menu(v-if="open")
-        .items-container(
-          @click="open = false",
-          v-click-outside="leaveSelect",
-          :class="textClass"
-        )
-          .item(v-for="item in items", :key="item.id" @click="clickItem(item.label)") {{ item.label }}
 </template>
 
 <script>
 import BaseMenu from "@/components/base/BaseMenu";
+import BaseInputContainer from "@/components/base/BaseInputContainer";
+
 export default {
   name: "VSelect",
-  components: { BaseMenu },
+  components: { BaseMenu, BaseInputContainer },
   props: {
     placeholder: String,
-    modelValue: String,
+    modelValue: [Object, String],
     items: {
       type: Array,
       default: () => [],
     },
-    borderNone: Boolean,
-    separator: Boolean,
-    placeholderOpacity: Boolean,
     disable: Boolean,
-    textStyle: String,
-    labelStyle: String,
     label: String,
   },
   emits: ["update:modelValue"],
@@ -61,91 +47,9 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
-    textClass() {
+    textSelect() {
-      return this.textStyle
+      return this.value.label ? this.value.label : this.placeholder;
-        ? {
-            [this.textStyle]: true,
-          }
-        : {
-            "text-base": true,
-          };
-    },
-    labelClass() {
-      return this.labelStyle
-        ? {
-            [this.labelStyle]: true,
-          }
-        : {
-            "text-sm": true,
-          };
-    },
-  },
-  methods: {
-    clickItem(id) {
-      this.value = id;
-    },
-    leaveSelect() {
-      this.open = false;
-    },
-    invertOpen() {
-      if (!this.disable) this.open = !this.open;
     },
   },
 };
 </script>
-
-<style scoped lang="sass">
-.base-select
-  width: 100%
-  height: 40px
-  border: 1.5px solid #D3D4DC
-  border-radius: 4px
-  padding: 9px 16px
-  background-color: white
-  user-select: none
-  display: flex
-  justify-content: space-between
-  align-items: center
-  gap: 16px
-  cursor: pointer
-  &.open
-    border: 1.5px solid #4772F2
-.items-container
-  box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
-  border-radius: 4px
-  background-color: white
-  margin-top: 4px
-.placeholder
-  color: #090A15
-  opacity: 0.5
-  text-overflow: ellipsis
-  overflow: hidden
-.item
-  padding: 8px 16px
-  border-bottom: 0.5px solid #D3D4DC
-  color: #090A15
-  cursor: pointer
-  &:hover
-   background-color: rgba(215, 217, 255, 0.25)
-  &:last-child
-    border-bottom: none
-.open-icon
-  font-size: 10px
-  display: flex
-  &.open
-    transform: rotate(180deg)
-.separator
-  background-color: var(--btn-blue-color-3)
-  height: 24px
-  width: 1px
-  border-radius: 1px
-.border-none
-  border: none
-.value-color
-  opacity: 1
-.select-form-separator
-  background-color: var(--btn-blue-color-3)
-  height: 24px
-  width: 1px
-  border-radius: 1px
-</style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -7,7 +7,7 @@
       .flex.pt-2
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
     .flex.flex-col.gap-y-8
-      base-custom-select(
+      base-select(
         v-if="selectedEventData.id"
         v-model="status",
         :items="eventStatuses",
@@ -20,13 +20,13 @@
         label="Статус приема",
         outlined
       )
-      base-custom-select(
+      base-select(
         :items="ownersList",
         v-model="employees.employee",
         placeholder="Выберите сотрудника"
         label="Сотрудник"
       )
-      base-custom-select(
+      base-select(
         :items="membersList",
         v-model="members.person",
         placeholder="Выберите клиента",
@@ -79,7 +79,6 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import { fetchWrapper } from "@/shared/fetchWrapper.js";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
-import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import * as moment from "moment/moment";
 import { statusesDictionary } from "../utils/statusesDictionary.js";
 
@@ -88,7 +87,6 @@ export default {
   components: {
     BaseSelect,
     BaseInput,
-    BaseCustomSelect,
     TheNotificationProvider,
   },
   emits: ["clear-selected-event-data", "close-change-form"],

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .wrapper-info.h-full
     .grid.grid-cols-2.gap-x-4.gap-y-6
-      base-custom-select.input-info(
+      base-select(
         :items="priorityList",
         placeholder="Приоритет клиента",
         v-model="basicInfo.priority",
@@ -46,14 +46,14 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import { column } from "@/pages/clients/utils/tableConfig";
-import BaseCustomSelect from "@/components/base/BaseCustomSelect";
+import BaseSelect from "@/components/base/BaseSelect";
 
 export default {
   name: "FormCreateBasicInfo",
   components: {
     BaseInput,
     BaseAddingNetwork,
-    BaseCustomSelect,
+    BaseSelect,
   },
   props: {
     choosePriority: Function,

src/pages/clients/components/cells/TableCellBodyBirthday.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .flex.box-border.px-4.items-center.w-full.text-sm(
+  .flex.box-border.px-2.items-center.w-full.text-sm(
     :style="{ width : width + 'px'}"
   )
     span(v-if="!isOpenChange") {{ birthday }}
     base-input(
-      :width="130"
+      :width="140"
       type="date",
       v-if="isOpenChange",
       @click.stop,

src/pages/clients/components/cells/TableCellBodyNetworks.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .network-cell.flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
+  .flex.box-border.px-4.items-center.w-full(:style="{ width: width + 'px'}")
     .flex.gap-x-1
       .text-xl.icon.relative(
         v-for="network in getNetworks",
@@ -117,8 +117,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.network-cell
-  column-gap: 2px
 .icon
   color: var(--btn-blue-color)
   &:last-child

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -6,9 +6,10 @@
     .flex.gap-x-2.text-sm(class="w-[164px]")
       base-select(
         v-if="isOpenChange",
-        @click.stop :items="getPriorityList",
+        @click.stop,
+        :items="getPriorityList",
         v-model="value.priority",
-        textStyle="text-sm"
+        :placeholder="value.priority"
       )
 </template>
 
@@ -32,7 +33,7 @@ export default {
   computed: {
     getPriorityList() {
       return this.prioritySettings.settings.map((el) => {
-        return { label: el.text, id: el.id };
+        return el.text;
       });
     },
   },

src/pages/schedule/components/FormChangeShift.vue

@@ -8,8 +8,16 @@
         .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="closeForm")
     .flex.flex-col.gap-y-6
       base-input(label="Дата", type="date", outlined)
-      base-custom-select(v-model="currentEmployee", label="Текущий сотрудник")
+      base-select(
-      base-custom-select(v-model="currentEmployee", label="Замена сотрудника")
+        v-model="currentEmployee",
+        label="Текущий сотрудник",
+        placeholder="Выберите сотрудника"
+      )
+      base-select(
+        v-model="currentEmployee",
+        label="Замена сотрудника",
+        placeholder="Выберите сотрудника"
+      )
       .time-wrapper.flex.justify-center.gap-x-6
         base-input(
           type="time",
@@ -34,12 +42,12 @@
 </template>
 
 <script>
-import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "FormChangeShift",
-  components: { BaseCustomSelect, BaseInput },
+  components: { BaseSelect, BaseInput },
   props: { closeForm: Function, timesShift: Object },
   data() {
     return {

src/pages/schedule/components/ScheduleBar.vue

@@ -31,9 +31,8 @@
             style="width: 200px"
           )
       .graph-template.flex.flex-col.items-center.gap-y-4
-        base-custom-select(
+        base-select(
           :items="templateList",
-          center,
           v-model="template.item",
           placeholder="Шаблоны графиков"
         )
@@ -65,14 +64,14 @@
 </template>
 
 <script>
-import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "ScheduleBar",
   components: {
     BaseInput,
-    BaseCustomSelect,
+    BaseSelect,
   },
   props: {
     buttons: Array,

src/pages/schedule/components/ScheduleTableSelect.vue

@@ -18,12 +18,11 @@
       :style="{color: 'var(--btn-blue-color)'}"
     )
       // TODO: какая-то странная хуйня с v-model, передается пропса
-      base-custom-select(
+      base-select(
         v-if="!selectEmployee.label",
         :items="ownersList",
         v-model="selectEmployee",
-        placeholder="Добавить сотрудника",
+        placeholder="Добавить сотрудника"
-        :style="{border: 'none', justifyContent: 'center'}"
       )
       .flex.justify-center(v-else) {{selectEmployee.label}}
     .row.flex
@@ -39,11 +38,11 @@
 </template>
 
 <script>
-import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 
 export default {
   name: "ScheduleTableSelect",
-  components: { BaseCustomSelect },
+  components: { BaseSelect },
   props: {
     selectEmployee: Object,
     result: Array,