Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
simionato-mobisec opened this issue May 2, 2024 · 3 comments

Comments

@simionato-mobisec
Copy link

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'
}
@Winter979
Copy link

Winter979 commented May 3, 2024

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 },
    }
  })
}

@simionato-mobisec
Copy link
Author

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.

@laventnc
Copy link

laventnc commented May 9, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants