Sort.vue

<template>
	<div class="btn-sort px-2" tabindex="0">
		{{ title }}
		<outline-sort-ascending-icon
			class="ml-2 icon"
			v-if="currentSortDir == 'desc' && currentSort == fieldName" />
		<outline-sort-descending-icon
			class="ml-2 icon"
			v-if="currentSortDir == 'asc' && currentSort == fieldName" />
	</div>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			required: true
		},
		fieldName: {
			type: String,
			required: true
		},
		currentSort: {
			type: String,
			required: true
		},
		currentSortDir: {
			type: String,
			required: true,
			validator: function (value) {
				return ["asc", "desc"].indexOf(value) !== -1
			}
		}
	}
}
</script>

<style lang="scss">
.btn-sort {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50px;
	cursor: pointer;
	background: var(--info);
	color: white;

	&:focus,
	&:hover {
		background: #086375;
	}
}
</style>