add: completed register view

src/components/ui/Cities.vue

@@ -0,0 +1,60 @@
+<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
+        }
+    });
+    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"
+        @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>