fix(vue-vanilla): preserve options' data types in enum controls

fixes #2450

Adapts the vue-vanilla enum controls to set values from the provided
enum options instead of the stringified value of the HTML select element.

Native HTML <select> elements inherently serialize all bound data into strings.
The previous implementation relied on reading the DOM's target.value,
which destroyed the original type information. Using the DOM's selectedIndex
as a pointer to fetch the original value from the JSONForms state array bypasses
this serialization completely. This provides a robust, universally type-safe solution
for all schema types (numbers, booleans, etc.) without relying on brittle manual
type-casting logic.

Author: darius-lesch

packages/vue-vanilla/src/controls/EnumControlRenderer.vue

@@ -52,8 +52,11 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
+    const input = useJsonFormsEnumControl(props);
+    return useVanillaControl(input, (target) =>
+      target.selectedIndex === 0
+        ? undefined
+        : input.control.value.options[target.selectedIndex - 1].value
     );
   },
 });

packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue

@@ -52,8 +52,11 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsOneOfEnumControl(props), (target) =>
-      target.selectedIndex === 0 ? undefined : target.value
+    const input = useJsonFormsOneOfEnumControl(props);
+    return useVanillaControl(input, (target) =>
+      target.selectedIndex === 0
+        ? undefined
+        : input.control.value.options[target.selectedIndex - 1].value
     );
   },
 });

packages/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts

@@ -28,4 +28,27 @@ describe('EnumControlRenderer.vue', () => {
     await select.setValue('b');
     expect(wrapper.vm.data).to.equal('b');
   });
+
+  it('emits undefined when empty option is selected', async () => {
+    const wrapper = mountJsonForms('a', schema, uischema);
+    const select = wrapper.find('select');
+    await select.setValue('');
+    expect(wrapper.vm.data).to.be.undefined;
+  });
+});
+
+const numberSchema = {
+  type: 'integer',
+  title: 'My Integer Enum',
+  enum: [1, 2],
+};
+
+describe('EnumControlRenderer.vue (integer)', () => {
+  it('emits a data change with number type', async () => {
+    const wrapper = mountJsonForms(1, numberSchema, uischema);
+    const select = wrapper.find('select');
+    await select.setValue('2');
+    expect(wrapper.vm.data).to.be.a('number');
+    expect(wrapper.vm.data).to.equal(2);
+  });
 });

packages/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts

@@ -31,4 +31,30 @@ describe('EnumOneOfControlRenderer.vue', () => {
     await select.setValue('b');
     expect(wrapper.vm.data).to.equal('b');
   });
+
+  it('emits undefined when empty option is selected', async () => {
+    const wrapper = mountJsonForms('a', schema, uischema);
+    const select = wrapper.find('select');
+    await select.setValue('');
+    expect(wrapper.vm.data).to.be.undefined;
+  });
+});
+
+const numberSchema = {
+  type: 'integer',
+  title: 'My Integer OneOf Enum',
+  oneOf: [
+    { const: 1, title: 'One' },
+    { const: 2, title: 'Two' },
+  ],
+};
+
+describe('EnumOneOfControlRenderer.vue (integer)', () => {
+  it('emits a data change with number type', async () => {
+    const wrapper = mountJsonForms(1, numberSchema, uischema);
+    const select = wrapper.find('select');
+    await select.setValue('2');
+    expect(wrapper.vm.data).to.be.a('number');
+    expect(wrapper.vm.data).to.equal(2);
+  });
 });