WIP Сделала BaseSearchSelect

src/components/base/BaseSearchSelect.vue

@@ -4,27 +4,26 @@
       v-if="label",
       :class="labelClass"
     ) {{ label }}
-    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+    .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.relative(
       ref="select",
       @click="open = !open",
       :class="{'open': open, 'border-none': borderNone}",
     )
-      base-input(
-        :class="{'value-color': value.label || placeholderOpacity}",
+      input.w-full.outline-0.not-italic(
         :placeholder="placeholder",
-        v-model="value.label"
+        v-model="value.label",
       )
       .flex.items-center
         span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
-      base-options(
-        v-if="open",
-      )
+      base-options(v-if="open")
         .items-container.mt-1(
           @click="closeOptions",
           v-click-outside="leaveSelect",
           :class="textClass"
         )
+          .empty-window.py-2.px-4(v-if="items.length === 0") Ничего не найдено
           .item.py-2.px-4.cursor-pointer(
+            v-else
             v-for="item in items",
             :key="item?.id",
             :class="{'center': center}",
@@ -47,11 +46,6 @@ export default {
     },
     label: String,
     modelValue: Object,
-    maxItems: {
-      type: Number,
-      default: 5,
-    },
-    placeholderOpacity: Boolean,
     center: Boolean,
     borderNone: Boolean,
     textStyle: String,
@@ -60,9 +54,7 @@ export default {
   data() {
     return {
       open: false,
-      searchField: "",
-      saveSearchField: "",
-      selected: undefined,
+      filteredItems: [],
     };
   },
   emits: ["update:modelValue"],
@@ -115,13 +107,13 @@ export default {
 <style scoped lang="sass">
 .base-select
   width: 100%
-  border: 1.5px solid #D3D4DC
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
   background-color: white
   user-select: none
   height: 40px
   &.open
-    border: 1.5px solid #4772F2
+    border: 1.5px solid var(--btn-blue-color)
 .items-container
   box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
   border-radius: 4px
@@ -129,13 +121,13 @@ export default {
   max-height: 142px
   overflow-y: auto
 .placeholder
-  color: #090A15
+  color: var(--font-black-color)
   opacity: 0.4
   text-overflow: ellipsis
   overflow: hidden
 .item
-  border-bottom: 0.5px solid #D3D4DC
-  color: #090A15
+  border-bottom: 0.5px solid var(--border-light-grey-color)
+  color: var(--font-black-color)
   &:hover
    background-color: rgba(215, 217, 255, 0.25)
   &:last-child
@@ -143,21 +135,12 @@ export default {
 .open-icon
   &.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
 .center
   display: flex
   justify-content: center
+.empty-window
+  color: var(--font-black-color)
+  pointer-events: none
 </style>