Composables

useFileIcon

Risolve la classe icona PrimeIcons appropriata per un MIME type, con categoria e colore associati.

Panoramica

useFileIcon mappa MIME type → icona PrimeIcons + categoria leggibile + classe colore Tailwind. Usato internamente da AttachmentRow / AttachmentCard ma esportato per layout custom.

Le funzioni ritornate sono pure: non fanno watch su nulla, non hanno side effect. Puoi chiamarle anche fuori da setup — il composable accetta solo configurazione di mapping.

Firma

function useFileIcon(config?: FileIconConfig): {
  getIconClass: (mimeType: string) => string
  shouldShowThumbnail: (mimeType: string) => boolean
  getFileCategory: (mimeType: string) => string
  getColorClass: (mimeType: string) => string
}

interface FileIconConfig {
  customIcons?: Record<string, string>  // override per MIME specifici
  defaultIcon?: string                   // default 'pi-file'
}

Mapping principale

MIME pattern	`getIconClass`	Categoria	Colore
`image/*`	`pi-image`	`Immagine`	`text-blue-500`
`application/pdf`	`pi-file-pdf`	`PDF`	`text-red-500`
`application/msword` · `*.wordprocessingml.document` (.docx)	`pi-file-word`	`Word`	`text-blue-600`
`application/vnd.ms-excel` · `*.spreadsheetml.sheet` (.xlsx)	`pi-file-excel`	`Excel`	`text-green-600`
`application/vnd.ms-powerpoint` · `*.presentationml.presentation` (.pptx)	`pi-file-powerpoint`	`PowerPoint`	`text-orange-500`
`application/zip` · `application/x-rar-compressed` · `application/x-7z-compressed`	`pi-file-export`	`Archivio`	`text-yellow-500`
`text/plain`	`pi-file-edit`	`Testo`	`text-gray-500`
`text/html` · `text/css` · `text/javascript` · `application/json` · `application/xml`	`pi-code`	`Testo`	`text-gray-500`
`audio/*`	`pi-volume-up`	`Audio`	`text-green-500`
`video/*`	`pi-video`	`Video`	`text-purple-500`
altro	`pi-file` (config `defaultIcon`)	`Altro`	`text-gray-400`

API

`getIconClass(mimeType)`

Ritorna la sola classe icona PrimeIcons (es. 'pi-file-pdf'). Per renderizzare l'icona ricordati di prefissare pi:

<i :class="['pi', getIconClass('application/pdf')]" />

`shouldShowThumbnail(mimeType)`

true per immagini (image/*) e PDF — i tipi per cui ha senso mostrare un'anteprima visuale invece dell'icona.

`getFileCategory(mimeType)`

Stringa leggibile in italiano: 'Immagine', 'PDF', 'Word', 'Excel', 'PowerPoint', 'Archivio', 'Testo', 'Audio', 'Video', 'Altro'.

`getColorClass(mimeType)`

Classe Tailwind di colore associata alla categoria (es. 'text-red-500' per PDF). Utile per dare un colpo d'occhio cromatico in liste.

Configurazione custom

const { getIconClass } = useFileIcon({
  customIcons: {
    'application/x-myproprietaryformat': 'pi-key',
    'application/dwg': 'pi-compass'
  },
  defaultIcon: 'pi-question'
})

Esempio

<script setup lang="ts">
import { useFileIcon } from '@pzeta/vue-attachment'

const { getIconClass, getColorClass, getFileCategory } = useFileIcon()
</script>

<template>
  <div class="flex items-center gap-2">
    <i :class="['pi text-2xl', getIconClass('application/pdf'), getColorClass('application/pdf')]" />
    <span>{{ getFileCategory('application/pdf') }}</span>
  </div>
</template>

Anteprima live

useAttachments

Composable principale che orchestra un AttachmentAdapter + state reattivo per CRUD completo degli allegati.

useFileSize

Formatta e parsa dimensioni file in unità leggibili (B/KiB/MiB/GiB) con locale configurabile.