vue-vuetify: fix how we handle empty values outside a dynamic context (#2481)

* fix how we handle empty values when not in dynamic context (e.g. additionalProperties case)

* allow defaulting the schema

* update the determineClearValue

* remove unnecessary type

* revert to the original expression

* use the same default time format as react

Author: kchobantonov

packages/vue-vuetify/dev/views/ExampleView.vue

@@ -114,7 +114,8 @@ const reloadMonacoSchema = () => {
 const saveMonacoSchema = () => {
   saveMonacoModel(
     schemaModel,
-    (modelValue) => (state.schema = JSON.parse(modelValue)),
+    (modelValue) =>
+      (state.schema = modelValue ? JSON.parse(modelValue) : undefined),
     'New schema applied',
   );
 
@@ -277,6 +278,10 @@ const handleAction = (action: Action) => {
   if (action) {
     const newState = action.apply(state);
     if (newState) {
+      if (newState.renderers) {
+        newState.renderers = markRaw(newState.renderers);
+      }
+
       Object.assign(state, newState);
     }
   }

packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue

@@ -63,8 +63,9 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const clearValue = determineClearValue('');
-    return useVuetifyControl(useJsonFormsControl(props), (value) =>
-      value === null ? clearValue : value,
+    return useVuetifyControl(
+      useJsonFormsControl(props),
+      (value) => value || clearValue,
     );
   },
   computed: {

packages/vue-vuetify/src/controls/DateControlRenderer.vue

@@ -141,7 +141,7 @@ const controlRenderer = defineComponent({
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => (value === null ? clearValue : value);
+    const adaptValue = (value: any) => value || clearValue;
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const dateFormat = computed<string>(

packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue

@@ -227,7 +227,7 @@ import {
   VWindowItem,
 } from 'vuetify/components';
 
-import { vMaska, type MaskOptions, type MaskaDetail } from 'maska';
+import { vMaska, type MaskOptions } from 'maska';
 import { useDisplay, useLocale } from 'vuetify';
 import type { IconValue } from '../icons';
 import {
@@ -289,7 +289,7 @@ const controlRenderer = defineComponent({
     const t = useTranslator();
     const showMenu = ref(false);
     const activeTab = ref<'date' | 'time'>('date');
-    const adaptValue = (value: any) => (value === null ? clearValue : value);
+    const adaptValue = (value: any) => value || clearValue;
 
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
     const { mobile } = useDisplay();
@@ -299,7 +299,7 @@ const controlRenderer = defineComponent({
       typeof control.appliedOptions.value.dateTimeFormat == 'string'
         ? (expandLocaleFormat(control.appliedOptions.value.dateTimeFormat) ??
           control.appliedOptions.value.dateTimeFormat)
-        : (expandLocaleFormat('L LT') ?? 'YYYY-MM-DD H:mm'),
+        : (expandLocaleFormat('L LT') ?? 'YYYY-MM-DD HH:mm'),
     );
 
     const useMask = control.appliedOptions.value.mask !== false;

packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue

@@ -65,7 +65,7 @@ const controlRenderer = defineComponent({
     const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => (value === null ? clearValue : value),
+      (value) => value || clearValue,
       300,
     );
   },

packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue

@@ -39,7 +39,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VSelect } from 'vuetify/components';
-import { useVuetifyControl } from '../util';
+import { determineClearValue, useVuetifyControl } from '../util';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { DisabledIconFocus } from './directives';
 
@@ -56,8 +56,10 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
+    const clearValue = determineClearValue('');
+
     return useVuetifyControl(useJsonFormsOneOfEnumControl(props), (value) =>
-      value !== null ? value : undefined,
+      value === null ? clearValue : value,
     );
   },
 });

packages/vue-vuetify/src/controls/StringControlRenderer.vue

@@ -99,7 +99,7 @@ const controlRenderer = defineComponent({
     const clearValue = determineClearValue('');
     return useVuetifyControl(
       useJsonFormsControl(props),
-      (value) => (value === null ? clearValue : value),
+      (value) => value || clearValue,
       300,
     );
   },

packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue

@@ -77,7 +77,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const clearValue = determineClearValue('');
-    const adaptValue = (value: any) => (value === null ? clearValue : value);
+    const adaptValue = (value: any) => value || clearValue;
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const toTokens = (tokenParams: Record<string, any>): MaskTokens => {

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

@@ -163,7 +163,7 @@ const controlRenderer = defineComponent({
 
     const showMenu = ref(false);
 
-    const adaptValue = (value: any) => (value === null ? clearValue : value);
+    const adaptValue = (value: any) => value || clearValue;
     const control = useVuetifyControl(useJsonFormsControl(props), adaptValue);
 
     const icons = useIcons();

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

@@ -484,12 +484,7 @@ export const useIcons = () => {
 };
 
 export const determineClearValue = (defaultValue: any) => {
-  const jsonforms = useJsonForms();
-
-  const useDefaultValue = inject<boolean>(
-    IsDynamicPropertyContext,
-    jsonforms.core?.schema.type !== 'object',
-  );
+  const useDefaultValue = inject<boolean>(IsDynamicPropertyContext, false);
 
   // undefined will clear the property from the object
   return useDefaultValue ? defaultValue : undefined;