FileViewer

FileViewer - компонент для просмотра содержимого файлов.

Компонент работает с несколькими разными viewer для поддержки бОльшего кол-ва форматов, определеяет viewer по расширению из названия файла.

Props

files

import type { Component } from 'vue';

import type { FileSource, IFile } from '#sf/components/file/types';

export type FileViewerSource = FileSource | 'raw';

export type File = Pick<IFile, 'id' | 'name' | 'url' | 'directUrl'> &
  Partial<
    Pick<IFile, 'isInfected' | 'isProcessing' | 'isSuspicious' | 'isClean'>
  > & {
    downloadUrl?: string | null;
    fetchUrl?: () => Promise<string>;
    source?: FileViewerSource;
    /**
     * @deprecated instead use `source`
     */
    fileSource?: FileViewerSource;
  };

export type Viewer = {
  id: string;
  types: string[];
  component: Component;
};

• type: File[]
• required: true

Массив файлов для предпросмотра. Поддерживается так же указание прямого урла до файла через асинхронный file.fetchUrl или file.url и file.source: 'raw'. source в файле приоритетнее source пропа fp

source

  | 'example-work'
  | 'forum'
  | 'reference-page'
  | 'shop'
  | 'shop-demo'
  | 'shop-correction'
  | 'shop-correction-demo'
  | 'pretension'
  | 'pretension-report'

• type: FileSource
• default: null

"Источник" файлов относительно моделей бекенда

index

• type: number | null
• default: null

Индекс открытого файла относительно files. Если index !== null, FileViewer открывается.

Emits

update:index

result

• type: { action: 'close' }

Событие из useCloseModal, вызывается в момент закрытия модалки

Methods

open

(index: number = 0) => void

Открытие FileViewer с данным индексом и вызовом emit('update:index', index)

close

Закрытие модального окна и вызов emit('update:index', false)

Programmatic api

Апи для открытия файло-превью без добавления компонента в шаблоны

import { useFileViewer } from '#sf/components/file-viewer/api/index';

export default defineComponent({
setup() {
const { preview } = useFileViewer();

const onClick = async () => {
 await preview({
 files: [],
 index: 0,
 source: 'message'
 });
}
},
});

import type { File, FileViewerSource } from '../types';

export interface PreviewProps {
  files: File[];
  index?: number;
  source?: FileViewerSource;
  isDownloadDisabled?: boolean;

Ref api

<template>
  <div>
    <button @click="onOpen">
      Open
    </button>

    <FileViewer
      ref="fileViewer"
      :files="files"
    />
  </div>
</template>

<script>
import { ref } from 'vue';

const fileViewer = ref(null);
const onOpen = () => {
  fileViewer.value?.open(0);
}
</script>

FileViewer Example