traxxx-web/components/filters/countries.vue

<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>