73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import VueMultiselect from 'vue-multiselect'
|
|
import { searchProducts } from '../../services/public';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const options = ref([]);
|
|
const isLoading = ref(false);
|
|
const { t } = useI18n();
|
|
|
|
defineProps({
|
|
selectedProduct: {
|
|
type: Array
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
defineEmits(['update:selectedProduct', 'clear-option'])
|
|
|
|
const searchProductFn = async(query) => {
|
|
isLoading.value = true;
|
|
const resp = await searchProducts(query);
|
|
options.value = resp;
|
|
isLoading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueMultiselect
|
|
:value="selectedProduct"
|
|
@input="$event => $emit('update:selectedProduct', $event.target.value)"
|
|
:options="options"
|
|
:multiple="multiple"
|
|
:searchable="true"
|
|
:loading="isLoading"
|
|
:close-on-select="true"
|
|
:disabled="disabled"
|
|
@search-change="searchProductFn"
|
|
@remove="$emit('clear-option')"
|
|
label="name"
|
|
track-by="name"
|
|
:placeholder="t('labels.selectProduct')"
|
|
:selectLabel="t('global.helpSelected')"
|
|
:selectedLabel="t('global.selected')"
|
|
:deselectLabel="t('global.removeSelected')"
|
|
:class="[
|
|
required ? 'border-required' : '',
|
|
]"
|
|
>
|
|
<template #noResult>
|
|
{{ t('global.notFound') }}
|
|
</template>
|
|
<template #noOptions>
|
|
{{ t('global.emptyList') }}
|
|
</template>
|
|
</VueMultiselect>
|
|
</template>
|
|
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
|
|
|
<style scoped>
|
|
|
|
</style> |