feat: add prepend slot to date/time control renderers

[yaffol]

Adds optional prepend slot to DateControlRenderer, DateTimeControlRenderer, and TimeControlRenderer to allow custom content before the input field.

Benefits:

• Enables custom icons/buttons before input field
• Follows existing Vuetify slot pattern (prepend-inner already exists)
• Backward compatible (slot is optional)
• Consistent across all date/time renderers

Use Case: Allows adding info/help icons or other custom content in the prepend area of v-text-field.

Testing: All existing tests pass. The conditional application with v-if="$slots.prepend" prevents and empty <div class="v-input__prepend"> being injected to the rendered html.

Extension: If this pattern is acceptable, I could extend it across all the renderers, to allow access to the prepend slot for customisation.

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	f426ec4
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/69282cd8ef2b510008bf67cb
😎 Deploy Preview	https://deploy-preview-2504--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.

[coveralls]

coverage: 82.798%. remained the same
when pulling f426ec4 on yaffol:feature/add-prepend-slot
into 567d93d on eclipsesource:master.

[lucas-koehler]

Hi @yaffol , thanks for the contribution ❤️
I have one question: What is the exact use case of this? I.e. as I understand it, using the additional slot allows custom renderers using these controls to fill the prepend slot but the renderers themselves don't use them or add anything there.

Is this correct?

[yaffol]

Hi @lucas-koehler,

Yes, that is correct. This allows custom renderers which wrap the upstream controls - such as a tooltip or copy to clipboard icon - which should be rendered in the field's prepend slot. The reason is useful to do this via the existing slots is that the elements line up very well across the form, and it allows you to add common customisations before or after an input, without needing to completely copy and maintain a custom renderer. If there is nothing passed in, no effect is applied to the renderer.

I have extended the support to all the renderers, and added append slots as well (apart from PasswordRenderer.vue which already uses the append slot via the built-in use of append-icon for show/hide password value. This allows for before/after content with any of the off-the-shelf renderers.

Also added is a clearable computed property to the compositions.ts which allows finer control of whether a field shows its 'clear' icon. This is to allow for cases where you don't want the clear (x) icon to show within the field. The UI Schema option clearable can be used to control this.

I've also created an example Prepend/Append Slots (Basic) in the example app, demonstrating some common use-cases.

[lucas-koehler]

Hi @yaffol , Thanks for this improvement ❤️ ! It adds a lot of flexibility and the examples showcase using this well!