Fix errors not shown after form initialized

Initializing the form with showValidationErrors set to true now displays the errors as expected. Closes #70.

Many thanks to @harish2704, @THirrrsch and @Fuasmattn who have contributed the PRs included in this release!

Duplicate field id fix

In some cases it was possible for multiple fields to get the same id, see issue #61. This issue has now been fixed by @harish2704 who contributed PR #62 with the fix. As a bonus, the field id's should now also be less CPU intensive to calculate!

Improvements for working with ajv-errors

In previous versions the errorMessage property used byajv-errors did not work, but thanks to @THirrrsch and @Fuasmattn who have contributed PR #68 which implements support for this feature. Their PR also included a fix for in the code which generates paths used to determine whether a field is required or not.

Dependency upgrades

The ajv and lodashdependencies have now been updated to the latest versions.

v2.7.0

eventProp and improvements for working with checkboxes

New prop eventProp

vue-form-json-schema automatically handles Events but until this release it hasn't been possible to configure what value should be extracted from the event. Previously event.target.value was always used, but now it can be configured to use eventProp, which allows you to extract any property from event.target, which means you can for example retrieve event.target.checked.

See documentation for eventProp

Improvements to automatic handling of attrs/domProps for native elements

Automatic handling of checked attribute/dom property for input type="checkbox" elements was broken but has now been fixed. With this fix it is now possible to use an object in componentProps to determine whether an element should have attrs/domProps set.

Dynamic options

This release includes the dynamicOptions feature. This feature provides a powerful way to conditionally apply or modify any of a field's properties by using a JSON Schema. This provides for example the ability to update a field and change, such as css classes, conditionally using only JSON Schema

Example using Vue Composition API

Another example has been added, this time using Vue's composition API

Breaking release!

This update contains the following changes:

• Removes non-prefixed props. Fixes #7
• No longer merges new model with old one. Fixes #11
• Improved handling of string values in fieldOptions.class
• Added support for passing field model to custom prop
  • Previously the field's model was always passed to the value prop, but now it can be passed to any prop via the valueProp option. The default is still value.
    • Configure the valueProp on the field's root object:
    • or, to set the prop globally for all fields configure the valueProp property on the options object passed to the vue-form-json-schema component.
• Named export changes
  • The project structure has been updated and the named exports have been updated to reflect that. If you only used the default export you will not have to change anything.
    • vfjsViewer -> vfjsGlobal
    • vfjsComponentMixin -> vfjsFieldMixin
    • New export: vfjsField

This is considered a major release due to changing the API with the removal of non-prefixed props. Previously a field's component would get passed the following non-prefixed props:

NOTE: You are only affected by this if your field's component made use of any of these props. If you for example only used errorHandlerin the field's fieldOptionsyou are not affected by this change. If however your field's component used these props you will have to update to the prefixed version of the prop, see the list below. Note the exception for thevalue prop.

• children
• component
• errorHandler
• errorOptions
• errors
• fieldOptions
• id
• model
• modelKey
• required
• schema
• schemas
• state
• tag **
• uiSchema
• value *

* The field's model is still passed to the value prop unless the valueKey has been set, either globally or on the field, to another value. ** This property has been removed

As these props are no longer passed to the field's component. Instead use the following prefixed versions:

• children -> vfjsChildren (or vfjsChildrenUiSchema to get the ui schema instead of the rendered nodes)
• component -> vfjsComponent
• errorHandler -> vfjsFieldErrorHandler
• errorOptions -> vfjsFieldOptions
• errors -> vfjsFieldErrors
• fieldOptions -> vfjsFieldOptions
• id -> vfjsFieldId
• model -> vfjsFieldModel
• modelKey -> vfjsFieldModelKey
• required -> vfjsFieldRequired
• schema -> vfjsFieldSchema
• schemas -> vfjsFieldSchemas
• state -> vfjsFieldState
• uiSchema -> vfjsFieldUiSchema
• value -> vfjsFieldModel
• tag -> This property has been removed