feat: support maxItems & minItems in Vue array renderer

Disable add and remove buttons in Vue array renderer according to 'maxItems' and
'minItems' when the 'restrict' UI Schema option is set.

Also all array buttons are now disabled if the overall control is disabled.

Author: Droxx

packages/examples/src/examples/arrays-with-detail.ts

@@ -32,6 +32,8 @@ export const schema = {
     occupation: { type: 'string' },
     comments: {
       type: 'array',
+      minItems: 2,
+      maxItems: 8,
       items: {
         type: 'object',
         properties: {
@@ -58,6 +60,7 @@ export const uischema = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
         detail: {
           type: 'VerticalLayout',
           elements: [

packages/examples/src/examples/arrays-with-sorting.ts

@@ -30,6 +30,8 @@ export const schema = {
   properties: {
     comments: {
       type: 'array',
+      minItems: 2,
+      maxItems: 8,
       items: {
         type: 'object',
         properties: {
@@ -64,6 +66,7 @@ export const uischema = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
       },
     },
   ],
@@ -81,6 +84,7 @@ export const uischemaWithSorting = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
+        restrict: true,
       },
     },
   ],

packages/vue/vue-vanilla/src/array/ArrayListElement.vue

@@ -19,6 +19,7 @@
         ↓
       </button>
       <button
+        :disabled="!deleteEnabled"
         :class="styles.arrayList.itemDelete"
         type="button"
         @click="deleteClicked"
@@ -69,6 +70,11 @@ const listItem = defineComponent({
       type: Function,
       default: undefined,
     },
+    deleteEnabled: {
+      required: false,
+      type: Boolean,
+      default: true,
+    },
     delete: {
       required: false,
       type: Function,

packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue

@@ -4,6 +4,9 @@
       <button
         :class="styles.arrayList.addButton"
         type="button"
+        :disabled="
+          !control.enabled || (appliedOptions.restrict && maxItemsReached)
+        "
         @click="addButtonClick"
       >
         +
@@ -19,9 +22,10 @@
     >
       <array-list-element
         :move-up="moveUp(control.path, index)"
-        :move-up-enabled="index > 0"
+        :move-up-enabled="control.enabled && index > 0"
         :move-down="moveDown(control.path, index)"
-        :move-down-enabled="index < control.data.length - 1"
+        :move-down-enabled="control.enabled && index < control.data.length - 1"
+        :delete-enabled="control.enabled && !minItemsReached"
         :delete="removeItems(control.path, [index])"
         :label="childLabelForIndex(index)"
         :styles="styles"
@@ -50,6 +54,8 @@ import {
   rankWith,
   ControlElement,
   schemaTypeIs,
+  Resolve,
+  JsonSchema,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
@@ -77,6 +83,29 @@ const controlRenderer = defineComponent({
     noData(): boolean {
       return !this.control.data || this.control.data.length === 0;
     },
+    arraySchema(): JsonSchema | undefined {
+      return Resolve.schema(
+        this.schema,
+        this.control.uischema.scope,
+        this.control.rootSchema
+      );
+    },
+    maxItemsReached(): boolean | undefined {
+      return (
+        this.arraySchema !== undefined &&
+        this.arraySchema.maxItems !== undefined &&
+        this.control.data !== undefined &&
+        this.control.data.length >= this.arraySchema.maxItems
+      );
+    },
+    minItemsReached(): boolean | undefined {
+      return (
+        this.arraySchema !== undefined &&
+        this.arraySchema.minItems !== undefined &&
+        this.control.data !== undefined &&
+        this.control.data.length <= this.arraySchema.minItems
+      );
+    },
   },
   methods: {
     composePaths,

packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts

@@ -4,13 +4,18 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'array',
   title: 'My Array',
+  maxItems: 3,
+  minItems: 1,
   items: {
     type: 'string',
   },
 };
 const uischema = {
   type: 'Control',
   scope: '#',
+  options: {
+    restrict: true,
+  },
 };
 
 describe('ArrayListRenderer.vue', () => {
@@ -37,13 +42,30 @@ describe('ArrayListRenderer.vue', () => {
     expect(wrapper.vm.data).to.deep.equal(['a', 'b', '']);
   });
 
+  it('add button disabled if maxItems is reached', async () => {
+    const wrapper = mountJsonForms(['a', 'b'], schema, uischema);
+    const addButton = wrapper.find('.array-list-add');
+    expect(addButton.attributes().disabled).to.not.exist;
+    await addButton.trigger('click');
+    expect(addButton.attributes().disabled).to.exist;
+  });
+
   it('remove element from array', async () => {
     const wrapper = mountJsonForms(['a', 'b', 'c'], schema, uischema);
     const deleteButtons = wrapper.findAll('.array-list-item-delete');
     await deleteButtons[1].trigger('click');
     expect(wrapper.vm.data).to.deep.equal(['a', 'c']);
   });
 
+  it('remove button disabled if minItems is reached', async () => {
+    const wrapper = mountJsonForms(['a', 'b'], schema, uischema);
+    const deleteButtons = wrapper.findAll('.array-list-item-delete');
+    expect(deleteButtons[0].attributes().disabled).to.not.exist;
+    expect(deleteButtons[1].attributes().disabled).to.not.exist;
+    await deleteButtons[0].trigger('click');
+    expect(deleteButtons[0].attributes().disabled).to.exist;
+  });
+
   it('move element up', async () => {
     const wrapper = mountJsonForms(['a', 'b', 'c'], schema, uischema);
     const moveUpButtons = wrapper.findAll('.array-list-item-move-up');