hey I was wondering if it was possible to use the built in vuetify renderers with the filled prop which makes the vuetify components have a different style
Hi @naomi!
With the latest version of the Vuetify renderer set you are able to set Vuetify component props via the UI Schema options. To set the same props for all components, you can use the config property of the json-forms component. Everything you add here will be used as a default value for the UI Schema options.
The Vuetify component props should be contained in a vuetify property, followed by the name of the component. The following config therefore styles all elements as filled:
vuetify: {
'v-text-field': {
filled: true,
},
'v-combobox': {
filled: true,
},
'v-autocomplete': {
filled: true,
},
'v-textarea': {
filled: true,
},
'v-select': {
filled: true,
},
},
2 Likes
Hi @sdirix
In your example above where should the vuetify property be inserted in the UI Schema? I have tried the below but the v-date-picker prop is ignored in the rendered form:
array(
'type' => 'VerticalLayout',
'elements' => array(
[
"type" => "HorizontalLayout",
"elements" => array(
[
'type' => 'Control',
'scope' => '#/properties/start_date',
'label' => 'Start Date',
'options' => array(
'dateFormat' => 'DD/MM/YYYY',
'dateSaveFormat' => 'YYYY-MM-DD'
)
],[
'type' => 'Control',
'scope' => '#/properties/end_date',
'label' => 'End Date',
'options' => array(
'dateFormat' => 'DD/MM/YYYY',
'dateSaveFormat' => 'YYYY-MM-DD'
)
]
),
'options' => array(
'vuetify' => array(
'v-col' => array(
['cols' => 6],
['cols' => 6]
),
'v-date-picker' => array(
'readonly' => true
)
)
)
]
),
'options' => array(
'vuetify' => array(
'v-date-picker' => array(
'readonly' => true
)
)
)
)
I’ve tried using the json-form config but it’s ignored as well:
Hi @dpede,
The options, vuetify and v-date-picker properties should be of type object, not array. The same example posted above should also work for v-date-picker, i.e.
vuetify: {
'v-date-picker': {
filled: true,
},
},
Hi @sdirix
This is the output I’m seeing in Vue dev console:
Is that correct? The rendered datepicker is not filled.
This is my ui-schema:
"ui_schema": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/start_date",
"label": "Start Date",
"options": {
"dateFormat": "DD/MM/YYYY",
"dateSaveFormat": "YYYY-MM-DD"
}
},
{
"type": "Control",
"scope": "#/properties/end_date",
"label": "End Date",
"options": {
"dateFormat": "DD/MM/YYYY",
"dateSaveFormat": "YYYY-MM-DD"
}
}
],
"options": {
"vuetify": {
"v-col": [
{
"cols": 6
},
{
"cols": 6
}
],
"v-date-picker": {
"filled": true
}
}
}
}
]
}
Hi @dpede,
Could you share a screenshot of the field you expect to be filled, but is not?
The Vuetify renderers use a v-text-field to render date/time inputs, with a Vuetify date picker as the prepended inner slot content triggered by the calendar icon, in a v-menu.
If it’s the input that’s displaying the result of your picked date/time that you are wanting to apply the filled prop to, then you would need to set
vuetify: {
'v-text-field': {
filled: true,
},
},
for the relevant part of your UI schema, or the whole schema.
But maybe I’m misunderstanding your requirement?