feat(vue-vuetify): improve mixed and additional property editors by kchobantonov · Pull Request #2610 · eclipsesource/jsonforms

kchobantonov · 2026-08-02T03:28:09Z

Summary

This PR improves the Vue Vuetify handling of mixed-type and dynamic additional properties.

It adds a tree-based editor for object and array values while keeping primitive values editable through the existing mixed renderer. The implementation is scoped to the Vue Vuetify package.

Changes

Add a split-pane tree/detail view for mixed object and array values.
Support navigating, renaming, and deleting dynamic additional properties from the tree.
Use the same property-name validation for renaming through:
- the Additional Properties component
- the mixed-renderer tree
Validate renamed properties against:
- existing property names
- propertyNames
- applicable patternProperties
Preserve the property value and its type when renaming.
Correctly update mixed renderers when an additional property’s value type changes.
Avoid mutating the provided JSON Schema while preparing renderer schemas.
Support property names containing brackets while rejecting dots, which are JSON Forms path separators.
Add translated labels, tooltips, accessibility labels, generated array-item labels, and validation errors.
Add splitpanes to the Vue Vuetify peer and development dependencies.

Validation

Added tests for dynamic property-name validation and translation handling.
Added coverage for additional-property value type changes.

netlify · 2026-08-02T03:28:13Z

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	`358f371`
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6ab2beafcdb7880008d5e7d3
😎 Deploy Preview	https://deploy-preview-2610--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

kchobantonov · 2026-08-02T03:36:05Z

@sdirix please review

coveralls · 2026-08-03T21:25:03Z

coverage: 84.521%. remained the same — kchobantonov:feat/vue-vuetify-mixed-additional-properties into eclipsesource:master

EclipseSourceAI

Note

Autonomous AI review.

This review was done by an AI agent and therefore may contain mistakes. Feel free to ignore any comment you disagree with. Noting why helps, since replies are read and taken into account in follow-up reviews.

Resolving all AI comments does not lead to an automatic approval. A maintainer still needs to review and sign off on the overall architecture and design.

To get an updated review after pushing changes, a maintainer may re-request a review from this account.

Running in Eclipse Enclave, submitted via review-guard-mcp

Reworks mixed-type and dynamic additionalProperties editing in @jsonforms/vue-vuetify: object/array mixed values now get a splitpanes tree + detail editor, nested mixed controls navigate into that tree instead of nesting renderers, and property renaming is added both in the tree and in the Additional Properties editor.

The extraction of src/util/dynamicProperties.ts is the strongest part: findPropertySchema and getPropertyNameSchema come straight out of AdditionalProperties.vue and are now shared by both rename paths, with unit tests. The non-mutating schema preparation in createMixedRenderInfos and replacing the JSON.stringify descriptor-rebuild check with haveAdditionalPropertyNamesChanged are both real fixes.

Where to focus:

getPathAncestorNodeIds in MixedRenderer.vue mixes up absolute and relative paths, so "reveal in tree" never expands ancestors when the mixed control's own path is non-empty (the normal additionalProperties case). Reproduced in the running example app on both the Additional Properties and Mixed Object examples.
Making splitpanes a required peer dependency plus re-implementing its base CSS in VSplitpanes.sass is a packaging decision that deserves an explicit call.
MixedRenderer.vue is now ~1600 lines; the pure tree-building layer would be better off in src/util where it can be tested.

pnpm test, pnpm lint, pnpm type-check and the full pnpm build all pass on the merged branch, and the CSS output includes the splitpanes rules.

EclipseSourceAI · 2026-08-03T21:45:33Z

+  parentPath: string,
+  propertyName: string,
+): string => (parentPath ? `${parentPath}.${propertyName}` : propertyName);
+


