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

packages/core/src/mappers/renderer.ts

@@ -992,11 +992,13 @@ export const mapDispatchToArrayControlProps = (
 export interface DispatchPropsOfMultiEnumControl {
   addItem: (path: string, value: any) => void;
   removeItem?: (path: string, toDelete: any) => void;
+  handleChange?: (path: string, value: any) => void;
 }
 
 export const mapDispatchToMultiEnumProps = (
   dispatch: Dispatch<CoreActions>
 ): DispatchPropsOfMultiEnumControl => ({
+  ...mapDispatchToControlProps(dispatch),
   addItem: (path: string, value: any) => {
     dispatch(
       update(path, (data) => {

packages/core/test/mappers/renderer.test.ts

@@ -1551,6 +1551,43 @@ test('mapDispatchToMultiEnumProps - oneOf schema - removeItem', (t) => {
   t.is(getCore().data.colors.length, 0);
 });
 
+test('mapDispatchToMultiEnumProps - handleChange', (t) => {
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/colors',
+  };
+  const schema = {
+    type: 'object',
+    properties: {
+      colors: {
+        type: 'array',
+        items: {
+          type: 'string',
+          enum: ['red', 'green', 'pink'],
+        },
+        uniqueItems: true,
+      },
+    },
+  };
+  const data = { colors: ['green'] };
+  const initCore: JsonFormsCore = {
+    uischema,
+    schema,
+    data,
+    errors: [] as ErrorObject[],
+  };
+  const [getCore, dispatch] = mockDispatch(initCore);
+  dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
+  const props = mapDispatchToMultiEnumProps(dispatch);
+
+  if (props.handleChange) {
+    props.handleChange('colors', ['green', 'red']);
+  }
+
+  t.is(getCore().data.colors.length, 2);
+  t.deepEqual(getCore().data.colors, ['green', 'red']);
+});
+
 test('should assign defaults to enum', (t) => {
   const schema: JsonSchema = {
     type: 'object',

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

@@ -46,6 +46,15 @@ export const schema = {
         enum: ['foo', 'bar', 'foobar'],
       },
     },
+    multiSelect: {
+      type: 'array',
+      title: 'Select Fruits',
+      uniqueItems: true,
+      items: {
+        type: 'string',
+        enum: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
+      },
+    },
   },
 };
 
@@ -60,10 +69,21 @@ export const uischema = {
       type: 'Control',
       scope: '#/properties/multiEnum',
     },
+    {
+      type: 'Control',
+      scope: '#/properties/multiSelect',
+      options: {
+        format: 'multiselect',
+      },
+    },
   ],
 };
 
-export const data = { oneOfMultiEnum: ['foo'], multiEnum: ['bar'] };
+export const data = {
+  oneOfMultiEnum: ['foo'],
+  multiEnum: ['bar'],
+  multiSelect: ['Banana', 'Cherry'],
+};
 
 registerExamples([
   {

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

@@ -1,42 +1,8 @@
-import {
-  and,
-  hasType,
-  rankWith,
-  schemaMatches,
-  schemaSubPathMatches,
-  uiTypeIs,
-  type JsonFormsRendererRegistryEntry,
-  type JsonSchema,
-} from '@jsonforms/core';
+import { rankWith, type JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import controlRenderer from './EnumArrayRenderer.vue';
+import { isMultiEnumControl } from '../util/tester';
 
 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);
-        }),
-      ),
-    ),
-  ),
+  tester: rankWith(5, isMultiEnumControl),
 };
-
-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;

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

@@ -0,0 +1,16 @@
+import {
+  and,
+  optionIs,
+  rankWith,
+  type JsonFormsRendererRegistryEntry,
+} from '@jsonforms/core';
+import controlRenderer from './MultiEnumSelectRenderer.vue';
+import { isMultiEnumControl } from '../util/tester';
+
+export const entry: JsonFormsRendererRegistryEntry = {
+  renderer: controlRenderer,
+  tester: rankWith(
+    10,
+    and(optionIs('format', 'multiselect'), isMultiEnumControl),
+  ),
+};

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

@@ -0,0 +1,78 @@
+<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="control.options"
+      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,
+  useJsonFormsMultiEnumControl,
+  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(useJsonFormsMultiEnumControl(props), (value) =>
+      value === null || value.length === 0 ? clearValue : value,
+    );
+  },
+});
+
+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/src/util/index.ts

@@ -3,3 +3,4 @@ export * from './datejs';
 export * from './inject';
 export * from './options';
 export * from './validator';
+export * from './tester';

packages/vue-vuetify/src/util/tester.ts

@@ -0,0 +1,27 @@
+import {
+  and,
+  hasType,
+  isOneOfEnumSchema,
+  schemaMatches,
+  schemaSubPathMatches,
+  uiTypeIs,
+  type JsonSchema,
+} from '@jsonforms/core';
+
+export const isMultiEnumControl = and(
+  uiTypeIs('Control'),
+  schemaMatches(
+    (schema) =>
+      hasType(schema, 'array') &&
+      !Array.isArray(schema.items) &&
+      schema.uniqueItems === true,
+  ),
+  schemaSubPathMatches('items', (schema) => {
+    return (
+      (isOneOfEnumSchema(schema) &&
+        schema.oneOf !== undefined &&
+        (schema.oneOf as JsonSchema[]).length > 0) ||
+      (schema.type === 'string' && schema.enum !== undefined)
+    );
+  }),
+);