fix(deps): update dependency vuetify to v4

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
vuetify (source)	3.12.3 → 4.0.2

---

Release Notes

vuetifyjs/vuetify (vuetify)

v4.0.2

Compare Source

[!IMPORTANT]
Vuetify Needs Your Support! The OpenCollective funds have been fully exhausted. We are currently unable to compensate our contributors for their continued work on the framework and the ecosystem tools.

If Vuetify is part of your stack, please consider sponsoring the project so we can continue delivering updates and fixes.

Sponsor via Open Collective | Sponsor via GitHub

Every contribution helps us keep Vuetify alive and ship exciting new features.

Thank you.

---

🚀 Features

• icons: add Material Symbols iconset via UnoCSS (#​22680) (6c463c1), closes #​20053
• VDataTable: expose prevPage, nextPage, setPage in bottom slot (#​22681) (4d1aa79)

🔧 Bug Fixes

• hotkey: add delimiter aliases without delimiter ambiguity (#​22635) (a639698)
• rounded: add missing "md" size (#​22679) (47cffdd)
• router: replace next() deprecated in Vue Router v5 (#​22643) (87c4129), closes #​22632
• VDataTable: respect disableSort prop for sortable header (#​22684) (767b0e8), closes #​22523
• VFileInput: correct VField ref type (41a6063), closes #​22309
• VGrid: avoid warning about no-gutters being deprecated - it is not (5d8ec63)
• VNavigationDrawer: fully clip list item text in rail mode (6b448cd), closes #​22564 #​22564
• VNumberInput: prevent input changes when readonly (#​22692) (2b1ed0d), closes #​22677
• VSelect/VAutocomplete/VCombobox: let focus leave to other fields (51196cf), closes #​22697
• VTextarea: correct VField ref type (0d689aa)
• VTimePicker: keep hour value when changing AM/PM (b030df8)

🧪 Labs

• VAvatarGroup: ❗ change the limit behavior to cover overflow item (e580ebc), closes #​22702 #​22703
• VCommandPalette: add closeOnSelect prop and before-select event (#​22634) (d534f79)
• VCommandPalette: correct name of the inner component (bfed30c)

v4.0.1

Compare Source

🚀 Features

• icons: add more iconsets based on UnoCSS (#​22668) (6c8bea5)
• styles: CSS variables for fonts (#​22666) (84495a3)

🔧 Bug Fixes

• theme: put theme stylesheet in body when loaded with unhead (2475a28)
• VBadge: correct props.dotSize fallback (a71f396), closes #​22658
• VColorPicker: align sliders with controls (0d1ce90)
• VDataTable: improvements for sorting in mobile mode (54affe1), closes #​22288 #​22426
• VDataTable: keep fixed cells opaque when loading (ddca6ca), closes #​21557
• VGrid: correct mapping for grid gap x/y (65b4278)
• VOtpInput: handle deletion via onBeforeinput for mobile compatibility (#​22657) (2f8a4f9), closes #​22628
• VPagination: suppress browser spacing (a6b7b93)
• VSelect: fix screenreader navigation to select options (#​22602) (6c962b7), closes #​22226
• VSlideGroup: don't read dom attributes in computed() (a51b313), closes #​22644
• VSlider: reduce affix margins (18af2d2)
• VSnackbar: opaque background for transparent variants (#​22646) (e83fa88), closes #​18871
• VTimeline: keep dot border when using numeric dot size (6764c95), closes #​22499

🧪 Labs

• VFileUpload: hide-browse should hide divider as well (84f70ef)
• VFileUpload: expose controlRef for internal <input /> (36d3d3c)
• VFileUpload: append instead of replacing files when multiple (c93d2b7)
• VFileUpload: integrate VInput & split internal logic (#​22637) (027ab86)

v4.0.0

Compare Source

v4.0.0 (Revisionist)

Welcome to the v4.0.0 release of Vuetify!

Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by sponsors and backers. If your business depend on Vuetify, please consider joining sponsors and backers on various platforms to help support ongoing development and new features.

❗️ Important Links

• Documentation
• Upgrade Guide
• Report a Bug
• Community Discord

💯 Release notes

🚀 Features

• MD3 typography (#​22557) (311daf4)
• MD3 elevation levels (#​22461) (dfce695), closes #​14198
• grid system overhaul (#​21500) (f6d24a9), closes #​8611
• VAvatar: add badge prop + dot-size for VBadge (#​22496) (cc9f417)
• VCol: syntax for overriding row size (#​22572) (43e8736)
• VRow: smaller density steps (#​22574) (16b944f)
• VSelect/VAutocomplete/VCombobox: add menu-elevation prop (4605987)
• VSnackbarQueue: show multiple snackbars (#​22605) (7248d20), closes #​21927
• display: reduce default breakpoint sizes (#​19759) (853ce33)
• styles: always use css layers (f7123c6), closes #​3400 #​20232
• styles: flatten layer names (#​22460) (47bc400), closes #​22443
• styles: add separate entry points (#​22396) (f00902c), closes #​20100
• styles: cut down CSS reset (#​20960) (ae3e8c9), closes #​17633
• styles: remove overflow-y from reset (27868d5), closes #​1197
• theme: change default theme to 'system' (9c8506c)
• theme: support transparent colors (bb49662), closes #​10299
• theme: remove unimportant option (e8845ff)
• VDatePicker: only emit start and end range values (#​20621) (eef80ad), closes #​9098 #​18701 #​20599
• VForm: unref values in slot props (f92ae7a), closes #​18355
• VImg: pass attributes to the underlying <img> (#​22439) (71e01aa), closes #​18860 #​18907
• VInput: add indent-details prop (#​21265) (f483092), closes #​16679
• VNumberInput: do not clamp value on mounted (#​21826) (4b4bfa5)
• VSelect/Autocomplete/Combobox: rename item to internalItem (2c1ac25), closes #​18354
• VSnackbar: remove multi-line prop (#​22212) (1371aba), closes #​15996

🔧 Bug Fixes

• colors: correct CSS layer name (47d4b70)
• defaults: skip undefined values (2a74859), closes #​17845
• inputs: restore plain/underlined icon alignment (5495cca)
• styles: utilities should override responsive typography (#​22573) (878907f)
• VSnackbarQueue: pause all items when collapsed and hovered (df63fec)
• theme: re-merge default variables when themes is set (a14c763)
• theme: helpers should override theme base (2690877)
• theme: override automatic text color with classes (#​22475) (59b11d5)
• theme: .text- classes always override color from .bg- (7edf33a), closes #​21787
• VContainer: drop dependency on utility class (47ca5c8)
• VCounter: inherit color (aligns with VMessages) (#​22424) (ecd07b9)
• VField: append/prepend should fill height (add5d2d)
• VOverlay: apply scrollbar offset to body and VNavigationDrawer (ec926d7)

🔬 Code Refactoring

• styles: replace !important with layers (7484c81)
• VBtn: remove default text transform (#​21079) (712bdd6)
• VBtn: convert display from grid to flex (41b7768)

---

Configuration

📅 Schedule: Branch creation - Between 12:00 AM and 03:59 AM, only on Monday ( * 0-3 * * 1 ) (UTC), 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.

[cloudflare-workers-and-pages]

Deploying geodatalytics with    Cloudflare Pages

Latest commit:	94c36b2
Status:	✅  Deploy successful!
Preview URL:	https://fa4b1b97.geodatalytics.pages.dev
Branch Preview URL:	https://renovate-vuetify-4-x.geodatalytics.pages.dev

View logs

[brianhelba]

@annehaley I've pushed some code changes to support syntax changes for this update. Can you look at https://renovate-vuetify-4-x.geodatalytics.pages.dev/ and verify that things look correct?

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

[annehaley]

The first thing I notice is the removal of the default text transform on VBtn. Our buttons are no longer all-caps. I suppose it isn't a bad thing, but we'll just have to be more careful about our capitalization. The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

In terms of the code changes, I'm concerned about the replacement of classes like pa-0. We use classes like that all over the place, do we need to change them all? I don't see anything obvious in the release notes to explain this change.

I think it would be wise to ask @faiza-a for her opinion as well, since this upgrade introduces a lot of tiny spacing and sizing changes.

[brianhelba]

The first thing I notice is the removal of the default text transform on VBtn. Our buttons are no longer all-caps. I suppose it isn't a bad thing, but we'll just have to be more careful about our capitalization.

I could restore this, just let me know what you prefer. Personally, I think it's nicer to not be shouted at by my buttons.

The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

I'll investigate.

In terms of the code changes, I'm concerned about the replacement of classes like pa-0. We use classes like that all over the place, do we need to change them all? I don't see anything obvious in the release notes to explain this change.

Vuetify 4 now uses cascade layers for all of its declarations (like pa-0), as mentioned in the release notes.

However, the codebase here uses a mixture of utility classes, custom CSS, custom CSS with !important (I'm listing this separately because it has a different priority and because it's used liberally, which isn't ideal), and inline style= attributes.

See my commit message:

Vuetify 3 utility classes used !important and won over component styles. Vuetify 4 replaced !important with CSS layers, so unlayered component styles now override them. Consolidate the utility class values into the component CSS rules and remove the now-ineffective utility classes from templates.

So, we only have effective style differences in cases where there was previous a conflict between different types of styling. My commit was an attempt to only address conflicts, by moving conflicting things out of utility classes (which tended to be more piecemeal) and into the custom CSS (which seemed to be more authoritative).

I think it would be wise to ask @faiza-a for her opinion as well, since this upgrade introduces a lot of tiny spacing and sizing changes.

Sure. In general, I find that if you want well-behaved (across screen sizes) and consistent-styled CSS, then less is more. Generally, having a few broadly scoped rules tends be more maintainable and effective than trying to control individual pixels everywhere. If it's possible to fix any new issues by removing or generalizing CSS, I think that's ideal.

[brianhelba]

The second thing I notice is that our material symbols icons are not working now. It looks like they added a new API to access those icons. There are also some unnecessary scollbars in some places.

Can you give specific examples of where you see icon and scrollbar differences?

[annehaley]

The scrollbar I noticed is on the lefthand sidebar once a project is selected. I actually think this is just because the vertical padding on the project-row class is too much. We can reduce that to 10px instead of 20px.

As for the icons, they didn't load the first time but now I see them consistently. It may have just failed to fetch them on that first load? So disregard my comment about the material symbols icons.

[brianhelba]

The TypeScript improvements combined with the new Vuetify version have surfaced some type errors here. I'd appreciate any guidance for fixing them.

[brianhelba]

The scrollbar I noticed is on the lefthand sidebar once a project is selected. I actually think this is just because the vertical padding on the project-row class is too much. We can reduce that to 10px instead of 20px.

I'm not seeing this on my screen size (or my attempts to resize). Could you provide a screenshot? The Cloudflare branch preview is nice for this.

Alternatively, if you'd like to push any changes that make this work on your screen size, go ahead.