Added support for Iframe-based extension interfaces

src/components/appContent.vue

@@ -141,6 +141,7 @@
       >
         <extensionContent
           :forms="plugin.forms"
+          :frame="plugin.frame"
           :web-component="plugin.wc"
           :view-panel="plugin.viewPanel"
           @reloadForms="updatePlugins()"

src/components/tabContentComponents/extensionContent.vue

@@ -2,7 +2,8 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
-      <div v-if="webComponent">
+      <vue-friendly-iframe v-if="frame" :src="frame.href"></vue-friendly-iframe>
+      <div v-else-if="webComponent">
         <WebComponentLoader
           :component-u-r-l="webComponent.href"
           :component-name="webComponent.name"
@@ -11,6 +12,7 @@
       <!-- Handle OpenFlexure eV Forms -->
       <div
         v-for="form in forms"
+        v-else-if="forms"
         :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
         class="uk-height-1-1 uk-width-1-1"
       >
@@ -62,6 +64,11 @@ export default {
       required: false,
       default: null
     },
+    frame: {
+      type: Object,
+      required: false,
+      default: null
+    },
     viewPanel: {
       type: String,
       required: false,
@@ -70,3 +77,13 @@ export default {
   }
 };
 </script>
+
+<style>
+.vue-friendly-iframe {
+  height: 100%;
+}
+
+.vue-friendly-iframe iframe {
+  height: 100%;
+}
+</style>

src/main.js

@@ -4,6 +4,7 @@ import store from "./store";
 import UIkit from "uikit";
 import VueTour from "vue-tour";
 import LoadScript from "vue-plugin-load-script";
+import VueFriendlyIframe from "vue-friendly-iframe";
 
 require("vue-tour/dist/vue-tour.css");
 
@@ -16,6 +17,9 @@ Vue.use(LoadScript);
 // Use vue-tour module
 Vue.use(VueTour);
 
+// Use Friendly Iframe module
+Vue.use(VueFriendlyIframe);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({