Merge branch 'dev' into haviles04/date-picker-readonly

Author: Haviles04

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

@@ -10,6 +10,8 @@
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",
     "link": "Applies `v-list-item` hover styles. Useful when using the item is an _activator_.",
     "nav": "An alternative styling that reduces `v-list-item` width and rounds the corners. Typically used with **[v-navigation-drawer](/components/navigation-drawers)**.",
+    "navigationIndex": "Specifies the currently selected navigation index when using `navigationStrategy=\"track\"`. Can be used with `v-model:navigationIndex` for two-way binding. Items at this index receive visual keyboard focus styling and automatic scrolling. Note: Only works with the `items` prop, not with slotted items.",
+    "navigationStrategy": "Determines keyboard navigation behavior. **focus** (default) moves DOM focus to items, suitable for traditional lists. **track** provides visual keyboard focus without moving DOM focus, ideal for command palettes and autocomplete where an external element retains focus. When track mode is active, items automatically receive `tabindex=\"-1\"`, proper `aria-activedescendant` is set on the list container, and keyboard-focused items display focus-visible styling with auto-scrolling.",
     "subheader": "Removes the top padding from `v-list-subheader` components. When used as a **String**, renders a subheader for you.",
     "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars within slim list items to create a more compact visual representation.",
     "prependGap": "Sets the horizontal spacing between prepend slot and the main content within list item. Also affects indent to ensure expected alignment of group children.",
@@ -23,6 +25,7 @@
     "click:open": "Emitted when the list item is opened.",
     "click:select": "Emitted when the list item is selected.",
     "update:activated": "Emitted when the list item is activated.",
+    "update:navigationIndex": "Emitted when keyboard navigation occurs in `navigationStrategy=\"track\"`. The event payload is the new index of the selected item. Automatically skips non-selectable items like dividers and subheaders.",
     "update:opened": "Emitted when the list item is opened.",
     "update:selected": "Emitted when the list item is selected."
   },
@@ -39,6 +42,7 @@
     "children": "The nested list items within the component.",
     "focus": "Focus the list item.",
     "getPath": "Get the position of an item within the nested structure.",
+    "navigationIndex": "A computed ref that returns the current navigation index when using `navigationStrategy=\"track\"`. Returns -1 when no item is selected or when using `navigationStrategy=\"focus\"`.",
     "open": "Open the list item.",
     "parents": "The parent list items within the component."
   }

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

@@ -8,7 +8,8 @@
     "value": "The value used for selection. Obtained from [`v-list`](/api/v-list)'s `v-model:selected` when the item is selected.",
     "lines": "The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.",
     "nav": "Reduces the width v-list-item takes up as well as adding a border radius.",
-    "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation."
+    "slim": "Reduces horizontal spacing for badges, icons, tooltips, and avatars to create a more compact visual representation.",
+    "tabindex": "Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy=\"track\"` to prevent Tab key navigation into items."
   },
   "exposed": {
     "activate": "Activate the list item.",

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

@@ -5,6 +5,6 @@
     "opened": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.",
     "openStrategy": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected.",
     "selected": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.",
-    "selectStrategy": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model."
+    "selectStrategy": "Affects how items with children behave when selected.\n- **leaf:** Only leaf nodes (items without children) can be selected.\n- **independent:** All nodes can be selected whether they have children or not.\n- **classic:** Selecting a parent node will cause all children to be selected, parent nodes will be displayed as selected if all their descendants are selected. Only leaf nodes will be added to the model.\n- **trunk**: Same as classic but if all of a node's children are selected then only that node will be added to the model.\n- **branch**: Same as classic but if any of a node's children are selected then that node will also be added to the model."
   }
 }

packages/docs/src/data/new-in.json

@@ -239,6 +239,11 @@
       "autocomplete": "3.10.0"
     }
   },
