88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { InternalApi } from "nitropack/types";
|
|
|
|
const props = defineProps<{
|
|
images: InternalApi["/api/gallery"]["get"][number][];
|
|
initialIndex: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{ close: [number] }>();
|
|
|
|
const currentIndex = ref(props.initialIndex);
|
|
</script>
|
|
|
|
<template>
|
|
<UModal
|
|
fullscreen
|
|
:dismissible="false"
|
|
:ui="{ body: 'bg-black p-0!', header: 'hidden' }"
|
|
@close:prevent="emit('close', currentIndex)"
|
|
>
|
|
<template #body>
|
|
<div class="relative flex flex-col items-center justify-center">
|
|
<UCarousel
|
|
v-slot="{ item }"
|
|
:start-index="props.initialIndex"
|
|
:items="images"
|
|
:ui="{
|
|
item: 'flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
|
|
}"
|
|
arrows
|
|
:prev="{
|
|
variant: 'link',
|
|
icon: 'i-lucide-chevron-left',
|
|
class: 'left-4!',
|
|
ui: { leadingIcon: 'size-8' },
|
|
}"
|
|
:next="{
|
|
variant: 'link',
|
|
icon: 'i-lucide-chevron-right',
|
|
class: 'right-4!',
|
|
ui: { leadingIcon: 'size-8' },
|
|
}"
|
|
:duration="15"
|
|
class="w-screen h-screen"
|
|
@select="(index) => (currentIndex = index)"
|
|
>
|
|
<img
|
|
:src="item.url"
|
|
class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
|
|
/>
|
|
|
|
<!-- metadata -->
|
|
<div
|
|
class="px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
|
|
>
|
|
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ item.exif.camera }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ item.exif.lens }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ item.exif.settings.aperture }}</span>
|
|
<span>{{ item.exif.settings.shutter }}</span>
|
|
<span>ISO {{ item.exif.settings.iso }}</span>
|
|
<span>{{ item.exif.settings.focalLength }}</span>
|
|
</div>
|
|
</UCarousel>
|
|
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="link"
|
|
size="xl"
|
|
class="absolute top-6 right-6"
|
|
aria-label="Close modal"
|
|
@click="emit('close', currentIndex)"
|
|
/>
|
|
|
|
<p
|
|
class="text-white/70 text-sm absolute bottom-6 left-1/2 -translate-x-1/2"
|
|
>
|
|
{{ currentIndex + 1 }} / {{ images.length }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</template>
|