Галерея

Код
vue
<script setup lang="ts">
import { ImageItem, ImageViewer } from "luna";
import { useTemplateRef } from "vue";
import type { ComponentExposed } from 'vue-component-type-helpers';

const viewer = useTemplateRef<ComponentExposed<typeof ImageViewer>>('viewer');

const images: Array<ImageItem> = [
  {
    id: 1,
    name: 'Изображение 1.jpg',
    imageUrl: '/images/1.jpg',
  },
  {
    id: 2,
    name: 'Изображение 2.jpg',
    imageUrl: '/images/2.jpg',
  },
  {
    id: 3,
    name: 'Изображение 3.jpg',
    imageUrl: '/images/3.jpg',
  },
  {
    id: 4,
    name: 'Изображение 4.webp',
    imageUrl: '/images/4.webp',
    thumbUrl: '/images/4.webp',
  },
]

const showGallery = (idx: number) => {
  viewer.value.show(images, idx);
}
</script>
<template>
  <div class="gallery">
    <button type="button" v-for="(img, idx) in images"
                          :key="img.id" @click="showGallery(idx)">
      <img :src="img.thumbUrl? img.thumbUrl : img.imageUrl" alt="" />
    </button>
  </div>
  <ImageViewer ref="viewer"></ImageViewer>
</template>
Галерея ​

Галерея
