Added first basic form elements

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>