+  "VOtpInput": {
+    "props": {
+      "density": "3.12.0"
+    }
+  },
   "VOverlay": {
     "props": {
       "captureFocus": "3.11.0",

packages/docs/src/examples/v-treeview/prop-selection-type.vue

@@ -3,7 +3,7 @@
     <v-container fluid>
       <v-select
         v-model="strategy"
-        :items="['leaf', 'single-leaf', 'independent', 'single-independent', 'classic']"
+        :items="['leaf', 'single-leaf', 'independent', 'single-independent', 'classic', 'trunk', 'branch']"
         label="Selection type"
       ></v-select>
 

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

@@ -112,7 +112,16 @@ You can control the color of the selected node checkbox.
 
 #### Selection type
 
-Treeview now supports two different selection types. The default type is **'leaf'**, which will only include leaf nodes in the v-model array, but will render parent nodes as either partially or fully selected. The alternative mode is **'independent'**, which allows one to select parent nodes, but each node is independent of its parent and children.
+Treeview supports several selection modes:
+
+- **leaf** (default): Limits selection to items without children.
+- **independent**: Lets you select any node, with no parent-child linkage at all.
+- **classic**: Selecting a parent selects all descendants, and parent nodes show as selected only when all their descendants are selected. Only leaf nodes are added to the model.
+
+Classic has two variants that are displayed the same way but with slightly different v-model behavior:
+
+- **branch**: Any parent node with at least one selected descendant is also added to the model.
+- **trunk**: If all children are selected only the parent node is added to the model.
 
 <ExamplesExample file="v-treeview/prop-selection-type" />
 

packages/vuetify/src/components/VList/VList.tsx

@@ -16,13 +16,14 @@ import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { IconValue } from '@/composables/icons'
 import { makeItemsProps } from '@/composables/list-items'
 import { makeNestedProps, useNested } from '@/composables/nested/nested'
+import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
-import { computed, ref, shallowRef, toRef } from 'vue'
+import { computed, ref, shallowRef, toRef, useId, watch } from 'vue'
 import {
   convertToUnit,
   EventProp,
@@ -108,6 +109,11 @@ export const makeVListProps = propsFactory({
   prependGap: [Number, String],
   indent: [Number, String],
   nav: Boolean,
+  navigationStrategy: {
+    type: String as PropType<'focus' | 'track'>,
+    default: 'focus',
+  },
+  navigationIndex: Number,
 
   'onClick:open': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
   'onClick:select': EventProp<[{ id: unknown, value: boolean, path: unknown[] }]>(),
@@ -158,12 +164,13 @@ export const VList = genericComponent<new <
     'update:selected': (value: unknown) => true,
     'update:activated': (value: unknown) => true,
     'update:opened': (value: unknown) => true,
+    'update:navigationIndex': (value: number) => true,
     'click:open': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:activate': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
     'click:select': (value: { id: unknown, value: boolean, path: unknown[] }) => true,
   },
 
-  setup (props, { slots }) {
+  setup (props, { slots, emit }) {
     const { items } = useListItems(props)
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)
@@ -172,16 +179,39 @@ export const VList = genericComponent<new <
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
-    const { children, open, parents, select, getPath } = useNested(props, items, () => props.returnObject)
+
+    const { children, open, parents, select, getPath } = useNested(props, {
+      items,
+      returnObject: toRef(() => props.returnObject),
+      scrollToActive: toRef(() => props.navigationStrategy === 'track'),
+    })
 
     const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined)
     const activeColor = toRef(() => props.activeColor)
     const baseColor = toRef(() => props.baseColor)
     const color = toRef(() => props.color)
     const isSelectable = toRef(() => (props.selectable || props.activatable))
 
+    const navigationIndex = useProxiedModel(
+      props,
+      'navigationIndex',
+      -1,
+      v => v ?? -1
+    )
+
+    const uid = useId()
+
     createList({
       filterable: props.filterable,
+      trackingIndex: navigationIndex,
+      navigationStrategy: toRef(() => props.navigationStrategy),
+      uid,
+    })
+
+    watch(items, () => {
+      if (props.navigationStrategy === 'track') {
+        navigationIndex.value = -1
+      }
     })
 
     provideDefaults({
@@ -203,11 +233,13 @@ export const VList = genericComponent<new <
         nav: toRef(() => props.nav),
         slim: toRef(() => props.slim),
         variant: toRef(() => props.variant),
+        tabindex: toRef(() => props.navigationStrategy === 'track' ? -1 : undefined),
       },
     })
 
     const isFocused = shallowRef(false)
     const contentRef = ref<HTMLElement>()
+
     function onFocusin (e: FocusEvent) {
       isFocused.value = true
     }
@@ -217,12 +249,66 @@ export const VList = genericComponent<new <
     }
 
     function onFocus (e: FocusEvent) {
-      if (
+      if (props.navigationStrategy === 'track') {
+        if (!~navigationIndex.value) {
+          navigationIndex.value = getNextIndex('first')
+        }
+      } else if (
         !isFocused.value &&
         !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget as Node))
       ) focus()
     }
 
+    function onBlur () {
+      if (props.navigationStrategy === 'track') {
+        navigationIndex.value = -1
+      }
+    }
+
+    function getNavigationDirection (key: string): 'next' | 'prev' | 'first' | 'last' | null {
+      switch (key) {
+        case 'ArrowDown': return 'next'
+        case 'ArrowUp': return 'prev'
+        case 'Home': return 'first'
+        case 'End': return 'last'
+        default: return null
+      }
+    }
+
+    function getNextIndex (direction: 'next' | 'prev' | 'first' | 'last'): number {
+      const itemCount = items.value.length
+      if (itemCount === 0) return -1
+
+      let nextIndex: number
+
+      if (direction === 'first') {
+        nextIndex = 0
+      } else if (direction === 'last') {
+        nextIndex = itemCount - 1
+      } else {
+        nextIndex = navigationIndex.value + (direction === 'next' ? 1 : -1)
+
+        if (nextIndex < 0) nextIndex = itemCount - 1
+        if (nextIndex >= itemCount) nextIndex = 0
+      }
+
+      const startIndex = nextIndex
+      let attempts = 0
+      while (attempts < itemCount) {
+        const item = items.value[nextIndex]
+        if (item && item.type !== 'divider' && item.type !== 'subheader') {
+          return nextIndex
+        }
+        nextIndex += direction === 'next' || direction === 'first' ? 1 : -1
+        if (nextIndex < 0) nextIndex = itemCount - 1
+        if (nextIndex >= itemCount) nextIndex = 0
+        if (nextIndex === startIndex) return -1
+        attempts++
+      }
+
+      return -1
+    }
+
     function onKeydown (e: KeyboardEvent) {
       const target = e.target as HTMLElement
 
@@ -232,19 +318,19 @@ export const VList = genericComponent<new <
         return
       }
 
-      if (e.key === 'ArrowDown') {
-        focus('next')
-      } else if (e.key === 'ArrowUp') {
-        focus('prev')
-      } else if (e.key === 'Home') {
-        focus('first')
-      } else if (e.key === 'End') {
-        focus('last')
-      } else {
-        return
+      const direction = getNavigationDirection(e.key)
+
+      if (direction !== null) {
+        e.preventDefault()
+        if (props.navigationStrategy === 'track') {
+          const nextIndex = getNextIndex(direction)
+          if (nextIndex !== -1) {
+            navigationIndex.value = nextIndex
+          }
+        } else {
+          focus(direction)
+        }
       }
-
-      e.preventDefault()
     }
 
     function onMousedown (e: MouseEvent) {
@@ -294,10 +380,15 @@ export const VList = genericComponent<new <
           ]}
           tabindex={ props.disabled ? -1 : 0 }
           role={ isSelectable.value ? 'listbox' : 'list' }
