40 lines
905 B
Vue
40 lines
905 B
Vue
<script setup lang="ts">
|
|
import { SortDirection } from './sort';
|
|
|
|
interface Props {
|
|
currentSortKey: string | null;
|
|
sortDirection?: SortDirection | null;
|
|
sortKey: string;
|
|
}
|
|
interface Emit {
|
|
(e: 'sort', key: string, direction: SortDirection): void;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
const emit = defineEmits<Emit>();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<th>
|
|
<span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
|
|
<slot />
|
|
<span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
|
|
</th>
|
|
</template>
|
|
|
|
<style scoped>
|
|
th {
|
|
@apply relative h-8;
|
|
}
|
|
span.asc, span.desc {
|
|
@apply absolute end-2 cursor-pointer text-xs;
|
|
}
|
|
span.asc {
|
|
@apply top-0.5;
|
|
}
|
|
span.desc {
|
|
@apply bottom-0.5;
|
|
}
|
|
</style>
|