Download Latest Version Support of multiple checkbox and grouped radio elements source code.zip (81.3 kB)
Email in envelope

Get an email when there's a new version of FormSchema Native

Home / v1.1.0
Name Modified Size InfoDownloads / Week
Parent folder
README.md 2017-11-10 2.5 kB
Support of multiple checkbox and grouped radio elements source code.tar.gz 2017-11-10 76.7 kB
Support of multiple checkbox and grouped radio elements source code.zip 2017-11-10 81.3 kB
Totals: 3 Items   160.5 kB 0

This release adds the support of multiple checkbox and grouped radio elements and fix some bugs.

API Update

  • Add a new method to get the form's reference: vm.form()
  • Remove prop dataClassError
  • Rename prop itemClass to inputWrappingClass

Multiple Checkbox elements

To define multiple checkbox, use the JSON Schema keyword anyOf: schema.json

:::json
{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "properties": {
    "multipleCheckbox": {
      "type": "array",
      "anyOf": [
        { "value": "daily", "label": "Daily New" },
        { "value": "promotion", "label": "Promotion" }
      ]
    }
  }
}

component.vue

:::html
<script>
  import FormSchema from 'vue-json-schema'

  FormSchema.setComponent('select', 'el-select', ({ item }) => {
    return { label: item.value }
  })

  FormSchema.setComponent('checkboxgroup', 'el-checkbox-group')

  export default { ... }
</script>

Grouped Radio elements

To group radio elements, use the JSON Schema keyword enum and attrs.type === 'radio': schema.json

:::json
{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "properties": {
    "groupedRadio": {
      "type": "string",
      "enum": [
        { "value": "daily", "label": "Daily New" },
        { "value": "promotion", "label": "Promotion" }
      ],
      "attrs": {
        "type": "radio"
      }
    }
  }
}

component.vue

:::html
<script>
  import FormSchema from 'vue-json-schema'

  FormSchema.setComponent('select', 'el-radio', ({ item }) => {
    return { label: item.value }
  })

  FormSchema.setComponent('radiogroup', 'el-radio-group')

  export default { ... }
</script>

Bugs fix

  • Fix input initialization of checkbox, radio and select [#34]
  • Fix reactivity on checkbox, radio and select elements
  • Fix displaying of the message error

Bracking changes

  • Change prototype vm.setComponent(type, component[, props = (vm, field) => ({})) to vm.setComponent(type, component[, props = ({ vm, field }) => ({})).
Source: README.md, updated 2017-11-10