changed virtualList to be modulable

src/components/List/VirtualList.vue

@@ -1,23 +1,13 @@
 <template>
   <div ref="vlist" class="vlist" @scroll="scroll">
     <div ref="vscroll" class="vscroll" :style="`padding: ${(vIndex*$props.rowHeight!)}px 0px ${(list.length*$props.rowHeight!)-(vIndex*$props.rowHeight!)}px;`">
-      <div :class="'playerRow ' + (player.id === $props.highlighted ? 'selected' : '')" v-for="(player, index) in visibleList"
+      <slot v-for="(data, index) in visibleList" :data="data" :index="index"></slot>
-        v-bind:key="player.id" v-on:click="$emit('highlightPlayer', player.id)" :ref="`player:` + player.id">
-        <div><span>{{ index + 1 + vIndex }}</span></div>
-        <div><span>{{ player.value.username }}</span></div>
-        <div><span>{{ player.value.kills }}</span></div>
-        <div><span>{{ player.value.deaths }}</span></div>
-        <div><span>{{ Math.round(player.value.kills / Math.max(1, player.value.deaths) * 100) / 100 }}</span></div>
-        <div><span>{{ player.value.max_distance }}</span></div>
-        <div><span>{{ Math.round(((player.value.total_distance / player.value.kills) || 0) * 100) / 100 }}</span></div>
-      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Player } from '@/stores/kill'
+import { defineComponent, PropType } from 'vue'
-import { defineComponent, PropType, Ref } from 'vue'
 
 export default defineComponent({
   data () {
@@ -28,11 +18,10 @@ export default defineComponent({
     }
   },
   props: {
-    list: { type: Array as PropType<(Ref<Player> & { id: string })[]>, default: () => [] },
+    list: { type: Array as PropType<any[]>, default: () => [] },
     rowHeight: { type: Number, default: () => 32 },
     highlighted: String
   },
-  emits: ['highlightPlayer'],
   mounted () {
     if (this.$props.list) {
       this.vlistHeight = (this.$refs.vlist as HTMLElement)?.getBoundingClientRect().height || 0
@@ -83,25 +72,4 @@ export default defineComponent({
   height: calc(100% - 3em);
 }
 
-.playerRow:nth-child(2n+1) {
-  background: var(--accent);
-}
-
-.playerRow:nth-child(2n) {
-  background: var(--bg-color);
-}
-
-.playerRow:hover {
-  background: var(--current-line);
-}
-
-.playerRow>div:not(:last-child){
-  border-right: solid var(--bg-color) 2px;
-}
-
-.playerRow>div {
-  padding: .5em .8em 0 .25em;
-  overflow: hidden;
-}
-
 </style>

src/components/PlayerList.vue

@@ -12,7 +12,17 @@
       <span v-on:click="updateSort('avg_distance')"
         :class="sortingData.argument == 'avg_distance' ? 'selected' : ''">average distance</span>
     </div>
-    <VirtualList :list="playerList" :row-height="32" @highlightPlayer="$emit('highlightPlayer', $event)" :highlighted="playerHighlighted"></VirtualList>
+    <VirtualList :list="playerList" :row-height="32" @highlightPlayer="$emit('highlightPlayer', $event)" :highlighted="playerHighlighted" v-slot="slotProps">
+      <div :class="'playerRow ' + (slotProps.data.id === $props.playerHighlighted ? 'selected' : '')" v-on:click="$emit('highlightPlayer', slotProps.data.id)">
+        <div><span>{{ slotProps.index+1 }}</span></div>
+        <div><span>{{ slotProps.data.value.username }}</span></div>
+        <div><span>{{ slotProps.data.value.kills }}</span></div>
+        <div><span>{{ slotProps.data.value.deaths }}</span></div>
+        <div><span>{{ Math.round(slotProps.data.value.kills / Math.max(1, slotProps.data.value.deaths) * 100) / 100 }}</span></div>
+        <div><span>{{ slotProps.data.value.max_distance }}</span></div>
+        <div><span>{{ Math.round(((slotProps.data.value.total_distance / slotProps.data.value.kills) || 0) * 100) / 100 }}</span></div>
+      </div>
+    </VirtualList>
     <!-- <div :class="'playerRow ' + (player.id === $props.playerHighlighted ? 'selected' : '')"
        v-on:click="$emit('highlightPlayer', player.id)"
       :ref="`player:` + player.id">
@@ -180,6 +190,27 @@ export default defineComponent({
   height: 2em;
 }
 
+.playerRow:nth-child(2n+1) {
+  background: var(--accent);
+}
+
+.playerRow:nth-child(2n) {
+  background: var(--bg-color);
+}
+
+.playerRow:hover {
+  background: var(--current-line);
+}
+
+.playerRow>div:not(:last-child){
+  border-right: solid var(--bg-color) 2px;
+}
+
+.playerRow>div {
+  padding: .5em .8em 0 .25em;
+  overflow: hidden;
+}
+
 .playerHeaders {
   position: sticky;
   top: 0;