vuetifyjs / vuetify

Compare dfbf0b3 ... +7 ... e8f0f24

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/VAutocomplete/VAutocomplete.ts components/VTextField/VTextField.ts components/VMenu/VMenu.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/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/VAppBar/VAppBar.ts components/VAppBar/VAppBarNavIcon.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/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/VApp/VApp.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/console.ts util/color/transformSRGB.ts util/color/transformCIELAB.ts util/dateTimeUtils.ts util/colors.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/service/index.ts directives/ripple/index.ts directives/touch/index.ts directives/color/index.ts directives/intersect/index.ts directives/scroll/index.ts directives/mutate/index.ts directives/click-outside/index.ts directives/resize/index.ts framework.ts composables/proxiedModel.ts composables/elevation.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.


@@ -5,11 +5,13 @@
Loading
5 5
import './VRipple.sass'
6 6
7 7
// Utilities
8 -
import { consoleWarn } from '../../util/console'
9 -
import { keyCodes } from '../../util/helpers'
8 +
import { isObject, keyCodes } from '../../util/helpers'
10 9
11 10
// Types
12 -
import { VNode, VNodeDirective } from 'vue'
11 +
import {
12 +
  DirectiveBinding,
13 +
  ObjectDirective,
14 +
} from 'vue'
13 15
14 16
type VuetifyRippleEvent = MouseEvent | TouchEvent | KeyboardEvent
15 17
@@ -30,6 +32,14 @@
Loading
30 32
  circle?: boolean
31 33
}
32 34
35 +
interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
36 +
  value?: boolean | { class: string }
37 +
  modifiers: {
38 +
    center?: boolean
39 +
    circle?: boolean
40 +
  }
41 +
}
42 +
33 43
function isTouchEvent (e: VuetifyRippleEvent): e is TouchEvent {
34 44
  return e.constructor.name === 'TouchEvent'
35 45
}
@@ -80,7 +90,7 @@
Loading
80 90
    el: HTMLElement,
81 91
    value: RippleOptions = {}
82 92
  ) {
83 -
    if (!el._ripple || !el._ripple.enabled) {
93 +
    if (!el?._ripple?.enabled) {
84 94
      return
85 95
    }
86 96
@@ -124,7 +134,7 @@
Loading
124 134
  },
125 135
126 136
  hide (el: HTMLElement | null) {
127 -
    if (!el || !el._ripple || !el._ripple.enabled) return
137 +
    if (!el?._ripple?.enabled) return
128 138
129 139
    const ripples = el.getElementsByClassName('v-ripple__animation')
130 140
@@ -161,8 +171,8 @@
Loading
161 171
162 172
function rippleShow (e: VuetifyRippleEvent) {
163 173
  const value: RippleOptions = {}
164 -
  const element = e.currentTarget as HTMLElement
165 -
  if (!element || !element._ripple || element._ripple.touched) return
174 +
  const element = e.currentTarget as HTMLElement | undefined
175 +
  if (!element?._ripple || element._ripple.touched) return
166 176
  if (isTouchEvent(e)) {
167 177
    element._ripple.touched = true
168 178
    element._ripple.isTouch = true
@@ -249,23 +259,22 @@
Loading
249 259
  rippleHide(e)
250 260
}
251 261
252 -
function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boolean) {
253 -
  const enabled = isRippleEnabled(binding.value)
262 +
function updateRipple (el: HTMLElement, binding: RippleDirectiveBinding, wasEnabled: boolean) {
263 +
  const { value, modifiers } = binding
264 +
  const enabled = isRippleEnabled(value)
265 +
254 266
  if (!enabled) {
255 267
    ripples.hide(el)
256 268
  }
269 +
257 270
  el._ripple = el._ripple || {}
258 271
  el._ripple.enabled = enabled
259 -
  const value = binding.value || {}
260 -
  if (value.center) {
261 -
    el._ripple.centered = true
262 -
  }
263 -
  if (value.class) {
264 -
    el._ripple.class = binding.value.class
265 -
  }
266 -
  if (value.circle) {
267 -
    el._ripple.circle = value.circle
272 +
  el._ripple.centered = modifiers.center
273 +
  el._ripple.circle = modifiers.circle
274 +
  if (isObject(value) && value.class) {
275 +
    el._ripple.class = value.class
268 276
  }
277 +
269 278
  if (enabled && !wasEnabled) {
270 279
    el.addEventListener('touchstart', rippleShow, { passive: true })
271 280
    el.addEventListener('touchend', rippleHide, { passive: true })
@@ -299,27 +308,16 @@
Loading
299 308
  el.removeEventListener('dragstart', rippleHide)
300 309
}
301 310
302 -
function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {
311 +
function mounted (el: HTMLElement, binding: DirectiveBinding) {
303 312
  updateRipple(el, binding, false)
304 -
305 -
  if (process.env.NODE_ENV === 'development') {
306 -
    // warn if an inline element is used, waiting for el to be in the DOM first
307 -
    node.context && node.context.$nextTick(() => {
308 -
      const computed = window.getComputedStyle(el)
309 -
      if (computed && computed.display === 'inline') {
310 -
        const context = (node as any).fnOptions ? [(node as any).fnOptions, node.context] : [node.componentInstance]
311 -
        consoleWarn('v-ripple can only be used on block-level elements', ...context)
312 -
      }
313 -
    })
314 -
  }
315 313
}
316 314
317 -
function unbind (el: HTMLElement) {
315 +
function unmounted (el: HTMLElement) {
318 316
  delete el._ripple
319 317
  removeListeners(el)
320 318
}
321 319
322 -
function update (el: HTMLElement, binding: VNodeDirective) {
320 +
function updated (el: HTMLElement, binding: DirectiveBinding) {
323 321
  if (binding.value === binding.oldValue) {
324 322
    return
325 323
  }
@@ -328,10 +326,10 @@
Loading
328 326
  updateRipple(el, binding, wasEnabled)
329 327
}
330 328
331 -
export const Ripple = {
332 -
  bind: directive,
333 -
  unbind,
334 -
  update,
329 +
export const Ripple: ObjectDirective = {
330 +
  mounted,
331 +
  unmounted,
332 +
  updated,
335 333
}
336 334
337 335
export default Ripple

Learn more Showing 2 files with coverage changes found.

Changes in packages/vuetify/src/util/helpers.ts
-2
+2
Loading file...
Changes in packages/vuetify/src/directives/ripple/index.ts
-108
+108
Loading file...
Files Coverage
packages/vuetify/src +1.33% 5.19%
Project Totals (237 files) 5.19%
Loading