68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { format, isToday } from 'date-fns'
|
|
|
|
defineProps({
|
|
mail: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanelContent>
|
|
<div class="flex justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<UAvatar v-bind="mail.from.avatar" :alt="mail.from.name||mail.from.address" size="lg" />
|
|
|
|
<div class="min-w-0">
|
|
<p class="text-gray-900 dark:text-white font-semibold">
|
|
{{ mail.from.name ||mail.from.address}}
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-400 font-medium">
|
|
{{ mail.subject }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="font-medium text-gray-900 dark:text-white">
|
|
{{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}
|
|
</p>
|
|
</div>
|
|
|
|
<UDivider class="my-5" />
|
|
|
|
<InputGroup class="mb-3">
|
|
<UButton
|
|
v-for="attachment in mail.attachments"
|
|
icon="i-heroicons-arrow-down-tray"
|
|
disabled
|
|
>
|
|
{{attachment.filename}}
|
|
</UButton>
|
|
</InputGroup>
|
|
|
|
<div class="contentscroll overflow-scroll">
|
|
<iframe class="flex-1 h-full w-full" :srcdoc="mail.html" v-if="mail.html"/>
|
|
|
|
<!-- <div class="flex-1" v-html="mail.html" v-if="mail.html">
|
|
|
|
</div>-->
|
|
<div class="flex-1" v-else>
|
|
<p>{{mail.text}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</UDashboardPanelContent>
|
|
</template>
|
|
|
|
<style>
|
|
.contentscroll{
|
|
height: 80vh;
|
|
}
|
|
</style> |