+
+ toggle(checkElement.value, event.target.checked)"
+ />
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/vue-vanilla/src/complex/index.ts b/packages/vue-vanilla/src/complex/index.ts
index f03ad574a..418e816cb 100644
--- a/packages/vue-vanilla/src/complex/index.ts
+++ b/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,
+];
diff --git a/packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts b/packages/vue-vanilla/tests/unit/complex/EnumArrayRenderer.spec.ts
new file mode 100644
index 000000000..e78976d42
--- /dev/null
+++ b/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'],
+ });
+ });
+});