traxxx-web/components/filters/countries.vue

88 lines
1.4 KiB
Vue
Raw Normal View History

<template>
<ul class="countries nolist">
<li
v-for="country in countries"
:key="country.alpha2"
:title="country.name"
:class="{ selected: selectedCountry === country.alpha2 }"
class="country"
@click="emit('country', country.alpha2)"
>
<img
:src="`/img/flags/${country.alpha2.toLowerCase()}.svg`"
class="flag"
>
<span class="country-name">{{ country.alias || country.name }}</span>
<Icon
v-if="selectedCountry === country.alpha2"
icon="cross2"
class="filter-remove"
@click.native.stop="emit('country', null)"
/>
</li>
</ul>
</template>
<script setup>
defineProps({
countries: {
type: Array,
default: () => [],
},
selectedCountry: {
type: String,
default: null,
},
});
const emit = defineEmits(['country']);
</script>
<style scoped>
.countries:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
}
.country {
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
.flag {
width: 1.5rem;
padding: .25rem .25rem .25rem .5rem;
}
&:hover {
background: var(--shadow-weak-30);
cursor: pointer;
}
&.selected {
font-weight: bold;
}
}
.country-name {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: .25rem .5rem;
}
.filter-remove {
display: flex;
align-items: center;
padding: .5rem;
fill: var(--shadow);
&:hover {
fill: var(--error);
}
}
</style>