Vue Vanilla styling

General
1

Hi, I noticed that the vue-vanilla styles configuration is much more limited than the vanilla configuration.

E.g., how can I target the checkbox input in vue-vanilla?

2

Hi @ben,
as you can see here, the Vue boolean renderer uses the control.input parameter to set the css class(es) on the checkbox input. As seen here, you should be able to customize the set styles via the options property of an UI Schema Element, i.e. the boolean property’s Control in your UI Schema.

Best regards,
Lucas

3

In the majority of cases in my application no UI Schema will be provided, is there a configurable way to target the different kinds of inputs separately in Vue?

I guess now that you mention it I am curious why there doesn’t appear to be separate input classes in Vue like in the other adapters.

I’d like to avoid hacky CSS like input:not([type='checkbox'])[id^='#/properties/'].input etc. if possible.

Thanks for the help!

4

Hi @ben ,
AFAIK there is currently no way to target the different kinds of inputs separately without providing a UI Schema.
However, if you’d like to contribute a PR that allows configuring the checkbox styles for vue vanilla separately, we’d gladly accept and review a contribution :slight_smile: