87 lines
1.4 KiB
Vue
Executable File
87 lines
1.4 KiB
Vue
Executable File
<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="updateValue('country', country.alpha2, true)"
|
|
>
|
|
<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"
|
|
@click.native.stop="updateValue('country', null, true)"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
countries: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
selectedCountry: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
updateValue: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
});
|
|
</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;
|
|
}
|
|
|
|
.icon {
|
|
padding: .25rem .6rem;
|
|
fill: var(--shadow);
|
|
|
|
&:hover {
|
|
fill: var(--shadow-strong-10);
|
|
}
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
</style>
|