66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import VueMultiselect from 'vue-multiselect'
|
|
import { searchstates } from '../../services/public';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const options = ref([]);
|
|
const isLoading = ref(false);
|
|
const { t } = useI18n();
|
|
|
|
// defineProps(['selectedState', 'multiple']);
|
|
defineProps({
|
|
selectedState: {
|
|
type: Array
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
defineEmits(['update:selectedState', 'clear-option'])
|
|
|
|
const searchState = async(query) => {
|
|
isLoading.value = true;
|
|
const resp = await searchstates(query);
|
|
options.value = resp;
|
|
isLoading.value = false;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<VueMultiselect
|
|
:value="selectedState"
|
|
@input="$event => $emit('update:selectedState', $event.target.value)"
|
|
id="states"
|
|
:options="options"
|
|
:multiple="multiple"
|
|
:searchable="true"
|
|
:loading="isLoading"
|
|
:close-on-select="true"
|
|
@search-change="searchState"
|
|
@remove="$emit('clear-option')"
|
|
label="state_name"
|
|
track-by="state_name"
|
|
:placeholder="t('labels.selectState')"
|
|
: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> |