Commit 5e69e52b authored by Joel Collins's avatar Joel Collins
Browse files

Added strict one-way binding to all form components

parent 4a0351f8

src/components/panelLeft.vue

+33 −10
Original line number Diff line number Diff line
@@ -94,15 +94,10 @@ export default { 
            },

            {

              fieldType: "textInput",

              placeholder: "First Name",

              label: "First Name",

              name: "firstName"

            },

            {

              fieldType: "textInput",

              placeholder: "Last Name",

              label: "Last Name",

              name: "lastName"

              placeholder: "Name",

              label: "Name",

              name: "name",

              value: "Squidward"

            },

            {

              fieldType: "numberInput",
@@ -110,7 +105,35 @@ export default { 
              name: "age",

              label: "Age",

              minValue: 0

            },

            [

              {

                fieldType: "numberInput",

                placeholder: "Number",

                name: "leftnum",

                label: "Left"

              },

              {

                fieldType: "numberInput",

                placeholder: "Number",

                name: "rightnum",

                label: "Right"

              }

            ],

            {

              fieldType: "radioList",

              name: "coolness",

              label: "Coolness",

              options: ["None", "Some", "Very"],

              value: "Some"

            },

            {

              fieldType: "checkList",

              name: "ingredients",

              label: "Ingredients",

              options: ["Pork", "Pie"],

              value: ["Pork"]

            },

          ]

        }

      ]

src/components/pluginComponents/formComponents/JsonForm.vue

+42 −10
Original line number Diff line number Diff line 
<template>

  <div>

    <component v-for="(field, index) in schema"

      :key="index"

  <div class="uk-form-stacked">

    <div v-for="(field, index) in schema" :key="index"> 

    

      <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>

        <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 

          <component

            :is="subfield.fieldType"

            @input="updateForm(subfield.name, $event)"

            v-bind="subfield">

          </component>

        </div>

      </div>

      

      <component

        :is="field.fieldType"

      v-model="formData[field.name]"

        @input="updateForm(field.name, $event)"

        v-bind="field">



      </component>



    </div>

  </div>

</template>
@@ -16,6 +28,8 @@ import numberInput from "./fieldComponents/numberInput"; 
import selectList from "./fieldComponents/selectList";

import textInput from "./fieldComponents/textInput";

import htmlBlock from "./fieldComponents/htmlBlock";

import radioList from "./fieldComponents/radioList";

import checkList from "./fieldComponents/checkList"



export default {

  name: 'JsonForm',
@@ -24,7 +38,9 @@ export default { 
    numberInput, 

    selectList, 

    textInput,

    htmlBlock

    htmlBlock,

    radioList,

    checkList

  },



  props: {
@@ -43,8 +59,24 @@ export default { 
  created: function () {

    // `this` points to the vm instance

    console.log(this.schema)

  },



  methods: {

    updateForm(fieldName, value) {

      console.log(`${fieldName}: ${value}`)

      this.$set(this.formData, fieldName, value);

      this.$emit('input', this.formData)

    }

  }

}

</script>



<style scoped></style>
 
 No newline at end of file
 
<style scoped>

.flex-container {

  display: flex;

}



.flex-container > div {

  flex-basis: 100%

}

</style>
 
 No newline at end of file

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

0 → 100644
+47 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <label>{{label}}</label>



    <div class="uk-form-controls">



      <div v-for="option in options" :key="option">

        <label><input class="uk-checkbox" type="checkbox" v-bind:value="option" v-model="computedChecked"> {{ option }}</label>

      </div>



    </div>



  </div>

</template>



<script>

export default {

  name: 'checkList',



  props: [

    'options', 

    'name', 

    'label',

    'value'

  ],



  data: function () {

    return {

      itemsChecked: this.value || []

    }

  },



  computed: {

    computedChecked: {

      get() {

        return this.itemsChecked

      },

      set(val) {

        this.itemsChecked = val

        this.$emit('input', this.itemsChecked)

      }

    }

  }

}

</script>



<style scoped></style>
 
 No newline at end of file

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

+1 −0
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ 
<script>

export default {

  name: 'textInput',



  props: [ 

    'label', 

    'name',

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

+13 −3
Original line number Diff line number Diff line 
<template>

  <div>

    <label>{{label}}</label>

    <label class="uk-form-label">{{label}}</label>



    <input 

      class="uk-input uk-form-small"

      type="number"

      :name="name"

      :value="value"
@@ -17,7 +18,16 @@ 


export default {

  name: 'numberInput',

  props: ['placeholder', 'label', 'name', 'value']



  props: [

    'placeholder', 

    'label', 

    'name', 

    'value'

  ]



}



</script>



<style scoped></style>
 
 No newline at end of file