feat: more options for underlying vuetify components

Author: albanm

doc/pages/configuration.vue

@@ -198,7 +198,17 @@ export default {
       descriptions: {
         rootDisplay: 'equivalent of x-display annotation on the root object of the schema, can be "tabs" or "expansion-panels"',
         fieldProps: 'props passed to the underlying components for simple fields (v-text-field, v-select, etc.)',
+        textFieldProps: 'props passed to the underlying v-text-field components',
+        textareaProps: 'props passed to the underlying v-textarea components',
+        numberProps: 'props passed to the underlying v-text-field components with type="number"',
+        sliderProps: 'props passed to the underlying v-slider components',
+        checkboxProps: 'props passed to the underlying v-checkbox components',
+        switchProps: 'props passed to the underlying v-switch components',
+        comboboxProps: 'props passed to the underlying v-combobox components',
         selectProps: 'props passed to the underlying components for select fields',
+        fileInputProps: 'props passed to the underlying v-file-input components',
+        radioGroupProps: 'props passed to the underlying v-radio-group components',
+        radioItemProps: 'props passed to the underlying v-radio-item components',
         tabsProps: 'props passed to the underlying v-tabs component when relevant',
         expansionPanelsProps: 'props passed to the underlying v-expansion-panels component when relevant',
         dialogProps: 'props passed to the underlying v-dialog component when relevant',

lib/mixins/FileProperty.js

@@ -45,7 +45,7 @@ export default {
   methods: {
     renderFileProp(h) {
       if (!this.isFileProp) return
-      const props = { ...this.commonFieldProps }
+      const props = { ...this.commonFieldProps, ...this.fullOptions.fileInputProps }
       delete props.value
       const attrs = {}
       if (this.fullSchema.contentMediaType) attrs.accept = this.fullSchema.contentMediaType

lib/mixins/SelectProperty.js

@@ -211,10 +211,10 @@ export default {
     renderRadioItem(h, item) {
       const label = item[this.itemTitle] || item[this.itemKey]
       const value = item[this.itemKey]
-      return h('v-radio', { props: { label, value } })
+      return h('v-radio', { props: { ...this.fullOptions.radioItemProps, label, value } })
     },
     renderRadioGroup(h) {
-      const props = { ...this.commonFieldProps }
+      const props = { ...this.commonFieldProps, ...this.fullOptions.radioGroupProps }
       const on = {
         change: value => {
           this.input(value)

lib/mixins/SimpleProperty.js

@@ -26,19 +26,26 @@ export default {
       let tooltipSlot = 'append-outer'
 
       if (this.fullSchema.type === 'string') {
-        tag = 'v-text-field'
-        if (this.display === 'password') props.type = 'password'
         if (this.display === 'textarea' || (this.fullSchema.maxLength && this.fullSchema.maxLength > 1000 && this.display !== 'single-line')) {
           tag = 'v-textarea'
-          props.filled = true
+          Object.assign(props, this.fullOptions.textareaProps)
           domProps.class = 'v-text-field--box v-text-field--enclosed'
+        } else {
+          tag = 'v-text-field'
+          Object.assign(props, this.fullOptions.textFieldProps)
+          if (this.display === 'password') props.type = 'password'
         }
       }
 
       if (['number', 'integer'].includes(this.fullSchema.type)) {
-        tag = 'v-text-field'
-        if (this.display === 'slider') tag = 'v-slider'
-
+        if (this.display === 'slider') {
+          tag = 'v-slider'
+          Object.assign(props, this.fullOptions.sliderProps)
+        } else {
+          tag = 'v-text-field'
+          Object.assign(props, this.fullOptions.textFieldProps)
+          Object.assign(props, this.fullOptions.numberProps)
+        }
         props.type = 'number'
         if (this.fullSchema.minimum !== undefined) props.min = this.fullSchema.minimum
         if (this.fullSchema.maximum !== undefined) props.max = this.fullSchema.maximum
@@ -48,9 +55,14 @@ export default {
       }
 
       if (this.fullSchema.type === 'boolean') {
-        tag = 'v-checkbox'
         tooltipSlot = 'append'
-        if (this.display === 'switch') tag = 'v-switch'
+        if (this.display === 'switch') {
+          tag = 'v-switch'
+          Object.assign(props, this.fullOptions.switchProps)
+        } else {
+          tag = 'v-checkbox'
+          Object.assign(props, this.fullOptions.checkboxProps)
+        }
         on.change = value => {
           this.input(value || false)
           this.change(value || false)
@@ -59,7 +71,7 @@ export default {
 
       if (this.fullSchema.type === 'array' && ['string', 'number', 'integer'].includes(this.fullSchema.items.type)) {
         tag = 'v-combobox'
-
+        Object.assign(props, this.fullOptions.comboboxProps)
         props.chips = true
         props.multiple = true
         props.appendIcon = ''

lib/utils/options.js

@@ -8,7 +8,17 @@ export const defaultOptions = {
   sectionsTitlesClasses: ['title', 'subtitle-1', 'subtitle-2'],
   childrenClass: 'pr-2',
   fieldProps: {},
+  textFieldProps: {},
+  textareaProps: { filled: true },
+  numberProps: {},
+  sliderProps: {},
+  checkboxProps: {},
+  switchProps: {},
+  comboboxProps: {},
   selectProps: {},
+  fileInputProps: {},
+  radioGroupProps: {},
+  radioItemProps: {},
   tabsProps: { grow: true },
   expansionPanelsProps: { mandatory: true },
   dialogProps: { maxWidth: 500 },