45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useGalleryStore } from "../stores/gallery";
|
|
// @ts-ignore
|
|
import { RecycleScroller } from 'vue-virtual-scroller';
|
|
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
|
import { convertFileSrc } from "@tauri-apps/api/core";
|
|
|
|
const store = useGalleryStore();
|
|
|
|
const onSelect = (index: number) => {
|
|
store.selectImage(index);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full w-full bg-gray-900">
|
|
<RecycleScroller
|
|
class="h-full"
|
|
:items="store.images"
|
|
:item-size="100"
|
|
key-field="path"
|
|
direction="horizontal"
|
|
>
|
|
<template #default="{ item, index }">
|
|
<div
|
|
class="h-full w-[100px] p-2 cursor-pointer transition-colors"
|
|
:class="{'bg-blue-600': store.selectedIndex === index, 'hover:bg-gray-700': store.selectedIndex !== index}"
|
|
@click="onSelect(index)"
|
|
>
|
|
<div class="h-full w-full bg-gray-800 flex items-center justify-center overflow-hidden rounded border border-gray-600">
|
|
<!-- Use generated thumbnail -->
|
|
<img
|
|
:src="convertFileSrc(item.thumbnail)"
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
fetchpriority="low"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</RecycleScroller>
|
|
</div>
|
|
</template>
|