GrFilePreview

<script setup lang="ts">
import { GrFilePreview } from '@feugene/granularity'

// Картинка нарисована на месте, а не взята с внешнего хоста: демо снимается в
// визуальный эталон, и чужой сервер сделал бы снимок невоспроизводимым.
const thumbnail = `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <rect width="200" height="200" fill="#dbeafe" />
    <path d="M0 150l60-50 45 38 40-30 55 42v50H0z" fill="#2563eb" opacity="0.3" />
    <circle cx="152" cy="52" r="22" fill="#2563eb" opacity="0.45" />
  </svg>
`)}`

// Ровно то, что отдаёт контроллер: варианты файла без фильтра по типу.
const files = [
  { name: 'receipt.png', mime: 'image/png', src: thumbnail },
  { name: 'contract.pdf', mime: 'application/pdf', src: null },
  { name: 'report.xlsx', mime: 'application/vnd.ms-excel', src: null },
  { name: 'sources.zip', mime: 'application/zip', src: null },
  { name: 'notes.txt', mime: 'text/plain', src: null },
  // Тип бэкенд не проставил — обычное состояние строки в БД.
  { name: 'export.dat', mime: null, src: null },
]
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <GrFilePreview
      v-for="file in files"
      :key="file.name"
      :src="file.src"
      :mime="file.mime"
      :name="file.name"
      tile-size="lg"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { GrFilePreview, GrImageViewer } from '@feugene/granularity'

// Картинки нарисованы на месте: демо попадает в визуальный эталон, а внешний
// хост сделал бы снимок зависящим от сети.
function receipt(hue: number): string {
  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <rect width="400" height="400" fill="hsl(${hue} 90% 92%)" />
      <rect x="120" y="70" width="160" height="260" rx="8" fill="hsl(${hue} 70% 55%)" opacity="0.25" />
      <rect x="150" y="110" width="100" height="10" rx="5" fill="hsl(${hue} 70% 40%)" />
      <rect x="150" y="140" width="70" height="10" rx="5" fill="hsl(${hue} 70% 40%)" opacity="0.6" />
      <rect x="150" y="170" width="90" height="10" rx="5" fill="hsl(${hue} 70% 40%)" opacity="0.6" />
    </svg>
  `)}`
}

const files = [
  { name: 'receipt-01.jpg', mime: 'image/jpeg', src: receipt(210) },
  { name: 'receipt-02.jpg', mime: 'image/jpeg', src: receipt(150) },
  // Битая ссылка: превью исчезло с диска. Плитка деградирует в заглушку, а не
  // в сломанную картинку.
  { name: 'receipt-03.jpg', mime: 'image/jpeg', src: 'https://cdn.invalid/missing.jpg' },
  { name: 'act.pdf', mime: 'application/pdf', src: null },
]

// В просмотрщик уходят только картинки: у PDF смотреть нечего.
const images = computed(() => files.filter(file => file.mime?.startsWith('image/')))

const viewerOpen = ref(false)
const viewerIndex = ref(0)

function open(name: string): void {
  viewerIndex.value = Math.max(0, images.value.findIndex(file => file.name === name))
  viewerOpen.value = true
}
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <template v-for="file in files" :key="file.name">
      <!--
        Картинка открывает просмотрщик, остальное — ссылка на оригинал.
        Решение принимает потребитель: плитка только сообщает о клике.
      -->
      <GrFilePreview
        v-if="file.mime?.startsWith('image/')"
        :src="file.src"
        :mime="file.mime"
        :name="file.name"
        clickable
        :aria-label="`Открыть ${file.name}`"
        @click="open(file.name)"
      />
      <GrFilePreview
        v-else
        :mime="file.mime"
        :name="file.name"
        href="#"
      />
    </template>

    <GrImageViewer
      v-model="viewerOpen"
      :url-list="images.map(file => file.src).filter((src): src is string => src !== null)"
      :initial-index="viewerIndex"
    />
  </div>
</template>

<script setup lang="ts">
import { GrFilePreview } from '@feugene/granularity'

// Лента вложений к заявке: одна ссылка на файл, ничего больше. Картинки
// нарисованы на месте, а не взяты с внешнего хоста: демо снимается в визуальный
// эталон, и чужой сервер сделал бы снимок зависящим от сети.
function scan(index: number): string {
  const hue = (index * 29) % 360

  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
      <rect width="160" height="160" fill="hsl(${hue} 85% 90%)" />
      <path d="M0 120l45-38 34 29 30-23 51 32v40H0z" fill="hsl(${hue} 70% 45%)" opacity="0.35" />
      <circle cx="120" cy="42" r="16" fill="hsl(${hue} 70% 45%)" opacity="0.5" />
    </svg>
  `)}`
}

const attachments = Array.from({ length: 12 }, (_, index) => ({
  name: `scan-${String(index + 1).padStart(2, '0')}.jpg`,
  mime: 'image/jpeg',
  src: scan(index),
}))
</script>

<template>
  <!--
    Пока картинка не доехала, плитка показывает скелет, а не пустой фон:
    «ещё грузится» и «у файла нет превью» — разные сообщения, и на дюжине
    плиток сразу видно, какое из них правда.
  -->
  <div class="flex flex-wrap gap-2">
    <GrFilePreview
      v-for="file in attachments"
      :key="file.name"
      :src="file.src"
      :mime="file.mime"
      :name="file.name"
      tile-size="xs"
      ratio="1:1"
    />
  </div>
</template>