#12348 feat(VMenu): add jump to first/last item keyboard navigation

Merged janKollars
Coverage Reach
components/VCalendar/mixins/calendar-with-events.ts components/VCalendar/mixins/calendar-with-intervals.ts components/VCalendar/mixins/calendar-base.ts components/VCalendar/mixins/times.ts components/VCalendar/mixins/mouse.ts components/VCalendar/util/timestamp.ts components/VCalendar/util/props.ts components/VCalendar/util/events.ts components/VCalendar/modes/stack.ts components/VCalendar/modes/common.ts components/VCalendar/modes/column.ts components/VCalendar/modes/index.ts components/VCalendar/VCalendar.ts components/VCalendar/VCalendarDaily.ts components/VCalendar/VCalendarWeekly.ts components/VCalendar/VCalendarCategory.ts components/VCalendar/VCalendarMonthly.ts components/VDatePicker/VDatePicker.ts components/VDatePicker/mixins/date-picker-table.ts components/VDatePicker/VDatePickerDateTable.ts components/VDatePicker/util/pad.ts components/VDatePicker/util/createNativeLocaleFormatter.ts components/VDatePicker/util/eventHelpers.ts components/VDatePicker/util/monthChange.ts components/VDatePicker/util/isDateAllowed.ts components/VDatePicker/VDatePickerHeader.ts components/VDatePicker/VDatePickerYears.ts components/VDatePicker/VDatePickerTitle.ts components/VDatePicker/VDatePickerMonthTable.ts components/VSelect/VSelect.ts components/VSelect/VSelectList.ts components/VDataTable/VDataTable.ts components/VDataTable/VDataTableHeaderDesktop.ts components/VDataTable/VVirtualTable.ts components/VDataTable/VEditDialog.ts components/VDataTable/VDataTableHeaderMobile.ts components/VDataTable/MobileRow.ts components/VDataTable/Row.ts components/VDataTable/RowGroup.ts components/VDataTable/mixins/header.ts components/VDataTable/VSimpleTable.ts components/VDataTable/VDataTableHeader.ts components/VDataTable/index.ts components/VTreeview/VTreeview.ts components/VTreeview/VTreeviewNode.ts components/VTreeview/util/filterTreeItems.ts components/VTimePicker/VTimePicker.ts components/VTimePicker/VTimePickerClock.ts components/VTimePicker/VTimePickerTitle.ts components/VColorPicker/util/index.ts components/VColorPicker/VColorPickerCanvas.ts components/VColorPicker/VColorPickerEdit.ts components/VColorPicker/VColorPicker.ts components/VColorPicker/VColorPickerSwatches.ts components/VColorPicker/VColorPickerPreview.ts components/VSlider/VSlider.ts components/VMenu/VMenu.ts components/VAutocomplete/VAutocomplete.ts components/VTextField/VTextField.ts components/VNavigationDrawer/VNavigationDrawer.ts components/VSparkline/VSparkline.ts components/VSparkline/helpers/core.ts components/VSparkline/helpers/path.ts components/VSparkline/helpers/math.ts components/VDataIterator/VDataIterator.ts components/VDataIterator/VDataFooter.ts components/VTabs/VTabs.ts components/VTabs/VTab.ts components/VTabs/VTabsBar.ts components/VTabs/VTabsItems.ts components/VTabs/VTabItem.ts components/VTabs/VTabsSlider.ts components/VData/VData.ts components/VWindow/VWindow.ts components/VWindow/VWindowItem.ts components/VList/VListGroup.ts components/VList/VListItem.ts components/VList/VList.ts components/VList/VListItemAvatar.ts components/VList/VListItemAction.ts components/VList/VListItemGroup.ts components/VList/index.ts components/VList/VListItemIcon.ts components/VAppBar/VAppBar.ts components/VAppBar/VAppBarTitle.ts components/VAppBar/VAppBarNavIcon.ts components/VSlideGroup/VSlideGroup.ts components/VStepper/VStepperContent.ts components/VStepper/VStepperStep.ts components/VStepper/VStepper.ts components/VStepper/index.ts components/VItemGroup/VItemGroup.ts components/VItemGroup/VItem.ts components/VGrid/VCol.ts components/VGrid/VRow.ts components/VGrid/grid.ts components/VGrid/VContainer.ts components/VCombobox/VCombobox.ts components/VFileInput/VFileInput.ts components/VInput/VInput.ts components/VDialog/VDialog.ts components/VRangeSlider/VRangeSlider.ts components/VImg/VImg.ts components/VIcon/VIcon.ts components/VTooltip/VTooltip.ts components/transitions/expand-transition.ts components/transitions/createTransition.ts components/transitions/index.ts components/VPagination/VPagination.ts components/VExpansionPanel/VExpansionPanel.ts components/VExpansionPanel/VExpansionPanelHeader.ts components/VExpansionPanel/VExpansionPanels.ts components/VExpansionPanel/VExpansionPanelContent.ts components/VAlert/VAlert.ts components/VRadioGroup/VRadio.ts components/VRadioGroup/VRadioGroup.ts components/VProgressLinear/VProgressLinear.ts components/VRating/VRating.ts components/VCarousel/VCarousel.ts components/VCarousel/VCarouselItem.ts components/VBadge/VBadge.ts components/VBtn/VBtn.ts components/VSkeletonLoader/VSkeletonLoader.ts components/VSnackbar/VSnackbar.ts components/VForm/VForm.ts components/VToolbar/VToolbar.ts components/VToolbar/index.ts components/VOverflowBtn/VOverflowBtn.ts components/VCheckbox/VCheckbox.ts components/VCheckbox/VSimpleCheckbox.ts components/VChip/VChip.ts components/VBanner/VBanner.ts components/VFooter/VFooter.ts components/VProgressCircular/VProgressCircular.ts components/VTextarea/VTextarea.ts components/VTimeline/VTimelineItem.ts components/VTimeline/VTimeline.ts components/VSwitch/VSwitch.ts components/VBottomNavigation/VBottomNavigation.ts components/VVirtualScroll/VVirtualScroll.ts components/VBreadcrumbs/VBreadcrumbs.ts components/VBreadcrumbs/VBreadcrumbsItem.ts components/VParallax/VParallax.ts components/VCard/VCard.ts components/VCard/index.ts components/VSpeedDial/VSpeedDial.ts components/VHover/VHover.ts components/VPicker/VPicker.ts components/VSystemBar/VSystemBar.ts components/VOverlay/VOverlay.ts components/VLazy/VLazy.ts components/VResponsive/VResponsive.ts components/VChipGroup/VChipGroup.ts components/VApp/VApp.ts components/VMessages/VMessages.ts components/VContent/VContent.ts components/VAvatar/VAvatar.ts components/VSheet/VSheet.ts components/VCounter/VCounter.ts components/VMain/VMain.ts components/VBtnToggle/VBtnToggle.ts components/VThemeProvider/VThemeProvider.ts components/VLabel/VLabel.ts components/VDivider/VDivider.ts components/VBottomSheet/VBottomSheet.ts components/VSubheader/VSubheader.ts mixins/menuable/index.ts mixins/validatable/index.ts mixins/overlayable/index.ts mixins/activatable/index.ts mixins/selectable/index.ts mixins/detachable/index.ts mixins/routable/index.ts mixins/themeable/index.ts mixins/dependent/index.ts mixins/applicationable/index.ts mixins/scrollable/index.ts mixins/translatable/index.ts mixins/colorable/index.ts mixins/stackable/index.ts mixins/picker/index.ts mixins/groupable/index.ts mixins/intersectable/index.ts mixins/measurable/index.ts mixins/roundable/index.ts mixins/mobile/index.ts mixins/proxyable/index.ts mixins/binds-attrs/index.ts mixins/registrable/index.ts mixins/picker-button/index.ts mixins/toggleable/index.ts mixins/delayable/index.ts mixins/returnable/index.ts mixins/sizeable/index.ts mixins/bootable/index.ts mixins/elevatable/index.ts mixins/rippleable/index.ts mixins/loadable/index.ts mixins/ssr-bootable/index.ts mixins/positionable/index.ts mixins/button-group/index.ts mixins/localable/index.ts util/helpers.ts util/colorUtils.ts util/mergeData.ts util/console.ts util/color/transformSRGB.ts util/color/transformCIELAB.ts util/dateTimeUtils.ts util/colors.ts util/dedupeModelListeners.ts util/rebuildFunctionalSlots.ts util/mixins.ts util/component.ts services/theme/index.ts services/theme/utils.ts services/breakpoint/index.ts services/goto/util.ts services/goto/index.ts services/goto/easing-patterns.ts services/lang/index.ts services/application/index.ts services/icons/presets/fa-svg.ts services/icons/presets/fa.ts services/icons/presets/mdi-svg.ts services/icons/presets/mdi.ts services/icons/presets/md.ts services/icons/presets/fa4.ts services/icons/index.ts services/presets/index.ts services/service/index.ts directives/ripple/index.ts directives/touch/index.ts directives/color/index.ts directives/intersect/index.ts directives/mutate/index.ts directives/click-outside/index.ts directives/scroll/index.ts directives/resize/index.ts install.ts framework.ts index.ts presets/default/index.ts

