score weight + quantils tooltip

src/components/Modal.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useEventListener, useVModel } from '@vueuse/core';
+import { watch } from 'vue';
+
+interface Props {
+    open: boolean;
+}
+
+interface Emit {
+    (e: 'update:open', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+});
+const emit = defineEmits<Emit>();
+
+const isOpen = useVModel(props, 'open', emit, {passive: true});
+
+watch(isOpen, value => {
+    if (value) {
+        document.body.classList.add('overflow-hidden');
+    } else {
+        document.body.classList.remove('overflow-hidden');
+    }
+});
+useEventListener('keyup', e => {
+    if (e.key === 'Escape') {
+        isOpen.value = false;
+    }
+});
+</script>
+
+<template>
+    <Transition name="fade">
+        <template v-if="isOpen">
+            <div class="fixed inset-0">
+                <div class="absolute bg-black opacity-80 inset-0 z-0" />
+                <div class="absolute grid inset-0">
+                    <div class="justify-self-center m-auto">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Transition>
+</template>
+
+<style scoped lang="postcss">
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 100ms ease-out;
+}
+
+</style>

src/components/SliderCheckbox.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+    modelValue?: boolean;
+}
+interface Emits {
+    (e: 'update:modelValue', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: false
+});
+const emit = defineEmits<Emits>();
+
+const value = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+    <label class="flex items-center relative w-max cursor-pointer select-none">
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
+        <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
+    </label>
+</template>
+
+<style scoped lang="postcss">
+    input:checked ~ span:last-child {
+        --tw-translate-x: 1.25rem;
+    }
+</style>

src/components/Tooltip.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { vElementHover } from '@vueuse/components';
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+    open: boolean;
+}
+
+interface Emit {
+    (e: 'update:open', value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+});
+const emit = defineEmits<Emit>();
+
+const isOpen = useVModel(props, 'open', emit, {passive: true});
+
+</script>
+
+<template>
+    <div clas="flex flex-col items-center justify-center" :class="{'open': isOpen}">
+        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
+            <slot name="header" />
+        </div>
+        <div v-if="isOpen" class="m-auto">
+            <div class="z-10 absolute">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>

src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.vue';
+export { default as SliderCheckbox } from './SliderCheckbox.vue';
+export { default as Tooltip } from './Tooltip.vue';
+

src/components/table/SortableHeader.vue

@@ -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>

src/components/table/index.ts

@@ -0,0 +1,3 @@
+export { default as SortableHeader } from './SortableHeader.vue';
+export * from './sort';
+

src/components/table/sort.ts

@@ -0,0 +1,42 @@
+import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+
+export type SortDirection = "asc" | "desc";
+export type UseSortOptions = {
+    defaultSortKey?: string;
+    defaultSortDirection?: SortDirection;
+};
+
+export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
+    const sortKey = ref<string | null>(options?.defaultSortKey ?? null);
+    const sortDirection = ref<SortDirection | null>(options?.defaultSortDirection ?? null);
+    const sortBy = (key: string, direction: SortDirection) => {
+        sortKey.value = key;
+        sortDirection.value = direction;
+    };
+    const headerProps = computed(() => ({
+        onSort: sortBy,
+        currentSortKey: sortKey.value,
+        sortDirection: sortDirection.value,
+    }));
+
+    const sortedArray = computed(() => toValue(array).sort((a, b) => {
+        if (sortKey.value === null || sortDirection.value === null) {
+            return 0;
+        }
+
+        const aValue = (a as any)[sortKey.value];
+        const bValue = (b as any)[sortKey.value];
+
+        if (aValue === bValue) {
+            return 0;
+        }
+
+        if (sortDirection.value === "asc") {
+            return aValue > bValue ? 1 : -1;
+        } else {
+            return aValue > bValue ? -1 : 1;
+        }
+    }));
+
+    return { sortedArray, headerProps };
+}