traxxx/assets/components/header/filters.vue

<template>
	<v-popover class="filters-container">
		<div class="filters">
			<Icon icon="filter" />

			<div
				v-if="selectedTags.length > 0"
				class="applied"
			>{{ selectedTags.join(', ') }}</div>

			<div
				v-else
				class="applied empty"
			>Filter by tags</div>
		</div>

		<div slot="popover">
			<ul class="tags nolist">
				<li
					v-for="tag in tags"
					:key="`tag-${tag}`"
					class="tag"
					:class="{ selected: selectedTags.includes(tag) }"
				>
					<router-link :to="{ params: { tags: getNewRange(tag) } }">
						<Icon
							icon="checkmark"
							class="include"
						/>
					</router-link>

					<router-link
						:to="{ params: { tags: selectedTags.length === 1 && selectedTags.includes(tag) ? 'all' : tag } }"
						class="name"
					>{{ tag }}</router-link>
				</li>
			</ul>
		</div>
	</v-popover>
</template>

<script>
const tags = [
	'airtight',
	'anal',
	'blowjob',
	'double-penetration',
	'facial',
	'gangbang',
	'lesbian',
	'mff',
	'mfm',
	'orgy',
];

function getNewRange(tag) {
	if (this.selectedTags.includes(tag)) {
		if (this.selectedTags.length === 1) {
			return 'all';
		}

		return this.selectedTags.filter(selectedTag => selectedTag !== tag).join('+');
	}

	return this.selectedTags.concat(tag).join('+');
}

function selectedTags() {
	return this.$route.params.tags.split('+').filter(selectedTag => selectedTag !== 'all');
}

export default {
	props: {
		filter: {
			type: Array,
			default: () => [],
		},
		compact: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			tags,
		};
	},
	computed: {
		selectedTags,
	},
	methods: {
		getNewRange,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.filters {
	display: inline-flex;
	align-items: center;

	.icon {
		fill: var(--shadow);
		margin: 0 .5rem 0 0;
	}
}

.applied {
	width: 12rem;
	background: var(--background);
	padding: .5rem;
	border: solid 1px var(--shadow-hint);
	font-size: 1rem;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;

	&.empty {
		color: var(--shadow);
	}
}

.tags {
	padding: .5rem 0;
}

.tag {
	display: flex;
	align-items: center;

	.include {
		width: 1rem;
		height: 1rem;
		padding: .5rem .75rem .5rem 1rem;
		fill: var(--darken-hint);

		&:hover {
			cursor: pointer;
		}
	}

	.name {
		display: flex;
		justify-content: space-between;
		flex-grow: 1;
		padding: .5rem 1rem .5rem .75rem;
		color: var(--text);
		text-decoration: none;
	}

	&:hover {
		background: var(--darken-hint);
		cursor: pointer;
	}

	.include:hover,
	.name:hover {
		background: var(--darken-hint);
	}

	.include:hover,
	&.selected .include {
		fill: var(--success);
	}
}
</style>