No flags found

Use flags to group coverage reports by test type, project and/or folders.
Then setup custom commit statuses and notifications for each flag.

e.g., #unittest #integration

#production #enterprise

#frontend #backend

Learn more about Codecov Flags here.


@@ -258,6 +258,10 @@
Loading
258 258
        this.nextTile()
259 259
      } else if (e.keyCode === keyCodes.up) {
260 260
        this.prevTile()
261 +
      } else if (e.keyCode === keyCodes.end) {
262 +
        this.lastTile()
263 +
      } else if (e.keyCode === keyCodes.home) {
264 +
        this.firstTile()
261 265
      } else if (e.keyCode === keyCodes.enter && this.listIndex !== -1) {
262 266
        this.tiles[this.listIndex].click()
263 267
      } else { return }
@@ -424,6 +428,24 @@
Loading
424 428
      this.listIndex--
425 429
      if (tile.tabIndex === -1) this.prevTile()
426 430
    },
431 +
    lastTile () {
432 +
      const tile = this.tiles[this.tiles.length - 1]
433 +
434 +
      if (!tile) return
435 +
436 +
      this.listIndex = this.tiles.length - 1
437 +
438 +
      if (tile.tabIndex === -1) this.prevTile()
439 +
    },
440 +
    firstTile () {
441 +
      const tile = this.tiles[0]
442 +
443 +
      if (!tile) return
444 +
445 +
      this.listIndex = 0
446 +
447 +
      if (tile.tabIndex === -1) this.nextTile()
448 +
    },
