From 9384bb1668b66e8a02269ec9c53363964e5526dd Mon Sep 17 00:00:00 2001
From: dderbentsov <dderbentsov@gmail.com>
Date: Tue, 3 Jan 2023 03:53:43 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20short=20?=
 =?UTF-8?q?list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/kit/KitShortList.vue | 75 +++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/kit/KitShortList.vue

diff --git a/src/components/kit/KitShortList.vue b/src/components/kit/KitShortList.vue
new file mode 100644
index 0000000..930a93e
--- /dev/null
+++ b/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>