65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import VueMultiselect from 'vue-multiselect'
|
|
import { searchcities } from '../../services/public';
|
|
|
|
const options = ref([]);
|
|
const isLoading = ref(false);
|
|
|
|
// defineProps(['selectedCities', 'multiple']);
|
|
defineProps({
|
|
selectedCities: {
|
|
type: Array
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
defineEmits(['update:selectedCities', 'clear-option'])
|
|
|
|
const searchState = async(query) => {
|
|
isLoading.value = true;
|
|
const resp = await searchcities(query);
|
|
options.value = resp;
|
|
isLoading.value = false;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VueMultiselect
|
|
:value="selectedCities"
|
|
@input="$event => $emit('update:selectedCities', $event.target.value)"
|
|
:options="options"
|
|
:multiple="multiple"
|
|
:searchable="true"
|
|
:loading="isLoading"
|
|
:close-on-select="true"
|
|
:disabled="disabled"
|
|
@search-change="searchState"
|
|
@remove="$emit('clear-option')"
|
|
placeholder="Busca por ciudad"
|
|
label="city_name"
|
|
track-by="city_name"
|
|
selectLabel="Presione para seleccionar"
|
|
selectedLabel="Selecionado"
|
|
deselectLabel="Presione para remover selecion"
|
|
>
|
|
<template #noResult>
|
|
Oops! No se encontro coincidencias.
|
|
</template>
|
|
<template #noOptions>
|
|
Escriba para obtener lista.
|
|
</template>
|
|
</VueMultiselect>
|
|
</template>
|
|
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
|
|
|
<style scoped>
|
|
|
|
</style> |