feat: added iframe 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 CoreIFrame from "../core_components/CoreIFrame.vue";
 import CoreTimer from "../core_components/CoreTimer.vue";
 import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
 import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
@@ -64,6 +65,7 @@ const templateMap = {
 	horizontalstack: CoreHorizontalStack,
 	separator: CoreSeparator,
 	image: CoreImage,
+	iframe: CoreIFrame,
 	icon: CoreIcon,
 	timer: CoreTimer,
 	textinput: CoreTextInput,

ui/src/core_components/CoreIFrame.vue

@@ -0,0 +1,98 @@
+<template>
+	<div class="CoreIFrame" v-on:click="handleClick" ref="rootEl">
+		<iframe
+      @load="handleLoad" 
+			:src="fields.src.value"
+			draggable="false"
+		/>
+    <div class="mask" />
+	</div>
+</template>
+
+<script lang="ts">
+import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
+import { getClick } from "../renderer/syntheticEvents";
+
+const description = "A component to embed an external resource in an iframe.";
+
+const loadHandlerStub = `
+def load_handler(state):
+
+	# Sets status message when resource is loaded
+
+	state["status"] = "Page loaded"`;
+
+export default {
+	streamsync: {
+		name: "IFrame",
+		description,
+		category: "Content",
+		fields: {
+			src: {
+				name: "Source",
+				default: '',
+				desc: "A valid URL. Alternatively, you can provide a state reference to a Matplotlib figure or a packed file.",
+				type: FieldType.Text,
+			},
+			cssClasses,
+		},
+		events: {
+			"ss-load": {
+				desc: "Fires when the resource has successfully loaded.",
+				stub: loadHandlerStub.trim(),
+			},
+		},
+	},
+};
+</script>
+
+<script setup lang="ts">
+import { Ref, computed, inject, ref } from "vue";
+import injectionKeys from "../injectionKeys";
+
+const rootEl:Ref<HTMLElement> = ref(null); 
+const fields = inject(injectionKeys.evaluatedFields);
+
+function handleClick(ev: MouseEvent) {
+	const ssEv = getClick(ev);
+	rootEl.value.dispatchEvent(ssEv);
+}
+function handleLoad(ev) {
+	const event = new CustomEvent("ss-load");
+	rootEl.value.dispatchEvent(event);
+}
+</script>
+
+<style scoped>
+@import "../renderer/sharedStyles.css";
+
+.CoreIFrame {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+}
+
+.CoreIFrame  iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  margin: auto;
+  border-radius: 12px;
+  border: 1px solid var(--separatorColor);
+}
+
+.CoreIFrame .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 12px;
+}
+
+.CoreIFrame.selected .mask {
+  display: none;
+}
+</style>