87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<div class="h-full flex items-start justify-center">
|
|
<div class="relative w-full">
|
|
<!-- Remove Button -->
|
|
<RemoveButton
|
|
v-if="removable"
|
|
class="absolute z-20 top-[-10px] right-[-9px]"
|
|
@click.stop="handleRemoveClick"
|
|
v-tooltip="__('Remove')"
|
|
:dusk="$attrs.dusk"
|
|
/>
|
|
|
|
<div
|
|
class="bg-gray-50 dark:bg-gray-700 relative aspect-square flex items-center justify-center border-2 border-gray-200 dark:border-gray-700 overflow-hidden rounded-lg"
|
|
>
|
|
<!-- Upload Overlay -->
|
|
<div
|
|
v-if="file.processing"
|
|
class="absolute inset-0 flex items-center justify-center"
|
|
>
|
|
<ProgressBar
|
|
:title="uploadingLabel"
|
|
class="mx-4"
|
|
color="bg-green-500"
|
|
:value="uploadingPercentage"
|
|
/>
|
|
<div class="bg-primary-900 opacity-5 absolute inset-0" />
|
|
</div>
|
|
|
|
<!-- Image Preview -->
|
|
<img
|
|
v-if="isImage"
|
|
:src="previewUrl"
|
|
class="aspect-square object-scale-down"
|
|
/>
|
|
<div v-else>
|
|
<div class="rounded bg-gray-200 border-2 border-gray-200 p-4">
|
|
<Icon type="document-text" width="50" height="50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Information -->
|
|
<p class="font-semibold text-xs mt-1">{{ file.name }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useFilePreviews } from '@/composables/useFilePreviews'
|
|
import { useLocalization } from '@/composables/useLocalization'
|
|
import { computed, toRef } from 'vue'
|
|
|
|
const { __ } = useLocalization()
|
|
const emit = defineEmits(['removed'])
|
|
const props = defineProps({
|
|
file: { type: Object },
|
|
removable: { type: Boolean, default: true },
|
|
})
|
|
|
|
const uploadingLabel = computed(() => {
|
|
if (props.file.processing) {
|
|
return __('Uploading') + ' (' + props.file.progress + '%)'
|
|
}
|
|
|
|
return props.file.name
|
|
})
|
|
|
|
const uploadingPercentage = computed(() => {
|
|
if (props.file.processing) {
|
|
return props.file.progress
|
|
}
|
|
|
|
return 100
|
|
})
|
|
|
|
const { previewUrl, isImage } = useFilePreviews(toRef(props, 'file'))
|
|
|
|
const handleRemoveClick = () => emit('removed')
|
|
</script>
|
|
|
|
<script>
|
|
export default {
|
|
inheritAttrs: false,
|
|
}
|
|
</script>
|