Unclear on how to implement basic styling in vue2 according to github page

General
1

Hi,

trying to do styling for my created form.
What I read in the github page (https://github.com/eclipsesource/jsonforms/blob/master/packages/vue2/vue2-vanilla/README.md) styling can be done simply by ‘provide the styles’.
Looking at code example, it seems like the way to do it is putting this into the code:

const myStyles = mergeStyles(defaultStyles, { control: { root: 'my-control' } });

  provide() {
    return {
      styles: myStyles;
    }
  }

From my guess, the example snippet code is to change the ‘root’ within “type”:“Control” styling to ‘my-control’
However, I am not sure where do I specify ‘my-control’? In what format should ‘my-control’ be?
Is there any very basic example code or instruction on how do I implement the input styling as the example?

Also the defaultStyles.ts link from the github page is broken (https://github.com/eclipsesource/jsonforms/blob/master/packages/vue2/vue2-vanilla/src/styles/defaultStyles.ts) and I cannot find such file within vue2 jsonforms as well.

edit: I just tried using <style> tag in the vue sfc, and it worked. It wasn’t working before as I had <style scoped>. Is there any way to make it ‘scoped’ or adding ID/class tag to the stuff created using uischema, as I want to use different styling within the form and the other part of the page.
Moreover, what are the tags so I can refer it to them in the style sheet. (for example the array elements) image

Thanks

2

Hi @hugokhf,

as you noticed the styles are the CSS classes set on the elements. So the example { control: { root: 'my-control' } } adds the CSS class my-control on the root of all control HTML elements.

The idea is that these classes are then styled via a separate CSS file. Of course you can also use the unscoped <style> element within a Vue SFC if you prefer that. To scope your CSS changes to JSON Forms you can simply wrap JSON Forms with a custom class and prefix the class to your selectors, e.g.

.my-form .my-control {
 // your styles
}

Also the defaultStyles.ts link from the github page is broken […] Moreover, what are the tags so I can refer it to them in the style sheet.

Thanks for the notice. Our Vue 2 code is copied at build time from the Vue 3 packages which is why they are not part of the repository. The correct link is this. It contains all available styles to customize.

1 Like
3

thanks a lot,

the rest of my web page (outside the form) is using vuetify, is there any easy way to implement vuetify into the form elements (like basic input, button, selection/options etc)? Or I suppose the only way is to create custom renderer myself?

4

When using Vuetify you probably don’t want to mix it with the Vanilla renderers. So yes, you can do it via custom renderers however you probably want to create a whole renderer set instead.

We very recently started creating such a renderer set, you can find it here. Note that we are at the very beginning of the development, so not even Vuetify is integrated yet. You can watch the repo to keep informed about the process.

5

Hi @sdirix ,

I do have a full renderer set based on Vue 2 and Vuetify and I was thinking of contributing that to the jsonforms project itself GitHub - eclipsesource/jsonforms: Customizable JSON Schema-based forms with React, Angular and Vue support out of the box. since it does have all renderer sets.
Then I saw this post along with the project that you have mentioned GitHub - eclipsesource/jsonforms-vuetify-renderers - so if I want to contribute my render set which project is better to be used then ?

Krasimir

6

Hi @kchobantonov, that sounds very good!

We’re currently working on a Vue 2 Vuetify renderer set, so we are definitely interested in your implementation. The Vue 2 Vuetify renderer set is currently developed in a separate repository and may be merged back to the main repository in the future. So for now it would be best to contribute to the separate repository.

Is the renderer set already publicly available? I would be interested in taking a look.

7

@sdirix
Yes I just make that repository public GitHub - kchobantonov/jsonforms-vue2-vuetify

Note that I have used the vue-vanilla project as a base so the project is not yet multi project where the demo is completely separate - but follows the same structure so the render set is in src folder while the demo is in the dev folder. To run it just do npm run serve. There are few TODO sections for things that should go into the base json vue project and few thing that it is good to go into the json core for example the access to the array JSON schema. Let me know if you have questions or you want to me create a pull request against your project while merging the code from mine

1 Like
8

Hi @kchobantonov, wow that is really a complete implementation! We are definitely interested in integrating it with JSON Forms! Also a nice dev app you spinned up there :wink:

Before we’re able to integrate the code we need you to perform two steps:

  • Open a PR against the repository
  • Sign the CLA notice which will be posted automatically in the PR

These steps are required for licensing reasons and apply to all contributions to JSON Forms.

You don’t need to “properly” integrate with the repository, we can take this over if you prefer us to do it.

Thanks for your generous contribution. Much appreciated!

9

Hi @sdirix

I have merged and created a pull request that includes the vuetify renders set as well as the demo and the additional examples.

Again note that inside the code you will find TODO sections that are workarounds for things that should be either added/fixed in the JsonForms core or JsonForms vue projects. I have also disabled the “Huge” example for now because the browser hangs when trying to render it, for same reason in my project it does not hang but I do see errors in the browser’s console.

Krasimir

1 Like
10

Thank you very much! I’ll take a detailed look soon.