Merge branch 'master' into fix/v-menu-overlay-background-with-v-input

Author: hanool

packages/docs/src/examples/v-autocomplete/slot-item-and-vbind-props.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-autocomplete :items="items">
+        <template v-slot:item="{ props }">
+          <v-list-item v-bind="props"></v-list-item>
+        </template>
+      </v-autocomplete>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  const items = [
+    ...Array.from({ length: 50 }, (_, i) => ({
+      value: (i + 3).toString().padStart(19, '0'),
+      title: `Mock  ${i + 1}`,
+    })),
+  ]
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      items: Array.from({ length: 50 }, (_, i) => ({
+        value: (i + 3).toString().padStart(19, '0'),
+        title: `Mock ${i + 1}`,
+      })),
+    }),
+  }
+</script>

packages/docs/src/examples/v-text-field/prop-focused.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-text-field v-model="msg" :focused="true" @update:focused=""></v-text-field>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const msg = ref('Hello World!')
+</script>

packages/docs/src/pages/en/components/autocompletes.md

@@ -94,6 +94,11 @@ With the power of slots, you can customize the visual output of the select. In t
 
 <ExamplesExample file="v-autocomplete/slot-item-and-selection" />
 
+When customizing v-autocomplete items with the #item slot, make sure to forward the slot props using v-bind="props".
+This is required for virtual scrolling to work properly — without it, only part of your items may be displayed.
+
+<ExamplesExample file="v-autocomplete/slot-item-and-vbind-props" />
+
 ### Misc
 
 <!--

packages/docs/src/pages/en/components/text-fields.md

@@ -222,6 +222,13 @@ The **variant** prop provides an easy way to customize the style of your text fi
 
 <ExamplesExample file="v-text-field/prop-variant" />
 
+#### Focused
+
+The **focused** prop that sets the initial focus state of the component. It is a model prop, which handles 2 way binding with `focused` and `@update:focused`. This means its value sets the initial state but will be updated internally by focus/blur events.
+If you want to override this behavior (e.g., keep the input always focused), you can bind an empty `@update:focused` handler.
+
+<ExamplesExample file="v-text-field/prop-focused" />
+
 ### Events
 
 #### Icon events

packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx

@@ -344,6 +344,8 @@ export const VSlideGroup = genericComponent<new <T>(
       isSelected: group.isSelected,
     }))
 
+    const hasOverflowOrScroll = computed(() => isOverflowing.value || Math.abs(scrollOffset.value) > 0)
+
     const hasAffixes = computed(() => {
       switch (props.showArrows) {
         // Always show arrows on desktop & mobile
@@ -354,20 +356,20 @@ export const VSlideGroup = genericComponent<new <T>(
 
         // Show arrows on mobile when overflowing.
         // This matches the default 2.2 behavior
-        case true: return isOverflowing.value || Math.abs(scrollOffset.value) > 0
+        case true: return hasOverflowOrScroll.value
 
         // Always show on mobile
         case 'mobile': return (
           mobile.value ||
-          (isOverflowing.value || Math.abs(scrollOffset.value) > 0)
+          hasOverflowOrScroll.value
         )
 
         // https://material.io/components/tabs#scrollable-tabs
         // Always show arrows when
         // overflowed on desktop
         default: return (
           !mobile.value &&
-          (isOverflowing.value || Math.abs(scrollOffset.value) > 0)
+          hasOverflowOrScroll.value
         )
       }
     })
@@ -378,7 +380,7 @@ export const VSlideGroup = genericComponent<new <T>(
     })
 
     const hasNext = computed(() => {
-      if (!containerRef.value) return false
+      if (!containerRef.value || !hasOverflowOrScroll.value) return false
 
       const scrollSize = getScrollSize(isHorizontal.value, containerRef.el)
       const clientSize = getClientSize(isHorizontal.value, containerRef.el)

packages/vuetify/src/composables/__tests__/filter.spec.ts

@@ -64,30 +64,10 @@ describe('filter', () => {
         value: (s: string) => s === '1',
       }
       const items = [
-        {
-          title: 'foo',
-          subtitle: 'bar',
-          value: '1',
-          custom: '1',
-        },
-        {
-          title: 'fizz',
-          subtitle: 'buzz',
-          value: '1',
-          custom: 'bar',
-        },
-        {
-          title: 'foobar',
-          subtitle: 'fizzbuzz',
-          value: '2',
-          custom: 'bar',
-        },
-        {
-          title: 'buzz',
-          subtitle: 'buzz',
-          value: '1',
-          custom: 'buzz',
-        },
+        { title: 'foo', subtitle: 'bar', value: '1', custom: '1' },
+        { title: 'fizz', subtitle: 'buzz', value: '1', custom: 'bar' },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: '2', custom: 'bar' },
+        { title: 'buzz', subtitle: 'buzz', value: '1', custom: 'buzz' },
       ] as any
       const filterKeys = ['title', 'value', 'subtitle', 'custom']
 
@@ -122,26 +102,10 @@ describe('filter', () => {
         value: (s: string) => s === '1',
       }
       const items = [
-        {
-          title: 'foo',
-          subtitle: 'bar',
-          value: '1',
-        },
-        {
-          title: 'fizz',
-          subtitle: 'buzz',
-          value: '1',
-        },
-        {
-          title: 'foobar',
-          subtitle: 'fizzbuzz',
-          value: '2',
-        },
-        {
-          title: 'buzz',
-          subtitle: 'buzz',
-          value: '2',
-        },
+        { title: 'foo', subtitle: 'bar', value: '1' },
+        { title: 'fizz', subtitle: 'buzz', value: '1' },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: '2' },
+        { title: 'buzz', subtitle: 'buzz', value: '2' },
       ] as any
       const filterKeys = ['title', 'value']
 
@@ -161,14 +125,33 @@ describe('filter', () => {
         filterKeys,
         customKeyFilter,
         filterMode: 'intersection',
-      })).toHaveLength(0)
+      })).toHaveLength(2)
 
       expect(filterItems(items, '', {
         filterKeys,
         customKeyFilter,
         filterMode: 'every',
       })).toHaveLength(2)
     })
