@coreui/vue-pro 5.9.0 → 5.11.0

package/src/components/calendar/CCalendar.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, PropType, ref, watch } from 'vue'
+import { defineComponent, h, nextTick, PropType, ref, watch } from 'vue'
 
 import { CButton } from '../button'
 
@@ -14,11 +14,19 @@ import {
   isDateInRange,
   isDateSelected,
   isDisableDateInRange,
-  isSameDateAs,
+  isMonthDisabled,
+  isMonthInRange,
+  isMonthSelected,
   isToday,
+  isSameDateAs,
+  isYearDisabled,
+  isYearInRange,
+  isYearSelected,
+  getSelectableDates,
+  setTimeFromDate,
 } from './utils'
 
-export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
+import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
 
 const CCalendar = defineComponent({
   name: 'CCalendar',
@@ -165,9 +173,9 @@ const CCalendar = defineComponent({
      * @since 5.0.0
      */
     selectionType: {
-      type: String as PropType<'day' | 'week' | 'month' | 'year'>,
+      type: String as PropType<SelectionTypes>,
       default: 'day',
-      validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),
+      validator: (value: SelectionTypes) => ['day', 'week', 'month', 'year'].includes(value),
     },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
@@ -249,43 +257,37 @@ const CCalendar = defineComponent({
         ? convertToDateObject(props.calendarDate, props.selectionType)
         : props.startDate
           ? convertToDateObject(props.startDate, props.selectionType)
-          : new Date(),
+          : new Date()
     )
     const startDate = ref<Date | null>(
-      props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null,
+      props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null
     )
     const endDate = ref(
-      props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null,
+      props.endDate ? convertToDateObject(props.endDate, props.selectionType) : null
     )
     const hoverDate = ref<Date | null>(null)
     const maxDate = ref(
-      props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null,
+      props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null
     )
     const minDate = ref(
-      props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null,
+      props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null
     )
     const selectEndDate = ref(props.selectEndDate)
-    const view = ref<'days' | 'months' | 'years'>('days')
+    const view = ref<ViewTypes>('days')
 
     watch(
       () => props.selectionType,
       () => {
-        if (props.selectionType === 'day' || props.selectionType === 'week') {
-          view.value = 'days'
-          return
+        const viewMap = {
+          day: 'days',
+          week: 'days',
+          month: 'months',
+          year: 'years',
         }
 
-        if (props.selectionType === 'month') {
-          view.value = 'months'
-          return
-        }
-
-        if (props.selectionType === 'year') {
-          view.value = 'years'
-          return
-        }
+        view.value = (viewMap[props.selectionType] as ViewTypes) || 'days'
       },
-      { immediate: true },
+      { immediate: true }
     )
 
     watch(
@@ -294,7 +296,7 @@ const CCalendar = defineComponent({
         if (props.calendarDate) {
           calendarDate.value = new Date(props.calendarDate)
         }
-      },
+      }
     )
 
     watch(
@@ -306,7 +308,7 @@ const CCalendar = defineComponent({
         if (!isSameDateAs(date, startDate.value)) {
           startDate.value = date
         }
-      },
+      }
     )
 
     watch(
@@ -316,7 +318,7 @@ const CCalendar = defineComponent({
         if (!isSameDateAs(date, endDate.value)) {
           endDate.value = date
         }
-      },
+      }
     )
 
     watch(
@@ -325,7 +327,7 @@ const CCalendar = defineComponent({
         maxDate.value = props.maxDate
           ? convertToDateObject(props.maxDate, props.selectionType)
           : null
-      },
+      }
     )
 
     watch(
@@ -334,14 +336,14 @@ const CCalendar = defineComponent({
         minDate.value = props.minDate
           ? convertToDateObject(props.minDate, props.selectionType)
           : null
-      },
+      }
     )
 
     watch(
       () => props.selectEndDate,
       () => {
         selectEndDate.value = props.selectEndDate
-      },
+      }
     )
 
     watch(startDate, () => {
@@ -357,9 +359,17 @@ const CCalendar = defineComponent({
       const month = calendarDate.value.getMonth()
       const d = new Date(year, month, 1)
 
-      years && d.setFullYear(d.getFullYear() + years)
-      months && d.setMonth(d.getMonth() + months)
-      typeof setMonth === 'number' && d.setMonth(setMonth)
+      if (years) {
+        d.setFullYear(d.getFullYear() + years)
+      }
+
+      if (months) {
+        d.setMonth(d.getMonth() + months)
+      }
+
+      if (typeof setMonth === 'number') {
+        d.setMonth(setMonth)
+      }
 
       calendarDate.value = d
 
@@ -367,10 +377,6 @@ const CCalendar = defineComponent({
     }
 
     const handleCalendarClick = (date: Date, index?: number) => {
-      if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
-        return
-      }
-
       const _date = new Date(date)
 
       if (view.value === 'days') {
@@ -391,6 +397,11 @@ const CCalendar = defineComponent({
         return
       }
 
+      // Allow to change the calendarDate but not startDate or endDate
+      if (isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)) {
+        return
+      }
+
       if (props.range) {
         if (selectEndDate.value) {
           selectEndDate.value = false
@@ -407,7 +418,7 @@ const CCalendar = defineComponent({
             return
           }
 
-          endDate.value = date
+          endDate.value = setTimeFromDate(date, endDate.value)
           return
         }
 
@@ -424,17 +435,27 @@ const CCalendar = defineComponent({
         }
 
         selectEndDate.value = true
-        startDate.value = date
+        startDate.value = setTimeFromDate(date, startDate.value)
         return
       }
 
-      startDate.value = date
+      startDate.value = setTimeFromDate(date, startDate.value)
     }
 
     const handleCalendarKeyDown = (event: KeyboardEvent, date: Date, index?: number) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
+        const _view = view.value
         handleCalendarClick(date, index)
+        if (
+          (_view === 'months' && props.selectionType !== 'month') ||
+          (_view === 'years' && props.selectionType !== 'year')
+        ) {
+          nextTick(() => {
+            const list: HTMLElement[] = getSelectableDates(calendarRef.value as HTMLDivElement)
+            list[0]?.focus()
+          })
+        }
       }
 
       if (
@@ -447,7 +468,7 @@ const CCalendar = defineComponent({
 
         if (
           maxDate.value &&
-          date >= convertToDateObject(maxDate.value, props.selectionType) &&
+          date >= maxDate.value &&
           (event.key === 'ArrowRight' || event.key === 'ArrowDown')
         ) {
           return
@@ -455,7 +476,7 @@ const CCalendar = defineComponent({
 
         if (
           minDate.value &&
-          date <= convertToDateObject(minDate.value, props.selectionType) &&
+          date <= minDate.value &&
           (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
         ) {
           return
@@ -467,13 +488,7 @@ const CCalendar = defineComponent({
           element = element.closest('tr[tabindex="0"]') as HTMLElement
         }
 
-        const list: HTMLElement[] = calendarRef.value
-          ? Array.from(
-              calendarRef.value.querySelectorAll(
-                props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
-              ),
-            )
-          : []
+        const list: HTMLElement[] = getSelectableDates(calendarRef.value as HTMLDivElement)
 
         const index = list.indexOf(element)
         const first = index === 0
@@ -520,20 +535,16 @@ const CCalendar = defineComponent({
           }
 
           setTimeout(() => {
-            const _list: HTMLElement[] = element.parentNode?.parentNode
-              ? Array.from(
-                  element.parentNode.parentNode.querySelectorAll(
-                    'td[tabindex="0"], tr[tabindex="0"]',
-                  ),
-                )
-              : []
+            const _list: HTMLElement[] = getSelectableDates(
+              element.parentNode?.parentNode as HTMLDivElement
+            )
 
             if (_list.length > 0 && event.key === 'ArrowRight') {
               _list[0].focus()
             }
 
             if (_list.length > 0 && event.key === 'ArrowLeft') {
-              _list[_list.length - 1].focus()
+              _list.at(-1)?.focus()
             }
 
             if (_list.length > 0 && event.key === 'ArrowDown') {
@@ -571,6 +582,8 @@ const CCalendar = defineComponent({
         return
       }
 
+      date = setTimeFromDate(date, selectEndDate.value ? endDate.value : startDate.value)
+
       hoverDate.value = date
       emit('date-hover', getDateBySelectionType(date, props.selectionType))
     }
@@ -616,7 +629,7 @@ const CCalendar = defineComponent({
       const monthDetails = getMonthDetails(
         _calendarDate.getFullYear(),
         _calendarDate.getMonth(),
-        props.firstDayOfWeek,
+        props.firstDayOfWeek
       )
       const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4)
       const listOfYears = createGroupsInArray(getYears(_calendarDate.getFullYear()), 4)
@@ -632,7 +645,7 @@ const CCalendar = defineComponent({
                 h(
                   'th',
                   { class: 'calendar-cell' },
-                  h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel),
+                  h('div', { class: 'calendar-header-cell-inner' }, props.weekNumbersLabel)
                 ),
               weekDays.map(({ date }: { date: Date }) => {
                 return h(
@@ -654,11 +667,11 @@ const CCalendar = defineComponent({
                           })
                         : date
                             .toLocaleDateString(props.locale, { weekday: 'long' })
-                            .slice(0, props.weekdayFormat),
-                  ),
+                            .slice(0, props.weekdayFormat)
+                  )
                 )
               }),
-            ]),
+            ])
           ),
         h('tbody', {}, [
           view.value === 'days' &&
@@ -667,13 +680,13 @@ const CCalendar = defineComponent({
                 week.weekNumber === 0
                   ? `${_calendarDate.getFullYear()}W53`
                   : `${_calendarDate.getFullYear()}W${week.weekNumber}`,
-                props.selectionType,
+                props.selectionType
               )
               const isDisabled = isDateDisabled(
                 date,
                 minDate.value,
                 maxDate.value,
-                props.disabledDates,
+                props.disabledDates
               )
               const isSelected = isDateSelected(date, startDate.value, endDate.value)
               const current = week.days.some((day) => day.month === 'current')
@@ -711,14 +724,14 @@ const CCalendar = defineComponent({
                     h(
                       'th',
                       { class: 'calendar-cell-week-number' },
-                      week.weekNumber === 0 ? 53 : week.weekNumber,
+                      week.weekNumber === 0 ? 53 : week.weekNumber
                     ),
                   week.days.map(({ date, month }: { date: Date; month: string }) => {
                     const isDisabled = isDateDisabled(
                       date,
                       minDate.value,
                       maxDate.value,
-                      props.disabledDates,
+                      props.disabledDates
                     )
                     const isSelected = isDateSelected(date, startDate.value, endDate.value)
                     return month === 'current' || props.showAdjacementDays
@@ -777,12 +790,12 @@ const CCalendar = defineComponent({
                               ? props.dayFormat(date)
                               : date.toLocaleDateString(props.locale, {
                                   day: <'numeric' | '2-digit'>props.dayFormat,
-                                }),
-                          ),
+                                })
+                          )
                         )
                       : h('td')
                   }),
-                ],
+                ]
               )
             }),
           view.value === 'months' &&
@@ -793,13 +806,13 @@ const CCalendar = defineComponent({
                 row.map((month, idx) => {
                   const monthNumber = index * 3 + idx
                   const date = new Date(_calendarDate.getFullYear(), monthNumber, 1)
-                  const isDisabled = isDateDisabled(
+                  const isDisabled = isMonthDisabled(
                     date,
                     minDate.value,
                     maxDate.value,
-                    props.disabledDates,
+                    props.disabledDates
                   )
-                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
+                  const isSelected = isMonthSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -811,9 +824,9 @@ const CCalendar = defineComponent({
                           'range-hover':
                             props.selectionType === 'month' &&
                             (hoverDate.value && selectEndDate.value
-                              ? isDateInRange(date, startDate.value, hoverDate.value)
-                              : isDateInRange(date, hoverDate.value, endDate.value)),
-                          range: isDateInRange(date, startDate.value, endDate.value),
+                              ? isMonthInRange(date, startDate.value, hoverDate.value)
+                              : isMonthInRange(date, hoverDate.value, endDate.value)),
+                          range: isMonthInRange(date, startDate.value, endDate.value),
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
@@ -827,9 +840,9 @@ const CCalendar = defineComponent({
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, month),
+                    h('div', { class: 'calendar-cell-inner' }, month)
                   )
-                }),
+                })
               )
             }),
           view.value === 'years' &&
@@ -839,13 +852,13 @@ const CCalendar = defineComponent({
                 {},
                 row.map((year) => {
                   const date = new Date(year, 0, 1)
-                  const isDisabled = isDateDisabled(
+                  const isDisabled = isYearDisabled(
                     date,
                     minDate.value,
                     maxDate.value,
-                    props.disabledDates,
+                    props.disabledDates
                   )
-                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
+                  const isSelected = isYearSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -857,9 +870,9 @@ const CCalendar = defineComponent({
                           'range-hover':
                             props.selectionType === 'year' &&
                             (hoverDate.value && selectEndDate.value
-                              ? isDateInRange(date, startDate.value, hoverDate.value)
-                              : isDateInRange(date, hoverDate.value, endDate.value)),
-                          range: isDateInRange(date, startDate.value, endDate.value),
+                              ? isYearInRange(date, startDate.value, hoverDate.value)
+                              : isYearInRange(date, hoverDate.value, endDate.value)),
+                          range: isYearInRange(date, startDate.value, endDate.value),
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
@@ -873,9 +886,9 @@ const CCalendar = defineComponent({
                         onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
-                    h('div', { class: 'calendar-cell-inner' }, year),
+                    h('div', { class: 'calendar-cell-inner' }, year)
                   )
-                }),
+                })
               )
             }),
         ]),
@@ -907,7 +920,7 @@ const CCalendar = defineComponent({
                     slots.navPrevDoubleIcon
                       ? slots.navPrevDoubleIcon()
                       : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
-                },
+                }
               ),
               view.value === 'days' &&
                 h(
@@ -926,9 +939,9 @@ const CCalendar = defineComponent({
                       slots.navPrevIcon
                         ? slots.navPrevIcon()
                         : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
-                  },
+                  }
                 ),
-            ],
+            ]
           ),
         h(
           'div',
@@ -948,7 +961,7 @@ const CCalendar = defineComponent({
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' }),
+                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
               ),
             h(
               CButton,
@@ -960,9 +973,9 @@ const CCalendar = defineComponent({
                 },
                 ...(props.navYearFirst && { style: { order: '-1' } }),
               },
-              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' }),
+              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })
             ),
-          ],
+          ]
         ),
         props.navigation &&
           h(
@@ -988,7 +1001,7 @@ const CCalendar = defineComponent({
                       slots.navNextIcon
                         ? slots.navNextIcon()
                         : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
-                  },
+                  }
                 ),
               h(
                 CButton,
@@ -1006,9 +1019,9 @@ const CCalendar = defineComponent({
                     slots.navNextDoubleIcon
                       ? slots.navNextDoubleIcon()
                       : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
-                },
+                }
               ),
-            ],
+            ]
           ),
       ])
     }
@@ -1034,7 +1047,7 @@ const CCalendar = defineComponent({
               Calendar(_calendarDate),
             ])
           }),
-        ],
+        ]
       )
   },
 })

package/src/components/calendar/types.ts

@@ -0,0 +1,5 @@
+export type DisabledDate = ((date: Date) => boolean) | Date | Date[]
+
+export type SelectionTypes = 'day' | 'week' | 'month' | 'year'
+
+export type ViewTypes = 'days' | 'months' | 'years'