69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
<template>
|
|
<SMContainer class="sm-attachments">
|
|
<h3 v-if="props.attachments && props.attachments.length > 0">
|
|
Attachments
|
|
</h3>
|
|
<div
|
|
v-for="file of props.attachments"
|
|
:key="file.id"
|
|
class="sm-attachment-row">
|
|
<div class="sm-attachment-file-icon">
|
|
<img
|
|
:src="getFileIconImagePath(file.title || file.name)"
|
|
height="48"
|
|
width="48" />
|
|
</div>
|
|
<a :href="file.url" class="sm-attachment-file-name">{{
|
|
file.title || file.name
|
|
}}</a>
|
|
<div class="sm-attachment-file-size">
|
|
({{ bytesReadable(file.size) }})
|
|
</div>
|
|
</div>
|
|
</SMContainer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { bytesReadable } from "../helpers/types";
|
|
import { getFileIconImagePath } from "../helpers/utils";
|
|
import SMContainer from "./SMContainer.vue";
|
|
|
|
const props = defineProps({
|
|
attachments: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sm-attachments {
|
|
h3 {
|
|
margin-top: map-get($spacer, 3);
|
|
}
|
|
|
|
.sm-attachment-row {
|
|
border-bottom: 1px solid $secondary-background-color;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.sm-attachment-file-icon {
|
|
display: flex;
|
|
width: 64px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sm-attachment-file-size {
|
|
font-size: 75%;
|
|
padding-left: 0.75rem;
|
|
color: $secondary-color-dark;
|
|
}
|
|
}
|
|
}
|
|
</style>
|