Merge branch 'master' into fix-20946

.github/workflows/ci.yml

@@ -154,8 +154,7 @@ jobs:
   publish-docs:
     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'
+    environment: ${{ github.ref_name }}
     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.11"
+}

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.9",
+  "version": "3.7.11",
   "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.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -87,7 +87,7 @@
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-pwa": "^0.17.4",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-plugin-vuetify": "^2.0.4",
+    "vite-plugin-vuetify": "^2.1.0",
     "vue-tsc": "^2.0.29"
   },
   "publishConfig": {

packages/vuetify/.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'no-console': 'error',
     'no-debugger': 'error',
+    'no-labels': 'off',
 
     // 'vue/html-self-closing': 'off',
     // 'vue/html-closing-bracket-spacing': 'off',

packages/vuetify/build/rollup.config.mjs

@@ -112,7 +112,7 @@ export default [
               (await this.resolve('src/components/index.ts')).id
             )
             await Promise.all(importedIds.map(async id => {
-              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.mjs')
+              const importFrom = path.relative(srcDir, id).replace(/\/index\.ts$/, '')
 
               if (await this.resolve(path.join(id, '../_variables.scss')) != null) {
                 variables.push(id)
@@ -247,7 +247,7 @@ export default [
               (await this.resolve('src/labs/components.ts')).id
             )
             await Promise.all(importedIds.map(async id => {
-              const importFrom = path.relative(srcDir, id).replace(/\.ts$/, '.mjs')
+              const importFrom = path.relative(srcDir, id).replace(/\/index\.ts$/, '')
 
               if (await this.resolve(path.join(id, '../_variables.scss')) != null) {
                 variables.push(id)

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.7.9",
+  "version": "3.7.11",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"
@@ -184,9 +184,9 @@
   },
   "peerDependencies": {
     "typescript": ">=4.7",
-    "vite-plugin-vuetify": ">=1.0.0",
+    "vite-plugin-vuetify": ">=2.1.0",
     "vue": "^3.3.0",
-    "webpack-plugin-vuetify": ">=2.0.0"
+    "webpack-plugin-vuetify": ">=3.1.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -21,14 +21,14 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
-import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
   checkPrintable,
+  deepEqual,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -151,7 +151,6 @@ export const VAutocomplete = genericComponent<new <
     const label = computed(() => menu.value ? props.closeText : props.openText)
     const { items, transformIn, transformOut } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(color)
-    const { isMousedown } = useIsMousedown()
     const search = useProxiedModel(props, 'search', '')
     const model = useProxiedModel(
       props,
@@ -348,7 +347,7 @@ export const VAutocomplete = genericComponent<new <
       if (!item || item.props.disabled) return
 
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
+        const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value))
         const add = set == null ? !~index : set
 
         if (~index) {
@@ -375,12 +374,6 @@ export const VAutocomplete = genericComponent<new <
       }
     }
 
-    function onBlur (e: FocusEvent) {
-      if (!isMousedown.value) {
-        menu.value = false
-      }
-    }
-
     watch(isFocused, (val, oldVal) => {
       if (val === oldVal) return
 
@@ -392,6 +385,7 @@ export const VAutocomplete = genericComponent<new <
         nextTick(() => isSelecting.value = false)
       } else {
         if (!props.multiple && search.value == null) model.value = []
+        menu.value = false
         if (!model.value.some(({ title }) => title === search.value)) search.value = ''
         selectionIndex.value = -1
       }
@@ -460,7 +454,6 @@ export const VAutocomplete = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
-          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -22,14 +22,14 @@ import { useForm } from '@/composables/form'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { transformItem, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
-import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
   checkPrintable,
+  deepEqual,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -167,7 +167,6 @@ export const VCombobox = genericComponent<new <
       }
     )
     const form = useForm(props)
-    const { isMousedown } = useIsMousedown()
 
     const hasChips = computed(() => !!(props.chips || slots.chip))
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
@@ -378,19 +377,12 @@ export const VCombobox = genericComponent<new <
         vTextFieldRef.value?.focus()
       }
     }
-
-    function onBlur (e: FocusEvent) {
-      if (!isMousedown.value) {
-        menu.value = false
-      }
-    }
-
     /** @param set - null means toggle */
     function select (item: ListItem | undefined, set: boolean | null = true) {
       if (!item || item.props.disabled) return
 
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
+        const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value))
         const add = set == null ? !~index : set
 
         if (~index) {
@@ -434,6 +426,7 @@ export const VCombobox = genericComponent<new <
       if (val || val === oldVal) return
 
       selectionIndex.value = -1
+      menu.value = false
 
       if (search.value) {
         if (props.multiple) {
@@ -454,7 +447,7 @@ export const VCombobox = genericComponent<new <
     watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(
-          item => model.value.some(s => props.valueComparator(s.value, item.value))
+          item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value))
         )
         IN_BROWSER && window.requestAnimationFrame(() => {
           index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index)
@@ -505,7 +498,6 @@ export const VCombobox = genericComponent<new <
           readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
-          onBlur={ onBlur }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
         >

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/VList/VList.tsx

@@ -23,7 +23,16 @@ import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
 import { computed, ref, shallowRef, toRef } from 'vue'
-import { EventProp, focusChild, genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from '@/util'
+import {
+  EventProp,
+  focusChild,
+  genericComponent,
+  getPropertyFromItem,
+  isPrimitive,
+  omit,
+  propsFactory,
+  useRender,
+} from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -35,10 +44,6 @@ export interface InternalListItem<T = any> extends ListItem<T> {
   type?: 'item' | 'subheader' | 'divider'
 }
 
-function isPrimitive (value: unknown): value is string | number | boolean {
-  return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean'
-}
-
 function transformItem (props: ItemProps & { itemType?: string }, item: any): InternalListItem {
   const type = getPropertyFromItem(item, props.itemType, 'item')
   const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle)

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -20,14 +20,14 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { IconValue } from '@/composables/icons'
 import { makeItemsProps, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
-import { useIsMousedown } from '@/composables/mousedown'
 import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
   checkPrintable,
+  deepEqual,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -169,7 +169,6 @@ export const VSelect = genericComponent<new <
         : model.value.length
     })
     const form = useForm(props)
-    const { isMousedown } = useIsMousedown()
     const selectedValues = computed(() => model.value.map(selection => selection.value))
     const isFocused = shallowRef(false)
     const label = computed(() => menu.value ? props.closeText : props.openText)
@@ -179,7 +178,7 @@ export const VSelect = genericComponent<new <
 
     const displayItems = computed(() => {
       if (props.hideSelected) {
-        return items.value.filter(item => !model.value.some(s => props.valueComparator(s, item)))
+        return items.value.filter(item => !model.value.some(s => (props.valueComparator || deepEqual)(s, item)))
       }
       return items.value
     })
@@ -264,7 +263,7 @@ export const VSelect = genericComponent<new <
       if (item.props.disabled) return
 
       if (props.multiple) {
-        const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))
+        const index = model.value.findIndex(selection => (props.valueComparator || deepEqual)(selection.value, item.value))
         const add = set == null ? !~index : set
 
         if (~index) {
@@ -284,7 +283,7 @@ export const VSelect = genericComponent<new <
       }
     }
     function onBlur (e: FocusEvent) {
-      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement) && !isMousedown.value) {
+      if (!listRef.value?.$el.contains(e.relatedTarget as HTMLElement)) {
         menu.value = false
       }
     }
@@ -316,7 +315,7 @@ export const VSelect = genericComponent<new <
     watch(menu, () => {
       if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(
-          item => model.value.some(s => props.valueComparator(s.value, item.value))
+          item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value))
         )
         IN_BROWSER && window.requestAnimationFrame(() => {
           index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index)

packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.browser.tsx

@@ -590,6 +590,47 @@ describe('VSelect', () => {
     await expect.poll(() => screen.queryByRole('listbox')).toBeNull()
   })
 
+  describe('reactivity', () => {
+    it('adds a new item', async () => {
+      const items = ref(['Foo'])
+      const { element } = render(() => (
+        <VSelect items={ items.value } />
+      ))
+
+      await userEvent.click(element)
+      await expect.poll(() => screen.queryByRole('listbox')).toBeInTheDocument()
+
+      items.value.push('Bar')
+      await expect.poll(() => screen.getByText('Bar')).toBeInTheDocument()
+    })
+
+    it('removes an item', async () => {
+      const items = ref(['Foo', 'Bar'])
+      const { element } = render(() => (
+        <VSelect items={ items.value } />
+      ))
+
+      await userEvent.click(element)
+      await expect.poll(() => screen.queryByRole('listbox')).toBeInTheDocument()
+
+      items.value.splice(1, 1)
+      await expect.element(screen.getByText('Bar')).not.toBeInTheDocument()
+    })
+
+    it('updates an item title', async () => {
+      const items = ref([{ title: 'Foo' }])
+      const { element } = render(() => (
+        <VSelect items={ items.value } />
+      ))
+
+      await userEvent.click(element)
+      await expect.poll(() => screen.queryByRole('listbox')).toBeInTheDocument()
+
+      items.value[0].title = 'Bar'
+      await expect.poll(() => screen.getByText('Bar')).toBeInTheDocument()
+    })
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })