Merge branch 'master' into haviles04/v-select-header-slot

Author: Haviles04

packages/docs/src/components/app/search/SearchDialog.vue

@@ -159,7 +159,7 @@
   function transformItems (items: any[]) {
     // const sorted = sortItems([...items], ['hierarchy.lvl0', 'hierarchy.lvl1'], [false, false], locale)
     items = items.map(item => {
-      const url = new URL(item.url)
+      const url = new URL(item.url_without_variables)
 
       return {
         ...item,

packages/docs/src/components/examples/Example.vue

@@ -246,7 +246,6 @@
       path: 'edit-in-playground',
       href: playgroundLink.value,
       target: '_blank',
-      hide: xs.value,
     },
     {
       icon: '$vuetify-figma',

packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

@@ -143,7 +143,7 @@ export const VDataTableRows = genericComponent<new <T>(
             }
 
             const slotProps = {
-              index,
+              index: item.virtualIndex ?? index,
               item: item.raw,
               internalItem: item,
               columns: columns.value,

packages/vuetify/src/components/VDataTable/VDataTableVirtual.tsx

@@ -141,7 +141,14 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
       calculateVisibleItems,
       scrollToIndex,
     } = useVirtual(props, flatItems)
-    const displayItems = computed(() => computedItems.value.map(item => item.raw))
+
+    const displayItems = computed(() =>
+      computedItems.value
+        .map(item => ({
+          ...item.raw,
+          virtualIndex: item.index,
+        }))
+    )
 
     useOptions({
       sortBy,
@@ -249,7 +256,7 @@ export const VDataTableVirtual = genericComponent<new <T extends readonly any[],
                                     { ...itemSlotProps.props }
                                     ref={ itemRef }
                                     key={ itemSlotProps.internalItem.index }
-                                    index={ itemSlotProps.internalItem.index }
+                                    index={ itemSlotProps.index }
                                     v-slots={ slots }
                                   />
                                 )

packages/vuetify/src/components/VDataTable/types.ts

@@ -49,6 +49,7 @@ export type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'c
 export interface DataTableItem<T = any> extends Omit<InternalItem<T>, 'type'>, GroupableItem<T>, SelectableItem {
   key: any
   index: number
+  virtualIndex?: number
   columns: {
     [key: string]: any
   }

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

@@ -12,7 +12,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import vIntersect from '@/directives/intersect'
 
 // Utilities
-import { computed, watchEffect } from 'vue'
+import { computed, shallowRef, watchEffect } from 'vue'
 import { convertToUnit, createRange, genericComponent, propsFactory, templateRef, useRender } from '@/util'
 
 // Types
@@ -60,6 +60,7 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
   setup (props, { emit, slots }) {
     const adapter = useDate()
     const model = useProxiedModel(props, 'modelValue')
+    const hasFocusedItem = shallowRef(false)
     const years = computed(() => {
       const year = adapter.getYear(adapter.date())
 
@@ -97,7 +98,6 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
     const yearRef = templateRef()
 
     function focusSelectedYear () {
-      yearRef.el?.focus()
       yearRef.el?.scrollIntoView({ block: 'center' })
     }
 
@@ -123,7 +123,13 @@ export const VDatePickerYears = genericComponent<VDatePickerYearsSlots>()({
           height: convertToUnit(props.height),
         }}
       >
-        <div class="v-date-picker-years__content">
+        <div
+          class="v-date-picker-years__content"
+          onFocus={ () => yearRef.el?.focus() }
+          onFocusin={ () => hasFocusedItem.value = true }
+          onFocusout={ () => hasFocusedItem.value = false }
+          tabindex={ hasFocusedItem.value ? -1 : 0 }
+        >
           { years.value.map((year, i) => {
             const btnProps = {
               ref: model.value === year.value ? yearRef : undefined,

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

@@ -92,6 +92,7 @@ type NestedProvide = {
     itemsRegistration: Ref<ItemsRegistrationType>
     register: (id: unknown, parentId: unknown, isDisabled: boolean, isGroup?: boolean) => void
     unregister: (id: unknown) => void
+    updateDisabled: (id: unknown, isDisabled: boolean) => void
     open: (id: unknown, value: boolean, event?: Event) => void
     activate: (id: unknown, value: boolean, event?: Event) => void
     select: (id: unknown, value: boolean, event?: Event) => void
@@ -108,6 +109,7 @@ export const emptyNested: NestedProvide = {
     itemsRegistration: ref('render'),
     register: () => null,
     unregister: () => null,
+    updateDisabled: () => null,
     children: ref(new Map()),
     parents: ref(new Map()),
     disabled: ref(new Set()),
@@ -330,6 +332,19 @@ export const useNested = (props: NestedProps, items: Ref<ListItem[]>, returnObje
         parents.value.delete(id)
         itemsUpdatePropagation()
       },
+      updateDisabled: (id, isDisabled) => {
+        if (isDisabled) {
+          disabled.value.add(id)
+        } else {
+          disabled.value.delete(id)
+        }
+        // classic selection requires refresh to re-evaluate on/off/indeterminate but
+        // currently it is only run for selection interactions, so it will set new disabled
+        // to "off" and the visual state becomes out of sync
+        // -- selected.value = new Map(selected.value)
+        // it is not clear if the framework should un-select when disabled changed to true
+        // more discussion is needed
+      },
       open: (id, value, event) => {
         vm.emit('click:open', { id, value, path: getPath(id), event })
 
@@ -462,6 +477,10 @@ export const useNestedItem = (id: MaybeRefOrGetter<unknown>, isDisabled: MaybeRe
     })
   })
 
+  watch(() => toValue(isDisabled), val => {
+    parent.root.updateDisabled(computedId.value, val)
+  })
+
   isGroup && provide(VNestedSymbol, item)
 
   return item