Native Versions Save

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

{
  "$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

<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

{
  "$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

<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 }) => ({})).

This release fixes #5 and add support of custom elements #4

Usage Use FormSchema.setComponent(type, component[, props = {}]) to define custom element to use for rendering. See vue-json-schema-demo-elementui for a complete example.

// an element-ui example

import FormSchema from 'vue-json-schema'
import {
  Form,
  FormItem,
  Input,
  Radio,
  Checkbox,
  Select,
  Option,
  Button
} from 'element-ui'

FormSchema.setComponent('label', FormItem)
FormSchema.setComponent('email', Input)
FormSchema.setComponent('text', Input)
FormSchema.setComponent('textarea', Input)
FormSchema.setComponent('checkbox', Checkbox)
FormSchema.setComponent('radio', Radio)
FormSchema.setComponent('select', Select)
FormSchema.setComponent('option', Option)

// Use the third argument to define props of the component
FormSchema.setComponent('button', Button, {
  type: 'primary',
  label: 'Subscribe'
})

// The third argument can also be a function that return an object
FormSchema.setComponent('form', Form, (vm) => {
  // vm is the FormSchema VM

  const labelWidth = '120px'
  const model = vm.data
  const rules = {}

  vm.fields.forEach((field) => {
    rules[field.name] = {
      required: field.required,
      message: field.title
    }
  })

  return { labelWidth, rules, model }
})

export default {
  data: () => ({
    schema: {...}
  }),
  // ...
  components: { FormSchema }
}