Update dependency vuetify to v3.3.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
vuetify (source)	3.0.0-next-20220226.0 -> 3.3.0

---

Release Notes

vuetifyjs/vuetify (vuetify)

v3.3.0

Compare Source

v3.3.0 (Icarus)

Welcome to the v3.3.0 release of Vuetify!

This MINOR release is meant to coincide with Vue v3.3 and includes a few new features and bug fixes.

The v-bottom-sheet component has hit labs and is ready for testing:

It is a modified version of v-dialog that extends from the bottom of the screen.

The group composable's model now respects selection order:

We cleaned up the Forms validation documentation and added greater control over when an input is validated.

The new lazy option skips validation on mount allowing you to avoid unnecessary rule invocation.

The following is a table of the different validation options:

validate-on=	"input"	"blur"	"submit"	"lazy"
On mount	✅	✅	✅	❌
On input	✅	❌	❌	*
On blur	✅	✅	❌	*
On submit	✅	✅	✅	*

*Uses the behavior of whatever it's combined with.

In addition, we ported over auto-select-first from v2, added loading indicators to all Data Table variants, and added Data Iterators to labs.

The team is now shifting focus to v2.7 Nirvana-lts and v3.4 (Blackguard); while also preparing to move Date Pickers and Calendars to Labs and promoting Data Tables to the core framework. These updates bring Vuetify 3 dangerously close to feature parity with Vuetify 2 and will mark a major milestone in the Vuetify 3 release cycle.

Once we have completed the above, it will free up the team to work on shoring up our GitHub issues and adding new features and functionality. Speaking of issues, in preparation for LTS, the team has been on an absolute tear triaging and dispositioning:

We hope that you enjoy this release and we look forward to rounding out the year with some exciting updates.

Until next time,

John Leider

---

💪 Support Vuetify Development

Vuetify is an open source MIT project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

• Sponsoring John and Kael on Github
• Requesting Enterprise Support
• Supporting the team on Open Collective
• Becoming a sponsor on Patreon
• Becoming a subscriber on Tidelift
• Making a one-time donation with Paypal

📖 Table of Contents

• #Release Introduction
• #Important Links
• #Upgrade Guide
• #Release Notes
• #I need help

❗️ Important Links

• 📄 Docs
• 🚨 Issues
• 🏬 Store
• 🎮 Play
• 💬 Discord
• 🐦 Twitter
• 👽 Reddit

📑 Upgrade guide

• The active-color prop on v-list-item is deprecated, just use color (they did the same thing anyway)
• v-img now has an automatic width and height, so you can probably remove some flex styles and explicit dimensions

💯 Release notes

🚀 Features

