43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="count > 1" class="pointer-events-none absolute inset-0 z-20">
|
|
<button
|
|
type="button"
|
|
class="family-nav family-nav-prev pointer-events-auto"
|
|
:aria-label="prevLabel"
|
|
@click.stop="$emit('step', -1)"
|
|
@pointerdown.stop
|
|
>
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M15 5 8 12l7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="family-nav family-nav-next pointer-events-auto"
|
|
:aria-label="nextLabel"
|
|
@click.stop="$emit('step', 1)"
|
|
@pointerdown.stop
|
|
>
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="m9 5 7 7-7 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</button>
|
|
<span class="pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-zinc-950/75 px-2 py-0.5 text-[11px] tabular-nums text-amber-100">
|
|
{{ index + 1 }} / {{ count }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(defineProps<{
|
|
count: number
|
|
index: number
|
|
prevLabel?: string
|
|
nextLabel?: string
|
|
}>(), {
|
|
prevLabel: 'Previous image',
|
|
nextLabel: 'Next image'
|
|
})
|
|
defineEmits<{ step: [delta: number] }>()
|
|
</script>
|