Merge pull request #243 from raaymax/pdf-component

ui/src/core/templateMap.ts

@@ -19,6 +19,7 @@ import CoreSeparator from "../core_components/CoreSeparator.vue";
 import CoreTab from "../core_components/CoreTab.vue";
 import CoreTabs from "../core_components/CoreTabs.vue";
 import CoreImage from "../core_components/CoreImage.vue";
+import CorePDF from "../core_components/CorePDF.vue";
 import CoreIFrame from "../core_components/CoreIFrame.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
@@ -65,6 +66,7 @@ const templateMap = {
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,
+	pdf: CorePDF,
 	iframe: CoreIFrame,
 	icon: CoreIcon,
 	timer: CoreTimer,

ui/src/core_components/CorePDF.vue

@@ -0,0 +1,77 @@
+<template>
+	<div class="CorePDF">
+		<object class="pdf" :data="fields.source.value" type="application/pdf">
+			<p>
+				You don't have a PDF plugin, but you can
+				<a :href="fields.source.value">download the PDF file. </a>
+			</p>
+		</object>
+		<div class="mask" />
+	</div>
+</template>
+
+<script lang='ts'>
+import { FieldType } from "../streamsyncTypes";
+import { cssClasses } from "../renderer/sharedStyleFields";
+
+const description =
+	"A component to embed a PDF document.";
+
+export default {
+	streamsync: {
+		name: "PDF",
+		description,
+		category: "Embed",
+		fields: {
+			source: {
+				name: "PDF source",
+				type: FieldType.Text,
+				desc: "A valid URL. Alternatively, you can provide a state reference to a packed PDF file.",
+			},
+			cssClasses,
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import injectionKeys from "../injectionKeys";
+const fields = inject(injectionKeys.evaluatedFields);
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+.CorePDF {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+}
+
+.CorePDF .pdf {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  border: 1px solid var(--separatorColor);
+}
+
+.CorePDF .mask {
+  pointer-events: none;
+}
+
+.CorePDF.beingEdited .mask {
+  pointer-events: all;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.CorePDF.beingEdited.selected .mask {
+  pointer-events: none;
+}
+</style>
+