• framework: support vue 3.3 (#​17282) (ca10d14)
• ssr: add server-side clientWidth/clientHeight options (178b013), closes #​17252
• types: emit declarations as .d.mts (5e08832), closes #​15885
• VAutocomplete/Combobox: add auto-select-first prop (#​17257) (ffb0852), closes #​9270 #​13788 #​15528 #​16508
• VColorPicker: accept rgb()/hsl()/hsv() swatches (42f7cbd), closes #​8833
• VForm: allow individual inputs to be enabled in disabled form (d768946), closes #​17391
• VImg: use intrinsic size (#​17090) (d7d111b), closes #​17031 #​5757
• VListItem: add baseColor prop, deprecate activeColor (#​17267) (c110997), closes #​16624

🔧 Bug Fixes

• group: respect selection order in v-model (#​17325) (1de8468), closes #​17227
• types: declare array props as readonly (81dcc7c)
• validation: validate initial input value (#​17111) (d1da47a), closes #​15568
• VBadge: add missing variable !default declaration (c38c018)
• VCheckbox: use internal indeterminate value (a3150c4), closes #​17389
• VCombobox: show menu icon when hideNoData is disabled (c69dc9e)
• VCombobox: close menu on icon mousedown (3d91fe7), closes #​17280 #​17355
• VField: match chips line-height, center prepend/append (#​17175) (9b88014), closes #​15980 #​17307
• VSelect: avoid distributive conditional type with unbounded generic (5bdcfde), closes #​17383
• VSelect: don't rotate append-inner-icon (4d60eb7), closes #​4447

🧪 Labs

• VBottomSheet: add to labs (#​17010) (d6487bf), closes #​13466
• VDataIterator: add to labs (#​16839) (31a8f4d), closes #​13478
• VDataTable: add loading prop to all data-table variants (#​16829) (0a4b9fd)
• VDataTable: expose slot props (3da827f)

BREAKING CHANGES

• types: .d.ts imports have to be changed to .d.mts
• types: minimum typescript version 4.7

🆘 I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #vuetify-3-help channel.

v3.2.5

Compare Source

🔧 Bug Fixes

• sass: allow overriding easing variables (21fbd13), closes #​17377
• types: emit slot types for non-generic components (ccddb2c), closes #​17378
• VChip: add flex styling to content div (ecf814d), closes #​16472
• VNavigationDrawer: correct scrim position (#​17374) (da93980), closes #​17367
• VSelect: don't erase readonly items array type (24396ea), closes #​17361
• VSwitch: only apply auto width when using inset prop (ad49126), closes #​17312

v3.2.0

Compare Source

v3.2.0 (Orion)

Welcome to the v3.2.0 release of Vuetify!

The team has been hard at work on some exciting new updates and we're excited to finally get it into your hands!
Orion has a huge focus on improving the defaults engine and giving users more tools to customize their application. We started by adding support for global class and style defaults; then hooked it up to virtual components.

For example, you can set the default class for all v-btn components to be my-btn:

import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    VBtn: {
      class: 'my-btn',
    },
  },
})

The same is possible for virtual components as well. Simply alias a core component and reference it by its name in the config object:

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'

export default createVuetify({
  aliases: {
    MyBtn: VBtn,
  },

  defaults: {
    MyBtn: {
      color: 'primary',
      class: 'my-btn',
      variant: 'tonal',
    },
  },
})

Whenever you use the MyBtn component in any template it will be rendered as a v-btn with the default props applied:

<template>
  <my-btn>My Button</my-btn>
  <!-- <v-btn color="primary" variant="tonal" class="mt-btn">...</v-btn>-->
</template>

Finally, we made our defaults composable publicly available. Now you can hook your custom components into the defaults engine and configure your entire application from a single source.

<template>
  <div>
    I am {{ props.foo }}
  </div>
</template>

<script setup>
  import { useDefaults } from 'vuetify'

  const _props = defineProps({ foo: String })
  const props = useDefaults(_props)
</script>

The defaults composable also works with nested configurations. This works in any combination of virtual, custom, and core Vuetify components.

For example, you can create a custom component that modifies the default behavior of its children:

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'
import { VCard } from 'vuetify/components/VCard'

export default createVuetify({
  aliases: {
    MyBtn: VBtn,
    MyCard: VCard,
  },

  defaults: {
    MyBtn: {
      color: 'primary',
      class: 'my-btn',
      variant: 'tonal',
    },
    MyCard: {
      border: true,
      variant: 'text',

      MyBtn: {
        color: 'secondary',
        variant: 'text',
      },
    },
  },
})

Some other big feature updates in this release include:

• v-virtual-scroll has moved to the core library
• v-infinite-scroll has entered Labs
• added new flex CSS utility classes

With v3.2 complete, the team is preparing for v2.7-lts (Nirvana) and the next v3 release, Icarus. We've recently updated our roadmap to be more transparent about our plans for the future; as well as improve the information about each release. Also, we've drastically improved the performance of the documentation and added new tools, such as 🎮Vuetify Play, to all component examples.

We hope that you enjoy this release as much as we have enjoyed working on it.

Until next time,

John Leider

---

💪 Support Vuetify Development

Vuetify is an open source MIT project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

• Sponsoring me on Github
• Requesting Enterprise Support
• Supporting Kael on Open Collective
• Becoming a sponsor on Patreon
• Becoming a subscriber on Tidelift
• Making a one-time donation with Paypal

📖 Table of Contents

• #Release Introduction
• #Important Links
• #Upgrade Guide
• #Release Notes
• #I need help

❗️ Important Links

• 📄 Docs
• 🚨 Issues
• 🏬 Store
• 🎮 Play
• 💬 Discord
• 🐦 Twitter
• 👽 Reddit

📑 Upgrade guide

• The title prop on v-tab is now text
• The visible-items prop has been removed

💯 Release notes

🚀 Features

• defaults: allow setting class and style (#​16459) (e3338d9), closes #​16896 #​17188
• framework: expose useDefaults() (#​16461) (9a547b1)
• flex: add new classes (#​16820) (bce1b07)
• VAppBar: implement scrolling techniques (#​16267) (87ddbc8)
• VBtn: resize height of button when override $spacer (#​17097) (6169fc8)
• VBtn/VTab: add text property (753d444)
• VField: add baseColor prop (#​16719) (92dffce), closes #​16713
• VField: add solo-inverted variant (#​16794) (d0b41e4)
• VIcon: support SVGs with multiple paths (#​17098) (845be0b)
• VSlider: add start and end events (#​16514) (be71818)
• VTooltip: add eager prop support (#​16752) (d0761be)
• VVirtualScroll: remove visibleItems prop (760ac21)
• VVirtualScroll: promote from labs (f8c5746)

🔧 Bug Fixes

• defaults: remove required default and add chain operator (eb00082)
• types: change update:focused event type to boolean (#​17237) (35b9411), closes #​17197
• types: volar compatible generic types (#​17231) (36e3834), closes #​17211
• VRating: keyboard navigation (1c0a0d2)
• VRating: expose model value in item slot (62b4be7)
• VVirtualScroll: reuse existing elements (c3f79aa), closes #​11951
• VVirtualScroll: correct midpoint calculation (9f12b0f)

🧪 Labs

• date: add new composable to labs (#​16691) (919dab2)
• VVirtualScroll: promote from labs (f8c5746)
• VInfiniteScroll: initial implementation (#​15590) (229a440), closes #​3538

BREAKING CHANGES

• VTab: The VTab title prop is now text
• VVirtualScroll: visibleItems has been removed

🆘 I need help!

If you are stuck and need help, don't fret! We have a very large and dedicated community that is able to provide help 24/7. Come to the #vuetify-3-help channel.

v3.1.16

Compare Source

🔧 Bug Fixes

• VBreadcrumbs: use title as key (#​16840) (4e2d539), closes #​16838
• VField: remove duplicate border from outlined variant (528f5e4), closes #​17220

🔬 Code Refactoring

• extract focusChild helper function (1646d67)
• extract focusableChildren helper function (2531a83)

🧪 Labs

• VDataTable: add missing props to headers slot (29b076a), closes #​17148 #​17204
• VDataTable: show no-data text if no items (0e996d3), closes #​17168

v3.1.15

Compare Source

🔧 Bug Fixes

• inputs: add missing update:focused events (#​16852) (42c0b4d)
• mdi-svg: update contextual icons (#​16871) (6f35c1f), closes #​16870
• types: add missing props to loader slots (91b6807), closes #​17165
• VAutocomplete: search text when select item in multiple (#​17144) (299682f), closes #​17136
• VAutocomplete: restore arrow keys select and delete (#​16629) (52651ad), closes #​16627
• VCheckbox: missing hint and persistent-hint props (#​17096) (e8b80cd), closes #​16692
• VOverlay: position on RTL (#​17099) (0566e10), closes #​16628
• VSelect/VAutocomplete: transform raw object if item-title is a function (#​17036) (36d9955), closes #​16210
• VSelects: keep field focused when menu is open (#​17152) (de1778d)
• VSlider: add missing prepend and append icon click events (#​16079) (586fc76), closes #​16071
• VSwitch: prevent propagation of duplicate click events (#​17173) (0f594dc), closes #​17116

🧪 Labs

• VDataTableFooter: correct itemsPerPageOptions prop type (28a1763)
• VDataTableServer: add search prop (#​16965) (939f85a), closes #​16959
• VSkeletonLoader: add missing divider type (#​17108) (232f21c), closes #​17107

v3.1.14

Compare Source

🔧 Bug Fixes

• framework: unreliable dependencies of useProxiedModel() (#​17102) (f448836)
• theme: use background-color instead of background (fd56602), closes #​17049
• types: strictly type EventProp events (d226a0f)
• types: rename emits event variables (0709890)
• VCombobox: hide placeholder when dirty (#​17122) (69ce260), closes #​16519 #​16493
• VCombobox: allow falsy values in model (#​17123) (4a9eae2), closes #​17120
• VList: do not focus elements with -1 tabindex (b58fc92)
• VListItem: adjust three-line padding for density (#​17093) (eb3de4a), closes #​15764
• VOverlay: ignore mouseenter events from touch devices (b86d05b)
• VProgressCircular: remove animation jiggle (9395736), closes #​16821
• VProgressLinear: support rounded for larger height bars (a7b1cb3)
• VSelect: replicate html select hotkeys (#​17112) (bab5945), closes #​16055 #​7260
• VSelects: do not focus VCheckboxBtn when using keyboard (520b0fd)
• VTextField: only reset caret position if trim modifier is used (5f71ba5), closes #​16759
• VToolbarItems: fill height in append/prepend slots (a02a5b2)

🧪 Labs

• VDataTable: show pointer cursor only if row is clickable (87b2468), closes #​17025
• VDataTableServer: hover prop not working (13c06b9), closes #​17087

v3.1.13

Compare Source

This release may break some subcomponent defaults, for example VTabs > VSlideGroup should now just be set on VTabs instead.

🔧 Bug Fixes

• defaults: explicitly define inherited props (#​17024) (12b01f0), closes #​16837 #​17075
• exports: allow importing individual directives (e0af725)
• transitions: don't pass mode prop to groups (9e62197), closes #​17078
• VAutocomplete,VCombobox: unselected items checked (#​16814) (36f727b), closes #​16153
• VCarousel: valid HTML ID for buttons (ff24ece)
• VListGroup: prevent initial transition (07d7cd2), closes #​17055
• VNavigationDrawer: prevent re-rendering list items on hover (24e0e30)
• VSlider: unref label ID (5314674)
• VSwitch: thumb inherits currentColor as default (#​16525) (c16a3b2), closes #​16486
• VTextarea: persistentPlaceholder shouldn't affect hint (5cf3bff), closes #​17060

🧪 Labs

• VDataTable: add row hover styles (#​16935) (9a20fc0)
• VDataTable: use DataTableItem interface for item slots (#​17068) (d26aa16), closes #​17067
• VSkeletonLoader: port to v3 (#​14830) (9273bdb), closes #​9194 #​10199 #​10172 #​13504

🔬 Code Refactoring

• defaults: skip merging deep if prev is undefined (c363981)

🔄 Reverts

• Revert "fix(VTextField): remain placeholder after values selected (#​16565)" (5ac0fa9), closes #​17039

v3.1.9

Compare Source

🔧 Bug Fixes

• defaults: add reactive dependency to original prop (e59dbdb), closes #​16907
• package: remove sass-only exports (02ccc8f), closes #​16866
• types: accept vue-i18n instance with any strings (8413d99), closes #​16848
• VChip: apply correct margin for avatars, icons, and slots (d8fd229)
• VDataTable: only emit once when resetting page (0bfda6a), closes #​16878
• VDataTable: expand-on-click not working (a01a352)
• VFooter: add transition (5b06dc8), closes #​16874
• VImg: pass alt prop to img element (#​16841) (d09d70b), closes #​16203
• VSlider: only generate ticks if needed (6e70639), closes #​16864
• VSnackbar: account for scrollbar hiding (b89046f)
• VSnackbar: disable global overlay stack (316f205), closes #​16893
• VSnackbar: move margin from wrapper to root (6f423c1), closes #​16892

🔬 Code Refactoring

• defaults: improve component performance (#​16775) (4cd7327)

v3.1.8

Compare Source

🔧 Bug Fixes

• display: compare width vs breakpoint always (ba11898)
• display: add hydrate checks for getPlatform (#​16828) (3a41fb7), closes #​16825
• framework: add sass and style package exports (c8b3827), closes #​16593
• inputs: apply disabled prop to internal VField (#​16827) (39ad535), closes #​16778
• locale: set "fa" as an rtl language (#​16844) (f5a768a)
• theme: set defaultTheme variables on :root (32f35d7), closes #​16751 #​16853
• transitions: add !important, explicit transition-property (#​16805) (4c3e25a), closes #​16137 #​14440
• utilities: make $utilities effect sr/disp/elev styles (#​16670) (e790898)
• VAlert: reduce default close button margin (#​16851) (79eb58a)

🧪 Labs

• VDataTable: reset page when searching (6cc6070), closes #​16806

🔬 Code Refactoring

• VSnackbar: remove redundant wrapper element (#​16808) (dc1e603)

v3.1.7

Compare Source

🔧 Bug Fixes

• types: add volar compatible slot types (0fbdd0c)
• VExpansionPanelTitle: add missing slot types (163ec60)

🧪 Labs

• VVirtualScroll: reset cached sizes on items length change (#​16736) (151b872), closes #​16725
• VDataTable: add missing slot types (3382f5d)

v3.1.6

Compare Source

🔧 Bug Fixes

• proxiedModel: don't lose reactive references to values (f32a720), closes #​16741 #​16512 #​16612
• theme: support vueuse/head v1.0 (#​16721) (f07101c)
• VColorPicker: consistent output values (#​16674) (01c35ef), closes #​16672
• VColorPicker: support dynamic width (#​16675) (7190d27), closes #​7151 #​16668
• VColorPicker: never change track color (46eaef7), closes #​16689
• VColorPicker: reset canvas handle position when color = null (f00ee78)
• VOverlay: don't use cancelIdleCallback in safari (9a4caf3), closes #​16613
• VSystemBar: reserve space for hidden scrollbar from VOverlay (#​16734) (2e545ae), closes #​16727

🧪 Labs

• VDataTableServer: support column slots (#​16707) (fe92699), closes #​16704
• VVirtualScroll: clamp visible items to [0, items.length] (e493439), closes #​16725

v3.1.5

Compare Source

🔧 Bug Fixes

• AppBar/SystemBar/BottomNav: disable initial transition (#​16647) (1e9736a)
• defaults: reset/root should include undefined (9713ffe), closes #​16615
• defaults: only try to read string props (a9617b5), closes #​16589
• inputs: focus on mousedown instead of click (#​16568) (e3e0614)
• proxiedModel: don't pass reactive objects to transformIn() (#​16612) (02da4e3), closes #​16512
• teleport: find only container that is direct child of target (ce2b450), closes #​16610
• types: define missing slot types (#​16621) (df0b2dd)
• VBottomNavigation: add missing transition for active toggle (7d4aed2)
• VChipGroup: add flex-wrap (e55f598)
• VListItem: center align icons for two line (b01173c)
• VOverlay: don't try to run scrollStrategy after closing (14c7640), closes #​16569
• VOverlay: prevent infinite update loop during HMR (e829c30), closes #​16661
• VOverlay: don't use requestIdleCallback in safari (b295a28), closes #​16613
• VSelect: don't close menu if submenus are open (9cbe778), closes #​16645
• VSelect: remove redundant clear handler (8cebb2d), closes #​16638
• VSelect: fix selection slot example (9776af3)
• VToolbar: add default width of 100% (c76dc1a)

🧪 Labs

• VDataTableFooter: add i18n props (e7d5083), closes #​16625
• VDataTableServer: remove reset to first page (f5de299), closes #​16620

v3.1.4

Compare Source

🔧 Bug Fixes

• getUid must be called from inside a setup function (#​16591) (b7c4ec0), closes #​16558
• locale: update swedish locale messages (#​16556) (d0e1434)
• states: use theme opacity variables (824df5c)
• VChip: set aria-label correctly (48d3724), closes #​16549
• VDataTable: pagination buttons and text (940bd44), closes #​16560
• VDataTableServer: remove properties from options update (55c2021)
• VVirtualScroll: dynamic container height (#​16495) (28057e1)

🔬 Code Refactoring

• VAppBarTitle: implement VToolbarTitle props (24fd25d)
• VBtnToggle: create makeProps function for VBtnGroup (18e6dbe), closes #​16253

v3.1.3

Compare Source

🔧 Bug Fixes

• defaults: optimise defaults access (a5539ba), closes #​16318
• locale: update swedish locale messages (36add1d)
• VBtn: accept value prop for underlying DOM element (#​16465) (09bc5dc), closes #​16188
• VBtn: adjust condition for calculating hasColor (43c09a9), closes #​16478
• VCombobox: don't submit form on enter keypress (49b444c), closes #​16332 #​16347
• VDataTableServer:

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.