61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import VueMultiselect from 'vue-multiselect'
|
|
import { searchcategories } from '../../services/public';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const options = ref([]);
|
|
const isLoading = ref(false);
|
|
const { t } = useI18n();
|
|
|
|
defineProps({
|
|
selectedCategory: {
|
|
type: Array
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
defineEmits(['update:selectedCategory', 'clear-option'])
|
|
|
|
const searchCategory = async(query) => {
|
|
isLoading.value = true;
|
|
const resp = await searchcategories(query);
|
|
options.value = resp;
|
|
isLoading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueMultiselect
|
|
:value="selectedCategory"
|
|
@input="$event => $emit('update:selectedCategory', $event.target.value)"
|
|
:options="options"
|
|
:multiple="multiple"
|
|
:searchable="true"
|
|
:loading="isLoading"
|
|
:close-on-select="true"
|
|
@search-change="searchCategory"
|
|
@remove="$emit('clear-option')"
|
|
label="name"
|
|
track-by="name"
|
|
:placeholder="t('labels.selectSegment')"
|
|
:selectLabel="t('global.helpSelected')"
|
|
:selectedLabel="t('global.selected')"
|
|
:deselectLabel="t('global.removeSelected')"
|
|
>
|
|
<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> |