@coreui/vue-pro 5.13.0 → 5.15.0

package/src/components/calendar/CCalendar.ts

@@ -1,7 +1,5 @@
 import { defineComponent, h, nextTick, PropType, ref, watch } from 'vue'
 
-import { CButton } from '../button'
-
 import {
   convertToDateObject,
   createGroupsInArray,
@@ -293,6 +291,11 @@ const CCalendar = defineComponent({
     watch(
       () => props.calendarDate,
       () => {
+        if (props.calendarDate === null) {
+          calendarDate.value = new Date()
+          return
+        }
+
         if (props.calendarDate) {
           calendarDate.value = new Date(props.calendarDate)
         }
@@ -355,6 +358,10 @@ const CCalendar = defineComponent({
     })
 
     const setCalendarPage = (years: number, months = 0, setMonth?: number) => {
+      if (calendarDate.value === null) {
+        return
+      }
+
       const year = calendarDate.value.getFullYear()
       const month = calendarDate.value.getMonth()
       const d = new Date(year, month, 1)
@@ -684,13 +691,12 @@ const CCalendar = defineComponent({
                 props.disabledDates
               )
               const isSelected = isDateSelected(date, startDate.value, endDate.value)
-              const current = days.some((day) => day.month === 'current')
               return h(
                 'tr',
                 {
                   class: [
                     'calendar-row',
-                    {
+                    props.selectionType === 'week' && {
                       disabled: isDisabled,
                       range:
                         props.selectionType === 'week' &&
@@ -702,10 +708,10 @@ const CCalendar = defineComponent({
                       selected: isSelected,
                     },
                   ],
-                  tabindex: props.selectionType === 'week' && current && !isDisabled ? 0 : -1,
-                  ...(isSelected && { 'aria-selected': true }),
-                  ...(props.selectionType === 'week' &&
-                    !isDisabled && {
+                  ...(props.selectionType === 'week' && {
+                    tabindex: !isDisabled ? 0 : -1,
+                    ...(isSelected && { 'aria-selected': true }),
+                    ...(!isDisabled && {
                       onBlur: () => handleCalendarMouseLeave(),
                       onClick: () => handleCalendarClick(date),
                       onFocus: () => handleCalendarMouseEnter(date),
@@ -713,14 +719,11 @@ const CCalendar = defineComponent({
                       onMouseenter: () => handleCalendarMouseEnter(date),
                       onMouseleave: () => handleCalendarMouseLeave(),
                     }),
+                  }),
                 },
                 [
                   props.showWeekNumber &&
-                    h(
-                      'th',
-                      { class: 'calendar-cell-week-number' },
-                      week.number
-                    ),
+                    h('th', { class: 'calendar-cell-week-number' }, week.number),
                   days.map(({ date, month }: { date: Date; month: string }) => {
                     const isDisabled = isDateDisabled(
                       date,
@@ -900,41 +903,33 @@ const CCalendar = defineComponent({
             },
             [
               h(
-                CButton,
+                'button',
                 {
-                  color: 'transparent',
-                  size: 'sm',
+                  class: 'calendar-nav-btn',
                   'aria-label': props.ariaNavPrevYearLabel,
                   onClick: () => handleNavigationOnClick('prev', true),
                 },
-                {
-                  /**
-                   * @slot Location for double previous icon.
-                   */
-                  default: () =>
-                    slots.navPrevDoubleIcon
-                      ? slots.navPrevDoubleIcon()
-                      : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
-                }
+                /**
+                 * @slot Location for double previous icon.
+                 */
+                slots.navPrevDoubleIcon
+                  ? slots.navPrevDoubleIcon()
+                  : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' })
               ),
               view.value === 'days' &&
                 h(
-                  CButton,
+                  'button',
                   {
-                    color: 'transparent',
-                    size: 'sm',
+                    class: 'calendar-nav-btn',
                     'aria-label': props.ariaNavPrevMonthLabel,
                     onClick: () => handleNavigationOnClick('prev'),
                   },
-                  {
-                    /**
-                     * @slot Location for previous icon.
-                     */
-                    default: () =>
-                      slots.navPrevIcon
-                        ? slots.navPrevIcon()
-                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
-                  }
+                  /**
+                   * @slot Location for previous icon.
+                   */
+                  slots.navPrevIcon
+                    ? slots.navPrevIcon()
+                    : h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' })
                 ),
             ]
           ),
@@ -948,27 +943,25 @@ const CCalendar = defineComponent({
           [
             view.value === 'days' &&
               h(
-                CButton,
+                'button',
                 {
-                  color: 'transparent',
-                  size: 'sm',
+                  class: 'calendar-nav-btn',
                   onClick: () => {
                     if (props.navigation) view.value = 'months'
                   },
                 },
-                () => _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
+                _calendarDate.toLocaleDateString(props.locale, { month: 'long' })
               ),
             h(
-              CButton,
+              'button',
               {
-                color: 'transparent',
-                size: 'sm',
+                class: 'calendar-nav-btn',
                 onClick: () => {
                   if (props.navigation) view.value = 'years'
                 },
                 ...(props.navYearFirst && { style: { order: '-1' } }),
               },
-              () => _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })
+              _calendarDate.toLocaleDateString(props.locale, { year: 'numeric' })
             ),
           ]
         ),
@@ -981,40 +974,32 @@ const CCalendar = defineComponent({
             [
               view.value === 'days' &&
                 h(
-                  CButton,
+                  'button',
                   {
-                    color: 'transparent',
-                    size: 'sm',
+                    class: 'calendar-nav-btn',
                     'aria-label': props.ariaNavNextMonthLabel,
                     onClick: () => handleNavigationOnClick('next'),
                   },
-                  {
-                    /**
-                     * @slot Location for next icon.
-                     */
-                    default: () =>
-                      slots.navNextIcon
-                        ? slots.navNextIcon()
-                        : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
-                  }
+                  /**
+                   * @slot Location for next icon.
+                   */
+                  slots.navNextIcon
+                    ? slots.navNextIcon()
+                    : h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' })
                 ),
               h(
-                CButton,
+                'button',
                 {
-                  color: 'transparent',
-                  size: 'sm',
+                  class: 'calendar-nav-btn',
                   'aria-label': props.ariaNavNextYearLabel,
                   onClick: () => handleNavigationOnClick('next', true),
                 },
-                {
-                  /**
-                   * @slot Location for double next icon.
-                   */
-                  default: () =>
-                    slots.navNextDoubleIcon
-                      ? slots.navNextDoubleIcon()
-                      : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
-                }
+                /**
+                 * @slot Location for double next icon.
+                 */
+                slots.navNextDoubleIcon
+                  ? slots.navNextDoubleIcon()
+                  : h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' })
               ),
             ]
           ),
@@ -1036,7 +1021,7 @@ const CCalendar = defineComponent({
         },
         [
           Array.from({ length: props.calendars }, (_, index) => {
-            const _calendarDate = getCalendarDate(calendarDate.value, index, view.value)
+            const _calendarDate = getCalendarDate(calendarDate.value as Date, index, view.value)
             return h('div', { class: ['calendar', view.value] }, [
               Navigation(_calendarDate),
               Calendar(_calendarDate),