WIP создал элемент long list

src/components/base/BaseInput.vue

@@ -16,8 +16,7 @@
         :disabled="disabled",
         :type="type"
       )
-      .slot(v-if="withIcon", :class="iconPosition")
-        slot.cursor-pointer
+      slot(name='icon')
 </template>
 
 <script>
@@ -28,12 +27,6 @@ export default {
       default: "text",
     },
     modelValue: String,
-    withIcon: {
-      default: false,
-    },
-    iconPosition: {
-      default: "right",
-    },
     placeholder: String,
     borderNone: Boolean,
     borderError: Boolean,
@@ -75,10 +68,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.left
-  order: -1
-.right
-  order: 1
 //TODO: Вынести grey borders в taiwindConfig
 .input-wrapper
   border: 1.5px solid var(--border-light-grey-color)

src/components/base/BaseInputContainer.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  .flex.flex-col
+    .label {{ label }}
+    slot
+</template>
+
+<script>
+export default {
+  name: "BaseInputContainer",
+  props: {
+    label: String,
+  },
+};
+</script>

src/components/kit/KitLongList.vue

@@ -0,0 +1,90 @@
+<template lang="pug">
+  base-input-container(:label="label")
+  .flex.container    
+    base-input(type="text", v-model="value.label")
+      template(#icon)
+        .icon(@click="isExpand = !isExpand")
+    .menu(v-if="isExpand")
+      base-input(
+        type="text", 
+        v-model="searchValue",
+        placeholder="Поиск...")
+        template(#icon)
+          .icon1(@click="isExpand = !isExpand")
+      .item.p-1.cursor-pointer(
+        v-for="item in items", 
+        :key="item.id",
+        @click="pickValue(item)"
+      )
+        .text {{item.label}}
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+
+export default {
+  name: "KitLongList",
+  components: {
+    BaseInputContainer,
+    BaseInput,
+  },
+  props: {
+    label: String,
+    modelValue: Object,
+    getItems: Function,
+  },
+  data() {
+    return {
+      isExpand: false,
+      searchValue: "",
+      items: [],
+    };
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    pickValue(val) {
+      this.value = val;
+      this.isExpand = false;
+    },
+  },
+  watch: {
+    searchValue: function (val) {
+      this.items = this.getItems(val);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  background: url("../../assets/icons/down-arrow-1.svg") no-repeat 100% 50%
+  cursor: pointer
+  width: 20px
+  height: 100%
+
+.icon1
+  background: url("../../assets/icons/down-arrow-1.svg") no-repeat 100% 50%
+  cursor: pointer
+  width: 20px
+  height: 100%
+  rotate: 180deg
+.menu
+  background: #fff
+  position: absolute
+  height: 200px
+  z-index: 10
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+  .item
+</style>