Merge branch 'master' into dev

.github/workflows/ci.yml

@@ -155,7 +155,6 @@ jobs:
     needs: [lint, test-unit, build-docs]
     runs-on: ubuntu-24.04
     environment: Production
-    if: github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.9"
+  "version": "3.7.10"
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.9",
+  "version": "3.7.10",
   "private": true,
   "description": "",
   "scripts": {

packages/api-generator/src/locale/en/VStepperVerticalItem.json

@@ -2,6 +2,6 @@
   "events": {
     "click:finish": "Event emitted when clicking the finish button",
     "click:next": "Event emitted when clicking the next button",
-    "click:previous": "Event emitted when clicking the previous button"
+    "click:prev": "Event emitted when clicking the previous button"
   }
 }

packages/docs/package.json

@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.7.9",
+  "version": "3.7.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.9",
+  "version": "3.7.10",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

packages/vuetify/src/components/VDatePicker/VDatePicker.tsx

@@ -160,8 +160,9 @@ export const VDatePicker = genericComponent<new <
       } else {
         let _date = adapter.date()
 
-        _date = adapter.setYear(_date, year.value)
+        _date = adapter.startOfMonth(_date)
         _date = adapter.setMonth(_date, month.value)
+        _date = adapter.setYear(_date, year.value)
 
         if (minDate.value) {
           const date = adapter.addDays(adapter.startOfMonth(_date), -1)

packages/vuetify/src/components/VTabs/VTabs.tsx

@@ -17,26 +17,27 @@ import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed, toRef } from 'vue'
+import { VTabsSymbol } from './shared'
 import { convertToUnit, genericComponent, isObject, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
-import { VTabsSymbol } from './shared'
+import type { GenericProps } from '@/util'
 
 export type TabItem = string | number | Record<string, any>
 
-export type VTabsSlot = {
-  item: TabItem
+export type VTabsSlot<T> = {
+  item: T
 }
 
-export type VTabsSlots = {
+export type VTabsSlots<T> = {
   default: never
-  tab: VTabsSlot
-  item: VTabsSlot
+  tab: VTabsSlot<T>
+  item: VTabsSlot<T>
   window: never
 } & {
-  [key: `tab.${string}`]: VTabsSlot
-  [key: `item.${string}`]: VTabsSlot
+  [key: `tab.${string}`]: VTabsSlot<T>
+  [key: `item.${string}`]: VTabsSlot<T>
 }
 
 function parseItems (items: readonly TabItem[] | undefined) {
@@ -78,7 +79,12 @@ export const makeVTabsProps = propsFactory({
   ...makeTagProps(),
 }, 'VTabs')
 
-export const VTabs = genericComponent<VTabsSlots>()({
+export const VTabs = genericComponent<new <T = TabItem>(
+  props: {
+    items?: T
+  },
+  slots: VTabsSlots<T>
+) => GenericProps<typeof props, typeof slots>>()({
   name: 'VTabs',
 
   props: makeVTabsProps(),

packages/vuetify/src/components/VTextField/VTextField.tsx

@@ -199,6 +199,7 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                 { ...fieldProps }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }
+                clearable={ props.clearable && !isDisabled.value && !isReadonly.value }
                 dirty={ isDirty.value || props.dirty }
                 disabled={ isDisabled.value }
                 focused={ isFocused.value }

packages/vuetify/src/components/transitions/expand-transition.ts

@@ -26,7 +26,8 @@ export default function (expandedParentClass = '', x = false) {
     },
 
     onEnter (el: HTMLExpandElement) {
-      const initialStyle = el._initialStyle!
+      const initialStyle = el._initialStyle
+      if (!initialStyle) return
 
       el.style.setProperty('transition', 'none', 'important')
       // Hide overflow to account for collapsed margins in the calculated height
@@ -77,8 +78,10 @@ export default function (expandedParentClass = '', x = false) {
   }
 
   function resetStyles (el: HTMLExpandElement) {
-    const size = el._initialStyle![sizeProperty]
-    el.style.overflow = el._initialStyle!.overflow
+    if (!el._initialStyle) return
+
+    const size = el._initialStyle[sizeProperty]
+    el.style.overflow = el._initialStyle.overflow
     if (size != null) el.style[sizeProperty] = size
     delete el._initialStyle
   }

packages/vuetify/src/labs/VTreeview/VTreeview.tsx

@@ -36,7 +36,7 @@ export const makeVTreeviewProps = propsFactory({
     collapseIcon: '$treeviewCollapse',
     expandIcon: '$treeviewExpand',
     slim: true,
-  }), ['itemType', 'nav', 'openStrategy']),
+  }), ['nav', 'openStrategy']),
   modelValue: {
     type: Array,
     default: () => ([]),

packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx

@@ -2,6 +2,7 @@
 import { VTreeviewGroup } from './VTreeviewGroup'
 import { VTreeviewItem } from './VTreeviewItem'
 import { VCheckboxBtn } from '@/components/VCheckbox'
+import { VDivider } from '@/components/VDivider'
 
 // Composables
 import { IconValue } from '@/composables/icons'
@@ -29,6 +30,9 @@ export type VTreeviewChildrenSlots<T> = {
     item: T
     internalItem: InternalListItem<T>
   }
+  divider: { props: InternalListItem['props'] }
+  subheader: { props: InternalListItem['props'] }
+  header: { props: InternalListItem['props'] }
 }
 
 export const makeVTreeviewChildrenProps = propsFactory({
@@ -90,6 +94,12 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
     }
 
     return () => slots.default?.() ?? props.items?.map(item => {
+      if (item.type === 'divider') {
+        return slots.divider?.({ props: item.props }) ?? (
+          <VDivider { ...item.props } />
+        )
+      }
+
       const { children, props: itemProps } = item
       const loading = isLoading.has(item.value)
       const slotsWithItem = {
@@ -122,6 +132,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
         ),
         append: slots.append ? slotProps => slots.append?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
         title: slots.title ? slotProps => slots.title?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
+        subtitle: slots.subtitle ? slotProps => slots.subtitle?.({ ...slotProps, item: item.raw, internalItem: item }) : undefined,
       } satisfies VTreeviewItem['$props']['$children']
 
       const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps)

packages/vuetify/src/locale/da.ts

@@ -38,13 +38,13 @@ export default {
   datePicker: {
     itemsSelected: '{0} selected',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Vælg datoer',
+      header: 'Indtast datoer',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Vælg dato',
+    header: 'Indtast dato',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Indtast dato',
     },
   },
   noDataText: 'Ingen data tilgængelig',

packages/vuetify/src/locale/de.ts

@@ -70,9 +70,9 @@ export default {
     counterSize: '{0} Dateien ({1} gesamt)',
   },
   fileUpload: {
-    title: 'Drag and drop files here',
-    divider: 'or',
-    browse: 'Browse Files',
+    title: 'Datei hier ablegen',
+    divider: 'oder',
+    browse: 'Dateien durchsuchen',
   },
   timePicker: {
     am: 'AM',

packages/vuetify/src/locale/fi.ts

@@ -38,13 +38,13 @@ export default {
   datePicker: {
     itemsSelected: '{0} selected',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Valitse päivämäärät',
+      header: 'Syötä päivämäärät',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Valitse päivämäärä',
+    header: 'Syötä päivämäärä',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Syötä päivämäärä',
     },
   },
   noDataText: 'Ei dataa',