perfs

src/components/table/SortableHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SortDirection } from './sort';
+import { HeaderComponent, SortDirection } from './sort';
 
 interface Props {
     currentSortKey: string | null;
@@ -7,6 +7,7 @@ interface Props {
     showColumn?: (k: string) => boolean;
     unsortable?: boolean;
     sortKey: string;
+    headerComponent?: HeaderComponent;
 }
 interface Emit {
     (e: 'sort', key: string, direction: SortDirection): void;
@@ -14,24 +15,25 @@ interface Emit {
 
 withDefaults(defineProps<Props>(), {
     showColumn: () => () => true,
-    unsortable: false
+    unsortable: false,
+    headerComponent: 'th',
 });
 const emit = defineEmits<Emit>();
 
 </script>
 
 <template>
-    <th v-if="showColumn(sortKey)">
+    <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>
-    </th>
+    </component>
 </template>
 
 <style scoped lang="postcss">
-th {
+.sort-header {
     @apply relative h-8 pe-3;
 }
 span.asc, span.desc {

src/components/table/sort.ts

@@ -1,10 +1,12 @@
-import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+import { Component, DefineComponent, MaybeRefOrGetter, computed, ref, toValue } from "vue";
 
+export type HeaderComponent = Component | DefineComponent | string;
 export type SortDirection = "asc" | "desc";
 export type UseSortOptions = {
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
     ignoredColums?: MaybeRefOrGetter<string[]>;
+    headerComponent?: HeaderComponent;
 };
 
 export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
@@ -19,7 +21,8 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         onSort: sortBy,
         showColumn,
         currentSortKey: sortKey.value,
-        sortDirection: sortDirection.value
+        sortDirection: sortDirection.value,
+        headerComponent: options?.headerComponent,
     }));
 
     const sortedArray = computed(() => toValue(array).sort((a, b) => {

src/market/type/MarketTypeInput.vue

@@ -96,7 +96,7 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon`" alt="" />
+            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon?size=32`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
         <div v-if="suggestions.length > 1" class="z-10 absolute w-96">

src/market/type/MarketTypeLabel.vue

@@ -18,7 +18,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
     <div v-if="id || name">
-        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon`" class="inline-block w-5 h-5 me-1" alt="" />
+        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1" alt="" />
         <template v-if="name">
             {{ name }}
             <RouterLink v-if="id" :to="{ name: 'market-types', params: { type: id } }" custom #default="{ navigate }">

src/style.css

@@ -21,30 +21,36 @@
         @apply border rounded bg-slate-500 w-full;
     }
 
-    table {
+    table, .table {
         @apply table-auto border-collapse border-slate-500 w-full;
+    }
+    .table-header {
+        @apply table-cell;
+    }
+    .table-cell {
+        @apply pt-px pb-px;
+    }
+    th, .table-header {
+        @apply border bg-slate-600 px-1;
+    }
+    td, .table-cell {
+        @apply border px-1;
+    }
+    tr, .table-row {
+        @apply hover:bg-slate-900;
 
-        th {
-            @apply border bg-slate-600 px-1;
+        &.line-red {
+            @apply bg-amber-900 hover:bg-amber-950;
         }
-        td {
-            @apply border px-1;
+        &.line-blue {
+            @apply bg-sky-600 hover:bg-sky-800;
         }
-        tr {
-            @apply hover:bg-slate-900;
-
-            &.line-red {
-                @apply bg-amber-900 hover:bg-amber-950;
-            }
-            &.line-blue {
-                @apply bg-sky-600 hover:bg-sky-800;
-            }
-            &.line-green {
-                @apply bg-emerald-500 hover:bg-emerald-600;
-            }
+        &.line-green {
+            @apply bg-emerald-500 hover:bg-emerald-600;
         }
     }
 
+
     ::-webkit-scrollbar {
         @apply w-3;
     }