fix(vue): support elementLabelProp in array controls

Author: kchobantonov

packages/vue-vanilla/src/util/composition.ts

@@ -111,6 +111,7 @@ export const useVanillaArrayControl = <I extends { control: any }>(
 
   const childLabelForIndex = (index: number) => {
     const childLabelProp =
+      input.control.value.uischema.options?.elementLabelProp ??
       input.control.value.uischema.options?.childLabelProp ??
       getFirstPrimitiveProp(input.control.value.schema);
     if (!childLabelProp) {

packages/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts

@@ -154,6 +154,24 @@ describe('ArrayListRenderer.vue', () => {
     expect(labelText).to.equal('1');
   });
 
+  it('uses elementLabelProp for the item label', () => {
+    const wrapper = mountJsonForms(
+      [{ name: 'name1', rate: 5 }],
+      schemaWithNameAndRate,
+      {
+        ...uischema,
+        options: {
+          ...uischema.options,
+          elementLabelProp: 'rate',
+          childLabelProp: 'name',
+        },
+      }
+    );
+    const label = wrapper.find('.array-list-item-label');
+
+    expect(label.text()).to.equal('5');
+  });
+
   it('compute default label with NaN', async () => {
     const wrapper = mountJsonForms(
       [{ count: Number(undefined), name: 'name1' }],

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

@@ -387,6 +387,7 @@ export const useVuetifyArrayControl = <
       return '';
     }
     const childLabelProp =
+      input.control.value.uischema.options?.elementLabelProp ??
       input.control.value.uischema.options?.childLabelProp ??
       getFirstPrimitiveProp(input.control.value.schema);
     if (!childLabelProp) {

packages/vue-vuetify/tests/unit/util/composition.spec.ts

@@ -13,6 +13,56 @@ const makeError = (instancePath: string): ErrorObject => ({
 });
 
 describe('useVuetifyArrayControl', () => {
+  it('uses elementLabelProp before the legacy childLabelProp', () => {
+    let captured: ReturnType<typeof useVuetifyArrayControl> | undefined;
+
+    const Child = defineComponent({
+      setup() {
+        const control = computed(() => ({
+          label: '',
+          required: false,
+          config: {},
+          uischema: {
+            type: 'Control',
+            scope: '#',
+            options: {
+              elementLabelProp: 'message2',
+              childLabelProp: 'message1',
+            },
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              message1: { type: 'string' },
+              message2: { type: 'string' },
+            },
+          },
+          data: [{ message1: 'Message one', message2: 'Message two' }],
+          childErrors: [],
+          i18nKeyPrefix: '',
+        }));
+        captured = useVuetifyArrayControl({ control });
+        return () => h('div');
+      },
+    });
+
+    const Host = defineComponent({
+      setup() {
+        provide('jsonforms', {
+          core: { data: {}, schema: {}, uischema: { type: 'Control' } },
+          i18n: {
+            translate: (_id: string, defaultMessage?: string) => defaultMessage,
+          },
+        });
+        return () => h(Child);
+      },
+    });
+
+    mount(Host);
+
+    expect(captured!.childLabelForIndex(0)).toBe('Message two');
+  });
+
   it('exposes a reactive rawChildErrors that reflects child error changes', async () => {
     const childErrors = ref<ErrorObject[]>([]);