update how schemas are generated based on the data

kchobantonov · kchobantonov · commit 1a5ab616fc8c · 2025-08-24T00:43:48.000-04:00
diff --git a/packages/example/src/plugins/vuetify.ts b/packages/example/src/plugins/vuetify.ts
@@ -132,38 +132,32 @@ function toBlueprint(value: string): Blueprint {
   return md1;
 }
 
-function createVuetifyInstance(
-  dark: boolean,
-  blueprint: string,
-  variant: string,
-  iconset: string,
-  locale: string,
-) {
-  const defaults = variant
+function createVuetifyInstance(appStore: ReturnType<typeof useAppStore>) {
+  const defaults = appStore.variant
     ? {
         VField: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VTextField: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VCombobox: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VSelect: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VAutocomplete: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VTextarea: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VNumberInput: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VDateInput: {
-          variant: variant,
+          variant: appStore.variant,
         },
         VCheckbox: { color: 'primary' },
       }
@@ -174,23 +168,23 @@ function createVuetifyInstance(
   return createVuetify({
     components,
     directives,
-    blueprint: toBlueprint(blueprint),
+    blueprint: toBlueprint(appStore.blueprint),
     locale: {
-      locale: locale,
+      locale: appStore.jsonforms.locale,
       fallback: 'en',
       messages: { en, bg, de },
     },
     icons: {
-      defaultSet: iconset, // Set the default icon set
+      defaultSet: appStore.iconset, // Set the default icon set
       sets: {
         mdi,
         fa,
       },
-      aliases: toIconSetAliases(iconset),
+      aliases: toIconSetAliases(appStore.iconset),
     },
     theme: {
-      defaultTheme: dark ? 'dark' : 'light',
-      themes: getCustomThemes(blueprint).reduce(
+      defaultTheme: appStore.dark ? 'dark' : 'light',
+      themes: getCustomThemes(appStore.blueprint).reduce(
         (acc: Record<string, ThemeDefinition>, current) => {
           acc[current.name] = current;
           return acc;
@@ -204,13 +198,7 @@ function createVuetifyInstance(
 
 export function buildVuetify() {
   const appStore = useAppStore();
-  const vuetify = createVuetifyInstance(
-    appStore.dark,
-    appStore.blueprint,
-    appStore.variant,
-    appStore.iconset,
-    appStore.jsonforms.locale,
-  );
+  const vuetify = createVuetifyInstance(appStore);
 
   watch(
     () => appStore.jsonforms.locale,
diff --git a/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue b/packages/jsonforms-vuetify-renderers/src/components/ResolvedJsonForms.vue
@@ -50,6 +50,7 @@ import {
 } from '../core';
 import { resolveUISchemaValidations } from '../util';
 import type Ajv from 'ajv';
+import { generateJsonSchema } from './schema';
 
 const props = defineProps<{
   state: JsonFormsProps;
@@ -86,16 +87,18 @@ watch(
       // if we do not update that then at the moment the core will
       // use the previously generated schema since it doesn't update the generated schema upon data changes
       // fixes: https://github.com/eclipsesource/jsonforms/pull/2478
-      const generatorData = isObject(value) ? value : {};
-      resolvedSchema.schema = Generate.jsonSchema(generatorData);
+      resolvedSchema.schema = generateJsonSchema(value);
       if (!props.state.uischema) {
         // override the uischema as well so that we can specify some vuetify specific options for container
         resolvedUiSchema.value = Generate.uiSchema(
           resolvedSchema.schema,
-          'VerticalLayout',
+          undefined,
           undefined,
           resolvedSchema.schema,
-        );
+        ) ?? {
+          type: 'VerticalLayout',
+          elements: [],
+        };
 
         if (resolvedUiSchema.value.type === 'VerticalLayout') {
           resolvedUiSchema.value.options = {
@@ -110,6 +113,30 @@ watch(
           };
         }
       }
+    } else if (!props.state.uischema) {
+      // override the uischema as well so that we can specify some vuetify specific options for container
+      resolvedUiSchema.value = Generate.uiSchema(
+        resolvedSchema.schema ?? props.state.schema,
+        undefined,
+        undefined,
+        resolvedSchema.schema,
+      ) ?? {
+        type: 'VerticalLayout',
+        elements: [],
+      };
+
+      if (resolvedUiSchema.value.type === 'VerticalLayout') {
+        resolvedUiSchema.value.options = {
+          vuetify: {
+            'v-container': {
+              fluid: true,
+            },
+            'v-row': {
+              'no-gutters': true,
+            },
+          },
+        };
+      }
     }
   },
 );
diff --git a/packages/jsonforms-vuetify-renderers/src/components/schema.ts b/packages/jsonforms-vuetify-renderers/src/components/schema.ts
@@ -0,0 +1,158 @@
+// This file is copied over from the JsonForms core and modified until this is merged https://github.com/eclipsesource/jsonforms/pull/2478
+
+import type { JsonSchema4 } from '@jsonforms/core';
+
+const ADDITIONAL_PROPERTIES = 'additionalProperties';
+const REQUIRED_PROPERTIES = 'required';
+
+type Properties = { [property: string]: JsonSchema4 };
+
+const distinct = (
+  properties: any[],
+  discriminator: (item: any) => string,
+): JsonSchema4[] => {
+  const known: { [property: string]: boolean } = {};
+
+  return properties.filter((item) => {
+    const discriminatorValue = discriminator(item);
+    if (Object.prototype.hasOwnProperty.call(known, discriminatorValue)) {
+      return false;
+    } else {
+      known[discriminatorValue] = true;
+      return true;
+    }
+  });
+};
+
+class Gen {
+  constructor(
+    private findOption: (props: Properties) => (optionName: string) => any,
+  ) {}
+
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  schemaObject = (data: Object): JsonSchema4 => {
+    const props: Properties = this.properties(data);
+    const schema: JsonSchema4 = {
+      type: 'object',
+      properties: props,
+      additionalProperties: this.findOption(props)(ADDITIONAL_PROPERTIES),
+    };
+    const required = this.findOption(props)(REQUIRED_PROPERTIES);
+    if (required.length > 0) {
+      schema.required = required;
+    }
+
+    return schema;
+  };
+
+  properties = (data: any): Properties => {
+    const emptyProps: Properties = {};
+
+    return Object.keys(data).reduce((acc: Properties, propName: string) => {
+      acc[propName] = this.property(data[propName]);
+
+      return acc;
+    }, emptyProps);
+  };
+
+  property = (data: any): JsonSchema4 => {
+    switch (typeof data) {
+      case 'string':
+        return { type: 'string' };
+      case 'boolean':
+        return { type: 'boolean' };
+      case 'number':
+        if (Number.isInteger(data)) {
+          return { type: 'integer' };
+        }
+
+        return { type: 'number' };
+      case 'object':
+        if (data == null) {
+          return { type: 'null' };
+        }
+
+        return this.schemaObjectOrArray(data);
+      default:
+        return {};
+    }
+  };
+
+  schemaObjectOrArray = (data: any): JsonSchema4 => {
+    if (data instanceof Array) {
+      return this.schemaArray(data as any[]);
+    } else {
+      return this.schemaObject(data);
+    }
+  };
+
+  schemaArray = (data: any[]): JsonSchema4 => {
+    if (data.length > 0) {
+      const allProperties: JsonSchema4[] = data.map(this.property);
+      const uniqueProperties = distinct(allProperties, (prop) =>
+        JSON.stringify(prop),
+      );
+      if (uniqueProperties.length === 1) {
+        return {
+          type: 'array',
+          items: uniqueProperties[0],
+        };
+      } else {
+        return {
+          type: 'array',
+          items: {
+            oneOf: uniqueProperties,
+          },
+        };
+      }
+    } else {
+      return {
+        type: 'array',
+        items: {},
+      };
+    }
+  };
+}
+
+/**
+ * Generate a JSON schema based on the given data and any additional options.
+ * @param {Object} instance the data to create a JSON schema for
+ * @param {any} options any additional options that may alter the generated JSON schema
+ * @returns {JsonSchema} the generated schema
+ */
+export const generateJsonSchema = (
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  instance: Object,
+  options: any = {},
+): JsonSchema4 => {
+  const findOption =
+    (props: Properties) =>
+    (optionName: string): any => {
+      switch (optionName) {
+        case ADDITIONAL_PROPERTIES:
+          if (
+            Object.prototype.hasOwnProperty.call(options, ADDITIONAL_PROPERTIES)
+          ) {
+            return options[ADDITIONAL_PROPERTIES];
+          }
+
+          return true;
+        case REQUIRED_PROPERTIES:
+          if (
+            Object.prototype.hasOwnProperty.call(options, REQUIRED_PROPERTIES)
+          ) {
+            return options[REQUIRED_PROPERTIES](props);
+          }
+
+          return Object.keys(props);
+        default:
+          return;
+      }
+    };
+
+  const gen = new Gen(findOption);
+
+  return gen.property(instance);
+};
diff --git a/packages/jsonforms-vuetify-webcomponent/src/plugins/vuetify.ts b/packages/jsonforms-vuetify-webcomponent/src/plugins/vuetify.ts
@@ -78,15 +78,10 @@ function toBlueprint(value: string): Blueprint {
   return md1;
 }
 
-function createVuetifyInstance(
-  dark: boolean,
-  blueprint: string,
-  iconset: string,
-  locale: string,
-) {
+function createVuetifyInstance(appStore: ReturnType<typeof useAppStore>) {
   const theme = {
-    defaultTheme: dark ? 'dark' : 'light',
-    themes: getCustomThemes(blueprint).reduce(
+    defaultTheme: appStore.dark ? 'dark' : 'light',
+    themes: getCustomThemes(appStore.blueprint).reduce(
       (acc: Record<string, ThemeDefinition>, current) => {
         acc[current.name] = current;
         return acc;
@@ -98,32 +93,27 @@ function createVuetifyInstance(
   return createVuetify({
     components,
     directives,
-    blueprint: toBlueprint(blueprint),
+    blueprint: toBlueprint(appStore.blueprint),
     locale: {
-      locale: locale,
+      locale: appStore.locale,
       fallback: 'en',
       messages: { en, bg, de },
     },
     icons: {
-      defaultSet: iconset, // Set the default icon set
+      defaultSet: appStore.iconset, // Set the default icon set
       sets: {
         mdi,
         fa,
       },
-      aliases: toIconSetAliases(iconset),
+      aliases: toIconSetAliases(appStore.iconset),
     },
     theme: theme,
   });
 }
 
 export function buildVuetify() {
   const appStore = useAppStore();
-  const vuetify = createVuetifyInstance(
-    appStore.dark,
-    appStore.blueprint,
-    appStore.iconset,
-    appStore.locale,
-  );
+  const vuetify = createVuetifyInstance(appStore);
 
   watch(
     () => appStore.locale,
