fix(VColorPicker, VCalendar, ripple) support CSS zoom (#22774)

fixes #22761

Author: matsutake-mushroom

packages/vuetify/src/components/VCalendar/composables/calendarWithIntervals.ts

@@ -16,6 +16,7 @@ import {
   validateTime,
 } from '../util/timestamp'
 import { propsFactory } from '@/util'
+import { Box, getTargetBox } from '@/util/box'
 
 // Types
 import type { PropType, StyleValue } from 'vue'
@@ -165,13 +166,14 @@ export function useCalendarWithIntervals (props: CalendarWithIntervalsProps) {
 
   function getTimestampAtEvent (e: Event, day: CalendarTimestamp): CalendarTimestamp {
     const timestamp: CalendarTimestamp = copyTimestamp(day)
-    const bounds = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const bounds = new Box(e.currentTarget as HTMLElement)
     const baseMinutes: number = firstMinute.value
     const touchEvent: TouchEvent = e as TouchEvent
     const mouseEvent: MouseEvent = e as MouseEvent
     const touches: TouchList = touchEvent.changedTouches || touchEvent.touches
-    const clientY: number = touches && touches[0] ? touches[0].clientY : mouseEvent.clientY
-    const addIntervals: number = (clientY - bounds.top) / parsedIntervalHeight.value
+    const target = touches && touches[0] ? touches[0] : mouseEvent
+    const point = getTargetBox([target.clientX, target.clientY])
+    const addIntervals: number = (point.y - bounds.top) / parsedIntervalHeight.value
     const addMinutes: number = Math.floor(addIntervals * parsedIntervalMinutes.value)
     const minutes: number = baseMinutes + addMinutes
 

packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx

@@ -8,10 +8,12 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 // Utilities
 import { computed, onMounted, ref, shallowRef, toRef, watch } from 'vue'
 import { clamp, convertToUnit, defineComponent, getEventCoordinates, propsFactory, useRender } from '@/util'
+import { getTargetBox } from '@/util/box'
 
 // Types
 import type { PropType } from 'vue'
 import type { HSV } from '@/util'
+import type { Box } from '@/util/box'
 
 export const makeVColorPickerCanvasProps = propsFactory({
   color: {
@@ -91,7 +93,7 @@ export const VColorPickerCanvas = defineComponent({
       canvasHeight.value = Math.round(height)
     })
 
-    function updateDotPosition (x: number, y: number, rect: DOMRect) {
+    function updateDotPosition (x: number, y: number, rect: Box) {
       const { left, top, width, height } = rect
       dotPosition.value = {
         x: clamp(x - left, 0, width),
@@ -121,8 +123,9 @@ export const VColorPickerCanvas = defineComponent({
       isInteracting.value = true
 
       const coords = getEventCoordinates(e)
+      const point = getTargetBox([coords.clientX, coords.clientY])
 
-      updateDotPosition(coords.clientX, coords.clientY, canvasRef.value.getBoundingClientRect())
+      updateDotPosition(point.x, point.y, getTargetBox(canvasRef.value))
     }
 
     function handleMouseUp () {

packages/vuetify/src/directives/ripple/index.ts

@@ -3,6 +3,7 @@ import './VRipple.sass'
 
 // Utilities
 import { isObject } from '@/util'
+import { Box, getTargetBox } from '@/util/box'
 
 // Types
 import type { DirectiveBinding } from 'vue'
@@ -53,11 +54,12 @@ const calculate = (
   let localY = 0
 
   if (!isKeyboardEvent(e)) {
-    const offset = el.getBoundingClientRect()
+    const offset = new Box(el)
     const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e
+    const point = getTargetBox([target.clientX, target.clientY])
 
-    localX = target.clientX - offset.left
-    localY = target.clientY - offset.top
+    localX = point.x - offset.left
+    localY = point.y - offset.top
   }
 
   let radius = 0