feat(VDatePicker): add prefixed day events handler

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

@@ -46,6 +46,7 @@
     "update:month": "Emitted when the month changes.",
     "update:year": "Emitted when the year changes.",
     "update:viewMode": "Emitted when the view mode changes.",
+    "[`${string}:day`]": "Any event on the day button.",
     "<domevent>:date": "Emitted when the specified DOM event occurs on the date button.",
     "<domevent>:month": "Emitted when the specified DOM event occurs on the month button.",
     "<domevent>:year": "Emitted when the specified DOM event occurs on the year button.",

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

@@ -14,9 +14,8 @@
     "reverseTransition": "The transition used when changing months into the past"
   },
   "events": {
-    "update:month": "Fired when the month changes.",
-    "update:year": "Fired when the year changes.",
-    "day": "Fired when a day is clicked."
+    "update:month": "Emitted when the month changes.",
+    "update:year": "Emitted when the year changes."
   },
   "slots": {
     "year": "Slot for the year.",

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

@@ -28,8 +28,9 @@ import type { VDatePickerHeaderSlots } from './VDatePickerHeader'
 import type { VDatePickerMonthSlots } from './VDatePickerMonth'
 import type { VDatePickerMonthsSlots } from './VDatePickerMonths'
 import type { VDatePickerYearsSlots } from './VDatePickerYears'
+import type { CalendarDay } from '@/composables/calendar'
 import type { VPickerSlots } from '@/labs/VPicker/VPicker'
-import type { GenericProps } from '@/util'
+import type { EventProp, GenericProps } from '@/util'
 
 // Types
 export type VDatePickerSlots =
@@ -98,6 +99,7 @@ export const VDatePicker = genericComponent<new <
     : T,
 > (
   props: {
+    [key: `on${Capitalize<string>}:day`]: EventProp<[Event, CalendarDay]>
     modelValue?: TModel
     'onUpdate:modelValue'?: (value: TModel) => void
     multiple?: Multiple
@@ -116,7 +118,7 @@ export const VDatePicker = genericComponent<new <
     'update:viewMode': (date: any) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { emit, slots, attrs }) {
     const adapter = useDate()
     const { t } = useLocale()
     const { rtlClasses } = useRtl()
@@ -478,6 +480,7 @@ export const VDatePicker = genericComponent<new <
                   ) : (
                     <VDatePickerMonth
                       key="date-picker-month"
+                      { ...attrs }
                       { ...datePickerMonthProps }
                       v-model={ model.value }
                       v-model:month={ month.value }

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

@@ -13,7 +13,7 @@ import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
 import { computed, ref, shallowRef, toRef, watch } from 'vue'
-import { genericComponent, omit, propsFactory, useRender, wrapInArray } from '@/util'
+import { genericComponent, getPrefixedEventHandlers, omit, propsFactory, useRender, wrapInArray } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -30,7 +30,7 @@ export type DatePickerEvents = string[] |
 export type VDatePickerMonthSlots = {
   day: {
     props: {
-      onClick: () => void
+      onClick: (e: PointerEvent) => void
     }
     item: any
     i: number
@@ -79,7 +79,7 @@ export const VDatePickerMonth = genericComponent<new <TModel>(
     'update:year': (date: number) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { emit, slots, attrs }) {
     const daysRef = ref()
     const { t } = useLocale()
 
@@ -257,6 +257,8 @@ export const VDatePickerMonth = genericComponent<new <TModel>(
             ))}
 
             { daysInMonth.value.map((item, i) => {
+              const events = getPrefixedEventHandlers(attrs, ':day', nativeEvent => ({ nativeEvent, ...item }))
+
               const slotProps = {
                 props: {
                   class: 'v-date-picker-month__day-btn',
@@ -268,7 +270,8 @@ export const VDatePickerMonth = genericComponent<new <TModel>(
                   variant: item.isSelected ? 'flat' : item.isToday ? 'outlined' : 'text',
                   'aria-label': getDateAriaLabel(item),
                   'aria-current': item.isToday ? 'date' : undefined,
-                  onClick: () => onClick(item.date),
+                  ...events,
+                  onClick: (e: PointerEvent) => { onClick(item.date); events.onClick?.(e) },
                 },
                 item,
                 i,

packages/vuetify/src/util/events.ts

@@ -7,11 +7,11 @@ export function getPrefixedEventHandlers<T extends `:${string}`> (
   attrs: Record<string, any>,
   suffix: T,
   getData: EventHandler
-): Record<`${string}${T}`, EventHandler> {
+): Record<`${string}`, EventHandler> {
   return Object.keys(attrs)
     .filter(key => isOn(key) && key.endsWith(suffix))
     .reduce((acc: any, key) => {
       acc[key.slice(0, -suffix.length)] = (event: Event) => callEvent(attrs[key], event, getData(event))
       return acc
-    }, {} as Record<`${string}${T}`, EventHandler>)
+    }, {} as Record<`${string}`, EventHandler>)
 }