создал short list

src/components/kit/KitShortList.vue

@@ -0,0 +1,75 @@
+<template lang="pug">
+  base-input-container(:label="label")
+    .relative
+      base-input(type="text", v-model="value.label")
+        template(#icon)
+          .icon(@click="isExpand = !isExpand")
+      .menu(v-if="isExpand")
+        .item.p-2.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: "KitShortList",
+  components: {
+    BaseInputContainer,
+    BaseInput,
+  },
+  props: {
+    label: String,
+    modelValue: Object,
+    items: Array,
+  },
+  data() {
+    return {
+      isExpand: false,
+      searchValue: "",
+    };
+  },
+  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;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  background: url("../../assets/icons/down-arrow-1.svg") no-repeat 100% 50%
+  cursor: pointer
+  width: 20px
+  height: 100%
+
+.menu
+  background: #fff
+  position: absolute
+  z-index: 10
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 0 0 4px 4px
+  border-top: none
+  width: 100%
+  .item
+    &:hover
+      background: var(--bg-hover-row-table)
+</style>