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

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');