vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Feature Request] Simplify defaults assignment for input like components (textfields, selects, autocompletes, etc.)

Open simionato-mobisec opened this issue 10 months ago • 3 comments

Problem to solve

Let's say a dev want all textfields, selects, autocompletes, etc. to be outlined. He can't do

createVuetify({
  defaults: {
    global: {
      variant: 'outlined'
    }
  }
})

otherwise everything gets messy (list items, cards, etc.). So he ends up doing something like this:

const INPUTS_VARIANT = 'outlined'
createVuetify({
  defaults: {
    VTextField: {
      variant: INPUTS_VARIANT
    },
    VAutocomplete: {
      variant: INPUTS_VARIANT
    },
    VSelect: {
      variant: INPUTS_VARIANT
    }
    // and so on...
  }
})

This is not an elegant solution.

Proposed solution

It would be awesome to have something like:

VInput: {
  // place here all default props which are going to be applied to textfields, selects, etc.
  variant: 'outlined'
  color: 'primary'
}

simionato-mobisec avatar May 02 '24 15:05 simionato-mobisec

not an exact solution but heres how ive done about solving it

const inputProps = {
  variant: 'outlined',
  density: 'compact',
  hideDetails: true,
  color: 'primary',
  persistentPlaceholder: true,
}

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    // ...
    defaults: {
      VTextField: { ...inputProps },
      VTextarea: { ...inputProps },
      VSelect: { ...inputProps, openOnClear: false },
      VAutocomplete: { ...inputProps, openOnClear: false },
      VCombobox: { ...inputProps, openOnClear: false },
    }
  })
}

Winter979 avatar May 03 '24 03:05 Winter979

not an exact solution but heres how ive done about solving it

const inputProps = {
  variant: 'outlined',
  density: 'compact',
  hideDetails: true,
  color: 'primary',
  persistentPlaceholder: true,
}

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    // ...
    defaults: {
      VTextField: { ...inputProps },
      VTextarea: { ...inputProps },
      VSelect: { ...inputProps, openOnClear: false },
      VAutocomplete: { ...inputProps, openOnClear: false },
      VCombobox: { ...inputProps, openOnClear: false },
    }
  })
}

Surely better than mine, but I'd like to have a more elegant and shorter solution from Vuetify.

simionato-mobisec avatar May 03 '24 06:05 simionato-mobisec

Stumbled upon this while writing a related bug report... Wanted to let that this is sort of already a feature, you just have to specify them on VField. Currently this seems to only work on props that default to undefined, although that's not confirmed.

laventnc avatar May 09 '24 14:05 laventnc