Vue: Disable ArrayListRenderer add if control.data.length exceeds or is equal to maxItems

[Droxx]

The included ArrayListRenderer in Vue-Vanilla would allow more items to be added to an array than the schema allowed.

This PR uses the maxItems value from the schema (if present) and disables the add button if the control.data array is an equal, or greater, length to the maxItems value in the schema

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	274854e
🔍 Latest deploy log	https://app.netlify.com/sites/jsonforms-examples/deploys/64ac2860dd09f4000774cfaa
😎 Deploy Preview	https://deploy-preview-2154--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[CLAassistant]

All committers have signed the CLA.

[sdirix]

Thanks for the contribution ❤️. Much appreciated.

Please check the comments and add tests for the new use case(s). Also the build must succeed, it seems the linter is complaining.

[Droxx]

Thanks for the feedback @sdirix. I have also implemented minItems checking on the delete button.

I've left one comment on your review. But besides this it should be ready for re-evaluation

[coveralls]

coverage: 84.254%. remained the same when pulling 274854e on Droxx:disable-array-add-if-count-exceeds-maxitems into 7e0115f on eclipsesource:master.

[sdirix]

I cannot see this check being performed on any other renderers in the project (I do see it in use in the vuetify renderers). So I left it out in order to remain consistent with the other renderers

Besides the Vuetify renderers (ListWithDetail, ArrayControlRenderer, AdditionalProperties, AnyOfStringOrEnumControlRenderer, MultiStringControlRenderer, PasswordControlRenderer, StringControlRenderer, StringMaskControlRenderer, ArrayLayoutRenderer), restrict is used in various string and number renderers, see MaterialAnyOfStringOrEnumControl, MuiInputNumberFormat, MuiInputText, NumberFormatCell, TextCell.

I cannot find documentation on how to set this option when using json-forms in vue. If you could point me in this direction, it would be helpful!

You can set it in each Ui Schema options, e.g.

{
  type: 'Control',
  scope: '#/properties/name',
  options: {
    restrict: true
  }
}

Or globally via the config

<json-forms config="config"/>

setup(){
  return ({
    config: { restrict: true}
  });
}

[Droxx]

@sdirix Thanks for the comments about the appliedOptions.restrict. I have added this to the control.

I have also addressed your latest points

[sdirix]

Thanks for the contribution ❤️