Releases: formschema/native
Releases · formschema/native
Support of multiple checkbox and grouped radio elements
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
toinputWrappingClass
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) => ({}))
tovm.setComponent(type, component[, props = ({ vm, field }) => ({}))
.
Support of Custom Elements
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 }
}