[margioriev]

What does this PR do?

@jsonforms/vue-vuetify now requires Vuetify ^4.1.8. The previous peer was ^3.11.0. The lower bound has to rise because Vuetify 4 removed vuetify/labs/VStepperVertical. Applications that must stay on Vuetify 3 should stay on the current JSON Forms release.

Implementation Details

• The vuetify peer dependency and dev dependency both move from ^3.11.0 to ^4.1.8.
• CategorizationStepperRenderer imports VStepperVertical and VStepperVerticalItem from vuetify/components/VStepperVertical. That was the only vuetify/labs import in the package.
• The lockfile resolves vuetify@4.2.5. pnpm 11.27.1 also records the optional supports-color peer on existing snapshot ids. Those package versions are unchanged.
• Renderer snapshots are updated for Vuetify 4 markup. Spec logic is unchanged.

Files

• packages/vue-vuetify/package.json: sets the vuetify peer dependency and the dev dependency from ^3.11.0 to ^4.1.8.
• packages/vue-vuetify/src/layouts/CategorizationStepperRenderer.vue: imports VStepperVertical and VStepperVerticalItem from vuetify/components/VStepperVertical instead of vuetify/labs/VStepperVertical.
• pnpm-lock.yaml: resolves vuetify@4.2.5, points vite-plugin-vuetify at that version, and adds @vuetify/v0. The remaining hunks append (supports-color@8.1.1) to snapshot ids that were already present.

Snapshots

These files only record the HTML Vuetify 4 renders. No spec logic changed.

• packages/vue-vuetify/tests/unit/additional/__snapshots__/ListWithDetailRenderer.spec.ts.snap: v-row gains v-row--density-default.
• packages/vue-vuetify/tests/unit/complex/__snapshots__/ArrayControlRenderer.spec.ts.snap: the progress bar gains --v-progress-reveal-duration and --v-progress-chunk-gap. The row gains v-row--density-default and justify--center.
• packages/vue-vuetify/tests/unit/complex/__snapshots__/MultiEnumSelectRenderer.spec.ts.snap: the select gains v-input--indent-details, and the progress bar gains the two CSS variables above.
• packages/vue-vuetify/tests/unit/complex/__snapshots__/OneOfRenderer.spec.ts.snap: the select gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/DateControlRenderer.spec.ts.snap: the text field gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/DateTimeControlRenderer.spec.ts.snap: the text field gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/EnumControlRenderer.spec.ts.snap: the select gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/IntegerControlRenderer.spec.ts.snap: the number input gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/MultiStringControlRenderer.spec.ts.snap: the textarea gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/NumberControlRenderer.spec.ts.snap: the number input gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/OneOfEnumControlRenderer.spec.ts.snap: the select gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/StringControlRenderer.spec.ts.snap: the text field and the combobox gain v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/controls/__snapshots__/TimeControlRenderer.spec.ts.snap: the text field gains v-input--indent-details, and the progress bar gains those CSS variables.
• packages/vue-vuetify/tests/unit/layout/__snapshots__/ArrayLayoutRenderer.spec.ts.snap: the progress bar gains those CSS variables. The row gains v-row--density-default and justify--center.

How to Test

1. Run pnpm install && pnpm --filter @jsonforms/vue-vuetify build.
2. Run pnpm --filter @jsonforms/vue-vuetify test.
3. Link the package into an app on Vuetify 4 and confirm a categorization stepper renders.

Use this branch in another project

Clone only update-jsonforms-vue-vuetify-to-vuetify4:

git clone --single-branch --branch update-jsonforms-vue-vuetify-to-vuetify4 git@github.com:margioriev/jsonforms.git
cd jsonforms

This repo needs Node 24 and pnpm 11.

export NVM_DIR="$HOME/.nvm"
. "$NVM_DIR/nvm.sh"
nvm use 24
node -v

node -v must print v24.x before the install.

pnpm install
pnpm --filter @jsonforms/core build
pnpm --filter @jsonforms/vue build
pnpm --filter @jsonforms/vue-vuetify build

lib is not in git, so the packages have to be built before they can be imported.
Publish the three built packages to the local yalc store:

cd packages/core && yalc publish
cd ../vue && yalc publish
cd ../vue-vuetify && yalc publish

In the application where you want to use this package, install Vuetify 4 and link the packages:

npm install vuetify@^4.1.8
yalc add @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify

@jsonforms/vue-vuetify requires @jsonforms/core and @jsonforms/vue at 3.9.0-alpha.1, vue at ^3.5.0, and vuetify at ^4.1.8. Take all three JSON Forms packages from this branch.

<script>
import { JsonForms } from '@jsonforms/vue';
import { extendedVuetifyRenderers } from '@jsonforms/vue-vuetify';
</script>
<style>
@import '@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.css';
</style>

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	bee4f57
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6acff187cc90dffdb4847076
😎 Deploy Preview	https://deploy-preview-2649--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.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Margiorie seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[lucas-koehler]

Hi @margioriev , thanks for the (draft) contribution. Note that there is already an open PR to upgrade to Vuetify 4:

• feat(vue-vuetify): migrate to Vuetify 4 #2638

[coveralls]

coverage: 84.58%. remained the same — margioriev:update-jsonforms-vue-vuetify-to-vuetify4 into eclipsesource:master

[lucas-koehler]

Hi @margioriev , thank you very much for the contribution ❤️ . I am closing this because #2638 also update to Vuetify 4 and is close to merging.