diff --git a/packages/core/src/generators/schema.ts b/packages/core/src/generators/schema.ts index f3b1d2324b..2de7ef0a3c 100644 --- a/packages/core/src/generators/schema.ts +++ b/packages/core/src/generators/schema.ts @@ -177,5 +177,5 @@ export const generateJsonSchema = ( const gen = new Gen(findOption); - return gen.schemaObject(instance); + return gen.property(instance); }; diff --git a/packages/vue-vuetify/dev/views/ExampleView.vue b/packages/vue-vuetify/dev/views/ExampleView.vue index e4274ab3d1..ff18efe564 100644 --- a/packages/vue-vuetify/dev/views/ExampleView.vue +++ b/packages/vue-vuetify/dev/views/ExampleView.vue @@ -91,7 +91,6 @@ const onChange = (event: JsonFormsChangeEvent): void => { monaco.Uri.parse(toDataUri(props.example.name)), event.data !== undefined ? JSON.stringify(event.data, null, 2) : '', ); - state.data = event.data; } errors.value = event.errors; }; diff --git a/packages/vue/src/components/JsonForms.vue b/packages/vue/src/components/JsonForms.vue index d21863e574..cb0781bb8f 100644 --- a/packages/vue/src/components/JsonForms.vue +++ b/packages/vue/src/components/JsonForms.vue @@ -26,6 +26,7 @@ import { defaultMiddleware, Middleware, JsonFormsSubStates, + Layout, } from '@jsonforms/core'; import { JsonFormsChangeEvent, MaybeReadonly } from '../types'; import DispatchRenderer from './DispatchRenderer.vue'; @@ -33,14 +34,16 @@ import DispatchRenderer from './DispatchRenderer.vue'; import type Ajv from 'ajv'; import type { ErrorObject } from 'ajv'; -// TODO fix @typescript-eslint/ban-types -// eslint-disable-next-line @typescript-eslint/ban-types -const isObject = (elem: any): elem is Object => { - return elem && typeof elem === 'object'; -}; - const EMPTY: ErrorObject[] = reactive([]); +const createDefaultLayout = (): Layout => ({ + type: 'VerticalLayout', + elements: [], +}); +const generateUISchema = (schema: JsonSchema) => + Generate.uiSchema(schema, undefined, undefined, schema) ?? + createDefaultLayout(); + export default defineComponent({ name: 'JsonForms', components: { @@ -123,13 +126,10 @@ export default defineComponent({ }, emits: ['change'], data() { - const dataToUse = this.data; - const generatorData = isObject(dataToUse) ? dataToUse : {}; + const dataToUse = this.data === undefined ? {} : this.data; const schemaToUse: JsonSchema = - this.schema ?? Generate.jsonSchema(generatorData); - const uischemaToUse = - this.uischema ?? - Generate.uiSchema(schemaToUse, undefined, undefined, schemaToUse); + this.schema ?? Generate.jsonSchema(dataToUse); + const uischemaToUse = this.uischema ?? generateUISchema(schemaToUse); const initCore = (): JsonFormsCore => { const initialCore = { data: dataToUse, @@ -189,29 +189,23 @@ export default defineComponent({ }, watch: { schema(newSchema) { - const generatorData = isObject(this.data) ? this.data : {}; - this.schemaToUse = newSchema ?? Generate.jsonSchema(generatorData); + this.schemaToUse = newSchema ?? Generate.jsonSchema(this.dataToUse); if (!this.uischema) { - this.uischemaToUse = Generate.uiSchema( - this.schemaToUse, - undefined, - undefined, - this.schemaToUse - ); + this.uischemaToUse = generateUISchema(this.schemaToUse); } }, uischema(newUischema) { - this.uischemaToUse = - newUischema ?? - Generate.uiSchema( - this.schemaToUse, - undefined, - undefined, - this.schemaToUse - ); + this.uischemaToUse = newUischema ?? generateUISchema(this.schemaToUse); }, data(newData) { - this.dataToUse = newData; + this.dataToUse = newData === undefined ? {} : newData; + + if (!this.schema) { + this.schemaToUse = Generate.jsonSchema(this.dataToUse); + if (!this.uischema) { + this.uischemaToUse = generateUISchema(this.schemaToUse); + } + } }, renderers(newRenderers) { this.jsonforms.renderers = newRenderers; @@ -251,6 +245,9 @@ export default defineComponent({ ); }, eventToEmit(newEvent) { + // update the data so if we change the additionalErrors this won't reset the form data + this.dataToUse = newEvent.data; + this.$emit('change', newEvent); }, i18n: {