traxxx/assets/components/actors/countries.vue

89 lines
1.4 KiB
Vue
Raw Normal View History

2021-08-22 23:29:46 +00:00
<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>
export default {
props: {
countries: {
type: Array,
default: () => [],
},
selectedCountry: {
type: String,
default: null,
},
updateValue: {
type: Function,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
.countries:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint);
}
.country {
width: 15rem;
display: flex;
align-items: center;
overflow: hidden;
.flag {
width: 1.25rem;
padding: .25rem .5rem;
}
.icon {
padding: .25rem .5rem;;
fill: var(--shadow);
&:hover {
fill: var(--shadow-strong);
}
}
&:hover {
background: var(--shadow-hint);
cursor: pointer;
}
&.selected {
font-weight: bold;
}
}
.country-name {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: .25rem .5rem;
}
</style>