score weight + quantils tooltip

2023-10-12 10:22:40 +02:00
parent 0e883dd688
commit 4cb3de356f
16 changed files with 272 additions and 108 deletions
@@ -0,0 +1,40 @@
+<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>
+        <slot />
+        <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>
+    </th>
+</template>
+
+<style scoped lang="postcss">
+th {
+    @apply relative h-8 pe-3;
+}
+span.asc, span.desc {
+    @apply absolute end-1 cursor-pointer text-xs;
+}
+span.asc {
+    @apply top-0.5;
+}
+span.desc {
+    @apply bottom-0.5;
+}
+</style>