-          aria-activedescendant={ undefined }
+          aria-activedescendant={
+            props.navigationStrategy === 'track' && navigationIndex.value >= 0
+              ? `v-list-item-${uid}-${navigationIndex.value}`
+              : undefined
+          }
           onFocusin={ onFocusin }
           onFocusout={ onFocusout }
           onFocus={ onFocus }
+          onBlur={ onBlur }
           onKeydown={ onKeydown }
           onMousedown={ onMousedown }
         >
@@ -317,6 +408,7 @@ export const VList = genericComponent<new <
       children,
       parents,
       getPath,
+      navigationIndex,
     }
   },
 })

packages/vuetify/src/components/VList/VListChildren.tsx

@@ -19,7 +19,7 @@ export type VListChildrenSlots<T> = {
   [K in keyof Omit<VListItemSlots, 'default'>]: VListItemSlots[K] & { item: T }
 } & {
   default: never
-  item: { props: InternalListItem['props'] }
+  item: { props: InternalListItem['props'] & { index: number } }
   divider: { props: InternalListItem['props'] }
   subheader: { props: InternalListItem['props'] }
   header: { props: InternalListItem['props'] }
@@ -44,7 +44,7 @@ export const VListChildren = genericComponent<new <T extends InternalListItem>(
   setup (props, { slots }) {
     createList()
 
-    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }) => {
+    return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, type, raw: item }, index) => {
       if (type === 'divider') {
         return slots.divider?.({ props: itemProps }) ?? (
           <VDivider { ...itemProps } />
@@ -83,7 +83,7 @@ export const VListChildren = genericComponent<new <T extends InternalListItem>(
               return slots.header
                 ? slots.header({ props: listItemProps })
                 : (
-                  <VListItem { ...listItemProps } v-slots={ slotsWithItem } />
+                  <VListItem { ...listItemProps } index={ index } v-slots={ slotsWithItem } />
                 )
             },
             default: () => (
@@ -96,9 +96,10 @@ export const VListChildren = genericComponent<new <T extends InternalListItem>(
           }}
         </VListGroup>
       ) : (
-        slots.item ? slots.item({ props: itemProps }) : (
+        slots.item ? slots.item({ props: { ...itemProps, index } }) : (
           <VListItem
             { ...itemProps }
+            index={ index }
             value={ props.returnObject ? item : itemProps.value }
             v-slots={ slotsWithItem }
           />

packages/vuetify/src/components/VList/VListItem.sass

@@ -23,6 +23,10 @@
     @include tools.rounded($list-item-border-radius)
     @include tools.variant($list-item-variants...)
 
+    &--focus-visible
+      .v-list-item__overlay
+        opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))
+
     @supports selector(:focus-visible)
       &::after
         pointer-events: none
@@ -32,7 +36,8 @@
         transition: opacity .2s ease-in-out
         @include tools.absolute(true)
 
-      &:focus-visible::after
+      &:focus-visible::after,
+      &--focus-visible::after
         opacity: calc(.15 * var(--v-theme-overlay-multiplier))
 
     &__prepend,
@@ -359,6 +364,9 @@
           color: highlighttext !important
           forced-color-adjust: preserve-parent-color
 
+      &--focus-visible::after
+        opacity: 1
+
       @supports selector(:focus-visible)
         &::after
           color: buttontext