traxxx-web/components/filters/years.vue

<template>
	<div class="years-container">
		<select
			v-model="selected"
			class="years nobar"
			multiple
			@change="updateYears"
		>
			<option
				v-for="year in years"
				:key="`year-${year.year}`"
				class="year"
				:value="year.year"
			>{{ year.year }}</option>
		</select>

		<Icon
			v-show="selected.length > 0"
			icon="cross2"
			class="clear"
			@click="clearYears"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
	filters: {
		type: Object,
		default: null,
	},
	years: {
		type: Array,
		default: null,
	},
});

const emit = defineEmits(['update']);
const selected = ref(props.filters.years);

function updateYears() {
	emit('update', 'years', selected.value);
}

function clearYears() {
	selected.value = [];
	emit('update', 'years', selected.value);
}
</script>

<style scoped>
.years-container {
	display: flex;
	align-items: stretch;
	border-bottom: solid 1px var(--glass-weak-30);
}

.years {
	height: 2.5rem;
	padding: .5rem;
	flex-grow: 1;
	border: none;
	overflow-x: auto;
	overflow-y: hidden;
	background: none;

	&:focus .year:checked {
		background: var(--primary) linear-gradient(0deg, var(--primary) 0%, var(--primary) 100%);
	}

	&:focus {
		outline: none;
	}
}

.year {
	display: inline-block;
	padding: .25rem;
	color: var(--text);
	font-size: .8rem;

	&:hover {
		color: var(--primary);
		cursor: pointer;
	}

	&:checked {
		color: var(--primary);
		background: none;
		font-weight: bold;
	}
}

.clear {
	height: auto;
	display: flex;
	align-items: center;
	padding: 0 .5rem;
	fill: var(--glass);

	&:hover {
		fill: var(--primary);
		cursor: pointer;
	}
}
</style>