feat(vue-vuetify): add MultiEnumSelectRenderer for multi-select dropdowns

packages/examples/src/examples/multi-select.ts

@@ -0,0 +1,43 @@
+import { registerExamples } from '../register';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    fruits: {
+      type: 'array',
+      title: 'Select Fruits (Dropdown)',
+      uniqueItems: true,
+      items: {
+        type: 'string',
+        enum: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
+      },
+    },
+  },
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/fruits',
+      options: {
+        format: 'multiselect',
+      },
+    },
+  ],
+};
+
+export const data = {
+  fruits: ['Banana', 'Cherry'],
+};
+
+registerExamples([
+  {
+    name: 'multi-select',
+    label: 'multi-select',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/index.ts

@@ -48,6 +48,7 @@ import * as defaultExample from './examples/default';
 import * as enumExample from './examples/enum';
 import * as multiEnum from './examples/enum-multi';
 import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
+import * as multiSelect from './examples/multi-select';
 import * as enumI18n from './examples/enumI18n';
 import * as enumInArray from './examples/enumInArray';
 import * as generateSchema from './examples/generate';
@@ -131,6 +132,7 @@ export {
   mixedObject,
   multiEnum,
   multiEnumWithLabelAndDesc,
+  multiSelect,
   nestedArray,
   nestedCategorization,
   numbers,

packages/vue-vuetify/src/complex/MultiEnumSelectRenderer.entry.ts

@@ -0,0 +1,44 @@
+import {
+  and,
+  hasType,
+  optionIs,
+  rankWith,
+  schemaMatches,
+  schemaSubPathMatches,
+  uiTypeIs,
+  type JsonFormsRendererRegistryEntry,
+  type JsonSchema,
+} from '@jsonforms/core';
+import controlRenderer from './MultiEnumSelectRenderer.vue';
+
+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(
+    10,
+    and(
+      uiTypeIs('Control'),
+      optionIs('format', 'multiselect'),
+      and(
+        schemaMatches(
+          (schema) =>
+            hasType(schema, 'array') &&
+            !Array.isArray(schema.items) &&
+            schema.uniqueItems === true,
+        ),
+        schemaSubPathMatches('items', (schema) => {
+          return hasOneOfItems(schema) || hasEnumItems(schema);
+        }),
+      ),
+    ),
+  ),
+};

packages/vue-vuetify/src/complex/MultiEnumSelectRenderer.vue

@@ -0,0 +1,96 @@
+<template>
+  <control-wrapper
+    v-bind="controlWrapper"
+    :styles="styles"
+    :isFocused="isFocused"
+    :appliedOptions="appliedOptions"
+  >
+    <v-select
+      v-disabled-icon-focus
+      :id="control.id + '-input'"
+      :class="styles.control.input"
+      :disabled="!control.enabled"
+      :readonly="control.readonly"
+      :autofocus="appliedOptions.focus"
+      :placeholder="appliedOptions.placeholder"
+      :label="computedLabel"
+      :hint="control.description"
+      :persistent-hint="persistentHint()"
+      :required="control.required"
+      :error-messages="control.errors"
+      :clearable="clearable"
+      :model-value="control.data"
+      :items="selectOptions"
+      item-title="label"
+      item-value="value"
+      multiple
+      chips
+      closable-chips
+      v-bind="vuetifyProps('v-select')"
+      @update:model-value="onChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    >
+      <template v-slot:prepend v-if="$slots.prepend">
+        <slot name="prepend" />
+      </template>
+      <template v-slot:append v-if="$slots.append">
+        <slot name="append" />
+      </template>
+    </v-select>
+  </control-wrapper>
+</template>
+
+<script lang="ts">
+import { type ControlElement } from '@jsonforms/core';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  type RendererProps,
+} from '@jsonforms/vue';
+import { defineComponent } from 'vue';
+import { VSelect } from 'vuetify/components';
+import { determineClearValue, useVuetifyControl } from '../util';
+import { default as ControlWrapper } from '../controls/ControlWrapper.vue';
+import { DisabledIconFocus } from '../controls/directives';
+
+const controlRenderer = defineComponent({
+  name: 'multi-enum-select-renderer',
+  components: {
+    ControlWrapper,
+    VSelect,
+  },
+  directives: {
+    DisabledIconFocus,
+  },
+  props: {
+    ...rendererProps<ControlElement>(),
+  },
+  setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue([]);
+    return useVuetifyControl(useJsonFormsControl(props), (value) =>
+      value === null ? clearValue : value || [],
+    );
+  },
+  computed: {
+    selectOptions() {
+      const itemsSchema = this.control.schema.items as any;
+      if (itemsSchema.oneOf) {
+        return itemsSchema.oneOf.map((item: any) => ({
+          label: item.title || item.const,
+          value: item.const,
+        }));
+      }
+      if (itemsSchema.enum) {
+        return itemsSchema.enum.map((val: any) => ({
+          label: val,
+          value: val,
+        }));
+      }
+      return [];
+    }
+  }
+});
+
+export default controlRenderer;
+</script>

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

@@ -2,6 +2,7 @@ export { default as AllOfRenderer } from './AllOfRenderer.vue';
 export { default as AnyOfRenderer } from './AnyOfRenderer.vue';
 export { default as ArrayControlRenderer } from './ArrayControlRenderer.vue';
 export { default as EnumArrayRenderer } from './EnumArrayRenderer.vue';
+export { default as MultiEnumSelectRenderer } from './MultiEnumSelectRenderer.vue';
 export { default as ObjectRenderer } from './ObjectRenderer.vue';
 export { default as OneOfRenderer } from './OneOfRenderer.vue';
 export { default as OneOfTabRenderer } from './OneOfTabRenderer.vue';
@@ -11,6 +12,7 @@ import { entry as allOfRendererEntry } from './AllOfRenderer.entry';
 import { entry as anyOfRendererEntry } from './AnyOfRenderer.entry';
 import { entry as arrayControlRendererEntry } from './ArrayControlRenderer.entry';
 import { entry as enumArrayRendererEntry } from './EnumArrayRenderer.entry';
+import { entry as multiEnumSelectRendererEntry } from './MultiEnumSelectRenderer.entry';
 import { entry as objectRendererEntry } from './ObjectRenderer.entry';
 import { entry as oneOfRendererEntry } from './OneOfRenderer.entry';
 import { entry as oneOfTabRendererEntry } from './OneOfTabRenderer.entry';
@@ -21,6 +23,7 @@ export const complexRenderers = [
   anyOfRendererEntry,
   arrayControlRendererEntry,
   enumArrayRendererEntry,
+  multiEnumSelectRendererEntry,
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,
@@ -32,6 +35,7 @@ export {
   anyOfRendererEntry,
   arrayControlRendererEntry,
   enumArrayRendererEntry,
+  multiEnumSelectRendererEntry,
   objectRendererEntry,
   oneOfRendererEntry,
   oneOfTabRendererEntry,

packages/vue-vuetify/tests/unit/complex/MultiEnumSelectRenderer.spec.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { clearAllIds } from '@jsonforms/core';
+import MultiEnumSelectRenderer from '../../../src/complex/MultiEnumSelectRenderer.vue';
+import { entry as multiEnumSelectRendererEntry } from '../../../src/complex/MultiEnumSelectRenderer.entry';
+import { mountJsonForms } from '../util';
+
+describe('MultiEnumSelectRenderer.vue', () => {
+  const renderers = [multiEnumSelectRendererEntry];
+
+  describe('with enum schema', () => {
+    const schema = {
+      type: 'array',
+      title: 'My Multi Select',
+      uniqueItems: true,
+      items: {
+        type: 'string',
+        enum: ['a', 'b', 'c'],
+      },
+    };
+    const uischema = {
+      type: 'Control',
+      scope: '#',
+      options: {
+        format: 'multiselect',
+      },
+    };
+
+    let wrapper: ReturnType<typeof mountJsonForms>;
+
+    beforeEach(() => {
+      clearAllIds();
+      wrapper = mountJsonForms(['a'], schema, renderers, uischema);
+    });
+
+    it('check if child MultiEnumSelectRenderer exists', () => {
+      expect(wrapper.getComponent(MultiEnumSelectRenderer)).toBeTruthy();
+    });
+
+    it('renders a select input', () => {
+      expect(wrapper.find('input[type="text"]').exists()).toBe(true);
+    });
+
+    it('renders title as label', () => {
+      expect(wrapper.find('label').text()).toEqual('My Multi Select');
+    });
+
+    it('emits change when an item is selected', async () => {
+      const select = wrapper.findComponent({ name: 'VSelect' });
+      await select.vm.$emit('update:modelValue', ['a', 'b']);
+
+      const component = wrapper.getComponent(MultiEnumSelectRenderer);
+      expect(component.vm.control.data).toEqual(['a', 'b']);
+    });
+
+    it('emits change when an item is deselected', async () => {
+      const select = wrapper.findComponent({ name: 'VSelect' });
+      await select.vm.$emit('update:modelValue', []);
+
+      const component = wrapper.getComponent(MultiEnumSelectRenderer);
+      expect(component.vm.control.data).toEqual([]);
+    });
+
+    it('emits change when cleared', async () => {
+      const select = wrapper.findComponent({ name: 'VSelect' });
+      await select.vm.$emit('update:modelValue', null);
+
+      const component = wrapper.getComponent(MultiEnumSelectRenderer);
+      // Because `determineClearValue([])` is used by jsonforms natively
+      // clearing sets the value to undefined to remove it from the data object cleanly
+      expect(component.vm.control.data).toEqual(undefined);
+    });
+
+    it('should render component and match snapshot', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  describe('with oneOf schema', () => {
+    const schema = {
+      type: 'array',
+      title: 'My OneOf Multi Select',
+      uniqueItems: true,
+      items: {
+        oneOf: [
+          { const: 'a', title: 'Option A' },
+          { const: 'b', title: 'Option B' },
+          { const: 'c', title: 'Option C' },
+        ],
+      },
+    };
+    const uischema = {
+      type: 'Control',
+      scope: '#',
+      options: {
+        format: 'multiselect',
+      },
+    };
+
+    let wrapper: ReturnType<typeof mountJsonForms>;
+
+    beforeEach(() => {
+      clearAllIds();
+      wrapper = mountJsonForms(['b'], schema, renderers, uischema);
+    });
+
+    it('check if child MultiEnumSelectRenderer exists', () => {
+      expect(wrapper.getComponent(MultiEnumSelectRenderer)).toBeTruthy();
+    });
+
+    it('should render component and match snapshot', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+});