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

src/components/base/BaseSelect.vue

@@ -1,49 +1,35 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    .font-semibold.opacity-40(
-      v-if="label",
-      :class="labelClass"
-    ) {{ label }}
-    .base-select(
-      @click="invertOpen",
-      :class="{'open': open && !disable, 'border-none': borderNone}",
-      :style="{'background-color': disable && 'var(--bg-disable-grey-color)'}"
-      ref="select"
-    )
-      .placeholder(
-        :class="{'value-color': value || placeholderOpacity, ...textClass}",
-        :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 }}
+    base-input-container(:label="label")
+      q-select(
+        v-model="value",
+        :options="items",
+        :disable="disable",
+        bg-color="var(--bg-disable-grey-color)"
+        outlined,
+        dense,
+        emit-value,
+        map-options,
+      )
+        template(v-slot:selected)
+          span {{ textSelect }}
 </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() {
-      return this.textStyle
-        ? {
-            [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;
+    textSelect() {
+      return this.value.label ? this.value.label : this.placeholder;
     },
   },
 };
 </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>