+
+    // https://github.com/vuetifyjs/vuetify/pull/21876
+    it('should return filtered rows when all columns have filters', () => {
+      const customKeyFilter = {
+        title: (s: string) => s.length < 5,
+        subtitle: (s: string) => s.startsWith('b'),
+        value: (s: any) => Number(s) > 0,
+      }
+      const items = [
+        { title: 'foo', subtitle: 'bar', value: 1 },
+        { title: 'fizz', subtitle: 'buzz', value: 1 },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: 2 },
+      ] as any
+
+      expect(filterItems(items, '', {
+        customKeyFilter,
+        filterMode: 'intersection',
+      })).toHaveLength(2)
+    })
   })
 
   describe('useFilter', () => {

packages/vuetify/src/composables/filter.tsx

@@ -102,12 +102,15 @@ export function filterItems (
     let match: FilterMatch = -1
 
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
+      let hasOnlyCustomFilters = false
+
       if (typeof item === 'object') {
         if (item.type === 'divider' || item.type === 'subheader') {
           continue
         }
 
         const filterKeys = keys || Object.keys(transformed)
+        hasOnlyCustomFilters = filterKeys.length === customFiltersLength
 
         for (const key of filterKeys) {
           const value = getPropertyFromItem(transformed, key)
@@ -146,7 +149,7 @@ export function filterItems (
         options?.filterMode === 'intersection' &&
         (
           customMatchesLength !== customFiltersLength ||
-          !defaultMatchesLength
+          (!defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters)
         )
       ) continue
     }

packages/vuetify/src/composables/nested/nested.ts

@@ -206,7 +206,7 @@ export const useNested = (props: NestedProps) => {
     const path: unknown[] = []
     let parent: unknown = toRaw(id)
 
-    while (parent != null) {
+    while (parent !== undefined) {
       path.unshift(parent)
       parent = parents.value.get(parent)
     }
@@ -358,7 +358,10 @@ export const useNestedItem = (id: MaybeRefOrGetter<unknown>, isDisabled: MaybeRe
   const parent = inject(VNestedSymbol, emptyNested)
 
   const uidSymbol = Symbol('nested item')
-  const computedId = computed(() => toRaw(toValue(id)) ?? uidSymbol)
+  const computedId = computed(() => {
+    const idValue = toRaw(toValue(id))
+    return idValue !== undefined ? idValue : uidSymbol
+  })
 
   const item = {
     ...parent,

packages/vuetify/src/labs/VDateInput/VDateInput.tsx

@@ -16,10 +16,11 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref, shallowRef, watch } from 'vue'
-import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
+import { genericComponent, omit, pick, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
+import type { VDatePickerSlots } from '@/components/VDatePicker/VDatePicker'
 import type { StrategyProps } from '@/components/VOverlay/locationStrategies'
 import type { VTextFieldSlots } from '@/components/VTextField/VTextField'
 import type { GenericProps } from '@/util'
@@ -31,10 +32,11 @@ export type VDateInputActionsSlot = {
   isPristine: boolean
 }
 
-export type VDateInputSlots = Omit<VTextFieldSlots, 'default'> & {
-  actions: VDateInputActionsSlot
-  default: never
-}
+export type VDateInputSlots = Omit<VTextFieldSlots, 'default'> &
+  Pick<VDatePickerSlots, 'title' | 'header' | 'day' | 'month' | 'year'> & {
+    actions: VDateInputActionsSlot
+    default: never
+  }
 
 export const makeVDateInputProps = propsFactory({
   displayFormat: {
@@ -245,6 +247,7 @@ export const VDateInput = genericComponent<new <
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']))
+      const datePickerSlots = pick(slots, ['title', 'header', 'day', 'month', 'year'])
       const textFieldProps = VTextField.filterProps(omit(props, ['placeholder']))
 
       return (
@@ -312,6 +315,7 @@ export const VDateInput = genericComponent<new <
                             onMousedown={ (e: MouseEvent) => e.preventDefault() }
                           >
                             {{
+                              ...datePickerSlots,
                               actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,
                             }}
                           </VDatePicker>