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

src/components/base/BaseInput.vue

@@ -16,8 +16,7 @@
         :disabled="disabled",
         :type="type"
       )
-      .slot(v-if="withIcon", :class="iconPosition")
+      slot(name='icon')
-        slot.cursor-pointer
 </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>

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-6
+    
     base-input(
       label="ФИО пациента",
       v-model="patientFullName",
@@ -30,11 +31,11 @@
         :items="patientPhones"
       )
     input(:value='patientEqualClient') 
-    .text 'Пациент = Заказчик' + {{ patientEqualClient }}
+
-    base-input(
+    kit-long-list(
-      v-model="patient.full_name"
+      :get-items="getPerson",
-      label="ФИО Заказчика",
+      v-model="client",
-    )
+      label='Заказчик')
     //-.flex.justify-between
       base-custom-select.w-80(
         placeholder="Тип документа",
@@ -64,6 +65,8 @@
 import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
+import KitLongList from "@/components/kit/KitLongList.vue";
+
 import { mask } from "vue-the-mask";
 export default {
   name: "AgreementPerson",
@@ -71,6 +74,7 @@ export default {
     BaseInput,
     BaseCustomSelect,
     BaseSelect,
+    KitLongList,
   },
   directives: { mask },
   data() {
@@ -88,6 +92,7 @@ export default {
       },
       patientAddresses: [],
       patientPhones: [],
+      client: {},
     };
   },
   computed: {
@@ -108,5 +113,16 @@ export default {
       return `${this.patient.last_name} ${this.patient.first_name} ${this.patient.patronymic}`;
     },
   },
+  methods: {
+    getPerson(val) {
+      let vals = [
+        { id: 1, label: "Петров Антон Серггевич" },
+        { id: 2, label: "Мамк Антон Серггевич" },
+        { id: 3, label: "Петров Егор Анатольевич" },
+        { id: 4, label: "Антионо Антон Серггевич" },
+      ];
+      return vals.filter((el) => ~el.label.indexOf(val));
+    },
+  },
 };
 </script>