Add vue-bootstrap

[vanillajonathan]

This PR adds a renderer for Vue that uses Bootstrap.

It is derived from vue-vanilla so it only supports what is supported by that package which is not as full fledged as the Material Design renderer for the React package.

It requires an icon set, by default it assumes that will be Bootstrap Icons so it requires you to include that, however if you rather use some other icon set such as Font Awesome or any other you can do that by overriding some properties using a provide (just like the vue-vanilla does for CSS classes).

[netlify]

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	cdb3c96
🔍 Latest deploy log	https://app.netlify.com/sites/jsonforms-examples/deploys/658359641796100008976bd5
😎 Deploy Preview	https://deploy-preview-2231--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 site 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.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[sdirix]

Hi @vanillajonathan,

First and foremost, we want to express our sincere gratitude for your interest in JSON Forms and for the effort you've put into developing a new renderer set. We're always thrilled to see such active engagement from our community.

Due to our limited development resources and a focus on maintaining and refining our existing renderer sets, we are currently not integrating additional renderer sets into JSON Forms. This policy ensures we can sustainably manage the project while keeping our commitments to quality and stability.

We encourage you to consider releasing your renderer set independently. Should you choose to do so, we would be delighted to showcase your project in the community section of our website, offering it visibility and enabling those in need of Bootstrap integration to benefit from your efforts.

I noticed your approach to Bootstrap integration relies on CSS classes. Our Vue Vanilla renderer set offers comprehensive options for customization with CSS classes, which could be a perfect fit for your needs. You can find more details in our customization guide here: Vue Vanilla Customization Guide. This might be a more streamlined approach, reserving custom renderers for instances where the existing structures aren’t compatible.

Furthermore, if you identify potential enhancements to the Vue Vanilla renderer set that would facilitate easier Bootstrap integration and these improvements are generally advantageous, we would warmly welcome such contributions.

For any large contributions in the future, we advise starting a discussion in our forum (https://jsonforms.discourse.group/) or by opening an issue. This preliminary step helps align your contributions with the project's direction and needs, maximizing the effectiveness and impact of your work.

We deeply appreciate your understanding and your willingness to contribute to the betterment of JSON Forms. We look forward to seeing how your renderer set evolves and to your continued involvement in our community.

[vanillajonathan]

The problem with the Material Design renderer is that design language is so strongly styled that it makes it impractical for integration in applications that do not use Material Design.

A problem with the Vue Vanilla renderer is that it only contains a subset of the rendering functionality of the Material Design renderer.

I have read the Vue Vanilla Customization Guide, and my initial attempt at applying Bootstrap was using the Vue Vanilla renderer but I quickly ran into problems due to limitations of Vue Vanilla.

In Bootstrap the input elements should have the class form-control. However, checkboxes and radio button should not, instead they should have the form-check-input class, have a label with the form-check-label class and be wrapped with the form-check CSS class.

https://getbootstrap.com/docs/5.3/forms/checks-radios/

Another drawback is the ugly buttons with textual + , - and 🗙. Icons from a user-specified icon set such as Bootstrap Icons or Font Awesome would be nice.

[sdirix]

Hi @vanillajonathan,

Really appreciate your insights on integrating Bootstrap with the Vue Vanilla renderers. It’s clear there are some gaps to work on.

Suggestions:

• We could expand our class list to cater to different types of controls, aligning more closely with Bootstrap's style needs. If a specific class isn't provided, we'd fall back to the defaults.
• Support icon classes. If they are given we are using them. If not we fall back to the text-based buttons.

Would this cover your use cases? If yes, would you be interested in contributing this enhancement to JSON Forms?

[vanillajonathan]

I think your suggestions sounds very good and would be a good start.

In my code, I removed the asterisk from the labels and instead added a required class on labels which offers better flexibility for styling, I used it to make a red asterisk, but it also allows you to change the asterisk to the text "required" or have an icon instead.

I used this CSS to add the asterisk on labels with the required class.

label.required::after {
  color: var(--bs-red);
  padding-left: 5px;
  content: "*"
}

I think I had to wrap the dialog in another set of div elements. The div's in the modal needs to be nested in a certain way.
Thia also goes for the cards.

I think it would cover most use cases for most people. I would prefer the esclipesource team do it.

[coveralls]

coverage: 83.078%. remained the same
when pulling cdb3c96 on vanillajonathan:patch-vue-bootstrap
into a7d3268 on eclipsesource:master.

[sdirix]

I'm closing this PR now for the reasons discussed above. In case you are interested in seeing the Vue Vanilla renderers adapted to better support the Bootstrap use case without using custom renderers, please open a feature request. Note that we'll likely move the issue then into the "Backlog", waiting for a community contribution to provide this feature.

[vanillajonathan]

Okay, I created issue #2237, #2238, and #2239.