109 lines
1.6 KiB
Vue
109 lines
1.6 KiB
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>
|