Always dot-joining is right for core's current path handling, since resolveData and setDataAt split purely on . (setData.ts#L31), whereas core's compose drops the separator when the segment starts with [ (path.ts#L29). The downside is that a [foo] property created here won't resolve in material/vanilla/angular, which all still use composePaths. Fixing compose in core would make bracket support work everywhere instead of just this renderer set.

This needs separate PR fix since that could impact other code

EclipseSourceAI · 2026-08-03T21:45:36Z

+    const treeNodes = computed(() =>
+      showTreeView.value
+        ? buildTreeFromData(
+            input.control.value.data,
+            resolvedSchema.value ?? input.control.value.schema,
+            input.control.value.rootSchema,
+            input.control.value.path,
+            vuetifyControl.computedLabel.value,
+            input.control.value.enabled,
+            input.control.value.readonly,
+            showPrimitivesInTree.value,
+            mixedTranslations.itemLabel,
+          )
+        : [],
+    );


treeNodes depends on control.data, so every keystroke in the detail pane rebuilds the whole tree and each node runs cloneDeep + cleanSchema (twice for arrays, via prepareArraySchema). Fine for the example data, but it could get noticeable on larger objects; caching per node path or keying the rebuild on the data shape rather than the value would help.

…rebuilding the tree on data changes

- Enforce mutation permissions and protect required/static keys - Preserve selected editors when tree rows are filtered out - Retain allowed types, detail UI, and matching parent constraints - Cancel stale renames and refresh dynamic property schemas - Add regression tests and include tests in type checking - Use draft-07 definitions in schema fixtures

Adjust selected paths when an earlier array item is deleted, preserving the selected item and any nested field. Add regression tests for index shifts, sibling boundaries, and selected-node or ancestor deletion.

Allow adding, renaming, and editing dotted keys in AdditionalProperties through isolated forms. Preserve property schemas, local references, validation, and read-only guards. Add regression tests for JSON value types, literal-key updates, and recursive schema references.

Keep empty Add inputs free of inline errors while preserving validation and disabled-button guards. Align Svelte renderers with Vuetify, document the behavior, and add regression tests.

Merge compatible scalar constraints from matching patternProperties and preserve complex or conflicting schemas with allOf. Keep combinator renderer selection intact and cache compiled patterns. Add utility and component regression tests for overlapping patterns.

kchobantonov · 2026-09-22T13:41:26Z

@sdirix @lucas-koehler ready for review - also side question there is vuetify4 already - are we planning to upgrade ?

sdirix · 2026-09-25T12:43:05Z

We track it here now: #2629

At the moment we don't plan do this ourselves but we would accept a community contribution

sdirix · 2026-09-25T15:32:25Z

+export const mixedRendererDefaultTranslations: MixedRendererDefaultTranslation[] =
+  [
+    {
+      key: MixedRendererTranslationEnum.unsupportedPropertyName,


unsupportedPropertyName is not used anywhere, so it can be removed here and from MixedRendererTranslations.

sdirix · 2026-09-25T15:32:32Z

+  console.info(
+    `Unrelated edits: 10; tree nodes: 401; full tree traversals: ${traversals}`,
+  );


This triggers the no-console lint warning. The assertion below already covers it, so the log can go.

sdirix · 2026-09-25T15:33:01Z

+    const additionalPropertyItems = computed<AdditionalPropertyType[]>(() =>
      additionalKeys.value.map((propName) =>
        toAdditionalPropertyType(
          propName,
-          control.value.data[propName],
          control.value.schema,
          control.value.rootSchema,
        ),


This recomputes every row's schema and UI schema on any form change, as additionalKeys returns a new array whenever control changes. With two mixed rows under additionalProperties, 10 edits to an unrelated sibling field runs buildTreeFromData 20 times, so the new tree caching in MixedRenderer does not help here. We should only rebuild when the names or the schema change (haveAdditionalPropertyNamesChanged is now only used by its own tests).

sdirix · 2026-09-25T15:33:02Z

+              element.propertyName.includes('.') || element.propertyName === ''
+            "
+            :data="control.data[element.propertyName]"
+            :schema="literalValueSchema(element.schema)"


literalValueSchema() returns a new object on every render, so the nested form runs updateCore and core compiles the schema again with the shared ajv (see here). As Ajv caches by object reference, the cache grows by 20 entries over 10 unrelated edits with one dotted key, each embedding the whole root schema. We should memoize the literal schema per property schema, here and in MixedLiteralDetail, which recompiles on every tree rebuild.

sdirix · 2026-09-25T15:33:03Z

+const findTreePropertySchema = (
+  parent: JsonSchema,
+  key: string,
+  root: JsonSchema,
+): JsonSchema | undefined => {
+  const schemas: JsonSchema[] = [];
+  const declared = parent.properties?.[key];
+  if (declared) schemas.push(declared);
+  for (const [pattern, schema] of Object.entries(
+    parent.patternProperties ?? {},
+  )) {
+    if (new RegExp(pattern).test(key)) schemas.push(schema);
+  }
+  return schemas.length
+    ? combineTreeSchemas(schemas, root)
+    : findPropertySchema(parent, key, root);
+};


This re-implements the pattern lookup from additionalPropertySchema with different merge rules, so the tree and the Additional Properties row can end up with different editors for the same key. We should have one lookup shared by both.

sdirix · 2026-09-25T15:33:04Z

+  // JSON Forms data paths use dots as segment separators. Brackets are
+  // treated literally by core and therefore are valid in property names.
+  if (!allowDots && propertyName.includes('.')) {
+    return { reason: 'invalid' };
+  }


Both callers pass allowDots: true now, so this check only runs in tests and the PR description ("rejecting dots") is outdated.

The dotted-key editing (isolated nested forms, literalPropertySchema, \0 segment encoding), allowEmptyPropertyNames and the pattern schema merging were all added on top and more than doubled the PR. I would move them into separate PRs so the tree editor itself can be reviewed and merged first.

sdirix · 2026-09-25T15:33:05Z

+      const parentPath = getParentPath(node.control.path);
+      const parentRelativePath = getRelativePath(parentPath);
+      const parentData =
+        parentRelativePath === null
+          ? input.control.value.data
+          : mixedValueAt(
+              input.control.value.data,
+              parentRelativePath.split('.').map(decodeMixedSegment),
+            );


Minor: readNodeValue(parentPath) already does this lookup, and the same block is repeated in validateRename, commitDelete and deleteNode. Same for decodeMixedSegment(node.control.path.split('.').slice(-1)[0] ?? ''), which appears four times. Also trimmed is no longer trimmed.

kchobantonov added 2 commits August 2, 2026 05:56

feat(vue-vuetify): improve mixed and additional property editors

4c4e84f

add translations

369770b

kchobantonov mentioned this pull request Aug 2, 2026

feat(renderers): add mixed and additional property editors #2596

Closed

sdirix requested a review from EclipseSourceAI August 3, 2026 21:20

EclipseSourceAI reviewed Aug 3, 2026

View reviewed changes

kchobantonov and others added 14 commits August 16, 2026 16:57

Merge branch 'master' into feat/vue-vuetify-mixed-additional-properties

6d24783

updates based on review with exception for the performance issue and …

0cab8c1

…rebuilding the tree on data changes

always open the collapse panel when changing the type to object or array

4f2a56a

fix getPropertyNameSchema

0eff819

respect the restrict option in the tree item

ad85cf3

Merge branch 'master' into feat/vue-vuetify-mixed-additional-properties

1148613

fix(vue-vuetify): preserve mixed tree selection after array deletion

9001725

Adjust selected paths when an earlier array item is deleted, preserving the selected item and any nested field. Add regression tests for index shifts, sibling boundaries, and selected-node or ancestor deletion.

fix: hide validation errors for empty property-name drafts

581939a

Keep empty Add inputs free of inline errors while preserving validation and disabled-button guards. Align Svelte renderers with Vuetify, document the behavior, and add regression tests.

fix lint error

003526c

perf(vue-vuetify): reduce mixed renderer tree rebuilding

3f78124

Merge branch 'master' into feat/vue-vuetify-mixed-additional-properties

dbdc4c5

Merge branch 'master' into feat/vue-vuetify-mixed-additional-properties

358f371

sdirix requested changes Sep 25, 2026

View reviewed changes

Conversation

kchobantonov commented Aug 2, 2026

Summary

Changes

Validation

Uh oh!

netlify Bot commented Aug 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jsonforms-examples ready!

Uh oh!

kchobantonov commented Aug 2, 2026

Uh oh!

coveralls commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EclipseSourceAI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kchobantonov commented Sep 22, 2026

Uh oh!

sdirix commented Sep 25, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify Bot commented Aug 2, 2026 •

edited

Loading

coveralls commented Aug 3, 2026 •

edited

Loading