Sirttas
50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { HeaderComponent, SortDirection } from './sort';
|
|
|
|
interface Props {
|
|
currentSortKey: string | null;
|
|
sortDirection?: SortDirection | null;
|
|
showColumn?: (k: string) => boolean;
|
|
unsortable?: boolean;
|
|
sortKey: string;
|
|
headerComponent?: HeaderComponent;
|
|
}
|
|
interface Emit {
|
|
(e: 'sort', key: string, direction: SortDirection): void;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showColumn: () => () => true,
|
|
unsortable: false,
|
|
headerComponent: 'th',
|
|
});
|
|
const emit = defineEmits<Emit>();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<component v-if="showColumn(sortKey)" :is="headerComponent" class="sort-header">
|
|
<slot />
|
|
<template v-if="!unsortable">
|
|
<span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
|
|
<span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
.sort-header {
|
|
@apply relative h-8 pe-3;
|
|
}
|
|
span.asc, span.desc {
|
|
@apply absolute end-1 cursor-pointer text-xs transition-opacity;
|
|
}
|
|
span.asc {
|
|
@apply top-0.5;
|
|
}
|
|
span.desc {
|
|
@apply bottom-0.5;
|
|
}
|
|
</style>
|