fix: append seconds in Vue Vanilla time

Appends seconds if necessary in Vue Vanilla time renderer. This makes
sure that we do not produce validation errors.

Also allows to configure the "step" attribute via UI Schema options.

Adds test cases.

Author: sdirix

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

@@ -13,6 +13,7 @@
       :disabled="!control.enabled"
       :autofocus="appliedOptions.focus"
       :placeholder="appliedOptions.placeholder"
+      :step="typeof appliedOptions.step === 'number' ? appliedOptions.step : 0"
       @change="onChange"
       @focus="isFocused = true"
       @blur="isFocused = false"
@@ -45,10 +46,14 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(
-      useJsonFormsControl(props),
-      (target) => target.value || undefined
-    );
+    return useVanillaControl(useJsonFormsControl(props), (target) => {
+      const value = target.value || undefined;
+      // Append '00' seconds if the value is in HH:MM format
+      if (value && /^\d{2}:\d{2}$/.test(value)) {
+        return `${value}:00`;
+      }
+      return value;
+    });
   },
 });
 

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

@@ -29,7 +29,7 @@ describe('TimeControlRenderer.vue', () => {
     const wrapper = mountJsonForms('00:20', schema, uischema);
     const input = wrapper.find('input');
     await input.setValue('01:51');
-    expect(wrapper.vm.data).to.equal('01:51');
+    expect(wrapper.vm.data).to.equal('01:51:00');
   });
 
   it('should have a placeholder', async () => {
@@ -38,4 +38,18 @@ describe('TimeControlRenderer.vue', () => {
     const placeholder = input.attributes('placeholder');
     expect(placeholder).to.equal('time placeholder');
   });
+
+  it('appends seconds when time value has HH:MM format', async () => {
+    const wrapper = mountJsonForms('00:20:00', schema, uischema);
+    const input = wrapper.find('input');
+    await input.setValue('01:30');
+    expect(wrapper.vm.data).to.equal('01:30:00');
+  });
+
+  it('preserves seconds when time value already has HH:MM:SS format', async () => {
+    const wrapper = mountJsonForms('00:20:00', schema, uischema);
+    const input = wrapper.find('input');
+    await input.setValue('01:30:45');
+    expect(wrapper.vm.data).to.equal('01:30:45');
+  });
 });