Added first basic form elements

src/components/panelLeft.vue

@@ -7,7 +7,9 @@
       <tabIcon id="navigate" uk-icon="location" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="capture" uk-icon="camera" :requireConnection="true" :currentTab="currentTab" @set-tab="setTab" />
       <tabIcon id="settings" uk-icon="cog" :requireConnection="false" :currentTab="currentTab" @set-tab="setTab" />
+
       <tabIcon v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :uk-icon="plugin.icon" :requireConnection="plugin.requiresConnection" :currentTab="currentTab" @set-tab="setTab" />
+
     </div>
 
     <!-- Corresponding vertical tab content -->
@@ -25,9 +27,11 @@
         <tabContent id="settings" :requireConnection="false" :currentTab="currentTab">
           <paneSettings/>
         </tabContent>
+
         <tabContent v-for="plugin in plugins" :key="plugin.id" :id="plugin.id" :requireConnection="plugin.requiresConnection" :currentTab="currentTab">
-          <p v-html="plugin.content"></p>
+          <JsonForm :schema="plugin.schema"/>
         </tabContent>
+  
       </div>
     </div>
 
@@ -40,14 +44,17 @@
 import axios from 'axios'
 
 // Import generic components
-import tabIcon from './genericComponents/tabIcon.vue'
+import tabIcon from './genericComponents/tabIcon'
-import tabContent from './genericComponents/tabContent.vue'
+import tabContent from './genericComponents/tabContent'
 
 // Import pane components
-import paneConnect from './controlComponents/paneConnect.vue'
+import paneConnect from './controlComponents/paneConnect'
-import paneNavigate from './controlComponents/paneNavigate.vue'
+import paneNavigate from './controlComponents/paneNavigate'
-import paneCapture from './controlComponents/paneCapture.vue'
+import paneCapture from './controlComponents/paneCapture'
-import paneSettings from './controlComponents/paneSettings.vue'
+import paneSettings from './controlComponents/paneSettings'
+
+// Import plugin components
+import JsonForm from './pluginComponents/formComponents/JsonForm'
 
 // Export main app
 export default {
@@ -59,7 +66,8 @@ export default {
     paneConnect,
     paneNavigate,
     paneCapture,
-    paneSettings
+    paneSettings,
+    JsonForm
   },
 
   data: function () {
@@ -71,7 +79,39 @@ export default {
           id: 'test-plugin',
           icon: 'code',
           requireConnection: false,
-          content: "<b>HELLO WORLD</b>"
+          schema: [
+            {
+              fieldType: "htmlBlock",
+              name: "heading",
+              content: "<b>This is a cool plugin!</b>"
+            },
+            {
+              fieldType: "selectList",
+              name: "title",
+              multi: false,
+              label: "Title",
+              options: ["", "Mr", "Ms", "Mx", "Dr", "Madam", "Lord"]
+            },
+            {
+              fieldType: "textInput",
+              placeholder: "First Name",
+              label: "First Name",
+              name: "firstName"
+            },
+            {
+              fieldType: "textInput",
+              placeholder: "Last Name",
+              label: "Last Name",
+              name: "lastName"
+            },
+            {
+              fieldType: "numberInput",
+              placeholder: "Age",
+              name: "age",
+              label: "Age",
+              minValue: 0
+            }
+          ]
         }
       ]
     }  

src/components/pluginComponents/formComponents/JsonForm.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <component v-for="(field, index) in schema"
+      :key="index"
+      :is="field.fieldType"
+      v-model="formData[field.name]"
+      v-bind="field">
+
+    </component>
+  </div>
+</template>
+
+<script>
+
+import numberInput from "./fieldComponents/numberInput";
+import selectList from "./fieldComponents/selectList";
+import textInput from "./fieldComponents/textInput";
+import htmlBlock from "./fieldComponents/htmlBlock";
+
+export default {
+  name: 'JsonForm',
+
+  components: { 
+    numberInput, 
+    selectList, 
+    textInput,
+    htmlBlock
+  },
+
+  props: {
+    'schema': {
+      type: Array,
+      required: true
+    }
+  },
+
+  data: function () {
+    return {
+      formData: {}
+    }
+  },
+
+  created: function () {
+    // `this` points to the vm instance
+    console.log(this.schema)
+  }
+}
+</script>
+
+<style scoped></style>

src/components/pluginComponents/formComponents/fieldComponents/htmlBlock.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <p v-html="content"></p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textInput',
+  props: [ 
+    'label', 
+    'name',
+    'content'
+  ]
+}
+</script>
+
+<style scoped></style>

src/components/pluginComponents/formComponents/fieldComponents/numberInput.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <input 
+      type="number"
+      :name="name"
+      :value="value"
+      @input="$emit('input', $event.target.value)"
+      :placeholder="placeholder"
+    >
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'numberInput',
+  props: ['placeholder', 'label', 'name', 'value']
+}
+
+</script>

src/components/pluginComponents/formComponents/fieldComponents/selectList.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+    <select :multiple="multi"
+            :value="value"
+            @input="$emit('input',
+            $event.target.value)">
+      <option v-for="option in options"
+              :key="option">
+        {{option}}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selectList',
+  props: [
+    'multi', 
+    'options', 
+    'name', 
+    'label',
+    'value'
+  ]
+}
+</script>
+
+<style scoped></style>

src/components/pluginComponents/formComponents/fieldComponents/textInput.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <label>{{label}}</label>
+
+    <input 
+      type="text"
+      :name="name"
+      :value="value"
+      @input="$emit('input',$event.target.value)"
+      :placeholder="placeholder"
+    >
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'textInput',
+  props: [
+    'placeholder', 
+    'label', 
+    'name',
+    'value'
+  ]
+}
+</script>
+
+<style scoped></style>