diff --git a/packages/vue-vuetify/dev/views/ExampleView.vue b/packages/vue-vuetify/dev/views/ExampleView.vue index e4274ab3d1..d995454f5d 100644 --- a/packages/vue-vuetify/dev/views/ExampleView.vue +++ b/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); } } diff --git a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue index ef5a349e40..eb45c8400d 100644 --- a/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue +++ b/packages/vue-vuetify/src/controls/AnyOfStringOrEnumControlRenderer.vue @@ -63,8 +63,9 @@ const controlRenderer = defineComponent({ }, setup(props: RendererProps) { const clearValue = determineClearValue(''); - return useVuetifyControl(useJsonFormsControl(props), (value) => - value === null ? clearValue : value, + return useVuetifyControl( + useJsonFormsControl(props), + (value) => value || clearValue, ); }, computed: { diff --git a/packages/vue-vuetify/src/controls/DateControlRenderer.vue b/packages/vue-vuetify/src/controls/DateControlRenderer.vue index 0090aa2f8c..af5613b87d 100644 --- a/packages/vue-vuetify/src/controls/DateControlRenderer.vue +++ b/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( diff --git a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue b/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue index fd6e01c113..8cf5be9a88 100644 --- a/packages/vue-vuetify/src/controls/DateTimeControlRenderer.vue +++ b/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; diff --git a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue index 709e9b4feb..d40c3abf24 100644 --- a/packages/vue-vuetify/src/controls/EnumControlRenderer.vue +++ b/packages/vue-vuetify/src/controls/EnumControlRenderer.vue @@ -22,6 +22,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-select')" @update:model-value="onChange" @focus="handleFocus" @@ -57,8 +58,8 @@ const controlRenderer = defineComponent({ }, setup(props: RendererProps) { const clearValue = determineClearValue(''); - return useVuetifyControl(useJsonFormsEnumControl(props), (value) => - value === null ? clearValue : value, + return useVuetifyControl(useJsonFormsEnumControl(props), (item) => + item === null ? clearValue : item.value, ); }, }); diff --git a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue b/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue index 4a01d84e78..3616cb59dc 100644 --- a/packages/vue-vuetify/src/controls/MultiStringControlRenderer.vue +++ b/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, ); }, diff --git a/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue index c5c48035b6..f136436060 100644 --- a/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue +++ b/packages/vue-vuetify/src/controls/OneOfEnumControlRenderer.vue @@ -22,6 +22,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-select')" @update:model-value="onChange" @focus="handleFocus" @@ -39,7 +40,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 +57,10 @@ const controlRenderer = defineComponent({ ...rendererProps(), }, setup(props: RendererProps) { - return useVuetifyControl(useJsonFormsOneOfEnumControl(props), (value) => - value !== null ? value : undefined, + const clearValue = determineClearValue(''); + + return useVuetifyControl(useJsonFormsOneOfEnumControl(props), (item) => + item === null ? clearValue : item.value, ); }, }); diff --git a/packages/vue-vuetify/src/controls/StringControlRenderer.vue b/packages/vue-vuetify/src/controls/StringControlRenderer.vue index 0a3f94a83a..d2b692fd00 100644 --- a/packages/vue-vuetify/src/controls/StringControlRenderer.vue +++ b/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, ); }, diff --git a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue index 7cd870fac5..90317f6f88 100644 --- a/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue +++ b/packages/vue-vuetify/src/controls/StringMaskControlRenderer.vue @@ -77,7 +77,7 @@ const controlRenderer = defineComponent({ }, setup(props: RendererProps) { 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): MaskTokens => { diff --git a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue b/packages/vue-vuetify/src/controls/TimeControlRenderer.vue index 3cfc4181e0..9dc55993c3 100644 --- a/packages/vue-vuetify/src/controls/TimeControlRenderer.vue +++ b/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(); diff --git a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue index 9608262d73..5ebdff9eaf 100644 --- a/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue +++ b/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.vue @@ -23,6 +23,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-select')" @update:model-value="onChange" @focus="handleFocus" @@ -46,6 +47,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-autocomplete')" @update:model-value="onChange" @focus="handleFocus" @@ -84,7 +86,7 @@ const controlRenderer = defineComponent({ const clearValue = determineClearValue(''); return useVuetifyControl( useJsonFormsEnumControl(props), - (value) => (value === null ? clearValue : value), + (item) => (item === null ? clearValue : item.value), 300, ); }, diff --git a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue index 03e9ed970a..2605814888 100644 --- a/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue +++ b/packages/vue-vuetify/src/extended/AutocompleteOneOfEnumControlRenderer.vue @@ -23,6 +23,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-select')" @update:model-value="onChange" @focus="handleFocus" @@ -46,6 +47,7 @@ :items="control.options" item-title="label" item-value="value" + :return-object="true" v-bind="vuetifyProps('v-autocomplete')" @update:model-value="onChange" @focus="handleFocus" @@ -84,7 +86,7 @@ const controlRenderer = defineComponent({ const clearValue = determineClearValue(''); return useVuetifyControl( useJsonFormsOneOfEnumControl(props), - (value) => (value === null ? clearValue : value), + (item) => (item === null ? clearValue : item.value), 300, ); }, diff --git a/packages/vue-vuetify/src/util/composition.ts b/packages/vue-vuetify/src/util/composition.ts index cd3b095bc9..876c8bf315 100644 --- a/packages/vue-vuetify/src/util/composition.ts +++ b/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( - IsDynamicPropertyContext, - jsonforms.core?.schema.type !== 'object', - ); + const useDefaultValue = inject(IsDynamicPropertyContext, false); // undefined will clear the property from the object return useDefaultValue ? defaultValue : undefined;