Make ControlWrapper configurable in vue-vanilla

[dzikoysk]

Is your feature request related to a problem? Please describe.

We'd like to modify the the way how JsonForms Vanilla for Vue 3 renders controls, to e.g. sth like:

---

Label
Description
[ Control ]

---

Unfortunately, all built-in control renderers use ControlWrapper under the hood that defines this behavior, but it's simply just a hardcoded component that we cannot modify:

jsonforms/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue

Lines 1 to 13 in 23e1a55

	<template>
	<div v-if="visible" :class="styles.control.root" :id="id">
	<label :for="id + '-input'" :class="styles.control.label">
	{{ computedLabel }}
	</label>
	<div :class="styles.control.wrapper">
	<slot></slot>
	</div>
	<div :class="errors ? styles.control.error : styles.control.description">
	{{ errors ? errors : showDescription ? description : null }}
	</div>
	</div>
	</template>

Describe the solution you'd like

Would be great if ControlWrapper could be provided by user in configuration or as a renderer, e.g. ControlWrapperRenderer just like any other wrapper.

Describe alternatives you've considered

At this point, we're forced to make a fork to provide desired functionality as it's probably the only way atm.

~ https://github.com/reposilite-playground/jsonforms

Framework

Vue 3

RendererSet

Vanilla

Additional context

No response

[sdirix]

Hi @dzikoysk,

Thanks for the suggestion. I think this makes sense. In the renderers we could inject the control wrapper instead of hard coding it, falling back to the default control wrapper if none is injected. Then you can easily provide the wrapper from outside of JSON Forms.

Would you be able to contribute this?

[dzikoysk]

Unfortunately I'm not that experienced with JsonForms & TypeScript to provide convenient solution - it took me a while to apply some hardcoded changes to the codebase, and I'd lie if I'd tell that all of them even work 😬