61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useFileInfoStore } from '@/stores/file-info-data'
|
|
import mime from 'mime'
|
|
|
|
const { mimeFileMapping } = useFileInfoStore()
|
|
|
|
defineProps<{
|
|
fileMimeType: string | undefined
|
|
fileName: string | undefined
|
|
size: string
|
|
}>()
|
|
|
|
function getIcon(mimeType: string | undefined, fileName: string | undefined) {
|
|
if (mimeType === undefined) {
|
|
return 'mdi-file-question-outline'
|
|
}
|
|
|
|
const extFomMime = mime.getExtension(mimeType)
|
|
if (extFomMime) {
|
|
return mimeFileMapping[mimeType].icon
|
|
}
|
|
if (fileName && fileName.includes('.')) {
|
|
return 'mdi-file-outline'
|
|
}
|
|
return 'mdi-file-question-outline'
|
|
}
|
|
|
|
function getColor(mimeType: string | undefined, fileName: string | undefined) {
|
|
if (mimeType === undefined) {
|
|
return 'grey-5'
|
|
}
|
|
|
|
const extFomMime = mime.getExtension(mimeType)
|
|
if (extFomMime) {
|
|
return mimeFileMapping[mimeType].color
|
|
}
|
|
if (fileName && fileName.includes('.')) {
|
|
return 'blue-11'
|
|
}
|
|
return 'grey-5'
|
|
}
|
|
|
|
function getIconSize(s: string) {
|
|
type SizeMapping = {
|
|
[key: string]: string
|
|
}
|
|
const sizeMapping: SizeMapping = {
|
|
preview: '6em',
|
|
list: '2em',
|
|
}
|
|
return sizeMapping[s]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-icon
|
|
:name="fileMimeType && getIcon(fileMimeType, fileName)"
|
|
:color="fileMimeType && getColor(fileMimeType, fileName)"
|
|
:size="getIconSize(size)"
|
|
/>
|
|
</template>
|