107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
type ImageMetadata = {
|
|
url: string;
|
|
date: string;
|
|
camera: string;
|
|
lens: string;
|
|
settings?: {
|
|
aperture?: string;
|
|
shutter?: string;
|
|
iso?: string;
|
|
focalLength?: string;
|
|
};
|
|
};
|
|
|
|
const props = defineProps<{
|
|
images: ImageMetadata[];
|
|
initialIndex: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{ close: [number] }>();
|
|
|
|
const currentIndex = ref(props.initialIndex);
|
|
</script>
|
|
|
|
<template>
|
|
<UModal
|
|
fullscreen
|
|
:dismissible="false"
|
|
:ui="{ body: 'bg-black', header: 'hidden' }"
|
|
@close:prevent="emit('close', currentIndex)"
|
|
>
|
|
<template #body>
|
|
<div
|
|
class="relative w-full h-full flex flex-col items-center justify-center"
|
|
>
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
color="neutral"
|
|
variant="link"
|
|
size="xl"
|
|
class="absolute top-4 right-4 z-10"
|
|
aria-label="Close modal"
|
|
@click="emit('close', currentIndex)"
|
|
/>
|
|
|
|
<UCarousel
|
|
v-slot="{ item }"
|
|
:start-index="props.initialIndex"
|
|
:items="images"
|
|
:ui="{
|
|
item: 'flex-shrink-0 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-full h-full mt-10"
|
|
@select="(index) => (currentIndex = index)"
|
|
>
|
|
<img
|
|
:src="item.url"
|
|
class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
|
|
/>
|
|
|
|
<!-- metadata -->
|
|
<div
|
|
class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
|
|
>
|
|
<span>{{ item.date }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ item.camera }}</span>
|
|
<span class="text-white/50">|</span>
|
|
<span>{{ item.lens }}</span>
|
|
<template v-if="item.settings">
|
|
<span class="text-white/50">|</span>
|
|
<span v-if="item.settings.aperture">{{
|
|
item.settings.aperture
|
|
}}</span>
|
|
<span v-if="item.settings.shutter">{{
|
|
item.settings.shutter
|
|
}}</span>
|
|
<span v-if="item.settings.iso">ISO {{ item.settings.iso }}</span>
|
|
<span v-if="item.settings.focalLength">{{
|
|
item.settings.focalLength
|
|
}}</span>
|
|
</template>
|
|
</div>
|
|
</UCarousel>
|
|
|
|
<div class="text-white/70 text-sm">
|
|
{{ currentIndex + 1 }} / {{ images.length }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</template>
|