@coreui/vue-pro 5.8.1 → 5.10.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,10 +14,19 @@ import {
   isDateInRange,
   isDateSelected,
   isDisableDateInRange,
-  isSameDateAs,
+  isMonthDisabled,
+  isMonthInRange,
+  isMonthSelected,
   isToday,
+  isSameDateAs,
+  isYearDisabled,
+  isYearInRange,
+  isYearSelected,
+  getSelectableDates,
 } from './utils'
 
+import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
+
 const CCalendar = defineComponent({
   name: 'CCalendar',
   props: {
@@ -95,7 +104,7 @@ const CCalendar = defineComponent({
      * Specify the list of dates that cannot be selected.
      */
     disabledDates: {
-      type: Array as PropType<Date[] | Date[][]>,
+      type: [Array, Date, Function] as PropType<DisabledDate | DisabledDate[]>,
     },
     /**
      * Initial selected to date (range).
@@ -163,9 +172,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.
@@ -263,25 +272,19 @@ const CCalendar = defineComponent({
       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 },
     )
@@ -355,9 +358,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
 
@@ -365,10 +376,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') {
@@ -389,6 +396,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
@@ -432,7 +444,17 @@ const CCalendar = defineComponent({
     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 (
@@ -445,7 +467,7 @@ const CCalendar = defineComponent({
 
         if (
           maxDate.value &&
-          date >= convertToDateObject(maxDate.value, props.selectionType) &&
+          date >= maxDate.value &&
           (event.key === 'ArrowRight' || event.key === 'ArrowDown')
         ) {
           return
@@ -453,7 +475,7 @@ const CCalendar = defineComponent({
 
         if (
           minDate.value &&
-          date <= convertToDateObject(minDate.value, props.selectionType) &&
+          date <= minDate.value &&
           (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
         ) {
           return
@@ -465,13 +487,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
@@ -518,20 +534,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') {
@@ -791,13 +803,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,
                   )
-                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
+                  const isSelected = isMonthSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -809,9 +821,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,
@@ -837,13 +849,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,
                   )
-                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
+                  const isSelected = isYearSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -855,9 +867,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,

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'