(WIP) add virtual list to tiles

src/components/utilities/zoneEditor/Tiles.vue

@@ -25,8 +25,9 @@
               {{ tag }}
             </button>
           </div>
-          <div class="flex justify-between flex-wrap gap-2.5 items-center">
-            <div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block">
+          <div v-bind="containerProps">
+            <div v-bind="wrapperProps" class="flex justify-start flex-wrap gap-2.5 content-start">
+              <div v-for="{ data: tile } in list" :key="tile.id" class="max-w-[25%] inline-block">
                 <img
                   class="border-2 border-solid max-w-full"
                   :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`"
@@ -41,6 +42,7 @@
               </div>
             </div>
           </div>
+        </div>
       </template>
     </Modal>
   </Teleport>
@@ -53,6 +55,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
 import Modal from '@/components/utilities/Modal.vue'
 import type { Tile } from '@/types'
+import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 const isModalOpen = ref(false)
@@ -73,6 +76,14 @@ const filteredTiles = computed(() => {
   })
 });
 
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
+  filteredTiles,
+  {
+    itemHeight: 40,
+    itemWidth: 72,
+  },
+)
+
 const toggleTag = (tag: string) => {
   if (selectedTags.value.includes(tag)) {
     selectedTags.value = selectedTags.value.filter(t => t !== tag)