427 449
    onKeyDown (e: KeyboardEvent) {
428 450
      if (e.keyCode === keyCodes.esc) {
429 451
        // Wait for dependent elements to close first

@@ -661,13 +661,13 @@
Loading
661 661
        })
662 662
      }
663 663
664 -
      // If menu is not active, up and down can do
664 +
      // If menu is not active, up/down/home/end can do
665 665
      // one of 2 things. If multiple, opens the
666 666
      // menu, if not, will cycle through all
667 667
      // available options
668 668
      if (
669 669
        !this.isMenuActive &&
670 -
        [keyCodes.up, keyCodes.down].includes(keyCode)
670 +
        [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)
671 671
      ) return this.onUpDown(e)
672 672
673 673
      // If escape deactivate the menu
@@ -782,7 +782,20 @@
Loading
782 782
783 783
      window.requestAnimationFrame(() => {
784 784
        menu.getTiles()
785 -
        keyCodes.up === keyCode ? menu.prevTile() : menu.nextTile()
785 +
        switch (keyCode) {
786 +
          case keyCodes.up:
787 +
            menu.prevTile()
788 +
            break
789 +
          case keyCodes.down:
790 +
            menu.nextTile()
791 +
            break
792 +
          case keyCodes.home:
793 +
            menu.firstTile()
794 +
            break
795 +
          case keyCodes.end:
796 +
            menu.lastTile()
797 +
            break
798 +
        }
786 799
        menu.activeTile && menu.activeTile.click()
787 800
      })
788 801
    },

Everything is accounted for!

No changes detected that need to be reviewed.
What changes does Codecov check for?
Lines, not adjusted in diff, that have changed coverage data.
Files that introduced coverage data that had none before.
Files that have missing coverage data that once were tracked.
Files Coverage
packages/vuetify/src 0.03% 86.81%
Project Totals (243 files) 86.81%
Loading