88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<template lang="pug">
|
|
base-input-container(:label="label")
|
|
.relative
|
|
base-input(type="text", v-model="value.label", size="M")
|
|
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-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: "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%
|
|
|
|
.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>
|