71 lines
1.1 KiB
Vue
71 lines
1.1 KiB
Vue
<script setup>
|
|
import { inject } from 'vue';
|
|
|
|
import Admin from '#/components/admin/admin.vue';
|
|
|
|
const { pageProps } = inject('pageContext');
|
|
|
|
const {
|
|
template,
|
|
html,
|
|
text,
|
|
error,
|
|
} = pageProps;
|
|
</script>
|
|
|
|
<template>
|
|
<Admin class="page">
|
|
<div class="header">
|
|
<h2 class="heading">{{ template }}</h2>
|
|
</div>
|
|
|
|
<p v-if="error" class="error">Failed to render template: {{ error }}</p>
|
|
|
|
<template v-else>
|
|
<iframe
|
|
:srcdoc="html"
|
|
class="frame"
|
|
title="E-mail preview"
|
|
/>
|
|
|
|
<details v-if="text" class="text">
|
|
<summary>Plain-text version</summary>
|
|
<pre>{{ text }}</pre>
|
|
</details>
|
|
</template>
|
|
</Admin>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.error {
|
|
color: var(--warn);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.frame {
|
|
width: 100%;
|
|
min-height: 60rem;
|
|
border: solid 1px var(--shadow-weak-30);
|
|
border-radius: .5rem;
|
|
background: #fff;
|
|
}
|
|
|
|
.text {
|
|
margin-top: 1rem;
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
padding: 1rem;
|
|
background: var(--background-dark-20);
|
|
border-radius: .5rem;
|
|
}
|
|
}
|
|
</style>
|