refactor(VDatePicker): use getPrefixedEventHandlers

Author: ikushum

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

@@ -15,9 +15,7 @@
   },
   "events": {
     "update:month": "Emitted when the month changes.",
-    "update:year": "Emitted when the year changes.",
-    "click:day": "Emitted when a day is clicked.",
-    "dblclick:day": "Emitted when a day is double clicked."
+    "update:year": "Emitted when the year changes."
   },
   "slots": {
     "year": "Slot for the year.",

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

@@ -30,7 +30,7 @@ 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 =
@@ -99,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
@@ -115,11 +116,9 @@ export const VDatePicker = genericComponent<new <
     'update:year': (date: any) => true,
     // 'update:inputMode': (date: any) => true,
     'update:viewMode': (date: any) => true,
-    'click:day': (day: CalendarDay) => true,
-    'dblclick:day': (day: CalendarDay) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { emit, slots, attrs }) {
     const adapter = useDate()
     const { t } = useLocale()
     const { rtlClasses } = useRtl()
@@ -328,14 +327,6 @@ export const VDatePicker = genericComponent<new <
       onUpdateYear()
     }
 
-    function onClickDay (day: CalendarDay) {
-      emit('click:day', day)
-    }
-
-    function onDblclickDay (day: CalendarDay) {
-      emit('dblclick:day', day)
-    }
-
     function onClickDate () {
       viewMode.value = 'month'
     }
@@ -489,14 +480,13 @@ export const VDatePicker = genericComponent<new <
                   ) : (
                     <VDatePickerMonth
                       key="date-picker-month"
+                      { ...attrs }
                       { ...datePickerMonthProps }
                       v-model={ model.value }
                       v-model:month={ month.value }
                       v-model:year={ year.value }
                       onUpdate:month={ onUpdateMonth }
                       onUpdate:year={ onUpdateYear }
-                      onClick:day={ onClickDay }
-                      onDblclick:day={ onDblclickDay }
                       min={ minDate.value }
                       max={ maxDate.value }
                     >

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

@@ -13,11 +13,10 @@ 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'
-import type { CalendarDay } from '@/composables/calendar'
 import type { GenericProps } from '@/util'
 
 export type DatePickerEventColorValue = boolean | string | string[]
@@ -31,7 +30,7 @@ export type DatePickerEvents = string[] |
 export type VDatePickerMonthSlots = {
   day: {
     props: {
-      onClick: () => void
+      onClick: (e: PointerEvent) => void
     }
     item: any
     i: number
@@ -78,11 +77,9 @@ export const VDatePickerMonth = genericComponent<new <TModel>(
     'update:modelValue': (date: unknown) => true,
     'update:month': (date: number) => true,
     'update:year': (date: number) => true,
-    'click:day': (day: CalendarDay) => true,
-    'dblclick:day': (day: CalendarDay) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { emit, slots, attrs }) {
     const daysRef = ref()
     const { t } = useLocale()
 
@@ -166,22 +163,14 @@ export const VDatePickerMonth = genericComponent<new <TModel>(
       }
     }
 
-    function onClick (day: CalendarDay) {
-      const { date } = day
-
+    function onClick (value: unknown) {
       if (props.multiple === 'range') {
-        onRangeClick(date)
+        onRangeClick(value)
       } else if (props.multiple) {
-        onMultipleClick(date)
+        onMultipleClick(value)
       } else {
-        model.value = [date]
+        model.value = [value]
       }
-
-      emit('click:day', day)
-    }
-
-    function onDblclick (day: CalendarDay) {
-      emit('dblclick:day', day)
     }
 
     function getEventColors (date: string): string[] {
@@ -269,6 +258,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',
@@ -280,8 +271,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),
-                  onDblclick: () => onDblclick(item),
+                  ...events,
+                  onClick: (e: PointerEvent) => { onClick(item.date); events.onClick?.(e) },
                 },
                 item,
                 i,