82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
v-if="filteredCountries.length > 0"
|
|
class="countries-container"
|
|
>
|
|
<input
|
|
v-if="!filters.country"
|
|
v-model="countryQuery"
|
|
type="search"
|
|
placeholder="Filter countries"
|
|
class="input input-inline countries-search"
|
|
>
|
|
|
|
<div class="countries-list">
|
|
<Countries
|
|
v-if="!countryQuery && !filters.country && topCountries.length < filteredCountries.length"
|
|
:countries="topCountries"
|
|
:selected-country="filters.country"
|
|
@country="(alpha2) => emit('update', 'country', alpha2, true)"
|
|
/>
|
|
|
|
<Countries
|
|
:countries="filteredCountries"
|
|
:selected-country="filters.country"
|
|
@country="(alpha2) => emit('update', 'country', alpha2, true)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, inject } from 'vue';
|
|
|
|
import Countries from './countries.vue';
|
|
|
|
const props = defineProps({
|
|
filters: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
countries: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update']);
|
|
|
|
const pageContext = inject('pageContext');
|
|
const { pageProps } = pageContext;
|
|
|
|
const allCountries = computed(() => props.countries || pageProps.countries);
|
|
const countryQuery = ref('');
|
|
|
|
const topCountryAlpha2s = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
|
|
const topCountries = computed(() => topCountryAlpha2s.map((alpha2) => allCountries.value.find((country) => country.alpha2 === alpha2)).filter(Boolean));
|
|
const filteredCountries = computed(() => allCountries.value.filter((country) => new RegExp(countryQuery.value, 'i').test(country.name)));
|
|
</script>
|
|
|
|
<style scoped>
|
|
.countries-container {
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
padding: .25rem 0;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.countries-search {
|
|
width: 100%;
|
|
margin-bottom: .25rem;
|
|
border-bottom: solid 1px var(--shadow-weak-40);
|
|
}
|
|
|
|
.countries-list {
|
|
max-height: 13rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
:deep(.country.selected) .country-name {
|
|
padding: .5rem;
|
|
}
|
|
</style>
|