vue-vanilla: Add enum array renderer

Adds an array enum renderer that renders the enum as multiple check boxes.
It supports enum specification via `enum` and `oneOf` in the schema's `items` property.

Author: glengemann

packages/vue-vanilla/src/complex/EnumArrayRenderer.vue

@@ -0,0 +1,95 @@
+<template>
+  <div v-for="(checkElement, index) in control.options" :key="index">
+    <input
+      :id="control.id + `-input-${index}`"
+      type="checkbox"
+      :class="styles.control.input"
+      :value="checkElement.value"
+      :checked="dataHasEnum(checkElement.value)"
+      :disabled="!control.enabled"
+      :placeholder="appliedOptions?.placeholder"
+      @change="(event) => toggle(checkElement.value, event.target.checked)"
+    />
+    <label :for="control.id + `-input-${index}`">
+      {{ checkElement.label }}
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {
+  RendererProps,
+  rendererProps,
+  useJsonFormsMultiEnumControl,
+} from '@jsonforms/vue';
+import {
+  ControlElement,
+  JsonFormsRendererRegistryEntry,
+  rankWith,
+  uiTypeIs,
+  and,
+  schemaMatches,
+  hasType,
+  schemaSubPathMatches,
+  JsonSchema,
+} from '@jsonforms/core';
+import { useVanillaArrayControl } from '../util';
+
+const controlRenderer = defineComponent({
+  name: 'EnumArrayRenderer',
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const control = useJsonFormsMultiEnumControl(props);
+
+    return useVanillaArrayControl(control);
+  },
+  methods: {
+    dataHasEnum(value: any): boolean {
+      return !!this.control.data?.includes(value);
+    },
+    toggle(value: any, checked: boolean): void {
+      if (checked) {
+        this.addItem(this.control.path, value);
+      } else {
+        this.removeItem?.(this.control.path, value);
+      }
+    },
+  },
+});
+
+export default controlRenderer;
+
+const hasOneOfItems = (schema: JsonSchema): boolean =>
+  schema.oneOf !== undefined &&
+  schema.oneOf.length > 0 &&
+  (schema.oneOf as JsonSchema[]).every((entry: JsonSchema) => {
+    return entry.const !== undefined;
+  });
+
+const hasEnumItems = (schema: JsonSchema): boolean =>
+  schema.type === 'string' && schema.enum !== undefined;
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(
+    5,
+    and(
+      uiTypeIs('Control'),
+      and(
+        schemaMatches(
+          (schema) =>
+            hasType(schema, 'array') &&
+            !Array.isArray(schema.items) &&
+            schema.uniqueItems === true
+        ),
+        schemaSubPathMatches('items', (schema) => {
+          return hasOneOfItems(schema) || hasEnumItems(schema);
+        })
+      )
+    )
+  ),
+};
+</script>

packages/vue-vanilla/src/complex/index.ts

@@ -1,7 +1,13 @@
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
+export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
 
 import { entry as objectRendererEntry } from './ObjectRenderer.vue';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.vue';
+import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.vue';
 
-export const complexRenderers = [objectRendererEntry, oneOfRendererEntry];
+export const complexRenderers = [
+  objectRendererEntry,
+  oneOfRendererEntry,
+  enumArrayRendererEntry,
+];

packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts

@@ -0,0 +1,117 @@
+import { expect } from 'chai';
+import { mountJsonForms } from '../util';
+
+const schemaOneOfMultiEnum = {
+  properties: {
+    oneOfMultiEnum: {
+      type: 'array',
+      uniqueItems: true,
+      items: {
+        oneOf: [
+          {
+            const: 'foo',
+            title: 'Foo',
+          },
+          {
+            const: 'bar',
+            title: 'Bar',
+          },
+          {
+            const: 'foobar',
+            title: 'FooBar',
+          },
+        ],
+      },
+    },
+  },
+};
+
+const schemaMultiEnum = {
+  properties: {
+    multiEnum: {
+      type: 'array',
+      uniqueItems: true,
+      items: {
+        type: 'string',
+        enum: ['foo', 'bar', 'foobar'],
+      },
+    },
+  },
+};
+
+const uischema = {
+  type: 'Control',
+  scope: '#',
+};
+
+describe('EnumArrayRenderer.vue oneOfMultiEnum', () => {
+  it('renders checkboxes', () => {
+    const wrapper = mountJsonForms(
+      { oneOfMultiEnum: ['foo', 'bar'] },
+      schemaOneOfMultiEnum,
+      uischema
+    );
+    const checkboxes = wrapper.findAll('input[type="checkbox"]');
+    expect(checkboxes.length).to.equal(3);
+  });
+
+  it('emits a data remove change', async () => {
+    const wrapper = mountJsonForms(
+      { oneOfMultiEnum: ['foo', 'bar'] },
+      schemaOneOfMultiEnum,
+      uischema
+    );
+    const input = wrapper.find('input[value="foo"]');
+    await input.trigger('click');
+    expect(wrapper.vm.data).to.eql({ oneOfMultiEnum: ['bar'] });
+  });
+
+  it('emits a data add change', async () => {
+    const wrapper = mountJsonForms(
+      { oneOfMultiEnum: ['foo', 'bar'] },
+      schemaOneOfMultiEnum,
+      uischema
+    );
+    const input = wrapper.find('input[value="foobar"]');
+    await input.trigger('click');
+    expect(wrapper.vm.data).to.eql({
+      oneOfMultiEnum: ['foo', 'bar', 'foobar'],
+    });
+  });
+});
+
+describe('EnumArrayRenderer.vue multiEnum', () => {
+  it('renders checkboxes', () => {
+    const wrapper = mountJsonForms(
+      { multiEnum: ['foo', 'bar'] },
+      schemaMultiEnum,
+      uischema
+    );
+    const checkboxes = wrapper.findAll('input[type="checkbox"]');
+    expect(checkboxes.length).to.equal(3);
+  });
+
+  it('emits a data remove change', async () => {
+    const wrapper = mountJsonForms(
+      { multiEnum: ['foo', 'bar'] },
+      schemaMultiEnum,
+      uischema
+    );
+    const input = wrapper.find('input[value="foo"]');
+    await input.trigger('click');
+    expect(wrapper.vm.data).to.eql({ multiEnum: ['bar'] });
+  });
+
+  it('emits a data add change', async () => {
+    const wrapper = mountJsonForms(
+      { multiEnum: ['foo', 'bar'] },
+      schemaMultiEnum,
+      uischema
+    );
+    const input = wrapper.find('input[value="foobar"]');
+    await input.trigger('click');
+    expect(wrapper.vm.data).to.eql({
+      multiEnum: ['foo', 'bar', 'foobar'],
+    });
+  });
+});